Merge branch 'master' of https://github.com/tobspr/shapez.io

src/css/states/main_menu.scss

@@ -249,10 +249,31 @@
             }
         }
 
+        .continueButton {
+            @include SuperHeading;
+            @include S(min-width, 130px);
+            @include S(padding, 15px, 20px);
+            @include S(margin-top, 15px);
+            letter-spacing: 0.3em !important;
+
+            font-weight: bold;
+            color: #fff;
+            background-color: $colorGreenBright;
+            transition: transform 0.12s ease-in-out;
+            &:hover {
+                transform: scale(1.02);
+            }
+        }
+
         .importButton {
             @include S(margin-top, 15px);
         }
 
+        .newGameButton {
+            @include S(margin-top, 15px);
+            @include S(margin-left, 15px);
+        }
+
         .savegames {
             @include S(max-height, 105px);
             overflow-y: auto;

src/js/core/utils.js

@@ -646,13 +646,12 @@ export function measure(name, target) {
 }
 
 /**
- * Helper method to create a new div
+ * Helper method to create a new div element
- * @param {Element} parent
  * @param {string=} id
  * @param {Array<string>=} classes
  * @param {string=} innerHTML
  */
-export function makeDiv(parent, id = null, classes = [], innerHTML = "") {
+export function makeDivElement(id = null, classes = [], innerHTML = "") {
     const div = document.createElement("div");
     if (id) {
         div.id = id;
@@ -661,10 +660,51 @@ export function makeDiv(parent, id = null, classes = [], innerHTML = "") {
         div.classList.add(classes[i]);
     }
     div.innerHTML = innerHTML;
+    return div;
+}
+
+/**
+ * Helper method to create a new div
+ * @param {Element} parent
+ * @param {string=} id
+ * @param {Array<string>=} classes
+ * @param {string=} innerHTML
+ */
+export function makeDiv(parent, id = null, classes = [], innerHTML = "") {
+    const div = makeDivElement(id, classes, innerHTML);
     parent.appendChild(div);
     return div;
 }
 
+/**
+ * Helper method to create a new div and place before reference Node
+ * @param {Element} parent
+ * @param {Element} referenceNode
+ * @param {string=} id
+ * @param {Array<string>=} classes
+ * @param {string=} innerHTML
+ */
+export function makeDivBefore(parent, referenceNode, id = null, classes = [], innerHTML = "") {
+    const div = makeDivElement(id, classes, innerHTML);
+    parent.insertBefore(div, referenceNode);
+    return div;
+}
+
+/**
+ * Helper method to create a new button element
+ * @param {Array<string>=} classes
+ * @param {string=} innerHTML
+ */
+export function makeButtonElement(classes = [], innerHTML = "") {
+    const element = document.createElement("button");
+    for (let i = 0; i < classes.length; ++i) {
+        element.classList.add(classes[i]);
+    }
+    element.classList.add("styledButton");
+    element.innerHTML = innerHTML;
+    return element;
+}
+
 /**
  * Helper method to create a new button
  * @param {Element} parent
@@ -672,16 +712,24 @@ export function makeDiv(parent, id = null, classes = [], innerHTML = "") {
  * @param {string=} innerHTML
  */
 export function makeButton(parent, classes = [], innerHTML = "") {
-    const element = document.createElement("button");
+    const element = makeButtonElement(classes, innerHTML);
-    for (let i = 0; i < classes.length; ++i) {
-        element.classList.add(classes[i]);
-    }
-    element.classList.add("styledButton");
-    element.innerHTML = innerHTML;
     parent.appendChild(element);
     return element;
 }
 
+/**
+ * Helper method to create a new button and place before reference Node
+ * @param {Element} parent
+ * @param {Element} referenceNode
+ * @param {Array<string>=} classes
+ * @param {string=} innerHTML
+ */
+export function makeButtonBefore(parent, referenceNode, classes = [], innerHTML = "") {
+    const element = makeButtonElement(classes, innerHTML);
+    parent.insertBefore(element, referenceNode);
+    return element;
+}
+
 /**
  * Removes all children of the given element
  * @param {Element} elem

src/js/states/main_menu.js

@@ -3,10 +3,12 @@ import { cachebust } from "../core/cachebust";
 import { globalConfig, IS_DEBUG, IS_DEMO, THIRDPARTY_URLS } from "../core/config";
 import {
     makeDiv,
+    makeButtonElement,
     formatSecondsToTimeAgo,
     generateFileDownload,
     waitNextFrame,
     isSupportedBrowser,
+    makeButton,
 } from "../core/utils";
 import { ReadWriteProxy } from "../core/read_write_proxy";
 import { HUDModalDialogs } from "../game/hud/parts/modal_dialogs";
@@ -70,8 +72,6 @@ export class MainMenuState extends GameState {
                             ? ""
                             : `<div class="browserWarning">${T.mainMenu.browserWarning}</div>`
                     }
-                    <button class="playButton styledButton">${T.mainMenu.play}</button>
-                    <button class="importButton styledButton">${T.mainMenu.importSavegame}</button>
                 </div>
                 
     
@@ -186,8 +186,6 @@ export class MainMenuState extends GameState {
         }
 
         const qs = this.htmlElement.querySelector.bind(this.htmlElement);
-        this.trackClicks(qs(".mainContainer .playButton"), this.onPlayButtonClicked);
-        this.trackClicks(qs(".mainContainer .importButton"), this.requestImportSavegame);
 
         if (G_IS_DEV && globalConfig.debug.fastGameEnter) {
             const games = this.app.savegameMgr.getSavegamesMetaData();
@@ -223,6 +221,7 @@ export class MainMenuState extends GameState {
             this.trackClicks(qs(".exitAppButton"), this.onExitAppButtonClicked);
         }
 
+        this.renderMainMenu();
         this.renderSavegames();
 
         const steamLink = this.htmlElement.querySelector(".steamLink");
@@ -252,6 +251,50 @@ export class MainMenuState extends GameState {
         );
     }
 
+    renderMainMenu() {
+        const importButtonElement = makeButtonElement(
+            ["importButton", "styledButton"],
+            T.mainMenu.importSavegame
+        );
+        this.trackClicks(importButtonElement, this.requestImportSavegame);
+
+        if (this.savedGames.length > 0) {
+            const continueButton = makeButton(
+                this.htmlElement.querySelector(".mainContainer"),
+                ["continueButton", "styledButton"],
+                T.mainMenu.continue
+            );
+            this.trackClicks(continueButton, this.onContinueButtonClicked);
+
+            const outerDiv = makeDiv(this.htmlElement.querySelector(".mainContainer"), null, ["outer"], null);
+            outerDiv.appendChild(importButtonElement);
+            const newGameButton = makeButton(
+                this.htmlElement.querySelector(".mainContainer .outer"),
+                ["newGameButton", "styledButton"],
+                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
+            );
+            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();
+            }
+        }
+    }
+
     onSteamLinkClicked() {
         this.app.analytics.trackUiClick("main_menu_steam_link_2");
         this.app.platformWrapper.openExternalLink(THIRDPARTY_URLS.standaloneStorePage);
@@ -310,12 +353,16 @@ export class MainMenuState extends GameState {
         }, this);
     }
 
+    get savedGames() {
+        return this.app.savegameMgr.getSavegamesMetaData();
+    }
+
     renderSavegames() {
         const oldContainer = this.htmlElement.querySelector(".mainContainer .savegames");
         if (oldContainer) {
             oldContainer.remove();
         }
-        const games = this.app.savegameMgr.getSavegamesMetaData();
+        const games = this.savedGames;
         if (games.length > 0) {
             const parent = makeDiv(this.htmlElement.querySelector(".mainContainer"), null, ["savegames"]);
 
@@ -346,13 +393,13 @@ export class MainMenuState extends GameState {
                 downloadButton.classList.add("styledButton", "downloadGame");
                 elem.appendChild(downloadButton);
 
-                const resumeBtn = document.createElement("button");
+                const resumeButton = document.createElement("button");
-                resumeBtn.classList.add("styledButton", "resumeGame");
+                resumeButton.classList.add("styledButton", "resumeGame");
-                elem.appendChild(resumeBtn);
+                elem.appendChild(resumeButton);
 
                 this.trackClicks(deleteButton, () => this.deleteGame(games[i]));
                 this.trackClicks(downloadButton, () => this.downloadGame(games[i]));
-                this.trackClicks(resumeBtn, () => this.resumeGame(games[i]));
+                this.trackClicks(resumeButton, () => this.resumeGame(games[i]));
             }
         }
     }
@@ -398,6 +445,7 @@ export class MainMenuState extends GameState {
             this.app.savegameMgr.deleteSavegame(game).then(
                 () => {
                     this.renderSavegames();
+                    if (this.savedGames.length <= 0) this.renderMainMenu();
                 },
                 err => {
                     this.dialogs.showWarning(
@@ -455,6 +503,24 @@ export class MainMenuState extends GameState {
         });
     }
 
+    onContinueButtonClicked() {
+        let latestLastUpdate = 0;
+        let latestInternalId;
+        this.app.savegameMgr.currentData.savegames.forEach(saveGame => {
+            if (saveGame.lastUpdate > latestLastUpdate) {
+                latestLastUpdate = saveGame.lastUpdate;
+                latestInternalId = saveGame.internalId;
+            }
+        });
+
+        const savegame = this.app.savegameMgr.getSavegameById(latestInternalId);
+        savegame.readAsync().then(() => {
+            this.moveToState("InGameState", {
+                savegame,
+            });
+        });
+    }
+
     onLeave() {
         this.dialogs.cleanup();
     }

translations/base-en.yaml

@@ -118,6 +118,8 @@ demoBanners:
 
 mainMenu:
     play: Play
+    continue: Continue
+    newGame: New Game
     changelog: Changelog
     importSavegame: Import
     openSourceHint: This game is open source!