#52: add theme options

src/server/websocket.js

@@ -1,6 +1,7 @@
 import { WebSocketServer, WebSocket } from 'ws'
 
 import { additionalState, gsiState } from './state.js'
+import { getSettings } from './settings.js'
 
 export class Websocket {
 	constructor(server) {
@@ -10,17 +11,24 @@ export class Websocket {
 			this.sendState(client)
 		})
 
-		// TODO
+		this.optionsCache = {}
+
 		setInterval(() => {
-			this.broadcastState()
-		}, 1000)
+			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 }) => {
+				this.optionsCache = Object.fromEntries(Object.entries(settings.options).map(([key, { value }]) => [key, value]))
+			})
+		}, 5000)
 	}
 
 	getState() {
 		return {
 			additionalState,
 			gsiState,
 
+			options: this.optionsCache,
 			timestamp: new Date(),
 		}
 	}

src/themes/fennec/players-alive/players-alive.js

@@ -3,7 +3,11 @@ import { teamColorClass } from '/hud/helpers/team-color-class.js'
 export default {
 	computed: {
 		isActive() {
-			return !this.$round.isFreezetime
+			if (this.$opts['preferences.playersAlive.hideDuringFreezetime']) {
+				return !this.$round.isFreezetime
+			}
+
+			return true
 		},
 
 		leftTeamAlive() {

src/themes/fennec/shell/shell.html

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

src/themes/fennec/theme.json

@@ -1,3 +1,12 @@
 {
-	"parent": "raw"
+	"parent": "raw",
+
+	"options": {
+		"preferences.playersAlive.hideDuringFreezetime": {
+			"type": "boolean",
+			"value": true,
+			"section": "Preferences",
+			"label": "Hide \"Players Alive\" during freezetime"
+		}
+	}
 }

src/themes/raw/core/app.js

@@ -1,5 +1,5 @@
 import * as Vue from '/dependencies/vue.js'
-import { bomb, grenades, gsiState, map, misc, players, round, rounds, teams } from '/hud/core/state.js'
+import { bomb, grenades, gsiState, map, misc, options, players, 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'
@@ -15,6 +15,7 @@ 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.$round = round
 app.config.globalProperties.$rounds = rounds

src/themes/raw/core/state.js

@@ -2,6 +2,7 @@ import { reactive } from '/dependencies/vue.js'
 
 export const additionalState = reactive({})
 export const gsiState = reactive({})
+export const options = reactive({})
 
 export const bomb = reactive({})
 export const grenades = reactive([])

src/themes/raw/core/websocket-on-message.js

@@ -1,12 +1,13 @@
-import { additionalState, gsiState } from '/hud/core/state.js'
+import { additionalState, gsiState, options } 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(gsiState, data.gsiState)
 	Object.assign(additionalState, data.additionalState)
+	Object.assign(gsiState, data.gsiState)
+	Object.assign(options, data.options)
 
 	parseGsiState()
 }