blob: 18ef5e565eac794ab6479a0a225f2720acb8fbab (
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
|
<script lang="ts">
import { invoke } from "@tauri-apps/api/core";
import { onMount } from "svelte";
let status = "Ready";
interface Version {
id: string;
type: string;
url: string;
time: string;
releaseTime: string;
}
interface OfflineAccount {
username: string;
uuid: string;
}
let versions: Version[] = [];
let selectedVersion = "";
let currentAccount: OfflineAccount | null = null;
onMount(async () => {
checkAccount();
try {
versions = await invoke("get_versions");
if (versions.length > 0) {
// Find latest release or default to first
const latest = versions.find(v => v.type === 'release');
selectedVersion = latest ? latest.id : versions[0].id;
}
} catch (e) {
console.error("Failed to fetch versions:", e);
status = "Error fetching versions: " + e;
}
});
async function checkAccount() {
try {
const acc = await invoke("get_active_account");
currentAccount = acc as OfflineAccount | null;
} catch (e) {
console.error("Failed to check account:", e);
}
}
async function login() {
if (currentAccount) {
if (confirm("Logout " + currentAccount.username + "?")) {
currentAccount = null;
// Note: Backend state persists until restarted or overwritten.
}
return;
}
const username = prompt("Enter username for offline login:");
if (username) {
try {
currentAccount = await invoke("login_offline", { username });
} catch(e) {
alert("Login failed: " + e);
}
}
}
async function startGame() {
status = "Launching (Simulated)...";
console.log("Invoking start_game...");
try {
const msg = await invoke("start_game");
console.log("Response:", msg);
status = msg as string;
} catch (e) {
console.error(e);
status = "Error: " + e;
}
}
</script>
<div class="flex h-screen bg-zinc-900 text-white font-sans overflow-hidden select-none">
<!-- Sidebar -->
<aside class="w-20 lg:w-64 bg-zinc-950 flex flex-col items-center lg:items-start transition-all duration-300 border-r border-zinc-800 shrink-0">
<div class="h-20 w-full flex items-center justify-center lg:justify-start lg:px-6 border-b border-zinc-800/50">
<!-- Icon Logo (Visible on small) -->
<div class="lg:hidden text-2xl font-black bg-clip-text text-transparent bg-gradient-to-tr from-indigo-400 to-purple-400">D</div>
<!-- Full Logo (Visible on large) -->
<div class="hidden lg:block font-bold text-xl tracking-wider text-indigo-400">DROP<span class="text-white">OUT</span></div>
</div>
<nav class="flex-1 w-full flex flex-col gap-2 p-3">
<button class="group flex items-center lg:gap-4 justify-center lg:justify-start w-full px-0 lg:px-4 py-3 rounded-lg hover:bg-zinc-800 bg-zinc-800/50 text-zinc-100 transition-all relative">
<span class="text-xl relative z-10">🏠</span>
<span class="hidden lg:block font-medium relative z-10 transition-opacity">Home</span>
<!-- Tooltip for small screen (optional, simple css approach) -->
</button>
<button class="group flex items-center lg:gap-4 justify-center lg:justify-start w-full px-0 lg:px-4 py-3 rounded-lg hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100 transition-all">
<span class="text-xl">📦</span>
<span class="hidden lg:block font-medium">Versions</span>
</button>
<button class="group flex items-center lg:gap-4 justify-center lg:justify-start w-full px-0 lg:px-4 py-3 rounded-lg hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100 transition-all">
<span class="text-xl">⚙️</span>
<span class="hidden lg:block font-medium">Settings</span>
</button>
</nav>
<div class="p-4 w-full border-t border-zinc-800 flex justify-center lg:justify-start">
<div class="text-xs text-zinc-600 font-mono">v0.1.3</div>
</div>
</aside>
<!-- Main Content -->
<main class="flex-1 flex flex-col relative min-w-0">
<!-- Top Bar (Window Controls Placeholder) -->
<div class="h-8 w-full bg-zinc-900/50 absolute top-0 left-0 z-50 drag-region" data-tauri-drag-region>
<!-- Windows/macOS controls would go here or be handled by OS -->
</div>
<!-- Background / Poster area -->
<div class="flex-1 bg-gradient-to-br from-zinc-800 to-black relative overflow-hidden group">
<!-- Background Image -->
<div class="absolute inset-0 z-0 opacity-40 bg-[url('https://www.minecraft.net/content/dam/games/minecraft/key-art/Minecraft-KeyArt-02_800x450.jpg')] bg-cover bg-center transition-transform duration-[10s] ease-linear group-hover:scale-105"></div>
<div class="absolute inset-0 z-0 bg-gradient-to-t from-zinc-900 via-transparent to-black/50"></div>
<div class="absolute bottom-24 left-8 z-10 p-4">
<h1 class="text-6xl font-black mb-2 tracking-tight text-white drop-shadow-lg">MINECRAFT</h1>
<div class="flex items-center gap-2 text-zinc-300">
<span class="bg-zinc-800 text-xs px-2 py-1 rounded border border-zinc-600">JAVA EDITION</span>
<span class="text-lg">Release 1.20.4</span>
</div>
</div>
</div>
<!-- Bottom Bar -->
<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 cursor-pointer hover:opacity-80 transition-opacity" onclick={login} role="button" tabindex="0" onkeydown={(e) => e.key === 'Enter' && login()}>
<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 currentAccount}
<img src={`https://minotar.net/avatar/${currentAccount.username}/48`} alt={currentAccount.username} class="w-full h-full">
{:else}
?
{/if}
</div>
<div>
<div class="font-bold text-white text-lg">{currentAccount ? 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 {currentAccount ? 'bg-green-500' : 'bg-zinc-500'}"></span> {currentAccount ? 'Ready' : 'Guest'}
</div>
</div>
</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={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 versions.length === 0}
<option>Loading...</option>
{:else}
{#each versions as version}
<option value={version.id}>{version.id} ({version.type})</option>
{/each}
{/if}
</select>
</div>
<button
onclick={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>
</main>
<!-- Overlay Status (Toast) -->
{#if status !== "Ready"}
<div class="absolute top-12 right-12 bg-zinc-800/90 backdrop-blur border border-zinc-600 p-4 rounded-lg shadow-2xl max-w-sm animate-in fade-in slide-in-from-top-4 duration-300">
<div class="text-xs text-zinc-400 uppercase font-bold mb-1">Status</div>
<div class="font-mono text-sm whitespace-pre-wrap">{status}</div>
</div>
{/if}
</div>
|