From 64b939e6ac0b196d18ee183a37a40b0bf7927a80 Mon Sep 17 00:00:00 2001
From: Natsuu <natsukawa247@outlook.com>
Date: Wed, 14 Jan 2026 03:41:18 +0000
Subject: refactor: split App.svelte into components

---
 ui/src/components/BottomBar.svelte | 86 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 ui/src/components/BottomBar.svelte

(limited to 'ui/src/components/BottomBar.svelte')

diff --git a/ui/src/components/BottomBar.svelte b/ui/src/components/BottomBar.svelte
new file mode 100644
index 0000000..ceba5b3
--- /dev/null
+++ b/ui/src/components/BottomBar.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+  import { authState } from "../stores/auth.svelte";
+  import { gameState } from "../stores/game.svelte";
+  import { uiState } from "../stores/ui.svelte";
+</script>
+
+<div
+  class="h-24 bg-zinc-900 border-t border-zinc-800 flex items-center px-8 justify-between z-20 shadow-2xl"
+>
+  <div class="flex items-center gap-4">
+    <div
+      class="flex items-center gap-4 cursor-pointer hover:opacity-80 transition-opacity"
+      onclick={() => authState.openLoginModal()}
+      role="button"
+      tabindex="0"
+      onkeydown={(e) => e.key === "Enter" && authState.openLoginModal()}
+    >
+      <div
+        class="w-12 h-12 rounded bg-gradient-to-tr from-indigo-500 to-purple-500 shadow-lg flex items-center justify-center text-white font-bold text-xl overflow-hidden"
+      >
+        {#if authState.currentAccount}
+          <img
+            src={`https://minotar.net/avatar/${authState.currentAccount.username}/48`}
+            alt={authState.currentAccount.username}
+            class="w-full h-full"
+          />
+        {:else}
+          ?
+        {/if}
+      </div>
+      <div>
+        <div class="font-bold text-white text-lg">
+          {authState.currentAccount ? authState.currentAccount.username : "Click to Login"}
+        </div>
+        <div class="text-xs text-zinc-400 flex items-center gap-1">
+          <span
+            class="w-1.5 h-1.5 rounded-full {authState.currentAccount
+              ? 'bg-green-500'
+              : 'bg-zinc-500'}"
+          ></span>
+          {authState.currentAccount ? "Ready" : "Guest"}
+        </div>
+      </div>
+    </div>
+    <!-- Console Toggle -->
+    <button
+      class="ml-4 text-xs text-zinc-500 hover:text-zinc-300 transition"
+      onclick={() => uiState.toggleConsole()}
+    >
+      {uiState.showConsole ? "Hide Logs" : "Show Logs"}
+    </button>
+  </div>
+
+  <div class="flex items-center gap-4">
+    <div class="flex flex-col items-end mr-2">
+      <label
+        class="text-xs text-zinc-500 mb-1 uppercase font-bold tracking-wider"
+        >Version</label
+      >
+      <select
+        bind:value={gameState.selectedVersion}
+        class="bg-zinc-950 text-zinc-200 border border-zinc-700 rounded px-4 py-2 hover:border-zinc-500 transition-colors cursor-pointer outline-none focus:ring-1 focus:ring-indigo-500 w-48"
+      >
+        {#if gameState.versions.length === 0}
+          <option>Loading...</option>
+        {:else}
+          {#each gameState.versions as version}
+            <option value={version.id}>{version.id} ({version.type})</option
+            >
+          {/each}
+        {/if}
+      </select>
+    </div>
+
+    <button
+      onclick={() => gameState.startGame()}
+      class="bg-green-600 hover:bg-green-500 text-white font-bold h-14 px-12 rounded transition-all transform active:scale-95 shadow-[0_0_15px_rgba(22,163,74,0.4)] hover:shadow-[0_0_25px_rgba(22,163,74,0.6)] flex flex-col items-center justify-center uppercase tracking-wider text-lg"
+    >
+      Play
+      <span
+        class="text-[10px] font-normal opacity-80 normal-case tracking-normal"
+        >Click to launch</span
+      >
+    </button>
+  </div>
+</div>
-- 
cgit v1.2.3-70-g09d2


From 90a4cdf980b801570c001cd5c75b8aad46bcfb47 Mon Sep 17 00:00:00 2001
From: Natsuu <natsukawa247@outlook.com>
Date: Wed, 14 Jan 2026 03:56:55 +0000
Subject: chore: add for attributes to labels in BottomBar and SettingsView
 components

---
 ui/src/components/BottomBar.svelte    |  2 ++
 ui/src/components/SettingsView.svelte | 24 ++++++++++++++----------
 2 files changed, 16 insertions(+), 10 deletions(-)

(limited to 'ui/src/components/BottomBar.svelte')

diff --git a/ui/src/components/BottomBar.svelte b/ui/src/components/BottomBar.svelte
index ceba5b3..dcad9e8 100644
--- a/ui/src/components/BottomBar.svelte
+++ b/ui/src/components/BottomBar.svelte
@@ -54,10 +54,12 @@
   <div class="flex items-center gap-4">
     <div class="flex flex-col items-end mr-2">
       <label
+        for="version-select"
         class="text-xs text-zinc-500 mb-1 uppercase font-bold tracking-wider"
         >Version</label
       >
       <select
+        id="version-select"
         bind:value={gameState.selectedVersion}
         class="bg-zinc-950 text-zinc-200 border border-zinc-700 rounded px-4 py-2 hover:border-zinc-500 transition-colors cursor-pointer outline-none focus:ring-1 focus:ring-indigo-500 w-48"
       >
diff --git a/ui/src/components/SettingsView.svelte b/ui/src/components/SettingsView.svelte
index f09be4e..9f260c1 100644
--- a/ui/src/components/SettingsView.svelte
+++ b/ui/src/components/SettingsView.svelte
@@ -9,11 +9,13 @@
     <!-- Java Path -->
     <div class="bg-zinc-800/50 p-6 rounded-lg border border-zinc-700">
       <label
+        for="java-path"
         class="block text-sm font-bold text-zinc-400 mb-2 uppercase tracking-wide"
         >Java Executable Path</label
       >
       <div class="flex gap-2">
         <input
+          id="java-path"
           bind:value={settingsState.settings.java_path}
           type="text"
           class="bg-zinc-950 text-white flex-1 p-3 rounded border border-zinc-700 focus:border-indigo-500 outline-none font-mono text-sm"
@@ -58,27 +60,28 @@
 
     <!-- Memory -->
     <div class="bg-zinc-800/50 p-6 rounded-lg border border-zinc-700">
-      <label
+      <h3
         class="block text-sm font-bold text-zinc-400 mb-4 uppercase tracking-wide"
-        >Memory Allocation (RAM)</label
-      >
+        >Memory Allocation (RAM)</h3>
 
       <div class="grid grid-cols-2 gap-6">
         <div>
-          <label class="block text-xs text-zinc-500 mb-1"
+          <label for="min-memory" class="block text-xs text-zinc-500 mb-1"
             >Minimum (MB)</label
           >
           <input
+            id="min-memory"
             bind:value={settingsState.settings.min_memory}
             type="number"
             class="bg-zinc-950 text-white w-full p-3 rounded border border-zinc-700 focus:border-indigo-500 outline-none"
           />
         </div>
         <div>
-          <label class="block text-xs text-zinc-500 mb-1"
+          <label for="max-memory" class="block text-xs text-zinc-500 mb-1"
             >Maximum (MB)</label
           >
           <input
+            id="max-memory"
             bind:value={settingsState.settings.max_memory}
             type="number"
             class="bg-zinc-950 text-white w-full p-3 rounded border border-zinc-700 focus:border-indigo-500 outline-none"
@@ -89,22 +92,23 @@
 
     <!-- Resolution -->
     <div class="bg-zinc-800/50 p-6 rounded-lg border border-zinc-700">
-      <label
+      <h3
         class="block text-sm font-bold text-zinc-400 mb-4 uppercase tracking-wide"
-        >Game Window Size</label
-      >
+        >Game Window Size</h3>
       <div class="grid grid-cols-2 gap-6">
         <div>
-          <label class="block text-xs text-zinc-500 mb-1">Width</label>
+          <label for="window-width" class="block text-xs text-zinc-500 mb-1">Width</label>
           <input
+            id="window-width"
             bind:value={settingsState.settings.width}
             type="number"
             class="bg-zinc-950 text-white w-full p-3 rounded border border-zinc-700 focus:border-indigo-500 outline-none"
           />
         </div>
         <div>
-          <label class="block text-xs text-zinc-500 mb-1">Height</label>
+          <label for="window-height" class="block text-xs text-zinc-500 mb-1">Height</label>
           <input
+            id="window-height"
             bind:value={settingsState.settings.height}
             type="number"
             class="bg-zinc-950 text-white w-full p-3 rounded border border-zinc-700 focus:border-indigo-500 outline-none"
-- 
cgit v1.2.3-70-g09d2