diff options
Diffstat (limited to 'ui/src')
| -rw-r--r-- | ui/src/App.svelte | 110 | ||||
| -rw-r--r-- | ui/src/app.css | 1 | ||||
| -rw-r--r-- | ui/src/assets/svelte.svg | 1 | ||||
| -rw-r--r-- | ui/src/lib/Counter.svelte | 10 | ||||
| -rw-r--r-- | ui/src/main.ts | 9 |
5 files changed, 131 insertions, 0 deletions
diff --git a/ui/src/App.svelte b/ui/src/App.svelte new file mode 100644 index 0000000..a648f98 --- /dev/null +++ b/ui/src/App.svelte @@ -0,0 +1,110 @@ +<script lang="ts"> + import { invoke } from "@tauri-apps/api/core"; + import { onMount } from "svelte"; + + let status = "Ready"; + + 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-16 lg:w-64 bg-zinc-950 flex flex-col items-center lg:items-start transition-all duration-300 border-r border-zinc-800"> + <div class="p-6 w-full flex justify-center lg:justify-start"> + <div class="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-2"> + <button class="flex items-center gap-4 w-full text-left px-4 py-3 rounded-lg hover:bg-zinc-800 bg-zinc-800/50 text-zinc-100 transition-colors"> + <span class="text-xl">🏠</span> + <span class="hidden lg:block font-medium">Home</span> + </button> + <button class="flex items-center gap-4 w-full text-left px-4 py-3 rounded-lg hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100 transition-colors"> + <span class="text-xl">📦</span> + <span class="hidden lg:block font-medium">Versions</span> + </button> + <button class="flex items-center gap-4 w-full text-left px-4 py-3 rounded-lg hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100 transition-colors"> + <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"> + <div class="text-xs text-center lg:text-left 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"> + <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">S</div> + <div> + <div class="font-bold text-white text-lg">Steve</div> + <div class="text-xs text-zinc-400 flex items-center gap-1"> + <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span> Online + </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 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"> + <option>Latest Release (1.20.4)</option> + <option>1.19.2</option> + <option>1.8.9</option> + </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> diff --git a/ui/src/app.css b/ui/src/app.css new file mode 100644 index 0000000..f1d8c73 --- /dev/null +++ b/ui/src/app.css @@ -0,0 +1 @@ +@import "tailwindcss"; diff --git a/ui/src/assets/svelte.svg b/ui/src/assets/svelte.svg new file mode 100644 index 0000000..c5e0848 --- /dev/null +++ b/ui/src/assets/svelte.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
\ No newline at end of file diff --git a/ui/src/lib/Counter.svelte b/ui/src/lib/Counter.svelte new file mode 100644 index 0000000..37d75ce --- /dev/null +++ b/ui/src/lib/Counter.svelte @@ -0,0 +1,10 @@ +<script lang="ts"> + let count: number = $state(0) + const increment = () => { + count += 1 + } +</script> + +<button onclick={increment}> + count is {count} +</button> diff --git a/ui/src/main.ts b/ui/src/main.ts new file mode 100644 index 0000000..664a057 --- /dev/null +++ b/ui/src/main.ts @@ -0,0 +1,9 @@ +import { mount } from 'svelte' +import './app.css' +import App from './App.svelte' + +const app = mount(App, { + target: document.getElementById('app')!, +}) + +export default app |
