Dark mode support and much other stuff

src/js/game/hud/parts/settings_menu.js

@@ -88,8 +88,11 @@ export class HUDSettingsMenu extends BaseHUDPart {
         // this.background.classList.add("visible");
         this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever);
 
-        const totalSecondsPlayed = Math.ceil(this.root.time.now());
-        this.timePlayed.querySelector(".playtime").innerText = formatSeconds(totalSecondsPlayed);
+        const totalMinutesPlayed = Math.ceil(this.root.time.now() / 60);
+        this.timePlayed.querySelector(".playtime").innerText = T.global.time.xMinutes.replace(
+            "<x>",
+            "" + totalMinutesPlayed
+        );
     }
 
     close() {

src/js/game/hud/parts/statistics.js

@@ -56,7 +56,7 @@ export class HUDStatistics extends BaseHUDPart {
         this.dataSource = source;
         this.dialogInner.setAttribute("data-datasource", source);
 
-        this.sourceExplanation.innerText = T.ingame.statistics.dataSources[source].title;
+        this.sourceExplanation.innerText = T.ingame.statistics.dataSources[source].description;
         if (this.visible) {
             this.rerenderFull();
         }

src/js/game/map_chunk_view.js

@@ -7,6 +7,7 @@ import { Math_max, Math_round } from "../core/builtins";
 import { Rectangle } from "../core/rectangle";
 import { createLogger } from "../core/logging";
 import { smoothenDpi } from "../core/dpi_manager";
+import { THEME } from "./theme";
 
 const logger = createLogger("chunk");
 const chunkSizePixels = globalConfig.mapChunkSize * globalConfig.tileSize;
@@ -119,9 +120,9 @@ export class MapChunkView extends MapChunk {
             context.scale(bgDpi, bgDpi);
         } else {
             if (this.containedEntities.length > 0) {
-                context.fillStyle = "#c5ccd6";
+                context.fillStyle = THEME.map.chunkOverview.filled;
             } else {
-                context.fillStyle = "#a6afbb";
+                context.fillStyle = THEME.map.chunkOverview.empty;
             }
             context.fillRect(0, 0, 10000, 10000);
         }

src/js/game/theme.js

@@ -3,5 +3,8 @@ export const THEMES = {
     light: require("./themes/light.json"),
 };
 
-// TODO: Make themes customizable
-export const THEME = THEMES.light;
+export let THEME = THEMES.light;
+
+export function applyGameTheme(id) {
+    THEME = THEMES[id];
+}

src/js/game/themes/dark.json

@@ -10,6 +10,10 @@
             "red": "#4a3d3f",
             "green": "#3e4a3d",
             "blue": "#35384a"
+        },
+        "chunkOverview": {
+            "empty": "#444856",
+            "filled": "#646b7d"
         }
     },
 

src/js/game/themes/light.json

@@ -10,6 +10,11 @@
             "red": "#ffbfc1",
             "green": "#cbffc4",
             "blue": "#bfdaff"
+        },
+
+        "chunkOverview": {
+            "empty": "#a6afbb",
+            "filled": "c5ccd6"
         }
     },