feat(ui): make Field component

src/App.svelte

@@ -1,24 +1,16 @@
 <script lang="ts">
   import { concat } from "./lib/utils"
+  import Field from "./components/Field.svelte"
 </script>
 
-<main>
-  <div class={concat([
-    "flex",
-    "justify-center",
-  ])}>
-    <div class={concat([
-      "relative", // for children with absolute
-      "w-full",
-      "h-dvh",
-      "h-[calc(var(--vh,_1vh)_*_100)]",
-      "bg-gray-200",
-      "dark:bg-gray-800",
-      "dark:text-white",
-      "flex",
-      "flex-col",
-    ])}>
-      Hello world
-    </div>
-  </div>
+<main class={concat([
+  "w-full",
+  "p-3",
+  "flex",
+  "flex-col",
+  "items-center",
+  "bg-gray-800",
+  "text-white",
+])}>
+  <Field />
 </main>

src/components/Field.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { concat } from "../lib/utils"
+  import { ElementId, Field, FieldElement, Intersections } from "../lib/field"
+  const colsCount = 8
+  const rowsCount = 8
+  let field = Field.create(colsCount, rowsCount)
+</script>
+
+<div
+  class={concat([
+    "grid",
+    "size-full",
+    "aspect-square",
+  ])}
+  style={`grid-template-columns: repeat(${colsCount}, minmax(0, 1fr))`}
+>
+  {#each field.field as rows, y}
+    {#each rows as value, x}
+      <button
+        class={concat([
+          "bg-gray-500",
+          "aspect-square",
+          "border",
+          "border-gray-500",
+          (() => {
+            if (value) {
+              return "bg-white-900"
+            }
+            const intersects = Intersections.count(
+              Field.getIntersections(field, { x, y })
+            )
+            return intersects === 0 ? (
+              "bg-yellow-100"
+            ) : (
+              intersects === 1 ? (
+                "bg-red-400"
+              ) : (
+                "bg-red-500"
+              )
+            )
+          })()
+        ])}
+        on:click={_ => {
+          field = Field.update(
+            field,
+            { x, y },
+            element => element ? (
+              FieldElement.create()
+            ) : (
+              FieldElement.create(ElementId.create())
+            )
+          )
+        }}
+      >
+      </button>
+    {/each}
+  {/each}
+</div>