Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2024-10-27 20:34:29 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #85 from jaysc/continue

Browse Source 
Added continue button
This commit is contained in:
tobspr 2020-06-16 17:48:43 +02:00 committed by GitHub
commit 3c3c5acc8e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 155 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;

66
src/js/core/utils.js
View File

@ -646,13 +646,12 @@ export function measure(name, target) {
}
/**
* Helper method to create a new div
* @param {Element} parent
* Helper method to create a new div element
* @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");
for (let i = 0; i < classes.length; ++i) {
element.classList.add(classes[i]);
}
element.classList.add("styledButton");
element.innerHTML = innerHTML;
const element = makeButtonElement(classes, 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

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

@ -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");
resumeBtn.classList.add("styledButton", "resumeGame");
elem.appendChild(resumeBtn);
const resumeButton = document.createElement("button");
resumeButton.classList.add("styledButton", "resumeGame");
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();
}

2
translations/base-en.yaml
View File

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