Merge pull request #10 from tobspr/master

Update

res_raw/sounds/sfx/destroy_building.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1dc8775fdf5155097d6e1d60a436f48916af56eec14fb9034e71b32ad3b6f1b0
+size 358896

src/css/states/main_menu.scss

@@ -224,6 +224,12 @@
         width: 100%;
         box-sizing: border-box;
 
+        .buttons {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
         .browserWarning {
             @include S(margin-bottom, 10px);
             background-color: $colorRedBright;

src/js/changelog.js

@@ -15,7 +15,6 @@ export const CHANGELOG = [
             "Improve visibility of shape background in dark mode",
             "Added sound when destroying a building",
             "Update tutorial image for tier 2 tunnels to explain mix/match (by jimmyshadow1)",
-            "Prevent default actions on all keybindings in the web version so you don't accidentally use builtin browser shortcuts",
         ],
     },
     {

src/js/core/input_distributor.js

@@ -191,7 +191,17 @@ export class InputDistributor {
      */
     handleKeyMouseDown(event) {
         const keyCode = event instanceof MouseEvent ? event.button + 1 : event.keyCode;
-        event.preventDefault();
+        if (
+            keyCode === 4 || // MB4
+            keyCode === 5 || // MB5
+            keyCode === 9 || // TAB
+            keyCode === 16 || // SHIFT
+            keyCode === 17 || // CTRL
+            keyCode === 18 || // ALT
+            (keyCode >= 112 && keyCode < 122) // F1 - F10
+        ) {
+            event.preventDefault();
+        }
 
         const isInitial = !this.keysDown.has(keyCode);
         this.keysDown.add(keyCode);

src/js/game/hub_goals.js

@@ -275,7 +275,7 @@ export class HubGoals extends BasicSerializableObject {
      * @param {string} upgradeId
      * @returns {boolean}
      */
-    tryUnlockUgprade(upgradeId) {
+    tryUnlockUpgrade(upgradeId) {
         if (!this.canUnlockUpgrade(upgradeId)) {
             return false;
         }

src/js/states/main_menu.js

@@ -9,6 +9,7 @@ import {
     waitNextFrame,
     isSupportedBrowser,
     makeButton,
+    removeAllChildren,
 } from "../core/utils";
 import { ReadWriteProxy } from "../core/read_write_proxy";
 import { HUDModalDialogs } from "../game/hud/parts/modal_dialogs";
@@ -72,6 +73,7 @@ export class MainMenuState extends GameState {
                             ? ""
                             : `<div class="browserWarning">${T.mainMenu.browserWarning}</div>`
                     }
+                    <div class="buttons"></div>
                 </div>
 
 
@@ -148,6 +150,7 @@ export class MainMenuState extends GameState {
                                     T.dialogs.importSavegameSuccess.text
                                 );
 
+                                this.renderMainMenu();
                                 this.renderSavegames();
                             },
                             err => {
@@ -255,6 +258,10 @@ export class MainMenuState extends GameState {
     }
 
     renderMainMenu() {
+        const buttonContainer = this.htmlElement.querySelector(".mainContainer .buttons");
+        removeAllChildren(buttonContainer);
+
+        // Import button
         const importButtonElement = makeButtonElement(
             ["importButton", "styledButton"],
             T.mainMenu.importSavegame
@@ -262,14 +269,15 @@ export class MainMenuState extends GameState {
         this.trackClicks(importButtonElement, this.requestImportSavegame);
 
         if (this.savedGames.length > 0) {
+            // Continue game
             const continueButton = makeButton(
-                this.htmlElement.querySelector(".mainContainer"),
+                buttonContainer,
                 ["continueButton", "styledButton"],
                 T.mainMenu.continue
             );
             this.trackClicks(continueButton, this.onContinueButtonClicked);
 
-            const outerDiv = makeDiv(this.htmlElement.querySelector(".mainContainer"), null, ["outer"], null);
+            const outerDiv = makeDiv(buttonContainer, null, ["outer"], null);
             outerDiv.appendChild(importButtonElement);
             const newGameButton = makeButton(
                 this.htmlElement.querySelector(".mainContainer .outer"),
@@ -277,24 +285,11 @@ export class MainMenuState extends GameState {
                 T.mainMenu.newGame
             );
             this.trackClicks(newGameButton, this.onPlayButtonClicked);
-
-            const oldPlayButton = this.htmlElement.querySelector(".mainContainer .playButton");
-            if (oldPlayButton) oldPlayButton.remove();
         } else {
-            const playBtn = makeButton(
-                this.htmlElement.querySelector(".mainContainer"),
-                ["playButton", "styledButton"],
-                T.mainMenu.play
-            );
+            // New game
+            const playBtn = makeButton(buttonContainer, ["playButton", "styledButton"], T.mainMenu.play);
             this.trackClicks(playBtn, this.onPlayButtonClicked);
-
-            this.htmlElement.querySelector(".mainContainer").appendChild(importButtonElement);
-
-            const outerDiv = this.htmlElement.querySelector(".mainContainer .outer");
-            if (outerDiv) {
-                outerDiv.remove();
-                this.htmlElement.querySelector(".mainContainer .continueButton").remove();
-            }
+            buttonContainer.appendChild(importButtonElement);
         }
     }