|
|
|
|
@ -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(() => { |
|
|
|
|
introDelayComplete = true; |
|
|
|
|
}, 3000); |
|
|
|
|
introCountdown = 3; |
|
|
|
|
const interval = setInterval(() => { |
|
|
|
|
introCountdown--; |
|
|
|
|
if (introCountdown <= 0) { |
|
|
|
|
clearInterval(interval); |
|
|
|
|
introDelayComplete = true; |
|
|
|
|
} |
|
|
|
|
}, 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 |
|
|
|
|
onclick={() => { |
|
|
|
|
gameSession.clearSession(); |
|
|
|
|
goto("/kuldvillak/edit"); |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<KvButtonPrimary onclick={finishGame} disabled={isFinishing}> |
|
|
|
|
{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} |
|
|
|
|
|
AlacrisDevs
2 weeks ago
