searchParamがステージ選択に反映されていなかったのを修正

Author: na-trium-144

routes/stage-select/+page.svelte

@@ -5,7 +5,12 @@ import "@/ui-components/menu/menu.css";
 import { goto } from "$app/navigation";
 import { MAX_WORLD, SearchParamState } from "./params.svelte.ts";
 
-const search = new SearchParamState(1);
+const search = $state(new SearchParamState());
+onMount(() => {
+  const params = new URLSearchParams(window.location.search);
+  search.world = Number(params.get("world") || "1");
+  search.selected = Number(params.get("selected") || "1");
+});
 
 const blocks = $derived(
   new Array(search.maxStage).fill(null).map((_, idx) => ({
@@ -75,23 +80,24 @@ onMount(() => {
       <button
         class={[
           "appearance-none focus:outline-none px-4 select-none cursor-pointer",
-          search.world <= 1 && 'invisible',
-          "hover:-translate-y-1 hover:text-gray-700 active:translate-y-0 active:text-black"]}
-        onclick={() => search.world--}
-        disabled={search.world <= 1}
+          (search.world === null || search.world <= 1) && "invisible",
+          "hover:-translate-y-1 hover:text-gray-700 active:translate-y-0 active:text-black",
+        ]}
+        onclick={() => search.world !== null && search.world--}
+        disabled={search.world === null || search.world <= 1}
       >
         &lt;
       </button>
       <span>World {search.world}</span>
       <!-- 右矢印ボタン -->
       <button
         aria-label="次のワールド"
-        onclick={() => search.world++}
-        disabled={search.world >= MAX_WORLD}
+        onclick={() => search.world !== null && search.world++}
+        disabled={search.world === null || search.world >= MAX_WORLD}
         class={[
           "appearance-none focus:outline-none px-4 select-none cursor-pointer",
-          search.world >= MAX_WORLD && 'invisible',
-          "hover:-translate-y-1 hover:text-gray-700 active:translate-y-0 active:text-black"
+          (search.world === null || search.world >= MAX_WORLD) && "invisible",
+          "hover:-translate-y-1 hover:text-gray-700 active:translate-y-0 active:text-black",
         ]}
       >
         &gt;
@@ -101,15 +107,15 @@ onMount(() => {
     <div class="flex justify-center items-center grow-1">
       <div role="button" tabindex="0" class="flex outline-none items-center">
         {#each blocks as block, idx}
-        {@const stage = idx + 1}
+          {@const stage = idx + 1}
           <button
             type="button"
             class={`appearance-none focus:outline-none bg-white border-6 pt-8 pb-6 pl-8 pr-6 transition-colors duration-200 text-7xl cursor-pointer ${
               search.selected === stage
                 ? "border-red-500 ring ring-red-500 bg-amber-100!"
                 : "border-base"
             }`}
-            onmouseenter={() => search.selected = stage}
+            onmouseenter={() => (search.selected = stage)}
             onclick={() => goto(block.link)}
           >
             {block.label}
@@ -129,11 +135,14 @@ onMount(() => {
         {#if search.selected !== null}
           {#key search.world}
             {#each blocks as block, idx}
-            {@const stage = idx + 1}
+              {@const stage = idx + 1}
               <img
                 src={block.thumbnail}
                 alt=""
-                class={["h-full skeleton", stage !== search.selected && "hidden"]}
+                class={[
+                  "h-full skeleton",
+                  stage !== search.selected && "hidden",
+                ]}
               />
             {/each}
           {/key}
@@ -143,17 +152,12 @@ onMount(() => {
       <div
         class="flex-none w-70 max-h-full bg-white/90 p-4 m-4 rounded-lg border-2"
       >
-      <div>
-        Click,
-      </div>
-      <div>
-        Press <Key key="Enter" enabled />
-      </div>
-      <div>or Press <Key key="Space" enabled />
-      </div>
-      <div>
-        To Start
-      </div>
+        <div>Click,</div>
+        <div>
+          Press <Key key="Enter" enabled />
+        </div>
+        <div>or Press <Key key="Space" enabled /></div>
+        <div>To Start</div>
       </div>
     </div>
   </div>

routes/stage-select/params.svelte.ts

@@ -10,38 +10,32 @@ const WORLD_STAGES_MAP = new Map([
 ]);
 
 export class SearchParamState {
-  #world: number = $state(1); // starts from 1
+  #world: number | null = $state(null); // starts from 1
   #selected: number | null = $state(null); // starts from 1
-  maxStage: number = $derived(WORLD_STAGES_MAP.get(this.#world) ?? 0);
-  constructor(private defaultWorld: number) {
-    if (!browser) {
-      this.#world = this.defaultWorld;
-      this.#selected = null;
-      return;
-    }
-    const params = new URLSearchParams(window.location.href);
-    this.#world = Number(params.get("world") || defaultWorld);
-    this.#selected = Number(params.get("selected") || null);
+  maxStage: number = $derived(WORLD_STAGES_MAP.get(this.#world ?? 0) ?? 0);
+  constructor() {
+    this.#world = null;
+    this.#selected = null;
   }
 
-  get world(): number {
+  get world(): number | null {
     return this.#world;
   }
-  set world(val: number) {
-    this.#world = val;
+  set world(val: number | null) {
+    console.log("world", val);
     if (!browser) return;
 
+    if (val === null) return;
     if (val > MAX_WORLD) return;
     if (val < 1) return;
+    this.#world = val;
 
     const nextMaxStage = WORLD_STAGES_MAP.get(val) ?? 0;
     if (this.#selected !== null && this.#selected > nextMaxStage) {
       this.#selected = nextMaxStage;
     }
 
-    const url = new URL(window.location.href);
-    url.searchParams.set("world", String(val));
-    replaceState(url.toString(), {});
+    this.updateURL();
   }
 
   get selected(): number | null {
@@ -52,35 +46,47 @@ export class SearchParamState {
     if (!browser) return;
     if (val === null) return;
 
-    if (val > (WORLD_STAGES_MAP.get(this.#world) ?? 0)) {
+    if (val > (WORLD_STAGES_MAP.get(this.#world ?? 0) ?? 0)) {
       if (this.#world === MAX_WORLD) {
-        // do not change
+        // keep old value
       } else {
         this.#selected = 1;
         this.nextWorld();
       }
     } else if (val < 1) {
       if (this.#world === 1) {
-        // do not change
+        // keep old value
       } else {
         this.prevWorld();
-        this.#selected = WORLD_STAGES_MAP.get(this.#world) ?? 0;
+        this.#selected = WORLD_STAGES_MAP.get(this.#world ?? 0) ?? 0;
       }
     } else {
       this.#selected = val;
     }
 
-    const url = new URL(window.location.href);
-    url.searchParams.set("selected", String(this.#selected));
-    replaceState(url.toString(), {});
+    this.updateURL();
   }
 
   nextWorld() {
-    this.world = Math.min(MAX_WORLD, this.world + 1);
+    this.world = Math.min(MAX_WORLD, (this.world ?? 0) + 1);
     this.selected = 1;
+    this.updateURL();
   }
   prevWorld() {
-    this.world = Math.max(1, this.world - 1);
-    this.selected = WORLD_STAGES_MAP.get(this.world) ?? 0;
+    this.world = Math.max(1, (this.world ?? 0) - 1);
+    this.selected = WORLD_STAGES_MAP.get(this.world ?? 0) ?? 0;
+    this.updateURL();
+  }
+
+  updateURL() {
+    const url = new URL(window.location.href);
+    url.searchParams.set("world", String(this.#world));
+    url.searchParams.set("selected", String(this.#selected));
+    try {
+      replaceState(url.toString(), {});
+    } catch (e) {
+      // what do you mean "Cannot call replaceState(...) before router is initialized"
+      console.warn("Failed to update URL:", e);
+    }
   }
 }

src/ui-components/menu/GameOverMenu.svelte

@@ -75,6 +75,6 @@ $effect(() => {
     >
       Restart
     </button>
-    <a class="btn modal-btn" href="/stage-select?w={stageNum.split("-")[0]}&s={stageNum.split("-")[1]}" bind:this={btn2} tabindex="2"> Back to Stage Select </a>
+    <a class="btn modal-btn" href="/stage-select?world={stageNum.split("-")[0]}&selected={stageNum.split("-")[1]}" bind:this={btn2} tabindex="2"> Back to Stage Select </a>
   </div>
 </dialog>

src/ui-components/menu/GoalMenu.svelte

@@ -85,6 +85,6 @@ onDestroy(() => {
     >
       Restart
     </button>
-    <a class="btn modal-btn" href="/stage-select?w={stageNum.split("-")[0]}&s={stageNum.split("-")[1]}" bind:this={btn3} tabindex="3" > Back to Stage Select </a>
+    <a class="btn modal-btn" href="/stage-select?world={stageNum.split("-")[0]}&selected={stageNum.split("-")[1]}" bind:this={btn3} tabindex="3"> Back to Stage Select </a>
   </div>
 </dialog>

src/ui-components/menu/PauseMenu.svelte

@@ -71,6 +71,6 @@ $effect(() => {
       <button class="btn modal-btn" type="submit" bind:this={btn1} tabindex="1">Resume</button>
     </form>
     <button class="btn modal-btn" onclick={() => onreset()} bind:this={btn2} tabindex="2">Restart</button>
-    <a class="btn modal-btn" href="/stage-select?w={stageNum.split("-")[0]}&s={stageNum.split("-")[1]}" bind:this={btn3} tabindex="3"> Back to Stage Select </a>
+    <a class="btn modal-btn" href="/stage-select?world={stageNum.split("-")[0]}&selected={stageNum.split("-")[1]}" bind:this={btn3} tabindex="3"> Back to Stage Select </a>
   </div>
 </dialog>