refactor: modularize codebase into components, hooks, and services

2026-09-25 01:20:55 +00:00 · 2026-03-12 18:32:41 -03:00
parent 8720f111ea
commit 25f7921c7d
16 changed files with 878 additions and 298 deletions
@@ -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>
+  ),
+};
@@ -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>
+  );
+};
@@ -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>
+  );
+};
@@ -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>
+  );
+};
@@ -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>
+  );
+};
@@ -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>
+  );
+};
@@ -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>
+  );
+};
@@ -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>
+  );
+};