kripke: make it playable

2025-02-19 16:59:47 +09:00
parent 2c901b44f6
commit 002531d48f
16 changed files with 559 additions and 47 deletions
--- a/apps/web/src/routes/kripke/+page.server.ts
+++ b/apps/web/src/routes/kripke/+page.server.ts
@@ -0,0 +1,18 @@
+import type { SeoProps } from "$components/seo";
+
+export async function load() {
+  return {
+    seo: {
+      title: "KRIPKE - cannorin.net",
+      description: "KRIPKE - WORDLE, but for Kripke frames!",
+      openGraph: {
+        title: "KRIPKE - cannorin.net",
+        description: "KRIPKE - WORDLE, but for Kripke frames!",
+      },
+      twitter: {
+        title: "KRIPKE - cannorin.net",
+        description: "KRIPKE - WORDLE, but for Kripke frames!",
+      },
+    } as SeoProps,
+  };
+}
--- a/apps/web/src/routes/kripke/+page.svelte
+++ b/apps/web/src/routes/kripke/+page.svelte
@@ -9,13 +9,14 @@ const dailyFrameId = isomorphic[getId(dailyFrame)];
 const relationSize = dailyFrame.relations.size;
 const guess = (frameId: number) => isomorphic[frameId] === dailyFrameId;
 const check = (formula: Formula) => validWorlds(dailyFrame, formula).length;
+const getAnswer = () => dailyFrameId;
 </script>

 <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="flex flex-col md:flex-row-reverse gap-x-20 gap-y-8">
-    <Game relationSize={relationSize} guess={guess} check={check} />
+    <Game relationSize={relationSize} guess={guess} check={check} getAnswer={getAnswer} />

    <div class="w-[300px] prose prose-sm">
      <h2>Rules</h2>
@@ -49,15 +50,15 @@ const check = (formula: Formula) => validWorlds(dailyFrame, formula).length;
      <p>You may use the following symbols:</p>
      <ul>
        <li>propositional variables: <code>p</code>, <code>q</code>, <code>r</code>, <code>s</code></li>
-        <li>verum: <code>T</code>, <code>⊤</code>, <code>1</code>, <code>\top</code></li>
-        <li>falsum: <code>F</code>, <code>⊥</code>, <code>0</code>, <code>\bot</code></li>
-        <li>negation: <code>~</code>, <code>¬</code>, <code>\neg</code>, <code>\lnot</code></li>
-        <li>box modality: <code>[]</code>, <code>□</code>, <code>L</code>, <code>\Box</code></li>
-        <li>diamond modality: <code>&lt;&gt;</code>, <code>⋄</code>, <code>M</code>, <code>\Diamond</code></li>
-        <li>conjunction: <code>&amp;</code>, <code>^</code>, <code>∧</code>, <code>\wedge</code>, <code>\land</code></li>
-        <li>disjunction: <code>|</code>, <code>v</code>, <code>∨</code>, <code>\vee</code>, <code>\lor</code></li>
-        <li>implication: <code>-&gt;</code>, <code>→</code>, <code>\rightarrow</code>, <code>\to</code>, <code>\implies</code></li>
-        <li>equivalence: <code>&lt;-&gt;</code>, <code>↔</code>, <code>\leftrightarrow</code>, <code>\iff</code></li>
+        <li>verum: <code>⊤</code>, <code>T</code>, <code>1</code>, <code>\top</code></li>
+        <li>falsum: <code>⊥</code>, <code>F</code>, <code>0</code>, <code>\bot</code></li>
+        <li>negation: <code>¬</code>, <code>~</code>, <code>\neg</code>, <code>\lnot</code></li>
+        <li>box modality: <code>□</code>, <code>[]</code>, <code>!</code>, <code>L</code>, <code>\Box</code></li>
+        <li>diamond modality: <code>⋄</code>, <code>&lt;&gt;</code>, <code>?</code>, <code>M</code>, <code>\Diamond</code></li>
+        <li>conjunction: <code>∧</code>, <code>^</code>, <code>&amp;</code>,  <code>\wedge</code>, <code>\land</code></li>
+        <li>disjunction: <code>∨</code>, <code>v</code>, <code>|</code>, <code>\vee</code>, <code>\lor</code></li>
+        <li>implication: <code>→</code>, <code>-&gt;</code>, <code>&gt;</code>, <code>\rightarrow</code>, <code>\to</code></li>
+        <li>equivalence: <code>↔</code>,  <code>&lt;-&gt;</code>, <code>=</code>, <code>\leftrightarrow</code>, <code>\equiv</code></li>
        <li>parentheses: <code>(</code>, <code>)</code></li>
      </ul>
    </div>
--- a/apps/web/src/routes/kripke/frame-input.svelte
+++ b/apps/web/src/routes/kripke/frame-input.svelte
@@ -8,15 +8,21 @@ import {
  right,
  worlds,
 } from "@cannorin/kripke";
+import type { SVGAttributes } from "svelte/elements";
 import { type Vector, add, degree, rotate, sub, theta } from "./vector";

+export interface FrameInputProps extends SVGAttributes<SVGElement> {
+  frame?: Frame | undefined;
+  disabled?: boolean | undefined;
+}
+
 let {
  frame = $bindable<Frame>({ relations: new Set() }),
  disabled = false,
-}: {
-  frame?: Frame | undefined;
-  disabled?: boolean | undefined;
-} = $props();
+  width,
+  height,
+  ...rest
+}: FrameInputProps = $props();

 let selected: World | null = $state(null);

@@ -130,7 +136,7 @@ function getPath(rel: Relation) {

 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<svg width="250" height="250" onclick={handleSvgClick}>
+<svg width={width ?? 250} height={height ?? 250} {...rest} viewBox="0,0,250,250" onclick={handleSvgClick}>
  <defs>
    <marker
      id="arrowhead"
--- a/apps/web/src/routes/kripke/game.svelte
+++ b/apps/web/src/routes/kripke/game.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
 import Katex from "$lib/components/katex.svelte";
+import { Button } from "$lib/components/ui/button";
+import * as Dialog from "$lib/components/ui/dialog";
+import { cn } from "$lib/utils";
 import {
  type Formula,
  type Frame,
@@ -9,8 +12,10 @@ import {
  latexSymbols,
  prettyPrint,
 } from "@cannorin/kripke";
+import LuCheck from "lucide-svelte/icons/check";
 import LuHeart from "lucide-svelte/icons/heart";
 import LuHeartCrack from "lucide-svelte/icons/heart-crack";
+import LuX from "lucide-svelte/icons/x";
 import FormulaInput from "./formula-input.svelte";
 import FrameInput from "./frame-input.svelte";

@@ -26,6 +31,7 @@ export type Props = {
  relationSize: number;
  guess: (frameId: number) => boolean | Promise<boolean>;
  check: (formula: Formula) => number | Promise<number>;
+  getAnswer: () => number | Promise<number>;
 };

 let {
@@ -34,10 +40,12 @@ let {
  relationSize,
  guess: guessImpl,
  check: checkImpl,
+  getAnswer,
 }: Props = $props();

 let formula: Formula | undefined = $state(undefined);
 let frame: Frame = $state(getFrame(0));
+let frameId = $derived(getId(frame));
 let math = $derived.by(() => {
  if (formula) return prettyPrint(formula, { symbols: latexSymbols });
  return "\\phantom{p}";
@@ -46,21 +54,24 @@ let math = $derived.by(() => {
 let remainingRelations = $derived(relationSize - frame.relations.size);

 let life = $derived(10 - moves.length);
+let dialogOpen = $state(false);

 $effect(() => {
  if (life <= 0) {
    status = "lose";
+    dialogOpen = true;
    return;
  }
  if (moves.some((move) => move.type === "guess" && move.correct)) {
    status = "win";
+    dialogOpen = true;
    return;
  }
 });

 let canGuess = $derived.by(() => {
  if (status !== "playing" || remainingRelations !== 0) return false;
-  const frameId = isomorphic[getId(frame)];
+  const frameId = getId(frame);
  return !moves.some(
    (move) => move.type === "guess" && move.frameId === frameId,
  );
@@ -90,6 +101,14 @@ async function check() {
  moves = [...moves];
  formula = undefined;
 }
+
+const colors: Record<number, string> = {
+  0: "bg-muted",
+  1: "bg-red-700",
+  2: "bg-amber-700",
+  3: "bg-yellow-600",
+  4: "bg-green-700",
+};
 </script>

 {#snippet sampleArrow()}
@@ -116,16 +135,16 @@ async function check() {
  <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" />
+        <LuHeart class={cn("text-primary", life <= 3 && "animate-pulse")} />
      {:else}
-        <LuHeartCrack class="text-muted" />
+        <LuHeartCrack class="text-muted animate-blink" />
      {/if}
    {/each}
  </div>

  <div class="flex flex-col items-center gap-2">
-    <div class="w-[300px] h-[300px] flex flex-col items-center justify-betwenn border rounded border-border">
-      <span class="text-xs text-muted self-start px-2 py-1">id: {isomorphic[getId(frame)]}</span>
+    <div class="w-[300px] h-[300px] flex flex-col items-center justify-between border rounded border-border">
+      <span class="text-xs text-muted self-start px-2 py-1">id: {frameId} (≈ {isomorphic[frameId]})</span>
      <FrameInput bind:frame disabled={status !== "playing"} />
      <span class="text-sm px-2 py-1 self-end flex items-center">
        {@render sampleArrow()} × {remainingRelations}
@@ -145,34 +164,100 @@ async function check() {

  <div class="flex flex-col items-center gap-2">
    <Katex math={math} />
-    <FormulaInput bind:formula disabled={status !== "playing"} />
-    <button
-      onclick={check}
-      disabled={!canCheck}
-      class={[
-        "rounded w-full p-1 text-background font-bold flex items-center justify-center gap-2",
-        canCheck ? "bg-primary" : "bg-muted cursor-not-allowed"
-      ]}>
-      {#if life <= 1}
-        Can't Check <span class="font-normal">(Last Move!)</span>
-      {:else}
-        Check! <span class="flex items-center font-normal">(<LuHeart size=14 class="mt-1 mr-[1px]"/> 1)</span>
-      {/if}
-    </button>
+    <form
+      class="flex flex-col items-center gap-2"
+      onsubmit={(e) => { e.preventDefault(); check(); }}>
+      <FormulaInput bind:formula disabled={status !== "playing"} />
+      <button
+        type="submit"
+        disabled={!canCheck}
+        class={[
+          "rounded w-full p-1 text-background font-bold flex items-center justify-center gap-2",
+          canCheck ? "bg-primary" : "bg-muted cursor-not-allowed"
+        ]}>
+        {#if life <= 1}
+          Can't Check <span class="font-normal">(Last Move!)</span>
+        {:else}
+          Check! <span class="flex items-center font-normal">(<LuHeart size=14 class="mt-1 mr-[1px]"/> 1)</span>
+        {/if}
+      </button>
+    </form>
  </div>

  <div>
    <ul class="flex flex-col gap-2">
      {#each moves as move}
-        <li>
-          {#if move.type === "guess"}
-            Guess({move.frameId}) = {move.correct}
-          {/if}
-          {#if move.type === "check"}
-            Valid({move.formulaStr}) = {move.valid}
-          {/if}
-        </li>
+        {#if move.type === "guess"}
+          <li class="flex justify-between items-center animate-fade-in">
+            <FrameInput disabled width={125} height={125} frame={getFrame(move.frameId)} />
+            <span class={["rounded w-6 h-6 min-w-6 min-h-6 max-w-6 max-h-6 text-background flex items-center justify-center", move.correct ? "bg-green-700" : "bg-muted"]}>
+              {#if move.correct}
+                <LuCheck size=24 />
+              {:else}
+                <LuX size=24 />
+              {/if}
+            </span>
+          </li>
+        {/if}
+        {#if move.type === "check"}
+          <li class="flex justify-between items-center animate-fade-in">
+            <Katex math={move.formulaStr} />
+            <span class={["rounded w-6 h-6 min-w-6 min-h-6 max-w-6 max-h-6 text-background font-bold flex items-center justify-center pb-[2px]", colors[move.valid]]}>{move.valid}</span>
+          </li>
+        {/if}
      {/each}
+      {#if status === "win"}
+        <li class="flex flex-col items-center gap-5 rounded bg-primary text-background p-5 animate-fade-in">
+          <p class="text-xl font-bold">YOU WIN!</p>
+        </li>
+      {:else if status === "lose"}
+        {#await getAnswer() then answerId}
+          <li class="flex flex-col gap-5 rounded bg-primary text-background p-5 animate-fade-in">
+            <div>
+              <p class="text-xl font-bold">YOU LOSE!</p>
+              <p class="text-sm">The answer was:</p>
+            </div>
+            <div class="flex flex-col items-center rounded bg-background w-full">
+              <span class="text-xs text-muted self-start px-2 py-1">id: {answerId}</span>
+              <FrameInput class="pb-6" disabled width={250} height={250} frame={getFrame(answerId)} />
+            </div>
+          </li>
+        {/await}
+      {/if}
    </ul>
  </div>
 </div>
+
+{#if status !== "playing"}
+  {#await getAnswer() then answerId}
+    <Dialog.Root bind:open={dialogOpen}>
+      <Dialog.Content class="animate-fade-in">
+        <Dialog.Header>
+          <Dialog.Title>
+            {#if status === "win"}
+              YOU WIN!
+            {:else if status === "lose"}
+              YOU LOSE!
+            {/if}
+          </Dialog.Title>
+          <Dialog.Description>
+            The answer was:
+          </Dialog.Description>
+        </Dialog.Header>
+
+        <div class="flex flex-col items-center w-fit rounded bg-background mx-auto">
+          <span class="text-xs text-muted self-start px-2 py-1">id: {answerId}</span>
+          <FrameInput class="pb-6" disabled width={250} height={250} frame={getFrame(answerId)} />
+        </div>
+
+        <Dialog.Footer class="gap-x-1 gap-y-2">
+          <Button
+            variant="outline"
+            onclick={() => (dialogOpen = false)}>
+            <LuX class="w-4 h-4 mt-[2px]" /> Close
+          </Button>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog.Root>
+  {/await}
+{/if}