Mascali
/
shapez.io
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix main menu rendering

This commit is contained in:
tobspr 2020-06-22 14:55:43 +02:00
parent c5613f6eee
commit e9581c653f
2 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/css/states/main_menu.scss
View File

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

31
src/js/states/main_menu.js
View File

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