marcel/better-xcloud
1
0
Fork 0
mirror of https://github.com/redphx/better-xcloud.git synced 2025-06-06 07:37:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

Show different colors for wait time

Browse Source
This commit is contained in:
redphx 2024-12-13 06:23:58 +07:00
parent 15bb18644f
commit 901f55c683
2 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/assets/css/root.styl
View File

@ -194,7 +194,7 @@ div[class*=SupportedInputsBadge] {
top: 0; top: 0;
left: 0; left: 0;
z-index: 1; z-index: 1;
background: #0000008c; background: rgba(0, 0, 0, 0.5);
display: flex; display: flex;
border-radius: 4px 0 4px 0; border-radius: 4px 0 4px 0;
align-items: center; align-items: center;
@ -214,6 +214,18 @@ div[class*=SupportedInputsBadge] {
font-weight: bold; font-weight: bold;
margin-left: 2px; margin-left: 2px;
} }
&[data-duration=short] {
background-color: rgba(0, 133, 133, 0.75);
}
&[data-duration=medium] {
background-color: rgba(213, 133, 0, 0.75);
}
&[data-duration=long] {
background-color: rgba(150, 0, 0, 0.75);
}
} }

10
src/modules/ui/game-tile.ts
View File

@ -1,6 +1,6 @@
import { BxEvent } from "@/utils/bx-event"; import { BxEvent } from "@/utils/bx-event";
import { BxIcon } from "@/utils/bx-icon"; import { BxIcon } from "@/utils/bx-icon";
import { CE, createSvgIcon, getReactProps, isElementVisible, secondsToHms } from "@/utils/html"; import { CE, createSvgIcon, getReactProps, isElementVisible, secondsToHm } from "@/utils/html";
import { XcloudApi } from "@/utils/xcloud-api"; import { XcloudApi } from "@/utils/xcloud-api";
interface GameTimeElement extends HTMLElement { interface GameTimeElement extends HTMLElement {
@ -30,8 +30,14 @@ export class GameTile {
if (typeof totalWaitTime === 'number' && isElementVisible($elm)) { if (typeof totalWaitTime === 'number' && isElementVisible($elm)) {
const $div = CE('div', { class: 'bx-game-tile-wait-time' }, const $div = CE('div', { class: 'bx-game-tile-wait-time' },
createSvgIcon(BxIcon.PLAYTIME), createSvgIcon(BxIcon.PLAYTIME),
CE('span', {}, secondsToHms(totalWaitTime)), CE('span', {}, totalWaitTime < 60 ? totalWaitTime + 's' : secondsToHm(totalWaitTime)),
); );
const duration = (totalWaitTime >= 15 * 60) ? 'long' : (totalWaitTime >= 10 * 60) ? 'medium' : (totalWaitTime >= 5 * 60 ) ? 'short' : '';
if (duration) {
$div.dataset.duration = duration;
}
$elm.insertAdjacentElement('afterbegin', $div); $elm.insertAdjacentElement('afterbegin', $div);
} }
} }