Add implied border

leaky-ships/components/useGameEvent.tsx

@@ -84,7 +84,12 @@ function useGameEvent(count: number) {
                     y > count,
                 ].reduce((prev, curr) => prev || curr, false)
                 // console.log(!isHit(hits, x, y).length, !borders)
-                return !isHit(hits, x, y).length && !border
+                return !border
+            }).map(field => {
+                const { x, y } = field
+                if (isHit(hits, x, y).length)
+                    return { ...field, edges: [...field.edges, 'imply'] }
+                return field
             })
         setTargetList(e => {
             if (JSON.stringify(e) === JSON.stringify(result))
@@ -104,14 +109,21 @@ function useGameEvent(count: number) {
                     y > count + 1,
                 ].reduce((prev, curr) => prev || curr, false)
                 // console.log(!isHit(hits, x, y).length, !isSet(x, y), !borders)
-                return !isHit(hits, x, y).length && !isSet(x, y) && !border
+                return !border
+            }).map(field => {
+                const { x, y } = field
+                if (isHit(hits, x, y).length || isSet(x, y))
+                    return { ...field, edges: [...field.edges, 'imply'] }
+                return field
             })
+        if (!targetPreviewPos.shouldShow)
+            return
         setTargetPreviewList(e => {
             if (JSON.stringify(e) === JSON.stringify(result))
                 return e
             return result
         })
-    }, [scopeGrid, targetPreview, count, hits, isSet]);
+    }, [scopeGrid, targetPreview, count, hits, isSet, targetPreviewPos.shouldShow]);
 
     // handle visibility and position change of targetPreview
     useEffect(() => {

leaky-ships/styles/App.scss

@@ -154,7 +154,7 @@ body {
         color: red;
       }
     }
-    
+
     &.target {
       --color: red;
       color: var(--color);
@@ -172,6 +172,10 @@ body {
       opacity: 1;
     }
 
+    &.imply>svg {
+      opacity: 0;
+    }
+
     &.left {
       border-left: 2px solid var(--color);
     }
@@ -188,6 +192,22 @@ body {
       border-bottom: 2px solid var(--color);
     }
 
+    &.imply.left {
+      border-left: 2px dashed white;
+    }
+
+    &.imply.right {
+      border-right: 2px dashed white;
+    }
+
+    &.imply.top {
+      border-top: 2px dashed white;
+    }
+
+    &.imply.bottom {
+      border-bottom: 2px dashed white;
+    }
+
     &.left.top {
       border-top-left-radius: 8px;
     }