Firefly-Shelter/Firefly_Launcher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

UPDATE: Backgroud setting, Remake ui/ux

Browse Source
This commit is contained in:
Azen Kain
2025-10-19 23:37:04 +07:00
parent 09434fcc5b
commit 787962c6d0
38 changed files with 426 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
Makefile
View File

@@ -22,6 +22,11 @@ build:
wails3 build wails3 build
@echo Done! @echo Done!
generate:
@echo Generating bindings...
wails3 generate bindings -ts
@echo Done!
release: release:
@echo Building release application... @echo Building release application...
wails3 package wails3 package

21
frontend/bindings/firefly-launcher/internal/app-service/appservice.js
View File

@@ -28,9 +28,30 @@ export function GetCurrentLauncherVersion() {
return $Call.ByID(3575133982); return $Call.ByID(3575133982);
} }
/**
* @returns {$CancellablePromise<[boolean, string]>}
*/
export function HideApp() {
return $Call.ByID(88003266);
}
/**
* @returns {$CancellablePromise<[boolean, string]>}
*/
export function MaximizeApp() {
return $Call.ByID(1257306588);
}
/** /**
* @returns {$CancellablePromise<[boolean, string]>} * @returns {$CancellablePromise<[boolean, string]>}
*/ */
export function MinimizeApp() { export function MinimizeApp() {
return $Call.ByID(3434614194); return $Call.ByID(3434614194);
} }
/**
* @returns {$CancellablePromise<[boolean, string]>}
*/
export function RestoreApp() {
return $Call.ByID(3115625834);
}

2
frontend/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" data-theme="dracula">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />

21
frontend/package-lock.json generated
View File

@@ -16,6 +16,7 @@
"path-browserify": "^1.0.1", "path-browserify": "^1.0.1",
"react": "^19.1.1", "react": "^19.1.1",
"react-dom": "^19.1.1", "react-dom": "^19.1.1",
"react-easy-crop": "^5.5.3",
"react-toastify": "^11.0.5", "react-toastify": "^11.0.5",
"tailwindcss": "^4.1.14", "tailwindcss": "^4.1.14",
"zustand": "^5.0.8" "zustand": "^5.0.8"
@@ -3783,6 +3784,12 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/normalize-wheel": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
"integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==",
"license": "BSD-3-Clause"
},
"node_modules/optionator": { "node_modules/optionator": {
"version": "0.9.4", "version": "0.9.4",
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -4000,6 +4007,20 @@
"react": "^19.2.0" "react": "^19.2.0"
} }
}, },
"node_modules/react-easy-crop": {
"version": "5.5.3",
"resolved": "https://registry.npmjs.org/react-easy-crop/-/react-easy-crop-5.5.3.tgz",
"integrity": "sha512-iKwFTnAsq+IVuyF6N0Q3zjRx9DG1NMySkwWxVfM/xAOeHYH1vhvM+V2kFiq5HOIQGWouITjfltCx54mbDpMpmA==",
"license": "MIT",
"dependencies": {
"normalize-wheel": "^1.0.1",
"tslib": "^2.0.1"
},
"peerDependencies": {
"react": ">=16.4.0",
"react-dom": ">=16.4.0"
}
},
"node_modules/react-refresh": { "node_modules/react-refresh": {
"version": "0.17.0", "version": "0.17.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",

1
frontend/package.json
View File

@@ -19,6 +19,7 @@
"path-browserify": "^1.0.1", "path-browserify": "^1.0.1",
"react": "^19.1.1", "react": "^19.1.1",
"react-dom": "^19.1.1", "react-dom": "^19.1.1",
"react-easy-crop": "^5.5.3",
"react-toastify": "^11.0.5", "react-toastify": "^11.0.5",
"tailwindcss": "^4.1.14", "tailwindcss": "^4.1.14",
"zustand": "^5.0.8" "zustand": "^5.0.8"

BIN
frontend/public/bg-1.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 196 KiB

BIN
frontend/public/bg-10.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 195 KiB

BIN
frontend/public/bg-11.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 386 KiB

BIN
frontend/public/bg-12.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 355 KiB

BIN
frontend/public/bg-13.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 179 KiB

BIN
frontend/public/bg-16.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 270 KiB

BIN
frontend/public/bg-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
frontend/public/bg-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
frontend/public/bg-5.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 300 KiB

BIN
frontend/public/bg-6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
frontend/public/bg-7.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 349 KiB

BIN
frontend/public/bg-8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
frontend/public/bg-9.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 378 KiB

BIN
frontend/public/bg.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 MiB

180
frontend/src/components/backgroudModal/index.tsx Normal file
View File

@@ -0,0 +1,180 @@
'use client'
import { useState, useRef } from 'react'
import { X, Image as ImageIcon, Plus, Upload, Check } from 'lucide-react'
import useSettingStore from '@/stores/settingStore'
import Cropper from 'react-easy-crop'
import getCroppedImg from '@/utils/cropImage'
const initialImages = {
"bg-1": "bg-1.jpeg",
"bg-2": "bg-2.png",
"bg-3": "bg-3.png",
"bg-6": "bg-6.png",
"bg-7": "bg-7.jpeg",
"bg-8": "bg-8.png",
"bg-9": "bg-9.jpeg",
"bg-10": "bg-10.jpg",
"bg-11": "bg-11.jpeg",
"bg-12": "bg-12.jpg",
"bg-13": "bg-13.jpg",
"bg-16": "bg-16.jpg",
}
export const BackgroundSelector = () => {
const [isOpen, setIsOpen] = useState(false)
const [newUrl, setNewUrl] = useState('')
const [croppingImage, setCroppingImage] = useState<string | null>(null)
const [crop, setCrop] = useState({ x: 0, y: 0 })
const [zoom, setZoom] = useState(1)
const [croppedAreaPixels, setCroppedAreaPixels] = useState<any>(null)
const { background, setBackground, extraBackgrounds, setExtraBackgrounds } = useSettingStore()
const fileInputRef = useRef<HTMLInputElement>(null)
const handleSelect = (img: string) => {
setIsOpen(false)
setBackground(img)
}
const handleAddUrl = () => {
if (!newUrl.trim()) return setCroppingImage(newUrl)
setNewUrl('')
}
const handleRemoveExtra = (url: string) => {
setExtraBackgrounds(extraBackgrounds.filter(bg => bg !== url))
}
const handleUploadFile = (file: File) => {
const reader = new FileReader()
reader.onload = () => setCroppingImage(reader.result as string)
reader.readAsDataURL(file)
}
const handleCropComplete = async () => {
if (!croppingImage || !croppedAreaPixels) return
const croppedBase64 = await getCroppedImg(croppingImage, croppedAreaPixels)
setExtraBackgrounds([croppedBase64, ...extraBackgrounds])
setCroppingImage(null)
}
const allBackgrounds = [...extraBackgrounds, ...Object.values(initialImages)]
return (
<div className="flex flex-col items-center justify-center gap-4">
<div className="tooltip tooltip-right" data-tip="Select Background">
<button
className="group btn btn-primary btn-circle flex items-center justify-center shadow-md transition-all duration-300 hover:scale-110 hover:shadow-lg hover:bg-primary/80"
onClick={() => setIsOpen(true)}
>
<ImageIcon size={22} className="text-white transition-all duration-300 group-hover:rotate-6 group-hover:scale-110 group-hover:text-yellow-300" />
</button>
</div>
{isOpen && (
<div className="fixed inset-0 z-40 flex items-center justify-center bg-base-200/60 pt-10">
<div className="bg-base-200 text-white rounded-xl shadow-xl p-6 w-[90%] max-w-2xl relative">
<button className="btn btn-ghost btn-circle absolute top-3 right-3" onClick={() => setIsOpen(false)}>
<X size={20} />
</button>
<h2 className="text-lg font-semibold mb-4">Choose Background</h2>
{/* Add via URL */}
<div className="flex gap-2 mb-4">
<input
type="text"
placeholder="Paste image URL (https://...)"
className="input input-bordered w-full text-info"
value={newUrl}
onChange={(e) => setNewUrl(e.target.value)}
/>
<button className="btn btn-success flex items-center gap-1" onClick={handleAddUrl}>
<Plus size={16} /> Add
</button>
</div>
{/* Upload from computer */}
<div className="flex mb-4">
<button
className="btn btn-warning flex items-center gap-1"
onClick={() => fileInputRef.current?.click()}
>
<Upload size={16} /> Upload from computer
</button>
<input
type="file"
accept="image/*"
className="hidden"
ref={fileInputRef}
onChange={(e) => {
const file = e.target.files?.[0]
if (file) handleUploadFile(file)
e.target.value = ''
}}
/>
</div>
{/* Crop Modal */}
{croppingImage && (
<div className="fixed inset-0 z-60 flex flex-col items-center justify-center bg-black/70 p-4">
<div className="relative w-full max-w-3xl h-[400px] bg-gray-800 rounded-lg">
<Cropper
image={croppingImage}
crop={crop}
zoom={zoom}
aspect={16 / 9}
onCropChange={setCrop}
onZoomChange={setZoom}
onCropComplete={(_, croppedAreaPixels) => setCroppedAreaPixels(croppedAreaPixels)}
/>
<button
className="absolute bottom-4 left-1/2 -translate-x-1/2 btn btn-success"
onClick={handleCropComplete}
>
<Check size={20} /> Done
</button>
<button
className="absolute top-2 right-2 btn btn-ghost btn-circle"
onClick={() => setCroppingImage(null)}
>
<X size={20} />
</button>
</div>
</div>
)}
<div className="grid grid-cols-3 gap-4 max-h-[60vh] overflow-y-auto">
{allBackgrounds.map((value, i) => {
const isExtra = i < extraBackgrounds.length
return (
<div
key={i}
className={`relative rounded-lg overflow-hidden cursor-pointer border-2 transition-all duration-200 ${
value === background ? 'border-blue-500' : 'border-transparent hover:border-gray-500'
}`}
onClick={() => handleSelect(value)}
>
<img src={value} alt={`bg-${i}`} loading="lazy" className="w-full h-28 object-cover" />
{isExtra && (
<button
className="absolute top-1 right-1 bg-black/50 hover:bg-black/70 text-white rounded-full p-1"
onClick={(e) => {
e.stopPropagation()
handleRemoveExtra(value)
}}
>
<X size={14} />
</button>
)}
</div>
)
})}
</div>
</div>
</div>
)}
</div>
)
}

2
frontend/src/components/closeModal/index.tsx
View File

@@ -53,7 +53,7 @@ export default function CloseModal({
className="btn btn-warning" className="btn btn-warning"
onClick={async () => { onClick={async () => {
onClose() onClose()
const [success, message] = await AppService.MinimizeApp() const [success, message] = await AppService.HideApp()
if (!success) toast.error(message) if (!success) toast.error(message)
if (!closingOption.isAsk) { if (!closingOption.isAsk) {
setClosingOption({ isMinimize: true, isAsk: false }) setClosingOption({ isMinimize: true, isAsk: false })

110
frontend/src/components/header/index.tsx
View File

@@ -1,12 +1,35 @@
import { Link } from "@tanstack/react-router"; import { Link } from "@tanstack/react-router";
import ThemeController from "../themeController";
import useModalStore from "@/stores/modalStore"; import useModalStore from "@/stores/modalStore";
import { Settings2 } from "lucide-react"; import { Blend, BookOpen, Diff, Home, Info, Languages, Minus, Puzzle, Settings, TrendingUpDown, Wrench, X } from "lucide-react";
import { AppService } from "@bindings/firefly-launcher/internal/app-service";
import { motion } from "motion/react";
export default function Header() { export default function Header() {
const { setIsOpenSettingModal } = useModalStore() const { setIsOpenSettingModal } = useModalStore()
const controlButtons = [
{
icon: <Settings className="w-5 h-5 text-white" />,
action: () => setIsOpenSettingModal(true),
tip: "Settings",
hover: { rotate: 20, color: "#ffffff" },
},
{
icon: <Minus className="w-5 h-5 text-white" />,
action: () => AppService.MinimizeApp(),
tip: "Minimize",
hover: { rotate: 20, color: "#ffffff" },
},
{
icon: <X className="w-5 h-5 text-white" />,
action: () => AppService.CloseApp(),
tip: "Close",
hover: {color: "#ffffff", rotate: -10 },
},
]
return ( return (
<div className="navbar bg-base-100 shadow-sm sticky top-0 z-50 px-3"> <div className="navbar sticky top-0 z-50 px-3">
<div className="navbar-start"> <div className="navbar-start">
<div className="dropdown"> <div className="dropdown">
<div tabIndex={0} role="button" className="btn btn-ghost md:hidden"> <div tabIndex={0} role="button" className="btn btn-ghost md:hidden">
@@ -14,7 +37,7 @@ export default function Header() {
</div> </div>
<ul <ul
tabIndex={0} tabIndex={0}
className="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow"> className="menu menu-sm dropdown-content bg-black/50 backdrop-blur-md rounded-box z-1 mt-3 w-52 p-2 shadow">
<li><Link to="/">Home</Link></li> <li><Link to="/">Home</Link></li>
<li> <li>
@@ -50,36 +73,79 @@ export default function Header() {
</div> </div>
</Link> </Link>
</div> </div>
<div className="navbar-center hidden md:flex"> <div className="navbar-center hidden md:flex bg-black/40 backdrop-blur-sm rounded-lg shadow-lg">
<ul className="menu menu-horizontal px-1 gap-4"> <ul className="menu menu-horizontal px-1 gap-4 text-white">
<li><Link to="/">Home</Link></li> <li>
<Link to="/" className="flex items-center gap-2 hover:text-cyan-300 transition-colors">
<Home size={18} /> Home
</Link>
</li>
<li> <li>
<details> <details>
<summary>Tools</summary> <summary className="flex items-center gap-2 cursor-pointer hover:text-cyan-300 transition-colors">
<ul className="p-2"> <Wrench size={18} /> Tools
<li><Link to="/language">Language</Link></li> </summary>
<li><Link to="/diff">Diff</Link></li> <ul className="p-2 bg-black/75 text-white rounded-lg">
<li>
<Link to="/language" className="flex items-center gap-2 hover:text-cyan-300">
<Languages size={18} /> Language
</Link>
</li>
<li>
<Link to="/diff" className="flex items-center gap-2 hover:text-cyan-300">
<Diff size={18} /> Client update
</Link>
</li>
</ul> </ul>
</details> </details>
</li> </li>
<li> <li>
<details> <details>
<summary>Plugins</summary> <summary className="flex items-center gap-2 cursor-pointer hover:text-cyan-300 transition-colors">
<ul className="p-2"> <Puzzle size={18} /> Plugins
<li><Link to="/analysis">Analysis (Veritas)</Link></li> </summary>
<li><Link to="/srtools">Firefly Tools</Link></li> <ul className="p-2 bg-black/75 text-white rounded-lg">
<li>
<Link to="/analysis" className="flex items-center gap-2 hover:text-cyan-300">
<TrendingUpDown size={18} /> Analysis (Veritas)
</Link>
</li>
<li>
<Link to="/srtools" className="flex items-center gap-2 hover:text-cyan-300">
<Blend size={18} /> Firefly Tools
</Link>
</li>
</ul> </ul>
</details> </details>
</li> </li>
<li><Link to="/howto">How to?</Link></li> <li>
<li><Link to="/about">About</Link></li> <Link to="/howto" className="flex items-center gap-2 hover:text-cyan-300 transition-colors">
<BookOpen size={18} /> How to?
</Link>
</li>
<li>
<Link to="/about" className="flex items-center gap-2 hover:text-cyan-300 transition-colors">
<Info size={18} /> About
</Link>
</li>
</ul> </ul>
</div> </div>
<div className="navbar-end flex gap-2">
<ThemeController /> <div className="navbar-end flex gap-2 z-52">
<button className="btn btn-ghost btn-circle" onClick={() => setIsOpenSettingModal(true)}> <div className="flex items-center gap-2 bg-black/40 backdrop-blur-sm rounded-lg">
<Settings2 className="w-5 h-5" /> {controlButtons.map((btn, i) => (
</button> <div key={i} className="tooltip tooltip-bottom" data-tip={btn.tip}>
<motion.button
whileHover={btn.hover}
transition={{ type: "spring"}}
onClick={btn.action}
className="btn btn-ghost btn-circle bg-transparent border-none flex items-center justify-center"
>
{btn.icon}
</motion.button>
</div>
))}
</div>
</div> </div>
</div> </div>
) )

3
frontend/src/components/settingModal/index.tsx
View File

@@ -72,7 +72,6 @@ export default function SettingModal({
className="checkbox checkbox-primary w-5 h-5 mt-1" className="checkbox checkbox-primary w-5 h-5 mt-1"
checked={!closingOption.isAsk} checked={!closingOption.isAsk}
onChange={(e) => { onChange={(e) => {
console.log(!e.target.checked)
setClosingOption({ setClosingOption({
isMinimize: closingOption.isMinimize, isMinimize: closingOption.isMinimize,
isAsk: !e.target.checked isAsk: !e.target.checked
@@ -83,7 +82,7 @@ export default function SettingModal({
<span className="text-base font-medium text-info"> <span className="text-base font-medium text-info">
Set do not ask again Set do not ask again
</span> </span>
<span className="text-sm text-warning"> <span className="text-sm text-accent">
Next time you close the app, it will automatically{" "} Next time you close the app, it will automatically{" "}
{closingOption.isMinimize ? "minimize to system tray" : "quit the app"}{" "} {closingOption.isMinimize ? "minimize to system tray" : "quit the app"}{" "}
without asking. without asking.

30
frontend/src/components/themeController/index.tsx
View File

@@ -1,30 +0,0 @@
import { useEffect, useState } from "react";
export default function ThemeController() {
const [theme, setTheme] = useState(localStorage.getItem("theme") ?? "night");
const handleToggle = (e: any) => {
if (e.target.checked) {
setTheme("cupcake");
} else {
setTheme("night");
}
};
useEffect(() => {
localStorage.setItem('theme', theme!)
const localTheme = localStorage.getItem('theme')
document.querySelector('html')?.setAttribute('data-theme', localTheme!)
}, [theme]);
return (
<label className="toggle text-base-content">
<input type="checkbox" onChange={handleToggle} className="theme-controller" />
<svg aria-label="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g strokeLinejoin="round" strokeLinecap="round" strokeWidth="2" fill="none" stroke="currentColor"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></g></svg>
<svg aria-label="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g strokeLinejoin="round" strokeLinecap="round" strokeWidth="2" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></g></svg>
</label>
)
}

2
frontend/src/components/updateModal/index.tsx
View File

@@ -35,7 +35,7 @@ export default function UpdateModal({ isOpen, title, message, buttons, onClose }
<div className="px-6 pb-6"> <div className="px-6 pb-6">
<div className="mb-6"> <div className="mb-6">
<p className="text-warning text-lg">{message}</p> <p className="text-accent text-lg">{message}</p>
</div> </div>
<div className="flex justify-end gap-3"> <div className="flex justify-end gap-3">

2
frontend/src/pages/about/index.tsx
View File

@@ -14,7 +14,7 @@ export default function AboutPage() {
I created a lightweight and modern <span className="font-semibold text-success">Game Launcher</span> to help users easily launch and manage their games with better performance and simplicity. I created a lightweight and modern <span className="font-semibold text-success">Game Launcher</span> to help users easily launch and manage their games with better performance and simplicity.
</p> </p>
<p className="text-lg leading-relaxed"> <p className="text-lg leading-relaxed">
The launcher is built using <span className="font-mono text-info">Go + Wails3</span>, with a clean and responsive interface styled with <span className="text-warning">Tailwind CSS</span> and <span className="text-warning">DaisyUI</span>. The launcher is built using <span className="font-mono text-info">Go + Wails3</span>, with a clean and responsive interface styled with <span className="text-accent">Tailwind CSS</span> and <span className="text-accent">DaisyUI</span>.
</p> </p>
<p className="text-lg leading-relaxed"> <p className="text-lg leading-relaxed">
My goal is to make tools that are fast, efficient, and enjoyable to use — and this launcher is just the beginning. My goal is to make tools that are fast, efficient, and enjoyable to use — and this launcher is just the beginning.

4
frontend/src/pages/analysis/index.tsx
View File

@@ -64,7 +64,7 @@ export default function AnalysisPage() {
</div> </div>
<a <a
href="https://sranalysis.kain.id.vn/" href="https://sranalysis.kain.id.vn/"
className="link link-warning font-mono text-sm break-all" className="link link-accent font-mono text-sm break-all"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
@@ -79,7 +79,7 @@ export default function AnalysisPage() {
</div> </div>
<a <a
href="https://firefly-sranalysis.vercel.app/" href="https://firefly-sranalysis.vercel.app/"
className="link link-warning font-mono text-sm break-all" className="link link-accent font-mono text-sm break-all"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >

2
frontend/src/pages/diff/index.tsx
View File

@@ -309,7 +309,7 @@ export default function DiffPage() {
<div className="w-full p-4"> <div className="w-full p-4">
<div className="space-y-3"> <div className="space-y-3">
<div className="flex justify-center items-center text-sm text-white/80"> <div className="flex justify-center items-center text-sm text-white/80">
<span className="font-bold text-lg text-warning">{stageType}:</span> <span className="font-bold text-lg text-accent">{stageType}:</span>
<div className="flex items-center gap-4 ml-2"> <div className="flex items-center gap-4 ml-2">
{stageType !== 'Cut Data' && <span className="text-white font-bold">{progressUpdate.toFixed(0)} / {maxProgressUpdate.toFixed(0)}</span>} {stageType !== 'Cut Data' && <span className="text-white font-bold">{progressUpdate.toFixed(0)} / {maxProgressUpdate.toFixed(0)}</span>}
{stageType === 'Cut Data' && <span className="text-white font-bold truncate max-w-full overflow-hidden whitespace-nowrap">{messageUpdate}</span>} {stageType === 'Cut Data' && <span className="text-white font-bold truncate max-w-full overflow-hidden whitespace-nowrap">{messageUpdate}</span>}

16
frontend/src/pages/fireflytools/index.tsx
View File

@@ -19,7 +19,7 @@ export default function FireflyToolsPage() {
This site is a another version of {" "} This site is a another version of {" "}
<span className="font-semibold text-success">Firefly Tools {" "}</span> <span className="font-semibold text-success">Firefly Tools {" "}</span>
developed by {" "} developed by {" "}
<span className="font-semibold text-warning">Me {"(Kain)"}</span> <span className="font-semibold text-accent">Me {"(Kain)"}</span>
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 gap-4"> <div className="grid md:grid-cols-2 gap-4">
@@ -30,7 +30,7 @@ export default function FireflyToolsPage() {
</div> </div>
<a <a
href="https://srtools.kain.id.vn/" href="https://srtools.kain.id.vn/"
className="link link-warning font-mono text-sm break-all" className="link link-accent font-mono text-sm break-all"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
@@ -45,7 +45,7 @@ export default function FireflyToolsPage() {
</div> </div>
<a <a
href="https://firefly-srtools.vercel.app/" href="https://firefly-srtools.vercel.app/"
className="link link-warning font-mono text-sm break-all" className="link link-accent font-mono text-sm break-all"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
@@ -55,14 +55,14 @@ export default function FireflyToolsPage() {
</div> </div>
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<div className="text-blue-600 text-lg">👨‍💻</div> <div className="text-blue-600 text-lg">👨‍💻</div>
<p>The original tool was created by a third-party developer named <span className="font-semibold text-warning">Amazing</span>. This version is directly based on that work, without modification to core logic.</p> <p>The original tool was created by a third-party developer named <span className="font-semibold text-accent">Amazing</span>. This version is directly based on that work, without modification to core logic.</p>
</div> </div>
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<div className="text-blue-600 text-lg">🔗</div> <div className="text-blue-600 text-lg">🔗</div>
<p>There is also a more modern version by the same author available at{" "} <p>There is also a more modern version by the same author available at{" "}
<a <a
href="https://srtools.neonteam.dev/" href="https://srtools.neonteam.dev/"
className="link link-warning" className="link link-accent"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
@@ -71,7 +71,7 @@ export default function FireflyToolsPage() {
{" "}and the original version at{" "} {" "}and the original version at{" "}
<a <a
href="https://srtools.pages.dev/" href="https://srtools.pages.dev/"
className="link link-warning" className="link link-accent"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
@@ -95,14 +95,14 @@ export default function FireflyToolsPage() {
</div> </div>
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<div className="text-green-600 text-lg">🔌</div> <div className="text-green-600 text-lg">🔌</div>
<p>Instantly apply setups to <span className="font-semibold text-warning">Firefly GO Server</span> using <span className="font-semibold">Connect PS</span> — no manual file uploads required.</p> <p>Instantly apply setups to <span className="font-semibold text-accent">Firefly GO Server</span> using <span className="font-semibold">Connect PS</span> — no manual file uploads required.</p>
</div> </div>
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<div className="text-green-600 text-2xl">✨</div> <div className="text-green-600 text-2xl">✨</div>
<div> <div>
<h4 className="font-semibold text-green-800 text-lg">Extra Settings</h4> <h4 className="font-semibold text-green-800 text-lg">Extra Settings</h4>
<p className="text-green-700 mt-1"> <p className="text-green-700 mt-1">
Enhance your <span className="font-semibold text-warning">Firefly GO Server</span> experience with extra features: Enhance your <span className="font-semibold text-accent">Firefly GO Server</span> experience with extra features:
</p> </p>
<ul className="list-disc list-inside mt-2 space-y-1 text-green-700"> <ul className="list-disc list-inside mt-2 space-y-1 text-green-700">
<li>🎭 <span className="font-medium">Hidden Game UI</span> — remove the entire game interface.</li> <li>🎭 <span className="font-medium">Hidden Game UI</span> — remove the entire game interface.</li>

2
frontend/src/pages/howto/index.tsx
View File

@@ -56,7 +56,7 @@ export default function HowToPage() {
<p className="text-blue-700 mb-4"> <p className="text-blue-700 mb-4">
Below are in-game chat commands you can use. Some commands require you to enable{" "} Below are in-game chat commands you can use. Some commands require you to enable{" "}
<span className="font-semibold text-warning">Theorycraft Mode</span>. <span className="font-semibold text-accent">Theorycraft Mode</span>.
</p> </p>
{/* Theorycraft Mode Warning */} {/* Theorycraft Mode Warning */}

8
frontend/src/pages/language/index.tsx
View File

@@ -208,10 +208,10 @@ export default function LanguagePage() {
<div className="bg-warning/5 rounded-lg p-2 border border-warning/30"> <div className="bg-warning/5 rounded-lg p-2 border border-warning/30">
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1">
<Mic size={20} className="text-warning" /> <Mic size={20} className="text-accent" />
<span className="font-bold text-warning">Voice Language</span> <span className="font-bold text-accent">Voice Language</span>
</div> </div>
<p className="text-2xl font-bold text-warning"> <p className="text-2xl font-bold text-accent">
{getLanguageLabel(voiceLang)} {getLanguageLabel(voiceLang)}
</p> </p>
</div> </div>
@@ -250,7 +250,7 @@ export default function LanguagePage() {
{/* Voice Language */} {/* Voice Language */}
<div className="space-y-3"> <div className="space-y-3">
<label className="flex text-sm font-medium text-warning items-center gap-2"> <label className="flex text-sm font-medium text-accent items-center gap-2">
<Mic size={16} /> <Mic size={16} />
Voice Language Voice Language
</label> </label>

35
frontend/src/pages/launcher/index.tsx
View File

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

8
frontend/src/stores/settingStore.ts
View File

@@ -14,6 +14,10 @@ interface SettingState {
isMinimize: boolean; isMinimize: boolean;
isAsk: boolean; isAsk: boolean;
} }
background: string;
extraBackgrounds: string[];
setExtraBackgrounds: (newExtraBackgrounds: string[]) => void;
setBackground: (newBackground: string) => void;
setClosingOption: (newClosingOption: { isMinimize: boolean; isAsk: boolean }) => void; setClosingOption: (newClosingOption: { isMinimize: boolean; isAsk: boolean }) => void;
setLocale: (newLocale: string) => void; setLocale: (newLocale: string) => void;
setGamePath: (newGamePath: string) => void; setGamePath: (newGamePath: string) => void;
@@ -38,6 +42,10 @@ const useSettingStore = create<SettingState>()(
isMinimize: false, isMinimize: false,
isAsk: true, isAsk: true,
}, },
background: "bg-12.jpg",
extraBackgrounds: [],
setExtraBackgrounds: (newExtraBackgrounds: string[]) => set({ extraBackgrounds: newExtraBackgrounds }),
setBackground: (newBackground: string) => set({ background: newBackground }),
setClosingOption: (newClosingOption: { isMinimize: boolean; isAsk: boolean }) => set({ closingOption: newClosingOption }), setClosingOption: (newClosingOption: { isMinimize: boolean; isAsk: boolean }) => set({ closingOption: newClosingOption }),
setLocale: (newLocale: string) => set({ locale: newLocale }), setLocale: (newLocale: string) => set({ locale: newLocale }),
setGamePath: (newGamePath: string) => set({ gamePath: newGamePath }), setGamePath: (newGamePath: string) => set({ gamePath: newGamePath }),

2
frontend/src/styles/index.css
View File

@@ -1,4 +1,4 @@
@import "tailwindcss"; @import "tailwindcss";
@plugin "daisyui"{ @plugin "daisyui"{
themes: night --default, night --prefersdark, cupcake; themes: dracula --default;
} }

25
frontend/src/utils/cropImage.ts Normal file
View File

@@ -0,0 +1,25 @@
export default function getCroppedImg(imageSrc: string, crop: any): Promise<string> {
const image = new Image()
image.src = imageSrc
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')!
canvas.width = crop.width
canvas.height = crop.height
return new Promise((resolve) => {
image.onload = () => {
ctx.drawImage(
image,
crop.x,
crop.y,
crop.width,
crop.height,
0,
0,
crop.width,
crop.height
)
resolve(canvas.toDataURL('image/jpeg'))
}
})
}

29
internal/app-service/app.go
View File

@@ -26,7 +26,7 @@ func (a *AppService) CloseApp() (bool, string) {
return true, "" return true, ""
} }
func (a *AppService) MinimizeApp() (bool, string) { func (a *AppService) HideApp() (bool, string) {
window := application.Get().Window.Current() window := application.Get().Window.Current()
if window == nil { if window == nil {
return false, "not found window" return false, "not found window"
@@ -35,3 +35,30 @@ func (a *AppService) MinimizeApp() (bool, string) {
return true, "" return true, ""
} }
func (a *AppService) MinimizeApp() (bool, string) {
window := application.Get().Window.Current()
if window == nil {
return false, "not found window"
}
window.Minimise()
return true, ""
}
func (a *AppService) MaximizeApp() (bool, string) {
window := application.Get().Window.Current()
if window == nil {
return false, "not found window"
}
window.Maximise()
return true, ""
}
func (a *AppService) RestoreApp() (bool, string) {
window := application.Get().Window.Current()
if window == nil {
return false, "not found window"
}
window.Restore()
return true, ""
}

6
main.go
View File

@@ -93,10 +93,12 @@ func main() {
TitleBar: application.MacTitleBarHiddenInset, TitleBar: application.MacTitleBarHiddenInset,
}, },
BackgroundColour: application.NewRGB(27, 38, 54), BackgroundColour: application.NewRGB(27, 38, 54),
Width: 1200, Width: 1280,
Height: 600, Height: 720,
URL: "/", URL: "/",
DevToolsEnabled: true, DevToolsEnabled: true,
Frameless: true,
DisableResize: true,
}) })
iconBytes, _ := tools.ReadFile("assets/appicon.png") iconBytes, _ := tools.ReadFile("assets/appicon.png")

2
pkg/constant/constant.go
View File

@@ -10,7 +10,7 @@ const ProxyZipFile = "64bit.zip"
const LauncherFile = "firefly-launcher.exe" const LauncherFile = "firefly-launcher.exe"
const TempUrl = "./temp" const TempUrl = "./temp"
const CurrentLauncherVersion = "2.1.1" const CurrentLauncherVersion = "2.2.0"
type ToolFile string type ToolFile string