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

8
gulp/html.js
View File

@ -102,6 +102,14 @@ function gulptasksHTML($, gulp, buildFolder, browserSync) {
gtag('config', 'UA-165342524-1', { anonymize_ip: true });
`;
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

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

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

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

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

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

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

3
src/html/index.html
View File

@ -40,9 +40,6 @@
<meta http-equiv="Expires" content="0" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="canonical" href="https://shapez.io" />
<!-- a/b testing -->
<script src="https://www.googleoptimize.com/optimize.js?id=OPT-M5NHCV7"></script>
</head>
<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,
// instantProcessors: true,
// instantMiners: true,
// resumeGameOnFastEnter: false,
// renderForTrailer: true,
/* 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 { KEYMAPPINGS } from "../../key_action_mapper";
import { IS_DEMO } from "../../../core/config";
import { DynamicDomAttach } from "../dynamic_dom_attach";
export class HUDGameMenu extends BaseHUDPart {
initialize() {}
createElements(parent) {
this.element = makeDiv(parent, "ingame_HUD_GameMenu");
@ -22,12 +22,16 @@ export class HUDGameMenu extends BaseHUDPart {
T.ingame.notifications.newUpgrade,
enumNotificationType.upgrade,
]),
visible: () =>
!this.root.app.settings.getAllSettings().offerHints || this.root.hubGoals.level >= 3,
},
{
id: "stats",
label: "Stats",
handler: () => this.root.hud.parts.statistics.show(),
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,
* badgeElement: HTMLElement,
* lastRenderAmount: number,
* condition?: function,
* notification: [string, enumNotificationType]
* }>} */
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");
button.setAttribute("data-button-id", id);
this.element.appendChild(button);
this.buttonsElement.appendChild(button);
this.trackClicks(button, handler);
if (keybinding) {
@ -52,6 +66,14 @@ export class HUDGameMenu extends BaseHUDPart {
binding.appendLabelToElement(button);
}
if (visible) {
this.visibilityToUpdate.push({
button,
condition: visible,
domAttach: new DynamicDomAttach(this.root, button),
});
}
if (badge) {
const badgeElement = makeDiv(button, null, ["badge"]);
this.badgesToUpdate.push({
@ -60,6 +82,7 @@ export class HUDGameMenu extends BaseHUDPart {
button,
badgeElement,
notification,
condition: visible,
});
}
});
@ -78,27 +101,52 @@ export class HUDGameMenu extends BaseHUDPart {
this.musicButton.classList.toggle("muted", this.root.app.settings.getAllSettings().musicMuted);
this.sfxButton.classList.toggle("muted", this.root.app.settings.getAllSettings().soundsMuted);
}
initialize() {
this.root.signals.gameSaved.add(this.onGameSaved, this);
}
update() {
let playSound = false;
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) {
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();
if (lastRenderAmount !== amount) {
if (amount > 0) {
badgeElement.innerText = amount;
}
// Check if the badge increased
// Check if the badge increased, if so play a notification
if (amount > lastRenderAmount) {
playSound = true;
if (notification) {
notifications.add(notification);
}
}
// Rerender notifications
this.badgesToUpdate[i].lastRenderAmount = amount;
button.classList.toggle("hasBadge", amount > 0);
}
@ -107,6 +155,7 @@ export class HUDGameMenu extends BaseHUDPart {
if (playSound) {
this.root.soundProxy.playUi(SOUNDS.badgeNotification);
}
notifications.forEach(([notification, type]) => {
this.root.hud.signals.notification.dispatch(notification, type);
});
@ -118,13 +167,6 @@ export class HUDGameMenu extends BaseHUDPart {
}
startSave() {
// if (IS_DEMO) {
// this.root.hud.parts.dialogs.showFeatureRestrictionInfo(
// null,
// T.dialogs.saveNotPossibleInDemo.desc
// );
// }
this.root.gameState.doSave();
}

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

@ -33,6 +33,13 @@ export class HUDKeybindingOverlay extends BaseHUDPart {
<label>${T.ingame.keybindingsOverlay.moveMap}</label>
</div>
<div class="binding noPlacementOnly">
<code class="keybinding rightMouse"></code>
<label>${T.ingame.keybindingsOverlay.delete}</label>
</div>
<div class="binding noPlacementOnly">
<code class="keybinding builtinKey">${getKeycode(
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) {
const games = this.app.savegameMgr.getSavegamesMetaData();
if (games.length > 0) {
if (games.length > 0 && globalConfig.debug.resumeGameOnFastEnter) {
this.resumeGame(games[0]);
} else {
this.onPlayButtonClicked();

3
translations/base-en.yaml
View File

@ -216,6 +216,7 @@ ingame:
toggleHud: Toggle HUD
placeBuilding: Place building
createMarker: Create Marker
delete: Destroy
# Everything related to placing buildings (I.e. as soon as you selected a building
# from the toolbar)
@ -565,7 +566,7 @@ settings:
offerHints:
title: Hints & Tutorials
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:
title: Keybindings