Fix grid resize

leaky-ships/src/components/Grid.tsx

@@ -8,11 +8,7 @@ function Grid() {
 
   const [columns, setColumns] = createSignal(0)
   const [rows, setRows] = createSignal(0)
-  const [params, setParams] = createSignal({
+  const quantity = () => columns() * rows()
-    columns: columns(),
-    rows: rows(),
-    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 x = () => props.index % columns()
-    const y = () => Math.floor(props.index / params().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(columns(), 0),
-        pos(0, params().rows),
+        pos(0, rows()),
-        pos(params().columns, params().rows),
+        pos(columns(), rows()),
       ]
 
       setTimeout(
@@ -98,13 +83,13 @@ function Grid() {
     <div
       id="tiles"
       style={{
-        "--columns": params().columns,
+        "--columns": columns(),
-        "--rows": params().rows,
+        "--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>

leaky-ships/src/components/Grid2.tsx

@@ -8,11 +8,7 @@ function Grid2() {
 
   const [columns, setColumns] = createSignal(0)
   const [rows, setRows] = createSignal(0)
-  const [params, setParams] = createSignal({
+  const quantity = () => columns() * rows()
-    columns: columns(),
-    rows: rows(),
-    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 x = () => props.index % columns()
-    const y = () => Math.floor(props.index / params().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(columns(), 0),
-        pos(0, params().rows),
+        pos(0, rows()),
-        pos(params().columns, params().rows),
+        pos(columns(), rows()),
       ]
 
       setTimeout(
@@ -99,8 +84,8 @@ function Grid2() {
     <div
       id="tiles"
       style={{
-        "--columns": params().columns,
+        "--columns": columns(),
-        "--rows": params().rows,
+        "--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>