Adapt to assets

leaky-ships/components/Gamefield.tsx

@@ -1,5 +1,3 @@
-import { faCrosshairs } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { CSSProperties, useEffect, useReducer, useState } from 'react';
 import Bluetooth from './Bluetooth';
 import BorderTiles from './BorderTiles';
@@ -21,13 +19,14 @@ function Gamefield() {
     useEffect(() => {
         const { newX, newY, shouldShow, appearOK, eventReady, show, x, y } = targetPreview;
         const positionChange = !(x === newX && y === newY);
+        const alreadyTargeting = target.show && target.x === targetPreview.newX && target.y === targetPreview.newY
         // if not ready or no new position
         if (!eventReady || (!positionChange && show))
             return;
         if (show) {
             // hide preview to change position when hidden
             setTargetPreview(e => ({ ...e, appearOK: false, eventReady: false, show: false }));
-        } else if (shouldShow && appearOK && !isHit(hits, newX, newY).length) {
+        } else if (shouldShow && appearOK && !isHit(hits, newX, newY).length && !alreadyTargeting) {
             // BUT only appear again if it's supposed to (in case the mouse left over the edge) and ()
             setTargetPreview(e => ({ ...e, appearOK: false, eventReady: false, show: true, x: newX, y: newY }));
         }
@@ -102,10 +101,10 @@ function Gamefield() {
                 {/* Fog images */}
                 {/* <FogImages /> */}
                 <div className={`hit-svg target ${target.show ? 'show' : ''}`} style={{ '--x': target.x, '--y': target.y } as CSSProperties}>
-                    <FontAwesomeIcon icon={faCrosshairs} />
+                    <img src='/assets/scope.png' alt='Crosshair' />
                 </div>
-                <div className={`hit-svg target-preview ${targetPreview.show && (target.x !== targetPreview.x || target.y !== targetPreview.y) ? 'show' : ''}`} style={{ '--x': targetPreview.x, '--y': targetPreview.y } as CSSProperties}>
+                <div className={`hit-svg target-preview ${targetPreview.show ? 'show' : ''}`} style={{ '--x': targetPreview.x, '--y': targetPreview.y } as CSSProperties}>
-                    <FontAwesomeIcon icon={faCrosshairs} />
+                    <img src='/assets/scope.png' alt='Crosshair' />
                 </div>
             </div>
             {/* <p>

leaky-ships/components/Ships.tsx

@@ -1,19 +1,24 @@
-import Image from 'next/image';
 import { CSSProperties } from 'react'
 
 function Ships() {
-    let shipIndexes: number[] = [];
+    let shipIndexes = [
-
+        { size: 2, index: null },
-    for (let i = 1; i <= 6; i++) {
+        { size: 3, index: 1 },
-      shipIndexes.push(i);
+        { size: 3, index: 2 },
-    }
+        { size: 3, index: 3 },
+        { size: 4, index: 1 },
+        { size: 4, index: 2 }
+    ];
 
     return <>
-        {shipIndexes.map(i =>
+        {shipIndexes.map(({ size, index }, i) => {
-            <div key={i} className={`ship s${i}`} style={{'--x': i+3} as CSSProperties}>
+            const filename = `/assets/ship_blue_${size}x${index ? '_' + index : ''}.gif`
-                <Image src={`/svgs/${i}.svg`} alt={`${i}.svg`}/>
+            return (
-            </div>
+                <div key={i} className={`ship s${size}`} style={{ '--x': i + 3 } as CSSProperties}>
-        )}
+                    <img src={filename} alt={filename} />
+                </div>
+            )
+        })}
     </>
 }
 

leaky-ships/styles/App.scss

@@ -52,7 +52,7 @@ body {
 #game-frame {
   // border: 1px solid orange;
   // position: relative;
-  $height: 945px;
+  $height: 864px;
   $width: $height;
   height: $height;
   width: $width;
@@ -113,31 +113,15 @@ body {
       // object-fit: cover;
     }
 
-    &.s1 {
-      grid-column: 3 / 7;
-    }
-
     &.s2 {
       grid-column: 3 / 5;
     }
 
     &.s3 {
       grid-column: 3 / 6;
-
-      img {
-        margin-top: -2%;
-      }
     }
 
     &.s4 {
-      grid-column: 3 / 6;
-    }
-
-    &.s5 {
-      grid-column: 3 / 6;
-    }
-
-    &.s6 {
       grid-column: 3 / 7;
     }
   }
@@ -174,6 +158,11 @@ body {
     &.target {
       color: red;
       opacity: 0;
+
+      img {
+        height: inherit;
+        width: inherit;
+      }
     }
 
     &.target-preview {
@@ -181,6 +170,11 @@ body {
       opacity: 0;
       @include transition(.2s);
 
+      img {
+        height: inherit;
+        width: inherit;
+        filter: sepia() saturate(2000%) hue-rotate(20deg)
+      }
     }
 
     &.show {