Working experimental targetPreview

frontend/src/App.tsx

@@ -10,17 +10,6 @@ function App() {
     x: 0,
     y: 0
   })
-  const [targetPreview, setTargetPreview] = useState({
-    event: false,
-    x: 0,
-    y: 0,
-    style: {
-      height: 0,
-      top: 0,
-      left: 0,
-      width: 0
-    }
-  })
 
   let borderTiles: JSX.Element[] = [];
   let shipElems: JSX.Element[] = [];
@@ -81,49 +70,23 @@ function App() {
           className={classNames}
           style={{'--x': (x + 1), '--y': (y + 1)} as CSSProperties}
           onClick={action ? () => setTarget({ event: true, x, y }) : () => {}}
-          onMouseEnter={e => {
-            const target = e.target as HTMLDivElement
-            if (action) {
-              setTargetPreview({
-                event: true,
-                x,
-                y,
-                style: {
-                  height: target.offsetHeight,
-                  left: target.offsetLeft,
-                  top: target.offsetTop,
-                  width: target.offsetWidth,
-                }
-              })
-            } else {
-              setTargetPreview(e => Object.assign({...e}, {
-                style: {
-                  height: target.offsetHeight,
-                  left: target.offsetLeft,
-                  top: target.offsetTop,
-                  width: target.offsetWidth,
-                }
-              }))
-            }
-          }}
-          onMouseLeave={action ? () => setTargetPreview(e => Object.assign({...e}, {event: false})) : () => {}}
-          ></div>)
+        ></div>
+      )
     }
   }
   
 
   for (let i = 1; i <= 6; i++) {
     shipElems.push(
-      <div key={i} className={`ship s${i}`} style={{'--i': i+3} as CSSProperties}>
+      <div key={i} className={`ship s${i}`} style={{'--x': i+3} as CSSProperties}>
         <img src={`/svgs/${i}.svg`} alt={`${i}.svg`}/>
       </div>);
   }
+
   return (
     <div className="App">
       <header className="App-header">
-        {[1,2,3,4,5,6,11,12,13,14].map((num, i) => <img key={i} src={`/svgs/${num}.svg`} alt={`${num}.svg`} />)}
-        {[1,2,3,4].map((num, i) => <img key={i} src={`/fog/fog${num}.png`} alt={`fog${num}.png`} />)}
-        <div id="game-frame">
+        <div id="game-frame" style={{'--i': count} as CSSProperties}>
           {/* Bordes */}
           { borderTiles }
 
@@ -143,7 +106,7 @@ function App() {
           <div className={`hit-svg target ${target.event ? 'show' : ''}`} style={{'--x': target.x+1, '--y': target.y+1} as CSSProperties}>
             <FontAwesomeIcon icon={faCrosshairs} />
           </div>
-          <div className={`hit-svg target-preview ${targetPreview.event && (target.x !== targetPreview.x || target.y !== targetPreview.y) ? 'show' : ''}`} style={targetPreview.style}>
+          <div className={`hit-svg target-preview`}>
             <FontAwesomeIcon icon={faCrosshairs} />
           </div>
         </div>

frontend/src/styles/App.scss

@@ -11,12 +11,6 @@
   pointer-events: none;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
 .App-header {
   background-color: $theme;
   min-height: 100vh;
@@ -42,9 +36,11 @@
 
 #game-frame {
   // border: 1px solid orange;
-  // position: relative;
-  height: 945px;
-  width: 945px;
+  position: relative;
+  $height: 945px;
+  $width: $height;
+  height: $height;
+  width: $width;
   display: grid;
   align-items: center;
   justify-items: center;
@@ -101,6 +97,39 @@
       -webkit-mask-image: -webkit-gradient(linear, left top, 
         left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
     }
+
+    $point-size: 1;
+    $count: 12;
+    $grid-elem-width: $count + 2;
+    $warst: $count + 1.5;
+    $one: calc($height / $warst);
+    $elements-in-grid: $grid-elem-width * $grid-elem-width;
+    
+    // Inspired by https://stackoverflow.com/questions/35990505/get-position-of-mouse-pointer-in-css-without-javascript
+    @for $i from 1 through $elements-in-grid {
+      &:nth-child(#{$i}) {
+        &:hover {
+          &:not(.edge) ~ .target-preview {
+            opacity: 1;
+          }
+          & ~ .target-preview {
+            $row: ceil(calc($i / $grid-elem-width));
+            top: (
+              ($row - 2)
+              * $one
+              + ($one * 0.75)
+              );
+            left: (
+              ($i
+                - (($row - 1) * $grid-elem-width)
+                - 2)
+              * $one
+              + ($one * 0.75)
+            );
+          }
+        }
+      }
+    }
   }
   > :not(.border) {
     box-sizing: border-box;
@@ -119,7 +148,7 @@
     align-items: center;
     // justify-content: center;
     border: 1px solid yellow;
-    grid-row: var(--i);
+    grid-row: var(--x);
     
     img {
       position: absolute;
@@ -193,6 +222,10 @@
       opacity: 0;
       position: absolute;
       @include transition(.2s);
+      
+      $count: 12;
+      height: calc($height / ($count + 1.5));
+      width: calc($height / ($count + 1.5));
 
       &.show {
         opacity: 1;