UPDATE: Backgroud setting, Remake ui/ux

This commit is contained in:
2025-10-19 23:37:04 +07:00
parent 09434fcc5b
commit 787962c6d0
38 changed files with 426 additions and 94 deletions

View File

@@ -11,6 +11,9 @@ import { motion } from 'motion/react';
import { Link } from '@tanstack/react-router';
import { CheckUpdateLauncher, CheckUpdateProxy, CheckUpdateServer, sleep, UpdateLauncher, UpdateProxy, UpdateServer } from '@/helper';
import UpdateModal from '@/components/updateModal';
import { BackgroundSelector } from '@/components/backgroudModal';
export default function LauncherPage() {
const { gamePath,
@@ -21,6 +24,7 @@ export default function LauncherPage() {
gameDir,
serverVersion,
proxyVersion,
background
} = useSettingStore()
const {
@@ -265,24 +269,24 @@ export default function LauncherPage() {
return (
<div className="relative min-h-fit overflow-hidden">
<div
className="fixed inset-0 z-0 w-full h-full"
style={{
backgroundImage: "url('/bg.jpg')",
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat"
<img
src={background}
alt="background"
className="fixed inset-0 w-full h-full object-cover z-0"
onError={(e) => {
const target = e.currentTarget as HTMLImageElement
target.src = "bg-12.jpg"
}}
></div>
/>
{/* Header */}
<header className="hidden sm:flex fixed z-10 items-center justify-between p-6">
<div className="text-2xl font-bold text-white">Firefly GO</div>
<header className="hidden sm:flex fixed z-10 items-center justify-between p-6 ">
<div className="text-2xl font-bold text-white bg-black/5 backdrop-blur-md rounded-full p-2">Firefly GO</div>
</header>
<div className="hidden sm:flex fixed top-1/4 left-4 z-10 flex-col space-y-3 bg-black/30 backdrop-blur-md rounded-xl p-3 shadow-lg">
<div className="hidden sm:flex fixed top-1/4 right-4 z-10 flex-col space-y-3 bg-black/30 backdrop-blur-md rounded-xl p-3 shadow-lg">
{widgetLinks.map((link, idx) => (
<div key={idx} className="tooltip tooltip-right" data-tip={link.tooltip}>
<div key={idx} className="tooltip tooltip-left" data-tip={link.tooltip}>
<a
className={`btn btn-circle ${link.btnClass}`}
target="_blank"
@@ -297,7 +301,7 @@ export default function LauncherPage() {
</div>
))}
<div className="tooltip tooltip-right" data-tip="How to use all tools & commands">
<div className="tooltip tooltip-left" data-tip="How to use all tools & commands">
<Link
to="/howto"
className="btn btn-warning btn-circle"
@@ -307,6 +311,9 @@ export default function LauncherPage() {
</div>
</div>
<div className="hidden sm:flex fixed top-1/2 left-4 z-10 ">
<BackgroundSelector />
</div>
{/* Bottom Panel */}
{serverReady && proxyReady && !isDownloading && (
@@ -461,7 +468,7 @@ export default function LauncherPage() {
{/* Version Info */}
{serverReady && proxyReady && !isDownloading && (
<div className="hidden md:block fixed bottom-4 left-4 z-10 text-sm font-bold bg-black/20 backdrop-blur-sm rounded-lg p-2 shadow">
<div className="hidden md:block fixed bottom-4 left-4 z-10 text-sm font-bold bg-black/5 backdrop-blur-md rounded-lg p-2 shadow">
<p className="text-primary">Version server: {serverVersion}</p>
<p className="mt-2 text-secondary">Version proxy: {proxyVersion}</p>
<p className="mt-2 text-success">Version launcher: {launcherVersion}</p>