LCE-Hub-Mirrors/LCE-Emerald-Launcher
1
2
Fork 0
mirror of https://github.com/LCE-Hub/LCE-Emerald-Launcher.git synced 2026-08-08 18:22:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

ui: Settings refractor

Browse source
This commit is contained in:
KayJann 2026-04-05 21:13:17 +02:00
parent 5a458d63d6
commit 72b9dc2074
16 changed files with 254 additions and 160 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/images/background.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

BIN
public/images/notification.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 371 B

6
src/components/common/ClickParticles.tsx
View file

@ -16,7 +16,7 @@ export const ClickParticles: React.FC = React.memo(() => {
const [bursts, setBursts] = useState<Particle[]>([]);
useEffect(() => {
const handleClick = (e: MouseEvent) => {
const handlePressSound = (e: MouseEvent) => {
const newParticles: Particle[] = [];
const particleCount = 8;
@ -38,8 +38,8 @@ export const ClickParticles: React.FC = React.memo(() => {
}, 1000);
};
window.addEventListener("mousedown", handleClick);
return () => window.removeEventListener("mousedown", handleClick);
window.addEventListener("mousedown", handlePressSound);
return () => window.removeEventListener("mousedown", handlePressSound);
}, []);
return (

18
src/components/common/SkinViewer.tsx
View file

@ -7,7 +7,7 @@ import { useConfig } from '../../context/LauncherContext';
interface SkinViewerProps {
username: string;
setUsername: (name: string) => void;
playClickSound: () => void;
playPressSound: () => void;
skinUrl: string;
setSkinUrl: (url: string) => void;
setActiveView: (view: string) => void;
@ -15,7 +15,7 @@ interface SkinViewerProps {
onNavigateRight: () => void;
}
const SkinViewer = memo(function SkinViewer({ username, setUsername, playClickSound, skinUrl, setSkinUrl, setActiveView, isFocusedSection, onNavigateRight }: SkinViewerProps) {
const SkinViewer = memo(function SkinViewer({ username, setUsername, playPressSound, skinUrl, setSkinUrl, setActiveView, isFocusedSection, onNavigateRight }: SkinViewerProps) {
const mountRef = useRef<HTMLDivElement>(null);
const containerRef = useRef<HTMLDivElement>(null);
const [focusIndex, setFocusIndex] = useState(0);
@ -232,13 +232,13 @@ const SkinViewer = memo(function SkinViewer({ username, setUsername, playClickSo
if (focusIndex === 0) {
(containerRef.current?.querySelector('input') as HTMLElement)?.focus();
} else if (focusIndex === 1) {
playClickSound();
playPressSound();
setActiveView('skins');
} else if (focusIndex === 2) {
playClickSound();
playPressSound();
setShowLayers(!showLayers);
} else if (focusIndex === 3) {
playClickSound();
playPressSound();
setSkinUrl('/images/Default.png');
}
}
@ -246,7 +246,7 @@ const SkinViewer = memo(function SkinViewer({ username, setUsername, playClickSo
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [isFocusedSection, focusIndex, onNavigateRight, playClickSound, setActiveView, setShowLayers, showLayers, setSkinUrl, legacyMode]);
}, [isFocusedSection, focusIndex, onNavigateRight, playPressSound, setActiveView, setShowLayers, showLayers, setSkinUrl, legacyMode]);
useEffect(() => {
if (isFocusedSection) {
@ -289,7 +289,7 @@ const SkinViewer = memo(function SkinViewer({ username, setUsername, playClickSo
<button
data-focus="1" tabIndex={0}
onMouseEnter={() => isFocusedSection && setFocusIndex(1)}
onClick={() => { playClickSound(); setActiveView('skins'); }}
onClick={() => { playPressSound(); setActiveView('skins'); }}
className={`mc-sq-btn w-12 h-12 flex items-center justify-center outline-none border-none transition-all ${isFocusedSection && focusIndex === 1 ? 'scale-110' : ''}`}
style={isFocusedSection && focusIndex === 1 ? { backgroundImage: "url('/images/Button_Square_Highlighted.png')" } : {}}
title="Change Skin"
@ -300,7 +300,7 @@ const SkinViewer = memo(function SkinViewer({ username, setUsername, playClickSo
<button
data-focus="2" tabIndex={0}
onMouseEnter={() => isFocusedSection && setFocusIndex(2)}
onClick={() => { playClickSound(); setShowLayers(!showLayers); }}
onClick={() => { playPressSound(); setShowLayers(!showLayers); }}
className={`mc-sq-btn w-12 h-12 flex items-center justify-center outline-none border-none transition-all ${isFocusedSection && focusIndex === 2 ? 'scale-110' : ''}`}
style={isFocusedSection && focusIndex === 2 ? { backgroundImage: "url('/images/Button_Square_Highlighted.png')" } : {}}
title="Toggle Layers"
@ -312,7 +312,7 @@ const SkinViewer = memo(function SkinViewer({ username, setUsername, playClickSo
<button
data-focus="3" tabIndex={0}
onMouseEnter={() => isFocusedSection && setFocusIndex(3)}
onClick={() => { playClickSound(); setSkinUrl('/images/Default.png'); }}
onClick={() => { playPressSound(); setSkinUrl('/images/Default.png'); }}
className={`mc-sq-btn w-12 h-12 flex items-center justify-center outline-none border-none transition-all ${isFocusedSection && focusIndex === 3 ? 'scale-110' : ''}`}
style={isFocusedSection && focusIndex === 3 ? { backgroundImage: "url('/images/Button_Square_Highlighted.png')" } : {}}
title="Reset to Default"

10
src/components/layout/AppHeader.tsx
View file

@ -5,11 +5,11 @@ import { memo } from "react";
const appWindow = getCurrentWindow();
interface AppHeaderProps {
playClickSound: () => void;
playPressSound: () => void;
uiFade: any;
}
export const AppHeader = memo(function AppHeader({ playClickSound, uiFade }: AppHeaderProps) {
export const AppHeader = memo(function AppHeader({ playPressSound, uiFade }: AppHeaderProps) {
return (
<motion.div
key="header"
@ -34,7 +34,7 @@ export const AppHeader = memo(function AppHeader({ playClickSound, uiFade }: App
<div className="flex items-center gap-1 pr-2">
<button
onClick={() => {
playClickSound();
playPressSound();
appWindow.minimize();
}}
className="w-10 h-8 flex items-center justify-center text-gray-300 hover:text-white hover:bg-white/20 transition-all bg-transparent"
@ -54,7 +54,7 @@ export const AppHeader = memo(function AppHeader({ playClickSound, uiFade }: App
</button>
<button
onClick={() => {
playClickSound();
playPressSound();
appWindow.toggleMaximize();
}}
className="w-10 h-8 flex items-center justify-center text-gray-300 hover:text-white hover:bg-white/20 transition-all bg-transparent"
@ -74,7 +74,7 @@ export const AppHeader = memo(function AppHeader({ playClickSound, uiFade }: App
</button>
<button
onClick={() => {
playClickSound();
playPressSound();
appWindow.close();
}}
className="w-10 h-8 flex items-center justify-center text-gray-300 hover:text-white hover:bg-red-600 transition-all bg-transparent"

13
src/components/modals/CustomTUModal.tsx
View file

@ -5,7 +5,8 @@ export default function CustomTUModal({
isOpen,
onClose,
onImport,
playSfx,
playPressSound,
playBackSound,
editingEdition = null,
}: any) {
const [name, setName] = useState("");
@ -34,14 +35,14 @@ export default function CustomTUModal({
}
const handleKey = (e: KeyboardEvent) => {
if (e.key === "Escape") {
playSfx("close_click.wav");
playBackSound("close_click.wav");
onClose();
} else if (e.key === "Enter") {
if (focusIndex === 3) {
playSfx("close_click.wav");
playBackSound("close_click.wav");
onClose();
} else if (focusIndex === 4 || e.ctrlKey) {
playSfx("save_click.wav");
playPressSound("save_click.wav");
handleImport();
}
} else if (e.key === "ArrowDown" || e.key === "Tab") {
@ -152,7 +153,7 @@ export default function CustomTUModal({
<button
onMouseEnter={() => setFocusIndex(3)}
onClick={() => {
playSfx("close_click.wav");
playBackSound("close_click.wav");
onClose();
}}
className={`flex-1 h-12 flex items-center justify-center text-xl mc-text-shadow transition-all outline-none border-none bg-transparent ${focusIndex === 3 ? "text-[#FFFF55]" : "text-white"}`}
@ -167,7 +168,7 @@ export default function CustomTUModal({
<button
onMouseEnter={() => setFocusIndex(4)}
onClick={() => {
playSfx("save_click.wav");
playPressSound("save_click.wav");
handleImport();
}}
className={`flex-1 h-12 flex items-center justify-center text-xl mc-text-shadow transition-all outline-none border-none bg-transparent ${focusIndex === 4 ? "text-[#FFFF55]" : "text-white"}`}

6
src/components/modals/TeamModal.tsx
View file

@ -4,7 +4,7 @@ import { useState, useEffect } from "react";
export default function TeamModal({
isOpen,
onClose,
playClickSound,
playPressSound,
playSfx,
}: any) {
const [focusIndex, setFocusIndex] = useState(0);
@ -38,7 +38,7 @@ export default function TeamModal({
playSfx("close_click.wav");
onClose();
} else {
playClickSound();
playPressSound();
window.open(team[focusIndex].url, "_blank", "noopener,noreferrer");
}
}
@ -74,7 +74,7 @@ export default function TeamModal({
href={dev.url}
target="_blank"
rel="noopener noreferrer"
onClick={() => playClickSound()}
onClick={() => playPressSound()}
onMouseEnter={() => setFocusIndex(idx)}
className={`w-56 h-10 flex items-center justify-center mc-text-shadow text-xl transition-all outline-none border-none bg-transparent ${focusIndex === idx ? "text-[#FFFF55]" : "text-white"}`}
style={{

8
src/components/views/DevtoolsView.tsx
View file

@ -4,19 +4,19 @@ import { useUI, useAudio, useConfig } from "../../context/LauncherContext";
export default function DevtoolsView() {
const { setActiveView } = useUI();
const [backHover, setBackHover] = useState(false);
const { playBackSound } = useAudio();
const { playPressSound } = useAudio();
const [focusIndex] = useState<number | null>(null);
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape" || e.key === "Backspace") {
playBackSound();
playPressSound();
setActiveView("main");
}
};
window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown);
}, [playBackSound, setActiveView]);
}, [playPressSound, setActiveView]);
useEffect(() => {
if (focusIndex !== null) {
@ -57,7 +57,7 @@ export default function DevtoolsView() {
onMouseEnter={() => setBackHover(true)}
onMouseLeave={() => setBackHover(false)}
onClick={() => {
playBackSound();
playPressSound();
setActiveView("main");
}}
className={`w-72 h-12 flex items-center justify-center transition-colors text-2xl mc-text-shadow outline-none border-none hover:text-[#FFFF55] ${backHover ? "text-[#FFFF55]" : "text-white"}`}

10
src/components/views/HomeView.tsx
View file

@ -11,7 +11,7 @@ const HomeView = memo(function HomeView() {
const { setActiveView, setShowCredits, focusSection, onNavigateToSkin } =
useUI();
const { profile, legacyMode } = useConfig();
const { playClickSound, playSfx } = useAudio();
const { playPressSound, playSfx } = useAudio();
const {
handleLaunch,
isGameRunning,
@ -84,7 +84,7 @@ const HomeView = memo(function HomeView() {
};
window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown);
}, [menuFocus, buttons, playClickSound, isFocusedSection, onNavigateToSkin]);
}, [menuFocus, buttons, playPressSound, isFocusedSection, onNavigateToSkin]);
return (
<motion.div
@ -102,7 +102,7 @@ const HomeView = memo(function HomeView() {
onMouseLeave={() => setMenuFocus(null)}
onClick={() => {
if (isFocusedSection) {
playClickSound();
playPressSound();
btn.action();
}
}}
@ -127,7 +127,7 @@ const HomeView = memo(function HomeView() {
target="_blank"
rel="noopener noreferrer"
onClick={() => {
if (isFocusedSection) playClickSound();
if (isFocusedSection) playPressSound();
}}
className={`hover:scale-110 transition-transform ${!isFocusedSection ? "pointer-events-none" : ""}`}
>
@ -144,7 +144,7 @@ const HomeView = memo(function HomeView() {
target="_blank"
rel="noopener noreferrer"
onClick={() => {
if (isFocusedSection) playClickSound();
if (isFocusedSection) playPressSound();
}}
className={`hover:scale-110 transition-transform ${!isFocusedSection ? "pointer-events-none" : ""}`}
>

243
src/components/views/SettingsView.tsx
View file

@ -7,7 +7,7 @@ import { useUI, useConfig, useAudio, useGame } from "../../context/LauncherConte
const SettingsView = memo(function SettingsView() {
const { setActiveView } = useUI();
const { vfxEnabled, setVfxEnabled, animationsEnabled, setAnimationsEnabled, musicVol: musicVolume, setMusicVol: setMusicVolume, sfxVol: sfxVolume, setSfxVol: setSfxVolume, layout, setLayout, linuxRunner, setLinuxRunner, perfBoost, setPerfBoost, rpcEnabled, setRpcEnabled, legacyMode, setLegacyMode, keepLauncherOpen, setKeepLauncherOpen, enableTrayIcon, setEnableTrayIcon } = useConfig();
const { currentTrack, setCurrentTrack, tracks, playClickSound, playBackSound } = useAudio();
const { currentTrack, setCurrentTrack, tracks, playPressSound, playBackSound } = useAudio();
const { isGameRunning, stopGame, isRunnerDownloading, runnerDownloadProgress, downloadRunner } = useGame();
const { isLinux, isMac } = usePlatform();
const [focusIndex, setFocusIndex] = useState<number | null>(null);
@ -22,49 +22,49 @@ const SettingsView = memo(function SettingsView() {
}, [isRunnerDownloading]);
const handleLayoutToggle = () => {
playClickSound();
playPressSound();
const currentIndex = layouts.indexOf(layout);
const nextIndex = (currentIndex + 1) % layouts.length;
setLayout(layouts[nextIndex]);
};
const handleVfxToggle = () => {
playClickSound();
playPressSound();
setVfxEnabled(!vfxEnabled);
};
const handleAnimationsToggle = () => {
playClickSound();
playPressSound();
setAnimationsEnabled(!animationsEnabled);
};
const handlePerfToggle = () => {
playClickSound();
playPressSound();
setPerfBoost(!perfBoost);
};
const handleRpcToggle = () => {
playClickSound();
playPressSound();
setRpcEnabled(!rpcEnabled);
};
const handleLegacyToggle = () => {
playClickSound();
playPressSound();
setLegacyMode(!legacyMode);
};
const handleKeepOpenToggle = () => {
playClickSound();
playPressSound();
setKeepLauncherOpen(!keepLauncherOpen);
};
const handleTrayToggle = () => {
playClickSound();
playPressSound();
setEnableTrayIcon(!enableTrayIcon);
};
const handleRunnerToggle = () => {
playClickSound();
playPressSound();
if (runners.length === 0) return;
const currentIndex = runners.findIndex((r) => r.id === linuxRunner);
const nextIndex = (currentIndex + 1) % runners.length;
@ -72,12 +72,12 @@ const SettingsView = memo(function SettingsView() {
};
const handleTrackToggle = () => {
playClickSound();
playPressSound();
setCurrentTrack((currentTrack + 1) % tracks.length);
};
const handleResetSetup = () => {
playClickSound();
playPressSound();
// Create styled confirmation dialog
const dialog = document.createElement('div');
@ -207,27 +207,27 @@ const SettingsView = memo(function SettingsView() {
if (currentSubMenu === "main") {
items.push({
id: "audio_menu",
label: "Audio Settings",
label: "Audio",
type: "button",
onClick: () => { playClickSound(); setCurrentSubMenu("audio"); setFocusIndex(0); },
onClick: () => { playPressSound(); setCurrentSubMenu("audio"); setFocusIndex(0); },
});
items.push({
id: "video_menu",
label: "Video Settings",
label: "Video",
type: "button",
onClick: () => { playClickSound(); setCurrentSubMenu("video"); setFocusIndex(0); },
onClick: () => { playPressSound(); setCurrentSubMenu("video"); setFocusIndex(0); },
});
items.push({
id: "controls_menu",
label: "Controls",
type: "button",
onClick: () => { playClickSound(); setCurrentSubMenu("controls"); setFocusIndex(0); },
onClick: () => { playPressSound(); setCurrentSubMenu("controls"); setFocusIndex(0); },
});
items.push({
id: "launcher_menu",
label: "Launcher Settings",
label: "Launcher",
type: "button",
onClick: () => { playClickSound(); setCurrentSubMenu("launcher"); setFocusIndex(0); },
onClick: () => { playPressSound(); setCurrentSubMenu("launcher"); setFocusIndex(0); },
});
} else if (currentSubMenu === "audio") {
items.push({
@ -239,7 +239,7 @@ const SettingsView = memo(function SettingsView() {
});
items.push({
id: "sfx",
label: `SFX: ${sfxVolume ?? 100}%`,
label: `Sound: ${sfxVolume ?? 100}%`,
type: "slider",
value: sfxVolume ?? 100,
onChange: setSfxVolume,
@ -397,7 +397,7 @@ const SettingsView = memo(function SettingsView() {
handleResetSetup,
stopGame,
downloadRunner,
playClickSound,
playPressSound,
playBackSound,
setActiveView,
runners,
@ -469,6 +469,14 @@ const SettingsView = memo(function SettingsView() {
color: focusIndex === index ? "#FFFF55" : "white",
});
const isToggleOption = (label: string): boolean => {
return label.includes("ON") || label.includes("OFF") || label.includes("Enabled") || label.includes("Disabled");
};
const getToggleState = (label: string): boolean => {
return label.includes("ON") || label.includes("Enabled");
};
return (
<motion.div
ref={containerRef}
@ -480,72 +488,152 @@ const SettingsView = memo(function SettingsView() {
className="flex flex-col items-center w-full max-w-2xl outline-none"
>
<h2 className="text-2xl text-white mc-text-shadow mt-2 mb-4 border-b-2 border-[#373737] pb-2 w-[40%] max-w-[200px] text-center tracking-widest uppercase opacity-80 font-bold whitespace-nowrap px-4">
{currentSubMenu === "main" ? "Settings" : currentSubMenu === "audio" ? "Audio Settings" : currentSubMenu === "video" ? "Video Settings" : currentSubMenu === "controls" ? "Controls" : "Launcher"}
{currentSubMenu === "main" ? "Settings" : currentSubMenu === "audio" ? "Audio" : currentSubMenu === "video" ? "Video" : currentSubMenu === "controls" ? "Controls" : "Launcher"}
</h2>
<div className="w-full max-w-[540px] space-y-2 mb-4 p-6 flex flex-col items-center overflow-y-auto max-h-[55vh]">
{settingsItems.map((item, index) => {
if (item.id === "back") return null;
{currentSubMenu === "main" ? (
// Main settings menu - original style with button textures
<div className="w-full max-w-[540px] space-y-2 mb-4 p-6 flex flex-col items-center overflow-y-auto max-h-[55vh]">
{settingsItems.map((item, index) => {
if (item.id === "back") return null;
if (item.type === "slider") {
return (
<div
key={item.id}
data-index={index}
tabIndex={0}
onMouseEnter={() => setFocusIndex(index)}
className="relative w-[360px] h-10 flex items-center justify-center cursor-pointer transition-all outline-none border-none hover:text-[#FFFF55] shrink-0"
style={getSliderStyle(index)}
>
<span
className={`absolute z-10 text-xl mc-text-shadow pointer-events-none transition-colors tracking-widest ${focusIndex === index ? "text-[#FFFF55]" : "text-white"}`}
>
{item.label}
</span>
<div className="absolute w-full h-full flex items-center justify-center">
<input
type="range"
min="0"
max="100"
step="1"
value={item.value}
onChange={(e) => item.onChange(parseInt(e.target.value))}
onMouseUp={playPressSound}
className="mc-slider-custom w-[calc(100%+16px)] h-full opacity-100 cursor-pointer z-20 outline-none m-0"
/>
</div>
</div>
);
}
const isRed = (item as any).color === "red";
const isSmall = (item as any).small;
if (item.type === "slider") {
return (
<div
<button
key={item.id}
data-index={index}
tabIndex={0}
onMouseEnter={() => setFocusIndex(index)}
className="relative w-[360px] h-10 flex items-center justify-center cursor-pointer transition-all outline-none border-none hover:text-[#FFFF55] shrink-0"
style={getSliderStyle(index)}
onClick={item.onClick}
className={`w-[360px] h-10 flex items-center justify-center px-4 relative z-30 transition-colors outline-none border-none shrink-0 ${isRed
? focusIndex === index
? "text-red-400"
: "text-red-200"
: focusIndex === index
? "text-[#FFFF55]"
: "text-white"
} ${isRed ? "hover:text-red-500" : "hover:text-[#FFFF55]"}`}
style={getItemStyle(index)}
>
<span
className={`absolute z-10 text-xl mc-text-shadow pointer-events-none transition-colors tracking-widest ${focusIndex === index ? "text-[#FFFF55]" : "text-white"}`}
className={`mc-text-shadow tracking-widest uppercase ${isSmall ? "text-xs" : item.label.length > 20 ? "text-lg" : "text-xl"} truncate w-full text-center`}
>
{item.label}
</span>
<div className="absolute w-full h-full flex items-center justify-center">
<input
type="range"
min="0"
max="100"
step="1"
value={item.value}
onChange={(e) => item.onChange(parseInt(e.target.value))}
onMouseUp={playClickSound}
className="mc-slider-custom w-[calc(100%+16px)] h-full opacity-100 cursor-pointer z-20 outline-none m-0"
/>
</div>
</div>
</button>
);
}
})}
</div>
) : (
// Sub-menus - new style with background.png and toggle switches
<div
className="min-w-[420px] w-fit p-6 flex flex-col items-center"
style={{
backgroundImage: "url('/images/background.png')",
backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat",
imageRendering: "pixelated",
}}
>
<div className="w-full space-y-3 flex flex-col items-center overflow-y-auto max-h-[50vh] py-2">
{settingsItems.map((item, index) => {
if (item.id === "back") return null;
const isRed = (item as any).color === "red";
const isSmall = (item as any).small;
if (item.type === "slider") {
return (
<div
key={item.id}
data-index={index}
tabIndex={0}
onMouseEnter={() => setFocusIndex(index)}
className="relative w-[360px] h-10 flex items-center justify-center cursor-pointer transition-all outline-none border-none hover:text-[#FFFF55] shrink-0"
style={getSliderStyle(index)}
>
<span
className={`absolute z-10 text-xl pointer-events-none transition-colors tracking-widest ${focusIndex === index ? "text-[#FFFF55]" : item.id === "music" || item.id === "sfx" ? "text-white" : "text-[#2a2a2a]"}`}
>
{item.label}
</span>
<div className="absolute w-full h-full flex items-center justify-center">
<input
type="range"
min="0"
max="100"
step="1"
value={item.value}
onChange={(e) => item.onChange(parseInt(e.target.value))}
onMouseUp={playPressSound}
className="mc-slider-custom w-[calc(100%+16px)] h-full opacity-100 cursor-pointer z-20 outline-none m-0"
/>
</div>
</div>
);
}
return (
<button
key={item.id}
data-index={index}
onMouseEnter={() => setFocusIndex(index)}
onClick={item.onClick}
className={`w-[360px] h-10 flex items-center justify-center px-4 relative z-30 transition-colors outline-none border-none shrink-0 ${isRed
? focusIndex === index
? "text-red-400"
: "text-red-200"
: focusIndex === index
? "text-[#FFFF55]"
: "text-white"
} ${isRed ? "hover:text-red-500" : "hover:text-[#FFFF55]"}`}
style={getItemStyle(index)}
>
<span
className={`mc-text-shadow tracking-widest uppercase ${isSmall ? "text-xs" : item.label.length > 20 ? "text-lg" : "text-xl"} truncate w-full text-center`}
>
{item.label}
</span>
</button>
);
})}
</div>
const isRed = (item as any).color === "red";
const isSmall = (item as any).small;
const isToggle = isToggleOption(item.label);
const toggleState = isToggle ? getToggleState(item.label) : false;
return (
<button
key={item.id}
data-index={index}
onMouseEnter={() => setFocusIndex(index)}
onClick={item.onClick}
className={`w-[360px] h-10 flex items-center justify-between px-4 relative z-30 transition-all outline-none border-none shrink-0 rounded ${focusIndex === index ? "bg-black/10" : "bg-transparent"} ${isRed ? "text-red-600" : "text-[#2a2a2a]"} hover:bg-black/15`}
>
<span
className={`tracking-widest uppercase ${isSmall ? "text-xs" : item.label.length > 25 ? "text-base" : "text-lg"} truncate text-left flex-1`}
>
{isToggle ? item.label.split(":")[0] : item.label}
</span>
{isToggle && (
<img
src={toggleState ? "/images/Toggle_Switch_On.png" : "/images/Toggle_Switch_Off.png"}
alt={toggleState ? "ON" : "OFF"}
className="w-12 h-6 object-contain shrink-0 ml-2"
style={{ imageRendering: "pixelated" }}
/>
)}
</button>
);
})}
</div>
</div>
)}
{(() => {
const backIndex = settingsItems.findIndex((i) => i.id === "back");
@ -557,9 +645,14 @@ const SettingsView = memo(function SettingsView() {
data-index={backIndex}
onMouseEnter={() => setFocusIndex(backIndex)}
onClick={backItem.onClick}
className={`w-72 h-10 flex items-center justify-center transition-colors text-xl mc-text-shadow outline-none border-none hover:text-[#FFFF55] ${focusIndex === backIndex ? "text-[#FFFF55]" : "text-white"
}`}
style={getItemStyle(backIndex)}
className={`w-72 h-10 flex items-center justify-center transition-colors text-xl mc-text-shadow outline-none border-none hover:text-[#FFFF55] mt-4 ${focusIndex === backIndex ? "text-[#FFFF55]" : "text-white"}`}
style={{
backgroundImage: focusIndex === backIndex
? "url('/images/button_highlighted.png')"
: "url('/images/Button_Background.png')",
backgroundSize: "100% 100%",
imageRendering: "pixelated",
}}
>
Back
</button>

26
src/components/views/SetupView.tsx
View file

@ -25,7 +25,7 @@ const SetupView: React.FC<SetupViewProps> = ({ onComplete }) => {
rpcEnabled: configRpc,
keepLauncherOpen: configKeepOpen
} = useConfig();
const { playClickSound, playSfx } = useAudio();
const { playPressSound, playSfx } = useAudio();
const { editions } = useGame();
const titleImage = editions.find(e => e.id === profile)?.titleImage || "/images/MenuTitle.png";
@ -103,12 +103,12 @@ const SetupView: React.FC<SetupViewProps> = ({ onComplete }) => {
};
const handleRunnerSelect = (runnerId: string) => {
playClickSound();
playPressSound();
setSelectedRunner(runnerId);
};
const handleNext = async () => {
playClickSound();
playPressSound();
if (currentStep === 0) {
setUsername(tempUsername);
@ -136,7 +136,7 @@ const SetupView: React.FC<SetupViewProps> = ({ onComplete }) => {
};
const handleBack = () => {
playClickSound();
playPressSound();
if (currentStep > 0) {
setCurrentStep(currentStep - 1);
setFocusIndex(0);
@ -180,10 +180,10 @@ const SetupView: React.FC<SetupViewProps> = ({ onComplete }) => {
else if (focusIndex === 1) handleNext();
}
} else if (currentStep === 2) {
if (focusIndex === 0) { setEnableTrayIcon(!enableTrayIcon); playClickSound(); }
else if (focusIndex === 1) { setEnableVfx(!enableVfx); playClickSound(); }
else if (focusIndex === 2) { setEnableDiscordRPC(!enableDiscordRPC); playClickSound(); }
else if (focusIndex === 3) { setKeepLauncherOpen(!keepLauncherOpen); playClickSound(); }
if (focusIndex === 0) { setEnableTrayIcon(!enableTrayIcon); playPressSound(); }
else if (focusIndex === 1) { setEnableVfx(!enableVfx); playPressSound(); }
else if (focusIndex === 2) { setEnableDiscordRPC(!enableDiscordRPC); playPressSound(); }
else if (focusIndex === 3) { setKeepLauncherOpen(!keepLauncherOpen); playPressSound(); }
else if (focusIndex === 4) handleBack();
else if (focusIndex === 5) handleNext();
} else if (currentStep === 3) {
@ -197,7 +197,7 @@ const SetupView: React.FC<SetupViewProps> = ({ onComplete }) => {
}, [currentStep, focusIndex, runners, enableTrayIcon, enableVfx, enableDiscordRPC, keepLauncherOpen, isLinux, isMac, tempUsername]);
const handleMacosSetup = async () => {
playClickSound();
playPressSound();
setIsSettingUpRuntime(true);
setSetupProgress({ stage: "preparing", message: "Preparing macOS runtime setup...", percent: 0 });
@ -444,7 +444,7 @@ const SetupView: React.FC<SetupViewProps> = ({ onComplete }) => {
</div>
<button
onClick={() => {
playClickSound();
playPressSound();
setEnableTrayIcon(!enableTrayIcon);
}}
onMouseEnter={() => setFocusIndex(0)}
@ -468,7 +468,7 @@ const SetupView: React.FC<SetupViewProps> = ({ onComplete }) => {
</div>
<button
onClick={() => {
playClickSound();
playPressSound();
setEnableVfx(!enableVfx);
}}
onMouseEnter={() => setFocusIndex(1)}
@ -492,7 +492,7 @@ const SetupView: React.FC<SetupViewProps> = ({ onComplete }) => {
</div>
<button
onClick={() => {
playClickSound();
playPressSound();
setEnableDiscordRPC(!enableDiscordRPC);
}}
onMouseEnter={() => setFocusIndex(2)}
@ -516,7 +516,7 @@ const SetupView: React.FC<SetupViewProps> = ({ onComplete }) => {
</div>
<button
onClick={() => {
playClickSound();
playPressSound();
setKeepLauncherOpen(!keepLauncherOpen);
}}
onMouseEnter={() => setFocusIndex(3)}

24
src/components/views/SkinsView.tsx
View file

@ -23,7 +23,7 @@ const DEFAULT_SKINS: SavedSkin[] = [
const SkinsView = memo(function SkinsView() {
const { setActiveView } = useUI();
const { playClickSound, playBackSound } = useAudio();
const { playPressSound, playBackSound } = useAudio();
const { skinUrl, setSkinUrl } = useSkin();
const [focusIndex, setFocusIndex] = useState<number | null>(null);
@ -76,7 +76,7 @@ const SkinsView = memo(function SkinsView() {
const handleFetchUsername = async () => {
if (!importUsername.trim()) return;
playClickSound();
playPressSound();
setIsImporting(true);
setImportError('');
try {
@ -123,8 +123,8 @@ const SkinsView = memo(function SkinsView() {
setModalFocusIndex(prev => (prev - 1 + 3) % 3);
} else if (e.key === 'Enter') {
if (!importMode) {
if (modalFocusIndex === 0) { playClickSound(); fileInputRef.current?.click(); }
else if (modalFocusIndex === 1) { playClickSound(); setImportMode('username'); setModalFocusIndex(0); }
if (modalFocusIndex === 0) { playPressSound(); fileInputRef.current?.click(); }
else if (modalFocusIndex === 1) { playPressSound(); setImportMode('username'); setModalFocusIndex(0); }
else if (modalFocusIndex === 2) {
playBackSound();
setShowImportModal(false);
@ -173,7 +173,7 @@ const SkinsView = memo(function SkinsView() {
} else if (e.key === 'Enter' && focusIndex !== null) {
if (focusIndex === 0) handleImportClick();
else if (focusIndex === 1) handleDeleteActive();
else if (focusIndex === 2) { playClickSound(); TauriService.openInstanceFolder('Skins').catch(() => { }); }
else if (focusIndex === 2) { playPressSound(); TauriService.openInstanceFolder('Skins').catch(() => { }); }
else if (focusIndex < BACK_BUTTON_INDEX) {
handleSkinSelect(savedSkins[focusIndex - SKINS_START_INDEX]);
} else {
@ -184,7 +184,7 @@ const SkinsView = memo(function SkinsView() {
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [focusIndex, savedSkins.length, playBackSound, setActiveView, playClickSound, showImportModal, importMode, modalFocusIndex, importUsername]);
}, [focusIndex, savedSkins.length, playBackSound, setActiveView, playPressSound, showImportModal, importMode, modalFocusIndex, importUsername]);
useEffect(() => {
if (focusIndex !== null) {
@ -194,7 +194,7 @@ const SkinsView = memo(function SkinsView() {
}, [focusIndex]);
const handleImportClick = () => {
playClickSound();
playPressSound();
setShowImportModal(true);
setModalFocusIndex(0);
};
@ -217,7 +217,7 @@ const SkinsView = memo(function SkinsView() {
};
const handleSkinSelect = (skin: SavedSkin) => {
playClickSound();
playPressSound();
setActiveSkinId(skin.id);
setSkinUrl(skin.url);
};
@ -226,7 +226,7 @@ const SkinsView = memo(function SkinsView() {
const handleDeleteActive = () => {
if (!activeSkinId || isDefaultSkin(activeSkinId)) return;
playClickSound();
playPressSound();
const updatedSkins = savedSkins.filter(s => s.id !== activeSkinId);
setSavedSkins(updatedSkins);
setSkinUrl('/images/Default.png');
@ -278,7 +278,7 @@ const SkinsView = memo(function SkinsView() {
<button
data-index="2"
onMouseEnter={() => setFocusIndex(2)}
onClick={() => { playClickSound(); TauriService.openInstanceFolder('Skins').catch(() => { }); }}
onClick={() => { playPressSound(); TauriService.openInstanceFolder('Skins').catch(() => { }); }}
className={`mc-sq-btn w-10 h-10 flex items-center justify-center outline-none border-none transition-all`}
style={{ backgroundImage: focusIndex === 2 ? "url('/images/Button_Square_Highlighted.png')" : "url('/images/Button_Square.png')", backgroundSize: '100% 100%', imageRendering: 'pixelated' }}
>
@ -337,7 +337,7 @@ const SkinsView = memo(function SkinsView() {
<div className="flex flex-col gap-4 w-full px-4 mb-2">
<button
onMouseEnter={() => setModalFocusIndex(0)}
onClick={() => { playClickSound(); fileInputRef.current?.click(); }}
onClick={() => { playPressSound(); fileInputRef.current?.click(); }}
className={`w-full h-12 flex items-center justify-center transition-colors text-xl mc-text-shadow outline-none ${modalFocusIndex === 0 ? 'text-[#FFFF55]' : 'text-white'}`}
style={{ backgroundImage: modalFocusIndex === 0 ? "url('/images/button_highlighted.png')" : "url('/images/Button_Background.png')", backgroundSize: '100% 100%', imageRendering: 'pixelated' }}
>
@ -345,7 +345,7 @@ const SkinsView = memo(function SkinsView() {
</button>
<button
onMouseEnter={() => setModalFocusIndex(1)}
onClick={() => { playClickSound(); setImportMode('username'); setModalFocusIndex(0); }}
onClick={() => { playPressSound(); setImportMode('username'); setModalFocusIndex(0); }}
className={`w-full h-12 flex items-center justify-center transition-colors text-xl mc-text-shadow outline-none ${modalFocusIndex === 1 ? 'text-[#FFFF55]' : 'text-white'}`}
style={{ backgroundImage: modalFocusIndex === 1 ? "url('/images/button_highlighted.png')" : "url('/images/Button_Background.png')", backgroundSize: '100% 100%', imageRendering: 'pixelated' }}
>

30
src/components/views/VersionsView.tsx
View file

@ -7,7 +7,7 @@ import { useUI, useConfig, useAudio, useGame } from "../../context/LauncherConte
const VersionsView = memo(function VersionsView() {
const { setActiveView } = useUI();
const { profile: selectedProfile, setProfile: setSelectedProfile } = useConfig();
const { playClickSound, playBackSound, playSfx } = useAudio();
const { playPressSound, playBackSound, playSfx } = useAudio();
const { editions, installs: installedVersions, toggleInstall, handleUninstall: onUninstall, deleteCustomEdition: onDeleteEdition, addCustomEdition: onAddEdition, updateCustomEdition: onUpdateEdition, downloadingId, downloadProgress } = useGame();
const [focusRow, setFocusRow] = useState<number>(0);
@ -54,21 +54,21 @@ const VersionsView = memo(function VersionsView() {
if (focusCol === 0) {
if (isInstalled) {
playClickSound();
playPressSound();
setSelectedProfile(edition.id);
} else if (!downloadingId) {
playClickSound();
playPressSound();
toggleInstall(edition.id);
}
} else if (focusCol === 1 && !downloadingId) {
playClickSound();
playPressSound();
toggleInstall(edition.id);
} else if (focusCol === 2) {
if (isInstalled) {
playClickSound();
playPressSound();
TauriService.openInstanceFolder(edition.id);
} else if (isCustom) {
playClickSound();
playPressSound();
setEditingEdition(edition);
setIsImportModalOpen(true);
}
@ -82,7 +82,7 @@ const VersionsView = memo(function VersionsView() {
}
} else if (focusCol === 4) {
if (isCustom) {
playClickSound();
playPressSound();
setEditingEdition(edition);
setIsImportModalOpen(true);
}
@ -93,7 +93,7 @@ const VersionsView = memo(function VersionsView() {
}
}
} else if (focusRow === editions.length) {
playClickSound();
playPressSound();
setIsImportModalOpen(true);
} else {
playBackSound();
@ -108,7 +108,7 @@ const VersionsView = memo(function VersionsView() {
focusCol,
editions,
installedVersions,
playClickSound,
playPressSound,
playBackSound,
setSelectedProfile,
setActiveView,
@ -169,7 +169,7 @@ const VersionsView = memo(function VersionsView() {
}}
onClick={() => {
if (isInstalled) {
playClickSound();
playPressSound();
setSelectedProfile(edition.id);
} else {
toggleInstall(edition.id);
@ -208,7 +208,7 @@ const VersionsView = memo(function VersionsView() {
onClick={(e) => {
e.stopPropagation();
if (!downloadingId) {
playClickSound();
playPressSound();
toggleInstall(edition.id);
}
}}
@ -251,7 +251,7 @@ const VersionsView = memo(function VersionsView() {
onClick={(e) => {
e.stopPropagation();
if (!downloadingId) {
playClickSound();
playPressSound();
toggleInstall(edition.id);
}
}}
@ -291,7 +291,7 @@ const VersionsView = memo(function VersionsView() {
}}
onClick={(e) => {
e.stopPropagation();
playClickSound();
playPressSound();
TauriService.openInstanceFolder(edition.id);
}}
className="mc-sq-btn w-10 h-10 flex items-center justify-center outline-none border-none transition-all"
@ -365,7 +365,7 @@ const VersionsView = memo(function VersionsView() {
}}
onClick={(e) => {
e.stopPropagation();
playClickSound();
playPressSound();
setEditingEdition(edition);
setIsImportModalOpen(true);
}}
@ -449,7 +449,7 @@ const VersionsView = memo(function VersionsView() {
setFocusCol(0);
}}
onClick={() => {
playClickSound();
playPressSound();
setIsImportModalOpen(true);
}}
className={`w-72 h-14 flex items-center justify-center transition-colors text-2xl mc-text-shadow outline-none border-none ${focusRow === editions.length ? "text-[#FFFF55]" : "text-white"}`}

8
src/components/views/WorkshopView.tsx
View file

@ -4,19 +4,19 @@ import { useUI, useAudio, useConfig } from '../../context/LauncherContext';
const WorkshopView = memo(function WorkshopView() {
const { setActiveView } = useUI();
const { playBackSound } = useAudio();
const { playPressSound } = useAudio();
const [backHover, setBackHover] = useState(false);
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape' || e.key === 'Backspace') {
playBackSound();
playPressSound();
setActiveView('main');
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [playBackSound, setActiveView]);
}, [playPressSound, setActiveView]);
return (
<motion.div tabIndex={0} initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.95 }} transition={{ duration: useConfig().animationsEnabled ? 0.3 : 0 }} className="flex flex-col items-center w-full max-w-4xl outline-none"
@ -30,7 +30,7 @@ const WorkshopView = memo(function WorkshopView() {
<button
onMouseEnter={() => setBackHover(true)}
onMouseLeave={() => setBackHover(false)}
onClick={() => { playBackSound(); setActiveView('main'); }}
onClick={() => { playPressSound(); setActiveView('main'); }}
className={`w-72 h-12 flex items-center justify-center transition-colors text-2xl mc-text-shadow outline-none border-none hover:text-[#FFFF55] ${backHover ? 'text-[#FFFF55]' : 'text-white'}`}
style={{
backgroundImage: backHover ? "url('/images/button_highlighted.png')" : "url('/images/Button_Background.png')",

4
src/hooks/useAudioController.ts
View file

@ -41,7 +41,7 @@ export function useAudioController({ musicVol, sfxVol, showIntro, isGameRunning,
a.play().catch(() => { });
}, [sfxVol]);
const playClickSound = useCallback(() => playSfx("click.wav"), [playSfx]);
const playPressSound = useCallback(() => playSfx("press.wav"), [playSfx]);
const playBackSound = useCallback(() => playSfx("back.ogg"), [playSfx]);
const playSplashSound = useCallback(() => playSfx("orb.ogg"), [playSfx]);
@ -174,7 +174,7 @@ export function useAudioController({ musicVol, sfxVol, showIntro, isGameRunning,
splashIndex,
setSplashIndex,
cycleSplash,
playClickSound,
playPressSound,
playBackSound,
playSfx,
tracks: TRACKS,

8
src/pages/App.tsx
View file

@ -130,7 +130,7 @@ export default function App() {
<TeamModal
isOpen={showCredits}
onClose={() => setShowCredits(false)}
playClickSound={audio.playClickSound}
playPressSound={audio.playPressSound}
playSfx={audio.playSfx}
/>
)}
@ -202,7 +202,7 @@ export default function App() {
>
<button
onClick={() => {
audio.playClickSound();
audio.playPressSound();
setIsUiHidden(!isUiHidden);
}}
className="hover:scale-110 active:scale-95 transition-transform outline-none bg-transparent border-none"
@ -231,7 +231,7 @@ export default function App() {
</span>
<button
onClick={() => {
audio.playClickSound();
audio.playPressSound();
config.setIsDayTime(!config.isDayTime);
}}
className="hover:scale-110 active:scale-95 transition-transform outline-none bg-transparent border-none"
@ -310,7 +310,7 @@ export default function App() {
key="skin-viewer"
username={config.username}
setUsername={config.setUsername}
playClickSound={audio.playClickSound}
playPressSound={audio.playPressSound}
skinUrl={skinUrl}
setSkinUrl={setSkinUrl}
setActiveView={setActiveView}