aronmal/leaky-ships
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Implement if target or preview 'hasAnyBorder'

Browse source
This commit is contained in:
aronmal 2023-02-01 10:59:19 +01:00
parent 986064efe1
commit 5051fec3ef
Signed by: aronmal
GPG key ID: 816B7707426FC612
2 changed files with 32 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

2
leaky-ships/components/Gamefield.tsx
View file

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

53
leaky-ships/components/useGameEvent.tsx
View file

@ -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) => {
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