perf: preload thumbnail images

Author: aster-void

routes/stage-select/+page.svelte

@@ -4,20 +4,20 @@ import { onMount } from "svelte";
 import "@/ui-components/menu/menu.css";
 import { replaceState } from "$app/navigation";
 
-let w: string | null = null;
+let world: string | null = null;
 let selected: number | null = null;
 
 onMount(() => {
   const params = new URLSearchParams(window.location.search);
-  w = params.get("w") ?? "1";
+  world = params.get("w") ?? "1";
   selected = Number(params.get("s") ?? "1") - 1;
 });
 
 $: blocks = [
-  { label: "1", link: `/game?stage=${w}-1` },
-  { label: "2", link: `/game?stage=${w}-2` },
-  { label: "3", link: `/game?stage=${w}-3` },
-  { label: "4", link: `/game?stage=${w}-4` },
+  { label: "1", link: `/game?stage=${world}-1` },
+  { label: "2", link: `/game?stage=${world}-2` },
+  { label: "3", link: `/game?stage=${world}-3` },
+  { label: "4", link: `/game?stage=${world}-4` },
 ];
 
 let lastKeyTime = 0;
@@ -26,16 +26,16 @@ const KEY_REPEAT_DELAY = 180; // ms
 
 function prevWorld() {
   // wを数値として1減らす（1未満にはしない）
-  w = String(Math.max(1, Number(w) - 1));
+  world = String(Math.max(1, Number(world) - 1));
   const url = new URL(window.location.href);
-  url.searchParams.set("w", w);
+  url.searchParams.set("w", world);
   replaceState(url.toString(), {});
 }
 function nextWorld() {
   // wを数値として1増やす（4より大きくしない）
-  w = String(Math.min(4, Number(w) + 1));
+  world = String(Math.min(4, Number(world) + 1));
   const url = new URL(window.location.href);
-  url.searchParams.set("w", w);
+  url.searchParams.set("w", world);
   replaceState(url.toString(), {});
 }
 function select(index: number): void {
@@ -61,7 +61,7 @@ function handleKey(e: KeyboardEvent): void {
 
   if (e.key === "ArrowRight") {
     if (selected === blocks.length - 1) {
-      if (w !== "4") {
+      if (world !== "4") {
         nextWorld();
         select(0);
       }
@@ -70,7 +70,7 @@ function handleKey(e: KeyboardEvent): void {
     }
   } else if (e.key === "ArrowLeft") {
     if (selected === 0) {
-      if (w !== "1") {
+      if (world !== "1") {
         prevWorld();
         select(blocks.length - 1);
       }
@@ -99,46 +99,47 @@ onMount(() => {
 </script>
 
 <div id="container" class="fixed inset-0">
-  <div class="w-full h-full py-8 backdrop-blur-xs flex flex-col ">
-
+  <div class="w-full h-full py-8 backdrop-blur-xs flex flex-col">
     <div class="">
-    <button class="btn modal-btn text-xl ml-8 mb-6 w-max! px-4! ">
-      <a href="/">&lt; Back to Main Menu</a>
-    </button>
-  </div>
+      <button class="btn modal-btn text-xl ml-8 mb-6 w-max! px-4!">
+        <a href="/">&lt; Back to Main Menu</a>
+      </button>
+    </div>
     <div class="text-7xl text-center flex items-center justify-center gap-8">
       <!-- 左矢印ボタン -->
       <button
-        class="px-4 select-none cursor-pointer {Number(w) <= 1 ? "invisible" : ""} hover:-translate-y-1 hover:text-gray-700 active:translate-y-0 active:text-black "
+        class="px-4 select-none cursor-pointer {Number(world) <= 1
+          ? 'invisible'
+          : ''} hover:-translate-y-1 hover:text-gray-700 active:translate-y-0 active:text-black"
         aria-label="前のワールド"
         on:click={prevWorld}
-        disabled={Number(w) <= 1}
+        disabled={Number(world) <= 1}
       >
         &lt;
       </button>
-      <span>World {w}</span>
+      <span>World {world}</span>
       <!-- 右矢印ボタン -->
       <button
-        class="px-4 select-none cursor-pointer {Number(w) >= 4 ? "invisible" : ""} hover:-translate-y-1 hover:text-gray-700 active:translate-y-0 active:text-black "
+        class="px-4 select-none cursor-pointer {Number(world) >= 4
+          ? 'invisible'
+          : ''} hover:-translate-y-1 hover:text-gray-700 active:translate-y-0 active:text-black"
         aria-label="次のワールド"
         on:click={nextWorld}
-        disabled={Number(w) >= 4}
+        disabled={Number(world) >= 4}
       >
         &gt;
       </button>
     </div>
 
-    <div class="flex justify-center items-center grow-1 ">
-      <div
-        role="button"
-        tabindex="0"
-        class="flex outline-none items-center"
-      >
+    <div class="flex justify-center items-center grow-1">
+      <div role="button" tabindex="0" class="flex outline-none items-center">
         {#each blocks as block, i}
           <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 ${
-              selected === i ? 'border-red-500 ring ring-red-500 bg-amber-100!' : 'border-base'
+              selected === i
+                ? "border-red-500 ring ring-red-500 bg-amber-100!"
+                : "border-base"
             }`}
             on:click={() => select(i)}
           >
@@ -151,19 +152,27 @@ onMount(() => {
         {/each}
       </div>
     </div>
-    <div class="flex justify-center items-center basis-2/5 min-h-0 shrink grow-2">
+    <div
+      class="flex justify-center items-center basis-2/5 min-h-0 shrink grow-2"
+    >
       <!-- 画像を中央に配置 -->
-      <div class="h-full ">
+      <div class="h-full">
         {#if selected !== null}
-          <img
-            src="/assets/thumbnail{w}-{selected+1}.png"
-            alt=""
-            class="h-full "
-          />
+          {#key world}
+            {#each { length: 4 } as _, idx}
+              <img
+                src="/assets/thumbnail{world}-{idx + 1}.png"
+                alt=""
+                class={["h-full skeleton", idx !== selected && "hidden"]}
+              />
+            {/each}
+          {/key}
         {/if}
       </div>
       <!-- テキストを画像の右側に配置 -->
-      <div class="flex-none w-max max-h-full flex flex-col items-start bg-white/90 p-4 m-4 rounded-lg border-2">
+      <div
+        class="flex-none w-max max-h-full flex flex-col items-start bg-white/90 p-4 m-4 rounded-lg border-2"
+      >
         Press <Key key="Enter" enabled /> or <Key key="Space" enabled /> to start
       </div>
     </div>
@@ -173,10 +182,13 @@ onMount(() => {
 <style>
   #container {
     background-color: black;
-    background-image: url('/assets/home.png'), url('/assets/home-block.png');
+    background-image: url("/assets/home.png"), url("/assets/home-block.png");
     background-size: 100%, 100%;
     background-repeat: no-repeat, repeat-y;
-    background-position: left top, left, top;
+    background-position:
+      left top,
+      left,
+      top;
     backdrop-filter: blur(10px);
   }
-</style>
+</style>