unavailable games red button

This commit is contained in:
2025-11-14 02:24:18 +01:00
parent 2952b596e2
commit 6eec74f0f6
2 changed files with 34 additions and 1 deletions
@@ -110,6 +110,23 @@ h1.align-center {
transform: translateY(-2px);
}
.play-button.unavailable {
background: linear-gradient(45deg, #330000, #550000);
color: #ffb4b4;
border: 1px solid #550000;
box-shadow: none;
cursor: default;
pointer-events: none;
}
.play-button.unavailable:hover {
background: linear-gradient(45deg, #330000, #550000);
box-shadow: none;
border: 1px solid #550000;
animation: none;
transform: none;
}
@keyframes flicker {
0% { opacity: 1; }
50% { opacity: 0.8; }
+17 -1
View File
@@ -433,12 +433,23 @@ const App = () => {
}
};
const isUnavailable = (game: Game): boolean => {
return !game.installed
&& !game.downloaded
&& game.peer_count === 0
&& game.install_status === InstallStatus.NotInstalled;
};
const getActionLabel = (game: Game): string => {
const inProgress = getInProgressLabel(game);
if (inProgress) {
return inProgress;
}
if (isUnavailable(game)) {
return 'Unavailable';
}
if (!game.installed) {
return game.downloaded ? 'Install' : 'Download';
}
@@ -550,8 +561,13 @@ const App = () => {
<span className="desc-text">{item.description.slice(0, 10)}</span>
<span className="size-text">{(item.size / 1024 / 1024 / 1024).toFixed(1)} GB</span>
</div>
<div className="play-button"
<div
className={`play-button${isUnavailable(item) ? ' unavailable' : ''}`}
onClick={() => {
if (isUnavailable(item)) {
return;
}
if (!item.installed) {
installGame(item.id);
} else if (needsUpdate(item)) {