From 388cf95953905cd8a9b970916f225d57f8059efc Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Mon, 16 Dec 2024 05:19:56 -0500
Subject: [PATCH] [+] Display puzzle

---
 src/App.svelte        | 107 +++++
 src/examples.ts       | 909 ++++++++++++++++++++++++++++++++++++++++++
 src/global.sass       |  56 +++
 src/lib/Line.svelte   |  15 +
 src/lib/Number.svelte |  17 +
 src/utils.ts          |  37 ++
 6 files changed, 1141 insertions(+)
 create mode 100644 src/App.svelte
 create mode 100644 src/examples.ts
 create mode 100644 src/global.sass
 create mode 100644 src/lib/Line.svelte
 create mode 100644 src/lib/Number.svelte
 create mode 100644 src/utils.ts

diff --git a/src/App.svelte b/src/App.svelte
new file mode 100644
index 0000000..ae6606f
--- /dev/null
+++ b/src/App.svelte
@@ -0,0 +1,107 @@
+<script lang="ts">
+  import svelteLogo from './assets/svelte.svg'
+  import viteLogo from '/vite.svg'
+  import Number from './lib/Number.svelte'
+  import { cfg, randInt, range } from "./utils";
+  import Line from "./lib/Line.svelte";
+  import { cat } from "./examples";
+
+  const [rows, cols] = [40, 40]
+  const [eRows, eCols] = [rows + 1, cols + 1]
+  let numbers = Int8Array.from({ length: rows * cols }, () => 0)
+  let numberMasked = Int8Array.from({ length: rows * cols }, () => 0)
+  let hedgeStates = Int8Array.from({ length: eRows * eCols }, () => 0)
+  let vedgeStates = Int8Array.from({ length: eRows * eCols }, () => 0)
+
+  let grid: HTMLDivElement
+  const editMode = true
+
+  // Editor mode
+  if (editMode) {
+    cat.solution.forEach(edge => {
+      const [ sx, sy, ex, _ ] = edge
+      const isVertical = sx === ex
+      if (isVertical) {
+        vedgeStates[sy * (eCols) + sx] = 1
+        if (ex != cols) numbers[sy * cols + sx] += 1
+        if (sx != 0) numbers[sy * cols + sx - 1] += 1
+      } else {
+        hedgeStates[sy * (eCols) + sx] = 1
+        // numbers[sy * cols + sx] += 1
+        // if (sx != 0) numbers[(sy - 1) * cols + sx] += 1
+      }
+    })
+  }
+
+  function clickEdge(sx: number, sy: number, tx: number, ty: number) {
+    console.log(sx, sy, tx, ty)
+    // const edge = edgeMap[`${sx}-${sy}-${tx}-${ty}`]
+    hedgeStates[sy * (cols + 1) + sx] = 1
+  }
+
+  // Positions for click handling
+  function clickDiv(event: MouseEvent) {
+    const target = event.target as HTMLElement
+    console.log(target)
+
+    // Compute the x and y coordinates of the clicked cell
+    const rect = target.getBoundingClientRect()
+    const x = Math.floor((event.clientX - rect.left) / cfg.totalW)
+    console.log(rect)
+    event.preventDefault()
+  }
+</script>
+
+<main>
+  <div class="heading">
+    <img src={viteLogo} class="logo" alt="Vite Logo" />
+    <span class="title">Slither Link</span>
+    <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
+  </div>
+
+  <div class="puzzle-grid" style={`height: ${rows * cfg.totalW}px; width: ${cols * cfg.totalW}px;`}
+       on:click={clickDiv} on:keypress={console.log} role="grid" tabindex="0"
+       bind:this={grid}>
+    {#each range(rows) as y}
+      {#each range(cols) as x}
+        <Number x={x} y={y} n={numbers[y * cols + x]} masked={numberMasked[y * cols + x] === 0} />
+      {/each}
+    {/each}
+    {#each range(eRows) as y}
+      {#each range(eCols) as x}
+        <Line sx={x} sy={y} state={hedgeStates[y * eCols + x]} />
+      {/each}
+    {/each}
+    {#each range(rows) as y}
+      {#each range(cols + 1) as x}
+        <Line sx={x} sy={y} vertical state={vedgeStates[y * eCols + x]} />
+      {/each}
+    {/each}
+  </div>
+</main>
+
+<style lang="sass">
+  .heading
+    display: flex
+    justify-content: center
+    align-items: center
+    gap: 1em
+    padding: 1em
+
+  .title
+    font-size: 3em
+    line-height: 1.1
+
+  .logo
+    height: 3em
+    padding: 1.5em
+    will-change: filter
+    transition: filter 300ms
+
+  .logo:hover
+    filter: drop-shadow(0 0 2em #646cffaa)
+
+  .logo.svelte:hover
+    filter: drop-shadow(0 0 2em #ff3e00aa)
+
+</style>
diff --git a/src/examples.ts b/src/examples.ts
new file mode 100644
index 0000000..e974e8a
--- /dev/null
+++ b/src/examples.ts
@@ -0,0 +1,909 @@
+
+export const cat = {
+  dim: [40, 40],
+  numbers: [],
+  solution: [
+    [0, 0, 0, 1],
+    [0, 0, 1, 0],
+    [0, 1, 0, 2],
+    [0, 2, 0, 3],
+    [0, 3, 0, 4],
+    [0, 4, 0, 5],
+    [0, 5, 0, 6],
+    [0, 6, 0, 7],
+    [0, 7, 0, 8],
+    [0, 8, 0, 9],
+    [0, 9, 0, 10],
+    [0, 10, 0, 11],
+    [0, 11, 0, 12],
+    [0, 12, 0, 13],
+    [0, 13, 0, 14],
+    [0, 14, 0, 15],
+    [0, 15, 0, 16],
+    [0, 16, 0, 17],
+    [0, 17, 0, 18],
+    [0, 18, 0, 19],
+    [0, 19, 0, 20],
+    [0, 20, 0, 21],
+    [0, 21, 0, 22],
+    [0, 22, 0, 23],
+    [0, 23, 0, 24],
+    [0, 24, 0, 25],
+    [0, 25, 0, 26],
+    [0, 26, 0, 27],
+    [0, 27, 0, 28],
+    [0, 28, 0, 29],
+    [0, 29, 0, 30],
+    [0, 30, 0, 31],
+    [0, 31, 0, 32],
+    [0, 32, 0, 33],
+    [0, 33, 0, 34],
+    [0, 34, 0, 35],
+    [0, 35, 0, 36],
+    [0, 36, 0, 37],
+    [0, 37, 0, 38],
+    [0, 38, 0, 39],
+    [0, 39, 0, 40],
+    [0, 40, 1, 40],
+    [1, 0, 2, 0],
+    [1, 1, 1, 2],
+    [1, 1, 2, 1],
+    [1, 2, 1, 3],
+    [1, 3, 1, 4],
+    [1, 4, 1, 5],
+    [1, 5, 1, 6],
+    [1, 6, 1, 7],
+    [1, 7, 1, 8],
+    [1, 8, 1, 9],
+    [1, 9, 1, 10],
+    [1, 10, 1, 11],
+    [1, 11, 1, 12],
+    [1, 12, 1, 13],
+    [1, 13, 2, 13],
+    [1, 14, 1, 15],
+    [1, 14, 2, 14],
+    [1, 15, 1, 16],
+    [1, 16, 1, 17],
+    [1, 17, 1, 18],
+    [1, 18, 1, 19],
+    [1, 19, 1, 20],
+    [1, 20, 1, 21],
+    [1, 21, 2, 21],
+    [1, 22, 1, 23],
+    [1, 22, 2, 22],
+    [1, 23, 1, 24],
+    [1, 24, 1, 25],
+    [1, 25, 1, 26],
+    [1, 26, 2, 26],
+    [1, 30, 1, 31],
+    [1, 30, 2, 30],
+    [1, 31, 1, 32],
+    [1, 32, 1, 33],
+    [1, 33, 1, 34],
+    [1, 34, 1, 35],
+    [1, 35, 1, 36],
+    [1, 36, 1, 37],
+    [1, 37, 1, 38],
+    [1, 38, 1, 39],
+    [1, 39, 2, 39],
+    [1, 40, 2, 40],
+    [2, 0, 3, 0],
+    [2, 1, 3, 1],
+    [2, 12, 2, 13],
+    [2, 12, 3, 12],
+    [2, 14, 2, 15],
+    [2, 15, 3, 15],
+    [2, 19, 2, 20],
+    [2, 19, 3, 19],
+    [2, 20, 2, 21],
+    [2, 22, 2, 23],
+    [2, 23, 2, 24],
+    [2, 24, 3, 24],
+    [2, 26, 3, 26],
+    [2, 30, 2, 31],
+    [2, 31, 3, 31],
+    [2, 39, 3, 39],
+    [2, 40, 3, 40],
+    [3, 0, 4, 0],
+    [3, 1, 3, 2],
+    [3, 2, 3, 3],
+    [3, 3, 3, 4],
+    [3, 4, 3, 5],
+    [3, 5, 3, 6],
+    [3, 6, 3, 7],
+    [3, 7, 3, 8],
+    [3, 8, 4, 8],
+    [3, 9, 3, 10],
+    [3, 9, 4, 9],
+    [3, 10, 3, 11],
+    [3, 11, 3, 12],
+    [3, 15, 3, 16],
+    [3, 16, 3, 17],
+    [3, 17, 3, 18],
+    [3, 18, 4, 18],
+    [3, 19, 3, 20],
+    [3, 20, 3, 21],
+    [3, 21, 4, 21],
+    [3, 22, 3, 23],
+    [3, 22, 4, 22],
+    [3, 23, 3, 24],
+    [3, 26, 4, 26],
+    [3, 31, 3, 32],
+    [3, 32, 4, 32],
+    [3, 39, 4, 39],
+    [3, 40, 4, 40],
+    [4, 0, 5, 0],
+    [4, 1, 4, 2],
+    [4, 1, 5, 1],
+    [4, 2, 4, 3],
+    [4, 3, 5, 3],
+    [4, 4, 4, 5],
+    [4, 4, 5, 4],
+    [4, 5, 4, 6],
+    [4, 6, 4, 7],
+    [4, 7, 4, 8],
+    [4, 9, 4, 10],
+    [4, 10, 4, 11],
+    [4, 11, 4, 12],
+    [4, 12, 5, 12],
+    [4, 15, 4, 16],
+    [4, 15, 5, 15],
+    [4, 16, 4, 17],
+    [4, 17, 4, 18],
+    [4, 21, 4, 22],
+    [4, 26, 5, 26],
+    [4, 32, 4, 33],
+    [4, 33, 5, 33],
+    [4, 39, 5, 39],
+    [4, 40, 5, 40],
+    [5, 0, 6, 0],
+    [5, 1, 6, 1],
+    [5, 3, 6, 3],
+    [5, 4, 5, 5],
+    [5, 5, 5, 6],
+    [5, 6, 6, 6],
+    [5, 12, 5, 13],
+    [5, 13, 6, 13],
+    [5, 14, 5, 15],
+    [5, 14, 6, 14],
+    [5, 24, 5, 25],
+    [5, 24, 6, 24],
+    [5, 25, 6, 25],
+    [5, 26, 6, 26],
+    [5, 33, 5, 34],
+    [5, 34, 6, 34],
+    [5, 39, 6, 39],
+    [5, 40, 6, 40],
+    [6, 0, 7, 0],
+    [6, 1, 7, 1],
+    [6, 3, 7, 3],
+    [6, 4, 6, 5],
+    [6, 4, 7, 4],
+    [6, 5, 6, 6],
+    [6, 13, 7, 13],
+    [6, 14, 7, 14],
+    [6, 24, 7, 24],
+    [6, 25, 7, 25],
+    [6, 26, 7, 26],
+    [6, 34, 6, 35],
+    [6, 35, 7, 35],
+    [6, 39, 7, 39],
+    [6, 40, 7, 40],
+    [7, 0, 8, 0],
+    [7, 1, 8, 1],
+    [7, 3, 8, 3],
+    [7, 4, 7, 5],
+    [7, 5, 7, 6],
+    [7, 6, 7, 7],
+    [7, 7, 7, 8],
+    [7, 8, 8, 8],
+    [7, 13, 7, 14],
+    [7, 24, 8, 24],
+    [7, 25, 8, 25],
+    [7, 26, 8, 26],
+    [7, 35, 7, 36],
+    [7, 36, 8, 36],
+    [7, 39, 8, 39],
+    [7, 40, 8, 40],
+    [8, 0, 9, 0],
+    [8, 1, 9, 1],
+    [8, 3, 8, 4],
+    [8, 4, 8, 5],
+    [8, 5, 8, 6],
+    [8, 6, 8, 7],
+    [8, 7, 8, 8],
+    [8, 21, 8, 22],
+    [8, 21, 9, 21],
+    [8, 22, 8, 23],
+    [8, 23, 8, 24],
+    [8, 25, 9, 25],
+    [8, 26, 9, 26],
+    [8, 27, 8, 28],
+    [8, 27, 9, 27],
+    [8, 28, 8, 29],
+    [8, 29, 9, 29],
+    [8, 36, 9, 36],
+    [8, 39, 9, 39],
+    [8, 40, 9, 40],
+    [9, 0, 10, 0],
+    [9, 1, 9, 2],
+    [9, 2, 9, 3],
+    [9, 3, 9, 4],
+    [9, 4, 9, 5],
+    [9, 5, 9, 6],
+    [9, 6, 9, 7],
+    [9, 7, 9, 8],
+    [9, 8, 10, 8],
+    [9, 13, 9, 14],
+    [9, 13, 10, 13],
+    [9, 14, 9, 15],
+    [9, 15, 9, 16],
+    [9, 16, 9, 17],
+    [9, 17, 9, 18],
+    [9, 18, 9, 19],
+    [9, 19, 9, 20],
+    [9, 20, 9, 21],
+    [9, 25, 10, 25],
+    [9, 26, 10, 26],
+    [9, 27, 10, 27],
+    [9, 29, 9, 30],
+    [9, 30, 10, 30],
+    [9, 36, 10, 36],
+    [9, 39, 10, 39],
+    [9, 40, 10, 40],
+    [10, 0, 11, 0],
+    [10, 1, 10, 2],
+    [10, 1, 11, 1],
+    [10, 2, 10, 3],
+    [10, 3, 11, 3],
+    [10, 4, 10, 5],
+    [10, 4, 11, 4],
+    [10, 5, 11, 5],
+    [10, 6, 10, 7],
+    [10, 6, 11, 6],
+    [10, 7, 11, 7],
+    [10, 8, 11, 8],
+    [10, 10, 10, 11],
+    [10, 10, 11, 10],
+    [10, 11, 10, 12],
+    [10, 12, 10, 13],
+    [10, 25, 11, 25],
+    [10, 26, 11, 26],
+    [10, 27, 10, 28],
+    [10, 28, 11, 28],
+    [10, 30, 10, 31],
+    [10, 31, 11, 31],
+    [10, 36, 11, 36],
+    [10, 39, 11, 39],
+    [10, 40, 11, 40],
+    [11, 0, 12, 0],
+    [11, 1, 12, 1],
+    [11, 3, 12, 3],
+    [11, 4, 12, 4],
+    [11, 5, 12, 5],
+    [11, 6, 12, 6],
+    [11, 7, 12, 7],
+    [11, 8, 12, 8],
+    [11, 10, 11, 11],
+    [11, 11, 12, 11],
+    [11, 25, 12, 25],
+    [11, 26, 12, 26],
+    [11, 28, 12, 28],
+    [11, 31, 12, 31],
+    [11, 36, 12, 36],
+    [11, 39, 12, 39],
+    [11, 40, 12, 40],
+    [12, 0, 13, 0],
+    [12, 1, 13, 1],
+    [12, 3, 13, 3],
+    [12, 4, 13, 4],
+    [12, 5, 13, 5],
+    [12, 6, 13, 6],
+    [12, 7, 13, 7],
+    [12, 8, 13, 8],
+    [12, 11, 12, 12],
+    [12, 12, 13, 12],
+    [12, 21, 12, 22],
+    [12, 21, 13, 21],
+    [12, 22, 12, 23],
+    [12, 23, 12, 24],
+    [12, 24, 12, 25],
+    [12, 26, 13, 26],
+    [12, 28, 13, 28],
+    [12, 31, 13, 31],
+    [12, 35, 12, 36],
+    [12, 35, 13, 35],
+    [12, 39, 13, 39],
+    [12, 40, 13, 40],
+    [13, 0, 14, 0],
+    [13, 1, 14, 1],
+    [13, 3, 14, 3],
+    [13, 4, 14, 4],
+    [13, 5, 13, 6],
+    [13, 7, 14, 7],
+    [13, 8, 14, 8],
+    [13, 12, 13, 13],
+    [13, 13, 14, 13],
+    [13, 21, 13, 22],
+    [13, 22, 13, 23],
+    [13, 23, 13, 24],
+    [13, 24, 13, 25],
+    [13, 25, 13, 26],
+    [13, 28, 14, 28],
+    [13, 31, 14, 31],
+    [13, 32, 13, 33],
+    [13, 32, 14, 32],
+    [13, 33, 14, 33],
+    [13, 34, 13, 35],
+    [13, 34, 14, 34],
+    [13, 39, 14, 39],
+    [13, 40, 14, 40],
+    [14, 0, 15, 0],
+    [14, 1, 15, 1],
+    [14, 3, 14, 4],
+    [14, 7, 14, 8],
+    [14, 13, 14, 14],
+    [14, 14, 15, 14],
+    [14, 28, 15, 28],
+    [14, 31, 14, 32],
+    [14, 33, 14, 34],
+    [14, 39, 15, 39],
+    [14, 40, 15, 40],
+    [15, 0, 16, 0],
+    [15, 1, 15, 2],
+    [15, 2, 15, 3],
+    [15, 3, 15, 4],
+    [15, 4, 15, 5],
+    [15, 5, 15, 6],
+    [15, 6, 15, 7],
+    [15, 7, 15, 8],
+    [15, 8, 16, 8],
+    [15, 14, 15, 15],
+    [15, 15, 15, 16],
+    [15, 16, 16, 16],
+    [15, 28, 15, 29],
+    [15, 29, 16, 29],
+    [15, 32, 15, 33],
+    [15, 32, 16, 32],
+    [15, 33, 16, 33],
+    [15, 39, 16, 39],
+    [15, 40, 16, 40],
+    [16, 0, 17, 0],
+    [16, 1, 16, 2],
+    [16, 1, 17, 1],
+    [16, 2, 16, 3],
+    [16, 3, 17, 3],
+    [16, 4, 16, 5],
+    [16, 4, 17, 4],
+    [16, 5, 16, 6],
+    [16, 6, 16, 7],
+    [16, 7, 17, 7],
+    [16, 8, 17, 8],
+    [16, 16, 16, 17],
+    [16, 17, 17, 17],
+    [16, 29, 17, 29],
+    [16, 32, 17, 32],
+    [16, 33, 16, 34],
+    [16, 34, 17, 34],
+    [16, 38, 16, 39],
+    [16, 38, 17, 38],
+    [16, 40, 17, 40],
+    [17, 0, 18, 0],
+    [17, 1, 18, 1],
+    [17, 3, 18, 3],
+    [17, 4, 18, 4],
+    [17, 7, 17, 8],
+    [17, 16, 17, 17],
+    [17, 16, 18, 16],
+    [17, 28, 17, 29],
+    [17, 28, 18, 28],
+    [17, 32, 18, 32],
+    [17, 34, 17, 35],
+    [17, 35, 17, 36],
+    [17, 36, 17, 37],
+    [17, 37, 17, 38],
+    [17, 40, 18, 40],
+    [18, 0, 19, 0],
+    [18, 1, 19, 1],
+    [18, 3, 19, 3],
+    [18, 4, 19, 4],
+    [18, 7, 18, 8],
+    [18, 7, 19, 7],
+    [18, 8, 19, 8],
+    [18, 16, 18, 17],
+    [18, 17, 19, 17],
+    [18, 28, 18, 29],
+    [18, 29, 19, 29],
+    [18, 32, 19, 32],
+    [18, 34, 18, 35],
+    [18, 34, 19, 34],
+    [18, 35, 18, 36],
+    [18, 36, 18, 37],
+    [18, 37, 18, 38],
+    [18, 38, 19, 38],
+    [18, 40, 19, 40],
+    [19, 0, 20, 0],
+    [19, 1, 20, 1],
+    [19, 3, 20, 3],
+    [19, 4, 19, 5],
+    [19, 5, 19, 6],
+    [19, 6, 19, 7],
+    [19, 8, 20, 8],
+    [19, 16, 19, 17],
+    [19, 16, 20, 16],
+    [19, 29, 20, 29],
+    [19, 32, 20, 32],
+    [19, 33, 19, 34],
+    [19, 33, 20, 33],
+    [19, 38, 19, 39],
+    [19, 39, 20, 39],
+    [19, 40, 20, 40],
+    [20, 0, 21, 0],
+    [20, 1, 21, 1],
+    [20, 3, 20, 4],
+    [20, 4, 20, 5],
+    [20, 5, 20, 6],
+    [20, 6, 20, 7],
+    [20, 7, 20, 8],
+    [20, 14, 20, 15],
+    [20, 14, 21, 14],
+    [20, 15, 20, 16],
+    [20, 28, 20, 29],
+    [20, 28, 21, 28],
+    [20, 32, 20, 33],
+    [20, 39, 21, 39],
+    [20, 40, 21, 40],
+    [21, 0, 22, 0],
+    [21, 1, 21, 2],
+    [21, 2, 21, 3],
+    [21, 3, 21, 4],
+    [21, 4, 21, 5],
+    [21, 5, 21, 6],
+    [21, 6, 21, 7],
+    [21, 7, 21, 8],
+    [21, 8, 22, 8],
+    [21, 13, 21, 14],
+    [21, 13, 22, 13],
+    [21, 21, 21, 22],
+    [21, 21, 22, 21],
+    [21, 22, 21, 23],
+    [21, 23, 21, 24],
+    [21, 24, 21, 25],
+    [21, 25, 21, 26],
+    [21, 26, 22, 26],
+    [21, 28, 22, 28],
+    [21, 31, 21, 32],
+    [21, 31, 22, 31],
+    [21, 32, 22, 32],
+    [21, 33, 21, 34],
+    [21, 33, 22, 33],
+    [21, 34, 22, 34],
+    [21, 39, 22, 39],
+    [21, 40, 22, 40],
+    [22, 0, 23, 0],
+    [22, 1, 22, 2],
+    [22, 1, 23, 1],
+    [22, 2, 22, 3],
+    [22, 3, 22, 4],
+    [22, 4, 22, 5],
+    [22, 5, 22, 6],
+    [22, 6, 22, 7],
+    [22, 7, 23, 7],
+    [22, 8, 23, 8],
+    [22, 12, 22, 13],
+    [22, 12, 23, 12],
+    [22, 21, 22, 22],
+    [22, 22, 22, 23],
+    [22, 23, 22, 24],
+    [22, 24, 22, 25],
+    [22, 25, 23, 25],
+    [22, 26, 23, 26],
+    [22, 28, 23, 28],
+    [22, 31, 23, 31],
+    [22, 32, 22, 33],
+    [22, 34, 22, 35],
+    [22, 35, 23, 35],
+    [22, 39, 23, 39],
+    [22, 40, 23, 40],
+    [23, 0, 24, 0],
+    [23, 1, 24, 1],
+    [23, 5, 23, 6],
+    [23, 5, 24, 5],
+    [23, 6, 23, 7],
+    [23, 8, 24, 8],
+    [23, 11, 23, 12],
+    [23, 11, 24, 11],
+    [23, 25, 24, 25],
+    [23, 26, 24, 26],
+    [23, 28, 24, 28],
+    [23, 31, 24, 31],
+    [23, 35, 23, 36],
+    [23, 36, 24, 36],
+    [23, 39, 24, 39],
+    [23, 40, 24, 40],
+    [24, 0, 25, 0],
+    [24, 1, 25, 1],
+    [24, 5, 24, 6],
+    [24, 6, 24, 7],
+    [24, 7, 25, 7],
+    [24, 8, 25, 8],
+    [24, 10, 24, 11],
+    [24, 10, 25, 10],
+    [24, 25, 25, 25],
+    [24, 26, 25, 26],
+    [24, 28, 25, 28],
+    [24, 31, 25, 31],
+    [24, 36, 25, 36],
+    [24, 39, 25, 39],
+    [24, 40, 25, 40],
+    [25, 0, 26, 0],
+    [25, 1, 26, 1],
+    [25, 3, 25, 4],
+    [25, 3, 26, 3],
+    [25, 4, 25, 5],
+    [25, 5, 25, 6],
+    [25, 6, 25, 7],
+    [25, 8, 26, 8],
+    [25, 10, 25, 11],
+    [25, 11, 25, 12],
+    [25, 12, 25, 13],
+    [25, 13, 26, 13],
+    [25, 25, 26, 25],
+    [25, 26, 26, 26],
+    [25, 27, 25, 28],
+    [25, 27, 26, 27],
+    [25, 30, 25, 31],
+    [25, 30, 26, 30],
+    [25, 35, 25, 36],
+    [25, 35, 26, 35],
+    [25, 39, 26, 39],
+    [25, 40, 26, 40],
+    [26, 0, 27, 0],
+    [26, 1, 27, 1],
+    [26, 3, 26, 4],
+    [26, 4, 26, 5],
+    [26, 5, 26, 6],
+    [26, 6, 26, 7],
+    [26, 7, 26, 8],
+    [26, 13, 26, 14],
+    [26, 14, 26, 15],
+    [26, 15, 26, 16],
+    [26, 16, 26, 17],
+    [26, 17, 26, 18],
+    [26, 18, 26, 19],
+    [26, 19, 26, 20],
+    [26, 20, 26, 21],
+    [26, 21, 27, 21],
+    [26, 25, 27, 25],
+    [26, 26, 27, 26],
+    [26, 27, 27, 27],
+    [26, 29, 26, 30],
+    [26, 29, 27, 29],
+    [26, 34, 26, 35],
+    [26, 34, 27, 34],
+    [26, 39, 27, 39],
+    [26, 40, 27, 40],
+    [27, 0, 28, 0],
+    [27, 1, 28, 1],
+    [27, 4, 27, 5],
+    [27, 4, 28, 4],
+    [27, 5, 27, 6],
+    [27, 6, 28, 6],
+    [27, 21, 27, 22],
+    [27, 22, 27, 23],
+    [27, 23, 27, 24],
+    [27, 24, 28, 24],
+    [27, 25, 28, 25],
+    [27, 26, 28, 26],
+    [27, 27, 27, 28],
+    [27, 28, 27, 29],
+    [27, 33, 27, 34],
+    [27, 33, 28, 33],
+    [27, 39, 28, 39],
+    [27, 40, 28, 40],
+    [28, 0, 29, 0],
+    [28, 1, 28, 2],
+    [28, 2, 28, 3],
+    [28, 3, 28, 4],
+    [28, 6, 28, 7],
+    [28, 7, 29, 7],
+    [28, 11, 28, 12],
+    [28, 11, 29, 11],
+    [28, 12, 28, 13],
+    [28, 13, 28, 14],
+    [28, 14, 28, 15],
+    [28, 15, 29, 15],
+    [28, 24, 29, 24],
+    [28, 25, 29, 25],
+    [28, 26, 29, 26],
+    [28, 32, 28, 33],
+    [28, 32, 29, 32],
+    [28, 39, 28, 40],
+    [29, 0, 30, 0],
+    [29, 1, 29, 2],
+    [29, 1, 30, 1],
+    [29, 2, 29, 3],
+    [29, 3, 29, 4],
+    [29, 4, 30, 4],
+    [29, 7, 29, 8],
+    [29, 8, 30, 8],
+    [29, 10, 29, 11],
+    [29, 10, 30, 10],
+    [29, 12, 29, 13],
+    [29, 12, 30, 12],
+    [29, 13, 29, 14],
+    [29, 14, 30, 14],
+    [29, 15, 29, 16],
+    [29, 16, 30, 16],
+    [29, 24, 30, 24],
+    [29, 25, 30, 25],
+    [29, 26, 30, 26],
+    [29, 31, 29, 32],
+    [29, 31, 30, 31],
+    [29, 39, 29, 40],
+    [29, 39, 30, 39],
+    [29, 40, 30, 40],
+    [30, 0, 31, 0],
+    [30, 1, 31, 1],
+    [30, 3, 30, 4],
+    [30, 3, 31, 3],
+    [30, 7, 30, 8],
+    [30, 7, 31, 7],
+    [30, 10, 31, 10],
+    [30, 11, 30, 12],
+    [30, 11, 31, 11],
+    [30, 14, 30, 15],
+    [30, 15, 31, 15],
+    [30, 16, 31, 16],
+    [30, 24, 30, 25],
+    [30, 26, 31, 26],
+    [30, 31, 31, 31],
+    [30, 39, 31, 39],
+    [30, 40, 31, 40],
+    [31, 0, 32, 0],
+    [31, 1, 32, 1],
+    [31, 3, 31, 4],
+    [31, 4, 32, 4],
+    [31, 6, 31, 7],
+    [31, 6, 32, 6],
+    [31, 10, 32, 10],
+    [31, 11, 32, 11],
+    [31, 12, 31, 13],
+    [31, 12, 32, 12],
+    [31, 13, 31, 14],
+    [31, 14, 32, 14],
+    [31, 15, 32, 15],
+    [31, 16, 31, 17],
+    [31, 17, 32, 17],
+    [31, 26, 32, 26],
+    [31, 30, 31, 31],
+    [31, 30, 32, 30],
+    [31, 38, 31, 39],
+    [31, 38, 32, 38],
+    [31, 40, 32, 40],
+    [32, 0, 33, 0],
+    [32, 1, 33, 1],
+    [32, 4, 32, 5],
+    [32, 5, 32, 6],
+    [32, 10, 33, 10],
+    [32, 11, 33, 11],
+    [32, 12, 32, 13],
+    [32, 13, 33, 13],
+    [32, 14, 33, 14],
+    [32, 15, 33, 15],
+    [32, 17, 32, 18],
+    [32, 18, 33, 18],
+    [32, 26, 33, 26],
+    [32, 29, 32, 30],
+    [32, 29, 33, 29],
+    [32, 38, 33, 38],
+    [32, 40, 33, 40],
+    [33, 0, 34, 0],
+    [33, 1, 34, 1],
+    [33, 4, 33, 5],
+    [33, 4, 34, 4],
+    [33, 5, 33, 6],
+    [33, 6, 34, 6],
+    [33, 10, 34, 10],
+    [33, 11, 33, 12],
+    [33, 12, 34, 12],
+    [33, 13, 34, 13],
+    [33, 14, 34, 14],
+    [33, 15, 33, 16],
+    [33, 16, 34, 16],
+    [33, 18, 33, 19],
+    [33, 19, 33, 20],
+    [33, 20, 34, 20],
+    [33, 26, 34, 26],
+    [33, 28, 33, 29],
+    [33, 28, 34, 28],
+    [33, 37, 33, 38],
+    [33, 37, 34, 37],
+    [33, 40, 34, 40],
+    [34, 0, 35, 0],
+    [34, 1, 34, 2],
+    [34, 2, 34, 3],
+    [34, 3, 34, 4],
+    [34, 6, 34, 7],
+    [34, 7, 35, 7],
+    [34, 10, 34, 11],
+    [34, 11, 35, 11],
+    [34, 12, 34, 13],
+    [34, 14, 35, 14],
+    [34, 16, 34, 17],
+    [34, 17, 35, 17],
+    [34, 20, 34, 21],
+    [34, 21, 35, 21],
+    [34, 25, 34, 26],
+    [34, 25, 35, 25],
+    [34, 27, 34, 28],
+    [34, 27, 35, 27],
+    [34, 29, 34, 30],
+    [34, 29, 35, 29],
+    [34, 30, 35, 30],
+    [34, 36, 34, 37],
+    [34, 36, 35, 36],
+    [34, 40, 35, 40],
+    [35, 0, 36, 0],
+    [35, 1, 35, 2],
+    [35, 1, 36, 1],
+    [35, 2, 35, 3],
+    [35, 3, 35, 4],
+    [35, 4, 36, 4],
+    [35, 7, 35, 8],
+    [35, 8, 36, 8],
+    [35, 11, 35, 12],
+    [35, 12, 35, 13],
+    [35, 13, 35, 14],
+    [35, 17, 35, 18],
+    [35, 18, 35, 19],
+    [35, 19, 36, 19],
+    [35, 21, 35, 22],
+    [35, 22, 35, 23],
+    [35, 23, 35, 24],
+    [35, 24, 35, 25],
+    [35, 26, 35, 27],
+    [35, 26, 36, 26],
+    [35, 28, 35, 29],
+    [35, 28, 36, 28],
+    [35, 30, 35, 31],
+    [35, 31, 36, 31],
+    [35, 35, 35, 36],
+    [35, 35, 36, 35],
+    [35, 40, 36, 40],
+    [36, 0, 37, 0],
+    [36, 1, 37, 1],
+    [36, 3, 36, 4],
+    [36, 3, 37, 3],
+    [36, 7, 36, 8],
+    [36, 7, 37, 7],
+    [36, 14, 36, 15],
+    [36, 14, 37, 14],
+    [36, 15, 37, 15],
+    [36, 19, 36, 20],
+    [36, 20, 36, 21],
+    [36, 21, 36, 22],
+    [36, 22, 37, 22],
+    [36, 26, 37, 26],
+    [36, 27, 36, 28],
+    [36, 27, 37, 27],
+    [36, 31, 36, 32],
+    [36, 32, 37, 32],
+    [36, 34, 36, 35],
+    [36, 34, 37, 34],
+    [36, 40, 37, 40],
+    [37, 0, 38, 0],
+    [37, 1, 38, 1],
+    [37, 3, 37, 4],
+    [37, 4, 38, 4],
+    [37, 6, 37, 7],
+    [37, 6, 38, 6],
+    [37, 12, 37, 13],
+    [37, 12, 38, 12],
+    [37, 13, 37, 14],
+    [37, 15, 37, 16],
+    [37, 16, 37, 17],
+    [37, 17, 38, 17],
+    [37, 22, 37, 23],
+    [37, 23, 37, 24],
+    [37, 24, 37, 25],
+    [37, 25, 38, 25],
+    [37, 26, 38, 26],
+    [37, 27, 37, 28],
+    [37, 28, 38, 28],
+    [37, 30, 37, 31],
+    [37, 30, 38, 30],
+    [37, 31, 38, 31],
+    [37, 32, 38, 32],
+    [37, 33, 37, 34],
+    [37, 33, 38, 33],
+    [37, 40, 38, 40],
+    [38, 0, 39, 0],
+    [38, 1, 39, 1],
+    [38, 4, 38, 5],
+    [38, 5, 38, 6],
+    [38, 12, 38, 13],
+    [38, 13, 38, 14],
+    [38, 14, 39, 14],
+    [38, 15, 38, 16],
+    [38, 15, 39, 15],
+    [38, 16, 38, 17],
+    [38, 25, 39, 25],
+    [38, 26, 38, 27],
+    [38, 27, 39, 27],
+    [38, 28, 38, 29],
+    [38, 29, 38, 30],
+    [38, 31, 39, 31],
+    [38, 32, 38, 33],
+    [38, 40, 39, 40],
+    [39, 0, 40, 0],
+    [39, 1, 39, 2],
+    [39, 2, 39, 3],
+    [39, 3, 39, 4],
+    [39, 4, 39, 5],
+    [39, 5, 39, 6],
+    [39, 6, 39, 7],
+    [39, 7, 39, 8],
+    [39, 8, 39, 9],
+    [39, 9, 39, 10],
+    [39, 10, 39, 11],
+    [39, 11, 39, 12],
+    [39, 12, 39, 13],
+    [39, 13, 39, 14],
+    [39, 15, 39, 16],
+    [39, 16, 39, 17],
+    [39, 17, 39, 18],
+    [39, 18, 39, 19],
+    [39, 19, 39, 20],
+    [39, 20, 39, 21],
+    [39, 21, 39, 22],
+    [39, 22, 39, 23],
+    [39, 23, 39, 24],
+    [39, 24, 40, 24],
+    [39, 25, 39, 26],
+    [39, 26, 40, 26],
+    [39, 27, 39, 28],
+    [39, 28, 39, 29],
+    [39, 29, 39, 30],
+    [39, 30, 39, 31],
+    [39, 40, 40, 40],
+    [40, 0, 40, 1],
+    [40, 1, 40, 2],
+    [40, 2, 40, 3],
+    [40, 3, 40, 4],
+    [40, 4, 40, 5],
+    [40, 5, 40, 6],
+    [40, 6, 40, 7],
+    [40, 7, 40, 8],
+    [40, 8, 40, 9],
+    [40, 9, 40, 10],
+    [40, 10, 40, 11],
+    [40, 11, 40, 12],
+    [40, 12, 40, 13],
+    [40, 13, 40, 14],
+    [40, 14, 40, 15],
+    [40, 15, 40, 16],
+    [40, 16, 40, 17],
+    [40, 17, 40, 18],
+    [40, 18, 40, 19],
+    [40, 19, 40, 20],
+    [40, 20, 40, 21],
+    [40, 21, 40, 22],
+    [40, 22, 40, 23],
+    [40, 23, 40, 24],
+    [40, 26, 40, 27],
+    [40, 27, 40, 28],
+    [40, 28, 40, 29],
+    [40, 29, 40, 30],
+    [40, 30, 40, 31],
+    [40, 31, 40, 32],
+    [40, 32, 40, 33],
+    [40, 33, 40, 34],
+    [40, 34, 40, 35],
+    [40, 35, 40, 36],
+    [40, 36, 40, 37],
+    [40, 37, 40, 38],
+    [40, 38, 40, 39],
+    [40, 39, 40, 40],
+  ],
+}
\ No newline at end of file
diff --git a/src/global.sass b/src/global.sass
new file mode 100644
index 0000000..c4f8548
--- /dev/null
+++ b/src/global.sass
@@ -0,0 +1,56 @@
+@use "sass:color"
+
+$color-dot: #aaa
+$color-line: #90A4AEFF
+$color-cross: #ff7f7f
+
+@debug color.scale($color-line, $alpha: -30%)
+
+.puzzle-grid
+  position: relative
+  user-select: none
+
+.grid-number
+  position: absolute
+  width: 20px
+  height: 20px
+  text-align: center
+  font-size: 11px
+
+  &.error
+    color: $color-cross
+
+  &.complete
+    opacity: 0.5
+
+.grid-line
+  position: absolute
+
+  &.vertical
+    width: 4px
+    height: 20px
+    border-top: 4px solid $color-dot
+    border-bottom: 4px solid $color-dot
+
+    &.crossed:before, &.auto-crossed:before
+      left: 0
+      top: 2px
+
+  &:not(.vertical)
+    width: 24px
+    height: 4px
+
+  &.selected
+    background: $color-line
+
+  &.crossed:before, &.auto-crossed:before
+    content: "x"
+    font-size: 10px
+    color: $color-cross
+    position: absolute
+    top: -7px
+
+  &:hover
+    background: color.scale($color-line, $alpha: -50%)
+
+
diff --git a/src/lib/Line.svelte b/src/lib/Line.svelte
new file mode 100644
index 0000000..007caae
--- /dev/null
+++ b/src/lib/Line.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { cfg, pos } from "../utils";
+
+  interface Props { sx: number, sy: number, vertical?: boolean, state: number }
+  let { sx, sy, vertical, state }: Props = $props()
+
+  let left = cfg.totalW * sx
+  let top = cfg.totalW * sy
+  let styles = pos(left, top)
+</script>
+
+<div class="grid-line" style="{styles}"
+     class:vertical={vertical}
+     class:selected={state === 1} class:crossed={state === 2} class:auto-crossed={state === 5}>
+</div>
diff --git a/src/lib/Number.svelte b/src/lib/Number.svelte
new file mode 100644
index 0000000..fb0d577
--- /dev/null
+++ b/src/lib/Number.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { cfg, nStates, pos, sty } from "../utils";
+
+  interface Props { x: number, y: number, n: number, masked: boolean, state: number }
+  let { x, y, n, masked, state }: Props = $props()
+
+  let left = cfg.totalW * x + cfg.lineW
+  let top = cfg.totalW * y + cfg.lineW
+  let styles = pos(left, top)
+</script>
+
+<div class="grid-number" style="{styles}"
+     class:error={state === nStates.error} class:complete={state === nStates.complete}>
+  {#if !masked}
+    {n % 4}
+  {/if}
+</div>
diff --git a/src/utils.ts b/src/utils.ts
new file mode 100644
index 0000000..25a29d3
--- /dev/null
+++ b/src/utils.ts
@@ -0,0 +1,37 @@
+
+export const cfg = {
+  cellW: 20,
+  lineW: 4,
+  totalW: 24
+}
+
+export const eStates = {
+  none: 0,
+  selected: 1,
+  crossed: 2,
+  autoCrossed: 5
+}
+
+export const nStates = {
+  none: 0,
+  error: 1,
+  complete: 2
+}
+
+export function sty(styles: any) {
+  return Object.entries(styles)
+    .map(([key, value]) => `${key}:${value}`)
+    .join(';');
+}
+
+export function pos(x: number, y: number) {
+  return `top:${y}px;left:${x}px;`;
+}
+
+export function randInt(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+export function range(n: number) {
+  return Array.from({length: n}, (_, i) => i);
+}