#52 Fennec: Top Bar section

src/server/gsi.js

@@ -29,9 +29,25 @@ const updateGsiState = (body) => {
 }
 
 const updateAdditionalState = (body) => {
+	updateLastKnownBombPlantedCountdown(body)
 	updateRoundDamages(body)
 }
 
+const updateLastKnownBombPlantedCountdown = (body) => {
+	const bomb = body.bomb
+	if (bomb?.state === 'defusing') return
+
+	if (! bomb || bomb.state !== 'planted') {
+		additionalState.lastKnownBombPlantedCountdown = {}
+		return
+	}
+
+	additionalState.lastKnownBombPlantedCountdown = {
+		unixTimestamp: +new Date(),
+		value: bomb.countdown,
+	}
+}
+
 const updateRoundDamages = (body) => {
 	const roundNumber = body.map?.round
 	if (! roundNumber) return

src/server/helpers/paths.js

@@ -9,4 +9,6 @@ export const themesDirectory = `${rootDirectory}/src/themes`
 export const userspaceDirectory = `${themesDirectory}/userspace`
 
 // files
+export const userspaceBombsitesPath = `${userspaceDirectory}/bombsites.json`
+export const userspaceRadarsPath = `${userspaceDirectory}/radars.json`
 export const userspaceSettingsPath = `${userspaceDirectory}/theme.json`

src/server/settings.js

@@ -2,7 +2,7 @@ import { mkdir, readFile, writeFile } from 'fs/promises'
 
 import { merge } from 'lodash-es'
 
-import { themesDirectory, userspaceDirectory, userspaceSettingsPath } from './helpers/paths.js'
+import { themesDirectory, userspaceBombsitesPath, userspaceDirectory, userspaceRadarsPath, userspaceSettingsPath } from './helpers/paths.js'
 import { fileExists } from './helpers/file-exists.js'
 
 export const initSettings = async () => {
@@ -16,18 +16,33 @@ export const initSettings = async () => {
 }
 
 export const getSettings = async () => {
-	const settingsObjects = [await readJson(userspaceSettingsPath)]
 	const themeTree = ['userspace']
 
+	const bombsiteObjects = [await readJsonIfExists(userspaceBombsitesPath)]
+	const radarObjects = [await readJsonIfExists(userspaceRadarsPath)]
+	const settingsObjects = [await readJson(userspaceSettingsPath)]
+
 	while (settingsObjects[settingsObjects.length - 1].parent) {
 		themeTree.push(settingsObjects[settingsObjects.length - 1].parent)
+
 		settingsObjects.push(
-			await readJson(`${themesDirectory}/${settingsObjects[settingsObjects.length - 1].parent}/theme.json`)
+			await readJson(`${themesDirectory}/${settingsObjects[settingsObjects.length - 1].parent}/theme.json`),
+		)
+
+		bombsiteObjects.push(
+			await readJsonIfExists(`${themesDirectory}/${settingsObjects[settingsObjects.length - 1].parent}/bombsites.json`),
+		)
+
+		radarObjects.push(
+			await readJsonIfExists(`${themesDirectory}/${settingsObjects[settingsObjects.length - 1].parent}/radars.json`),
 		)
 	}
 
 	return {
 		themeTree,
+
+		bombsites: merge({}, ...bombsiteObjects.reverse()),
+		radars: merge({}, ...radarObjects.reverse()),
 		settings: merge({}, ...settingsObjects.reverse()),
 	}
 }
@@ -38,3 +53,12 @@ const readJson = async (path) => {
 	const str = await readFile(path, 'utf-8')
 	return JSON.parse(str)
 }
+
+const readJsonIfExists = async (path) => {
+	try {
+		return await readJson(path)
+	} catch (err) {
+		if (err.code === 'ENOENT') return {}
+		throw err
+	}
+}

src/server/state.js

@@ -1,5 +1,6 @@
 export const gsiState = {}
 
 export const additionalState = {
+	lastKnownBombPlantedCountdown: {},
 	roundDamages: {},
 }

src/server/websocket.js

@@ -11,15 +11,19 @@ export class Websocket {
 			this.sendState(client)
 		})
 
+		this.bombsitesCache = {}
 		this.optionsCache = {}
+		this.radarsCache = {}
 
 		setInterval(() => {
-			this.broadcastState() // TODO just completely remove this (probably)
-
 			// TODO run this when a value is changed on the config page instead (and maybe on a rare interval or something)
-			getSettings().then(({ settings }) => {
+			getSettings().then(({ bombsites, radars, settings }) => {
+				this.bombsitesCache = bombsites
 				this.optionsCache = Object.fromEntries(Object.entries(settings.options).map(([key, { value }]) => [key, value]))
+				this.radarsCache = radars
 			})
+
+			this.broadcastState() // TODO just completely remove this (probably)
 		}, 5000)
 	}
 
@@ -28,8 +32,10 @@ export class Websocket {
 			additionalState,
 			gsiState,
 
+			bombsites: this.bombsitesCache,
 			options: this.optionsCache,
-			timestamp: new Date(),
+			radars: this.radarsCache,
+			unixTimestamp: +new Date(),
 		}
 	}
 

src/themes/fennec/css/base.css

@@ -1,7 +1,6 @@
 *,
 *::after,
 *::before {
-	box-sizing: border-box;
 	margin: 0;
 	padding: 0;
 }

src/themes/fennec/css/vars.css

@@ -4,12 +4,14 @@
 	 */
 	--background-color: green;
 	--text-color: #fff;
+	--red: #f00;
 
+	--counter-terrorists-rgb: 29, 158, 222;
 	--counter-terrorists: #1d9ede;
+	--terrorists-rgb: 193, 136, 3;
 	--terrorists: #c18803;
 
-	--counter-terrorists-rgb: 29, 158, 222;
-	--terrorists-rgb: 193, 136, 3;
+	--progress-bar-fill-color-bomb: var(--red);
 
 	/*
 	 * Spacing, Sizes
@@ -19,6 +21,12 @@
 	--focused-player-width: 50%;
 	--focused-player-icon-height: 2rem;
 
+	--top-bar-width: 50%;
+	--top-bar-padding-x: 0.8rem;
+	--top-bar-score-font-size: 3rem;
+	--top-bar-row-height: calc(2 * var(--top-bar-padding-x) + var(--top-bar-score-font-size));
+	--top-bar-half-row-height: calc(var(--top-bar-row-height) / 2);
+
 	/* Viewport Margin  */
 	--viewport-margin-x: 2rem;
 	--viewport-margin-y: 1.5rem;

src/themes/fennec/digits/digits.js

@@ -1,12 +1,13 @@
 export default {
 	props: [
-		'value',
 		'digits',
+		'pad',
+		'value',
 	],
 
 	computed: {
 		elements() {
-			return `${this.value}`.padStart(this.digits, ' ').split('')
+			return `${this.value}`.padStart(this.digits, this.pad ?? ' ').split('')
 		},
 	},
 }

src/themes/fennec/focused-player/name-and-stats/data-row/taser/taser.css

@@ -1 +1,2 @@
+/* TODO this ends up not scoped */
 @import '/hud/focused-player/name-and-stats/data-row/data-row-item-shared.css';

src/themes/fennec/progress-bar/progress-bar.css

@@ -0,0 +1,32 @@
+.progress-bar-background {
+	width: 100%;
+	height: 0.6rem;
+	background: rgba(255, 255, 255, 0.5);
+	overflow: hidden;
+}
+
+.progress-bar-fill {
+	height: 100%;
+
+	&.--to-left,
+	&.--left {
+		transform-origin: left;
+	}
+
+	&.--to-right,
+	&.--right {
+		transform-origin: right;
+	}
+
+	&.--ct {
+		background: var(--counter-terrorists);
+	}
+
+	&.--t {
+		background: var(--terrorists);
+	}
+
+	&.--bomb {
+		background: var(--progress-bar-fill-color-bomb);
+	}
+}

src/themes/fennec/progress-bar/progress-bar.html

@@ -0,0 +1,3 @@
+<div class="progress-bar-background">
+	<div :class="['progress-bar-fill', `--${direction}`, colorClass]" :style="styleAttr"></div>
+</div>

src/themes/fennec/progress-bar/progress-bar.js

@@ -0,0 +1,20 @@
+export default {
+	props: [
+		'colorClass',
+		'direction',
+		'max',
+		'min',
+		'value',
+	],
+
+	computed: {
+		styleAttr() {
+			const min = this.min || 0
+			const max = this.max ?? 1
+
+			const percent = (this.value - min) / (max - min)
+
+			return `transform: scaleX(${percent})`
+		},
+	},
+}

src/themes/fennec/shell/shell.html

@@ -1,6 +1,6 @@
 <template v-if="$map.name">
 	<!-- <Radar /> -->
-	<!-- <TopBar /> -->
+	<TopBar />
 	<PlayersAlive />
 
 	<!-- <PlayerSidebars /> -->

src/themes/fennec/shell/shell.js

@@ -1,9 +1,11 @@
 import FocusedPlayer from '/hud/focused-player/focused-player.vue'
 import PlayersAlive from '/hud/players-alive/players-alive.vue'
+import TopBar from '/hud/top-bar/top-bar.vue'
 
 export default {
 	components: {
 		FocusedPlayer,
 		PlayersAlive,
+		TopBar,
 	},
 }

src/themes/fennec/theme.json

@@ -2,6 +2,41 @@
 	"parent": "raw",
 
 	"options": {
+		"cvars.mp_c4timer": {
+			"type": "number",
+			"value": 40,
+			"section": "Cvars",
+			"label": "Value of mp_c4timer, i.e. the number of seconds from when the bomb is planted until it explodes"
+		},
+
+		"cvars.mp_maxrounds": {
+			"type": "number",
+			"value": 30,
+			"section": "Cvars",
+			"label": "Value of mp_maxrounds, i.e. the maximum number of rounds played in regulation"
+		},
+
+		"cvars.mp_overtime_maxrounds": {
+			"type": "number",
+			"value": 6,
+			"section": "Cvars",
+			"label": "Value of mp_overtime_maxrounds, i.e. the maximum number of rounds played per overtime"
+		},
+
+		"cvars.mp_team_timeout_max": {
+			"type": "number",
+			"value": 4,
+			"section": "Cvars",
+			"label": "Value of mp_team_timeout_max, i.e. the number of tactical timeouts available per team"
+		},
+
+		"cvars.mp_team_timeout_time": {
+			"type": "number",
+			"value": 30,
+			"section": "Cvars",
+			"label": "Value of mp_team_timeout_time, i.e. the duration in seconds of each tactical timeout"
+		},
+
 		"preferences.playersAlive.hideDuringFreezetime": {
 			"type": "boolean",
 			"value": true,