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

Reveal grid effect finished

Browse source
This commit is contained in:
aronmal 2022-10-24 23:56:11 +02:00
parent 38762533c5
commit cb8ad3c300
Signed by: aronmal
GPG key ID: 816B7707426FC612
4 changed files with 77 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/components/Homepage.tsx
View file

@ -56,13 +56,12 @@ function Homepage() {
const xDiff = (x: number) => (x - posX) / 20
const yDiff = (y: number) => (y - posY) / 20
const pos = (x: number, y: number) => Math.sqrt(xDiff(x) * xDiff(x) + yDiff(y) * yDiff(y))
const warst = [pos(0, 0), pos(params.columns, 0), pos(0, params.rows), pos(params.columns, params.rows)]
// console.log(warst, params)
const diagonals = [pos(0, 0), pos(params.columns, 0), pos(0, params.rows), pos(params.columns, params.rows)]
setTimeout(() => {
setActve(false)
setCount(e => e + 1)
}, Math.max(...warst) * 1000 + 300)
}, Math.max(...diagonals) * 1000 + 300)
}
return (
@ -76,7 +75,7 @@ function Homepage() {
}
return (
<div id='tiles' style={{ '--columns': params.columns, '--rows': params.rows, '--bg-color1': colors[count % (colors.length - 1)], '--bg-color2': colors[(count + 1) % (colors.length - 1)] } as CSSProperties}>
<div id='tiles' style={{ '--columns': params.columns, '--rows': params.rows, '--bg-color-1': colors[count % colors.length], '--bg-color-2': colors[(count + 1) % colors.length] } as CSSProperties}>
{Array.from(Array(params.quantity)).map((_tile, index) => createTile(index))}
</div>
)