Fix #4 - add tooltip for ports

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>

client/src/Board.css

@@ -32,6 +32,23 @@
   background-size: cover;
 }
 
+.Board .Tooltip {
+  display: none;
+  font-size: 0.75rem;
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  padding: 0.25rem 0.5rem;
+  background-color: white;
+  border: 1px solid black;
+  border-radius: 0.25rem;
+  text-align: center;
+  vertical-align: middle;
+  z-index: 10000;
+  transform: translate(0, -50%);
+  opacity: 0.9;
+}
+
 .Pip {
   z-index: 50; /* Above Tile (5,10), Road (12), Corner (20) */
   position: absolute;

client/src/Board.js

@@ -559,6 +559,63 @@ const Board = () => {
       });
     };
 
+    const showTooltip = () => {
+      document.querySelector('.Board .Tooltip').style.display = 'flex';
+    }
+
+    const clearTooltip = () => {
+      document.querySelector('.Board .Tooltip').style.display = 'none';
+    }
+
+    const calculateBorderSlot = (side, e) => {
+      const borderBox = document.querySelector('.Borders').getBoundingClientRect();
+      let angle = (360 + Math.floor(90 + Math.atan2(e.pageY - borderBox.top, e.pageX - borderBox.left) * 180 / Math.PI)) % 360 - (side * 60);
+      if (angle > 180) {
+        angle = angle - 360;
+      }
+      let slot = 0;
+      if (angle > -20 && angle < 5) {
+        slot = 1;
+      } else if (angle > 5) {
+        slot = 2;
+      }
+      return slot;
+    }
+
+    const mouseEnter = (border, side, e) => {
+      const slot = calculateBorderSlot(side, e);
+      if (!border[slot]) {
+        clearTooltip();
+        return;
+      }
+      const tooltip = document.querySelector('.Board .Tooltip');
+      tooltip.textContent = border[slot] === 'bank' 
+        ? '3 of one kind for 1 resource' : 
+        `2 ${border[slot]} for 1 resource`;
+      tooltip.style.top = `${e.pageY}px`;
+      tooltip.style.left = `${e.pageX + 16}px`;
+      showTooltip();
+    };
+
+    const mouseMove = (border, side, e) => {
+      const slot = calculateBorderSlot(side, e);
+      if (!border[slot]) {
+        clearTooltip();
+        return;
+      }
+      const tooltip = document.querySelector('.Board .Tooltip');
+      tooltip.textContent = border[slot] === 'bank'
+        ? '3 of one kind for 1 resource' :
+        `2 ${border[slot]} for 1 resource`;
+      tooltip.style.top = `${e.pageY}px`;
+      tooltip.style.left = `${e.pageX + 16}px`;
+      showTooltip();
+    }
+
+    const mouseLeave = (border, e) => {
+      clearTooltip();
+    };
+
     const generateBorders = function(borderOrder) {
       const sides = 6;
       let side = -1;
@@ -569,10 +626,14 @@ const Board = () => {
           y = Math.cos(Math.PI - side / sides * 2. * Math.PI) * radius;
         let prev = (order === 0) ? 6 : order;
         const file = `borders-${order+1}.${prev}.png`;
+        const value = side;
         return <div
           key={`border-${order}`}
           className="Border"
           border={border}
+          onMouseEnter={(e) => { mouseEnter(border, value, e) }}
+          onMouseMove={(e) => { mouseMove(border, value, e) }}
+          onMouseLeave={mouseLeave}
           style={{
             width: `${borderImageWidth}px`,
             height: `${borderImageHeight}px`,
@@ -751,6 +812,7 @@ const Board = () => {
   console.log(`board - tile elements`, tileElements);
   return (
     <div className="Board" ref={board}>
+      <div className="Tooltip">tooltip</div>
       <div className="BoardBox">
         <div className="Borders" disabled>
           { borderElements }