Add ability to import savegames, add game menu, multiple smaller improvements

src/js/game/hud/hud.js

@@ -20,6 +20,7 @@ import { MetaBuilding } from "../meta_building";
 import { HUDPinnedShapes } from "./parts/pinned_shapes";
 import { ShapeDefinition } from "../shape_definition";
 import { HUDNotifications, enumNotificationType } from "./parts/notifications";
+import { HUDSettingsMenu } from "./parts/settings_menu";
 
 export class GameHUD {
     /**
@@ -53,6 +54,7 @@ export class GameHUD {
             pinnedShapes: new HUDPinnedShapes(this.root),
 
             notifications: new HUDNotifications(this.root),
+            settingsMenu: new HUDSettingsMenu(this.root),
 
             // betaOverlay: new HUDBetaOverlay(this.root),
         };

src/js/game/hud/parts/game_menu.js

@@ -71,6 +71,7 @@ export class HUDGameMenu extends BaseHUDPart {
         this.trackClicks(this.musicButton, this.toggleMusic);
         this.trackClicks(this.sfxButton, this.toggleSfx);
         this.trackClicks(this.saveButton, this.startSave);
+        this.trackClicks(this.settingsButton, this.openSettings);
 
         this.musicButton.classList.toggle("muted", this.root.app.settings.getAllSettings().musicMuted);
         this.sfxButton.classList.toggle("muted", this.root.app.settings.getAllSettings().soundsMuted);
@@ -117,6 +118,10 @@ export class HUDGameMenu extends BaseHUDPart {
         this.root.gameState.doSave();
     }
 
+    openSettings() {
+        this.root.hud.parts.settingsMenu.show();
+    }
+
     toggleMusic() {
         const newValue = !this.root.app.settings.getAllSettings().musicMuted;
         this.root.app.settings.updateSetting("musicMuted", newValue);

src/js/game/hud/parts/mass_selector.js

@@ -61,7 +61,7 @@ export class HUDMassSelector extends BaseHUDPart {
      */
     onBack() {
         // Clear entities on escape
-        if (this.entityUidsMarkedForDeletion) {
+        if (this.entityUidsMarkedForDeletion.size > 0) {
             this.entityUidsMarkedForDeletion = new Set();
             return STOP_PROPAGATION;
         }

src/js/game/hud/parts/modal_dialogs.js

@@ -0,0 +1,188 @@
+/* typehints:start */
+import { Application } from "../../../application";
+/* typehints:end */
+
+import { SOUNDS } from "../../../platform/sound";
+import { DynamicDomAttach } from "../dynamic_dom_attach";
+import { BaseHUDPart } from "../base_hud_part";
+import {
+    Dialog,
+    DialogLoading,
+    DialogVideoTutorial,
+    DialogOptionChooser,
+} from "../../../core/modal_dialog_elements";
+import { makeDiv } from "../../../core/utils";
+
+export class HUDModalDialogs extends BaseHUDPart {
+    constructor(root, app) {
+        // Important: Root is not always available here! Its also used in the main menu
+        super(root);
+
+        /** @type {Application} */
+        this.app = app;
+
+        this.dialogParent = null;
+        this.dialogStack = [];
+    }
+
+    // For use inside of the game, implementation of base hud part
+    initialize() {
+        this.dialogParent = document.getElementById("rg_HUD_ModalDialogs");
+        this.domWatcher = new DynamicDomAttach(this.root, this.dialogParent);
+    }
+
+    shouldPauseRendering() {
+        return this.dialogStack.length > 0;
+    }
+
+    shouldPauseGame() {
+        return this.shouldPauseRendering();
+    }
+
+    createElements(parent) {
+        return makeDiv(parent, "rg_HUD_ModalDialogs");
+    }
+
+    // For use outside of the game
+    initializeToElement(element) {
+        assert(element, "No element for dialogs given");
+        this.dialogParent = element;
+    }
+
+    // Methods
+
+    showInfo(title, text, buttons = ["ok:good"]) {
+        const dialog = new Dialog({
+            app: this.app,
+            title: title,
+            contentHTML: text,
+            buttons: buttons,
+            type: "info",
+        });
+        this.internalShowDialog(dialog);
+
+        if (this.app) {
+            this.app.sound.playUiSound(SOUNDS.dialogOk);
+        }
+
+        return dialog.buttonSignals;
+    }
+
+    showWarning(title, text, buttons = ["ok:good"]) {
+        const dialog = new Dialog({
+            app: this.app,
+            title: title,
+            contentHTML: text,
+            buttons: buttons,
+            type: "warning",
+        });
+        this.internalShowDialog(dialog);
+
+        if (this.app) {
+            this.app.sound.playUiSound(SOUNDS.dialogError);
+        }
+
+        return dialog.buttonSignals;
+    }
+
+    showVideoTutorial(title, text, videoUrl) {
+        const dialog = new DialogVideoTutorial({
+            app: this.app,
+            title: title,
+            contentHTML: text,
+            videoUrl,
+        });
+        this.internalShowDialog(dialog);
+
+        if (this.app) {
+            this.app.sound.playUiSound(SOUNDS.dialogOk);
+        }
+
+        return dialog.buttonSignals;
+    }
+
+    showOptionChooser(title, options) {
+        const dialog = new DialogOptionChooser({
+            app: this.app,
+            title,
+            options,
+        });
+        this.internalShowDialog(dialog);
+        return dialog.buttonSignals;
+    }
+
+    // Returns method to be called when laoding finishd
+    showLoadingDialog() {
+        const dialog = new DialogLoading(this.app);
+        this.internalShowDialog(dialog);
+        return this.closeDialog.bind(this, dialog);
+    }
+
+    internalShowDialog(dialog) {
+        const elem = dialog.createElement();
+        dialog.setIndex(this.dialogStack.length);
+
+        // Hide last dialog in queue
+        if (this.dialogStack.length > 0) {
+            this.dialogStack[this.dialogStack.length - 1].hide();
+        }
+
+        this.dialogStack.push(dialog);
+
+        // Append dialog
+        dialog.show();
+        dialog.closeRequested.add(this.closeDialog.bind(this, dialog));
+
+        // Append to HTML
+        this.dialogParent.appendChild(elem);
+
+        document.body.classList.toggle("modalDialogActive", this.dialogStack.length > 0);
+
+        // IMPORTANT: Attach element directly, otherwise double submit is possible
+        this.update();
+    }
+
+    update() {
+        if (this.domWatcher) {
+            this.domWatcher.update(this.dialogStack.length > 0);
+        }
+    }
+
+    closeDialog(dialog) {
+        dialog.destroy();
+
+        let index = -1;
+        for (let i = 0; i < this.dialogStack.length; ++i) {
+            if (this.dialogStack[i] === dialog) {
+                index = i;
+                break;
+            }
+        }
+        assert(index >= 0, "Dialog not in dialog stack");
+        this.dialogStack.splice(index, 1);
+
+        if (this.dialogStack.length > 0) {
+            // Show the dialog which was previously open
+            this.dialogStack[this.dialogStack.length - 1].show();
+        }
+
+        document.body.classList.toggle("modalDialogActive", this.dialogStack.length > 0);
+    }
+
+    close() {
+        for (let i = 0; i < this.dialogStack.length; ++i) {
+            const dialog = this.dialogStack[i];
+            dialog.destroy();
+        }
+        this.dialogStack = [];
+    }
+
+    cleanup() {
+        super.cleanup();
+        for (let i = 0; i < this.dialogStack.length; ++i) {
+            this.dialogStack[i].destroy();
+        }
+        this.dialogStack = [];
+        this.dialogParent = null;
+    }
+}

src/js/game/hud/parts/notifications.js

@@ -8,6 +8,8 @@ export const enumNotificationType = {
     success: "success",
 };
 
+const notificationDuration = 3;
+
 export class HUDNotifications extends BaseHUDPart {
     createElements(parent) {
         this.element = makeDiv(parent, "ingame_HUD_Notifications", [], ``);
@@ -35,7 +37,7 @@ export class HUDNotifications extends BaseHUDPart {
 
         this.notificationElements.push({
             element,
-            expireAt: this.root.time.realtimeNow() + 5,
+            expireAt: this.root.time.realtimeNow() + notificationDuration,
         });
     }
 

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

@@ -0,0 +1,97 @@
+import { BaseHUDPart } from "../base_hud_part";
+import { makeDiv } from "../../../core/utils";
+import { DynamicDomAttach } from "../dynamic_dom_attach";
+import { InputReceiver } from "../../../core/input_receiver";
+import { KeyActionMapper } from "../../key_action_mapper";
+
+export class HUDSettingsMenu extends BaseHUDPart {
+    createElements(parent) {
+        this.background = makeDiv(parent, "ingame_HUD_SettingsMenu", ["ingameDialog"]);
+
+        this.menuElement = makeDiv(this.background, null, ["menuElement"]);
+
+        this.timePlayed = makeDiv(
+            this.background,
+            null,
+            ["timePlayed"],
+            `<strong>Playtime</strong><span class="playtime"></span>`
+        );
+
+        this.buttonContainer = makeDiv(this.menuElement, null, ["buttons"]);
+
+        const buttons = [
+            {
+                title: "Continue",
+                action: () => this.close(),
+            },
+            {
+                title: "Return to menu",
+                action: () => this.returnToMenu(),
+            },
+        ];
+
+        for (let i = 0; i < buttons.length; ++i) {
+            const { title, action } = buttons[i];
+
+            const element = document.createElement("button");
+            element.classList.add("styledButton");
+            element.innerText = title;
+            this.buttonContainer.appendChild(element);
+
+            this.trackClicks(element, action);
+        }
+    }
+
+    returnToMenu() {
+        this.root.gameState.goBackToMenu();
+    }
+
+    shouldPauseGame() {
+        return this.visible;
+    }
+
+    shouldPauseRendering() {
+        return this.visible;
+    }
+
+    initialize() {
+        this.root.gameState.keyActionMapper.getBinding("back").add(this.show, this);
+
+        this.domAttach = new DynamicDomAttach(this.root, this.background, {
+            attachClass: "visible",
+        });
+
+        this.inputReciever = new InputReceiver("settingsmenu");
+        this.keyActionMapper = new KeyActionMapper(this.root, this.inputReciever);
+
+        this.keyActionMapper.getBinding("back").add(this.close, this);
+
+        this.close();
+    }
+
+    cleanup() {
+        document.body.classList.remove("ingameDialogOpen");
+    }
+
+    show() {
+        this.visible = true;
+        document.body.classList.add("ingameDialogOpen");
+        // this.background.classList.add("visible");
+        this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever);
+
+        const totalMinutesPlayed = Math.ceil(this.root.time.now() / 60.0);
+        const playtimeString = totalMinutesPlayed === 1 ? "1 minute" : totalMinutesPlayed + " minutes";
+        this.timePlayed.querySelector(".playtime").innerText = playtimeString;
+    }
+
+    close() {
+        this.visible = false;
+        document.body.classList.remove("ingameDialogOpen");
+        this.root.app.inputMgr.makeSureDetached(this.inputReciever);
+        this.update();
+    }
+
+    update() {
+        this.domAttach.update(this.visible);
+    }
+}