diff --git a/public/views/mp/rushroyale.html b/public/views/mp/rushroyale.html
index aa342f90..06eb5afe 100644
--- a/public/views/mp/rushroyale.html
+++ b/public/views/mp/rushroyale.html
@@ -95,6 +95,16 @@
text-shadow: 1px 1px 1px;
}
+ .timer_marker {
+ position: absolute;
+ left: -10px;
+ width: 10px;
+ height: 452px;
+ bottom: -452px;
+ background: gray;
+ transform-origin: bottom left;
+ }
+
.player.left .video {
top: 0;
left: 206px;
@@ -105,18 +115,34 @@
left: -148px;
}
+ .player.right .timer_marker {
+ left: 210px;
+ }
+
.player.first .rank_indicator {
background: linear-gradient(rgb(0, 128, 0), rgb(0, 0, 0));
}
+ .player.first .timer_marker {
+ background: green;
+ }
+
.player.penultimate .rank_indicator {
background: linear-gradient(rgb(128, 78, 0), rgb(0, 0, 0));
}
+ .player.penultimate .timer_marker {
+ background: rgb(255, 156, 0);
+ }
+
.player.last .rank_indicator {
background: linear-gradient(rgb(128, 0, 0), rgb(0, 0, 0));
}
+ .player.last .timer_marker {
+ background: red;
+ }
+
.player.p1 {
left: var(--p-left-x1);
}
@@ -262,6 +288,8 @@
+
+
@@ -604,6 +632,7 @@
endingCycle = false;
}
+ let cycle_start_ts;
let cycle_end_ts;
let rafId;
let toId;
@@ -651,6 +680,7 @@
}
function updateTime() {
+ const total = (cycle_end_ts - cycle_start_ts) / 1000;
const remainder = (cycle_end_ts - Date.now()) / 1000;
let content = remainder.toFixed(2);
@@ -667,6 +697,16 @@
timer.textContent = content;
+ const scale = `scaleY(${remainder / total})`;
+ players.forEach(player => {
+ if (player.game?.over) {
+ player.dom.timer_marker.style.display = 'none';
+ } else {
+ player.dom.timer_marker.style.display = 'block';
+ player.dom.timer_marker.style.transform = scale;
+ }
+ });
+
rafId = window.requestAnimationFrame(updateTime);
}
@@ -674,7 +714,8 @@
if (!duration) duration = cycle_settings.subsequent_rounds;
toId = clearTimeout(toId);
- cycle_end_ts = Date.now() + duration * 1000;
+ cycle_start_ts = Date.now();
+ cycle_end_ts = cycle_start_ts + duration * 1000;
toId = setTimeout(handleCycleEnd, duration * 1000);
}
@@ -783,6 +824,7 @@
full_node: player_node,
rank_node,
+ timer_marker: player_node.querySelector(`.timer_marker`),
},
{
avatar: 1, // forced to 1 regardless or query string value, so we can hijack it for the CTK event logo