diff --git a/src/assets/css/root.styl b/src/assets/css/root.styl index 668695f..957e48d 100755 --- a/src/assets/css/root.styl +++ b/src/assets/css/root.styl @@ -194,7 +194,7 @@ div[class*=SupportedInputsBadge] { top: 0; left: 0; z-index: 1; - background: #0000008c; + background: rgba(0, 0, 0, 0.5); display: flex; border-radius: 4px 0 4px 0; align-items: center; @@ -214,6 +214,18 @@ div[class*=SupportedInputsBadge] { font-weight: bold; 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); + } } diff --git a/src/modules/ui/game-tile.ts b/src/modules/ui/game-tile.ts index 30261cb..7b286d4 100755 --- a/src/modules/ui/game-tile.ts +++ b/src/modules/ui/game-tile.ts @@ -1,6 +1,6 @@ import { BxEvent } from "@/utils/bx-event"; 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"; interface GameTimeElement extends HTMLElement { @@ -30,8 +30,14 @@ export class GameTile { if (typeof totalWaitTime === 'number' && isElementVisible($elm)) { const $div = CE('div', { class: 'bx-game-tile-wait-time' }, 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); } }