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

Improve UX for first levels

Browse Source
This commit is contained in:
tobspr 2020-06-01 20:18:50 +02:00
parent 5cd4dba54a
commit 91351d2f79
10 changed files with 90 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
gulp/html.js
View File

@ -96,12 +96,20 @@ function gulptasksHTML($, gulp, buildFolder, browserSync) {
const initScript = document.createElement("script"); const initScript = document.createElement("script");
initScript.textContent = ` initScript.textContent = `
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);} function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('js', new Date());
gtag('config', 'UA-165342524-1', { anonymize_ip: true }); gtag('config', 'UA-165342524-1', { anonymize_ip: true });
`; `;
document.head.appendChild(initScript); document.head.appendChild(initScript);
const abTestingScript = document.createElement("script");
abTestingScript.setAttribute(
"src",
"https://www.googleoptimize.com/optimize.js?id=OPT-M5NHCV7"
);
abTestingScript.setAttribute("async", "");
document.head.appendChild(abTestingScript);
} }
// Do not need to preload in app or standalone // Do not need to preload in app or standalone

4
src/css/ingame_hud/game_menu.scss
View File

@ -76,7 +76,7 @@
} }
} }
> button { .buttonContainer button {
@include PlainText; @include PlainText;
color: #fff; color: #fff;
border-color: rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.1);
@ -86,7 +86,7 @@
@include S(margin-right, 3px); @include S(margin-right, 3px);
@include IncreasedClickArea(0px); @include IncreasedClickArea(0px);
@include ButtonText; @include ButtonText;
@include S(min-height, 30px); @include S(min-height, 40px);
transition: all 0.12s ease-in-out; transition: all 0.12s ease-in-out;
transition-property: opacity, transform; transition-property: opacity, transform;
display: inline-flex; display: inline-flex;

8
src/css/ingame_hud/tutorial_hints.scss
View File

@ -1,7 +1,12 @@
#ingame_HUD_TutorialHints { #ingame_HUD_TutorialHints {
position: absolute; position: absolute;
@include S(left, 10px); @include S(left, 10px);
@include S(bottom, 50px); @include S(bottom, 10px);
@include StyleBelowWidth(1430px) {
@include S(bottom, 50px);
}
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: rgba(50, 60, 70, 0); background: rgba(50, 60, 70, 0);
@ -50,6 +55,7 @@
button.toggleHint { button.toggleHint {
@include PlainText; @include PlainText;
@include IncreasedClickArea(0px);
} }
} }

2
src/css/ingame_hud/waypoints.scss
View File

@ -1,7 +1,7 @@
#ingame_HUD_Waypoints_Hint { #ingame_HUD_Waypoints_Hint {
position: absolute; position: absolute;
@include S(right, 10px); @include S(right, 10px);
@include S(bottom, 100px); @include S(bottom, 10px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;

3
src/html/index.html
View File

@ -40,9 +40,6 @@
<meta http-equiv="Expires" content="0" /> <meta http-equiv="Expires" content="0" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="canonical" href="https://shapez.io" /> <link rel="canonical" href="https://shapez.io" />
<!-- a/b testing -->
<script src="https://www.googleoptimize.com/optimize.js?id=OPT-M5NHCV7"></script>
</head> </head>
<body oncontextmenu="return false" style="background: #393747;"></body> <body oncontextmenu="return false" style="background: #393747;"></body>

1
src/js/core/config.js
View File

@ -109,6 +109,7 @@ export const globalConfig = {
// instantBelts: true, // instantBelts: true,
// instantProcessors: true, // instantProcessors: true,
// instantMiners: true, // instantMiners: true,
// resumeGameOnFastEnter: false,
// renderForTrailer: true, // renderForTrailer: true,
/* dev:end */ /* dev:end */

68
src/js/game/hud/parts/game_menu.js
View File

@ -5,9 +5,9 @@ import { enumNotificationType } from "./notifications";
import { T } from "../../../translations"; import { T } from "../../../translations";
import { KEYMAPPINGS } from "../../key_action_mapper"; import { KEYMAPPINGS } from "../../key_action_mapper";
import { IS_DEMO } from "../../../core/config"; import { IS_DEMO } from "../../../core/config";
import { DynamicDomAttach } from "../dynamic_dom_attach";
export class HUDGameMenu extends BaseHUDPart { export class HUDGameMenu extends BaseHUDPart {
initialize() {}
createElements(parent) { createElements(parent) {
this.element = makeDiv(parent, "ingame_HUD_GameMenu"); this.element = makeDiv(parent, "ingame_HUD_GameMenu");
@ -22,12 +22,16 @@ export class HUDGameMenu extends BaseHUDPart {
T.ingame.notifications.newUpgrade, T.ingame.notifications.newUpgrade,
enumNotificationType.upgrade, enumNotificationType.upgrade,
]), ]),
visible: () =>
!this.root.app.settings.getAllSettings().offerHints || this.root.hubGoals.level >= 3,
}, },
{ {
id: "stats", id: "stats",
label: "Stats", label: "Stats",
handler: () => this.root.hud.parts.statistics.show(), handler: () => this.root.hud.parts.statistics.show(),
keybinding: KEYMAPPINGS.ingame.menuOpenStats, keybinding: KEYMAPPINGS.ingame.menuOpenStats,
visible: () =>
!this.root.app.settings.getAllSettings().offerHints || this.root.hubGoals.level >= 3,
}, },
]; ];
@ -36,14 +40,24 @@ export class HUDGameMenu extends BaseHUDPart {
* button: HTMLElement, * button: HTMLElement,
* badgeElement: HTMLElement, * badgeElement: HTMLElement,
* lastRenderAmount: number, * lastRenderAmount: number,
* condition?: function,
* notification: [string, enumNotificationType] * notification: [string, enumNotificationType]
* }>} */ * }>} */
this.badgesToUpdate = []; this.badgesToUpdate = [];
buttons.forEach(({ id, label, handler, keybinding, badge, notification }) => { /** @type {Array<{
* button: HTMLElement,
* condition: function,
* domAttach: DynamicDomAttach
* }>} */
this.visibilityToUpdate = [];
this.buttonsElement = makeDiv(this.element, null, ["buttonContainer"]);
buttons.forEach(({ id, label, handler, keybinding, badge, notification, visible }) => {
const button = document.createElement("button"); const button = document.createElement("button");
button.setAttribute("data-button-id", id); button.setAttribute("data-button-id", id);
this.element.appendChild(button); this.buttonsElement.appendChild(button);
this.trackClicks(button, handler); this.trackClicks(button, handler);
if (keybinding) { if (keybinding) {
@ -52,6 +66,14 @@ export class HUDGameMenu extends BaseHUDPart {
binding.appendLabelToElement(button); binding.appendLabelToElement(button);
} }
if (visible) {
this.visibilityToUpdate.push({
button,
condition: visible,
domAttach: new DynamicDomAttach(this.root, button),
});
}
if (badge) { if (badge) {
const badgeElement = makeDiv(button, null, ["badge"]); const badgeElement = makeDiv(button, null, ["badge"]);
this.badgesToUpdate.push({ this.badgesToUpdate.push({
@ -60,6 +82,7 @@ export class HUDGameMenu extends BaseHUDPart {
button, button,
badgeElement, badgeElement,
notification, notification,
condition: visible,
}); });
} }
}); });
@ -78,27 +101,52 @@ export class HUDGameMenu extends BaseHUDPart {
this.musicButton.classList.toggle("muted", this.root.app.settings.getAllSettings().musicMuted); this.musicButton.classList.toggle("muted", this.root.app.settings.getAllSettings().musicMuted);
this.sfxButton.classList.toggle("muted", this.root.app.settings.getAllSettings().soundsMuted); this.sfxButton.classList.toggle("muted", this.root.app.settings.getAllSettings().soundsMuted);
}
initialize() {
this.root.signals.gameSaved.add(this.onGameSaved, this); this.root.signals.gameSaved.add(this.onGameSaved, this);
} }
update() { update() {
let playSound = false; let playSound = false;
let notifications = new Set(); let notifications = new Set();
// Update visibility of buttons
for (let i = 0; i < this.visibilityToUpdate.length; ++i) {
const { button, condition, domAttach } = this.visibilityToUpdate[i];
domAttach.update(condition());
}
// Check for notifications and badges
for (let i = 0; i < this.badgesToUpdate.length; ++i) { for (let i = 0; i < this.badgesToUpdate.length; ++i) {
const { badge, button, badgeElement, lastRenderAmount, notification } = this.badgesToUpdate[i]; const {
badge,
button,
badgeElement,
lastRenderAmount,
notification,
condition,
} = this.badgesToUpdate[i];
if (condition && !condition()) {
// Do not show notifications for invisible buttons
continue;
}
// Check if the amount shown differs from the one shown last frame
const amount = badge(); const amount = badge();
if (lastRenderAmount !== amount) { if (lastRenderAmount !== amount) {
if (amount > 0) { if (amount > 0) {
badgeElement.innerText = amount; badgeElement.innerText = amount;
} }
// Check if the badge increased // Check if the badge increased, if so play a notification
if (amount > lastRenderAmount) { if (amount > lastRenderAmount) {
playSound = true; playSound = true;
if (notification) { if (notification) {
notifications.add(notification); notifications.add(notification);
} }
} }
// Rerender notifications
this.badgesToUpdate[i].lastRenderAmount = amount; this.badgesToUpdate[i].lastRenderAmount = amount;
button.classList.toggle("hasBadge", amount > 0); button.classList.toggle("hasBadge", amount > 0);
} }
@ -107,6 +155,7 @@ export class HUDGameMenu extends BaseHUDPart {
if (playSound) { if (playSound) {
this.root.soundProxy.playUi(SOUNDS.badgeNotification); this.root.soundProxy.playUi(SOUNDS.badgeNotification);
} }
notifications.forEach(([notification, type]) => { notifications.forEach(([notification, type]) => {
this.root.hud.signals.notification.dispatch(notification, type); this.root.hud.signals.notification.dispatch(notification, type);
}); });
@ -118,13 +167,6 @@ export class HUDGameMenu extends BaseHUDPart {
} }
startSave() { startSave() {
// if (IS_DEMO) {
// this.root.hud.parts.dialogs.showFeatureRestrictionInfo(
// null,
// T.dialogs.saveNotPossibleInDemo.desc
// );
// }
this.root.gameState.doSave(); this.root.gameState.doSave();
} }

11
src/js/game/hud/parts/keybinding_overlay.js
View File

@ -31,8 +31,15 @@ export class HUDKeybindingOverlay extends BaseHUDPart {
<code class="keybinding">${getKeycode(KEYMAPPINGS.navigation.mapMoveDown)}</code> <code class="keybinding">${getKeycode(KEYMAPPINGS.navigation.mapMoveDown)}</code>
<code class="keybinding">${getKeycode(KEYMAPPINGS.navigation.mapMoveRight)}</code> <code class="keybinding">${getKeycode(KEYMAPPINGS.navigation.mapMoveRight)}</code>
<label>${T.ingame.keybindingsOverlay.moveMap}</label> <label>${T.ingame.keybindingsOverlay.moveMap}</label>
</div> </div>
<div class="binding noPlacementOnly">
<code class="keybinding rightMouse"></code>
<label>${T.ingame.keybindingsOverlay.delete}</label>
</div>
<div class="binding noPlacementOnly"> <div class="binding noPlacementOnly">
<code class="keybinding builtinKey">${getKeycode( <code class="keybinding builtinKey">${getKeycode(
KEYMAPPINGS.massSelect.massSelectStart KEYMAPPINGS.massSelect.massSelectStart

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

@ -199,7 +199,7 @@ export class MainMenuState extends GameState {
if (G_IS_DEV && globalConfig.debug.fastGameEnter) { if (G_IS_DEV && globalConfig.debug.fastGameEnter) {
const games = this.app.savegameMgr.getSavegamesMetaData(); const games = this.app.savegameMgr.getSavegamesMetaData();
if (games.length > 0) { if (games.length > 0 && globalConfig.debug.resumeGameOnFastEnter) {
this.resumeGame(games[0]); this.resumeGame(games[0]);
} else { } else {
this.onPlayButtonClicked(); this.onPlayButtonClicked();

3
translations/base-en.yaml
View File

@ -216,6 +216,7 @@ ingame:
toggleHud: Toggle HUD toggleHud: Toggle HUD
placeBuilding: Place building placeBuilding: Place building
createMarker: Create Marker createMarker: Create Marker
delete: Destroy
# Everything related to placing buildings (I.e. as soon as you selected a building # Everything related to placing buildings (I.e. as soon as you selected a building
# from the toolbar) # from the toolbar)
@ -565,7 +566,7 @@ settings:
offerHints: offerHints:
title: Hints & Tutorials title: Hints & Tutorials
description: >- description: >-
Whether to offer hints and tutorials while playing. Whether to offer hints and tutorials while playing. Also hides certain UI elements onto a given level to make it easier to get into the game.
keybindings: keybindings:
title: Keybindings title: Keybindings