blob: dcad9e84ef51df652dc8dcf5a94d29fdda9e1d3e (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
<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
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"
>
{#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>
|