Add customizable keybindings & watermark

src/js/states/about.js

@@ -0,0 +1,35 @@
+import { TextualGameState } from "../core/textual_game_state";
+import { SOUNDS } from "../platform/sound";
+import { T } from "../translations";
+import { KEYMAPPINGS, getStringForKeyCode } from "../game/key_action_mapper";
+import { Dialog } from "../core/modal_dialog_elements";
+
+export class AboutState extends TextualGameState {
+    constructor() {
+        super("AboutState");
+    }
+
+    getStateHeaderTitle() {
+        return T.about.title;
+    }
+
+    getMainContentHTML() {
+        return `
+            This game is open source and developed by <a href="https://github.com/tobspr" target="_blank">Tobias Springer</a> (this is me).
+            <br><br>
+            If you want to contribute, check out <a href="https://github.com/tobspr/shapez.io" target="_blank">shapez.io on github</a>.
+            <br><br>
+            This game wouldn't have been possible without the great discord community arround my games - You should really join the <a href="https://discord.gg/HN7EVzV" target="_blank">discord server</a>!
+            <br><br>
+            The soundtrack was made by <a href="https://soundcloud.com/pettersumelius" target="_blank">Peppsen</a> - He's awesome. 
+            <br><br>
+            Finally, huge thanks to my best friend <a href="https://github.com/niklas-dahl" target="_blank">Niklas</a> - Without our factorio sessions this game would never have existed. 
+        `;
+    }
+
+    onEnter() {}
+
+    getDefaultPreviousState() {
+        return "SettingsState";
+    }
+}

src/js/states/keybindings.js

@@ -0,0 +1,171 @@
+import { TextualGameState } from "../core/textual_game_state";
+import { SOUNDS } from "../platform/sound";
+import { T } from "../translations";
+import { KEYMAPPINGS, getStringForKeyCode } from "../game/key_action_mapper";
+import { Dialog } from "../core/modal_dialog_elements";
+
+export class KeybindingsState extends TextualGameState {
+    constructor() {
+        super("KeybindingsState");
+    }
+
+    getStateHeaderTitle() {
+        return T.keybindings.title;
+    }
+
+    getMainContentHTML() {
+        return `
+
+            <div class="topEntries">
+                <span class="hint">${T.keybindings.hint}</span>
+                <button class="styledButton resetBindings">${T.keybindings.resetKeybindings}</button>
+            
+            </div>
+
+            <div class="keybindings">
+
+            </div>
+        `;
+    }
+
+    onEnter() {
+        const keybindingsElem = this.htmlElement.querySelector(".keybindings");
+
+        this.trackClicks(this.htmlElement.querySelector(".resetBindings"), this.resetBindings);
+
+        for (const category in KEYMAPPINGS) {
+            const categoryDiv = document.createElement("div");
+            categoryDiv.classList.add("category");
+            keybindingsElem.appendChild(categoryDiv);
+
+            const labelDiv = document.createElement("strong");
+            labelDiv.innerText = T.keybindings.categoryLabels[category];
+            labelDiv.classList.add("categoryLabel");
+            categoryDiv.appendChild(labelDiv);
+
+            for (const keybindingId in KEYMAPPINGS[category]) {
+                const mapped = KEYMAPPINGS[category][keybindingId];
+
+                const elem = document.createElement("div");
+                elem.classList.add("entry");
+                elem.setAttribute("data-keybinding", keybindingId);
+                categoryDiv.appendChild(elem);
+
+                const title = document.createElement("span");
+                title.classList.add("title");
+                title.innerText = T.keybindings.mappings[keybindingId];
+                elem.appendChild(title);
+
+                const mappingDiv = document.createElement("span");
+                mappingDiv.classList.add("mapping");
+                elem.appendChild(mappingDiv);
+
+                const editBtn = document.createElement("button");
+                editBtn.classList.add("styledButton", "editKeybinding");
+
+                const resetBtn = document.createElement("button");
+                resetBtn.classList.add("styledButton", "resetKeybinding");
+
+                if (mapped.builtin) {
+                    editBtn.classList.add("disabled");
+                    resetBtn.classList.add("disabled");
+                } else {
+                    this.trackClicks(editBtn, () => this.editKeybinding(keybindingId));
+                    this.trackClicks(resetBtn, () => this.resetKeybinding(keybindingId));
+                }
+                elem.appendChild(editBtn);
+                elem.appendChild(resetBtn);
+            }
+        }
+        this.updateKeybindings();
+    }
+
+    editKeybinding(id) {
+        const dialog = new Dialog({
+            app: this.app,
+            title: T.dialogs.editKeybinding.title,
+            contentHTML: T.dialogs.editKeybinding.desc,
+            buttons: ["cancel:good"],
+            type: "info",
+        });
+
+        dialog.inputReciever.keydown.add(({ keyCode, shift, alt, event }) => {
+            if (keyCode === 27) {
+                this.dialogs.closeDialog(dialog);
+                return;
+            }
+
+            if (event) {
+                event.preventDefault();
+            }
+
+            if (
+                // Enter
+                keyCode === 13 ||
+                // TAB
+                keyCode === 9
+            ) {
+                // Ignore builtins
+                return;
+            }
+
+            this.app.settings.updateKeybindingOverride(id, keyCode);
+
+            this.dialogs.closeDialog(dialog);
+            this.updateKeybindings();
+        });
+
+        dialog.inputReciever.backButton.add(() => {});
+
+        this.dialogs.internalShowDialog(dialog);
+        this.app.sound.playUiSound(SOUNDS.dialogOk);
+    }
+
+    updateKeybindings() {
+        const overrides = this.app.settings.getKeybindingOverrides();
+        for (const category in KEYMAPPINGS) {
+            for (const keybindingId in KEYMAPPINGS[category]) {
+                const mapped = KEYMAPPINGS[category][keybindingId];
+
+                const container = this.htmlElement.querySelector("[data-keybinding='" + keybindingId + "']");
+                assert(container, "Container for keybinding not found: " + keybindingId);
+
+                let keyCode = mapped.keyCode;
+                if (overrides[keybindingId]) {
+                    keyCode = overrides[keybindingId];
+                }
+
+                const mappingDiv = container.querySelector(".mapping");
+                mappingDiv.innerHTML = getStringForKeyCode(keyCode);
+                mappingDiv.classList.toggle("changed", !!overrides[keybindingId]);
+
+                const resetBtn = container.querySelector("button.resetKeybinding");
+                resetBtn.classList.toggle("disabled", mapped.builtin || !overrides[keybindingId]);
+            }
+        }
+    }
+
+    resetKeybinding(id) {
+        this.app.settings.resetKeybindingOverride(id);
+        this.updateKeybindings();
+    }
+
+    resetBindings() {
+        const { reset } = this.dialogs.showWarning(
+            T.dialogs.resetKeybindingsConfirmation.title,
+            T.dialogs.resetKeybindingsConfirmation.desc,
+            ["cancel:good", "reset:bad"]
+        );
+
+        reset.add(() => {
+            this.app.settings.resetKeybindingOverrides();
+            this.updateKeybindings();
+
+            this.dialogs.showInfo(T.dialogs.keybindingsResetOk.title, T.dialogs.keybindingsResetOk.desc);
+        });
+    }
+
+    getDefaultPreviousState() {
+        return "SettingsState";
+    }
+}

src/js/states/settings.js

@@ -23,9 +23,7 @@ export class SettingsState extends TextualGameState {
             `
                     : ""
             }
-
-            <button class="styledButton changelog">Changelog</button>
-
+            <button class="styledButton about">${T.about.title}</button>
 
          </div>
 
@@ -33,7 +31,6 @@ export class SettingsState extends TextualGameState {
             ${this.getSettingsHtml()}
             <div class="versionbar">
                 <div class="buildVersion">${T.global.loading} ...</div>
-                <button class="styledButton copyright">Copyright & Licenses</button>
             </div>
 
 
@@ -82,10 +79,7 @@ export class SettingsState extends TextualGameState {
 
     onEnter(payload) {
         this.renderBuildText();
-        this.trackClicks(this.htmlElement.querySelector(".copyright"), this.onCopyrightClicked, {
-            preventDefault: false,
-        });
-        this.trackClicks(this.htmlElement.querySelector(".changelog"), this.onChangelogClicked, {
+        this.trackClicks(this.htmlElement.querySelector(".about"), this.onAboutClicked, {
             preventDefault: false,
         });
 
@@ -113,8 +107,8 @@ export class SettingsState extends TextualGameState {
         });
     }
 
-    onCopyrightClicked() {
-        // this.moveToStateAddGoBack("CopyrightState");
+    onAboutClicked() {
+        this.moveToStateAddGoBack("AboutState");
     }
 
     onChangelogClicked() {
@@ -122,6 +116,6 @@ export class SettingsState extends TextualGameState {
     }
 
     onKeybindingsClicked() {
-        // this.moveToStateAddGoBack("KeybindingsState");
+        this.moveToStateAddGoBack("KeybindingsState");
     }
 }