Show different colors for wait time

redphx · Dec 12, 2024 · 901f55c · 901f55c
1 parent 15bb186
commit 901f55c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git 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
@@ -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);
         }
     }