diff --git a/leaky-ships/components/Gamefield.tsx b/leaky-ships/components/Gamefield.tsx index 7423dd3..6a6fcb4 100644 --- a/leaky-ships/components/Gamefield.tsx +++ b/leaky-ships/components/Gamefield.tsx @@ -17,7 +17,7 @@ function Gamefield() { settingTarget, setMouseCursor, hits - } = useGameEvent() + } = useGameEvent(count) return (
diff --git a/leaky-ships/components/useGameEvent.tsx b/leaky-ships/components/useGameEvent.tsx index d4a15b4..34d0c87 100644 --- a/leaky-ships/components/useGameEvent.tsx +++ b/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(initlialLastLeftTile) const [target, setTarget] = useState(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) => { - 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 targetList = useCallback((target: Position) => { 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), - // isborder: x < 2 || x > count + 1 || y < 2 || y > count + 1 + imply: !!isHit(hits, x, y).length || (!!isSet(x, y) && preview) } }) - // .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 \ No newline at end of file