LCE-Hub-Mirrors/LCE-Emerald-Launcher
1
2
Fork 0
mirror of https://github.com/LCE-Hub/LCE-Emerald-Launcher.git synced 2026-07-23 02:37:13 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: ui issues

Browse source
This commit is contained in:
neoapps-dev 2026-06-08 16:30:02 +03:00
parent 1740975b3c
commit 31dc2b2548
7 changed files with 63 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/common/CinematicIntro.tsx
View file

@ -77,7 +77,7 @@ export function CinematicIntro({ onComplete, startMusic }: CinematicIntroProps)
<motion.img
key="esrb"
src="/images/esrb_warning.png"
className="max-w-3xl object-contain"
className="w-full max-w-6xl object-contain px-8"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}

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

@ -40,6 +40,8 @@ const SettingsView = memo(function SettingsView() {
setLaunchPrefix,
launchEnvVars,
setLaunchEnvVars,
skipIntro,
setSkipIntro,
} = useConfig();
const {
currentTrack,
@ -117,6 +119,11 @@ const SettingsView = memo(function SettingsView() {
setMangohudEnabled(!mangohudEnabled);
};
const handleSkipIntroToggle = () => {
playPressSound();
setSkipIntro(!skipIntro);
};
const handleRunnerToggle = () => {
playPressSound();
if (runners.length === 0) return;
@ -415,6 +422,12 @@ const SettingsView = memo(function SettingsView() {
type: "button",
onClick: handleRpcToggle,
});
items.push({
id: "skip_intro",
label: `Skip Intro: ${skipIntro ? "ON" : "OFF"}`,
type: "button",
onClick: handleSkipIntroToggle,
});
items.push({
id: "legacy",
label: `Legacy Mode: ${legacyMode ? "ON" : "OFF"}`,
@ -540,6 +553,7 @@ const SettingsView = memo(function SettingsView() {
handleRunnerToggle,
handlePerfToggle,
handleMangohudToggle,
handleSkipIntroToggle,
handleResetSetup,
stopGame,
downloadRunner,
@ -550,6 +564,7 @@ const SettingsView = memo(function SettingsView() {
extraLaunchArgs,
launchPrefix,
launchEnvVars,
skipIntro,
]);
useEffect(() => {
@ -652,7 +667,7 @@ const SettingsView = memo(function SettingsView() {
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
transition={{ duration: animationsEnabled ? 0.3 : 0 }}
className="flex flex-col items-center w-full max-w-3xl outline-none"
className="flex flex-col items-center w-full max-w-5xl 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"
@ -669,7 +684,7 @@ const SettingsView = memo(function SettingsView() {
</h2>
{currentSubMenu === "main" ? (
<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]">
<div className="w-full max-w-[680px] space-y-2 mb-4 p-6 flex flex-col items-center overflow-y-auto max-h-[55vh] settings-scrollbar">
{settingsItems.map((item, index) => {
if (item.id === "back") return null;
@ -680,7 +695,7 @@ const SettingsView = memo(function SettingsView() {
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-[#ffff00] shrink-0"
className="relative w-[480px] h-10 flex items-center justify-center cursor-pointer transition-all outline-none border-none hover:text-[#ffff00] shrink-0"
style={getSliderStyle(index)}
>
<span
@ -715,7 +730,7 @@ const SettingsView = memo(function SettingsView() {
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 ${
className={`w-[480px] 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"
@ -736,8 +751,8 @@ const SettingsView = memo(function SettingsView() {
})}
</div>
) : (
<div className="min-w-[420px] w-fit p-4 flex flex-col items-center mc-options-bg">
<div className="w-full space-y-3 flex flex-col items-center overflow-y-auto max-h-[50vh] py-2">
<div className="min-w-[640px] w-fit p-4 flex flex-col items-center mc-options-bg">
<div className="w-full space-y-3 flex flex-col items-center overflow-y-auto max-h-[50vh] py-2 settings-scrollbar">
{settingsItems.map((item, index) => {
if (item.id === "back") return null;
@ -748,7 +763,7 @@ const SettingsView = memo(function SettingsView() {
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-[#ffff00] shrink-0"
className="relative w-[600px] h-10 flex items-center justify-center cursor-pointer transition-all outline-none border-none hover:text-[#ffff00] shrink-0"
style={getSliderStyle(index)}
>
<span
@ -785,7 +800,7 @@ const SettingsView = memo(function SettingsView() {
data-index={index}
onMouseEnter={() => setFocusIndex(index)}
onClick={item.onClick}
className={`w-[360px] h-10 flex items-center pl-1.5 pr-4 relative z-30 outline-none border-none shrink-0 rounded ${focusIndex === index ? "text-[#ffff00]" : isRed ? "text-red-600" : "text-[#333333]"}`}
className={`w-[600px] h-10 flex items-center pl-1.5 pr-4 relative z-30 outline-none border-none shrink-0 rounded ${focusIndex === index ? "text-[#ffff00]" : isRed ? "text-red-600" : "text-[#333333]"}`}
>
{isToggle && (
<div className="relative w-6 h-6 mr-3 shrink-0">

9
src/context/LauncherContext.tsx
View file

@ -65,7 +65,8 @@ export function LauncherProvider({ children }: { children: React.ReactNode }) {
configRaw.rpcEnabled, configRaw.musicVol, configRaw.sfxVol, configRaw.isDayTime,
configRaw.profile, configRaw.linuxRunner, configRaw.perfBoost, configRaw.customEditions,
configRaw.legacyMode, configRaw.animationsEnabled, configRaw.mangohudEnabled,
configRaw.extraLaunchArgs, configRaw.launchPrefix, configRaw.launchEnvVars, configRaw.startFullscreen
configRaw.extraLaunchArgs, configRaw.launchPrefix, configRaw.launchEnvVars, configRaw.startFullscreen,
configRaw.skipIntro,
]);
const game = useMemo(() => gameRaw, [
@ -134,7 +135,8 @@ export function LauncherProvider({ children }: { children: React.ReactNode }) {
extraLaunchArgs: config.extraLaunchArgs,
launchPrefix: config.launchPrefix,
launchEnvVars: config.launchEnvVars,
startFullscreen: config.startFullscreen
startFullscreen: config.startFullscreen,
skipIntro: config.skipIntro,
}).catch(console.error);
}
}, [
@ -143,7 +145,8 @@ export function LauncherProvider({ children }: { children: React.ReactNode }) {
config.vfxEnabled, config.animationsEnabled,
config.rpcEnabled, config.musicVol, config.sfxVol, config.legacyMode,
config.mangohudEnabled, config.extraLaunchArgs, config.launchPrefix,
config.launchEnvVars, config.isLoaded, config.startFullscreen
config.launchEnvVars, config.isLoaded, config.startFullscreen,
config.skipIntro,
]);
useEffect(() => {

19
src/css/index.css
View file

@ -207,6 +207,25 @@ body {
min-height: 44px;
}
.settings-scrollbar::-webkit-scrollbar {
width: 6px;
}
.settings-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.settings-scrollbar::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 3px;
min-height: 44px;
}
.settings-scrollbar {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.no-animations * {
transition: none !important;
animation: none !important;

7
src/hooks/useAppConfig.ts
View file

@ -24,6 +24,7 @@ export function useAppConfig() {
const [extraLaunchArgs, setExtraLaunchArgs] = useState<string[] | undefined>();
const [launchPrefix, setLaunchPrefix] = useState<string | undefined>();
const [launchEnvVars, setLaunchEnvVars] = useState<Record<string, string> | undefined>();
const [skipIntro, setSkipIntro] = useLocalStorage("lce-skip-intro", false);
useEffect(() => {
TauriService.loadConfig().then((config) => {
if (config.username) setUsername(config.username);
@ -45,6 +46,7 @@ export function useAppConfig() {
if (config.extraLaunchArgs) setExtraLaunchArgs(config.extraLaunchArgs);
if (config.launchPrefix) setLaunchPrefix(config.launchPrefix);
if (config.launchEnvVars) setLaunchEnvVars(config.launchEnvVars);
if (config.skipIntro !== undefined) setSkipIntro(config.skipIntro);
setIsLoaded(true);
});
}, []);
@ -70,9 +72,10 @@ export function useAppConfig() {
extraLaunchArgs,
launchPrefix,
launchEnvVars,
skipIntro,
}).catch(console.error);
}
}, [username, theme, linuxRunner, perfBoost, profile, customEditions, customizations, animationsEnabled, vfxEnabled, rpcEnabled, startFullscreen, musicVol, sfxVol, legacyMode, mangohudEnabled, extraLaunchArgs, launchPrefix, launchEnvVars, isLoaded]);
}, [username, theme, linuxRunner, perfBoost, profile, customEditions, customizations, animationsEnabled, vfxEnabled, rpcEnabled, startFullscreen, musicVol, sfxVol, legacyMode, mangohudEnabled, extraLaunchArgs, launchPrefix, launchEnvVars, skipIntro, isLoaded]);
return {
username,
@ -118,5 +121,7 @@ export function useAppConfig() {
setLaunchPrefix,
launchEnvVars,
setLaunchEnvVars,
skipIntro,
setSkipIntro,
};
}

9
src/pages/App.tsx
View file

@ -70,7 +70,12 @@ export default function App() {
const clearError = useCallback(() => game.setError(null), [game]);
const clearGameUpdate = useCallback(() => game.setGameUpdateMessage(null), [game]);
const clearSteamSuccess = useCallback(() => game.setSteamSuccessMessage(null), [game]);
useEffect(() => {
if (showIntro && config.skipIntro) {
setShowIntro(false);
}
}, [showIntro, config.skipIntro, setShowIntro]);
useEffect(() => {
if (config.isLoaded) {
@ -126,7 +131,7 @@ export default function App() {
);
}
if (showIntro) {
if (showIntro && !config.skipIntro) {
return (
<div className={`w-screen h-screen overflow-hidden select-none flex flex-col relative bg-black text-white font-['Mojangles'] outline-none focus:outline-none ${!config.animationsEnabled ? "no-animations" : ""}`}>
<CinematicIntro

1
src/services/TauriService.ts
View file

@ -46,6 +46,7 @@ export interface AppConfig {
launchPrefix?: string;
launchEnvVars?: Record<string, string>;
customizations?: Record<string, { titleImage?: string; panorama?: string }>;
skipIntro?: boolean;
}
export interface ThemePalette {