Refactored launcherservice

This commit is contained in:
2026-04-03 16:23:28 +02:00
parent a48f5a19f3
commit 78ad9ea312
5 changed files with 321 additions and 190 deletions
+2 -2
View File
@@ -8,7 +8,7 @@ import {
User,
LogOut,
} from "lucide-react";
import { launcherService, type GameVersion } from "./services/LauncherService";
import { getVersions, type GameVersion } from "./services/LauncherService";
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
@@ -38,7 +38,7 @@ const App: React.FC = () => {
useEffect(() => {
const fetchVersions = async () => {
const v = await launcherService.getVersions();
const v = await getVersions();
setVersions(v);
if (v.length > 0) setSelectedVersion(v[0]);
};
+157 -78
View File
@@ -1,102 +1,140 @@
import React, { useState, useEffect } from 'react'
import { Search, Download, Trash2, ExternalLink, Package, Filter, CheckCircle2, XCircle, ChevronRight, X } from 'lucide-react'
import { launcherService, type Mod, type GameVersion } from '../services/LauncherService'
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'
import { motion, AnimatePresence } from 'framer-motion'
import React, { useState, useEffect } from "react";
import {
Search,
Download,
Trash2,
Package,
CheckCircle2,
XCircle,
X,
} from "lucide-react";
import {
type Mod,
type GameVersion,
getInstalledMods,
discoverMods,
getVersions,
toggleMod,
installMod,
} from "../services/LauncherService";
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
import { motion, AnimatePresence } from "framer-motion";
function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
return twMerge(clsx(inputs));
}
interface ModsSectionProps {
version: GameVersion
version: GameVersion;
}
const ModsSection: React.FC<ModsSectionProps> = ({ version }) => {
const [activeTab, setActiveTab] = useState<'installed' | 'discover'>('installed')
const [searchQuery, setSearchQuery] = useState('')
const [mods, setMods] = useState<Mod[]>([])
const [isInstallDialogOpen, setIsInstallDialogOpen] = useState(false)
const [selectedModForInstall, setSelectedModForInstall] = useState<Mod | null>(null)
const [selectedVersionsForInstall, setSelectedVersionsForInstall] = useState<string[]>([])
const [allVersions, setAllVersions] = useState<GameVersion[]>([])
const [activeTab, setActiveTab] = useState<"installed" | "discover">(
"installed",
);
const [searchQuery, setSearchQuery] = useState("");
const [mods, setMods] = useState<Mod[]>([]);
const [isInstallDialogOpen, setIsInstallDialogOpen] = useState(false);
const [selectedModForInstall, setSelectedModForInstall] =
useState<Mod | null>(null);
const [selectedVersionsForInstall, setSelectedVersionsForInstall] = useState<
string[]
>([]);
const [allVersions, setAllVersions] = useState<GameVersion[]>([]);
useEffect(() => {
const loadMods = async () => {
if (activeTab === 'installed') {
const m = await launcherService.getInstalledMods(version.id)
setMods(m)
if (activeTab === "installed") {
const m = await getInstalledMods(version.id);
setMods(m);
} else {
const m = await launcherService.discoverMods(searchQuery)
setMods(m)
const m = await discoverMods(searchQuery);
setMods(m);
}
}
loadMods()
}, [activeTab, version.id, searchQuery])
};
loadMods();
}, [activeTab, version.id, searchQuery]);
useEffect(() => {
const loadAllVersions = async () => {
const v = await launcherService.getVersions()
setAllVersions(v)
}
loadAllVersions()
}, [])
const v = await getVersions();
setAllVersions(v);
};
loadAllVersions();
}, []);
const handleToggleMod = async (modId: string) => {
await launcherService.toggleMod(modId)
const m = await launcherService.getInstalledMods(version.id)
setMods(m)
}
await toggleMod(modId);
const m = await getInstalledMods(version.id);
setMods(m);
};
const openInstallDialog = (mod: Mod) => {
setSelectedModForInstall(mod)
setSelectedVersionsForInstall([version.id])
setIsInstallDialogOpen(true)
}
setSelectedModForInstall(mod);
setSelectedVersionsForInstall([version.id]);
setIsInstallDialogOpen(true);
};
const handleInstall = async () => {
if (selectedModForInstall && selectedVersionsForInstall.length > 0) {
await launcherService.installMod(selectedModForInstall, selectedVersionsForInstall)
setIsInstallDialogOpen(false)
if (activeTab === 'installed') {
const m = await launcherService.getInstalledMods(version.id)
setMods(m)
}
await installMod(selectedModForInstall, selectedVersionsForInstall);
setIsInstallDialogOpen(false);
if (activeTab === "installed") {
const m = await getInstalledMods(version.id);
setMods(m);
}
}
};
const toggleVersionSelection = (versionId: string) => {
setSelectedVersionsForInstall(prev =>
setSelectedVersionsForInstall((prev) =>
prev.includes(versionId)
? prev.filter(v => v !== versionId)
: [...prev, versionId]
)
}
? prev.filter((v) => v !== versionId)
: [...prev, versionId],
);
};
return (
<div className="max-w-6xl mx-auto h-full flex flex-col gap-6">
<div className="flex items-center justify-between">
<div className="flex items-center gap-1 p-1 bg-saturn-panel border border-saturn-border rounded-lg">
<button
onClick={() => setActiveTab('installed')}
className={cn("px-4 py-1.5 text-sm font-medium rounded-md transition-all", activeTab === 'installed' ? "bg-white/5 text-white" : "text-saturn-text-secondary hover:text-white")}
onClick={() => setActiveTab("installed")}
className={cn(
"px-4 py-1.5 text-sm font-medium rounded-md transition-all",
activeTab === "installed"
? "bg-white/5 text-white"
: "text-saturn-text-secondary hover:text-white",
)}
>
Installed Mods
</button>
<button
onClick={() => setActiveTab('discover')}
className={cn("px-4 py-1.5 text-sm font-medium rounded-md transition-all", activeTab === 'discover' ? "bg-white/5 text-white" : "text-saturn-text-secondary hover:text-white")}
onClick={() => setActiveTab("discover")}
className={cn(
"px-4 py-1.5 text-sm font-medium rounded-md transition-all",
activeTab === "discover"
? "bg-white/5 text-white"
: "text-saturn-text-secondary hover:text-white",
)}
>
Discover
</button>
</div>
<div className="relative group">
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-saturn-text-secondary group-focus-within:text-saturn-accent transition-colors" />
<Search
size={16}
className="absolute left-3 top-1/2 -translate-y-1/2 text-saturn-text-secondary group-focus-within:text-saturn-accent transition-colors"
/>
<input
type="text"
placeholder={activeTab === 'installed' ? "Search installed mods..." : "Search CurseForge/Modrinth..."}
placeholder={
activeTab === "installed"
? "Search installed mods..."
: "Search CurseForge/Modrinth..."
}
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="bg-saturn-panel border border-saturn-border rounded-lg pl-10 pr-4 py-2 text-sm w-64 focus:outline-none focus:border-saturn-accent/50 focus:ring-1 focus:ring-saturn-accent/50 transition-all"
@@ -106,7 +144,7 @@ const ModsSection: React.FC<ModsSectionProps> = ({ version }) => {
<div className="flex-1 overflow-y-auto pr-2">
<div className="grid grid-cols-1 gap-3">
{mods.map(mod => (
{mods.map((mod) => (
<motion.div
layout
key={mod.id}
@@ -121,21 +159,36 @@ const ModsSection: React.FC<ModsSectionProps> = ({ version }) => {
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<h3 className="font-bold text-sm truncate">{mod.name}</h3>
<span className="text-[10px] text-saturn-text-secondary font-medium px-1.5 py-0.5 rounded bg-white/5">v{mod.version}</span>
<span className="text-[10px] text-saturn-text-secondary">by {mod.author}</span>
<span className="text-[10px] text-saturn-text-secondary font-medium px-1.5 py-0.5 rounded bg-white/5">
v{mod.version}
</span>
<span className="text-[10px] text-saturn-text-secondary">
by {mod.author}
</span>
</div>
<p className="text-xs text-saturn-text-secondary mt-1 truncate max-w-xl">{mod.description}</p>
<p className="text-xs text-saturn-text-secondary mt-1 truncate max-w-xl">
{mod.description}
</p>
</div>
<div className="flex items-center gap-3">
{activeTab === 'installed' ? (
{activeTab === "installed" ? (
<>
<button
onClick={() => handleToggleMod(mod.id)}
className={cn("flex items-center gap-2 px-3 py-1.5 rounded-md text-xs font-medium transition-all", mod.enabled ? "bg-green-500/10 text-green-400 border border-green-500/20" : "bg-red-500/10 text-red-400 border border-red-500/20")}
className={cn(
"flex items-center gap-2 px-3 py-1.5 rounded-md text-xs font-medium transition-all",
mod.enabled
? "bg-green-500/10 text-green-400 border border-green-500/20"
: "bg-red-500/10 text-red-400 border border-red-500/20",
)}
>
{mod.enabled ? <CheckCircle2 size={14} /> : <XCircle size={14} />}
{mod.enabled ? 'Enabled' : 'Disabled'}
{mod.enabled ? (
<CheckCircle2 size={14} />
) : (
<XCircle size={14} />
)}
{mod.enabled ? "Enabled" : "Disabled"}
</button>
<button className="p-2 text-saturn-text-secondary hover:text-red-400 transition-colors">
<Trash2 size={16} />
@@ -166,7 +219,7 @@ const ModsSection: React.FC<ModsSectionProps> = ({ version }) => {
{/* Install Dialog */}
<AnimatePresence>
{isInstallDialogOpen && selectedModForInstall && (
<div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-[100] flex items-center justify-center p-6">
<div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-100 flex items-center justify-center p-6">
<motion.div
initial={{ scale: 0.9, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
@@ -175,38 +228,64 @@ const ModsSection: React.FC<ModsSectionProps> = ({ version }) => {
>
<div className="p-6 border-b border-saturn-border flex items-center justify-between">
<div>
<h2 className="text-lg font-bold">Install {selectedModForInstall.name}</h2>
<p className="text-xs text-saturn-text-secondary">Select versions to install this mod to.</p>
<h2 className="text-lg font-bold">
Install {selectedModForInstall.name}
</h2>
<p className="text-xs text-saturn-text-secondary">
Select versions to install this mod to.
</p>
</div>
<button onClick={() => setIsInstallDialogOpen(false)} className="text-saturn-text-secondary hover:text-white">
<button
onClick={() => setIsInstallDialogOpen(false)}
className="text-saturn-text-secondary hover:text-white"
>
<X size={20} />
</button>
</div>
<div className="p-6 space-y-3 max-h-64 overflow-y-auto">
{allVersions.map(v => {
const isSupported = selectedModForInstall.supportedVersions.includes(v.id)
const isSelected = selectedVersionsForInstall.includes(v.id)
{allVersions.map((v) => {
const isSupported =
selectedModForInstall.supportedVersions.includes(v.id);
const isSelected = selectedVersionsForInstall.includes(v.id);
return (
<div
key={v.id}
onClick={() => isSupported && toggleVersionSelection(v.id)}
onClick={() =>
isSupported && toggleVersionSelection(v.id)
}
className={cn(
"flex items-center justify-between p-3 rounded-lg border transition-all cursor-pointer",
isSelected ? "bg-saturn-accent/10 border-saturn-accent/50" : "bg-white/5 border-transparent hover:border-white/10",
!isSupported && "opacity-40 cursor-not-allowed grayscale"
isSelected
? "bg-saturn-accent/10 border-saturn-accent/50"
: "bg-white/5 border-transparent hover:border-white/10",
!isSupported &&
"opacity-40 cursor-not-allowed grayscale",
)}
>
<div className="flex items-center gap-3">
<div className={cn("w-5 h-5 rounded border flex items-center justify-center transition-all", isSelected ? "bg-saturn-accent border-saturn-accent" : "border-saturn-border")}>
{isSelected && <CheckCircle2 size={14} className="text-white" />}
<div
className={cn(
"w-5 h-5 rounded border flex items-center justify-center transition-all",
isSelected
? "bg-saturn-accent border-saturn-accent"
: "border-saturn-border",
)}
>
{isSelected && (
<CheckCircle2 size={14} className="text-white" />
)}
</div>
<span className="text-sm font-medium">{v.name}</span>
</div>
{!isSupported && <span className="text-[10px] text-red-400 font-bold uppercase">Unsupported</span>}
{!isSupported && (
<span className="text-[10px] text-red-400 font-bold uppercase">
Unsupported
</span>
)}
</div>
)
);
})}
</div>
@@ -230,7 +309,7 @@ const ModsSection: React.FC<ModsSectionProps> = ({ version }) => {
)}
</AnimatePresence>
</div>
)
}
);
};
export default ModsSection
export default ModsSection;
+2 -2
View File
@@ -1,6 +1,6 @@
import React, { useState } from "react";
import { Play, Loader2 } from "lucide-react";
import { launcherService, type GameVersion } from "../services/LauncherService";
import { launchGame, type GameVersion } from "../services/LauncherService";
interface PlaySectionProps {
version: GameVersion;
@@ -18,7 +18,7 @@ const PlaySection: React.FC<PlaySectionProps> = ({ version }) => {
setTimeout(() => setLaunchStatus("Verifying assets..."), 500);
setTimeout(() => setLaunchStatus("Applying Saturn optimizations..."), 1200);
const result = await launcherService.launchGame(version.id);
const result = await launchGame(version.id);
if (result.success) {
setLaunchStatus("Game running");
+3 -3
View File
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react'
import { Cpu, MemoryStick, Save, RefreshCcw, Info, AlertTriangle } from 'lucide-react'
import { launcherService, type LauncherSettings } from '../services/LauncherService'
import { getSettings, updateSettings, type LauncherSettings } from '../services/LauncherService'
import { motion } from 'framer-motion'
const SettingsSection: React.FC = () => {
@@ -10,7 +10,7 @@ const SettingsSection: React.FC = () => {
useEffect(() => {
const loadSettings = async () => {
const s = await launcherService.getSettings()
const s = await getSettings()
setSettings(s)
}
loadSettings()
@@ -21,7 +21,7 @@ const SettingsSection: React.FC = () => {
setIsSaving(true)
setSaveStatus('Saving...')
await launcherService.updateSettings(settings)
await updateSettings(settings)
setTimeout(() => {
setIsSaving(false)
+116 -64
View File
@@ -16,7 +16,7 @@ export interface GameVersion {
id: string;
name: string;
releaseDate: string;
type: 'release' | 'snapshot';
type: "release" | "snapshot";
}
export interface LauncherSettings {
@@ -24,104 +24,156 @@ export interface LauncherSettings {
maxMemory: number; // in MB
}
class LauncherService {
private versions: GameVersion[] = [
{ id: '1.20.1', name: 'Fabric 1.20.1', releaseDate: '2023-06-07', type: 'release' },
{ id: '1.20.4', name: 'Fabric 1.20.4', releaseDate: '2023-12-07', type: 'release' },
{ id: '1.21', name: 'Fabric 1.21', releaseDate: '2024-06-13', type: 'release' },
// --- Internal state ---
const versions: GameVersion[] = [
{
id: "1.20.1",
name: "Fabric 1.20.1",
releaseDate: "2023-06-07",
type: "release",
},
{
id: "1.20.4",
name: "Fabric 1.20.4",
releaseDate: "2023-12-07",
type: "release",
},
{
id: "1.21",
name: "Fabric 1.21",
releaseDate: "2024-06-13",
type: "release",
},
];
private installedMods: Mod[] = [
const installedMods: Mod[] = [
{
id: 'sodium',
name: 'Sodium',
version: '0.5.8',
author: 'jellysquid3',
description: 'Modern rendering engine for Minecraft.',
id: "sodium",
name: "Sodium",
version: "0.5.8",
author: "jellysquid3",
description: "Modern rendering engine for Minecraft.",
enabled: true,
supportedVersions: ['1.20.1', '1.20.4', '1.21']
supportedVersions: ["1.20.1", "1.20.4", "1.21"],
},
{
id: 'iris',
name: 'Iris',
version: '1.7.0',
author: 'coderbot',
description: 'A modern shaders mod for Minecraft.',
id: "iris",
name: "Iris",
version: "1.7.0",
author: "coderbot",
description: "A modern shaders mod for Minecraft.",
enabled: true,
supportedVersions: ['1.20.1', '1.20.4', '1.21']
supportedVersions: ["1.20.1", "1.20.4", "1.21"],
},
{
id: 'lithium',
name: 'Lithium',
version: '0.11.2',
author: 'jellysquid3',
description: 'General-purpose optimization mod for Minecraft.',
id: "lithium",
name: "Lithium",
version: "0.11.2",
author: "jellysquid3",
description: "General-purpose optimization mod for Minecraft.",
enabled: false,
supportedVersions: ['1.20.1', '1.20.4']
supportedVersions: ["1.20.1", "1.20.4"],
},
];
private settings: LauncherSettings = {
jvmArguments: '-XX:+UseG1GC -XX:+ParallelRefProcEnabled -XX:MaxGCPauseMillis=200',
let settings: LauncherSettings = {
jvmArguments:
"-XX:+UseG1GC -XX:+ParallelRefProcEnabled -XX:MaxGCPauseMillis=200",
maxMemory: 4096,
};
// --- Versions ---
async getVersions(): Promise<GameVersion[]> {
return [...this.versions];
export async function getVersions(): Promise<GameVersion[]> {
return [...versions];
}
// --- Mods ---
async getInstalledMods(versionId: string): Promise<Mod[]> {
// Filter mods by supported version
return this.installedMods.filter(mod => mod.supportedVersions.includes(versionId));
export async function getInstalledMods(versionId: string): Promise<Mod[]> {
return installedMods.filter((mod) =>
mod.supportedVersions.includes(versionId),
);
}
async toggleMod(modId: string): Promise<void> {
const mod = this.installedMods.find(m => m.id === modId);
export async function toggleMod(modId: string): Promise<void> {
const mod = installedMods.find((m) => m.id === modId);
if (mod) {
mod.enabled = !mod.enabled;
}
}
async discoverMods(query: string): Promise<Mod[]> {
// Mock discovery results
export async function discoverMods(query: string): Promise<Mod[]> {
const allDiscoverable: Mod[] = [
{ id: 'modmenu', name: 'Mod Menu', version: '7.2.2', author: 'TerraformersMC', description: 'Adds a mod menu to view the list of installed mods.', enabled: false, supportedVersions: ['1.20.1', '1.20.4', '1.21'] },
{ id: 'starlight', name: 'Starlight', version: '1.1.2', author: 'Spottedleaf', description: 'Rewrites the light engine to fix performance issues.', enabled: false, supportedVersions: ['1.20.1'] },
{ id: 'ferritecore', name: 'FerriteCore', version: '6.0.1', author: 'malte0811', description: 'Memory usage optimizations.', enabled: false, supportedVersions: ['1.20.1', '1.20.4', '1.21'] },
{
id: "modmenu",
name: "Mod Menu",
version: "7.2.2",
author: "TerraformersMC",
description: "Adds a mod menu to view the list of installed mods.",
enabled: false,
supportedVersions: ["1.20.1", "1.20.4", "1.21"],
},
{
id: "starlight",
name: "Starlight",
version: "1.1.2",
author: "Spottedleaf",
description: "Rewrites the light engine to fix performance issues.",
enabled: false,
supportedVersions: ["1.20.1"],
},
{
id: "ferritecore",
name: "FerriteCore",
version: "6.0.1",
author: "malte0811",
description: "Memory usage optimizations.",
enabled: false,
supportedVersions: ["1.20.1", "1.20.4", "1.21"],
},
];
if (!query) return allDiscoverable;
return allDiscoverable.filter(m => m.name.toLowerCase().includes(query.toLowerCase()));
return allDiscoverable.filter((m) =>
m.name.toLowerCase().includes(query.toLowerCase()),
);
}
async installMod(mod: Mod, versions: string[]): Promise<void> {
console.log(`Installing ${mod.name} to versions: ${versions.join(', ')}`);
// Mock install logic: add to installedMods if not already there
if (!this.installedMods.find(m => m.id === mod.id)) {
this.installedMods.push({ ...mod, enabled: true, supportedVersions: versions });
}
}
export async function installMod(
mod: Mod,
versionsList: string[],
): Promise<void> {
console.log(`Installing ${mod.name} to versions: ${versionsList.join(", ")}`);
// --- Settings ---
async getSettings(): Promise<LauncherSettings> {
return { ...this.settings };
}
async updateSettings(newSettings: Partial<LauncherSettings>): Promise<void> {
this.settings = { ...this.settings, ...newSettings };
}
// --- Launch ---
async launchGame(versionId: string): Promise<{ success: boolean; message: string }> {
console.log(`Launching Saturn Client with version ${versionId}...`);
return new Promise((resolve) => {
setTimeout(() => {
resolve({ success: true, message: 'Game launched successfully!' });
}, 2000);
if (!installedMods.find((m) => m.id === mod.id)) {
installedMods.push({
...mod,
enabled: true,
supportedVersions: versionsList,
});
}
}
export const launcherService = new LauncherService();
// --- Settings ---
export async function getSettings(): Promise<LauncherSettings> {
return { ...settings };
}
export async function updateSettings(
newSettings: Partial<LauncherSettings>,
): Promise<void> {
settings = { ...settings, ...newSettings };
}
// --- Launch ---
export async function launchGame(
versionId: string,
): Promise<{ success: boolean; message: string }> {
console.log(`Launching Saturn Client with version ${versionId}...`);
return new Promise((resolve) => {
setTimeout(() => {
resolve({ success: true, message: "Game launched successfully!" });
}, 2000);
});
}