feat: minor ui improvements

This commit is contained in:
neoapps-dev
2026-08-30 23:21:22 +03:00
parent effc859146
commit 7c566e3ff0
6 changed files with 38 additions and 54 deletions
+15 -28
View File
@@ -5,9 +5,6 @@ import {
type GoldMapperMapping,
} from "../../services/TauriService";
import { useUI, useConfig, useAudio } from "../../context/LauncherContext";
const EMERALD_ICON = "/images/emerald_0.png";
const KEY_FALLBACK = [
"KEY_A",
"KEY_D",
@@ -21,7 +18,6 @@ const KEY_FALLBACK = [
];
const MOUSE_IDS = ["MOUSE_LEFT", "MOUSE_MIDDLE", "MOUSE_RIGHT"];
const MOUSE_LABELS: Record<string, string> = {
MOUSE_LEFT: "Left Click",
MOUSE_MIDDLE: "Middle Click",
@@ -81,7 +77,6 @@ const GoldMapperView = memo(function GoldMapperView() {
const [keyInputError, setKeyInputError] = useState<string | null>(null);
const [focusIndex, setFocusIndex] = useState<number | null>(null);
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
TauriService.goldMapperGetDefaults()
.then((defaults) => {
@@ -112,11 +107,7 @@ const GoldMapperView = memo(function GoldMapperView() {
.catch(console.error);
}, []);
const getTo = useCallback(
(id: string) => binds[id] ?? id,
[binds],
);
const getTo = useCallback((id: string) => binds[id] ?? id, [binds]);
const buildPayload = useCallback(
(nextBinds: Record<string, string>): GoldMapperMapping[] => {
const rows: GoldMapperMapping[] = [];
@@ -154,9 +145,7 @@ const GoldMapperView = memo(function GoldMapperView() {
playPressSound();
setEditing(id);
setModalFocusIndex(0);
setKeyInput(
/^KEY_/.test(getTo(id)) ? displayName(getTo(id)) : "",
);
setKeyInput(/^KEY_/.test(getTo(id)) ? displayName(getTo(id)) : "");
setKeyInputError(null);
},
[playPressSound, getTo],
@@ -202,7 +191,11 @@ const GoldMapperView = memo(function GoldMapperView() {
const rows: Row[] = useMemo(() => {
const list: Row[] = [{ kind: "reset", key: "reset" }];
list.push({ kind: "enable", key: "enable" });
list.push({ kind: "header", key: "controller_header", label: "Controller" });
list.push({
kind: "header",
key: "controller_header",
label: "Controller",
});
for (const id of controllerIds) {
list.push({
kind: "bind",
@@ -341,7 +334,6 @@ const GoldMapperView = memo(function GoldMapperView() {
const isEnable = row.kind === "enable";
const focusIdx = nextFocusIndex();
const focused = focusIndex === focusIdx;
return (
<button
key={row.key}
@@ -397,16 +389,14 @@ const GoldMapperView = memo(function GoldMapperView() {
? "Enable GoldMapper"
: row.label}
</span>
{!isReset &&
!isEnable &&
row.kind === "bind" && (
<span className="tracking-widest text-base opacity-70 ml-3 shrink-0">
{displayName(getTo(row.id))}
</span>
)}
{!isReset && !isEnable && row.kind === "bind" && (
<span className="tracking-widest text-base opacity-70 ml-3 shrink-0">
{displayName(getTo(row.id))}
</span>
)}
{isEnable && (
<img
src={EMERALD_ICON}
src="/images/goldmapper.png"
alt=""
className="w-6 h-6 object-contain shrink-0 ml-3"
style={{ imageRendering: "pixelated" }}
@@ -470,9 +460,7 @@ const GoldMapperView = memo(function GoldMapperView() {
onMouseEnter={() => setModalFocusIndex(i)}
onClick={() => pickTarget(editing, id)}
className={`h-10 px-2 flex items-center justify-center text-sm tracking-widest outline-none border-none cursor-pointer transition-colors ${
getTo(editing) === id
? "text-[#ffff00]"
: "text-white"
getTo(editing) === id ? "text-[#ffff00]" : "text-white"
}`}
style={stoneButtonStyle(modalFocusIndex === i)}
>
@@ -556,8 +544,7 @@ const GoldMapperView = memo(function GoldMapperView() {
}
onClick={closeModal}
className={`w-full h-12 flex items-center justify-center text-xl mc-text-shadow transition-colors outline-none border-none cursor-pointer ${
modalFocusIndex ===
MOUSE_IDS.length + controllerIds.length + 1
modalFocusIndex === MOUSE_IDS.length + controllerIds.length + 1
? "text-[#ffff00]"
: "text-white"
}`}
+1 -1
View File
@@ -162,7 +162,7 @@ const HomeView = memo(function HomeView() {
}
}}
disabled={btn.disabled}
className={`w-full h-12 flex items-center justify-between px-6 text-2xl mc-text-shadow transition-colors outline-none border-none ${btn.disabled ? "text-gray-400 cursor-not-allowed" : menuFocus === i ? (btn.isDanger ? "text-red-400" : "text-[#FFFF55]") : btn.isDanger ? "text-red-500" : "text-white"}`}
className={`w-full h-12 flex items-center justify-between px-6 text-xl mc-text-shadow transition-colors outline-none border-none ${btn.disabled ? "text-gray-400 cursor-not-allowed" : menuFocus === i ? (btn.isDanger ? "text-red-400" : "text-[#FFFF55]") : btn.isDanger ? "text-red-500" : "text-white"}`}
style={{
backgroundImage: btn.disabled
? "url('/images/Button_Background.png')"
+10 -20
View File
@@ -249,8 +249,12 @@ const SettingsView = memo(function SettingsView() {
const fullPath = tracks[currentTrack];
if (fullPath) {
trackName =
fullPath.split("/").pop()?.replace(".ogg", "").replace(".wav", "") ||
"Unknown";
fullPath
.split("/")
.pop()
?.replace(".ogg", "")
.replace(".wav", "")
.replace(".opus", "") || "Unknown";
}
}
@@ -778,20 +782,6 @@ const SettingsView = memo(function SettingsView() {
transition={{ duration: animationsEnabled ? 0.3 : 0 }}
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 whitespace-nowrap px-4">
{currentSubMenu === "main"
? "Settings"
: currentSubMenu === "audio"
? "Audio"
: currentSubMenu === "video"
? "Video"
: currentSubMenu === "game"
? "Game"
: currentSubMenu === "plugins"
? "Plugins"
: "Launcher"}
</h2>
{currentSubMenu === "main" ? (
<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) => {
@@ -821,7 +811,7 @@ const SettingsView = memo(function SettingsView() {
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"
className="mc-slider-custom w-[calc(100%+16px)] h-full opacity-100 cursor-pointer z-0 outline-none m-0"
/>
</div>
</div>
@@ -851,7 +841,7 @@ const SettingsView = memo(function SettingsView() {
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`}
className={`mc-text-shadow ${isSmall ? "text-xs" : item.label.length > 20 ? "text-lg" : "text-xl"} truncate w-full text-center`}
>
{item.label}
</span>
@@ -943,7 +933,7 @@ const SettingsView = memo(function SettingsView() {
style={getSliderStyle(index)}
>
<span
className={`absolute z-10 text-xl pointer-events-none transition-colors tracking-widest ${focusIndex === index ? "text-[#ffff00]" : item.id === "music" || item.id === "sfx" ? "text-white" : "text-[#2a2a2a]"}`}
className={`absolute z-30 text-xl mc-text-shadow pointer-events-none transition-colors tracking-widest ${focusIndex === index ? "text-[#ffff00]" : item.id === "music" || item.id === "sfx" ? "text-white" : "text-[#2a2a2a]"}`}
>
{item.label}
</span>
@@ -958,7 +948,7 @@ const SettingsView = memo(function SettingsView() {
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"
className="mc-slider-custom w-[calc(100%+16px)] h-full opacity-100 cursor-pointer z-10 outline-none m-0"
/>
</div>
</div>