uiの実装など

routes/game/+page.svelte

@@ -4,12 +4,13 @@ import { page } from "$app/state";
 import GameLoader from "@/components/GameLoader.svelte";
 import { stages } from "@/stages";
 
-const stageDefinition = $derived(
-  browser ? stages.get(page.url.searchParams.get("stage") ?? "") : undefined,
+const stageNum = $derived(
+  browser ? (page.url.searchParams.get("stage") ?? "") : "",
 );
+const stageDefinition = stages.get(stageNum);
 </script>
 
-<GameLoader stage={stageDefinition}>
+<GameLoader stage={stageDefinition} {stageNum}>
   {#snippet children(loadingState)}
     {loadingState}...
   {/snippet}

src/ability.ts

@@ -7,11 +7,13 @@ export type Coords = {
 };
 export type AbilityInit = {
   enabled?: AbilityEnableOptions;
+  inventoryIsInfinite?: boolean;
 };
 export type AbilityEnableOptions = {
-  copy: boolean;
-  paste: boolean;
-  cut: boolean;
+  // 回数 or Number.POSITIVE_INFINITY
+  copy: number;
+  paste: number;
+  cut: number;
 };
 type History = {
   at: { x: number; y: number };
@@ -21,33 +23,53 @@ type History = {
     before: Block | null;
     after: Block | null;
   };
+  enabled: {
+    before: AbilityEnableOptions;
+    after: AbilityEnableOptions;
+  };
 };
 export class AbilityControl {
   history: History[] = [];
   historyIndex = 0;
   inventory: Block | null = null;
-  inventoryIsInfinite = false;
+  inventoryIsInfinite: boolean;
   enabled: AbilityEnableOptions;
   focused: Coords | undefined;
   constructor(cx: Context, options?: AbilityInit) {
     this.enabled = options?.enabled ?? {
-      copy: true,
-      paste: true,
-      cut: true,
+      copy: Number.POSITIVE_INFINITY,
+      paste: Number.POSITIVE_INFINITY,
+      cut: Number.POSITIVE_INFINITY,
     };
+    this.inventoryIsInfinite = options?.inventoryIsInfinite ?? false;
+    cx.uiContext.update((prev) => ({
+      ...prev,
+      inventory: this.inventory,
+      inventoryIsInfinite: this.inventoryIsInfinite,
+      ...this.enabled,
+      undo: 0,
+      redo: 0,
+    }));
     document.addEventListener("copy", (e) => {
       e.preventDefault();
-      if (this.enabled.copy) this.copy(cx);
+      if (this.enabled.copy > 0) this.copy(cx);
     });
     document.addEventListener("cut", (e) => {
       e.preventDefault();
-      if (this.enabled.cut) this.cut(cx);
+      if (this.enabled.cut > 0) this.cut(cx);
     });
     document.addEventListener("paste", (e) => {
       e.preventDefault();
-      if (this.enabled.paste) this.paste(cx);
+      if (this.enabled.paste > 0) this.paste(cx);
     });
   }
+  setInventory(cx: Context, inventory: Block | null) {
+    this.inventory = inventory;
+    cx.uiContext.update((prev) => ({
+      ...prev,
+      inventory,
+    }));
+  }
   highlightCoord(playerAt: Coords, facing: Facing) {
     let dx: number;
     switch (facing) {
@@ -70,7 +92,11 @@ export class AbilityControl {
     if (!this.focused) return;
     const target = cx.grid.getBlock(this.focused.x, this.focused.y);
     if (!target || target !== Block.movable) return;
-    this.inventory = target;
+    this.setInventory(cx, target);
+    cx.uiContext.update((prev) => ({
+      ...prev,
+      copy: --this.enabled.copy,
+    }));
   }
   paste(cx: Context) {
     if (!this.focused) return;
@@ -80,17 +106,25 @@ export class AbilityControl {
     const prevInventory = this.inventory;
     cx.grid.setBlock(cx, this.focused.x, this.focused.y, this.inventory);
     if (!this.inventoryIsInfinite) {
-      this.inventory = null;
+      this.setInventory(cx, null);
     }
-
-    this.pushHistory({
+    const prevEnabled = { ...this.enabled };
+    cx.uiContext.update((prev) => ({
+      ...prev,
+      paste: --this.enabled.paste,
+    }));
+    this.pushHistory(cx, {
       at: { ...this.focused },
       from: Block.air,
       to: prevInventory,
       inventory: {
         before: prevInventory,
         after: this.inventory,
       },
+      enabled: {
+        before: prevEnabled,
+        after: this.enabled,
+      },
     });
   }
   cut(cx: Context) {
@@ -99,55 +133,82 @@ export class AbilityControl {
     // removable 以外はカットできない
     if (!target || target !== Block.movable) return;
     const prevInventory = this.inventory;
-    this.inventory = target;
+    this.setInventory(cx, target);
     cx.grid.setBlock(cx, this.focused.x, this.focused.y, Block.air);
-
-    this.pushHistory({
+    const prevEnabled = { ...this.enabled };
+    cx.uiContext.update((prev) => ({
+      ...prev,
+      cut: --this.enabled.cut,
+    }));
+    this.pushHistory(cx, {
       at: { ...this.focused },
       from: target,
       to: Block.air,
       inventory: {
         before: prevInventory,
         after: target,
       },
+      enabled: {
+        before: prevEnabled,
+        after: this.enabled,
+      },
     });
   }
 
   // History については、 `docs/history-stack.png` を参照のこと
-  pushHistory(h: History) {
+  pushHistory(cx: Context, h: History) {
     this.history = this.history.slice(0, this.historyIndex);
     this.history.push(h);
     this.historyIndex = this.history.length;
     console.log(`history: ${this.historyIndex} / ${this.history.length}`);
+    cx.uiContext.update((prev) => ({
+      ...prev,
+      undo: this.historyIndex,
+      redo: 0,
+    }));
   }
   undo(cx: Context) {
     if (this.historyIndex <= 0) return;
     this.historyIndex--; // undo は、巻き戻し後の index で計算する
     const op = this.history[this.historyIndex];
     cx.grid.setBlock(cx, op.at.x, op.at.y, op.from);
-    this.inventory = op.inventory.before;
+    this.setInventory(cx, op.inventory.before);
+    this.enabled = op.enabled.before;
+    cx.uiContext.update((prev) => ({
+      ...prev,
+      ...this.enabled,
+      undo: this.historyIndex,
+      redo: this.history.length - this.historyIndex,
+    }));
     console.log(`history: ${this.historyIndex} / ${this.history.length}`);
   }
   redo(cx: Context) {
     if (this.historyIndex >= this.history.length) return;
     const op = this.history[this.historyIndex];
     this.historyIndex++; // redo は、巻き戻し前の index
-    this.inventory = op.inventory.after;
+    this.setInventory(cx, op.inventory.after);
     cx.grid.setBlock(cx, op.at.x, op.at.y, op.to);
+    this.enabled = op.enabled.after;
+    cx.uiContext.update((prev) => ({
+      ...prev,
+      ...this.enabled,
+      undo: this.historyIndex,
+      redo: this.history.length - this.historyIndex,
+    }));
     console.log(`history: ${this.historyIndex} / ${this.history.length}`);
   }
-  handleKeyDown(cx: Context, e: KeyboardEvent, onGround: boolean) {
+  handleKeyDown(cx: Context, e: KeyboardEvent /*, onGround: boolean*/) {
     if (!(e.ctrlKey || e.metaKey)) return;
 
-    if (this.enabled.paste && onGround && e.key === "v") {
-      this.paste(cx);
-    }
-    if (this.enabled.copy && onGround && e.key === "c") {
-      this.copy(cx);
-    }
-    if (this.enabled.cut && onGround && e.key === "x") {
-      this.cut(cx);
-    }
+    // if (this.enabled.paste > 0 && onGround && e.key === "v") {
+    //   this.paste(cx);
+    // }
+    // if (this.enabled.copy > 0 && onGround && e.key === "c") {
+    //   this.copy(cx);
+    // }
+    // if (this.enabled.cut > 0 && onGround && e.key === "x") {
+    //   this.cut(cx);
+    // }
     if (e.key === "z") {
       this.undo(cx);
       e.preventDefault();

src/components/Ability.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+import Key from "./Key.svelte";
+type Props = { name: string; key: string; num: number };
+const { name, num, key }: Props = $props();
+</script>
+<span style="color: {num > 0 ? "black" : "gray"}">
+  <Key {key} enabled={num > 0} />
+  <span style="font-size: 1.5rem;">{name}</span>
+  <span style="font-size: 1.5rem;">✕</span>
+  <span style="font-size: 2rem; margin-right: 1rem;">{isFinite(num) ? num : "∞"}</span>
+</span>

src/components/Game.svelte

@@ -1,19 +1,75 @@
 <script lang="ts">
+import { Block } from "@/constants.ts";
+import type { UIContext } from "@/context.ts";
 // client-only.
 import { setup } from "@/main.ts";
 import type { StageDefinition } from "@/stages.ts";
+import { type Writable, writable } from "svelte/store";
+import Ability from "./Ability.svelte";
 
-type Props = { stage: StageDefinition };
-const { stage }: Props = $props();
+type Props = { stageNum: string; stage: StageDefinition };
+const { stageNum, stage }: Props = $props();
 let container: HTMLElement | null = $state(null);
-
+const uiContext = writable<UIContext>({
+  inventory: null,
+  inventoryIsInfinite: false,
+  copy: 0,
+  cut: 0,
+  paste: 0,
+  undo: 0,
+  redo: 0,
+});
 $effect(() => {
   if (container) {
-    setup(container, stage);
+    setup(container, stage, uiContext);
   }
 });
 </script>
 
-<div id="app">
-  <div bind:this={container}></div>
+<div bind:this={container} class="container">
+  <div class="uiBackground" style="position: fixed; left: 0; top: 0; right: 0; display: flex; align-items: baseline;">
+    <span style="font-size: 2rem; margin-right:0.5rem;">Stage:</span>
+    <span style="font-size: 2.5rem">{stageNum}</span>
+    <span style="flex-grow: 1"></span>
+    <span style="font-size: 1.5rem;">Clipboard:</span>
+    <div class="inventory">
+      {#if $uiContext.inventory === Block.movable}
+        <!-- todo: tint 0xff0000 をする必要があるが、そもそもこの画像は仮なのか本当に赤色にするのか -->
+        <img src="/assets/block.png" width="100%" height="100%"/>
+      {/if}
+    </div>
+    <span style="font-size: 1.5rem;">✕</span>
+    <span style="font-size: 2rem;">{$uiContext.inventoryIsInfinite ? "∞" : "1"}</span>
+  </div>
+    <div class="uiBackground" style="position: fixed; left: 0; bottom: 0; right: 0; display: flex; align-items: baseline;">
+    <span style="font-size: 1.5rem; margin-right: 1rem;">Abilities:</span>
+    <Ability key="C" name="Copy" num={$uiContext.copy} />
+    <Ability key="X" name="Cut" num={$uiContext.cut} />
+    <Ability key="V" name="Paste" num={$uiContext.paste} />
+    <Ability key="Z" name="Undo" num={$uiContext.undo} />
+    <Ability key="Y" name="Redo" num={$uiContext.redo} />
+  </div>
 </div>
+
+<style>
+  .container {
+    width: 100dvw;
+    height: 100dvh;
+    overflow: hidden;
+  }
+  .uiBackground {
+    background: oklch(82.8% 0.189 84.429 / 40%);
+    backdrop-filter: blur(2px);
+    padding: 0.75rem 1rem; 
+  }
+  .inventory {
+    width: 3rem;
+    height: 3rem;
+    margin: 0 0.5rem;
+    align-self: center;
+    border-style: solid;
+    border-width: 0.3rem;
+    border-radius: 0.5rem;
+    border-color: oklch(87.9% 0.169 91.605);
+  }
+</style>

src/components/GameLoader.svelte

@@ -6,17 +6,18 @@ import type { Snippet } from "svelte";
 
 type Props = {
   children: Snippet<[string]>;
+  stageNum: string;
   stage: StageDefinition | undefined;
 };
-const { children, stage }: Props = $props();
+const { children, stageNum, stage }: Props = $props();
 </script>
 
 {#if browser}
   {#await import("@/components/Game.svelte")}
     {@render children("Downloading")}
   {:then { default: Game }}
     {#if stage}
-      <Game {stage} />
+      <Game {stageNum} {stage} />
     {:else}
       Stage not found! <a href="/">Go Back</a>
     {/if}

src/components/Key.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+type Props = { key: string; enabled: boolean };
+const { key, enabled }: Props = $props();
+let isMacOS: boolean = $state(false);
+$effect(() => {
+  isMacOS = navigator.userAgent.includes("Mac OS X");
+});
+</script>
+<span class="key" style="border-color: {enabled ? "black" : "gray"}; background: {enabled ? "white" : "lightgray"};">
+  {isMacOS ? "⌘+" + key : "Ctrl+" + key}
+</span>
+<style>
+  .key{
+    display: inline-block;
+    font-size: 1rem;
+    padding: 0.3rem;
+    border-style: solid;
+    border-width: 0.2rem;
+    border-radius: 0.3rem;
+  }
+</style>