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

Add implied border

Browse source
This commit is contained in:
aronmal 2023-01-12 09:59:39 +01:00
parent b7a321cff5
commit 42e4af46e9
Signed by: aronmal
GPG key ID: 816B7707426FC612
2 changed files with 36 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

20
leaky-ships/styles/App.scss
View file

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