mirror of
https://github.com/tobspr/shapez.io.git
synced 2024-10-27 20:34:29 +00:00
Multiple improvements, fix saves on underground belts
This commit is contained in:
parent
8c42827f4e
commit
a60d23da77
44
src/css/ingame_hud/entity_debugger.scss
Normal file
44
src/css/ingame_hud/entity_debugger.scss
Normal file
@ -0,0 +1,44 @@
|
||||
#ingame_HUD_EntityDebugger {
|
||||
position: absolute;
|
||||
@include S(right, 30px);
|
||||
@include S(top, 250px);
|
||||
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #fff;
|
||||
background: rgba(0, 10, 20, 0.7);
|
||||
padding: 10px;
|
||||
&,
|
||||
* {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.flag {
|
||||
display: inline-block;
|
||||
background: #333438;
|
||||
@include S(padding, 2px);
|
||||
@include S(margin-right, 2px);
|
||||
|
||||
u {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.components {
|
||||
@include S(margin-top, 4px);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@include S(grid-gap, 3px);
|
||||
.component {
|
||||
@include S(padding, 2px);
|
||||
background: #333;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.data {
|
||||
@include S(width, 150px);
|
||||
@include S(height, 50px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -43,6 +43,10 @@
|
||||
color: $accentColorDark;
|
||||
@include SuperSmallText;
|
||||
text-transform: uppercase;
|
||||
// font-weight: bold;
|
||||
color: #fff;
|
||||
text-shadow: #{D(1px)} #{D(1px)} 0 rgba(0, 10, 20, 0.2);
|
||||
|
||||
@include S(margin-left, 5px);
|
||||
}
|
||||
}
|
||||
|
@ -15,7 +15,9 @@
|
||||
justify-content: center;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
@include S(margin-bottom, 5px);
|
||||
@include S(margin-bottom, 4px);
|
||||
color: #fff;
|
||||
text-shadow: #{D(1px)} #{D(1px)} 0 rgba(0, 10, 20, 0.2);
|
||||
|
||||
&.unpinable {
|
||||
> canvas {
|
||||
@ -49,9 +51,10 @@
|
||||
|
||||
> .goalLabel {
|
||||
@include S(font-size, 7px);
|
||||
opacity: 0.3;
|
||||
opacity: 0.5;
|
||||
align-self: start;
|
||||
justify-self: start;
|
||||
font-weight: normal;
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
|
||||
|
@ -1,17 +1,21 @@
|
||||
#ingame_HUD_SettingsMenu {
|
||||
.timePlayed {
|
||||
.statsElement {
|
||||
position: absolute;
|
||||
@include S(left, 30px);
|
||||
@include S(bottom, 30px);
|
||||
@include S(top, 30px);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
grid-template-rows: 1fr auto;
|
||||
flex-direction: column;
|
||||
|
||||
strong {
|
||||
text-transform: uppercase;
|
||||
@include PlainText;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
span {
|
||||
@include S(margin-bottom, 25px);
|
||||
@include Heading;
|
||||
}
|
||||
}
|
||||
|
@ -173,11 +173,13 @@
|
||||
|
||||
@include S(line-height, 13px);
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
@include S(padding, 1px, 2px, 2px);
|
||||
@include S(padding, 1px, 0px, 2px);
|
||||
position: relative;
|
||||
text-align: center;
|
||||
@include S(min-width, 50px);
|
||||
// @include S(max-width, 100px);
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: #333438;
|
||||
|
@ -40,6 +40,7 @@
|
||||
@import "ingame_hud/notifications";
|
||||
@import "ingame_hud/settings_menu";
|
||||
@import "ingame_hud/debug_info";
|
||||
@import "ingame_hud/entity_debugger";
|
||||
|
||||
// prettier-ignore
|
||||
$elements:
|
||||
@ -59,6 +60,7 @@ ingame_HUD_KeybindingOverlay,
|
||||
ingame_HUD_Notifications,
|
||||
ingame_HUD_MassSelector,
|
||||
ingame_HUD_DebugInfo,
|
||||
ingame_HUD_EntityDebugger,
|
||||
|
||||
// Overlays
|
||||
ingame_HUD_BetaOverlay,
|
||||
|
@ -23,6 +23,7 @@
|
||||
@include SuperHeading;
|
||||
text-transform: uppercase;
|
||||
color: #333438;
|
||||
position: relative;
|
||||
@include IncreasedClickArea(10px);
|
||||
}
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>shapez.io - Combine Shapes!</title>
|
||||
<title>shapez.io - Build your own shape factory!</title>
|
||||
|
||||
<!-- mobile stuff -->
|
||||
<meta name="format-detection" content="telephone=no" />
|
||||
|
@ -71,7 +71,7 @@ export const globalConfig = {
|
||||
|
||||
debug: {
|
||||
/* dev:start */
|
||||
fastGameEnter: true,
|
||||
// fastGameEnter: true,
|
||||
noArtificialDelays: true,
|
||||
// disableSavegameWrite: true,
|
||||
// showEntityBounds: true,
|
||||
@ -88,6 +88,7 @@ export const globalConfig = {
|
||||
// testClipping: true,
|
||||
// framePausesBetweenTicks: 40,
|
||||
// testTranslations: true,
|
||||
// enableEntityInspector: true,
|
||||
/* dev:end */
|
||||
},
|
||||
|
||||
|
@ -436,6 +436,9 @@ export function formatBigNumber(num, divider = ".") {
|
||||
if (num < 1000) {
|
||||
return sign + "" + num;
|
||||
}
|
||||
if (num > 10000) {
|
||||
return Math_floor(num / 1000.0) + "k";
|
||||
}
|
||||
|
||||
let rest = num;
|
||||
let out = "";
|
||||
@ -455,7 +458,7 @@ export function formatBigNumber(num, divider = ".") {
|
||||
* @param {string=} divider THe divider for numbers like 50,000 (divider=',')
|
||||
* @returns {string}
|
||||
*/
|
||||
export function formatBigNumberFull(num, divider = ",") {
|
||||
export function formatBigNumberFull(num, divider = T.global.thousandsDivider) {
|
||||
if (num < 1000) {
|
||||
return num + "";
|
||||
}
|
||||
|
@ -19,6 +19,7 @@ export class UndergroundBeltComponent extends Component {
|
||||
return {
|
||||
mode: types.enum(enumUndergroundBeltMode),
|
||||
pendingItems: types.array(types.pair(types.obj(gItemRegistry), types.float)),
|
||||
tier: types.uint,
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -25,11 +25,6 @@ export class Entity extends BasicSerializableObject {
|
||||
*/
|
||||
this.root = root;
|
||||
|
||||
/**
|
||||
* The metaclass of the entity, should be set by subclasses
|
||||
*/
|
||||
this.meta = null;
|
||||
|
||||
/**
|
||||
* The components of the entity
|
||||
*/
|
||||
@ -89,15 +84,6 @@ export class Entity extends BasicSerializableObject {
|
||||
return !this.destroyed && !this.queuedForDestroy;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the meta class of the entity.
|
||||
* @returns {object}
|
||||
*/
|
||||
getMetaclass() {
|
||||
assert(this.meta, "Entity has no metaclass");
|
||||
return this.meta;
|
||||
}
|
||||
|
||||
/**
|
||||
* Internal destroy callback
|
||||
*/
|
||||
|
@ -12,7 +12,7 @@ import { HUDKeybindingOverlay } from "./parts/keybinding_overlay";
|
||||
import { HUDUnlockNotification } from "./parts/unlock_notification";
|
||||
import { HUDGameMenu } from "./parts/game_menu";
|
||||
import { HUDShop } from "./parts/shop";
|
||||
import { IS_MOBILE } from "../../core/config";
|
||||
import { IS_MOBILE, globalConfig } from "../../core/config";
|
||||
import { HUDMassSelector } from "./parts/mass_selector";
|
||||
import { HUDVignetteOverlay } from "./parts/vignette_overlay";
|
||||
import { HUDStatistics } from "./parts/statistics";
|
||||
@ -22,6 +22,7 @@ import { ShapeDefinition } from "../shape_definition";
|
||||
import { HUDNotifications, enumNotificationType } from "./parts/notifications";
|
||||
import { HUDSettingsMenu } from "./parts/settings_menu";
|
||||
import { HUDDebugInfo } from "./parts/debug_info";
|
||||
import { HUDEntityDebugger } from "./parts/entity_debugger";
|
||||
|
||||
export class GameHUD {
|
||||
/**
|
||||
@ -71,6 +72,10 @@ export class GameHUD {
|
||||
this.parts.keybindingOverlay = new HUDKeybindingOverlay(this.root);
|
||||
}
|
||||
|
||||
if (G_IS_DEV && globalConfig.debug.enableEntityInspector) {
|
||||
this.parts.entityDebugger = new HUDEntityDebugger(this.root);
|
||||
}
|
||||
|
||||
const frag = document.createDocumentFragment();
|
||||
for (const key in this.parts) {
|
||||
this.parts[key].createElements(frag);
|
||||
|
68
src/js/game/hud/parts/entity_debugger.js
Normal file
68
src/js/game/hud/parts/entity_debugger.js
Normal file
@ -0,0 +1,68 @@
|
||||
import { BaseHUDPart } from "../base_hud_part";
|
||||
import { makeDiv, removeAllChildren } from "../../../core/utils";
|
||||
import { globalConfig } from "../../../core/config";
|
||||
|
||||
export class HUDEntityDebugger extends BaseHUDPart {
|
||||
createElements(parent) {
|
||||
this.element = makeDiv(
|
||||
parent,
|
||||
"ingame_HUD_EntityDebugger",
|
||||
[],
|
||||
`
|
||||
Tile below cursor: <span class="mousePos"></span><br>
|
||||
Chunk below cursor: <span class="chunkPos"></span><br>
|
||||
<div class="entityInfo"></div>
|
||||
`
|
||||
);
|
||||
|
||||
this.mousePosElem = this.element.querySelector(".mousePos");
|
||||
this.chunkPosElem = this.element.querySelector(".chunkPos");
|
||||
this.entityInfoElem = this.element.querySelector(".entityInfo");
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.root.camera.downPreHandler.add(this.onMouseDown, this);
|
||||
}
|
||||
|
||||
update() {
|
||||
const mousePos = this.root.app.mousePosition;
|
||||
const worldPos = this.root.camera.screenToWorld(mousePos);
|
||||
const worldTile = worldPos.toTileSpace();
|
||||
|
||||
const chunk = worldTile.divideScalar(globalConfig.mapChunkSize).floor();
|
||||
this.mousePosElem.innerText = worldTile.x + " / " + worldTile.y;
|
||||
this.chunkPosElem.innerText = chunk.x + " / " + chunk.y;
|
||||
|
||||
const entity = this.root.map.getTileContent(worldTile);
|
||||
if (entity) {
|
||||
removeAllChildren(this.entityInfoElem);
|
||||
let html = "Entity";
|
||||
|
||||
const flag = (name, val) =>
|
||||
`<span class='flag' data-value='${val ? "1" : "0"}'><u>${name}</u> ${val}</span>`;
|
||||
|
||||
html += "<div class='entityFlags'>";
|
||||
html += flag("registered", entity.registered);
|
||||
html += flag("uid", entity.uid);
|
||||
html += flag("destroyed", entity.destroyed);
|
||||
html += "</div>";
|
||||
|
||||
html += "<div class='components'>";
|
||||
|
||||
for (const componentId in entity.components) {
|
||||
const data = entity.components[componentId];
|
||||
html += "<div class='component'>";
|
||||
html += "<strong class='name'>" + componentId + "</strong>";
|
||||
html += "<textarea class='data'>" + JSON.stringify(data.serialize(), null, 2) + "</textarea>";
|
||||
|
||||
html += "</div>";
|
||||
}
|
||||
|
||||
html += "</div>";
|
||||
|
||||
this.entityInfoElem.innerHTML = html;
|
||||
}
|
||||
}
|
||||
|
||||
onMouseDown() {}
|
||||
}
|
@ -1,9 +1,12 @@
|
||||
import { BaseHUDPart } from "../base_hud_part";
|
||||
import { makeDiv, formatSeconds } from "../../../core/utils";
|
||||
import { makeDiv, formatSeconds, formatBigNumberFull } from "../../../core/utils";
|
||||
import { DynamicDomAttach } from "../dynamic_dom_attach";
|
||||
import { InputReceiver } from "../../../core/input_receiver";
|
||||
import { KeyActionMapper } from "../../key_action_mapper";
|
||||
import { T } from "../../../translations";
|
||||
import { StaticMapEntityComponent } from "../../components/static_map_entity";
|
||||
import { ItemProcessorComponent } from "../../components/item_processor";
|
||||
import { BeltComponent } from "../../components/belt";
|
||||
|
||||
export class HUDSettingsMenu extends BaseHUDPart {
|
||||
createElements(parent) {
|
||||
@ -11,11 +14,16 @@ export class HUDSettingsMenu extends BaseHUDPart {
|
||||
|
||||
this.menuElement = makeDiv(this.background, null, ["menuElement"]);
|
||||
|
||||
this.timePlayed = makeDiv(
|
||||
this.statsElement = makeDiv(
|
||||
this.background,
|
||||
null,
|
||||
["timePlayed"],
|
||||
`<strong>${T.ingame.settingsMenu.playtime}</strong><span class="playtime"></span>`
|
||||
["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"]);
|
||||
@ -89,10 +97,18 @@ export class HUDSettingsMenu extends BaseHUDPart {
|
||||
this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever);
|
||||
|
||||
const totalMinutesPlayed = Math.ceil(this.root.time.now() / 60);
|
||||
this.timePlayed.querySelector(".playtime").innerText = T.global.time.xMinutes.replace(
|
||||
this.statsElement.querySelector(".playtime").innerText = T.global.time.xMinutes.replace(
|
||||
"<x>",
|
||||
"" + totalMinutesPlayed
|
||||
);
|
||||
|
||||
this.statsElement.querySelector(".buildingsPlaced").innerText = formatBigNumberFull(
|
||||
this.root.entityMgr.getAllWithComponent(StaticMapEntityComponent).length -
|
||||
this.root.entityMgr.getAllWithComponent(BeltComponent).length
|
||||
);
|
||||
this.statsElement.querySelector(".beltsPlaced").innerText = formatBigNumberFull(
|
||||
this.root.entityMgr.getAllWithComponent(BeltComponent).length
|
||||
);
|
||||
}
|
||||
|
||||
close() {
|
||||
|
@ -55,7 +55,7 @@ export class PlatformWrapperInterface {
|
||||
* @returns {number}
|
||||
*/
|
||||
getMinimumZoom() {
|
||||
return 0.2 * this.getScreenScale();
|
||||
return 0.1 * this.getScreenScale();
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -200,8 +200,8 @@ ingame:
|
||||
settingsMenu:
|
||||
playtime: Playtime
|
||||
|
||||
playtime1Minute: 1 minutes
|
||||
playtimeXMinutes: <x> minutes
|
||||
buildingsPlaced: Buildings
|
||||
beltsPlaced: Belts
|
||||
|
||||
buttons:
|
||||
continue: Continue
|
||||
|
Loading…
Reference in New Issue
Block a user