Dark mode support and much other stuff

src/js/core/config.js

@@ -76,8 +76,8 @@ export const globalConfig = {
 
     debug: {
         /* dev:start */
-        fastGameEnter: true,
-        noArtificialDelays: true,
+        // fastGameEnter: true,
+        // noArtificialDelays: true,
         // disableSavegameWrite: true,
         showEntityBounds: false,
         showAcceptorEjectors: false,

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"
         }
     },
 

src/js/profile/application_settings.js

@@ -6,7 +6,7 @@ import { ReadWriteProxy } from "../core/read_write_proxy";
 import { BoolSetting, EnumSetting, BaseSetting } from "./setting_types";
 import { createLogger } from "../core/logging";
 import { ExplainedResult } from "../core/explained_result";
-import { THEMES } from "../game/theme";
+import { THEMES, THEME, applyGameTheme } from "../game/theme";
 
 const logger = createLogger("application_settings");
 
@@ -68,26 +68,14 @@ export const allApplicationSettings = [
         },
         G_IS_STANDALONE
     ),
-    new EnumSetting("theme", {
-        options: Object.keys(THEMES),
-        valueGetter: theme => theme,
-        textGetter: theme => theme.substr(0, 1).toUpperCase() + theme.substr(1),
-        category: categoryApp,
-        restartRequired: false,
-        changeCb:
-            /**
-             * @param {Application} app
-             */
-            (app, id) => document.body.setAttribute("data-theme", id),
-    }),
+
     new BoolSetting(
         "soundsMuted",
         categoryApp,
         /**
          * @param {Application} app
          */
-        (app, value) => app.sound.setSoundsMuted(value),
-        false
+        (app, value) => app.sound.setSoundsMuted(value)
     ),
     new BoolSetting(
         "musicMuted",
@@ -95,11 +83,25 @@ export const allApplicationSettings = [
         /**
          * @param {Application} app
          */
-        (app, value) => app.sound.setMusicMuted(value),
-        false
+        (app, value) => app.sound.setMusicMuted(value)
     ),
 
     // GAME
+    new EnumSetting("theme", {
+        options: Object.keys(THEMES),
+        valueGetter: theme => theme,
+        textGetter: theme => theme.substr(0, 1).toUpperCase() + theme.substr(1),
+        category: categoryGame,
+        restartRequired: false,
+        changeCb:
+            /**
+             * @param {Application} app
+             */
+            (app, id) => {
+                applyGameTheme(id);
+                document.body.setAttribute("data-theme", id);
+            },
+    }),
 ];
 
 export function getApplicationSettingById(id) {

src/js/states/ingame.js

@@ -148,7 +148,10 @@ export class InGameState extends GameState {
      * Goes back to the settings state
      */
     goToSettings() {
-        this.saveThenGoToState("SettingsState");
+        this.saveThenGoToState("SettingsState", {
+            backToStateId: this.key,
+            backToStatePayload: this.creationPayload,
+        });
     }
 
     /**

src/js/states/main_menu.js

@@ -32,6 +32,8 @@ export class MainMenuState extends GameState {
 
         return `
 
+            <button class="settingsButton"></button>
+
             <video autoplay muted loop class="fullscreenBackgroundVideo">
                 <source src="${cachebust("res/bg_render.webm")}" type="video/webm">
             </video>
@@ -191,6 +193,7 @@ export class MainMenuState extends GameState {
             });
         }
 
+        this.trackClicks(qs(".settingsButton"), this.onSettingsButtonClicked);
         this.renderSavegames();
     }
 
@@ -281,6 +284,10 @@ export class MainMenuState extends GameState {
         });
     }
 
+    onSettingsButtonClicked() {
+        this.moveToState("SettingsState");
+    }
+
     onPlayButtonClicked() {
         const savegame = this.app.savegameMgr.createNewSavegame();
 
@@ -288,7 +295,7 @@ export class MainMenuState extends GameState {
 
         if (G_IS_DEV) {
             // TODO
-            this.moveToState("SettingsState");
+            // this.moveToState("SettingsState");
         }
 
         this.moveToState("InGameState", {

src/js/states/settings.js

@@ -19,12 +19,12 @@ export class SettingsState extends TextualGameState {
             ${
                 this.app.platformWrapper.getSupportsKeyboard()
                     ? `
-                        <button class="styledButton editKeybindings">KEYBINDING TODO</button>
+                        <button class="styledButton editKeybindings">Keybindings</button>
             `
                     : ""
             }
 
-            <button class="styledButton changelog">CHANGELOG TODO</button>
+            <button class="styledButton changelog">Changelog</button>
 
 
          </div>
@@ -33,7 +33,7 @@ export class SettingsState extends TextualGameState {
             ${this.getSettingsHtml()}
             <div class="versionbar">
                 <div class="buildVersion">${T.global.loading} ...</div>
-                <button class="styledButton copyright">COPYRIGHT TODO</button>
+                <button class="styledButton copyright">Copyright & Licenses</button>
             </div>