Merge remote-tracking branch 'origin/main' into dot-font

Author: na-trium-144

routes/+page.svelte

@@ -13,6 +13,6 @@
 <a href="/game?stage=8">Stage 8</a>
 
 <p>
-<a href="/game?stage=3-1">Stage 3-1</a>
-<a href="/game?stage=3-2">Stage 3-2</a>
+  <a href="/game?stage=3-1">Stage 3-1</a>
+  <a href="/game?stage=3-2">Stage 3-2</a>
 </p>

src/ui-components/Game.svelte

@@ -1,16 +1,21 @@
 <script lang="ts">
+// client-only.
+
 import { setup } from "@/main.ts";
 import type { UIInfo } from "@/public-types.ts";
 import type { StageDefinition } from "@/stages.ts";
 import Ability from "@/ui-components/Ability.svelte";
 import Key from "@/ui-components/Key.svelte";
 import { onDestroy } from "svelte";
-import GameOverMenu from "./GameOverMenu.svelte";
-import GoalMenu from "./GoalMenu.svelte";
-// client-only.
-import PauseMenu from "./PauseMenu.svelte";
+import GameOverMenu from "./menu/GameOverMenu.svelte";
+import GoalMenu from "./menu/GoalMenu.svelte";
+import PauseMenu from "./menu/PauseMenu.svelte";
 
-type Props = { stageNum: string; stage: StageDefinition; stageNames: string[] };
+type Props = {
+  stageNum: string;
+  stage: StageDefinition;
+  stageNames: string[];
+};
 const { stageNum, stage, stageNames }: Props = $props();
 let container: HTMLElement | null = $state(null);
 
@@ -40,6 +45,7 @@ const nextStage = $derived(
 $effect(() => {
   if (container) {
     setup(container, stage, bindings);
+    return () => bindings.destroy();
   }
 });
 
@@ -59,14 +65,11 @@ onDestroy(() => bindings.destroy());
   />
   <GoalMenu
     goaled={uiContext.goaled}
-    nextStage={nextStage}
+    {nextStage}
     reset={() => bindings.reset()}
   />
-  <GameOverMenu
-    gameover={uiContext.gameover}
-    reset={() => bindings.reset()}
-  />
-    <div
+  <GameOverMenu gameover={uiContext.gameover} reset={() => bindings.reset()} />
+  <div
     class="uiBackground"
     style="position: fixed; left: 0; top: 0; right: 0; display: flex; align-items: end; "
   >

src/ui-components/GameOverMenu.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+import "./menu.css";
+
+type Props = {
+  gameover: boolean;
+  reset: () => void;
+};
+const { gameover, reset }: Props = $props();
+let el: HTMLDialogElement;
+$effect(() => {
+  if (gameover) {
+    el.showModal();
+  } else {
+    if (el.open) el.close();
+  }
+});
+document.addEventListener("keydown", (ev) => {
+  if (ev.key === "Escape") ev.preventDefault();
+});
+</script>
+
+<dialog bind:this={el} class="modal">
+  <div class="modal-box flex flex-col gap-1">
+    <h1 class="text-4xl text-center mt-6 mb-2">Game Over</h1>
+    <p class="text-xl text-center text-gray-500 mb-4">ctrl+Z で戻る</p>
+    <button
+      class="btn modal-btn"
+      onclick={() => {
+        el.close();
+        reset();
+      }}
+    >
+      Restart
+    </button>
+    <a class="btn modal-btn" href="/">Back to Stage Select</a>
+  </div>
+</dialog>

src/ui-components/GoalMenu.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+import { onDestroy } from "svelte";
+import "./menu.css";
+import { invalidate } from "$app/navigation";
+
+type Props = {
+  goaled: boolean;
+  nextStage: string;
+  reset: () => void;
+};
+const { goaled, nextStage, reset }: Props = $props();
+let el: HTMLDialogElement;
+$effect(() => {
+  if (goaled) {
+    el.showModal();
+  } else {
+    if (el.open) el.close();
+  }
+});
+document.addEventListener("keydown", (ev) => {
+  if (ev.key === "Escape") ev.preventDefault();
+});
+
+const nextStageUrl = $derived(`/game?stage=${nextStage}`);
+onDestroy(() => {
+  invalidate(nextStageUrl);
+  el.close();
+});
+</script>
+
+<dialog bind:this={el} class="modal">
+  <div class="modal-box flex flex-col gap-1">
+    <h1 class="text-4xl text-center my-6">Goal!</h1>
+    <a class="btn modal-btn" href={nextStageUrl}> Next Stage </a>
+    <button
+      class="btn modal-btn"
+      onclick={() => {
+        el.close();
+        reset();
+      }}
+    >
+      Restart
+    </button>
+    <a class="btn modal-btn" href="/">Back to Stage Select</a>
+  </div>
+</dialog>

src/ui-components/PauseMenu.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+import "./menu.css";
+type Props = {
+  paused: boolean;
+  alreadyStopped: boolean;
+  onresume: () => void;
+  onpause: () => void;
+  onreset: () => void;
+};
+let { paused, alreadyStopped, onresume, onpause, onreset }: Props = $props();
+let el: HTMLDialogElement;
+$effect(() => {
+  if (paused && !alreadyStopped) {
+    el.showModal();
+  } else {
+    el.close();
+  }
+});
+
+document.addEventListener("keydown", (ev) => {
+  if (ev.key === "Escape")
+    if (!paused && !alreadyStopped) {
+      onpause();
+      ev.preventDefault();
+    }
+});
+</script>
+
+<dialog bind:this={el} onclose={onresume} class="modal">
+  <div class="modal-box flex flex-col gap-1">
+    <h1 class="text-4xl text-center my-6">Paused</h1>
+    <form method="dialog" class="w-full">
+      <button class="btn modal-btn" type="submit">Resume</button>
+    </form>
+    <button class="btn modal-btn" onclick={() => onreset()}>Restart</button>
+    <a class="btn modal-btn" href="/"> Back to Stage Select </a>
+  </div>
+</dialog>

src/ui-components/menu/GameOverMenu.svelte

@@ -0,0 +1,13 @@
+.modal-btn {
+  width: 100%;
+  margin-top: 0.5rem;
+  font-size: 1.5rem;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+}
+.modal-box {
+  background: oklch(82.8% 0.189 84.429 / 40%);
+  backdrop-filter: blur(2px);
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+}