From a282e35119f466b757c28348984f1b6266649bee Mon Sep 17 00:00:00 2001 From: aronmal Date: Thu, 12 Jan 2023 11:40:29 +0100 Subject: [PATCH] Added and changed types --- leaky-ships/components/useGameEvent.tsx | 90 ++++++++++++------------- leaky-ships/interfaces.ts | 52 +++++++++++--- 2 files changed, 89 insertions(+), 53 deletions(-) diff --git a/leaky-ships/components/useGameEvent.tsx b/leaky-ships/components/useGameEvent.tsx index 88c3537..64b4cb9 100644 --- a/leaky-ships/components/useGameEvent.tsx +++ b/leaky-ships/components/useGameEvent.tsx @@ -1,6 +1,6 @@ import { useCallback, useEffect, useMemo, useReducer, useState } from 'react'; import { hitReducer, initlialLastLeftTile, initlialTarget, initlialTargetPreview, initlialTargetPreviewPos, isHit } from '../helpers'; -import { HitType, LastLeftTileType, TargetPreviewPosType, TargetPreviewType, TargetType } from '../interfaces'; +import { HitType, LastLeftTileType, TargetListType, TargetModifierType, TargetPreviewPosType, TargetPreviewType, TargetType } from '../interfaces'; import Item from './Item'; import Target from './Target'; @@ -13,20 +13,8 @@ function useGameEvent(count: number) { const [targetPreviewPos, setTargetPreviewPos] = useState(initlialTargetPreviewPos); const [hits, DispatchHits] = useReducer(hitReducer, [] as HitType[]); const [mode, setMode] = useState('none') - const [targetList, setTargetList] = useState<{ - show: boolean, - x: number, - y: number, - edges: string[], - imply: boolean - }[]>([]) - const [targetPreviewList, setTargetPreviewList] = useState<{ - show: boolean, - x: number, - y: number, - edges: string[], - imply: boolean - }[]>([]) + const [targetList, setTargetList] = useState([]) + const [targetPreviewList, setTargetPreviewList] = useState([]) const modes = useMemo(() => ({ none: { xEnable: true, yEnable: true, type: 'none' }, @@ -36,15 +24,24 @@ function useGameEvent(count: number) { missle: { xEnable: false, yEnable: false, type: 'missle' } }), []) - function modXY(e: { show: boolean, x: number, y: number }, mod: { x: number, y: number, edges: string[] }) { - return { show: e.show, x: e.x + (mod.x ?? 0), y: e.y + (mod.y ?? 0), edges: mod.edges } + function modXY(e: TargetType, mod: TargetModifierType) { + const { show, ...pos } = e + const { target, params } = mod + return { + target: { + show, + x: pos.x + (target.x ?? 0), + y: pos.y + (target.y ?? 0) + }, + params + } } - const isSet = useCallback((x: number, y: number) => targetList.filter(target => x === target.x && y === target.y).length && target.show, [targetList, target]) + const isSet = useCallback((x: number, y: number) => targetList.filter(({ target }) => x === target.x && y === target.y).length && target.show, [targetList, target]) const scopeGrid = useMemo(() => { - const { xEnable, yEnable, type } = modes[mode] - const matrix: { x: number, y: number, edges: string[] }[][] = [] + const { xEnable, yEnable } = modes[mode] + const matrix: TargetModifierType[][] = [] let y = 0 let x = 0 const yLength = (yEnable ? 2 : 0) @@ -55,30 +52,34 @@ function useGameEvent(count: number) { x = i2 + (xEnable ? -1 : 0); (matrix[i] ??= [])[i2] = { - x, - y, - edges: [ - i2 === 0 ? 'left' : '', - i2 === xLength ? 'right' : '', - i === 0 ? 'top' : '', - i === yLength ? 'bottom' : '', - ] + target: { + x, + y, + }, + params: { + edges: [ + i2 === 0 ? 'left' : '', + i2 === xLength ? 'right' : '', + i === 0 ? 'top' : '', + i === yLength ? 'bottom' : '', + ], + imply: false + } } } } const fields = matrix.reduce((prev, curr) => [...prev, ...curr], []) - return { fields, type } + return fields }, [modes, mode]) - const Targets = useCallback((targets: { show: boolean, x: number, y: number, edges: string[], imply: boolean }[], preview?: boolean) => { - const { type } = scopeGrid - return targets.map(({ edges, imply, ...target }, i) => ) - }, [scopeGrid]) + const Targets = useCallback((targets: TargetListType[], preview?: boolean) => { + const { type } = modes[mode] + return targets.map(({ target, params }, i) => ) + }, [modes, mode]) useEffect(() => { - const { fields } = scopeGrid - const result = fields.map(e => modXY(target, e)) - .filter(({ x, y }) => { + const result = scopeGrid.map(e => modXY(target, e)) + .filter(({ target: { x, y } }) => { const border = [ x < 2, x > count, @@ -87,10 +88,10 @@ function useGameEvent(count: number) { ].reduce((prev, curr) => prev || curr, false) return !border }).map(field => { - const { x, y } = field + const { x, y } = field.target if (isHit(hits, x, y).length) - return { ...field, imply: true } - return { ...field, imply: false } + return Object.assign(field, { imply: true }) + return field }) setTargetList(e => { if (JSON.stringify(e) === JSON.stringify(result)) @@ -100,9 +101,8 @@ function useGameEvent(count: number) { }, [scopeGrid, target, count, hits]); useEffect(() => { - const { fields } = scopeGrid - const result = fields.map(e => modXY(targetPreview, e)) - .filter(({ x, y }) => { + const result = scopeGrid.map(e => modXY(targetPreview, e)) + .filter(({ target: { x, y } }) => { const border = [ x < 2, x > count + 1, @@ -111,10 +111,10 @@ function useGameEvent(count: number) { ].reduce((prev, curr) => prev || curr, false) return !border }).map(field => { - const { x, y } = field + const { x, y } = field.target if (isHit(hits, x, y).length || isSet(x, y)) - return { ...field, imply: true } - return { ...field, imply: false } + return Object.assign(field, { imply: true }) + return field }) if (!targetPreviewPos.shouldShow) return diff --git a/leaky-ships/interfaces.ts b/leaky-ships/interfaces.ts index 3ad75f4..ff01788 100644 --- a/leaky-ships/interfaces.ts +++ b/leaky-ships/interfaces.ts @@ -1,34 +1,70 @@ -export interface LastLeftTileType { +export type LastLeftTileType = { x: number, y: number } -export interface TargetType { +export type TargetType = { show: boolean, x: number, y: number }; -export interface TargetPreviewType { +export type TargetPreviewType = { show: boolean, x: number, y: number }; -export interface TargetPreviewPosType { +export type TargetPreviewPosType = { shouldShow: boolean, x: number, y: number } -export interface FieldType { +export type TargetListType = { + target: { + show: boolean, + x: number, + y: number, + }, + params: { + edges: string[], + imply: boolean + } +} +export type TargetModifierType = { + target: { + x: number, + y: number, + }, + params: { + edges: string[], + imply: boolean + } +} +export type FieldType = { field: string, x: number, y: number, }; -export interface HitType { +export type HitType = { hit: boolean, x: number, y: number, }; -interface fireMissle { type: 'fireMissle', payload: { x: number, y: number, hit: boolean } }; -interface removeMissle { type: 'removeMissle', payload: { x: number, y: number, hit: boolean } }; +type fireMissle = { + type: 'fireMissle', + payload: { + x: number, + y: number, + hit: boolean + } +}; +type removeMissle = { + type: + 'removeMissle', + payload: { + x: number, + y: number, + hit: boolean + } +}; export type HitDispatchType = fireMissle | removeMissle;