chore: rename components -> ui-components

Author: aster-void

routes/game/+page.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 import { browser } from "$app/environment";
 import { page } from "$app/state";
-import GameLoader from "@/components/GameLoader.svelte";
 import { stages } from "@/stages";
+import GameLoader from "@/ui-components/GameLoader.svelte";
 
 const stageNum = $derived(
   browser ? (page.url.searchParams.get("stage") ?? "") : "",
 );
-const stageDefinition = stages.get(stageNum);
+const stageDefinition = $derived(stages.get(stageNum));
 </script>
 
 <GameLoader stage={stageDefinition} {stageNum}>

src/components/Ability.svelte src/ui-components/Ability.sveltesrc/components/Ability.svelte renamed to src/ui-components/Ability.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
+// client-only.
 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";
+import Ability from "@/ui-components/Ability.svelte";
+import { writable } from "svelte/store";
 
 type Props = { stageNum: string; stage: StageDefinition };
 const { stageNum, stage }: Props = $props();
@@ -27,21 +27,34 @@ $effect(() => {
 </script>
 
 <div bind:this={container} class="container">
-  <div class="uiBackground" style="position: fixed; left: 0; top: 0; right: 0; display: flex; align-items: baseline;">
+  <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%"/>
+        <img
+          src="/assets/block.png"
+          alt="inventory"
+          width="100%"
+          height="100%"
+        />
       {/if}
     </div>
     <span style="font-size: 1.5rem;">✕</span>
-    <span style="font-size: 2rem;">{$uiContext.inventoryIsInfinite ? "∞" : "1"}</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;">
+  <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} />
@@ -60,7 +73,7 @@ $effect(() => {
   .uiBackground {
     background: oklch(82.8% 0.189 84.429 / 40%);
     backdrop-filter: blur(2px);
-    padding: 0.75rem 1rem; 
+    padding: 0.75rem 1rem;
   }
   .inventory {
     width: 3rem;

src/components/Game.svelte src/ui-components/Game.sveltesrc/components/Game.svelte renamed to src/ui-components/Game.svelte

@@ -13,7 +13,7 @@ const { children, stageNum, stage }: Props = $props();
 </script>
 
 {#if browser}
-  {#await import("@/components/Game.svelte")}
+  {#await import("@/ui-components/Game.svelte")}
     {@render children("Downloading")}
   {:then { default: Game }}
     {#if stage}