feat: cleaner UI for version detection

This commit is contained in:
neoapps-dev
2026-04-30 18:35:39 +03:00
parent b589e43d3e
commit 1ecc47c32f
6 changed files with 58 additions and 26 deletions
+15 -5
View File
@@ -20,6 +20,7 @@ const HomeView = memo(function HomeView() {
downloadingId,
isGameRunning,
stopGame,
updatesAvailable,
} = useGame();
const isFocusedSection = focusSection === "menu";
@@ -54,10 +55,10 @@ const HomeView = memo(function HomeView() {
isDanger: isGameRunning,
disabled: isDownloading,
},
{ label: "Help & Options", action: () => setActiveView("settings"), disabled: false },
{ label: "Versions", action: () => setActiveView("versions"), disabled: false },
{ label: "Workshop", action: () => setActiveView("workshop"), disabled: false },
{ label: "Developer Tools", action: () => setActiveView("devtools"), disabled: false },
{ label: "Help & Options", action: () => setActiveView("settings"), disabled: false, id: "settings" },
{ label: "Versions", action: () => setActiveView("versions"), disabled: false, id: "versions" },
{ label: "Workshop", action: () => setActiveView("workshop"), disabled: false, id: "workshop" },
{ label: "Developer Tools", action: () => setActiveView("devtools"), disabled: false, id: "devtools" },
],
[
isDownloading,
@@ -131,7 +132,16 @@ const HomeView = memo(function HomeView() {
opacity: btn.disabled ? 0.5 : 1,
}}
>
<span className="w-full text-center">{btn.label}</span>
<div className="w-full h-full flex items-center justify-center relative">
<span>{btn.label}</span>
{btn.id === "versions" && Object.values(updatesAvailable || {}).some((v) => v) && (
<img
src="/images/Update_Icon.png"
className="absolute right-4 w-6 h-6 object-contain"
style={{ imageRendering: "pixelated", filter: "drop-shadow(0 0 2px rgba(255, 255, 0, 0.8)) sepia(100%) saturate(500%) hue-rotate(5deg) brightness(1.2)" }}
/>
)}
</div>
</button>
</div>
))}
+5 -1
View File
@@ -61,6 +61,7 @@ const VersionsView = memo(function VersionsView() {
updateCustomEdition: onUpdateEdition,
downloadingId,
downloadProgress,
updatesAvailable,
} = useGame();
const [focusIndex, setFocusIndex] = useState<number>(0);
const [focusBtn, setFocusBtn] = useState<number>(0);
@@ -488,7 +489,10 @@ const VersionsView = memo(function VersionsView() {
src="/images/Update_Icon.png"
alt="Update"
className="w-6 h-6 object-contain"
style={{ imageRendering: "pixelated" }}
style={{
imageRendering: "pixelated",
filter: updatesAvailable?.[edition.id] ? "brightness(1.5) sepia(1) saturate(5) hue-rotate(15deg) drop-shadow(0 0 4px rgba(255,255,0,0.8))" : "none"
}}
/>
</button>
<button