mirror of
https://github.com/LCE-Hub/LCE-Emerald-Launcher.git
synced 2026-07-18 00:07:09 +00:00
refactor: modularize codebase into components, hooks, and services
This commit is contained in:
Santiago Fisela
parent
8720f111ea
commit
25f7921c7d
389
src/App.tsx
389
src/App.tsx
|
|
@ -1,34 +1,17 @@
|
|||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { useState, useEffect } from "react";
|
||||
import { listen } from "@tauri-apps/api/event";
|
||||
import { openUrl } from "@tauri-apps/plugin-opener";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import "./App.css";
|
||||
|
||||
const Icons = {
|
||||
Discord: () => <svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor"><path d="M6 6h20v4h2v12h-2v4h-4v-4h-8v4H6v-4H4V10h2V6zm4 6v4h4v-4h-4zm8 0v4h4v-4h-4z" /></svg>,
|
||||
Github: () => <svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor"><path d="M12 4h8v4h4v4h4v8h-4v4h-4v4h-8v-4H8v-4H4v-8h4V8h4V4zm2 8v4h4v-4h-4z" /></svg>,
|
||||
Reddit: () => <svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor"><path d="M10 4h12v4h4v4h2v12h-2v4H10v-4H4V12h2V8h4V4zm2 10v4h8v-4h-8z" /></svg>,
|
||||
Volume: ({ level }: { level: number }) => (
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor"><path d="M4 12h8l8-8v24l-8-8H4v-8z" />{level > 0 && <path d="M24 12h2v8h-2z" />}{level > 0.5 && <path d="M28 8h2v16h-2z" />}</svg>
|
||||
),
|
||||
Linux: () => <svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor"><path d="M16 4c-3.3 0-6 2.7-6 6 0 1.2.4 2.3 1 3.2C8.7 15.1 7 18.3 7 22h2c0-3.9 3.1-7 7-7s7 3.1 7 7h2c0-3.7-1.7-6.9-4-8.8.6-.9 1-2 1-3.2 0-3.3-2.7-6-6-6zm0 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4z" /></svg>
|
||||
};
|
||||
|
||||
interface Runner {
|
||||
id: string;
|
||||
name: string;
|
||||
path: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
interface AppConfig {
|
||||
username: string;
|
||||
linuxRunner?: string;
|
||||
}
|
||||
|
||||
let audioCtx: AudioContext | null = null;
|
||||
let sfxGain: GainNode | null = null;
|
||||
const buffers: Record<string, AudioBuffer> = {};
|
||||
import { useAudio } from "./hooks/useAudio";
|
||||
import { useSettings } from "./hooks/useSettings";
|
||||
import { TauriService } from "./services/tauri";
|
||||
import { AppConfig, Runner, InstalledStatus, ReinstallModalData, McNotification } from "./types";
|
||||
import { Sidebar } from "./components/layout/Sidebar";
|
||||
import { HomeView } from "./components/views/HomeView";
|
||||
import { VersionsView } from "./components/views/VersionsView";
|
||||
import { SettingsView } from "./components/views/SettingsView";
|
||||
import { FirstRunView } from "./components/views/FirstRunView";
|
||||
import { ReinstallModal } from "./components/modals/ReinstallModal";
|
||||
import { Notification } from "./components/common/Notification";
|
||||
import "./index.css";
|
||||
|
||||
export default function App() {
|
||||
const [username, setUsername] = useState("");
|
||||
|
|
@ -37,66 +20,24 @@ export default function App() {
|
|||
const [isRunning, setIsRunning] = useState(false);
|
||||
const [installingInstance, setInstallingInstance] = useState<string | null>(null);
|
||||
const [downloadProgress, setDownloadProgress] = useState<number>(0);
|
||||
const [installedStatus, setInstalledStatus] = useState<Record<string, boolean>>({ vanilla_tu19: false, vanilla_tu24: false });
|
||||
const [installedStatus, setInstalledStatus] = useState<InstalledStatus>({
|
||||
vanilla_tu19: false,
|
||||
vanilla_tu24: false,
|
||||
});
|
||||
const [selectedInstance, setSelectedInstance] = useState<string>("vanilla_tu19");
|
||||
const [reinstallModal, setReinstallModal] = useState<{ id: string, url: string } | null>(null);
|
||||
const [mcNotif, setMcNotif] = useState<{ t: string, m: string } | null>(null);
|
||||
const [reinstallModal, setReinstallModal] = useState<ReinstallModalData | null>(null);
|
||||
const [mcNotif, setMcNotif] = useState<McNotification | null>(null);
|
||||
const [availableRunners, setAvailableRunners] = useState<Runner[]>([]);
|
||||
const [selectedRunner, setSelectedRunner] = useState<string>("");
|
||||
const [isLinux, setIsLinux] = useState(false);
|
||||
|
||||
const [musicVol, setMusicVol] = useState(parseFloat(localStorage.getItem("musicVol") || "0.4"));
|
||||
const [sfxVol, setSfxVol] = useState(parseFloat(localStorage.getItem("sfxVol") || "0.7"));
|
||||
const [isMuted, setIsMuted] = useState(localStorage.getItem("isMuted") === "true");
|
||||
const { musicVol, setMusicVol, sfxVol, setSfxVol, isMuted, setIsMuted } = useSettings();
|
||||
const { musicRef, playRandomMusic, playSfx, ensureAudio } = useAudio(musicVol, sfxVol, isMuted);
|
||||
|
||||
const musicRef = useRef<HTMLAudioElement | null>(null);
|
||||
const lastTrack = useRef<number>(0);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem("musicVol", musicVol.toString());
|
||||
localStorage.setItem("sfxVol", sfxVol.toString());
|
||||
localStorage.setItem("isMuted", isMuted.toString());
|
||||
if (musicRef.current) musicRef.current.volume = isMuted ? 0 : musicVol;
|
||||
}, [musicVol, sfxVol, isMuted]);
|
||||
|
||||
const ensureAudio = async () => {
|
||||
let currentCtx = audioCtx;
|
||||
if (!currentCtx) {
|
||||
const AC = (window as any).AudioContext || (window as any).webkitAudioContext;
|
||||
if (!AC) return;
|
||||
const newCtx = new AC() as AudioContext;
|
||||
const newGain = newCtx.createGain();
|
||||
newGain.connect(newCtx.destination);
|
||||
audioCtx = newCtx; sfxGain = newGain; currentCtx = newCtx;
|
||||
const sounds = ['click.wav', 'orb.ogg', 'levelup.ogg', 'back.ogg', 'pop.wav', 'wood click.wav'];
|
||||
sounds.forEach(s => {
|
||||
fetch(`/sounds/${s}`).then(r => r.arrayBuffer()).then(b => newCtx.decodeAudioData(b)).then(buf => { if (buf) buffers[s] = buf; });
|
||||
});
|
||||
}
|
||||
if (currentCtx.state === 'suspended') await currentCtx.resume();
|
||||
};
|
||||
|
||||
const playSfx = async (n: string, multiplier: number = 1.0) => {
|
||||
await ensureAudio();
|
||||
const currentCtx = audioCtx;
|
||||
const currentGain = sfxGain;
|
||||
if (!currentCtx || !currentGain || !buffers[n] || isMuted) return;
|
||||
const s = currentCtx.createBufferSource();
|
||||
s.buffer = buffers[n];
|
||||
const g = currentCtx.createGain();
|
||||
g.gain.value = sfxVol * multiplier;
|
||||
s.connect(g); g.connect(currentCtx.destination);
|
||||
s.start(0);
|
||||
};
|
||||
|
||||
const playRandomMusic = () => {
|
||||
if (!musicRef.current) return;
|
||||
let track = Math.floor(Math.random() * 5) + 1;
|
||||
if (track === lastTrack.current) track = (track % 5) + 1;
|
||||
lastTrack.current = track;
|
||||
musicRef.current.src = `/music/music${track}.ogg`;
|
||||
musicRef.current.volume = isMuted ? 0 : musicVol;
|
||||
musicRef.current.play().catch(() => { });
|
||||
const updateAllStatus = async () => {
|
||||
const v19 = await TauriService.checkGameInstalled("vanilla_tu19");
|
||||
const v24 = await TauriService.checkGameInstalled("vanilla_tu24");
|
||||
setInstalledStatus({ vanilla_tu19: v19, vanilla_tu24: v24 });
|
||||
};
|
||||
|
||||
const fadeAndLaunch = async () => {
|
||||
|
|
@ -108,13 +49,18 @@ export default function App() {
|
|||
let currentStep = 0;
|
||||
const fade = setInterval(() => {
|
||||
currentStep++;
|
||||
if (musicRef.current) musicRef.current.volume = Math.max(0, startVol * (1 - currentStep / steps));
|
||||
if (currentStep >= steps) { clearInterval(fade); if (musicRef.current) musicRef.current.pause(); }
|
||||
if (musicRef.current) {
|
||||
musicRef.current.volume = Math.max(0, startVol * (1 - currentStep / steps));
|
||||
}
|
||||
if (currentStep >= steps) {
|
||||
clearInterval(fade);
|
||||
if (musicRef.current) musicRef.current.pause();
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
setTimeout(async () => {
|
||||
try {
|
||||
await invoke("launch_game", { instanceId: selectedInstance });
|
||||
await TauriService.launchGame(selectedInstance);
|
||||
} catch (e) {
|
||||
alert(`Failed to launch game: ${e}`);
|
||||
} finally {
|
||||
|
|
@ -128,10 +74,12 @@ export default function App() {
|
|||
};
|
||||
|
||||
const executeInstall = async (id: string, url: string) => {
|
||||
setInstallingInstance(id); setDownloadProgress(0);
|
||||
setInstallingInstance(id);
|
||||
setDownloadProgress(0);
|
||||
try {
|
||||
await invoke("download_and_install", { url, instanceId: id });
|
||||
setMcNotif({ t: "Success!", m: "Ready to play." }); playSfx('orb.ogg');
|
||||
await TauriService.downloadAndInstall(url, id);
|
||||
setMcNotif({ t: "Success!", m: "Ready to play." });
|
||||
playSfx('orb.ogg');
|
||||
setTimeout(() => setMcNotif(null), 4000);
|
||||
updateAllStatus();
|
||||
} catch (e) {
|
||||
|
|
@ -141,14 +89,8 @@ export default function App() {
|
|||
setInstallingInstance(null);
|
||||
};
|
||||
|
||||
const updateAllStatus = async () => {
|
||||
const v19 = await invoke<boolean>("check_game_installed", { instanceId: "vanilla_tu19" });
|
||||
const v24 = await invoke<boolean>("check_game_installed", { instanceId: "vanilla_tu24" });
|
||||
setInstalledStatus({ vanilla_tu19: v19, vanilla_tu24: v24 });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
invoke("load_config").then((c) => {
|
||||
TauriService.loadConfig().then((c) => {
|
||||
const config = c as AppConfig;
|
||||
if (config.username && config.username.trim() !== "") {
|
||||
setUsername(config.username);
|
||||
|
|
@ -161,216 +103,111 @@ export default function App() {
|
|||
const platform = window.navigator.platform.toLowerCase();
|
||||
if (platform.includes("linux")) {
|
||||
setIsLinux(true);
|
||||
invoke<Runner[]>("get_available_runners").then(runners => {
|
||||
TauriService.getAvailableRunners().then((runners) => {
|
||||
setAvailableRunners(runners);
|
||||
});
|
||||
}
|
||||
|
||||
updateAllStatus();
|
||||
const unlisten = listen<number>("download-progress", (e) => setDownloadProgress(Math.round(e.payload)));
|
||||
return () => { unlisten.then(f => f()); };
|
||||
const unlisten = listen<number>("download-progress", (e) =>
|
||||
setDownloadProgress(Math.round(e.payload))
|
||||
);
|
||||
return () => {
|
||||
unlisten.then((f) => f());
|
||||
};
|
||||
}, []);
|
||||
|
||||
if (isFirstRun) {
|
||||
return (
|
||||
<div className="h-screen flex flex-col items-center justify-center bg-black text-white p-12 select-none" onContextMenu={e => e.preventDefault()}>
|
||||
<img src="/images/MenuTitle.png" className="w-[500px] mb-12" />
|
||||
<div className="bg-[#2a2a2a] p-10 border-4 border-black w-full max-w-2xl text-center shadow-[inset_4px_4px_#555,inset_-4px_-4px_#111]">
|
||||
<h2 className="text-4xl text-emerald-400 mb-4">Welcome to Emerald Legacy!</h2>
|
||||
<input type="text" value={username} onChange={e => setUsername(e.target.value)} className="w-full bg-black border-4 border-emerald-900 p-4 text-3xl text-center mb-8 outline-none" placeholder="Username..." />
|
||||
<button onClick={() => { ensureAudio(); playSfx('click.wav'); invoke("save_config", { config: { username, linuxRunner: isLinux ? selectedRunner : undefined } }); setIsFirstRun(false); setTimeout(playRandomMusic, 500); }} disabled={!username.trim() || (isLinux && availableRunners.length === 0)} className="legacy-btn py-4 px-12 text-3xl w-full">Start Setup</button>
|
||||
</div>
|
||||
</div>
|
||||
<FirstRunView
|
||||
username={username}
|
||||
setUsername={setUsername}
|
||||
isLinux={isLinux}
|
||||
selectedRunner={selectedRunner}
|
||||
availableRunners={availableRunners}
|
||||
setIsFirstRun={setIsFirstRun}
|
||||
playRandomMusic={playRandomMusic}
|
||||
playSfx={playSfx}
|
||||
ensureAudio={ensureAudio}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-screen flex select-none overflow-hidden bg-black text-white" onContextMenu={e => e.preventDefault()}>
|
||||
<div
|
||||
className="h-screen flex select-none overflow-hidden bg-black text-white"
|
||||
onContextMenu={(e) => e.preventDefault()}
|
||||
>
|
||||
<audio ref={musicRef} onEnded={playRandomMusic} />
|
||||
<aside className="w-64 bg-[#2a2a2a] border-r-4 border-black p-6 flex flex-col gap-2 z-20 shadow-[inset_-4px_0_#555]">
|
||||
<div className="mb-10 px-2">
|
||||
<img src="/images/logo.png" />
|
||||
</div>
|
||||
<nav className="flex flex-col gap-3">
|
||||
<button onClick={() => { playSfx('click.wav'); setActiveTab("home"); updateAllStatus(); }} className={`p-4 legacy-btn justify-start ${activeTab === "home" ? "active-tab" : ""}`}>HOME</button>
|
||||
<button onClick={() => { playSfx('click.wav'); setActiveTab("versions"); updateAllStatus(); }} className={`p-4 legacy-btn justify-start ${activeTab === "versions" ? "active-tab" : ""}`}>VERSIONS</button>
|
||||
<button onClick={() => { playSfx('click.wav'); setActiveTab("settings"); }} className={`p-4 legacy-btn justify-start ${activeTab === "settings" ? "active-tab" : ""}`}>SETTINGS</button>
|
||||
</nav>
|
||||
|
||||
{installingInstance && (
|
||||
<div className="sidebar-progress mt-auto">
|
||||
<div className="flex justify-between mb-3 text-slate-300 font-bold text-[10px] uppercase tracking-widest px-1">
|
||||
<span>Installing</span>
|
||||
<button onClick={() => { playSfx('back.ogg'); invoke("cancel_download"); }} className="text-red-500 hover:underline">CANCEL</button>
|
||||
</div>
|
||||
<div className="mc-progress-container">
|
||||
<div className="mc-progress-bar transition-all duration-300" style={{ width: `${downloadProgress}%` }}></div>
|
||||
<div className="mc-progress-text">{downloadProgress}%</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div onClick={() => { playSfx('click.wav'); openUrl("https://github.com/KayJannOnGit"); }} className={`${installingInstance ? "pt-6" : "mt-auto pt-6"} flex flex-col items-center border-t-4 border-black/30 cursor-pointer group`}>
|
||||
<span className="text-slate-500 text-[10px] uppercase">Developed by</span>
|
||||
<span className="text-emerald-500 text-sm font-bold group-hover:underline">KayJann</span>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<Sidebar
|
||||
activeTab={activeTab}
|
||||
setActiveTab={setActiveTab}
|
||||
playSfx={playSfx}
|
||||
updateAllStatus={updateAllStatus}
|
||||
installingInstance={installingInstance}
|
||||
downloadProgress={downloadProgress}
|
||||
/>
|
||||
|
||||
<main className="flex-1 relative h-full">
|
||||
<div className="h-full flex flex-col items-center justify-center p-12 relative z-10">
|
||||
{activeTab === "home" && (
|
||||
<div className="flex flex-col items-center text-center animate-in fade-in">
|
||||
<div className="relative mb-12 flex flex-col items-center">
|
||||
<img src="/images/MenuTitle.png" className="w-[550px]" />
|
||||
<div className="splash-text absolute bottom-2 -right-12 text-3xl">Welcome, {username}!</div>
|
||||
</div>
|
||||
<div className="bg-black/80 p-8 border-4 border-black w-[550px] flex flex-col gap-6 mt-12">
|
||||
{installedStatus.vanilla_tu19 || installedStatus.vanilla_tu24 ? (
|
||||
<>
|
||||
<select value={selectedInstance} onChange={e => { playSfx('click.wav'); setSelectedInstance(e.target.value); }} className="w-full legacy-select p-3 text-2xl outline-none">
|
||||
{installedStatus.vanilla_tu19 && <option value="vanilla_tu19">Vanilla Nightly (TU19)</option>}
|
||||
{installedStatus.vanilla_tu24 && <option value="vanilla_tu24">Vanilla TU24</option>}
|
||||
</select>
|
||||
<button onClick={fadeAndLaunch} disabled={isRunning || !!installingInstance} className="legacy-btn py-4 text-6xl w-full">{installingInstance ? "WAITING..." : isRunning ? "RUNNING..." : "PLAY"}</button>
|
||||
</>
|
||||
) : (
|
||||
<div className="text-center">
|
||||
<p className="text-2xl text-red-400 mb-6 font-bold uppercase">Game not installed</p>
|
||||
<button onClick={() => { playSfx('click.wav'); setActiveTab("versions"); }} className="legacy-btn py-4 px-8 text-3xl w-full">Go to Versions</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<HomeView
|
||||
username={username}
|
||||
selectedInstance={selectedInstance}
|
||||
setSelectedInstance={setSelectedInstance}
|
||||
installedStatus={installedStatus}
|
||||
isRunning={isRunning}
|
||||
installingInstance={installingInstance}
|
||||
fadeAndLaunch={fadeAndLaunch}
|
||||
playSfx={playSfx}
|
||||
setActiveTab={setActiveTab}
|
||||
/>
|
||||
)}
|
||||
|
||||
{activeTab === "versions" && (
|
||||
<div className="w-full max-w-3xl bg-black/80 p-12 border-4 border-black h-full overflow-y-auto no-scrollbar animate-in fade-in">
|
||||
<h2 className="text-5xl mb-8 border-b-4 border-white/20 pb-4">Instances</h2>
|
||||
<div className="flex flex-col gap-6">
|
||||
|
||||
{/* TU19 */}
|
||||
<div className="flex justify-between items-center bg-[#2a2a2a] border-4 border-black p-6">
|
||||
<div><h3 className="text-2xl font-bold">Vanilla Nightly (TU19)</h3><p className="text-slate-400 text-sm">Leaked 4J Studios build.</p></div>
|
||||
<div className="flex gap-2">
|
||||
{installedStatus.vanilla_tu19 ? (
|
||||
<>
|
||||
<button onClick={() => { playSfx('pop.wav'); invoke("open_instance_folder", { instanceId: "vanilla_tu19" }); }} className="legacy-btn px-4 py-2 text-xl">Folder</button>
|
||||
<button onClick={() => { playSfx('click.wav'); setReinstallModal({ id: "vanilla_tu19", url: "https://huggingface.co/datasets/KayJann/emerald-legacy-assets/resolve/main/emerald_tu19_vanilla.zip" }); }} disabled={!!installingInstance} className="legacy-btn px-4 py-2 text-xl reinstall-btn">Reinstall</button>
|
||||
</>
|
||||
) : (
|
||||
<button onClick={() => { playSfx('click.wav'); executeInstall("vanilla_tu19", "https://huggingface.co/datasets/KayJann/emerald-legacy-assets/resolve/main/emerald_tu19_vanilla.zip"); }} disabled={!!installingInstance} className="legacy-btn px-6 py-2 text-xl">INSTALL</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TU24 */}
|
||||
<div className="flex justify-between items-center bg-[#2a2a2a] border-4 border-black p-6">
|
||||
<div><h3 className="text-2xl font-bold">Vanilla TU24</h3><p className="text-slate-400 text-sm">Horses and Wither update.</p></div>
|
||||
<div className="flex gap-2">
|
||||
{installedStatus.vanilla_tu24 ? (
|
||||
<>
|
||||
<button onClick={() => { playSfx('pop.wav'); invoke("open_instance_folder", { instanceId: "vanilla_tu24" }); }} className="legacy-btn px-4 py-2 text-xl">Folder</button>
|
||||
<button onClick={() => { playSfx('click.wav'); setReinstallModal({ id: "vanilla_tu24", url: "https://huggingface.co/datasets/KayJann/emerald-legacy-assets/resolve/main/emerald_tu24_vanilla.zip" }); }} disabled={!!installingInstance} className="legacy-btn px-4 py-2 text-xl reinstall-btn">Reinstall</button>
|
||||
</>
|
||||
) : (
|
||||
<button onClick={() => { playSfx('click.wav'); executeInstall("vanilla_tu24", "https://huggingface.co/datasets/KayJann/emerald-legacy-assets/resolve/main/emerald_tu24_vanilla.zip"); }} disabled={!!installingInstance} className="legacy-btn px-6 py-2 text-xl">INSTALL</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{['TU75', 'TU9', 'Modded Pack'].map(v => (
|
||||
<div key={v} className="flex justify-between items-center bg-[#1a1a1a] border-4 border-black p-6 opacity-50 grayscale">
|
||||
<div><h3 className="text-2xl font-bold text-slate-500">Vanilla {v}</h3><p className="text-slate-600 text-sm">Legacy version.</p></div>
|
||||
<span className="text-[#ffff55] text-2xl font-bold italic">SOON</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<VersionsView
|
||||
installedStatus={installedStatus}
|
||||
installingInstance={installingInstance}
|
||||
executeInstall={executeInstall}
|
||||
setReinstallModal={setReinstallModal}
|
||||
playSfx={playSfx}
|
||||
/>
|
||||
)}
|
||||
|
||||
{activeTab === "settings" && (
|
||||
<div className="w-full max-w-3xl bg-black/80 p-12 border-4 border-black h-full overflow-y-auto no-scrollbar animate-in fade-in">
|
||||
<h2 className="text-5xl mb-8 border-b-4 border-white/20 pb-4">Settings</h2>
|
||||
<div className="flex flex-col gap-10">
|
||||
<div className="flex flex-col gap-4">
|
||||
<label className="text-xl text-slate-400 italic">In-game Username</label>
|
||||
<div className="flex gap-4">
|
||||
<input type="text" value={username} onChange={e => setUsername(e.target.value)} className="flex-1 bg-black border-4 border-slate-700 p-4 text-3xl outline-none focus:border-emerald-500" />
|
||||
<button onClick={() => { playSfx('wood click.wav'); invoke("save_config", { config: { username, linuxRunner: selectedRunner || undefined } }); }} className="legacy-btn px-8 text-2xl relative">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isLinux && (
|
||||
<div className="flex flex-col gap-4">
|
||||
<label className="text-xl text-slate-400 italic flex items-center gap-2"><Icons.Linux /> Linux Runner</label>
|
||||
<div className="flex flex-col gap-2">
|
||||
<select
|
||||
value={selectedRunner}
|
||||
onChange={e => { playSfx('click.wav'); setSelectedRunner(e.target.value); }}
|
||||
className="w-full legacy-select p-4 text-2xl outline-none focus:border-emerald-500"
|
||||
>
|
||||
<option value="" disabled>Select a runner...</option>
|
||||
{availableRunners.map(r => (
|
||||
<option key={r.id} value={r.id}>{r.name} ({r.type})</option>
|
||||
))}
|
||||
</select>
|
||||
{availableRunners.length === 0 && (
|
||||
<p className="text-red-500 text-sm">No Proton or Wine installations found. Please install Steam or Wine.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-4 bg-[#2a2a2a] p-6 border-4 border-black shadow-[inset_4px_4px_#555]">
|
||||
<label className="text-xl flex items-center gap-4"><Icons.Volume level={musicVol} /> Audio Controls</label>
|
||||
<div className="grid grid-cols-2 gap-8">
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-sm uppercase opacity-50">Music {Math.round(musicVol * 100)}%</span>
|
||||
<input type="range" min="0" max="1" step="0.01" value={musicVol} onChange={e => setMusicVol(parseFloat(e.target.value))} className="mc-range" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-sm uppercase opacity-50">SFX {Math.round(sfxVol * 100)}%</span>
|
||||
<input type="range" min="0" max="1" step="0.01" value={sfxVol} onChange={e => setSfxVol(parseFloat(e.target.value))} className="mc-range" />
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={() => { setIsMuted(!isMuted); playSfx('pop.wav'); }} className="legacy-btn mt-4 py-2">{isMuted ? "UNMUTE ALL" : "MUTE ALL"}</button>
|
||||
</div>
|
||||
|
||||
<div className="about-section border-4 border-black bg-[#2a2a2a] p-6 shadow-[inset_4px_4px_#555]">
|
||||
<h3 className="text-2xl text-[#ffff55] mb-2 uppercase tracking-wide">About the project</h3>
|
||||
<p className="text-xl text-white leading-relaxed mb-6 opacity-90">
|
||||
I'm <span className="text-emerald-400">KayJann</span>, and I absolutely love this project! It's my very first one,
|
||||
and my goal is to create a central hub for the LCE community to bring us all together.
|
||||
</p>
|
||||
<h3 className="text-sm text-slate-500 mb-4 uppercase tracking-widest">Social Links</h3>
|
||||
<div className="flex gap-6">
|
||||
<button onClick={() => openUrl("https://discord.gg/nzbxB8Hxjh")} className="social-btn btn-discord" title="Discord"><Icons.Discord /></button>
|
||||
<button onClick={() => openUrl("https://github.com/KayJannOnGit")} className="social-btn btn-github" title="GitHub"><Icons.Github /></button>
|
||||
<button onClick={() => openUrl("https://reddit.com/user/KayJann")} className="social-btn btn-reddit" title="Reddit"><Icons.Reddit /></button>
|
||||
</div> </div>
|
||||
</div>
|
||||
</div>
|
||||
<SettingsView
|
||||
username={username}
|
||||
setUsername={setUsername}
|
||||
isLinux={isLinux}
|
||||
selectedRunner={selectedRunner}
|
||||
setSelectedRunner={setSelectedRunner}
|
||||
availableRunners={availableRunners}
|
||||
musicVol={musicVol}
|
||||
setMusicVol={setMusicVol}
|
||||
sfxVol={sfxVol}
|
||||
setSfxVol={setSfxVol}
|
||||
isMuted={isMuted}
|
||||
setIsMuted={setIsMuted}
|
||||
playSfx={playSfx}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{reinstallModal && (
|
||||
<div className="absolute inset-0 bg-black/80 z-[200] flex items-center justify-center animate-in fade-in">
|
||||
<div className="bg-[#2a2a2a] border-4 border-black p-8 w-[600px] text-center shadow-[inset_4px_4px_#555,inset_-4px_-4px_#111]">
|
||||
<h3 className="text-4xl text-[#ff5555] mb-6 font-bold uppercase tracking-widest">Warning</h3>
|
||||
<p className="text-2xl mb-10 leading-relaxed text-white">Reinstalling will delete all data. Continue?</p>
|
||||
<div className="flex gap-6">
|
||||
<button onClick={() => { playSfx('back.ogg'); setReinstallModal(null); }} className="legacy-btn px-8 py-4 text-3xl w-1/2">Cancel</button>
|
||||
<button onClick={() => { playSfx('click.wav'); executeInstall(reinstallModal.id, reinstallModal.url); setReinstallModal(null); }} className="legacy-btn px-8 py-4 text-3xl w-1/2 confirm-red-btn">Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ReinstallModal
|
||||
data={reinstallModal}
|
||||
onCancel={() => setReinstallModal(null)}
|
||||
onConfirm={(id, url) => {
|
||||
executeInstall(id, url);
|
||||
setReinstallModal(null);
|
||||
}}
|
||||
playSfx={playSfx}
|
||||
/>
|
||||
)}
|
||||
|
||||
{mcNotif && (
|
||||
<div className="absolute top-6 right-6 bg-[#202020] border-2 border-black p-4 flex items-center gap-4 shadow-[5px_5px_15px_rgba(0,0,0,0.5)] z-[100] animate-in slide-in-from-right-10">
|
||||
<div className="w-12 h-12 bg-emerald-500 border-2 border-black flex items-center justify-center text-3xl font-bold">✓</div>
|
||||
<div className="flex flex-col"><span className="text-[#ffff55] text-2xl font-bold">{mcNotif.t}</span><span className="text-white text-xl">{mcNotif.m}</span></div>
|
||||
</div>
|
||||
<Notification title={mcNotif.t} message={mcNotif.m} />
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
|
|
|
|||
29
src/components/Icons.tsx
Normal file
29
src/components/Icons.tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
export const Icons = {
|
||||
Discord: () => (
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor">
|
||||
<path d="M6 6h20v4h2v12h-2v4h-4v-4h-8v4H6v-4H4V10h2V6zm4 6v4h4v-4h-4zm8 0v4h4v-4h-4z" />
|
||||
</svg>
|
||||
),
|
||||
Github: () => (
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor">
|
||||
<path d="M12 4h8v4h4v4h4v8h-4v4h-4v4h-8v-4H8v-4H4v-8h4V8h4V4zm2 8v4h4v-4h-4z" />
|
||||
</svg>
|
||||
),
|
||||
Reddit: () => (
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor">
|
||||
<path d="M10 4h12v4h4v4h2v12h-2v4H10v-4H4V12h2V8h4V4zm2 10v4h8v-4h-8z" />
|
||||
</svg>
|
||||
),
|
||||
Volume: ({ level }: { level: number }) => (
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor">
|
||||
<path d="M4 12h8l8-8v24l-8-8H4v-8z" />
|
||||
{level > 0 && <path d="M24 12h2v8h-2z" />}
|
||||
{level > 0.5 && <path d="M28 8h2v16h-2z" />}
|
||||
</svg>
|
||||
),
|
||||
Linux: () => (
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor">
|
||||
<path d="M16 4c-3.3 0-6 2.7-6 6 0 1.2.4 2.3 1 3.2C8.7 15.1 7 18.3 7 22h2c0-3.9 3.1-7 7-7s7 3.1 7 7h2c0-3.7-1.7-6.9-4-8.8.6-.9 1-2 1-3.2 0-3.3-2.7-6-6-6zm0 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4z" />
|
||||
</svg>
|
||||
),
|
||||
};
|
||||
20
src/components/common/Notification.tsx
Normal file
20
src/components/common/Notification.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import React from 'react';
|
||||
|
||||
interface NotificationProps {
|
||||
title: string;
|
||||
message: string;
|
||||
}
|
||||
|
||||
export const Notification: React.FC<NotificationProps> = ({ title, message }) => {
|
||||
return (
|
||||
<div className="absolute top-6 right-6 bg-[#202020] border-2 border-black p-4 flex items-center gap-4 shadow-[5px_5px_15px_rgba(0,0,0,0.5)] z-[100] animate-in slide-in-from-right-10">
|
||||
<div className="w-12 h-12 bg-emerald-500 border-2 border-black flex items-center justify-center text-3xl font-bold">
|
||||
✓
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[#ffff55] text-2xl font-bold">{title}</span>
|
||||
<span className="text-white text-xl">{message}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
95
src/components/layout/Sidebar.tsx
Normal file
95
src/components/layout/Sidebar.tsx
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
import React from 'react';
|
||||
import { openUrl } from "@tauri-apps/plugin-opener";
|
||||
import { TauriService } from '../../services/tauri';
|
||||
|
||||
interface SidebarProps {
|
||||
activeTab: string;
|
||||
setActiveTab: (tab: string) => void;
|
||||
playSfx: (name: string, multiplier?: number) => void;
|
||||
updateAllStatus: () => void;
|
||||
installingInstance: string | null;
|
||||
downloadProgress: number;
|
||||
}
|
||||
|
||||
export const Sidebar: React.FC<SidebarProps> = ({
|
||||
activeTab,
|
||||
setActiveTab,
|
||||
playSfx,
|
||||
updateAllStatus,
|
||||
installingInstance,
|
||||
downloadProgress,
|
||||
}) => {
|
||||
return (
|
||||
<aside className="w-64 bg-[#2a2a2a] border-r-4 border-black p-6 flex flex-col gap-2 z-20 shadow-[inset_-4px_0_#555]">
|
||||
<div className="mb-10 px-2">
|
||||
<img src="/images/logo.png" alt="Logo" />
|
||||
</div>
|
||||
<nav className="flex flex-col gap-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
playSfx('click.wav');
|
||||
setActiveTab("home");
|
||||
updateAllStatus();
|
||||
}}
|
||||
className={`p-4 legacy-btn justify-start ${activeTab === "home" ? "active-tab" : ""}`}
|
||||
>
|
||||
HOME
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
playSfx('click.wav');
|
||||
setActiveTab("versions");
|
||||
updateAllStatus();
|
||||
}}
|
||||
className={`p-4 legacy-btn justify-start ${activeTab === "versions" ? "active-tab" : ""}`}
|
||||
>
|
||||
VERSIONS
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
playSfx('click.wav');
|
||||
setActiveTab("settings");
|
||||
}}
|
||||
className={`p-4 legacy-btn justify-start ${activeTab === "settings" ? "active-tab" : ""}`}
|
||||
>
|
||||
SETTINGS
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
{installingInstance && (
|
||||
<div className="sidebar-progress mt-auto">
|
||||
<div className="flex justify-between mb-3 text-slate-300 font-bold text-[10px] uppercase tracking-widest px-1">
|
||||
<span>Installing</span>
|
||||
<button
|
||||
onClick={() => {
|
||||
playSfx('back.ogg');
|
||||
TauriService.cancelDownload();
|
||||
}}
|
||||
className="text-red-500 hover:underline"
|
||||
>
|
||||
CANCEL
|
||||
</button>
|
||||
</div>
|
||||
<div className="mc-progress-container">
|
||||
<div
|
||||
className="mc-progress-bar transition-all duration-300"
|
||||
style={{ width: `${downloadProgress}%` }}
|
||||
></div>
|
||||
<div className="mc-progress-text">{downloadProgress}%</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
onClick={() => {
|
||||
playSfx('click.wav');
|
||||
openUrl("https://github.com/KayJannOnGit");
|
||||
}}
|
||||
className={`${installingInstance ? "pt-6" : "mt-auto pt-6"} flex flex-col items-center border-t-4 border-black/30 cursor-pointer group`}
|
||||
>
|
||||
<span className="text-slate-500 text-[10px] uppercase">Developed by</span>
|
||||
<span className="text-emerald-500 text-sm font-bold group-hover:underline">KayJann</span>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
};
|
||||
49
src/components/modals/ReinstallModal.tsx
Normal file
49
src/components/modals/ReinstallModal.tsx
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
import React from 'react';
|
||||
import { ReinstallModalData } from '../../types';
|
||||
|
||||
interface ReinstallModalProps {
|
||||
data: ReinstallModalData;
|
||||
onCancel: () => void;
|
||||
onConfirm: (id: string, url: string) => void;
|
||||
playSfx: (name: string, multiplier?: number) => void;
|
||||
}
|
||||
|
||||
export const ReinstallModal: React.FC<ReinstallModalProps> = ({
|
||||
data,
|
||||
onCancel,
|
||||
onConfirm,
|
||||
playSfx,
|
||||
}) => {
|
||||
return (
|
||||
<div className="absolute inset-0 bg-black/80 z-[200] flex items-center justify-center animate-in fade-in">
|
||||
<div className="bg-[#2a2a2a] border-4 border-black p-8 w-[600px] text-center shadow-[inset_4px_4px_#555,inset_-4px_-4px_#111]">
|
||||
<h3 className="text-4xl text-[#ff5555] mb-6 font-bold uppercase tracking-widest">
|
||||
Warning
|
||||
</h3>
|
||||
<p className="text-2xl mb-10 leading-relaxed text-white">
|
||||
Reinstalling will delete all data. Continue?
|
||||
</p>
|
||||
<div className="flex gap-6">
|
||||
<button
|
||||
onClick={() => {
|
||||
playSfx('back.ogg');
|
||||
onCancel();
|
||||
}}
|
||||
className="legacy-btn px-8 py-4 text-3xl w-1/2"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
playSfx('click.wav');
|
||||
onConfirm(data.id, data.url);
|
||||
}}
|
||||
className="legacy-btn px-8 py-4 text-3xl w-1/2 confirm-red-btn"
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
62
src/components/views/FirstRunView.tsx
Normal file
62
src/components/views/FirstRunView.tsx
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
import React from 'react';
|
||||
import { TauriService } from '../../services/tauri';
|
||||
import { Runner } from '../../types';
|
||||
|
||||
interface FirstRunViewProps {
|
||||
username: string;
|
||||
setUsername: (name: string) => void;
|
||||
isLinux: boolean;
|
||||
selectedRunner: string;
|
||||
availableRunners: Runner[];
|
||||
setIsFirstRun: (val: boolean) => void;
|
||||
playRandomMusic: () => void;
|
||||
playSfx: (name: string, multiplier?: number) => void;
|
||||
ensureAudio: () => void;
|
||||
}
|
||||
|
||||
export const FirstRunView: React.FC<FirstRunViewProps> = ({
|
||||
username,
|
||||
setUsername,
|
||||
isLinux,
|
||||
selectedRunner,
|
||||
availableRunners,
|
||||
setIsFirstRun,
|
||||
playRandomMusic,
|
||||
playSfx,
|
||||
ensureAudio,
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className="h-screen flex flex-col items-center justify-center bg-black text-white p-12 select-none"
|
||||
onContextMenu={(e) => e.preventDefault()}
|
||||
>
|
||||
<img src="/images/MenuTitle.png" className="w-[500px] mb-12" alt="Menu Title" />
|
||||
<div className="bg-[#2a2a2a] p-10 border-4 border-black w-full max-w-2xl text-center shadow-[inset_4px_4px_#555,inset_-4px_-4px_#111]">
|
||||
<h2 className="text-4xl text-emerald-400 mb-4">Welcome to Emerald Legacy!</h2>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
className="w-full bg-black border-4 border-emerald-900 p-4 text-3xl text-center mb-8 outline-none"
|
||||
placeholder="Username..."
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
ensureAudio();
|
||||
playSfx('click.wav');
|
||||
TauriService.saveConfig({
|
||||
username,
|
||||
linuxRunner: isLinux ? selectedRunner : undefined,
|
||||
});
|
||||
setIsFirstRun(false);
|
||||
setTimeout(playRandomMusic, 500);
|
||||
}}
|
||||
disabled={!username.trim() || (isLinux && availableRunners.length === 0)}
|
||||
className="legacy-btn py-4 px-12 text-3xl w-full"
|
||||
>
|
||||
Start Setup
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
79
src/components/views/HomeView.tsx
Normal file
79
src/components/views/HomeView.tsx
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
import React from 'react';
|
||||
|
||||
interface HomeViewProps {
|
||||
username: string;
|
||||
selectedInstance: string;
|
||||
setSelectedInstance: (id: string) => void;
|
||||
installedStatus: Record<string, boolean>;
|
||||
isRunning: boolean;
|
||||
installingInstance: string | null;
|
||||
fadeAndLaunch: () => void;
|
||||
playSfx: (name: string, multiplier?: number) => void;
|
||||
setActiveTab: (tab: string) => void;
|
||||
}
|
||||
|
||||
export const HomeView: React.FC<HomeViewProps> = ({
|
||||
username,
|
||||
selectedInstance,
|
||||
setSelectedInstance,
|
||||
installedStatus,
|
||||
isRunning,
|
||||
installingInstance,
|
||||
fadeAndLaunch,
|
||||
playSfx,
|
||||
setActiveTab,
|
||||
}) => {
|
||||
const hasInstalledInstance = installedStatus.vanilla_tu19 || installedStatus.vanilla_tu24;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center text-center animate-in fade-in">
|
||||
<div className="relative mb-12 flex flex-col items-center">
|
||||
<img src="/images/MenuTitle.png" className="w-[550px]" alt="Menu Title" />
|
||||
<div className="splash-text absolute bottom-2 -right-12 text-3xl">
|
||||
Welcome, {username}!
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-black/80 p-8 border-4 border-black w-[550px] flex flex-col gap-6 mt-12">
|
||||
{hasInstalledInstance ? (
|
||||
<>
|
||||
<select
|
||||
value={selectedInstance}
|
||||
onChange={(e) => {
|
||||
playSfx('click.wav');
|
||||
setSelectedInstance(e.target.value);
|
||||
}}
|
||||
className="w-full legacy-select p-3 text-2xl outline-none"
|
||||
>
|
||||
{installedStatus.vanilla_tu19 && (
|
||||
<option value="vanilla_tu19">Vanilla Nightly (TU19)</option>
|
||||
)}
|
||||
{installedStatus.vanilla_tu24 && (
|
||||
<option value="vanilla_tu24">Vanilla TU24</option>
|
||||
)}
|
||||
</select>
|
||||
<button
|
||||
onClick={fadeAndLaunch}
|
||||
disabled={isRunning || !!installingInstance}
|
||||
className="legacy-btn py-4 text-6xl w-full"
|
||||
>
|
||||
{installingInstance ? "WAITING..." : isRunning ? "RUNNING..." : "PLAY"}
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<div className="text-center">
|
||||
<p className="text-2xl text-red-400 mb-6 font-bold uppercase">Game not installed</p>
|
||||
<button
|
||||
onClick={() => {
|
||||
playSfx('click.wav');
|
||||
setActiveTab("versions");
|
||||
}}
|
||||
className="legacy-btn py-4 px-8 text-3xl w-full"
|
||||
>
|
||||
Go to Versions
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
177
src/components/views/SettingsView.tsx
Normal file
177
src/components/views/SettingsView.tsx
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
import React from 'react';
|
||||
import { Icons } from '../Icons';
|
||||
import { TauriService } from '../../services/tauri';
|
||||
import { Runner } from '../../types';
|
||||
import { openUrl } from "@tauri-apps/plugin-opener";
|
||||
|
||||
interface SettingsViewProps {
|
||||
username: string;
|
||||
setUsername: (name: string) => void;
|
||||
isLinux: boolean;
|
||||
selectedRunner: string;
|
||||
setSelectedRunner: (runner: string) => void;
|
||||
availableRunners: Runner[];
|
||||
musicVol: number;
|
||||
setMusicVol: (vol: number) => void;
|
||||
sfxVol: number;
|
||||
setSfxVol: (vol: number) => void;
|
||||
isMuted: boolean;
|
||||
setIsMuted: (muted: boolean) => void;
|
||||
playSfx: (name: string, multiplier?: number) => void;
|
||||
}
|
||||
|
||||
export const SettingsView: React.FC<SettingsViewProps> = ({
|
||||
username,
|
||||
setUsername,
|
||||
isLinux,
|
||||
selectedRunner,
|
||||
setSelectedRunner,
|
||||
availableRunners,
|
||||
musicVol,
|
||||
setMusicVol,
|
||||
sfxVol,
|
||||
setSfxVol,
|
||||
isMuted,
|
||||
setIsMuted,
|
||||
playSfx,
|
||||
}) => {
|
||||
return (
|
||||
<div className="w-full max-w-3xl bg-black/80 p-12 border-4 border-black h-full overflow-y-auto no-scrollbar animate-in fade-in">
|
||||
<h2 className="text-5xl mb-8 border-b-4 border-white/20 pb-4">Settings</h2>
|
||||
<div className="flex flex-col gap-10">
|
||||
<div className="flex flex-col gap-4">
|
||||
<label className="text-xl text-slate-400 italic">In-game Username</label>
|
||||
<div className="flex gap-4">
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
className="flex-1 bg-black border-4 border-slate-700 p-4 text-3xl outline-none focus:border-emerald-500"
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
playSfx('wood click.wav');
|
||||
TauriService.saveConfig({
|
||||
username,
|
||||
linuxRunner: selectedRunner || undefined,
|
||||
});
|
||||
}}
|
||||
className="legacy-btn px-8 text-2xl relative"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isLinux && (
|
||||
<div className="flex flex-col gap-4">
|
||||
<label className="text-xl text-slate-400 italic flex items-center gap-2">
|
||||
<Icons.Linux /> Linux Runner
|
||||
</label>
|
||||
<div className="flex flex-col gap-2">
|
||||
<select
|
||||
value={selectedRunner}
|
||||
onChange={(e) => {
|
||||
playSfx('click.wav');
|
||||
setSelectedRunner(e.target.value);
|
||||
}}
|
||||
className="w-full legacy-select p-4 text-2xl outline-none focus:border-emerald-500"
|
||||
>
|
||||
<option value="" disabled>Select a runner...</option>
|
||||
{availableRunners.map((r) => (
|
||||
<option key={r.id} value={r.id}>
|
||||
{r.name} ({r.type})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{availableRunners.length === 0 && (
|
||||
<p className="text-red-500 text-sm">
|
||||
No Proton or Wine installations found. Please install Steam or Wine.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-4 bg-[#2a2a2a] p-6 border-4 border-black shadow-[inset_4px_4px_#555]">
|
||||
<label className="text-xl flex items-center gap-4">
|
||||
<Icons.Volume level={musicVol} /> Audio Controls
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-8">
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-sm uppercase opacity-50">
|
||||
Music {Math.round(musicVol * 100)}%
|
||||
</span>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
value={musicVol}
|
||||
onChange={(e) => setMusicVol(parseFloat(e.target.value))}
|
||||
className="mc-range"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-sm uppercase opacity-50">
|
||||
SFX {Math.round(sfxVol * 100)}%
|
||||
</span>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
value={sfxVol}
|
||||
onChange={(e) => setSfxVol(parseFloat(e.target.value))}
|
||||
className="mc-range"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsMuted(!isMuted);
|
||||
playSfx('pop.wav');
|
||||
}}
|
||||
className="legacy-btn mt-4 py-2"
|
||||
>
|
||||
{isMuted ? "UNMUTE ALL" : "MUTE ALL"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="about-section border-4 border-black bg-[#2a2a2a] p-6 shadow-[inset_4px_4px_#555]">
|
||||
<h3 className="text-2xl text-[#ffff55] mb-2 uppercase tracking-wide">
|
||||
About the project
|
||||
</h3>
|
||||
<p className="text-xl text-white leading-relaxed mb-6 opacity-90">
|
||||
I'm <span className="text-emerald-400">KayJann</span>, and I absolutely love this project! It's my very first one,
|
||||
and my goal is to create a central hub for the LCE community to bring us all together.
|
||||
</p>
|
||||
<h3 className="text-sm text-slate-500 mb-4 uppercase tracking-widest">Social Links</h3>
|
||||
<div className="flex gap-6">
|
||||
<button
|
||||
onClick={() => openUrl("https://discord.gg/nzbxB8Hxjh")}
|
||||
className="social-btn btn-discord"
|
||||
title="Discord"
|
||||
>
|
||||
<Icons.Discord />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => openUrl("https://github.com/KayJannOnGit")}
|
||||
className="social-btn btn-github"
|
||||
title="GitHub"
|
||||
>
|
||||
<Icons.Github />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => openUrl("https://reddit.com/user/KayJann")}
|
||||
className="social-btn btn-reddit"
|
||||
title="Reddit"
|
||||
>
|
||||
<Icons.Reddit />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
96
src/components/views/VersionsView.tsx
Normal file
96
src/components/views/VersionsView.tsx
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
import React from 'react';
|
||||
import { TauriService } from '../../services/tauri';
|
||||
import { ReinstallModalData } from '../../types';
|
||||
|
||||
interface VersionsViewProps {
|
||||
installedStatus: Record<string, boolean>;
|
||||
installingInstance: string | null;
|
||||
executeInstall: (id: string, url: string) => void;
|
||||
setReinstallModal: (data: ReinstallModalData | null) => void;
|
||||
playSfx: (name: string, multiplier?: number) => void;
|
||||
}
|
||||
|
||||
export const VersionsView: React.FC<VersionsViewProps> = ({
|
||||
installedStatus,
|
||||
installingInstance,
|
||||
executeInstall,
|
||||
setReinstallModal,
|
||||
playSfx,
|
||||
}) => {
|
||||
const versions = [
|
||||
{
|
||||
id: "vanilla_tu19",
|
||||
name: "Vanilla Nightly (TU19)",
|
||||
desc: "Leaked 4J Studios build.",
|
||||
url: "https://huggingface.co/datasets/KayJann/emerald-legacy-assets/resolve/main/emerald_tu19_vanilla.zip"
|
||||
},
|
||||
{
|
||||
id: "vanilla_tu24",
|
||||
name: "Vanilla TU24",
|
||||
desc: "Horses and Wither update.",
|
||||
url: "https://huggingface.co/datasets/KayJann/emerald-legacy-assets/resolve/main/emerald_tu24_vanilla.zip"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-3xl bg-black/80 p-12 border-4 border-black h-full overflow-y-auto no-scrollbar animate-in fade-in">
|
||||
<h2 className="text-5xl mb-8 border-b-4 border-white/20 pb-4">Instances</h2>
|
||||
<div className="flex flex-col gap-6">
|
||||
{versions.map(v => (
|
||||
<div key={v.id} className="flex justify-between items-center bg-[#2a2a2a] border-4 border-black p-6">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold">{v.name}</h3>
|
||||
<p className="text-slate-400 text-sm">{v.desc}</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{installedStatus[v.id] ? (
|
||||
<>
|
||||
<button
|
||||
onClick={() => {
|
||||
playSfx('pop.wav');
|
||||
TauriService.openInstanceFolder(v.id);
|
||||
}}
|
||||
className="legacy-btn px-4 py-2 text-xl"
|
||||
>
|
||||
Folder
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
playSfx('click.wav');
|
||||
setReinstallModal({ id: v.id, url: v.url });
|
||||
}}
|
||||
disabled={!!installingInstance}
|
||||
className="legacy-btn px-4 py-2 text-xl reinstall-btn"
|
||||
>
|
||||
Reinstall
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => {
|
||||
playSfx('click.wav');
|
||||
executeInstall(v.id, v.url);
|
||||
}}
|
||||
disabled={!!installingInstance}
|
||||
className="legacy-btn px-6 py-2 text-xl"
|
||||
>
|
||||
INSTALL
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{['TU75', 'TU9', 'Modded Pack'].map(v => (
|
||||
<div key={v} className="flex justify-between items-center bg-[#1a1a1a] border-4 border-black p-6 opacity-50 grayscale">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-slate-500">Vanilla {v}</h3>
|
||||
<p className="text-slate-600 text-sm">Legacy version.</p>
|
||||
</div>
|
||||
<span className="text-[#ffff55] text-2xl font-bold italic">SOON</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
34
src/hooks/useAudio.ts
Normal file
34
src/hooks/useAudio.ts
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { useRef, useEffect } from 'react';
|
||||
import { playSfx as playSfxService, ensureAudio } from '../services/audio';
|
||||
|
||||
export const useAudio = (musicVol: number, sfxVol: number, isMuted: boolean) => {
|
||||
const musicRef = useRef<HTMLAudioElement | null>(null);
|
||||
const lastTrack = useRef<number>(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (musicRef.current) {
|
||||
musicRef.current.volume = isMuted ? 0 : musicVol;
|
||||
}
|
||||
}, [musicVol, isMuted]);
|
||||
|
||||
const playRandomMusic = () => {
|
||||
if (!musicRef.current) return;
|
||||
let track = Math.floor(Math.random() * 5) + 1;
|
||||
if (track === lastTrack.current) track = (track % 5) + 1;
|
||||
lastTrack.current = track;
|
||||
musicRef.current.src = `/music/music${track}.ogg`;
|
||||
musicRef.current.volume = isMuted ? 0 : musicVol;
|
||||
musicRef.current.play().catch(() => {});
|
||||
};
|
||||
|
||||
const playSfx = (name: string, multiplier: number = 1.0) => {
|
||||
playSfxService(name, sfxVol, isMuted, multiplier);
|
||||
};
|
||||
|
||||
return {
|
||||
musicRef,
|
||||
playRandomMusic,
|
||||
playSfx,
|
||||
ensureAudio,
|
||||
};
|
||||
};
|
||||
22
src/hooks/useSettings.ts
Normal file
22
src/hooks/useSettings.ts
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
|
||||
export const useSettings = () => {
|
||||
const [musicVol, setMusicVol] = useState(parseFloat(localStorage.getItem("musicVol") || "0.4"));
|
||||
const [sfxVol, setSfxVol] = useState(parseFloat(localStorage.getItem("sfxVol") || "0.7"));
|
||||
const [isMuted, setIsMuted] = useState(localStorage.getItem("isMuted") === "true");
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem("musicVol", musicVol.toString());
|
||||
localStorage.setItem("sfxVol", sfxVol.toString());
|
||||
localStorage.setItem("isMuted", isMuted.toString());
|
||||
}, [musicVol, sfxVol, isMuted]);
|
||||
|
||||
return {
|
||||
musicVol,
|
||||
setMusicVol,
|
||||
sfxVol,
|
||||
setSfxVol,
|
||||
isMuted,
|
||||
setIsMuted,
|
||||
};
|
||||
};
|
||||
|
|
@ -1,12 +1,13 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Fonts and Globals */
|
||||
@font-face {
|
||||
font-family: 'Minecraft';
|
||||
src: url('/fonts/Mojangles.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
* {
|
||||
border-radius: 0 !important;
|
||||
font-family: 'Minecraft', sans-serif !important;
|
||||
|
|
@ -28,7 +29,6 @@ main::before {
|
|||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
/*background: rgba(0, 0, 0, 0.7);*/
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
|
|
@ -41,6 +41,15 @@ main::before {
|
|||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.sidebar-progress {
|
||||
background: #2a2a2a;
|
||||
border-top: 4px solid #000;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
box-shadow: inset 0 4px #444;
|
||||
}
|
||||
|
||||
/* Legacy UI Components */
|
||||
.legacy-btn {
|
||||
@apply transition-all duration-75 flex items-center justify-center;
|
||||
background: #bebebe;
|
||||
|
|
@ -83,14 +92,6 @@ main::before {
|
|||
outline-offset: -8px;
|
||||
}
|
||||
|
||||
.sidebar-progress {
|
||||
background: #2a2a2a;
|
||||
border-top: 4px solid #000;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
box-shadow: inset 0 4px #444;
|
||||
}
|
||||
|
||||
.mc-progress-container {
|
||||
background: #313131 !important;
|
||||
border: 4px solid #000 !important;
|
||||
|
|
@ -133,6 +134,7 @@ main::before {
|
|||
}
|
||||
|
||||
.mc-range {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background: #000;
|
||||
height: 12px;
|
||||
|
|
@ -167,12 +169,6 @@ main::before {
|
|||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.social-btn svg {
|
||||
fill: white;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.btn-discord {
|
||||
background: #5865F2 !important;
|
||||
box-shadow: inset 4px 4px #8ea1e1, inset -4px -4px #313338 !important;
|
||||
|
|
@ -203,8 +199,7 @@ main::before {
|
|||
from {
|
||||
transform: rotate(-20deg) scale(1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(-20deg) scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App";
|
||||
import './App.css';
|
||||
import './index.css';
|
||||
|
||||
const rootElement = document.getElementById("root");
|
||||
|
||||
|
|
|
|||
45
src/services/audio.ts
Normal file
45
src/services/audio.ts
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
let audioCtx: AudioContext | null = null;
|
||||
let sfxGain: GainNode | null = null;
|
||||
const buffers: Record<string, AudioBuffer> = {};
|
||||
|
||||
export const ensureAudio = async () => {
|
||||
let currentCtx = audioCtx;
|
||||
if (!currentCtx) {
|
||||
const AC = (window as any).AudioContext || (window as any).webkitAudioContext;
|
||||
if (!AC) return null;
|
||||
const newCtx = new AC() as AudioContext;
|
||||
const newGain = newCtx.createGain();
|
||||
newGain.connect(newCtx.destination);
|
||||
audioCtx = newCtx;
|
||||
sfxGain = newGain;
|
||||
currentCtx = newCtx;
|
||||
|
||||
const sounds = ['click.wav', 'orb.ogg', 'levelup.ogg', 'back.ogg', 'pop.wav', 'wood click.wav'];
|
||||
sounds.forEach((s) => {
|
||||
fetch(`/sounds/${s}`)
|
||||
.then((r) => r.arrayBuffer())
|
||||
.then((b) => newCtx.decodeAudioData(b))
|
||||
.then((buf) => {
|
||||
if (buf) buffers[s] = buf;
|
||||
});
|
||||
});
|
||||
}
|
||||
if (currentCtx.state === 'suspended') await currentCtx.resume();
|
||||
return { audioCtx, sfxGain, buffers };
|
||||
};
|
||||
|
||||
export const playSfx = async (n: string, sfxVol: number, isMuted: boolean, multiplier: number = 1.0) => {
|
||||
const audioData = await ensureAudio();
|
||||
if (!audioData) return;
|
||||
const { audioCtx, sfxGain, buffers } = audioData;
|
||||
|
||||
if (!audioCtx || !sfxGain || !buffers[n] || isMuted) return;
|
||||
|
||||
const s = audioCtx.createBufferSource();
|
||||
s.buffer = buffers[n];
|
||||
const g = audioCtx.createGain();
|
||||
g.gain.value = sfxVol * multiplier;
|
||||
s.connect(g);
|
||||
g.connect(audioCtx.destination);
|
||||
s.start(0);
|
||||
};
|
||||
13
src/services/tauri.ts
Normal file
13
src/services/tauri.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { AppConfig, Runner } from "../types";
|
||||
|
||||
export const TauriService = {
|
||||
loadConfig: () => invoke<AppConfig>("load_config"),
|
||||
saveConfig: (config: AppConfig) => invoke("save_config", { config }),
|
||||
launchGame: (instanceId: string) => invoke("launch_game", { instanceId }),
|
||||
downloadAndInstall: (url: string, instanceId: string) => invoke("download_and_install", { url, instanceId }),
|
||||
checkGameInstalled: (instanceId: string) => invoke<boolean>("check_game_installed", { instanceId }),
|
||||
getAvailableRunners: () => invoke<Runner[]>("get_available_runners"),
|
||||
openInstanceFolder: (instanceId: string) => invoke("open_instance_folder", { instanceId }),
|
||||
cancelDownload: () => invoke("cancel_download"),
|
||||
};
|
||||
27
src/types/index.ts
Normal file
27
src/types/index.ts
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
export interface Runner {
|
||||
id: string;
|
||||
name: string;
|
||||
path: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
export interface AppConfig {
|
||||
username: string;
|
||||
linuxRunner?: string;
|
||||
}
|
||||
|
||||
export interface InstalledStatus {
|
||||
vanilla_tu19: boolean;
|
||||
vanilla_tu24: boolean;
|
||||
[key: string]: boolean;
|
||||
}
|
||||
|
||||
export interface ReinstallModalData {
|
||||
id: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
export interface McNotification {
|
||||
t: string;
|
||||
m: string;
|
||||
}
|
||||
Loading…
Reference in a new issue