6 files changed, 104 insertions, 0 deletions
diff --git a/src/App.svelte b/src/App.svelte
new file mode 100644
index 0000000..9aab903
--- /dev/null
+++ b/src/App.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { validate } from "./lib/Sudoku";
+
+  let selTile: HTMLDivElement | EventTarget;
+  const getSelTile = () => selTile as HTMLDivElement;
+  const grid = (new Array(10)).fill((new Array(10)).fill(".")) as string[][];
+
+  function keyDownHandler(e: KeyboardEvent) {
+    if(e.key === "Backspace") {
+      setSelTile(".")
+    }
+    const num = parseInt(e.key);
+    if(Number.isNaN(num) || num === 0) return;
+    setSelTile(num)
+    validate(grid)
+  }
+  function showTile(val: string) {
+    return val === "." ? "" : val;
+  }
+  function setSelTile(val: string | number) {
+    grid[parseInt(getSelTile().dataset.i)][parseInt(getSelTile().dataset.j)] = val.toString();
+    getSelTile().innerText = val === "." ? "" : val.toString();
+  }
+</script>
+
+<!-- <svelte:body on:keydown|preventDefaultstopPropagation={keyDownHandler} /> -->
+<svelte:body on:keydown={keyDownHandler} />
+<main>
+  <div class="grid">
+    {#each {length: 9} as _, i}
+      {#each {length: 9} as _, j}
+        <div 
+          class="tile" 
+          class:br={j % 3 === 2 && j !== 8}
+          class:bb={i % 3 === 2 && i !== 8}
+          on:click|self={e => selTile = e.target}
+          data-i={i}
+          data-j={j}
+          on:keypress={null}>{grid[i][j] === "." ? "" : grid[i][j]}</div>
+      {/each}
+    {/each}
+  </div>
+</main>
+
+<style>
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+  }
+  .tile {
+    width: 4rem;
+    aspect-ratio: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 2.5rem;
+    gap: 0;
+    box-sizing: border-box;
+    user-select: none;
+  }
+  .tile:nth-child(odd) {
+    background-color: lightgrey;
+  }
+  .tile:nth-child(even) {
+    background-color: wheat;
+  }
+  .bb {
+    border-bottom: 3px solid black;
+  }
+  .br {
+    border-right: 3px solid black;
+  }
+</style>
diff --git a/src/app.css b/src/app.css
new file mode 100644
index 0000000..ba0f5e7
--- /dev/null
+++ b/src/app.css
@@ -0,0 +1,11 @@
+body {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  margin: 0;
+  display: flex;
+  place-items: center;
+  place-content: center;
+  min-width: 100vw;
+  min-height: 100vh;
+  background-color: darksalmon;
+}
+
diff --git a/src/assets/svelte.svg b/src/assets/svelte.svg
new file mode 100644
index 0000000..c5e0848
--- /dev/null
+++ b/src/assets/svelte.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
+\ No newline at end of file
diff --git a/src/lib/Sudoku.ts b/src/lib/Sudoku.ts
new file mode 100644
index 0000000..0da0d77
--- /dev/null
+++ b/src/lib/Sudoku.ts
@@ -0,0 +1,9 @@
+import sudoku from "sudoku-umd";
+
+type Grid = Array<Array<string>>;
+
+export function validate(grid: Grid) {
+  const list = sudoku.board_grid_to_string(grid)
+
+  return true
+}
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..5c1f795
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,8 @@
+import './app.css'
+import App from './App.svelte'
+
+const app = new App({
+  target: document.getElementById('app')
+})
+
+export default app
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..4078e74
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />