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

Fix grid resize

Browse source
This commit is contained in:
aronmal 2023-12-15 08:57:31 +01:00
parent 44bf98e88e
commit 777b807225
Signed by: aronmal
GPG key ID: 816B7707426FC612
2 changed files with 18 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

33
leaky-ships/src/components/Grid.tsx
View file

@ -8,11 +8,7 @@ function Grid() {
const [columns, setColumns] = createSignal(0)
const [rows, setRows] = createSignal(0)
const [params, setParams] = createSignal({
columns: columns(),
rows: rows(),
quantity: columns() * rows(),
})
const quantity = () => columns() * rows()
const [position, setPosition] = createSignal([0, 0])
const [active, setActve] = createSignal(false)
const [count, setCount] = createSignal(0)
@ -27,20 +23,9 @@ function Grid() {
onCleanup(() => removeEventListener("resize", handleResize))
})
createEffect(() => {
const timeout = setTimeout(() => {
setParams({
columns: columns(),
rows: rows(),
quantity: columns() * rows(),
})
}, 500)
onCleanup(() => clearTimeout(timeout))
})
function Tile(props: { index: number }) {
const x = () => props.index % params().columns
const y = () => Math.floor(props.index / params().columns)
const x = () => props.index % columns()
const y = () => Math.floor(props.index / columns())
const xDiff = () => (x() - position()[0]) / 20
const yDiff = () => (y() - position()[1]) / 20
const pos = () =>
@ -62,9 +47,9 @@ function Grid() {
}
const diagonals = [
pos(0, 0),
pos(params().columns, 0),
pos(0, params().rows),
pos(params().columns, params().rows),
pos(columns(), 0),
pos(0, rows()),
pos(columns(), rows()),
]
setTimeout(
@ -98,13 +83,13 @@ function Grid() {
<div
id="tiles"
style={{
"--columns": params().columns,
"--rows": params().rows,
"--columns": columns(),
"--rows": rows(),
"--bg-color-1": colors[count() % colors.length],
"--bg-color-2": colors[(count() + 1) % colors.length],
}}
>
<For each={Array.from(Array(params().quantity))}>
<For each={Array.from(Array(quantity()))}>
{(_tile, i) => <Tile index={i()} />}
</For>
</div>

33
leaky-ships/src/components/Grid2.tsx
View file

@ -8,11 +8,7 @@ function Grid2() {
const [columns, setColumns] = createSignal(0)
const [rows, setRows] = createSignal(0)
const [params, setParams] = createSignal({
columns: columns(),
rows: rows(),
quantity: columns() * rows(),
})
const quantity = () => columns() * rows()
const [position, setPosition] = createSignal([0, 0])
const [active, setActve] = createSignal(false)
const [action, setAction] = createSignal(false)
@ -28,17 +24,6 @@ function Grid2() {
onCleanup(() => removeEventListener("resize", handleResize))
})
createEffect(() => {
const timeout = setTimeout(() => {
setParams({
columns: columns(),
rows: rows(),
quantity: columns() * rows(),
})
}, 500)
onCleanup(() => clearTimeout(timeout))
})
const sentences = [
"Ethem ...",
"hat ...",
@ -48,8 +33,8 @@ function Grid2() {
]
function Tile(props: { index: number }) {
const x = () => props.index % params().columns
const y = () => Math.floor(props.index / params().columns)
const x = () => props.index % columns()
const y = () => Math.floor(props.index / columns())
const xDiff = () => (x() - position()[0]) / 20
const yDiff = () => (y() - position()[1]) / 20
const pos = () =>
@ -72,9 +57,9 @@ function Grid2() {
}
const diagonals = [
pos(0, 0),
pos(params().columns, 0),
pos(0, params().rows),
pos(params().columns, params().rows),
pos(columns(), 0),
pos(0, rows()),
pos(columns(), rows()),
]
setTimeout(
@ -99,8 +84,8 @@ function Grid2() {
<div
id="tiles"
style={{
"--columns": params().columns,
"--rows": params().rows,
"--columns": columns(),
"--rows": rows(),
}}
>
<div class="center-div">
@ -108,7 +93,7 @@ function Grid2() {
{sentences[count() % sentences.length]}
</h1>
</div>
<For each={Array.from(Array(params().quantity))}>
<For each={Array.from(Array(quantity()))}>
{(_tile, i) => <Tile index={i()} />}
</For>
</div>