WarFrontIO · platz1de · Jul 16, 2024 · Jul 10, 2024 · Jul 13, 2024 · Jul 13, 2024
diff --git a/resources/base.css b/resources/base.css
@@ -65,6 +65,14 @@ h6 {
   margin-right: 1em;
 }
 
+.mb-1_2 {
+  margin-bottom: 0.5em;
+}
+
+.mb-1 {
+  margin-bottom: 1em;
+}
+
 /* Generic padding */
 
 .p-1_2 {

diff --git a/resources/themes/overpass-mono-bold.woff b/resources/themes/overpass-mono-bold.woff
diff --git a/resources/themes/overpass-mono-regular.woff b/resources/themes/overpass-mono-regular.woff
diff --git a/resources/themes/pastel.css b/resources/themes/pastel.css
@@ -24,6 +24,19 @@
     font-style: normal;
 }
 
+@font-face {
+    font-family: 'Overpass Mono';
+    src: url(/resources/themes/overpass-mono-regular.woff) format("woff");
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Overpass Mono';
+    src: url(/resources/themes/overpass-mono-bold.woff) format("woff");
+    font-weight: 700;
+    font-style: normal;
+}
 
 /* Global variables */
 
@@ -216,7 +229,17 @@ p {
 
 /* Ingame HUD */
 
-.wf-hud-menubar {
+#GameHud-TopBar {
+    position: absolute;
+    width: 100%;
+    z-index: 90;
+}
+
+.wf-hud-topbar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
     height: 4em;
     padding: 0.5em;
     width: 100%;
@@ -226,7 +249,24 @@ p {
     align-content: flex-start;
     justify-items: flex-end;
     justify-content: flex-end;
-    pointer-events: all;
+    pointer-events: none;
+}
+
+.wf-hud-gameclock {
+    font-family: 'Overpass Mono';
+    display: block;
+    width: 8em;
+    height: 2.625em;
+    color: var(--color-light);
+    font-weight: bold;
+    border-radius: 2em;
+    background-color: var(--color-primary-dark);
+    border: 1px solid var(--color-primary-medium);
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-items: center;
+    justify-content: center;
 }
 
 /* Layout elements */
@@ -250,6 +290,10 @@ p {
     }
 }
 
+.wf-grid-gap-m {
+    gap: 0.5em;
+}
+
 .wf-grid-gap-lg {
     gap: 1em;
 }
@@ -275,6 +319,7 @@ p {
     font-optical-sizing: auto;
     text-decoration: none;
     cursor: default;
+    pointer-events: all;
 }
 
 .wf-btn:hover {
@@ -409,7 +454,7 @@ p {
 /* Panels and Modals */
 
 .wf-panel {
-    background-color: #eeeeeebb;
+    background-color: #eeeeeedd;
     flex-grow: 0;
 }
 
@@ -519,3 +564,65 @@ input.wf-form-control:focus {
     outline: none;
     border-bottom: 2px solid var(--color-secondary);
 }
+
+
+.wf-switch {
+    position: relative;
+    display: inline-block;
+    width: 2.4em;
+    height: 1.2em;
+    margin-right: 1em;
+  }
+
+  .wf-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .wf-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+
+  .wf-slider:before {
+    position: absolute;
+    content: "";
+    height: 0.95em;
+    width: 0.95em;
+    left: 0.125em;
+    bottom: 0.124em;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+
+  input:checked + .wf-slider {
+    background-color: #2196F3;
+  }
+
+  input:focus + .wf-slider {
+    box-shadow: 0 0 1px #2196F3;
+  }
+
+  input:checked + .wf-slider:before {
+    -webkit-transform: translateX(1.2em);
+    -ms-transform: translateX(1.2em);
+    transform: translateX(1.2em);
+  }
+
+  /* Rounded sliders */
+  .wf-slider-round {
+    border-radius: 1em;
+  }
+
+  .wf-slider-round:before {
+    border-radius: 50%;
+  }
diff --git a/src/Loader.ts b/src/Loader.ts
@@ -1,8 +1,8 @@
 import {TileManager} from "./map/TileManager";
-import {openMenu} from "./ui/ModuleLoader";
+import {openModule} from "./ui/ModuleLoader";
 
 export const tileManager = new TileManager();
 
 window.addEventListener("load", () => {
-	openMenu("MainMenu");
+	openModule("MainMenu");
 });
diff --git a/src/game/GameTicker.ts b/src/game/GameTicker.ts
@@ -47,6 +47,15 @@ class GameTicker {
 	getTickCount(): number {
 		return this.tickCount;
 	}
+
+	/**
+	 * Gets the elapsed in-game-time in milliseconds.
+	 * Note that this is not necessarily the same as the real-world time.
+	 * @returns The elapsed in-game-time in milliseconds.
+	 */
+	getElapsedTime(): number {
+		return this.tickCount * this.TICK_INTERVAL;
+	}
 }
 
 export const gameTicker = new GameTicker();
diff --git a/src/ui/ModuleLoader.ts b/src/ui/ModuleLoader.ts
@@ -2,7 +2,7 @@ import {getSetting, registerSettingListener} from "../util/UserSettingManager";
 
 const modules = new Map<string, HTMLDivElement>();
 const moduleAdapters = new Map<string, ModuleAdapter>();
-let currentModule: string | null = null;
+let openModules: string[] = [];
 
 document.documentElement.classList.add("theme-" + getSetting("theme").id);
 
@@ -11,23 +11,29 @@ registerSettingListener("theme", (theme) => {
 	document.documentElement.classList.add("theme-" + theme.id);
 });
 
-export function openMenu(name: string) {
+export function openModule(name: string) {
 	const module = modules.get(name);
 	if (module) {
-		closeMenu();
 		moduleAdapters.get(name)!.onOpen();
 		module.style.display = "block";
-		currentModule = name;
+		openModules.push(name);
 	}
 }
 
-export function closeMenu() {
-	if (currentModule) {
-		modules.get(currentModule)!.style.display = "none";
-		currentModule = null;
+export function closeModule(name: string) {
+	if (openModules.includes(name)) {
+		modules.get(name)!.style.display = "none";
+		openModules = openModules.filter(item => item !== name);
 	}
 }
 
+export function closeAllModules() {
+	openModules.forEach(module => {
+		modules.get(module)!.style.display = "none";
+	});
+	openModules = [];
+}
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function registerModule(name: string, adapter: ModuleAdapter) {
 	const element = document.getElementById(name) as HTMLDivElement;

diff --git a/src/ui/modules/GameHud-TopBar.html b/src/ui/modules/GameHud-TopBar.html
@@ -0,0 +1,11 @@
+<div class="wf-hud-topbar wf-grid-gap-m">
+	<div id="gameClock">
+		<span class="wf-hud-gameclock" id="lblGameTime">00:00:00</span>
+	</div>
+	<button class="wf-btn wf-btn-primary wf-btn-circle" onclick="window.commandShowSettings()">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#FFFFFF"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>
+	</button>
+	<button class="wf-btn wf-btn-danger wf-btn-circle" onclick="window.commandExitGame()">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#FFF"><path d="M440-440v-400h80v400h-80Zm40 320q-74 0-139.5-28.5T226-226q-49-49-77.5-114.5T120-480q0-80 33-151t93-123l56 56q-48 40-75 97t-27 121q0 116 82 198t198 82q117 0 198.5-82T760-480q0-64-26.5-121T658-698l56-56q60 52 93 123t33 151q0 74-28.5 139.5t-77 114.5q-48.5 49-114 77.5T480-120Z"/></svg>
+	</button>
+</div>
diff --git a/src/ui/modules/GameHud-TopBar.ts b/src/ui/modules/GameHud-TopBar.ts
@@ -0,0 +1,27 @@
+import {gameTicker} from "../../game/GameTicker";
+import {formatTime} from "../../util/StringFormatter";
+import {getSetting, registerSettingListener} from "../../util/UserSettingManager";
+import {ModuleAdapter} from "../ModuleLoader";
+import {openModule} from "../ModuleLoader";
+
+const gameClock: HTMLElement = (window.document.getElementById("gameClock") as HTMLElement);
+const lblGameTime: HTMLElement = (window.document.getElementById("lblGameTime") as HTMLElement);
+
+export default {
+	onOpen: () => {
+		// Initialize elements according to user settings
+		gameClock.style.display = getSetting("gameHud-clock") ? "inherit" : "none";
+	}
+} as ModuleAdapter;
+
+gameTicker.registry.register(() => lblGameTime.innerHTML = formatTime(gameTicker.getElapsedTime()));
+registerSettingListener("gameHud-clock", show => gameClock.style.display = show ? "inherit" : "none");
+
+
+(window as any).commandShowSettings = function () {
+	openModule("SettingsPanel");
+};
+
+(window as any).commandExitGame = function () {
+	window.location.reload();
+};
diff --git a/src/ui/modules/GameHud.html b/src/ui/modules/GameHud.html
@@ -1,11 +1,3 @@
 <div class="wf-window wf-window-spaced background-vignette">
-	<div class="wf-hud-menubar">
-		<button class="wf-btn wf-btn-primary wf-btn-circle mr-1_2" onclick="window.commandShowSettings()">
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#FFFFFF"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>
-		</button>
-		<button class="wf-btn wf-btn-danger wf-btn-circle" onclick="window.commandExitGame()">
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#FFF"><path d="M440-440v-400h80v400h-80Zm40 320q-74 0-139.5-28.5T226-226q-49-49-77.5-114.5T120-480q0-80 33-151t93-123l56 56q-48 40-75 97t-27 121q0 116 82 198t198 82q117 0 198.5-82T760-480q0-64-26.5-121T658-698l56-56q60 52 93 123t33 151q0 74-28.5 139.5t-77 114.5q-48.5 49-114 77.5T480-120Z"/></svg>
-		</button>
-	</div>
-	<div style="height: 80px; width: 100%; pointer-events: all;"></div>
+
 </div>
diff --git a/src/ui/modules/GameHud.ts b/src/ui/modules/GameHud.ts
@@ -1,7 +1,8 @@
-(window as any).commandShowSettings = function () {
-	alert("Nothing to see here yet XD");
-};
+import {ModuleAdapter} from "../ModuleLoader";
+import {openModule} from "../ModuleLoader";
 
-(window as any).commandExitGame = function () {
-	window.location.reload();
-};
+export default {
+	onOpen: () => {
+		openModule("GameHud-TopBar");
+	}
+} as ModuleAdapter;
diff --git a/src/ui/modules/ImprintPanel.html b/src/ui/modules/ImprintPanel.html
@@ -1,6 +1,6 @@
-<div class="wf-window wf-window-centered background-blur background-vignette">
+<div class="wf-window wf-window-centered background-blur" style="z-index: 80">
 	<div class="wf-panel w-100" style="max-width: 960px;">
-		<a class="wf-panel-header-button" onclick="window.commandClosePanel()">
+		<a class="wf-panel-header-button" onclick="window.commandCloseImprintPanel()">
 			<svg xmlns="http://www.w3.org/2000/svg" height="2.5em" viewBox="0 -960 960 960" width="2.5em" fill="#EEEEEE">
 				<path
 					d="m332-285.33 148-148 148 148L674.67-332l-148-148 148-148L628-674.67l-148 148-148-148L285.33-628l148 148-148 148L332-285.33ZM480-80q-82.33 0-155.33-31.5-73-31.5-127.34-85.83Q143-251.67 111.5-324.67T80-480q0-83 31.5-156t85.83-127q54.34-54 127.34-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82.33-31.5 155.33-31.5 73-85.5 127.34Q709-143 636-111.5T480-80Zm0-66.67q139.33 0 236.33-97.33t97-236q0-139.33-97-236.33t-236.33-97q-138.67 0-236 97-97.33 97-97.33 236.33 0 138.67 97.33 236 97.33 97.33 236 97.33ZM480-480Z" />

diff --git a/src/ui/modules/ImprintPanel.ts b/src/ui/modules/ImprintPanel.ts
@@ -1,7 +1,5 @@
-import {closeMenu} from "../ModuleLoader";
-import {openMenu} from "../ModuleLoader";
+import {closeModule} from "../ModuleLoader";
 
-(window as any).commandClosePanel = function () {
-	closeMenu();
-	openMenu("MainMenu");
+(window as any).commandCloseImprintPanel = function () {
+	closeModule("ImprintPanel");
 };
diff --git a/src/ui/modules/MainMenu.html b/src/ui/modules/MainMenu.html
@@ -3,7 +3,7 @@
 </ignore>
 
 
-<div class="wf-window wf-window-centered background-blur background-vignette">
+<div class="wf-window wf-window-centered background-blur background-vignette" style="z-index: 50">
 	<div class="theme-logo" style="width: 200px; height: 200px;"></div>
 	<div class="w-100" style="max-width: 392px;">
 		<div class="wf-panel w-100">
@@ -70,7 +70,7 @@
 		</div>
 	</div>
 </div>
-<div class="wf-footer">
+<div class="wf-footer" style="z-index: 60">
 	<a onclick="window.commandShowImprint()" href="javascript:void(0);">Site Notice</a> | <a href="javascript:void(0);"
 		onclick="window.commandShowPrivacy()">Privacy</a>
 </div>
diff --git a/src/ui/modules/MainMenu.ts b/src/ui/modules/MainMenu.ts
@@ -1,7 +1,7 @@
 import { startGame } from "../../game/Game";
 import { mapFromId } from "../../map/MapRegistry";
-import { ModuleAdapter, closeMenu } from "../ModuleLoader";
-import { openMenu } from "../ModuleLoader";
+import { ModuleAdapter, closeAllModules, closeModule } from "../ModuleLoader";
+import { openModule } from "../ModuleLoader";
 import { FFAGameMode } from "../../game/mode/FFAGameMode";
 import { getSetting, updateSetting } from "../../util/UserSettingManager";
 
@@ -21,21 +21,21 @@ export default {
 } as ModuleAdapter;
 
 (window as any).commandStartGame = function () {
-	closeMenu();
-	openMenu("GameHud");
+	closeAllModules();
+	openModule("GameHud");
 	startGame(mapFromId(Math.floor(Math.random() * 2)), new FFAGameMode());
 };
 
 (window as any).commandShowCommunity = function () {
-	openMenu("CommunityPanel");
+	openModule("CommunityPanel");
 };
 
 (window as any).commandShowImprint = function () {
-	openMenu("ImprintPanel");
+	openModule("ImprintPanel");
 };
 
 (window as any).commandShowPrivacy = function () {
-	openMenu("PrivacyPanel");
+	openModule("PrivacyPanel");
 };
 
 (window as any).commandUpdateName = function () {