Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2026-03-02 03:39:21 +00:00
Code Issues Projects Releases Wiki Activity

Polishing, CSS Improvements, Improve dark mode

Browse Source
This commit is contained in:
tobspr
2020-09-19 14:27:25 +02:00
parent 5bde508f86
commit 7d6af359a1
53 changed files with 1480 additions and 1351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -277,7 +277,6 @@ export class DialogLoading extends Dialog {
const loader = document.createElement("div");
loader.classList.add("prefab_LoadingTextWithAnim");
loader.classList.add("loadingIndicator");
loader.innerText = T.global.loading;
elem.appendChild(loader);
this.app.inputMgr.pushReciever(this.inputReciever);

1
src/js/game/game_loading_overlay.js
View File

@@ -55,7 +55,6 @@ export class GameLoadingOverlay {
internalAddSpinnerAndText(element) {
const inner = document.createElement("span");
inner.classList.add("prefab_LoadingTextWithAnim");
inner.innerText = T.global.loading;
element.appendChild(inner);
}

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

@@ -17,7 +17,8 @@ export class HUDGameMenu extends BaseHUDPart {
label: "Upgrades",
handler: () => this.root.hud.parts.shop.show(),
keybinding: KEYMAPPINGS.ingame.menuOpenShop,
badge: () => this.root.hubGoals.getAvailableUpgradeCount(),
// badge: () => this.root.hubGoals.getAvailableUpgradeCount(),
badge: () => 1,
notification: /** @type {[string, enumNotificationType]} */ ([
T.ingame.notifications.newUpgrade,
enumNotificationType.upgrade,
@@ -52,18 +53,15 @@ export class HUDGameMenu extends BaseHUDPart {
* }>} */
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.buttonsElement.appendChild(button);
button.classList.add(id);
this.element.appendChild(button);
this.trackClicks(button, handler);
if (keybinding) {
const binding = this.root.keyMapper.getBinding(keybinding);
binding.add(handler);
binding.appendLabelToElement(button);
}
if (visible) {
@@ -87,10 +85,8 @@ export class HUDGameMenu extends BaseHUDPart {
}
});
const menuButtons = makeDiv(this.element, null, ["menuButtons"]);
this.saveButton = makeDiv(menuButtons, null, ["button", "save", "animEven"]);
this.settingsButton = makeDiv(menuButtons, null, ["button", "settings"]);
this.saveButton = makeDiv(this.element, null, ["button", "save", "animEven"]);
this.settingsButton = makeDiv(this.element, null, ["button", "settings"]);
this.trackClicks(this.saveButton, this.startSave);
this.trackClicks(this.settingsButton, this.openSettings);

254
src/js/game/hud/parts/settings_menu.js
View File

@@ -1,127 +1,127 @@
import { BaseHUDPart } from "../base_hud_part";
import { makeDiv, formatBigNumberFull } from "../../../core/utils";
import { DynamicDomAttach } from "../dynamic_dom_attach";
import { InputReceiver } from "../../../core/input_receiver";
import { KeyActionMapper, KEYMAPPINGS } from "../../key_action_mapper";
import { T } from "../../../translations";
import { StaticMapEntityComponent } from "../../components/static_map_entity";
import { BeltComponent } from "../../components/belt";
export class HUDSettingsMenu extends BaseHUDPart {
createElements(parent) {
this.background = makeDiv(parent, "ingame_HUD_SettingsMenu", ["ingameDialog"]);
this.menuElement = makeDiv(this.background, null, ["menuElement"]);
this.statsElement = makeDiv(
this.background,
null,
["statsElement"],
`
<strong>${T.ingame.settingsMenu.beltsPlaced}</strong><span class="beltsPlaced"></span>
<strong>${T.ingame.settingsMenu.buildingsPlaced}</strong><span class="buildingsPlaced"></span>
<strong>${T.ingame.settingsMenu.playtime}</strong><span class="playtime"></span>
`
);
this.buttonContainer = makeDiv(this.menuElement, null, ["buttons"]);
const buttons = [
{
title: T.ingame.settingsMenu.buttons.continue,
action: () => this.close(),
},
{
title: T.ingame.settingsMenu.buttons.settings,
action: () => this.goToSettings(),
},
{
title: T.ingame.settingsMenu.buttons.menu,
action: () => this.returnToMenu(),
},
];
for (let i = 0; i < buttons.length; ++i) {
const { title, action } = buttons[i];
const element = document.createElement("button");
element.classList.add("styledButton");
element.innerText = title;
this.buttonContainer.appendChild(element);
this.trackClicks(element, action);
}
}
returnToMenu() {
this.root.gameState.goBackToMenu();
}
goToSettings() {
this.root.gameState.goToSettings();
}
shouldPauseGame() {
return this.visible;
}
shouldPauseRendering() {
return this.visible;
}
initialize() {
this.root.keyMapper.getBinding(KEYMAPPINGS.general.back).add(this.show, this);
this.domAttach = new DynamicDomAttach(this.root, this.background, {
attachClass: "visible",
});
this.inputReciever = new InputReceiver("settingsmenu");
this.keyActionMapper = new KeyActionMapper(this.root, this.inputReciever);
this.keyActionMapper.getBinding(KEYMAPPINGS.general.back).add(this.close, this);
this.close();
}
cleanup() {
document.body.classList.remove("ingameDialogOpen");
}
show() {
this.visible = true;
document.body.classList.add("ingameDialogOpen");
this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever);
const totalMinutesPlayed = Math.ceil(this.root.time.now() / 60);
/** @type {HTMLElement} */
const playtimeElement = this.statsElement.querySelector(".playtime");
/** @type {HTMLElement} */
const buildingsPlacedElement = this.statsElement.querySelector(".buildingsPlaced");
/** @type {HTMLElement} */
const beltsPlacedElement = this.statsElement.querySelector(".beltsPlaced");
playtimeElement.innerText = T.global.time.xMinutes.replace("<x>", `${totalMinutesPlayed}`);
buildingsPlacedElement.innerText = formatBigNumberFull(
this.root.entityMgr.getAllWithComponent(StaticMapEntityComponent).length -
this.root.entityMgr.getAllWithComponent(BeltComponent).length
);
beltsPlacedElement.innerText = formatBigNumberFull(
this.root.entityMgr.getAllWithComponent(BeltComponent).length
);
}
close() {
this.visible = false;
document.body.classList.remove("ingameDialogOpen");
this.root.app.inputMgr.makeSureDetached(this.inputReciever);
this.update();
}
update() {
this.domAttach.update(this.visible);
}
}
import { BaseHUDPart } from "../base_hud_part";
import { makeDiv, formatBigNumberFull } from "../../../core/utils";
import { DynamicDomAttach } from "../dynamic_dom_attach";
import { InputReceiver } from "../../../core/input_receiver";
import { KeyActionMapper, KEYMAPPINGS } from "../../key_action_mapper";
import { T } from "../../../translations";
import { StaticMapEntityComponent } from "../../components/static_map_entity";
import { BeltComponent } from "../../components/belt";
export class HUDSettingsMenu extends BaseHUDPart {
createElements(parent) {
this.background = makeDiv(parent, "ingame_HUD_SettingsMenu", ["ingameDialog"]);
this.menuElement = makeDiv(this.background, null, ["menuElement"]);
this.statsElement = makeDiv(
this.background,
null,
["statsElement"],
`
<strong>${T.ingame.settingsMenu.beltsPlaced}</strong><span class="beltsPlaced"></span>
<strong>${T.ingame.settingsMenu.buildingsPlaced}</strong><span class="buildingsPlaced"></span>
<strong>${T.ingame.settingsMenu.playtime}</strong><span class="playtime"></span>
`
);
this.buttonContainer = makeDiv(this.menuElement, null, ["buttons"]);
const buttons = [
{
id: "continue",
action: () => this.close(),
},
{
id: "settings",
action: () => this.goToSettings(),
},
{
id: "menu",
action: () => this.returnToMenu(),
},
];
for (let i = 0; i < buttons.length; ++i) {
const { title, action, id } = buttons[i];
const element = document.createElement("button");
element.classList.add("styledButton");
element.classList.add(id);
this.buttonContainer.appendChild(element);
this.trackClicks(element, action);
}
}
returnToMenu() {
this.root.gameState.goBackToMenu();
}
goToSettings() {
this.root.gameState.goToSettings();
}
shouldPauseGame() {
return this.visible;
}
shouldPauseRendering() {
return this.visible;
}
initialize() {
this.root.keyMapper.getBinding(KEYMAPPINGS.general.back).add(this.show, this);
this.domAttach = new DynamicDomAttach(this.root, this.background, {
attachClass: "visible",
});
this.inputReciever = new InputReceiver("settingsmenu");
this.keyActionMapper = new KeyActionMapper(this.root, this.inputReciever);
this.keyActionMapper.getBinding(KEYMAPPINGS.general.back).add(this.close, this);
this.close();
}
cleanup() {
document.body.classList.remove("ingameDialogOpen");
}
show() {
this.visible = true;
document.body.classList.add("ingameDialogOpen");
this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever);
const totalMinutesPlayed = Math.ceil(this.root.time.now() / 60);
/** @type {HTMLElement} */
const playtimeElement = this.statsElement.querySelector(".playtime");
/** @type {HTMLElement} */
const buildingsPlacedElement = this.statsElement.querySelector(".buildingsPlaced");
/** @type {HTMLElement} */
const beltsPlacedElement = this.statsElement.querySelector(".beltsPlaced");
playtimeElement.innerText = T.global.time.xMinutes.replace("<x>", `${totalMinutesPlayed}`);
buildingsPlacedElement.innerText = formatBigNumberFull(
this.root.entityMgr.getAllWithComponent(StaticMapEntityComponent).length -
this.root.entityMgr.getAllWithComponent(BeltComponent).length
);
beltsPlacedElement.innerText = formatBigNumberFull(
this.root.entityMgr.getAllWithComponent(BeltComponent).length
);
}
close() {
this.visible = false;
document.body.classList.remove("ingameDialogOpen");
this.root.app.inputMgr.makeSureDetached(this.inputReciever);
this.update();
}
update() {
this.domAttach.update(this.visible);
}
}

9
src/js/game/systems/map_resources.js
View File

@@ -49,11 +49,20 @@ export class MapResourcesSystem extends GameSystem {
} else {
// HIGH QUALITY: Draw all items
const layer = chunk.lowerLayer;
const layerEntities = chunk.contents;
for (let x = 0; x < globalConfig.mapChunkSize; ++x) {
const row = layer[x];
const rowEntities = layerEntities[x];
const worldX = (chunk.tileX + x) * globalConfig.tileSize;
for (let y = 0; y < globalConfig.mapChunkSize; ++y) {
const lowerItem = row[y];
const entity = rowEntities[y];
if (entity) {
// Don't draw if there is an entity above
continue;
}
if (lowerItem) {
const worldY = (chunk.tileY + y) * globalConfig.tileSize;

10
src/js/game/themes/dark.json
View File

@@ -1,7 +1,7 @@
{
"uiStyle": "dark",
"map": {
"background": "#2e2f37",
"background": "#3e3f47",
"grid": "rgba(255, 255, 255, 0.02)",
"gridLineWidth": 0.5,
@@ -25,10 +25,10 @@
"colorBlindPickerTile": "rgba(255, 255, 255, 0.5)",
"resources": {
"shape": "#3d3f4a",
"red": "#4a3d3f",
"green": "#3e4a3d",
"blue": "#35384a"
"shape": "#5d5f6a",
"red": "#854f56",
"green": "#667964",
"blue": "#5e7ca4"
},
"chunkOverview": {
"empty": "#444856",

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

@@ -488,8 +488,10 @@ export class MainMenuState extends GameState {
const signals = this.dialogs.showWarning(
T.dialogs.confirmSavegameDelete.title,
T.dialogs.confirmSavegameDelete.text,
["delete:bad", "cancel:good"]
T.dialogs.confirmSavegameDelete.text
.replace("<savegameName>", game.name || T.mainMenu.savegameUnnamed)
.replace("<savegameLevel>", String(game.level)),
["cancel:good", "delete:bad:timeout"]
);
signals.delete.add(() => {