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; }