From e28af99c5c6c25b7723cec36c25ad911796cc482 Mon Sep 17 00:00:00 2001 From: aronmal Date: Wed, 11 Jan 2023 21:13:46 +0100 Subject: [PATCH 1/7] Hotfix --- leaky-ships/components/Ships.tsx | 2 +- leaky-ships/components/useGameEvent.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/leaky-ships/components/Ships.tsx b/leaky-ships/components/Ships.tsx index ac03ff2..a7af171 100644 --- a/leaky-ships/components/Ships.tsx +++ b/leaky-ships/components/Ships.tsx @@ -15,7 +15,7 @@ function Ships() { {shipIndexes.map(({ size, index }, i) => { const filename = `/assets/ship_blue_${size}x${index ? '_' + index : ''}.gif` return ( -
+
{filename}
) diff --git a/leaky-ships/components/useGameEvent.tsx b/leaky-ships/components/useGameEvent.tsx index 2c05269..6f8f240 100644 --- a/leaky-ships/components/useGameEvent.tsx +++ b/leaky-ships/components/useGameEvent.tsx @@ -71,7 +71,7 @@ function useGameEvent(count: number) { const Targets = useCallback((targets: { show: boolean, x: number, y: number, edges: string[] }[], preview?: boolean) => { const { type } = scopeGrid return targets.map(({ edges, ...target }, i) => ) - }, [scopeGrid, mode]) + }, [scopeGrid]) useEffect(() => { const { fields } = scopeGrid From c883aa91f0363e613c473ad4bd618d07b551f4d5 Mon Sep 17 00:00:00 2001 From: aronmal Date: Thu, 12 Jan 2023 09:59:39 +0100 Subject: [PATCH 2/7] Add implied border --- leaky-ships/components/useGameEvent.tsx | 18 +++++++++++++++--- leaky-ships/styles/App.scss | 22 +++++++++++++++++++++- 2 files changed, 36 insertions(+), 4 deletions(-) diff --git a/leaky-ships/components/useGameEvent.tsx b/leaky-ships/components/useGameEvent.tsx index 6f8f240..533a641 100644 --- a/leaky-ships/components/useGameEvent.tsx +++ b/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(() => { diff --git a/leaky-ships/styles/App.scss b/leaky-ships/styles/App.scss index 73b72ee..d40b522 100644 --- a/leaky-ships/styles/App.scss +++ b/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; } From dafff04dd861473e218ed3586c20ba9c9ae00c70 Mon Sep 17 00:00:00 2001 From: aronmal Date: Thu, 12 Jan 2023 09:59:57 +0100 Subject: [PATCH 3/7] Change way of imply param --- leaky-ships/components/Target.tsx | 4 ++-- leaky-ships/components/useGameEvent.tsx | 32 ++++++++++++------------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/leaky-ships/components/Target.tsx b/leaky-ships/components/Target.tsx index 085ad8d..94b52aa 100644 --- a/leaky-ships/components/Target.tsx +++ b/leaky-ships/components/Target.tsx @@ -3,9 +3,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { CSSProperties } from 'react'; import classNames from 'classnames'; -function Target({ props: { preview, type, edges }, target: { x, y, show } }: { props: { preview?: boolean, type: string, edges: string[] }, target: { x: number, y: number, show: boolean } }) { +function Target({ props: { preview, type, edges, imply }, target: { x, y, show } }: { props: { preview?: boolean, type: string, edges: string[], imply: boolean }, target: { x: number, y: number, show: boolean } }) { return ( -
+
) diff --git a/leaky-ships/components/useGameEvent.tsx b/leaky-ships/components/useGameEvent.tsx index 533a641..88c3537 100644 --- a/leaky-ships/components/useGameEvent.tsx +++ b/leaky-ships/components/useGameEvent.tsx @@ -14,16 +14,18 @@ function useGameEvent(count: number) { const [hits, DispatchHits] = useReducer(hitReducer, [] as HitType[]); const [mode, setMode] = useState('none') const [targetList, setTargetList] = useState<{ - show: boolean; - x: number; - y: number; - edges: string[]; + show: boolean, + x: number, + y: number, + edges: string[], + imply: boolean }[]>([]) const [targetPreviewList, setTargetPreviewList] = useState<{ - show: boolean; - x: number; - y: number; - edges: string[]; + show: boolean, + x: number, + y: number, + edges: string[], + imply: boolean }[]>([]) const modes = useMemo(() => ({ @@ -68,9 +70,9 @@ function useGameEvent(count: number) { return { fields, type } }, [modes, mode]) - const Targets = useCallback((targets: { show: boolean, x: number, y: number, edges: string[] }[], preview?: boolean) => { + const Targets = useCallback((targets: { show: boolean, x: number, y: number, edges: string[], imply: boolean }[], preview?: boolean) => { const { type } = scopeGrid - return targets.map(({ edges, ...target }, i) => ) + return targets.map(({ edges, imply, ...target }, i) => ) }, [scopeGrid]) useEffect(() => { @@ -83,13 +85,12 @@ function useGameEvent(count: number) { y < 2, y > count, ].reduce((prev, curr) => prev || curr, false) - // console.log(!isHit(hits, x, y).length, !borders) return !border }).map(field => { const { x, y } = field if (isHit(hits, x, y).length) - return { ...field, edges: [...field.edges, 'imply'] } - return field + return { ...field, imply: true } + return { ...field, imply: false } }) setTargetList(e => { if (JSON.stringify(e) === JSON.stringify(result)) @@ -108,13 +109,12 @@ function useGameEvent(count: number) { y < 2, y > count + 1, ].reduce((prev, curr) => prev || curr, false) - // console.log(!isHit(hits, x, y).length, !isSet(x, y), !borders) 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 + return { ...field, imply: true } + return { ...field, imply: false } }) if (!targetPreviewPos.shouldShow) return From 8a2841fd2a27c1623e239768312eb36da9e91285 Mon Sep 17 00:00:00 2001 From: aronmal Date: Thu, 12 Jan 2023 11:40:29 +0100 Subject: [PATCH 4/7] 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; From ff24d40419815541f53d15580b421b1749d045e3 Mon Sep 17 00:00:00 2001 From: aronmal Date: Thu, 12 Jan 2023 11:50:04 +0100 Subject: [PATCH 5/7] Quick fix --- leaky-ships/components/useGameEvent.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/leaky-ships/components/useGameEvent.tsx b/leaky-ships/components/useGameEvent.tsx index 64b4cb9..72c1f46 100644 --- a/leaky-ships/components/useGameEvent.tsx +++ b/leaky-ships/components/useGameEvent.tsx @@ -88,9 +88,10 @@ function useGameEvent(count: number) { ].reduce((prev, curr) => prev || curr, false) return !border }).map(field => { - const { x, y } = field.target + const { target, params } = field + const { x, y } = target if (isHit(hits, x, y).length) - return Object.assign(field, { imply: true }) + return Object.assign(field, Object.assign(params, { imply: true })) return field }) setTargetList(e => { @@ -111,9 +112,10 @@ function useGameEvent(count: number) { ].reduce((prev, curr) => prev || curr, false) return !border }).map(field => { - const { x, y } = field.target + const { target, params } = field + const { x, y } = target if (isHit(hits, x, y).length || isSet(x, y)) - return Object.assign(field, { imply: true }) + return Object.assign(field, Object.assign(params, { imply: true })) return field }) if (!targetPreviewPos.shouldShow) From 3677d22fd49766068f4367b2d396effef5a32e06 Mon Sep 17 00:00:00 2001 From: aronmal Date: Fri, 13 Jan 2023 08:49:09 +0100 Subject: [PATCH 6/7] Implemented amount to Item component --- leaky-ships/components/Item.tsx | 10 ++++--- leaky-ships/components/Target.tsx | 3 ++- leaky-ships/components/useGameEvent.tsx | 36 ++++++++++++------------- leaky-ships/interfaces.ts | 8 ++++++ leaky-ships/styles/App.scss | 31 ++++++++++++++++----- 5 files changed, 60 insertions(+), 28 deletions(-) diff --git a/leaky-ships/components/Item.tsx b/leaky-ships/components/Item.tsx index be562dd..9218365 100644 --- a/leaky-ships/components/Item.tsx +++ b/leaky-ships/components/Item.tsx @@ -1,15 +1,19 @@ -import React from 'react' +import classNames from 'classnames' +import React, { CSSProperties } from 'react' -function Item({ props: { icon, text, callback } }: { +function Item({ props: { icon, text, amount, callback } }: { props: { icon: string, text: string, + amount?: number, callback: () => void } }) { return (
- {`${icon}.png`} +
+ {`${icon}.png`} +
{text}
) diff --git a/leaky-ships/components/Target.tsx b/leaky-ships/components/Target.tsx index 94b52aa..ce1f755 100644 --- a/leaky-ships/components/Target.tsx +++ b/leaky-ships/components/Target.tsx @@ -2,8 +2,9 @@ import { faCrosshairs } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { CSSProperties } from 'react'; import classNames from 'classnames'; +import { TargetType } from '../interfaces'; -function Target({ props: { preview, type, edges, imply }, target: { x, y, show } }: { props: { preview?: boolean, type: string, edges: string[], imply: boolean }, target: { x: number, y: number, show: boolean } }) { +function Target({ props: { preview, type, edges, imply }, target: { x, y, show } }: { props: { preview?: boolean, type: string, edges: string[], imply: boolean }, target: TargetType }) { return (
diff --git a/leaky-ships/components/useGameEvent.tsx b/leaky-ships/components/useGameEvent.tsx index 72c1f46..849a557 100644 --- a/leaky-ships/components/useGameEvent.tsx +++ b/leaky-ships/components/useGameEvent.tsx @@ -1,9 +1,17 @@ import { useCallback, useEffect, useMemo, useReducer, useState } from 'react'; import { hitReducer, initlialLastLeftTile, initlialTarget, initlialTargetPreview, initlialTargetPreviewPos, isHit } from '../helpers'; -import { HitType, LastLeftTileType, TargetListType, TargetModifierType, TargetPreviewPosType, TargetPreviewType, TargetType } from '../interfaces'; +import { HitType, ItemsType, LastLeftTileType, TargetListType, TargetModifierType, TargetPreviewPosType, TargetPreviewType, TargetType } from '../interfaces'; import Item from './Item'; import Target from './Target'; +export const modes = { + none: { xEnable: true, yEnable: true, type: 'none' }, + radar: { xEnable: true, yEnable: true, type: 'radar' }, + hTorpedo: { xEnable: true, yEnable: false, type: 'torpedo' }, + vTorpedo: { xEnable: false, yEnable: true, type: 'torpedo' }, + missle: { xEnable: false, yEnable: false, type: 'missle' } +} + function useGameEvent(count: number) { const [lastLeftTile, setLastLeftTile] = useState(initlialLastLeftTile); const [target, setTarget] = useState(initlialTarget); @@ -16,14 +24,6 @@ function useGameEvent(count: number) { const [targetList, setTargetList] = useState([]) const [targetPreviewList, setTargetPreviewList] = useState([]) - const modes = useMemo(() => ({ - none: { xEnable: true, yEnable: true, type: 'none' }, - radar: { xEnable: true, yEnable: true, type: 'radar' }, - hTorpedo: { xEnable: true, yEnable: false, type: 'torpedo' }, - vTorpedo: { xEnable: false, yEnable: true, type: 'torpedo' }, - missle: { xEnable: false, yEnable: false, type: 'missle' } - }), []) - function modXY(e: TargetType, mod: TargetModifierType) { const { show, ...pos } = e const { target, params } = mod @@ -70,12 +70,12 @@ function useGameEvent(count: number) { } const fields = matrix.reduce((prev, curr) => [...prev, ...curr], []) return fields - }, [modes, mode]) + }, [mode]) const Targets = useCallback((targets: TargetListType[], preview?: boolean) => { const { type } = modes[mode] return targets.map(({ target, params }, i) => ) - }, [modes, mode]) + }, [mode]) useEffect(() => { const result = scopeGrid.map(e => modXY(target, e)) @@ -176,13 +176,13 @@ function useGameEvent(count: number) { , [Targets, targetList, targetPreviewList]) const eventBar = useMemo(() => { - const items = [ - { icon: 'burger-menu', text: 'Menu' }, - { icon: 'radar', text: 'Radar scan', type: 'radar' }, - { icon: 'missle', text: 'Fire torpedo', type: 'hTorpedo' }, - { icon: 'scope', text: 'Fire missle', type: 'missle' }, - { icon: 'gear', text: 'Settings' } - ] + const items: ItemsType[] = [ + { icon: 'burger-menu', text: 'Menu' }, + { icon: 'radar', text: 'Radar scan', type: 'radar', amount: 1 }, + { icon: 'missle', text: 'Fire torpedo', type: 'hTorpedo', amount: 1 }, + { icon: 'scope', text: 'Fire missle', type: 'missle' }, + { icon: 'gear', text: 'Settings' } + ] return (
{items.map((e, i) => ( diff --git a/leaky-ships/interfaces.ts b/leaky-ships/interfaces.ts index ff01788..83bd8ec 100644 --- a/leaky-ships/interfaces.ts +++ b/leaky-ships/interfaces.ts @@ -1,3 +1,5 @@ +import { modes } from "./components/useGameEvent"; + export type LastLeftTileType = { x: number, y: number @@ -38,6 +40,12 @@ export type TargetModifierType = { imply: boolean } } +export type ItemsType = { + icon: string, + text: string, + type?: keyof typeof modes, + amount?: number, +} export type FieldType = { field: string, x: number, diff --git a/leaky-ships/styles/App.scss b/leaky-ships/styles/App.scss index d40b522..bea03e9 100644 --- a/leaky-ships/styles/App.scss +++ b/leaky-ships/styles/App.scss @@ -266,12 +266,31 @@ body { gap: .5rem; width: 128px; - img { - width: 64px; - padding: 8px; - @include pixelart; - background-color: white; - border-radius: 1rem; + .container { + img { + width: 64px; + padding: 8px; + @include pixelart; + background-color: white; + border-radius: 1rem; + } + + &.amount { + position: relative; + + &::after { + content: var(--amount); + position: absolute; + top: -6px; + right: -6px; + color: black; + background-color: white; + border: 1px solid black; + border-radius: 8px; + font-size: 16px; + padding: 2px 8px; + } + } } span { From bc88ec646493712d2283ba2c3c61f8055c74e938 Mon Sep 17 00:00:00 2001 From: aronmal Date: Fri, 13 Jan 2023 09:00:11 +0100 Subject: [PATCH 7/7] Bugfix the last hardly broken Quickfix --- leaky-ships/components/useGameEvent.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/leaky-ships/components/useGameEvent.tsx b/leaky-ships/components/useGameEvent.tsx index 849a557..e247708 100644 --- a/leaky-ships/components/useGameEvent.tsx +++ b/leaky-ships/components/useGameEvent.tsx @@ -91,7 +91,7 @@ function useGameEvent(count: number) { const { target, params } = field const { x, y } = target if (isHit(hits, x, y).length) - return Object.assign(field, Object.assign(params, { imply: true })) + return { ...field, params: { ...params, imply: true } } return field }) setTargetList(e => { @@ -115,7 +115,7 @@ function useGameEvent(count: number) { const { target, params } = field const { x, y } = target if (isHit(hits, x, y).length || isSet(x, y)) - return Object.assign(field, Object.assign(params, { imply: true })) + return { ...field, params: { ...params, imply: true } } return field }) if (!targetPreviewPos.shouldShow)