#52 Fennec: Clock red at <= 10 seconds

Author: drweissbrot

src/themes/fennec/theme.json

@@ -247,6 +247,27 @@
 			"label": "Show map name and screenshot in the Series Graph, even if there is only a single match in the series"
 		},
 
+		"preferences.topBar.clock.tenSecondsRedInFreezetime": {
+			"type": "boolean",
+			"fallback": false,
+			"section": "Preferences",
+			"label": "Show clock in red at less than 10 seconds in Freezetime"
+		},
+
+		"preferences.topBar.clock.tenSecondsRedInTacticalTimeout": {
+			"type": "boolean",
+			"fallback": false,
+			"section": "Preferences",
+			"label": "Show clock in red at less than 10 seconds during Tactical Timeouts"
+		},
+
+		"preferences.topBar.clock.tenSecondsRedInRoundRestartDelay": {
+			"type": "boolean",
+			"fallback": false,
+			"section": "Preferences",
+			"label": "Show clock in red at less than 10 seconds after round end"
+		},
+
 		"css.base-scale-factor": {
 			"type": "text",
 			"section": "Style Overrides",

src/themes/fennec/top-bar/center/current-round/clock/clock.css

@@ -8,6 +8,10 @@ img.planted-bomb-icon {
 	font-size: 2.25rem;
 }
 
+.clock.--red {
+	color: var(--red);
+}
+
 img.bombsite-icon {
 	height: 1.75rem;
 	margin-left: 0.75rem;

src/themes/fennec/top-bar/center/current-round/clock/clock.html

@@ -7,7 +7,6 @@
 	<img v-else-if="$bomb.bombsite === 'b'" class="bombsite-icon --b" src="/hud/img/icons/bombsite-b.svg" alt="">
 </div>
 
-<!-- TODO configurable: 10 seconds in red -->
-<div v-else class="clock">
+<div v-else :class="['clock', { '--red': isClockRed }]">
 	<Digits :value="clockMinutes" digits="1"></Digits>:<Digits :value="clockSeconds" digits="2" pad="0"></Digits>
 </div>

src/themes/fennec/top-bar/center/current-round/clock/clock.js

@@ -13,5 +13,14 @@ export default {
 		clockSeconds() {
 			return Math.ceil(this.$round.phaseEndsInSec % 60)
 		},
+
+		isClockRed() {
+			if (this.$round.phase === 'freezetime' && ! this.$opts['preferences.topBar.clock.tenSecondsRedInFreezetime']) return false
+			if ((this.$round.phase === 'timeout_ct' || this.$round.phase === 'timeout_t') && ! this.$opts['preferences.topBar.clock.tenSecondsRedInTacticalTimeout']) return false
+			if (this.$round.phase === 'over' && ! this.$opts['preferences.topBar.clock.tenSecondsRedInRoundRestartDelay']) return false
+
+			return this.clockMinutes === 0
+				&& this.clockSeconds <= 10
+		},
 	},
 }