From 6a1b3e55e1e254654d9e647ba06fa7f9d0c009c6 Mon Sep 17 00:00:00 2001
From: Pierre Borgmann <info@drweissbrot.net>
Date: Mon, 29 May 2023 06:41:47 +0200
Subject: [PATCH] #52 Fennec: Top Bar section

---
 src/server/gsi.js                             |  16 +
 src/server/helpers/paths.js                   |   2 +
 src/server/settings.js                        |  30 +-
 src/server/state.js                           |   1 +
 src/server/websocket.js                       |  14 +-
 src/themes/fennec/css/base.css                |   1 -
 src/themes/fennec/css/vars.css                |  12 +-
 src/themes/fennec/digits/digits.js            |   5 +-
 .../name-and-stats/data-row/taser/taser.css   |   1 +
 src/themes/fennec/img/icons/bombsite-a.svg    |   1 +
 src/themes/fennec/img/icons/bombsite-b.svg    |   1 +
 src/themes/fennec/img/icons/pause.svg         |   1 +
 src/themes/fennec/img/icons/planted-bomb.svg  |   1 +
 .../fennec/progress-bar/progress-bar.css      |  32 ++
 .../fennec/progress-bar/progress-bar.html     |   3 +
 .../fennec/progress-bar/progress-bar.js       |  20 +
 src/themes/fennec/shell/shell.html            |   2 +-
 src/themes/fennec/shell/shell.js              |   2 +
 src/themes/fennec/theme.json                  |  35 ++
 src/themes/fennec/top-bar/center/center.css   | 209 +++++++++
 src/themes/fennec/top-bar/center/center.html  |  70 ++++
 src/themes/fennec/top-bar/center/center.js    |  35 ++
 src/themes/fennec/top-bar/team/team.css       | 204 +++++++++
 src/themes/fennec/top-bar/team/team.html      |  51 +++
 src/themes/fennec/top-bar/team/team.js        |  84 ++++
 src/themes/fennec/top-bar/top-bar.css         |  13 +
 src/themes/fennec/top-bar/top-bar.html        |   5 +
 src/themes/fennec/top-bar/top-bar.js          |  10 +
 src/themes/raw/bombsites.json                 | 395 ++++++++++++++++++
 src/themes/raw/core/app.js                    |   4 +-
 src/themes/raw/core/state.js                  |   2 +
 src/themes/raw/core/websocket-on-message.js   |   6 +-
 src/themes/raw/gsi/helpers/find-bomb-site.js  |  23 +
 .../raw/gsi/{ => helpers}/format-map-name.js  |   2 +-
 src/themes/raw/gsi/helpers/inside-vector.js   |   4 +
 src/themes/raw/gsi/helpers/vector-distance.js |   3 +
 src/themes/raw/gsi/parse-bomb.js              |  40 +-
 src/themes/raw/gsi/parse-map.js               |   2 +-
 src/themes/raw/gsi/parse-round.js             |  42 +-
 src/themes/raw/gsi/parse-rounds.js            |   1 +
 40 files changed, 1356 insertions(+), 29 deletions(-)
 create mode 100644 src/themes/fennec/img/icons/bombsite-a.svg
 create mode 100644 src/themes/fennec/img/icons/bombsite-b.svg
 create mode 100644 src/themes/fennec/img/icons/pause.svg
 create mode 100644 src/themes/fennec/img/icons/planted-bomb.svg
 create mode 100644 src/themes/fennec/progress-bar/progress-bar.css
 create mode 100644 src/themes/fennec/progress-bar/progress-bar.html
 create mode 100644 src/themes/fennec/progress-bar/progress-bar.js
 create mode 100644 src/themes/fennec/top-bar/center/center.css
 create mode 100644 src/themes/fennec/top-bar/center/center.html
 create mode 100644 src/themes/fennec/top-bar/center/center.js
 create mode 100644 src/themes/fennec/top-bar/team/team.css
 create mode 100644 src/themes/fennec/top-bar/team/team.html
 create mode 100644 src/themes/fennec/top-bar/team/team.js
 create mode 100644 src/themes/fennec/top-bar/top-bar.css
 create mode 100644 src/themes/fennec/top-bar/top-bar.html
 create mode 100644 src/themes/fennec/top-bar/top-bar.js
 create mode 100644 src/themes/raw/bombsites.json
 create mode 100644 src/themes/raw/gsi/helpers/find-bomb-site.js
 rename src/themes/raw/gsi/{ => helpers}/format-map-name.js (86%)
 create mode 100644 src/themes/raw/gsi/helpers/inside-vector.js
 create mode 100644 src/themes/raw/gsi/helpers/vector-distance.js

diff --git a/src/server/gsi.js b/src/server/gsi.js
index 2af6ef4..e27e73d 100644
--- a/src/server/gsi.js
+++ b/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
diff --git a/src/server/helpers/paths.js b/src/server/helpers/paths.js
index f5a4c5d..7843a66 100644
--- a/src/server/helpers/paths.js
+++ b/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`
diff --git a/src/server/settings.js b/src/server/settings.js
index b7dcb0d..353991f 100644
--- a/src/server/settings.js
+++ b/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
+	}
+}
diff --git a/src/server/state.js b/src/server/state.js
index 58361ca..a081c78 100644
--- a/src/server/state.js
+++ b/src/server/state.js
@@ -1,5 +1,6 @@
 export const gsiState = {}
 
 export const additionalState = {
+	lastKnownBombPlantedCountdown: {},
 	roundDamages: {},
 }
diff --git a/src/server/websocket.js b/src/server/websocket.js
index f4b5f4b..b2dc9f5 100644
--- a/src/server/websocket.js
+++ b/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(),
 		}
 	}
 
diff --git a/src/themes/fennec/css/base.css b/src/themes/fennec/css/base.css
index 00be8e0..73fbece 100644
--- a/src/themes/fennec/css/base.css
+++ b/src/themes/fennec/css/base.css
@@ -1,7 +1,6 @@
 *,
 *::after,
 *::before {
-	box-sizing: border-box;
 	margin: 0;
 	padding: 0;
 }
diff --git a/src/themes/fennec/css/vars.css b/src/themes/fennec/css/vars.css
index 612bf51..13ebb5f 100644
--- a/src/themes/fennec/css/vars.css
+++ b/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;
diff --git a/src/themes/fennec/digits/digits.js b/src/themes/fennec/digits/digits.js
index 128c011..73ca364 100644
--- a/src/themes/fennec/digits/digits.js
+++ b/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('')
 		},
 	},
 }
diff --git a/src/themes/fennec/focused-player/name-and-stats/data-row/taser/taser.css b/src/themes/fennec/focused-player/name-and-stats/data-row/taser/taser.css
index 22ff18f..ba5ac73 100644
--- a/src/themes/fennec/focused-player/name-and-stats/data-row/taser/taser.css
+++ b/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';
diff --git a/src/themes/fennec/img/icons/bombsite-a.svg b/src/themes/fennec/img/icons/bombsite-a.svg
new file mode 100644
index 0000000..84caea0
--- /dev/null
+++ b/src/themes/fennec/img/icons/bombsite-a.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30"><path fill="#fff" d="M12.59 16.51h4.79l-2.4-7.89-2.39 7.89Z"/><path fill="#fff" d="M15 .26a14.74 14.74 0 1 0 0 29.48A14.74 14.74 0 0 0 15 .26Zm4.96 24.08-1.5-4.5h-6.99l-1.43 4.5H6.28l7-20.7h3.45l6.99 20.7h-3.76Z"/></svg>
diff --git a/src/themes/fennec/img/icons/bombsite-b.svg b/src/themes/fennec/img/icons/bombsite-b.svg
new file mode 100644
index 0000000..b822dc6
--- /dev/null
+++ b/src/themes/fennec/img/icons/bombsite-b.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30"><path fill="#fff" d="M17.72 16.69h-5.38v5.53h5.38c.23 0 .42-.08.59-.23a.76.76 0 0 0 .25-.58V17.5a.76.76 0 0 0-.25-.58.84.84 0 0 0-.6-.23Zm.68-4.16V9.1a.76.76 0 0 0-.25-.58.84.84 0 0 0-.59-.23h-5.22v5.03h5.31c.5-.04.75-.3.75-.8Z"/><path fill="#fff" d="M15 .52A14.74 14.74 0 1 0 15 30 14.74 14.74 0 0 0 15 .52Zm7.29 21.83c0 .9-.33 1.68-.97 2.31a3.2 3.2 0 0 1-2.33.95H8.61V4.9h10.23c.9 0 1.68.31 2.33.95.64.63.96 1.4.96 2.31v4.45c0 .47-.16.93-.47 1.38-.3.45-.7.74-1.18.88.48.09.9.34 1.26.75.36.42.54.91.54 1.5v5.22Z"/></svg>
diff --git a/src/themes/fennec/img/icons/pause.svg b/src/themes/fennec/img/icons/pause.svg
new file mode 100644
index 0000000..330dda0
--- /dev/null
+++ b/src/themes/fennec/img/icons/pause.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 20 26"><path d="M.27.77h6.21V25.6H.27V.77Zm13.26 0h6.21V25.6h-6.21V.77Z"/></svg>
diff --git a/src/themes/fennec/img/icons/planted-bomb.svg b/src/themes/fennec/img/icons/planted-bomb.svg
new file mode 100644
index 0000000..18be6e4
--- /dev/null
+++ b/src/themes/fennec/img/icons/planted-bomb.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 31 28"><path fill="#fff" fill-rule="evenodd" d="m17.3 5.5-.1-3.3v-.3c0-.29.03-.85-.08-1.03-.1-.19-.45-.48-.83-.39a.74.74 0 0 0-.55.57l-.02.98c-.06.27-.03.62-.03.9v.32c-.04.17.02.42-.02.62-.04.17.02.42-.02.61-.06.28-.03.7-.03 1h1.68v.02Zm-7.2-.72c.11.22.3.46.36.72h1.9c-.03-.12-.12-.2-.18-.3l-.37-.6c-.35-.57-.68-1.15-1.03-1.7-.21-.34-.34-.7-.88-.7-.06.03-.13.03-.19.06-.14.09-.33.22-.4.38-.16.38.08.74.22.97.23.37.37.79.57 1.17ZM22.77 2.2c-.14.1-.32.16-.43.31-.18.26-.3.52-.47.79l-.8 1.23-.45.72c-.05.07-.06.16-.13.21v.04c.65 0 1.4-.06 1.83.15.18-.37.38-.73.59-1.07.12-.2.18-.4.3-.6.14-.24.35-.52.43-.8.17-.56-.37-1-.87-.98Zm2.86 7.6c.59-.37 1.2-.7 1.78-1.07.25-.15.53-.25.75-.43.27-.21.3-.81.09-1.1-.14-.19-.41-.2-.74-.2-.04.03-.1.02-.15.05-.14.06-.3.15-.45.23-.48.26-1 .49-1.48.75-.28.16-.59.3-.89.45-.1.06-.22.15-.35.19v1.98c.19-.05.34-.19.49-.28.31-.2.64-.38.95-.57Zm-3.39 11.03c.26-.4.2-1.13.2-1.79V9.8c0-.82.1-1.75-.37-2.12-.48-.38-1.04-.3-1.88-.3H1.12l-.33.1c-.3.15-.54.4-.67.7-.14.35-.06 1.3-.06 1.79v10.36c.07.32.28.6.51.78.43.3.9.25 1.62.25h18.08c1 0 1.56.09 1.97-.53ZM2.91 18.3c.15.36.74.8 1.38.67.1-.02.24-.02.34-.05.06-.03.11-.07.2-.09 0 .19.01.38.05.54.02.12-.03.27.03.36 0 .23-.19.18-.37.22-.22.05-.78.15-1.06.08-.2-.04-.4-.04-.57-.1-.59-.18-1-.53-1.24-1.06-.08-.2-.11-.43-.16-.65-.1-.42.02-.95.13-1.24.28-.7.74-1.1 1.49-1.32.2-.06.38-.01.61-.06.42-.06.84-.01 1.24.13l-.24.97c-.3-.07-.78-.19-1.15-.07-.52.17-.98.95-.68 1.67Zm6.92.32h-.75v1.31H7.85v-1.31H6.13c-.24 0-.6.05-.8-.02v-.87c.03-.09.13-.19.18-.27l.35-.56c.36-.57.68-1.15 1.04-1.72.18-.3.43-.6.58-.94h1.6v3.37h.77c0 .28.05.78-.02 1v.01Zm3.32 1.28c-.08.2-.8.13-1.1.13-.12 0-.28.02-.37-.01a.6.6 0 0 1-.27-.25v-1.25c.07-.07.11-.15.19-.2.04-.03.1-.04.13-.07.34 0 1.26-.07 1.4.1.14.16.09.6.09.88 0 .22.04.56-.07.67Zm.07-2.97c0 .12.02.31-.04.38-.1.3-.68.2-1.06.2h-.4c-.4-.12-.3-.52-.3-1.01v-.49c.05-.16.2-.19.33-.28h.92c.16 0 .33-.01.41.07.2.08.14.82.14 1.13Zm2.15.58h-.44c-.43 0-.93.08-1.08-.21-.05-.1-.02-.31-.02-.44V16c.03-.07.1-.14.15-.21l.15-.05h.92c.17 0 .33-.02.42.06.17.07.15.34.15.57 0 .45.1 1.04-.25 1.15v-.01Zm.18 2.37c-.09.25-.77.15-1.1.15h-.35c-.35-.1-.27-.6-.27-1.05v-.46c.04-.12.15-.17.22-.25.03-.01.03 0 .05-.02.39 0 1.3-.08 1.45.13.12.16.07.57.07.84 0 .21.04.55-.07.66Zm2.45-.53v.4c-.02.1-.08.16-.13.23-.3.08-1.43.13-1.58-.08-.13-.17-.07-.78-.07-1.07 0-.11-.02-.28.02-.37.05-.1.17-.14.26-.21h.94c.12 0 .3-.02.36.03.3.1.2.69.2 1.07Zm-.23-1.84h-.43c-.44 0-.96.08-1.1-.21-.05-.1-.02-.3-.02-.42V16c.02-.06.1-.13.13-.2l.19-.06h.91c.14 0 .31-.02.39.05.18.06.16.32.16.57 0 .43.1 1.05-.23 1.16v-.01Zm2.57 2.36c-.1.26-.74.16-1.08.16h-.36c-.38-.1-.3-.56-.3-1.03 0-.15-.03-.4.02-.52.05-.1.18-.15.27-.23h.93c.12 0 .3-.02.37.03.3.1.2.73.2 1.12 0 .16.02.38-.05.47Zm.05-2.99v.37c-.03.1-.11.15-.17.23-.25.06-.64.04-.95.04h-.38a.76.76 0 0 1-.19-.12c-.18-.15-.1-.75-.1-1.05v-.34c.03-.1.12-.16.17-.23l.15-.05h.9c.15 0 .32-.01.4.05.26.1.17.75.17 1.1Zm.1-2.05c-.1.25-.53.18-.87.18h-6.6c-.44 0-1.32.09-1.57-.1-.22-.16-.13-1.09-.13-1.48v-3.07c0-.28-.06-1.11.03-1.28.06-.13.22-.16.33-.24h7.9c.42 0 .63-.04.9.14.1.4.06 1.05.06 1.56v3.86c0 .15.02.34-.05.43Zm-6.92-2.8v-.02l.3-.17c.02-.05-.05-.14-.07-.21-.12.05-.27.11-.37.2h-.03c.03-.1.02-.24.07-.32v-.03h-.27v.35a.95.95 0 0 1-.33-.2c-.05.05-.07.13-.12.18.03.09.2.16.28.2a.84.84 0 0 1-.28.18c.02.09.06.16.1.24.11-.02.26-.1.33-.17h.02v.37h.27c-.01-.1-.02-.27-.07-.34v-.01c.12.01.3.1.38.16h.02l.08-.25c-.1-.04-.22-.1-.3-.16h-.01Zm1.65-.02a.9.9 0 0 0 .33-.17l.02-.03a.5.5 0 0 1-.1-.18.95.95 0 0 0-.37.2h-.03l.08-.35h-.3v.35c-.1-.06-.18-.14-.28-.19v-.01h-.02c-.04.06-.1.1-.12.18h-.01c.03.08.23.17.31.2v.02c-.12.03-.2.11-.31.16.02.09.08.18.13.24.01.02.23-.12.27-.15h.03v.35h.3a.83.83 0 0 0-.08-.32v-.05l.38.19c.06-.07.08-.18.14-.24-.1-.08-.25-.1-.34-.18-.03-.01-.02 0-.03-.02Zm1.93-.37c-.01-.01-.3.15-.33.19h-.03c0-.12.02-.24.03-.35h-.27v.35c-.13-.04-.22-.14-.33-.2-.03.06-.06.15-.1.2.06.07.18.13.26.18a.62.62 0 0 1-.26.18l.08.24a.7.7 0 0 0 .33-.17h.02v.37h.27c0-.09 0-.24-.03-.3v-.07l.36.18c.03-.06.05-.14.09-.2-.03-.12-.24-.14-.32-.21-.03-.01-.02 0-.03-.02l.35-.17a.41.41 0 0 0-.09-.2Zm12.43 1.8-.85-.01-1.3-.05h-.45c-.25-.06-.6-.04-.87-.04h-.3c-.16-.03-.4.03-.58-.01-.27-.06-.73-.04-1.04-.04V15c.32 0 .78.03 1.07-.03.22-.05.5.02.7-.02h.35c.32 0 .76.03 1.05-.04h.35c.32 0 .76.03 1.05-.03h.7c.42-.09.63-.18.72-.58.1-.4-.35-.77-.6-.83v-.03Zm-22.14 2.7-.41.67c-.14.23-.24.59-.42.77v.04h1.23V16c.05-.23.06-.48.06-.75h-.05c-.14.28-.24.63-.4.9l-.01-.01Zm20.04 3.53c-.63-.4-1.27-.77-1.9-1.17-.31-.2-.64-.38-.95-.59-.13-.08-.27-.22-.44-.26v1.92c.03.05.15.06.2.1.22.13.45.23.67.36.44.27.92.48 1.37.75.28.18.6.38.9.52.28.13.77.07.92-.13.23-.33.15-.92-.14-1.14-.2-.14-.42-.23-.63-.36ZM22.54 23h-.18c-.12.08-.35.01-.47.09h-1.22c.09.25.37.6.52.83.39.62.73 1.24 1.12 1.85.1.17.46.5.8.37.3-.12.69-.48.53-.98L22.54 23Zm-12.51.6-.5 1.1c-.07.17-.2.32-.25.5-.16.5.25.87.57.96.44.12.73-.39.86-.6l.99-1.59c.16-.26.32-.65.52-.87v-.01h-1.94c-.05.18-.18.35-.25.51Zm7.27-.51h-1.68c0 .29-.02.68.03.95.04.18-.02.42.02.58.04.19-.02.42.02.59v.3c0 .27-.03.6.03.86l.02.92c.07.33.29.52.61.6.34.08.7-.27.79-.45.1-.22.06-.64.06-.93v-.29l.1-3.13Z" clip-rule="evenodd"/></svg>
diff --git a/src/themes/fennec/progress-bar/progress-bar.css b/src/themes/fennec/progress-bar/progress-bar.css
new file mode 100644
index 0000000..904e8e0
--- /dev/null
+++ b/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);
+	}
+}
diff --git a/src/themes/fennec/progress-bar/progress-bar.html b/src/themes/fennec/progress-bar/progress-bar.html
new file mode 100644
index 0000000..0df3ca5
--- /dev/null
+++ b/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>
diff --git a/src/themes/fennec/progress-bar/progress-bar.js b/src/themes/fennec/progress-bar/progress-bar.js
new file mode 100644
index 0000000..fb42692
--- /dev/null
+++ b/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})`
+		},
+	},
+}
diff --git a/src/themes/fennec/shell/shell.html b/src/themes/fennec/shell/shell.html
index 8dd5477..bafe685 100644
--- a/src/themes/fennec/shell/shell.html
+++ b/src/themes/fennec/shell/shell.html
@@ -1,6 +1,6 @@
 <template v-if="$map.name">
 	<!-- <Radar /> -->
-	<!-- <TopBar /> -->
+	<TopBar />
 	<PlayersAlive />
 
 	<!-- <PlayerSidebars /> -->
diff --git a/src/themes/fennec/shell/shell.js b/src/themes/fennec/shell/shell.js
index cb079a5..c9ba5e5 100644
--- a/src/themes/fennec/shell/shell.js
+++ b/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,
 	},
 }
diff --git a/src/themes/fennec/theme.json b/src/themes/fennec/theme.json
index e2c9098..e5df5ee 100644
--- a/src/themes/fennec/theme.json
+++ b/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,
diff --git a/src/themes/fennec/top-bar/center/center.css b/src/themes/fennec/top-bar/center/center.css
new file mode 100644
index 0000000..64c5796
--- /dev/null
+++ b/src/themes/fennec/top-bar/center/center.css
@@ -0,0 +1,209 @@
+.center {
+	display: grid;
+	grid-template-columns: 1fr 3fr 1fr;
+	grid-template-rows: 2fr 1fr 1fr;
+	grid-template-areas:
+		'score-left current-round score-right'
+		'maps-left current-map maps-right'
+		'match-point-rounds match-point-rounds match-point-rounds';
+}
+
+.score {
+	display: flex;
+
+	font-size: var(--top-bar-score-font-size);
+	font-weight: 700;
+
+	&.--left::before,
+	&.--right::after {
+		content: '';
+		display: block;
+		width: 2rem;
+		height: 100%;
+	}
+
+	.inner {
+		padding: var(--top-bar-padding-x) 0;
+		min-width: 2ch;
+
+		isolation: isolate;
+		text-align: center;
+		z-index: 1;
+	}
+
+	&.--ct {
+		&.--left::before,
+		&.--right::after,
+		.inner {
+			background: var(--counter-terrorists);
+		}
+	}
+
+	&.--t {
+		&.--left::before,
+		&.--right::after,
+		.inner {
+			background: var(--terrorists);
+		}
+	}
+
+	&.--left {
+		grid-area: score-left;
+
+		&::before {
+			transform: skewX(20deg) translateX(-0.825rem);
+		}
+
+		.inner {
+			padding-left: 0.5rem;
+			padding-right: 1rem;
+			margin-left: -1.75rem;
+		}
+	}
+
+	&.--right {
+		grid-area: score-right;
+
+		&::after {
+			transform: skewX(-20deg) translateX(0.825rem);
+		}
+
+		.inner {
+			padding-right: 0.5rem;
+			padding-left: 1rem;
+			margin-right: -1.75rem;
+		}
+	}
+}
+
+.maps {
+	background: rgba(255, 255, 255, 0.75);
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	&.--left {
+		grid-area: maps-left;
+		padding-left: 0.5rem;
+		clip-path: polygon(0 0, 100% 0, 100% 100%, 0.85rem 100%);
+	}
+
+	&.--right {
+		grid-area: maps-right;
+		padding-right: 0.5rem;
+		clip-path: polygon(0 0, 100% 0, calc(100% - 0.85rem) 100%, 0 100%);
+	}
+
+	.pip {
+		width: 0.6rem;
+		aspect-ratio: 1;
+		border: 0.2rem solid;
+		margin: 0.3rem;
+	}
+
+	&.--ct .pip {
+		border-color: var(--counter-terrorists);
+
+		&.--filled {
+			background: var(--counter-terrorists);
+		}
+	}
+
+	&.--t .pip {
+		border-color: var(--terrorists);
+
+		&.--filled {
+			background: var(--terrorists);
+		}
+	}
+}
+
+.current-round {
+	grid-area: current-round;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: space-around;
+
+	padding: 0.25rem;
+	background: rgba(0, 0, 0, 0.5);
+
+	&.--warmup {
+		font-size: 1.5rem;
+		letter-spacing: 0.2em;
+		text-transform: uppercase;
+	}
+
+	.clock {
+		font-size: 2.25rem;
+	}
+
+	.bomb {
+		height: 2.25rem;
+
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.round-number {
+		font-size: 1.3rem;
+	}
+}
+
+/* apparently CSS nesting doesn't support element selectors within class selectors or something (yet) */
+.current-round img {
+	&.paused-icon,
+	&.planted-bomb-icon {
+		height: 2rem;
+	}
+
+	&.bombsite-icon {
+		height: 1.75rem;
+		margin-left: 0.75rem;
+	}
+}
+
+.current-map {
+	grid-area: current-map;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	background: rgba(255, 255, 255, 0.75);
+	color: #000;
+	font-size: 1.35rem;
+	font-weight: 700;
+	letter-spacing: 0.2em;
+	text-transform: uppercase;
+}
+
+.match-point-rounds-overflow-container {
+	grid-area: match-point-rounds;
+	overflow: hidden;
+}
+
+.match-point-rounds {
+	height: 100%;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	background: rgba(0, 0, 0, 0.5);
+	clip-path: polygon(0.85rem 0, calc(100% - 0.85rem) 0, calc(100% - 1.7rem) 100%, 1.7rem 100%);
+	font-size: 1.35rem;
+	font-weight: 700;
+	letter-spacing: 0.2em;
+	text-transform: uppercase;
+	transition:
+		clip-path var(--fade-default-duration) ease,
+		transform var(--fade-default-duration) ease;
+
+	&:not(.--active) {
+		clip-path: polygon(0 0, 100% 0, calc(100% - 0.85rem) 100%, 0.85rem 100%);
+		transform: translateY(-100%);
+	}
+}
diff --git a/src/themes/fennec/top-bar/center/center.html b/src/themes/fennec/top-bar/center/center.html
new file mode 100644
index 0000000..4846951
--- /dev/null
+++ b/src/themes/fennec/top-bar/center/center.html
@@ -0,0 +1,70 @@
+<div class="center">
+	<div :class="['score', '--left', leftTeamColorClass]">
+		<div class="inner">
+			{{ $teams[0].score }}
+		</div>
+	</div>
+
+	<div :class="['maps', '--left', leftTeamColorClass]">
+		<!-- TODO dynamic -->
+		<div class="pip"></div>
+		<div class="pip --filled"></div>
+		<div class="pip --filled"></div>
+	</div>
+
+	<div :class="['score', '--right', rightTeamColorClass]">
+		<div class="inner">
+			{{ $teams[1].score }}
+		</div>
+	</div>
+
+	<div :class="['maps', '--right', rightTeamColorClass]">
+		<!-- TODO dynamic -->
+		<div class="pip --filled"></div>
+		<div class="pip"></div>
+		<div class="pip"></div>
+	</div>
+
+	<div v-if="$map.phase === 'warmup'" class="current-round --warmup">
+		Warmup
+	</div>
+
+	<div v-else class="current-round">
+		<img v-if="$round.phase === 'paused'" class="paused-icon" src="/hud/img/icons/pause.svg" alt="">
+
+		<div v-else-if="$bomb.isPlanted" class="bomb">
+			<img class="planted-bomb-icon" src="/hud/img/icons/planted-bomb.svg" alt="">
+
+			<img v-if="$bomb.bombsite === 'a'" class="bombsite-icon --a" src="/hud/img/icons/bombsite-a.svg" alt="">
+			<img v-else-if="$bomb.bombsite === 'b'" class="bombsite-icon --b" src="/hud/img/icons/bombsite-b.svg" alt="">
+		</div>
+
+		<!-- TODO 10 seconds in red -->
+		<div v-else class="clock">
+			<Digits :value="clockMinutes" digits="1"></Digits>:<Digits :value="clockSeconds" digits="2" pad="0"></Digits>
+		</div>
+
+		<div class="round-number">
+			<template v-if="$round.isOvertime">
+				OT {{ $round.overtimeNumber }}
+				Round {{ $round.roundNumberInCurrentOvertime }}/{{ $opts['cvars.mp_overtime_maxrounds'] }}
+			</template>
+
+			<template v-else>
+				Round {{ $round.roundNumber }}/{{ $opts['cvars.mp_maxrounds'] }}
+			</template>
+		</div>
+	</div>
+
+	<div class="current-map">
+		Map 3 of 5
+	</div>
+
+	<div class="match-point-rounds-overflow-container">
+		<div :class="['match-point-rounds', { '--active': isMatchPointRoundsActive }]">
+			First to
+			{{ $round.matchPointAtScore + 1 }}
+			Rounds
+		</div>
+	</div>
+</div>
diff --git a/src/themes/fennec/top-bar/center/center.js b/src/themes/fennec/top-bar/center/center.js
new file mode 100644
index 0000000..1975ecb
--- /dev/null
+++ b/src/themes/fennec/top-bar/center/center.js
@@ -0,0 +1,35 @@
+import Digits from '/hud/digits/digits.vue'
+import { teamColorClass } from '/hud/helpers/team-color-class.js'
+
+export default {
+	components: {
+		Digits,
+	},
+
+	computed: {
+		clockMinutes() {
+			return Math.floor(this.$round.phaseEndsInSec / 60)
+		},
+
+		clockSeconds() {
+			return Math.ceil(this.$round.phaseEndsInSec % 60)
+		},
+
+		isMatchPointRoundsActive() {
+			// TODO configurable: only show in freezetime
+			return this.$round.isFreezetime && this.$round.isOvertime
+		},
+
+		leftTeamColorClass() {
+			return this.teamColorClass(this.$teams[0])
+		},
+
+		rightTeamColorClass() {
+			return this.teamColorClass(this.$teams[1])
+		},
+	},
+
+	methods: {
+		teamColorClass,
+	},
+}
diff --git a/src/themes/fennec/top-bar/team/team.css b/src/themes/fennec/top-bar/team/team.css
new file mode 100644
index 0000000..3faf9d8
--- /dev/null
+++ b/src/themes/fennec/top-bar/team/team.css
@@ -0,0 +1,204 @@
+.team {
+	transform-origin: top;
+
+	/* TODO the 1.65rem magic number breaks at aspect ratios >= ca. 2.2:1 */
+	&.--left {
+		transform: skewX(20deg) translateX(-1.65rem);
+	}
+
+	&.--right {
+		transform: skewX(-20deg) translateX(1.65rem);
+	}
+}
+
+.name-wrapper,
+.bomb-timer-wrapper,
+.round-winner-wrapper,
+.match-point-wrapper,
+.timeout-wrapper {
+	display: grid;
+	grid-template-rows: 1fr;
+
+	overflow: visible clip;
+	transition:
+		max-height var(--fade-default-duration) ease,
+		transform var(--fade-default-duration) ease;
+
+	&::before {
+		content: '';
+		display: block;
+	}
+
+	&.--ct::before {
+		background: var(--counter-terrorists);
+	}
+
+	&.--t::before {
+		background: var(--terrorists);
+	}
+
+	&.--left {
+		grid-template-columns: 2rem 1fr;
+	}
+
+	&.--right {
+		grid-template-columns: 1fr 2rem;
+
+		&::before {
+			grid-area: 1/2;
+		}
+	}
+
+	.inner {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}
+
+.name,
+.bomb-timer,
+.round-winner,
+.match-point,
+.timeout {
+	display: flex;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.5);
+
+	&.--left {
+		.inner {
+			transform: skewX(-20deg);
+		}
+	}
+
+	&.--right {
+		.inner {
+			transform: skewX(20deg);
+		}
+	}
+}
+
+.name-wrapper {
+	font-size: 2.5rem;
+	max-height: var(--top-bar-row-height);
+}
+
+.name {
+	height: var(--top-bar-row-height);
+
+	&.--ct {
+		background: rgba(var(--counter-terrorists-rgb), 0.5);
+	}
+
+	&.--t {
+		background: rgba(var(--terrorists-rgb), 0.5);
+	}
+}
+
+.bomb-timer-wrapper {
+	max-height: var(--top-bar-half-row-height);
+}
+
+.bomb-timer {
+	height: var(--top-bar-half-row-height);
+	padding: 0 1.75rem;
+}
+
+.round-winner-wrapper {
+	max-height: var(--top-bar-row-height);
+}
+
+.round-winner {
+	height: var(--top-bar-row-height);
+	letter-spacing: 0.25em;
+	text-transform: uppercase;
+
+	&.--ct {
+		background: rgba(var(--counter-terrorists-rgb), 0.7);
+	}
+
+	&.--t {
+		background: rgba(var(--terrorists-rgb), 0.7);
+	}
+}
+
+.match-point-wrapper {
+	max-height: var(--top-bar-row-height);
+}
+
+.match-point {
+	height: var(--top-bar-row-height);
+
+	font-weight: 700;
+	letter-spacing: 0.5em;
+	text-transform: uppercase;
+	font-size: 2.25rem;
+
+	&.--ct {
+		background: rgba(var(--counter-terrorists-rgb), 0.85);
+	}
+
+	&.--t {
+		background: rgba(var(--terrorists-rgb), 0.85);
+	}
+}
+
+.timeout-wrapper {
+	max-height: calc(2 * var(--top-bar-row-height));
+}
+
+.timeout {
+	height: calc(2 * var(--top-bar-row-height));
+
+	.inner {
+		flex-direction: column;
+		justify-content: space-evenly;
+	}
+
+	.label {
+		font-size: 2.25rem;
+		font-weight: 700;
+	}
+
+	.remaining {
+		font-size: 1.75rem;
+	}
+
+	.progress-bar-background {
+		margin-top: 0.5rem;
+	}
+
+	&.--left .inner {
+		padding: 0.5rem 1rem 0.5rem 2.5rem;
+	}
+
+	&.--right .inner {
+		padding: 0.5rem 2.5rem 0.5rem 1rem;
+	}
+}
+
+.slide-enter-active,
+.slide-leave-active {
+	.name,
+	.bomb-timer,
+	.round-winner,
+	.match-point,
+	.timeout {
+		transform-origin: top;
+		transition: transform var(--fade-default-duration) ease;
+	}
+}
+
+.slide-enter-from,
+.slide-leave-to {
+	max-height: 0;
+
+	.name,
+	.bomb-timer,
+	.round-winner,
+	.match-point,
+	.timeout {
+		transform: translateY(-100%);
+	}
+}
diff --git a/src/themes/fennec/top-bar/team/team.html b/src/themes/fennec/top-bar/team/team.html
new file mode 100644
index 0000000..fefaaa8
--- /dev/null
+++ b/src/themes/fennec/top-bar/team/team.html
@@ -0,0 +1,51 @@
+<div :class="['team', positionClass]">
+	<div :class="['name-wrapper', positionClass, colorClass]">
+		<div :class="['name', positionClass, colorClass]">
+			<div class="inner">
+				{{ team.name }}
+			</div>
+		</div>
+	</div>
+
+	<TransitionGroup name="slide">
+		<div v-if="isBombTimerPanelActive" :class="['bomb-timer-wrapper', positionClass, colorClass]" pad="2">
+			<div :class="['bomb-timer', positionClass]">
+				<div class="inner">
+					<ProgressBar :colorClass="bombTimerColorClass" :direction="position" :max="bombTimerMaxValue" :value="bombTimerValue" />
+				</div>
+			</div>
+		</div>
+
+		<div v-if="isRoundWinnerPanelActive" :class="['round-winner-wrapper', positionClass, colorClass]" pad="2">
+			<div :class="['round-winner', positionClass, colorClass]">
+				<div class="inner">
+					wins the round
+				</div>
+			</div>
+		</div>
+
+		<div v-if="isMatchPointPanelActive" :class="['match-point-wrapper', positionClass, colorClass]" pad="2">
+			<div :class="['match-point', positionClass, colorClass]">
+				<div class="inner">
+					Match Point
+				</div>
+			</div>
+		</div>
+
+		<div v-if="isTimeoutPanelActive" :class="['timeout-wrapper', positionClass, colorClass]" pad="2">
+			<div :class="['timeout', positionClass]">
+				<div class="inner">
+					<div class="label">
+						Tactical Timeout
+					</div>
+
+					<div class="remaining">
+						{{ team.timeoutsRemaining }} / {{ $opts['cvars.mp_team_timeout_max'] }} remaining
+					</div>
+
+					<ProgressBar :colorClass="colorClass" :direction="position" :max="$opts['cvars.mp_team_timeout_time']" :value="$round.phaseEndsInSec" />
+				</div>
+			</div>
+		</div>
+	</TransitionGroup>
+</div>
diff --git a/src/themes/fennec/top-bar/team/team.js b/src/themes/fennec/top-bar/team/team.js
new file mode 100644
index 0000000..a5c4d83
--- /dev/null
+++ b/src/themes/fennec/top-bar/team/team.js
@@ -0,0 +1,84 @@
+import { teamColorClass } from '/hud/helpers/team-color-class.js'
+import ProgressBar from '/hud/progress-bar/progress-bar.vue'
+
+export default {
+	props: [
+		'position',
+		'team',
+	],
+
+	components: {
+		ProgressBar,
+	},
+
+	computed: {
+		colorClass() {
+			return this.teamColorClass(this.team)
+		},
+
+		positionClass() {
+			return `--${this.position}`
+		},
+
+		isBombTimerPanelActive() {
+			switch (this.team.side) {
+				case 2: return ['defusing', 'planted', 'planting'].includes(this.$bomb.state)
+				case 3: return this.$bomb.state === 'defusing'
+			}
+		},
+
+		isRoundWinnerPanelActive() {
+			return (this.$round.phase === 'over' && this.$round.winningSide === this.team.side)
+			// TODO configurable
+			// || (this.$round.isFreezetime && this.$rounds[this.$rounds.length - 1].winningSide === this.team.side)
+		},
+
+		isMatchPointPanelActive() {
+			return this.$round.isFreezetime && this.team.score === this.$round.matchPointAtScore
+		},
+
+		isTimeoutPanelActive() {
+			switch (this.team.side) {
+				case 2: return this.$round.phase === 'timeout_t'
+				case 3: return this.$round.phase === 'timeout_ct'
+			}
+		},
+
+		bombTimerValue() {
+			if (this.team.side === 2 && this.$bomb.state === 'defusing') return this.$bomb.plantedCountdownSec
+			return this.$bomb.countdownSec
+		},
+
+		bombTimerColorClass() {
+			if (this.team.side === 3) return '--ct'
+
+			if (this.$bomb.state === 'planting') return '--bomb'
+			return '--t'
+		},
+
+		bombTimerMaxValue() {
+			switch (this.team.side) {
+				case 2: {
+					if (this.$bomb.state === 'planting') return 3.2
+					// TODO override this after the bomb has been planted
+					return this.$opts['cvars.mp_c4timer']
+				}
+
+				case 3: {
+					if (this.$bomb?.player?.hasDefuser) return 5
+					return 10
+				}
+			}
+		},
+
+		matchPointPanelText() {
+			// TODO "series point" when match win would also win series
+			// TODO config option to have this say "map point" instead
+			return 'Match Point'
+		},
+	},
+
+	methods: {
+		teamColorClass,
+	},
+}
diff --git a/src/themes/fennec/top-bar/top-bar.css b/src/themes/fennec/top-bar/top-bar.css
new file mode 100644
index 0000000..5364c73
--- /dev/null
+++ b/src/themes/fennec/top-bar/top-bar.css
@@ -0,0 +1,13 @@
+.top-bar {
+	position: fixed;
+	top: var(--viewport-margin-top);
+	left: calc((100% - var(--top-bar-width)) / 2);
+	right: calc((100% - var(--top-bar-width)) / 2);
+
+	display: grid;
+	grid-template-columns: 20fr 13fr 20fr;
+	align-items: start;
+
+	filter: var(--filter-drop-shadow);
+	text-align: center;
+}
diff --git a/src/themes/fennec/top-bar/top-bar.html b/src/themes/fennec/top-bar/top-bar.html
new file mode 100644
index 0000000..6765fa8
--- /dev/null
+++ b/src/themes/fennec/top-bar/top-bar.html
@@ -0,0 +1,5 @@
+<div class="top-bar">
+	<Team :team="$teams[0]" position="left" />
+	<Center />
+	<Team :team="$teams[1]" position="right" />
+</div>
diff --git a/src/themes/fennec/top-bar/top-bar.js b/src/themes/fennec/top-bar/top-bar.js
new file mode 100644
index 0000000..701a235
--- /dev/null
+++ b/src/themes/fennec/top-bar/top-bar.js
@@ -0,0 +1,10 @@
+import Center from '/hud/top-bar/center/center.vue'
+import Digits from '/hud/digits/digits.vue'
+import Team from '/hud/top-bar/team/team.vue'
+
+export default {
+	components: {
+		Center,
+		Team,
+	},
+}
diff --git a/src/themes/raw/bombsites.json b/src/themes/raw/bombsites.json
new file mode 100644
index 0000000..d1dcf5e
--- /dev/null
+++ b/src/themes/raw/bombsites.json
@@ -0,0 +1,395 @@
+{
+	"de_abbey": {
+		"a": {
+			"center": [-3744, 848, -60],
+			"minimum": [-3889, 703, -89],
+			"maximum": [-3599, 993, -31]
+		},
+
+		"b": {
+			"center": [-1356, 258, -80],
+			"minimum": [-1557, 95, -97],
+			"maximum": [-1155, 421, -63]
+		}
+	},
+
+	"de_ali": {
+		"a": {
+			"center": [1152, 512, 120],
+			"minimum": [1023, 383, 79],
+			"maximum": [1281, 641, 161]
+		},
+
+		"b": {
+			"center": [-456, 1728, 142],
+			"minimum": [-625, 1407, 95],
+			"maximum": [-287, 2049, 189]
+		}
+	},
+
+	"de_ancient": {
+		"a": {
+			"center": [-1406, 862, 68],
+			"minimum": [-1553, 747, 51],
+			"maximum": [-1259, 977, 85]
+		},
+
+		"b": {
+			"center": [797, 62, 144],
+			"minimum": [668, -67, 127],
+			"maximum": [926, 191, 161]
+		}
+	},
+
+	"de_anubis": {
+		"a": {
+			"center": [1238, 1960, -192.5],
+			"minimum": [947, 1679, -201],
+			"maximum": [1529, 2241, -184]
+		},
+
+		"b": {
+			"center": [-1044, 692, -4],
+			"minimum": [-1225, 519, -33],
+			"maximum": [-863, 865, 25]
+		}
+	},
+
+	"de_austria": {
+		"a": {
+			"center": [-1224, 1232, -128],
+			"minimum": [-1537, 895, -193],
+			"maximum": [-911, 1569, -63]
+		},
+
+		"b": {
+			"center": [1780, 431, -95],
+			"minimum": [1559, 31, -119],
+			"maximum": [2001, 831, -71]
+		}
+	},
+
+	"de_aztec": {
+		"a": {
+			"center": [-1792, 1056, -192],
+			"minimum": [-2049, 831, -225],
+			"maximum": [-1535, 1281, -159]
+		},
+
+		"b": {
+			"center": [-280, -1512, -192],
+			"minimum": [-529, -1665, -225],
+			"maximum": [-31, -1359, -159]
+		}
+	},
+
+	"de_bank": {
+		"a": {
+			"center": [-468, -278, 16],
+			"minimum": [-569, -415, -26],
+			"maximum": [-367, -141, 58]
+		}
+	},
+
+	"de_biome": {
+		"a": {
+			"center": [-322, 759.96875, -528],
+			"minimum": [-577, 431, -569],
+			"maximum": [-67, 1089, -487]
+		},
+
+		"b": {
+			"center": [1732, 436, -640],
+			"minimum": [1511, 295, -657],
+			"maximum": [1953, 577, -623]
+		}
+	},
+
+	"de_cache": {
+		"a": {
+			"center": [-239.5, 1754.5, 1703.5],
+			"minimum": [-433, 1476, 1685],
+			"maximum": [-46, 2033, 1722]
+		},
+
+		"b": {
+			"center": [-46.5, -1260, 1677],
+			"minimum": [-311, -1469, 1660],
+			"maximum": [218, -1051, 1694]
+		}
+	},
+
+	"de_canals": {
+		"a": {
+			"center": [-1317.5, -704, 192],
+			"minimum": [-1417, -858, 63],
+			"maximum": [-1218, -550, 321]
+		},
+
+		"b": {
+			"center": [128, -1080, 304],
+			"minimum": [15, -1281, 255],
+			"maximum": [241, -879, 353]
+		}
+	},
+
+	"de_castle": {
+		"a": {
+			"center": [-1940, -1100, 576],
+			"minimum": [-2025, -1313, 543],
+			"maximum": [-1855, -887, 609]
+		},
+
+		"b": {
+			"center": [1480, -528, 664],
+			"minimum": [1343, -705, 639],
+			"maximum": [1617, -351, 689]
+		}
+	},
+
+	"de_cbble": {
+		"a": {
+			"center": [-2296, -999.96875, 17],
+			"minimum": [-2441, -1129, -17],
+			"maximum": [-2151, -871, 51]
+		},
+
+		"b": {
+			"center": [185, -872.46875, -56],
+			"minimum": [-51, -1133, -89],
+			"maximum": [421, -612, -23]
+		}
+	},
+
+	"de_dust2": {
+		"a": {
+			"center": [1112, 2480, 144],
+			"minimum": [975, 2335, 95],
+			"maximum": [1249, 2625, 193]
+		},
+
+		"b": {
+			"center": [-1536, 2680, 48],
+			"minimum": [-1729, 2495, -1],
+			"maximum": [-1343, 2865, 97]
+		}
+	},
+
+	"de_elysion": {
+		"a": {
+			"center": [354, 188, 9626],
+			"minimum": [119, 31, 9617],
+			"maximum": [589, 345, 9635]
+		}
+	},
+
+	"de_engage": {
+		"a": {
+			"center": [704, -814.03125, 2052],
+			"minimum": [511, -1049, 2047],
+			"maximum": [897, -579, 2057]
+		},
+
+		"b": {
+			"center": [-1616, -160, 2212],
+			"minimum": [-1809, -321, 2207],
+			"maximum": [-1423, 1, 2217]
+		}
+	},
+
+	"de_guard": {
+		"a": {
+			"center": [64, -960, -132],
+			"minimum": [-145, -1185, -161],
+			"maximum": [273, -735, -103]
+		}
+	},
+
+	"de_inferno": {
+		"a": {
+			"center": [1976, 434, 180],
+			"minimum": [1791, 159, 159],
+			"maximum": [2161, 709, 201]
+		},
+
+		"b": {
+			"center": [368, 2776, 192],
+			"minimum": [143, 2543, 159],
+			"maximum": [593, 3009, 225]
+		}
+	},
+
+	"de_lake": {
+		"a": {
+			"center": [3711, -4204.5, -52],
+			"minimum": [3584, -4337, -73],
+			"maximum": [3838, -4072, -31]
+		}
+	},
+
+	"de_mirage": {
+		"a": {
+			"center": [-440, -2168, -168],
+			"minimum": [-617, -2329, -181],
+			"maximum": [-263, -2007, -155]
+		},
+
+		"b": {
+			"center": [-2048, 256, -151],
+			"minimum": [-2217, 71, -160],
+			"maximum": [-1879, 441, -142]
+		}
+	},
+
+	"de_nuke": {
+		"a": {
+			"center": [688.5, -719, -367.5],
+			"minimum": [527, -914, -416],
+			"maximum": [850, -524, -319]
+		},
+
+		"b": {
+			"center": [592, -1008, -748],
+			"minimum": [319, -1313, -769],
+			"maximum": [865, -703, -727]
+		}
+	},
+
+	"de_overpass": {
+		"a": {
+			"center": [-2136, 662, 502],
+			"minimum": [-2601, 351, 471],
+			"maximum": [-1671, 973, 533]
+		},
+
+		"b": {
+			"center": [-1104, 64, 104],
+			"minimum": [-1249, -97, 79],
+			"maximum": [-959, 225, 129]
+		}
+	},
+
+	"de_safehouse": {
+		"a": {
+			"center": [1823.5, 214, 474],
+			"minimum": [1725, 63, 445],
+			"maximum": [1922, 365, 503]
+		}
+	},
+
+	"de_santorini": {
+		"a": {
+			"center": [1174, 387, 7.5],
+			"minimum": [1003, 222, -27],
+			"maximum": [1345, 552, 42]
+		},
+
+		"b": {
+			"center": [-1561, -239.5, -58],
+			"minimum": [-1730, -399, -95],
+			"maximum": [-1392, -80, -21]
+		}
+	},
+
+	"de_season": {
+		"a": {
+			"center": [-224, 217.5, 28],
+			"minimum": [-385, 50, -1],
+			"maximum": [-63, 385, 57]
+		},
+
+		"b": {
+			"center": [2792, 1028.5, 34],
+			"minimum": [2607, 888, -1],
+			"maximum": [2977, 1169, 69]
+		}
+	},
+
+	"de_shortdust": {
+		"a": {
+			"center": [16, 1312, 52],
+			"minimum": [-129, 1167, 31],
+			"maximum": [161, 1457, 73]
+		}
+	},
+
+	"de_shortnuke": {
+		"b": {
+			"center": [592, -1008, -748],
+			"minimum": [319, -1313, -769],
+			"maximum": [865, -703, -727]
+		}
+	},
+
+	"de_stmarc": {
+		"a": {
+			"center": [-6920, 6944, 73],
+			"minimum": [-7049, 6777, 31],
+			"maximum": [-6791, 7111, 115]
+		}
+	},
+
+	"de_sugarcane": {
+		"a": {
+			"center": [-1815.90625, 185, 243.375],
+			"minimum": [-1991, 96, 201],
+			"maximum": [-1641, 274, 285]
+		}
+	},
+
+	"de_thrill": {
+		"a": {
+			"center": [776, -424, 100],
+			"minimum": [543, -705, 95],
+			"maximum": [1009, -143, 105]
+		},
+
+		"b": {
+			"center": [-1794.5, -194, 88],
+			"minimum": [-2022, -363, 79],
+			"maximum": [-1567, -25, 97]
+		}
+	},
+
+	"de_train": {
+		"a": {
+			"center": [567.96875, -17.5, -160.5],
+			"minimum": [235, -241, -217],
+			"maximum": [901, 206, -104]
+		},
+
+		"b": {
+			"center": [52, -1279, -303],
+			"minimum": [-249, -1440, -364],
+			"maximum": [353, -1118, -242]
+		}
+	},
+
+	"de_vertigo": {
+		"a": {
+			"center": [-293.5, -621, 11791.5],
+			"minimum": [-492, -721, 11775],
+			"maximum": [-95, -521, 11808]
+		},
+
+		"b": {
+			"center": [-2248, 797.5, 11758],
+			"minimum": [-2364, 656, 11743],
+			"maximum": [-2132, 939, 11773]
+		}
+	},
+
+	"de_zoo": {
+		"a": {
+			"center": [2055.96875, 3684, 96],
+			"minimum": [1807, 3463, 63],
+			"maximum": [2305, 3905, 129]
+		},
+
+		"b": {
+			"center": [1320, 756, 8],
+			"minimum": [911, 575, -17],
+			"maximum": [1729, 937, 33]
+		}
+	}
+}
diff --git a/src/themes/raw/core/app.js b/src/themes/raw/core/app.js
index 51fe14a..3ba2540 100644
--- a/src/themes/raw/core/app.js
+++ b/src/themes/raw/core/app.js
@@ -1,5 +1,5 @@
 import * as Vue from '/dependencies/vue.js'
-import { bomb, grenades, gsiState, map, misc, options, players, round, rounds, teams } from '/hud/core/state.js'
+import { bomb, bombsites, grenades, gsiState, map, misc, options, players, radars, round, rounds, teams } from '/hud/core/state.js'
 import { connectToWebsocket } from '/hud/core/websocket.js'
 import { loadModule } from '/dependencies/vue3-sfc-loader.js'
 import { sfcLoaderOptions } from '/hud/core/sfc-loader-options.js'
@@ -11,12 +11,14 @@ const app = Vue.createApp(
 )
 
 app.config.globalProperties.$bomb = bomb
+app.config.globalProperties.$bombsites = bombsites
 app.config.globalProperties.$grenades = grenades
 app.config.globalProperties.$gsiState = gsiState
 app.config.globalProperties.$map = map
 app.config.globalProperties.$misc = misc
 app.config.globalProperties.$opts = options
 app.config.globalProperties.$players = players
+app.config.globalProperties.$radars = radars
 app.config.globalProperties.$round = round
 app.config.globalProperties.$rounds = rounds
 app.config.globalProperties.$teams = teams
diff --git a/src/themes/raw/core/state.js b/src/themes/raw/core/state.js
index 81323c1..3291d0e 100644
--- a/src/themes/raw/core/state.js
+++ b/src/themes/raw/core/state.js
@@ -1,8 +1,10 @@
 import { reactive } from '/dependencies/vue.js'
 
 export const additionalState = reactive({})
+export const bombsites = reactive({})
 export const gsiState = reactive({})
 export const options = reactive({})
+export const radars = reactive({})
 
 export const bomb = reactive({})
 export const grenades = reactive([])
diff --git a/src/themes/raw/core/websocket-on-message.js b/src/themes/raw/core/websocket-on-message.js
index 3e1b78c..3d1f0e6 100644
--- a/src/themes/raw/core/websocket-on-message.js
+++ b/src/themes/raw/core/websocket-on-message.js
@@ -1,13 +1,15 @@
-import { additionalState, gsiState, options } from '/hud/core/state.js'
+import { additionalState, bombsites, gsiState, options, radars } from '/hud/core/state.js'
 import { parseGsiState } from '/hud/core/parse-gsi-state.js'
 
 export const onMessage = (msg) => {
 	const data = JSON.parse(msg.data)
 	console.debug(data)
 
-	Object.assign(additionalState, data.additionalState)
+	Object.assign(additionalState, data.additionalState, { unixTimestamp: data.unixTimestamp })
+	Object.assign(bombsites, data.bombsites)
 	Object.assign(gsiState, data.gsiState)
 	Object.assign(options, data.options)
+	Object.assign(radars, data.radars)
 
 	parseGsiState()
 }
diff --git a/src/themes/raw/gsi/helpers/find-bomb-site.js b/src/themes/raw/gsi/helpers/find-bomb-site.js
new file mode 100644
index 0000000..5dd91d6
--- /dev/null
+++ b/src/themes/raw/gsi/helpers/find-bomb-site.js
@@ -0,0 +1,23 @@
+import { bombsites, gsiState } from '/hud/core/state.js'
+import { insideVector } from '/hud/gsi/helpers/inside-vector.js'
+import { vectorDistance } from '/hud/gsi/helpers/vector-distance.js'
+
+export const findBombsite = (position) => {
+	const bombsiteConfig = bombsites[gsiState.map.name] || bombsites[gsiState.map.name.replace(/^.+\//, '')]
+	if (! bombsiteConfig) return
+
+	let leastDistance = null
+	let leastDistanceTo = null
+
+	for (const [bombsite, { center, minimum, maximum }] of Object.entries(bombsiteConfig)) {
+		if (insideVector(position, minimum, maximum)) return bombsite
+
+		const distance = vectorDistance(center, position)
+		if (leastDistance === null || distance < leastDistance) {
+			leastDistance = distance
+			leastDistanceTo = bombsite
+		}
+	}
+
+	if (leastDistanceTo) return leastDistanceTo
+}
diff --git a/src/themes/raw/gsi/format-map-name.js b/src/themes/raw/gsi/helpers/format-map-name.js
similarity index 86%
rename from src/themes/raw/gsi/format-map-name.js
rename to src/themes/raw/gsi/helpers/format-map-name.js
index 57af111..54710c1 100644
--- a/src/themes/raw/gsi/format-map-name.js
+++ b/src/themes/raw/gsi/helpers/format-map-name.js
@@ -1,5 +1,5 @@
 export const formatMapName = (name) => {
-	name = name.replace(/^._/, '')
+	name = name.replace(/^.*_/, '')
 	name = name.substring(0, 1).toUpperCase() + name.substring(1)
 
 	switch (name) {
diff --git a/src/themes/raw/gsi/helpers/inside-vector.js b/src/themes/raw/gsi/helpers/inside-vector.js
new file mode 100644
index 0000000..6d90be7
--- /dev/null
+++ b/src/themes/raw/gsi/helpers/inside-vector.js
@@ -0,0 +1,4 @@
+export const insideVector = ([x1, y1, z1], [x2, y2, z2], [x3, y3, z3]) =>
+	x1 >= x2 && x1 <= x3
+	&& y1 >= y2 && y1 <= y3
+	&& z1 >= z2 && z1 <= z3
diff --git a/src/themes/raw/gsi/helpers/vector-distance.js b/src/themes/raw/gsi/helpers/vector-distance.js
new file mode 100644
index 0000000..fb01a8f
--- /dev/null
+++ b/src/themes/raw/gsi/helpers/vector-distance.js
@@ -0,0 +1,3 @@
+export const vectorDistance = ([x1, y1, z1],  [x2, y2, z2]) => Math.sqrt(
+	Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2) + Math.pow(z1 - z2, 2),
+)
diff --git a/src/themes/raw/gsi/parse-bomb.js b/src/themes/raw/gsi/parse-bomb.js
index de6a359..46b546a 100644
--- a/src/themes/raw/gsi/parse-bomb.js
+++ b/src/themes/raw/gsi/parse-bomb.js
@@ -1,13 +1,47 @@
-import { gsiState, players } from '/hud/core/state.js'
+import { additionalState, bombsites, gsiState, players } from '/hud/core/state.js'
+import { findBombsite } from '/hud/gsi/helpers/find-bomb-site.js'
 import { parsePosition } from '/hud/gsi/parse-position.js'
 
 export const parseBomb = () => {
 	if (! gsiState.bomb) return {}
 
+	const countdownSec = getCountdownSec()
+	const isPlanted = ['defusing', 'planted'].includes(gsiState.bomb.state)
+	const position = parsePosition(gsiState.bomb.position)
+
 	return {
-		countdownSec: gsiState.bomb.hasOwnProperty('countdown') ? Number(gsiState.bomb.countdown) : undefined,
+		countdownSec,
+		isPlanted,
+		position,
+
+		bombsite: isPlanted && findBombsite(position),
+		plantedCountdownSec: getPlantedCountdownSec(countdownSec),
 		player: gsiState.bomb.player ? players.find((player) => player.steam64Id === gsiState.bomb.player) : undefined,
-		position: parsePosition(gsiState.bomb.position),
 		state: gsiState.bomb.state,
 	}
 }
+
+const getCountdownSec = () => {
+	if (gsiState.bomb.hasOwnProperty('countdown')) {
+		return Number(gsiState.bomb.countdown)
+	}
+
+	// in the ca. half-second between defuses being cut off and the bomb actually exploding, the countdown property is missing -- we want to keep it at 0 though
+	if (gsiState.bomb.state === 'planted') {
+		return 0
+	}
+}
+
+const getPlantedCountdownSec = (countdownSec) => {
+	if (gsiState.bomb.state === 'planted') return countdownSec
+
+	if (
+		! additionalState.lastKnownBombPlantedCountdown?.unixTimestamp
+		|| ! additionalState.lastKnownBombPlantedCountdown?.value
+		|| ! additionalState.unixTimestamp
+	) return
+
+	const secondsSinceLastKnownValue = (additionalState.unixTimestamp - additionalState.lastKnownBombPlantedCountdown.unixTimestamp) / 1000
+
+	return additionalState.lastKnownBombPlantedCountdown?.value - secondsSinceLastKnownValue
+}
diff --git a/src/themes/raw/gsi/parse-map.js b/src/themes/raw/gsi/parse-map.js
index 010272e..d66785f 100644
--- a/src/themes/raw/gsi/parse-map.js
+++ b/src/themes/raw/gsi/parse-map.js
@@ -1,5 +1,5 @@
 import { gsiState } from '/hud/core/state.js'
-import { formatMapName } from '/hud/gsi/format-map-name.js'
+import { formatMapName } from '/hud/gsi/helpers/format-map-name.js'
 
 export const parseMap = () => ({
 	formattedName: formatMapName(gsiState.map.name),
diff --git a/src/themes/raw/gsi/parse-round.js b/src/themes/raw/gsi/parse-round.js
index 3a2559c..dc1617c 100644
--- a/src/themes/raw/gsi/parse-round.js
+++ b/src/themes/raw/gsi/parse-round.js
@@ -1,8 +1,34 @@
-import { gsiState } from '/hud/core/state.js'
-
-export const parseRound = () => ({
-	isFreezetime: gsiState.round.phase === 'freezetime',
-	phase: gsiState.phase_countdowns.phase,
-	phaseEndsInSec: Number(gsiState.phase_countdowns.phase_ends_in),
-	roundNumber: gsiState.map.round,
-})
+import { gsiState, options } from '/hud/core/state.js'
+
+const getWinningSide = () => {
+	switch (gsiState.round.win_team) {
+		case 'T': return 2
+		case 'CT': return 3
+		default: return undefined
+	}
+}
+
+export const parseRound = () => {
+	const maxrounds = options['cvars.mp_maxrounds']
+	const overtimeMaxrounds = options['cvars.mp_overtime_maxrounds']
+
+	const roundNumber = gsiState.map.round + 1 - Number(gsiState.phase_countdowns.phase === 'over')
+	const isOvertime = roundNumber > maxrounds
+
+	const roundsInOvertimes = isOvertime ? roundNumber - maxrounds : 0
+	const overtimeNumber = isOvertime ? Math.floor((roundsInOvertimes - 1) / overtimeMaxrounds) + 1 : 0
+	const matchPointAtScore = isOvertime ? (maxrounds / 2) + (overtimeMaxrounds / 2) + (overtimeNumber - 1) * overtimeMaxrounds : Math.floor(maxrounds / 2)
+
+	return {
+		isOvertime,
+		matchPointAtScore,
+		overtimeNumber,
+		roundNumber,
+
+		isFreezetime: gsiState.round.phase === 'freezetime',
+		phase: gsiState.phase_countdowns.phase,
+		phaseEndsInSec: Number(gsiState.phase_countdowns.phase_ends_in),
+		roundNumberInCurrentOvertime: isOvertime ? Math.max(1, roundNumber - maxrounds - 1 - ((Math.ceil((roundNumber - maxrounds - 1) / overtimeMaxrounds) - 1) * overtimeMaxrounds) - Number(gsiState.phase_countdowns.phase === 'over')) : 0,
+		winningSide: getWinningSide(),
+	}
+}
diff --git a/src/themes/raw/gsi/parse-rounds.js b/src/themes/raw/gsi/parse-rounds.js
index 932592b..1f7e933 100644
--- a/src/themes/raw/gsi/parse-rounds.js
+++ b/src/themes/raw/gsi/parse-rounds.js
@@ -13,6 +13,7 @@ const getPlainReason = (reason) => {
 }
 
 export const parseRounds = () => {
+	// TODO this resets every 30 rounds
 	return Object.entries(gsiState.map.round_wins || {}).map(([roundNumber, reason]) => {
 		const winningSide = reason.startsWith('ct_win') ? 3 : 2