unavailable games red button
This commit is contained in:
@@ -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; }
|
||||
|
||||
@@ -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)) {
|
||||
|
||||
Reference in New Issue
Block a user