More QoL changes

messages/en.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://inlang.com/schema/inlang-message-format",
 	"app_title": "Ultimate Gaming",
-	"app_version": "V0.01 Student Edition",
+	"app_version": "v0.1.0",
 	"coming_soon": "Coming Soon",
 	"game_kuldvillak": "Jeopardy",
 	"game_rooside_soda": "Family Feud",
@@ -99,7 +99,7 @@
 	"kv_play_last_answer": "Last",
 	"kv_play_introduce_categories": "Introduce Categories",
 	"kv_play_skip_to_game": "Skip to Game",
-	"kv_play_introducing_categories": "Introducing Categories...",
+	"kv_play_introducing_categories": "Introducing categories in {seconds} seconds...",
 	"kv_play_start_game": "Start Game",
 	"kv_play_daily_double": "Daily Double",
 	"kv_play_wager": "Wager",

messages/et.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://inlang.com/schema/inlang-message-format",
 	"app_title": "Sassi Mängukoobas",
-	"app_version": "V0.01 Tudengite Eri",
+	"app_version": "v0.1.0",
 	"coming_soon": "Tulekul",
 	"game_kuldvillak": "Kuldvillak",
 	"game_rooside_soda": "Rooside Sõda",
@@ -99,7 +99,7 @@
 	"kv_play_last_answer": "Viimane",
 	"kv_play_introduce_categories": "Tutvusta kategooriaid",
 	"kv_play_skip_to_game": "Jäta vahele",
-	"kv_play_introducing_categories": "Tutvustan kategooriaid...",
+	"kv_play_introducing_categories": "Tutvustan kategooriaid {seconds} sekundi pärast...",
 	"kv_play_start_game": "Alusta mängu",
 	"kv_play_daily_double": "Hõbevillak",
 	"kv_play_wager": "Panus",

package-lock.json

@@ -1,12 +1,12 @@
 {
-	"name": "myapp",
+	"name": "ultimate-gaming",
-	"version": "0.0.1",
+	"version": "0.1.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
-			"name": "myapp",
+			"name": "ultimate-gaming",
-			"version": "0.0.1",
+			"version": "0.1.0",
 			"devDependencies": {
 				"@inlang/paraglide-js": "^2.5.0",
 				"@sveltejs/adapter-auto": "^7.0.0",

package.json

@@ -1,7 +1,7 @@
 {
-	"name": "myapp",
+	"name": "ultimate-gaming",
 	"private": true,
-	"version": "0.0.1",
+	"version": "0.1.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

src/lib/assets/favicon-kuldvillak.svg

@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
-  <rect width="128" height="128" fill="#060ce9"/>
-  <path
-    fill="#ffcc00"
-    d="M24 16L27.3 27V110L24 121H62L58.7 110V68.2L98 121H136L83.3 53.5L131.6 0H93.7L58.7 45V27L62 16H24Z"
-    transform="translate(-8, 4) scale(0.9)"
-  />
-</svg>

src/lib/assets/kuldvillak_favicon.svg

@@ -0,0 +1,3 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.05957 1.5L11.3781 12.5V115.5L8.05957 126.5H45.9855L42.667 115.5V73.6719L82.0151 126.5H119.941L67.3188 59L115.674 1.50006H77.7485L42.667 50.5001V12.5L45.9855 1.50006L8.05957 1.5Z" fill="#FFAB00"/>
+</svg>

src/lib/components/ErrorBoundary.svelte

@@ -65,16 +65,16 @@
                 <div class="text-red-500 text-6xl mb-4" aria-hidden="true">
                     ⚠️
                 </div>
-                <h1 class="text-white text-2xl font-bold mb-2">
+                <h1 class="text-white text-2xl font-bold mb-2 uppercase">
                     {m.error_title?.() ?? "Something went wrong"}
                 </h1>
-                <p class="text-gray-400 mb-4">
+                <p class="text-gray-400 mb-4 uppercase">
                     {m.error_description?.() ??
                         "An unexpected error occurred. Please try again."}
                 </p>
                 <details class="text-left mb-4">
                     <summary
-                        class="text-gray-500 cursor-pointer hover:text-gray-400"
+                        class="text-gray-500 uppercase cursor-pointer hover:text-gray-400"
                     >
                         {m.error_details?.() ?? "Technical details"}
                     </summary>

src/routes/kuldvillak/+layout.svelte

@@ -4,7 +4,7 @@
     import { audioStore } from "$lib/stores/audio.svelte";
     import { themeStore } from "$lib/stores/theme.svelte";
     import type { Snippet } from "svelte";
-    import faviconKuldvillak from "$lib/assets/favicon-kuldvillak.svg";
+    import faviconKuldvillak from "$lib/assets/kuldvillak_favicon.svg";
 
     let { children }: { children: Snippet } = $props();
 

src/routes/kuldvillak/play/+page.svelte

@@ -8,12 +8,14 @@
         KvSpinner,
     } from "$lib/components/kuldvillak/ui";
     import * as m from "$lib/paraglide/messages";
+    import faviconKuldvillak from "$lib/assets/kuldvillak_favicon.svg";
 
     // Get view from URL query param
     let view = $derived($page.url.searchParams.get("view") ?? "moderator");
 </script>
 
 <svelte:head>
+    <link rel="icon" href={faviconKuldvillak} />
     <title>{gameSession.state?.name ?? "Play"} - Kuldvillak</title>
 </svelte:head>
 

src/routes/kuldvillak/play/ModeratorView.svelte

@@ -22,6 +22,15 @@
     // End game confirmation dialog
     let showEndGameConfirm = $state(false);
 
+    // Loading overlay when finishing game
+    let isFinishing = $state(false);
+
+    async function finishGame() {
+        isFinishing = true;
+        gameSession.clearSession();
+        await goto("/kuldvillak/edit");
+    }
+
     function openProjector() {
         gameSession.openProjector();
     }
@@ -34,6 +43,7 @@
     let wagerInput = $state(5);
     let scoreAdjustment = $state(10);
     let introDelayComplete = $state(false);
+    let introCountdown = $state(3);
     let prevIntroPhase = $state<string | null>(null);
 
     // Derived state
@@ -46,13 +56,20 @@
             phase === "intro-categories" &&
             prevIntroPhase !== "intro-categories"
         ) {
-            // Just entered intro-categories, start 3s delay
+            // Just entered intro-categories, start 3s countdown
             introDelayComplete = false;
-            setTimeout(() => {
+            introCountdown = 3;
+            const interval = setInterval(() => {
+                introCountdown--;
+                if (introCountdown <= 0) {
+                    clearInterval(interval);
                     introDelayComplete = true;
-            }, 3000);
+                }
+            }, 1000);
+            return () => clearInterval(interval);
         } else if (phase !== "intro-categories") {
             introDelayComplete = false;
+            introCountdown = 3;
         }
         prevIntroPhase = phase ?? null;
     });
@@ -322,7 +339,7 @@
                         </div>
                     {:else if session.phase === "intro-categories"}
                         {#if !introDelayComplete && session.introCategoryIndex === 0}
-                            <!-- Initial 3s delay - show Villak/Topeltvillak -->
+                            <!-- Initial 3s delay - show Villak/Topeltvillak with countdown -->
                             <span
                                 class="font-kv-body text-4xl md:text-6xl text-kv-yellow uppercase kv-shadow-text"
                             >
@@ -330,6 +347,13 @@
                                     ? "Villak"
                                     : "Topeltvillak"}
                             </span>
+                            <span
+                                class="font-kv-body text-lg md:text-xl text-kv-white uppercase kv-shadow-text"
+                            >
+                                {m.kv_play_introducing_categories({
+                                    seconds: introCountdown,
+                                })}
+                            </span>
                         {:else if currentRound?.categories[session.introCategoryIndex]}
                             <span
                                 class="font-kv-body text-4xl md:text-6xl text-kv-white uppercase kv-shadow-text"
@@ -855,23 +879,12 @@
                 >
                     {m.kv_play_game_over()}!
                 </span>
-                <KvButtonPrimary
+                <KvButtonPrimary onclick={finishGame} disabled={isFinishing}>
-                    onclick={() => {
-                        gameSession.clearSession();
-                        goto("/kuldvillak/edit");
-                    }}
-                >
                     {m.kv_play_finish()}
                 </KvButtonPrimary>
             </div>
         {/if}
     </div>
-{:else}
-    <div class="min-h-screen bg-kv-black flex items-center justify-center">
-        <span class="font-kv-body text-2xl text-kv-white uppercase">
-            {m.kv_play_loading()}
-        </span>
-    </div>
 {/if}
 
 <!-- Settings Modal -->
@@ -885,3 +898,14 @@
     confirmText={m.kv_play_end_game()}
     onconfirm={() => gameSession.endGame()}
 />
+
+<!-- Loading overlay when finishing game -->
+{#if isFinishing}
+    <div
+        class="fixed inset-0 bg-kv-black/90 flex flex-col items-center justify-center z-50 gap-4"
+    >
+        <div
+            class="w-16 h-16 border-4 border-kv-yellow border-t-transparent rounded-full animate-spin"
+        ></div>
+    </div>
+{/if}