unavailable games red button
This commit is contained in:
@@ -110,6 +110,23 @@ h1.align-center {
|
|||||||
transform: translateY(-2px);
|
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 {
|
@keyframes flicker {
|
||||||
0% { opacity: 1; }
|
0% { opacity: 1; }
|
||||||
50% { opacity: 0.8; }
|
50% { opacity: 0.8; }
|
||||||
|
|||||||
@@ -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 getActionLabel = (game: Game): string => {
|
||||||
const inProgress = getInProgressLabel(game);
|
const inProgress = getInProgressLabel(game);
|
||||||
if (inProgress) {
|
if (inProgress) {
|
||||||
return inProgress;
|
return inProgress;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (isUnavailable(game)) {
|
||||||
|
return 'Unavailable';
|
||||||
|
}
|
||||||
|
|
||||||
if (!game.installed) {
|
if (!game.installed) {
|
||||||
return game.downloaded ? 'Install' : 'Download';
|
return game.downloaded ? 'Install' : 'Download';
|
||||||
}
|
}
|
||||||
@@ -550,8 +561,13 @@ const App = () => {
|
|||||||
<span className="desc-text">{item.description.slice(0, 10)}</span>
|
<span className="desc-text">{item.description.slice(0, 10)}</span>
|
||||||
<span className="size-text">{(item.size / 1024 / 1024 / 1024).toFixed(1)} GB</span>
|
<span className="size-text">{(item.size / 1024 / 1024 / 1024).toFixed(1)} GB</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="play-button"
|
<div
|
||||||
|
className={`play-button${isUnavailable(item) ? ' unavailable' : ''}`}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
if (isUnavailable(item)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (!item.installed) {
|
if (!item.installed) {
|
||||||
installGame(item.id);
|
installGame(item.id);
|
||||||
} else if (needsUpdate(item)) {
|
} else if (needsUpdate(item)) {
|
||||||
|
|||||||
Reference in New Issue
Block a user