diff --git a/res_raw/sounds/sfx/destroy_building.wav b/res_raw/sounds/sfx/destroy_building.wav new file mode 100644 index 00000000..ffb38158 --- /dev/null +++ b/res_raw/sounds/sfx/destroy_building.wav @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1dc8775fdf5155097d6e1d60a436f48916af56eec14fb9034e71b32ad3b6f1b0 +size 358896 diff --git a/src/css/states/main_menu.scss b/src/css/states/main_menu.scss index fa9d430c..7812de62 100644 --- a/src/css/states/main_menu.scss +++ b/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; diff --git a/src/js/changelog.js b/src/js/changelog.js index b654f0de..7650814b 100644 --- a/src/js/changelog.js +++ b/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", ], }, { diff --git a/src/js/core/input_distributor.js b/src/js/core/input_distributor.js index a59f4fbc..03ad8e0c 100644 --- a/src/js/core/input_distributor.js +++ b/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); diff --git a/src/js/game/hub_goals.js b/src/js/game/hub_goals.js index ef7797a9..9f65dc4c 100644 --- a/src/js/game/hub_goals.js +++ b/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; } diff --git a/src/js/states/main_menu.js b/src/js/states/main_menu.js index 8665b80e..29677686 100644 --- a/src/js/states/main_menu.js +++ b/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 { ? "" : `
${T.mainMenu.browserWarning}
` } +
@@ -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); } }