kripke: add basic UI

apps/web/package.json

@@ -45,6 +45,7 @@
     "@tailwindcss/typography": "0.5.15",
     "deepmerge": "4.3.1",
     "lucide-svelte": "0.475.0",
+    "svelte-persisted-store": "0.12.0",
     "sveltekit-rate-limiter": "0.6.1",
     "tailwind-merge": "2.6.0"
   }

apps/web/src/routes/kripke/+page.svelte

@@ -6,6 +6,8 @@ import {
   latexSymbols,
   prettyPrint,
 } from "@cannorin/kripke";
+import LuHeart from "lucide-svelte/icons/heart";
+import LuHeartCrack from "lucide-svelte/icons/heart-crack";
 import FormulaInput from "./formula-input.svelte";
 import FrameInput from "./frame-input.svelte";
 
@@ -15,18 +17,45 @@ let math = $derived.by(() => {
   if (formula) return prettyPrint(formula, { symbols: latexSymbols });
   return "\\phantom{p}";
 });
+
+const life = 6;
 </script>
 
-<div class="flex flex-col min-h-screen max-w-full items-center gap-12 lg:gap-16 py-8">
+<main class="flex flex-col min-h-screen max-w-full items-center gap-12 lg:gap-16 py-8">
 
   <h1 class="font-display text-6xl">KRiPkE</h1>
 
-  <div class="w-[300px] flex flex-col gap-10">
-    <div class="flex flex-col items-center gap-2">
-      <Katex math={math} />
-      <FormulaInput bind:formula />
+  <div class="flex flex-col md:flex-row-reverse gap-x-20 gap-y-8">
+    <div class="w-[300px] flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        {#each [1,2,3,4,5,6,7,8,9,10] as i}
+          {#if i <= life}
+            <LuHeart class="text-primary" />
+          {:else}
+            <LuHeartCrack class="text-muted" />
+          {/if}
+        {/each}
+      </div>
+
+      <div class="flex flex-col items-center gap-2">
+        <FrameInput bind:frame />
+
+        <button class="rounded w-full p-1 text-background bg-primary font-bold flex items-center justify-center gap-2">
+          Guess! <span class="flex items-center font-normal">(<LuHeart size=14 class="mt-1"/>1)</span>
+        </button>
+      </div>
+
+      <div class="flex flex-col items-center gap-2">
+        <Katex math={math} />
+        <FormulaInput bind:formula />
+        <button class="rounded w-full p-1 text-background bg-primary font-bold flex items-center justify-center gap-2">
+          Check! <span class="flex items-center font-normal">(<LuHeart size=14 class="mt-1"/>1)</span>
+        </button>
+      </div>
     </div>
 
-    <FrameInput bind:frame />
+    <div class="w-[300px] flex flex-col gap-4">
+      Foo
+    </div>
   </div>
-</div>
+</main>

apps/web/src/routes/kripke/frame-input.svelte

@@ -122,8 +122,8 @@ function getPath(rel: Relation) {
     cursor: pointer;
   }
   .node.selected {
-    fill: rgb(var(--primary));
-    stroke: rgb(var(--foreground));
+    stroke: rgb(var(--primary));
+    stroke-width: 3;
   }
   .edge {
     stroke: rgb(var(--foreground));

yarn.lock

@@ -3292,6 +3292,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"svelte-persisted-store@npm:0.12.0":
+  version: 0.12.0
+  resolution: "svelte-persisted-store@npm:0.12.0"
+  peerDependencies:
+    svelte: ^3.48.0 || ^4 || ^5
+  checksum: 10c0/32dcc9ab2458689c9f8abab95544bbc24ab587384e10d785b2cf44b584644e07f577087a90f2e447de715fc3c3bde9a2c22689689e56b6fa2308d87a8ad9e2a7
+  languageName: node
+  linkType: hard
+
 "svelte@npm:5.16.1":
   version: 5.16.1
   resolution: "svelte@npm:5.16.1"
@@ -3832,6 +3841,7 @@ __metadata:
     schema-dts: "npm:1.1.2"
     svelte: "npm:5.16.1"
     svelte-check: "npm:4.1.4"
+    svelte-persisted-store: "npm:0.12.0"
     sveltekit-rate-limiter: "npm:0.6.1"
     svgo: "npm:3.3.2"
     tailwind-merge: "npm:2.6.0"