Implement if target or preview 'hasAnyBorder'

leaky-ships/components/Gamefield.tsx

@@ -17,7 +17,7 @@ function Gamefield() {
         settingTarget,
         setMouseCursor,
         hits
-    } = useGameEvent()
+    } = useGameEvent(count)
 
     return (
         <div id='gamefield'>

leaky-ships/components/useGameEvent.tsx

@@ -4,7 +4,7 @@ import { Hit, Items, Mode, MouseCursor, Target, Position } from '../interfaces/f
 import Item from './Item'
 import GamefieldPointer from './GamefieldPointer'
 
-function useGameEvent() {
+function useGameEvent(count: number) {
     const [lastLeftTile, setLastLeftTile] = useState<Position>(initlialLastLeftTile)
     const [target, setTarget] = useState<Target>(initlialTarget)
     const [eventReady, setEventReady] = useState(false)
@@ -21,21 +21,7 @@ function useGameEvent() {
         { pointerGrid: [[{ x: 0, y: 0 }]], type: 'missile' }
     ], [])
 
-    const settingTarget = useCallback((isGameTile: boolean, x: number, y: number) => {
+    const targetList = useCallback((target: Position) => {
-        if (!isGameTile || isHit(hits, x, y).length)
-            return
-        setMouseCursor(e => ({ ...e, shouldShow: false }))
-        setTarget(t => {
-            if (t.x === x && t.y === y && t.show) {
-                DispatchHits({ type: 'fireMissile', payload: { hit: (x + y) % 2 !== 0, x, y } })
-                return { preview: false, show: false, x, y }
-            } else {
-                return { preview: false, show: true, x, y }
-            }
-        })
-    }, [hits])
-
-    const targetList = useCallback((target: Target) => {
         const { pointerGrid, type } = modes[mode]
         const xLength = pointerGrid.length
         const yLength = pointerGrid[0].length
@@ -62,6 +48,25 @@ function useGameEvent() {
             .reduce((prev, curr) => [...prev, ...curr], [])
     }, [mode, modes])
 
+    const settingTarget = useCallback((isGameTile: boolean, x: number, y: number) => {
+        if (!isGameTile || isHit(hits, x, y).length)
+            return
+        setMouseCursor(e => ({ ...e, shouldShow: false }))
+        setTarget(t => {
+            if (t.x === x && t.y === y && t.show) {
+                DispatchHits({ type: 'fireMissile', payload: { hit: (x + y) % 2 !== 0, x, y } })
+                return { preview: false, show: false, x, y }
+            } else {
+                const target = { preview: false, show: true, x, y }
+                const hasAnyBorder = targetList(target).filter(({ x, y }) => isBorder(x, y, count)).length
+                if (hasAnyBorder)
+                    return t
+                return target
+
+            }
+        })
+    }, [count, hits, targetList])
+
     const isSet = useCallback((x: number, y: number) => !!targetList(target).filter(field => x === field.x && y === field.y).length && target.show, [target, targetList])
 
     const composeTargetTiles = useCallback((target: Target) => {
@@ -74,11 +79,9 @@ function useGameEvent() {
                 show,
                 type,
                 edges,
-                imply: !!isHit(hits, x, y).length || (!!isSet(x, y) && preview),
+                imply: !!isHit(hits, x, y).length || (!!isSet(x, y) && preview)
-                // isborder: x < 2 || x > count + 1 || y < 2 || y > count + 1
             }
         })
-        // .filter(({ isborder }) => !isborder)
         return result
     }, [hits, isSet, targetList])
 
@@ -101,10 +104,12 @@ function useGameEvent() {
     // enable targetPreview event again after 200 ms.
     useEffect(() => {
         setEventReady(false)
-        if (targetPreview.show || !appearOK)
+        const previewTarget = { x: mouseCursor.x, y: mouseCursor.y }
+        const hasAnyBorder = targetList(previewTarget).filter(({ x, y }) => isBorder(x, y, count)).length
+        if (targetPreview.show || !appearOK || hasAnyBorder)
             return
         const autoTimeout = setTimeout(() => {
-            setTargetPreview(e => ({ ...e, x: mouseCursor.x, y: mouseCursor.y }))
+            setTargetPreview(e => ({ ...e, ...previewTarget }))
             setEventReady(true)
             setAppearOK(true)
         }, 300)
@@ -113,7 +118,7 @@ function useGameEvent() {
         return () => {
             clearTimeout(autoTimeout)
         }
-    }, [appearOK, targetPreview.show, mouseCursor.x, mouseCursor.y])
+    }, [appearOK, count, mouseCursor.x, mouseCursor.y, targetList, targetPreview.show])
 
     // approve targetPreview new position after 200 mil. sec.
     useEffect(() => {
@@ -165,4 +170,8 @@ function useGameEvent() {
     }
 }
 
+function isBorder(x: number, y: number, count: number) {
+    return x < 2 || x > count + 1 || y < 2 || y > count + 1
+}
+
 export default useGameEvent