saturnclientmc/launcher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

Improved launch section

Browse Source
This commit is contained in:
selimaj-dev
2026-04-03 15:06:00 +02:00
parent 5345fd48c4
commit 2fa51b6082
1 changed files with 52 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PlaySection.tsx
+48 -87
View File
@@ -1,110 +1,71 @@
import React, { useState } from 'react' import React, { useState } from "react";
import { Play, Loader2, Info, ExternalLink } from 'lucide-react' import { Play, Loader2 } from "lucide-react";
import { launcherService, type GameVersion } from '../services/LauncherService' import { launcherService, type GameVersion } from "../services/LauncherService";
import { motion } from 'framer-motion'
interface PlaySectionProps { interface PlaySectionProps {
version: GameVersion version: GameVersion;
} }
const PlaySection: React.FC<PlaySectionProps> = ({ version }) => { const PlaySection: React.FC<PlaySectionProps> = ({ version }) => {
const [isLaunching, setIsLaunching] = useState(false) const [isLaunching, setIsLaunching] = useState(false);
const [launchStatus, setLaunchStatus] = useState('') const [launchStatus, setLaunchStatus] = useState("");
const handleLaunch = async () => { const handleLaunch = async () => {
setIsLaunching(true) setIsLaunching(true);
setLaunchStatus('Preparing...') setLaunchStatus("Preparing...");
// Simulate launch steps // Simulate launch steps
setTimeout(() => setLaunchStatus('Verifying assets...'), 500) setTimeout(() => setLaunchStatus("Verifying assets..."), 500);
setTimeout(() => setLaunchStatus('Applying Saturn optimizations...'), 1200) setTimeout(() => setLaunchStatus("Applying Saturn optimizations..."), 1200);
const result = await launcherService.launchGame(version.id) const result = await launcherService.launchGame(version.id);
if (result.success) { if (result.success) {
setLaunchStatus('Game running') setLaunchStatus("Game running");
// In a real app, we might minimize or close the launcher here // In a real app, we might minimize or close the launcher here
} }
setTimeout(() => { setTimeout(() => {
setIsLaunching(false) setIsLaunching(false);
setLaunchStatus('') setLaunchStatus("");
}, 3000) }, 3000);
} };
return ( return (
<div className="h-full flex flex-col items-center justify-center max-w-4xl mx-auto text-center"> <div className="h-full relative">
<motion.div {/* Background Image */}
initial={{ opacity: 0, y: 20 }} <img
animate={{ opacity: 1, y: 0 }} src="/bg.png"
className="mb-12" alt="Background"
> className="w-full h-full object-cover rounded-2xl brightness-50"
<h1 className="text-6xl font-black tracking-tighter mb-2 bg-gradient-to-b from-white to-white/40 bg-clip-text text-transparent"> />
SATURN
</h1>
<p className="text-saturn-text-secondary text-lg tracking-widest font-light uppercase">
Fabric-Only Optimization Client
</p>
</motion.div>
<div className="w-full grid grid-cols-1 md:grid-cols-3 gap-6 mb-12"> {/* Centered Overlay */}
<div className="panel p-6 flex flex-col items-center gap-3"> <div className="absolute inset-0 flex items-center justify-center">
<div className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-saturn-accent"> <div className="relative group">
<Info size={20} /> <div className="absolute -inset-1 bg-linear-to-r from-blue-600 to-cyan-500 rounded-lg blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
</div>
<div> <button
<p className="text-xs text-saturn-text-secondary uppercase tracking-wider font-bold">Instance</p> onClick={handleLaunch}
<p className="text-sm font-medium">Saturn Default</p> disabled={isLaunching}
</div> className="relative btn-primary px-16 py-4 text-xl flex items-center gap-3 min-w-60 justify-center"
>
{isLaunching ? (
<>
<Loader2 size={24} className="animate-spin" />
<span>{launchStatus}</span>
</>
) : (
<>
<Play size={24} fill="currentColor" />
<span>LAUNCH {version.id}</span>
</>
)}
</button>
</div> </div>
<div className="panel p-6 flex flex-col items-center gap-3 border-saturn-accent/30 bg-saturn-accent/5">
<div className="w-10 h-10 rounded-full bg-saturn-accent/20 flex items-center justify-center text-saturn-accent">
<Play size={20} fill="currentColor" />
</div>
<div>
<p className="text-xs text-saturn-text-secondary uppercase tracking-wider font-bold">Current Version</p>
<p className="text-sm font-medium">{version.name}</p>
</div>
</div>
<div className="panel p-6 flex flex-col items-center gap-3">
<div className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-saturn-accent">
<ExternalLink size={20} />
</div>
<div>
<p className="text-xs text-saturn-text-secondary uppercase tracking-wider font-bold">Modloader</p>
<p className="text-sm font-medium">Fabric Loader</p>
</div>
</div>
</div>
<div className="relative group">
<div className="absolute -inset-1 bg-gradient-to-r from-blue-600 to-cyan-500 rounded-lg blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
<button
onClick={handleLaunch}
disabled={isLaunching}
className="relative btn-primary px-16 py-4 text-xl flex items-center gap-3 min-w-[240px] justify-center"
>
{isLaunching ? (
<>
<Loader2 size={24} className="animate-spin" />
<span>{launchStatus}</span>
</>
) : (
<>
<Play size={24} fill="currentColor" />
<span>PLAY</span>
</>
)}
</button>
</div>
<div className="mt-12 text-saturn-text-secondary text-xs max-w-md">
<p>Saturn Client is not affiliated with Mojang AB. Use at your own risk. Performance may vary based on hardware.</p>
</div> </div>
</div> </div>
) );
} };
export default PlaySection export default PlaySection;