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;
|
color: $accentColorDark;
|
||||||
@include SuperSmallText;
|
@include SuperSmallText;
|
||||||
text-transform: uppercase;
|
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);
|
@include S(margin-left, 5px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -15,7 +15,9 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
grid-template-columns: auto 1fr;
|
grid-template-columns: auto 1fr;
|
||||||
grid-template-rows: 1fr 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 {
|
&.unpinable {
|
||||||
> canvas {
|
> canvas {
|
||||||
@ -49,9 +51,10 @@
|
|||||||
|
|
||||||
> .goalLabel {
|
> .goalLabel {
|
||||||
@include S(font-size, 7px);
|
@include S(font-size, 7px);
|
||||||
opacity: 0.3;
|
opacity: 0.5;
|
||||||
align-self: start;
|
align-self: start;
|
||||||
justify-self: start;
|
justify-self: start;
|
||||||
|
font-weight: normal;
|
||||||
grid-row: 2 / 3;
|
grid-row: 2 / 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,17 +1,21 @@
|
|||||||
#ingame_HUD_SettingsMenu {
|
#ingame_HUD_SettingsMenu {
|
||||||
.timePlayed {
|
.statsElement {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@include S(left, 30px);
|
@include S(left, 30px);
|
||||||
@include S(bottom, 30px);
|
@include S(top, 30px);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
grid-template-rows: 1fr auto;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
strong {
|
strong {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
@include PlainText;
|
@include PlainText;
|
||||||
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
|
@include S(margin-bottom, 25px);
|
||||||
@include Heading;
|
@include Heading;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -173,11 +173,13 @@
|
|||||||
|
|
||||||
@include S(line-height, 13px);
|
@include S(line-height, 13px);
|
||||||
@include S(border-radius, $globalBorderRadius);
|
@include S(border-radius, $globalBorderRadius);
|
||||||
@include S(padding, 1px, 2px, 2px);
|
@include S(padding, 1px, 0px, 2px);
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@include S(min-width, 50px);
|
@include S(min-width, 50px);
|
||||||
|
// @include S(max-width, 100px);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
@include DarkThemeOverride {
|
@include DarkThemeOverride {
|
||||||
background: #333438;
|
background: #333438;
|
||||||
|
@ -40,6 +40,7 @@
|
|||||||
@import "ingame_hud/notifications";
|
@import "ingame_hud/notifications";
|
||||||
@import "ingame_hud/settings_menu";
|
@import "ingame_hud/settings_menu";
|
||||||
@import "ingame_hud/debug_info";
|
@import "ingame_hud/debug_info";
|
||||||
|
@import "ingame_hud/entity_debugger";
|
||||||
|
|
||||||
// prettier-ignore
|
// prettier-ignore
|
||||||
$elements:
|
$elements:
|
||||||
@ -59,6 +60,7 @@ ingame_HUD_KeybindingOverlay,
|
|||||||
ingame_HUD_Notifications,
|
ingame_HUD_Notifications,
|
||||||
ingame_HUD_MassSelector,
|
ingame_HUD_MassSelector,
|
||||||
ingame_HUD_DebugInfo,
|
ingame_HUD_DebugInfo,
|
||||||
|
ingame_HUD_EntityDebugger,
|
||||||
|
|
||||||
// Overlays
|
// Overlays
|
||||||
ingame_HUD_BetaOverlay,
|
ingame_HUD_BetaOverlay,
|
||||||
|
@ -23,6 +23,7 @@
|
|||||||
@include SuperHeading;
|
@include SuperHeading;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: #333438;
|
color: #333438;
|
||||||
|
position: relative;
|
||||||
@include IncreasedClickArea(10px);
|
@include IncreasedClickArea(10px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>shapez.io - Combine Shapes!</title>
|
<title>shapez.io - Build your own shape factory!</title>
|
||||||
|
|
||||||
<!-- mobile stuff -->
|
<!-- mobile stuff -->
|
||||||
<meta name="format-detection" content="telephone=no" />
|
<meta name="format-detection" content="telephone=no" />
|
||||||
|
@ -71,7 +71,7 @@ export const globalConfig = {
|
|||||||
|
|
||||||
debug: {
|
debug: {
|
||||||
/* dev:start */
|
/* dev:start */
|
||||||
fastGameEnter: true,
|
// fastGameEnter: true,
|
||||||
noArtificialDelays: true,
|
noArtificialDelays: true,
|
||||||
// disableSavegameWrite: true,
|
// disableSavegameWrite: true,
|
||||||
// showEntityBounds: true,
|
// showEntityBounds: true,
|
||||||
@ -88,6 +88,7 @@ export const globalConfig = {
|
|||||||
// testClipping: true,
|
// testClipping: true,
|
||||||
// framePausesBetweenTicks: 40,
|
// framePausesBetweenTicks: 40,
|
||||||
// testTranslations: true,
|
// testTranslations: true,
|
||||||
|
// enableEntityInspector: true,
|
||||||
/* dev:end */
|
/* dev:end */
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -436,6 +436,9 @@ export function formatBigNumber(num, divider = ".") {
|
|||||||
if (num < 1000) {
|
if (num < 1000) {
|
||||||
return sign + "" + num;
|
return sign + "" + num;
|
||||||
}
|
}
|
||||||
|
if (num > 10000) {
|
||||||
|
return Math_floor(num / 1000.0) + "k";
|
||||||
|
}
|
||||||
|
|
||||||
let rest = num;
|
let rest = num;
|
||||||
let out = "";
|
let out = "";
|
||||||
@ -455,7 +458,7 @@ export function formatBigNumber(num, divider = ".") {
|
|||||||
* @param {string=} divider THe divider for numbers like 50,000 (divider=',')
|
* @param {string=} divider THe divider for numbers like 50,000 (divider=',')
|
||||||
* @returns {string}
|
* @returns {string}
|
||||||
*/
|
*/
|
||||||
export function formatBigNumberFull(num, divider = ",") {
|
export function formatBigNumberFull(num, divider = T.global.thousandsDivider) {
|
||||||
if (num < 1000) {
|
if (num < 1000) {
|
||||||
return num + "";
|
return num + "";
|
||||||
}
|
}
|
||||||
|
@ -19,6 +19,7 @@ export class UndergroundBeltComponent extends Component {
|
|||||||
return {
|
return {
|
||||||
mode: types.enum(enumUndergroundBeltMode),
|
mode: types.enum(enumUndergroundBeltMode),
|
||||||
pendingItems: types.array(types.pair(types.obj(gItemRegistry), types.float)),
|
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;
|
this.root = root;
|
||||||
|
|
||||||
/**
|
|
||||||
* The metaclass of the entity, should be set by subclasses
|
|
||||||
*/
|
|
||||||
this.meta = null;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The components of the entity
|
* The components of the entity
|
||||||
*/
|
*/
|
||||||
@ -89,15 +84,6 @@ export class Entity extends BasicSerializableObject {
|
|||||||
return !this.destroyed && !this.queuedForDestroy;
|
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
|
* Internal destroy callback
|
||||||
*/
|
*/
|
||||||
|
@ -12,7 +12,7 @@ import { HUDKeybindingOverlay } from "./parts/keybinding_overlay";
|
|||||||
import { HUDUnlockNotification } from "./parts/unlock_notification";
|
import { HUDUnlockNotification } from "./parts/unlock_notification";
|
||||||
import { HUDGameMenu } from "./parts/game_menu";
|
import { HUDGameMenu } from "./parts/game_menu";
|
||||||
import { HUDShop } from "./parts/shop";
|
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 { HUDMassSelector } from "./parts/mass_selector";
|
||||||
import { HUDVignetteOverlay } from "./parts/vignette_overlay";
|
import { HUDVignetteOverlay } from "./parts/vignette_overlay";
|
||||||
import { HUDStatistics } from "./parts/statistics";
|
import { HUDStatistics } from "./parts/statistics";
|
||||||
@ -22,6 +22,7 @@ import { ShapeDefinition } from "../shape_definition";
|
|||||||
import { HUDNotifications, enumNotificationType } from "./parts/notifications";
|
import { HUDNotifications, enumNotificationType } from "./parts/notifications";
|
||||||
import { HUDSettingsMenu } from "./parts/settings_menu";
|
import { HUDSettingsMenu } from "./parts/settings_menu";
|
||||||
import { HUDDebugInfo } from "./parts/debug_info";
|
import { HUDDebugInfo } from "./parts/debug_info";
|
||||||
|
import { HUDEntityDebugger } from "./parts/entity_debugger";
|
||||||
|
|
||||||
export class GameHUD {
|
export class GameHUD {
|
||||||
/**
|
/**
|
||||||
@ -71,6 +72,10 @@ export class GameHUD {
|
|||||||
this.parts.keybindingOverlay = new HUDKeybindingOverlay(this.root);
|
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();
|
const frag = document.createDocumentFragment();
|
||||||
for (const key in this.parts) {
|
for (const key in this.parts) {
|
||||||
this.parts[key].createElements(frag);
|
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 { 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 { DynamicDomAttach } from "../dynamic_dom_attach";
|
||||||
import { InputReceiver } from "../../../core/input_receiver";
|
import { InputReceiver } from "../../../core/input_receiver";
|
||||||
import { KeyActionMapper } from "../../key_action_mapper";
|
import { KeyActionMapper } from "../../key_action_mapper";
|
||||||
import { T } from "../../../translations";
|
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 {
|
export class HUDSettingsMenu extends BaseHUDPart {
|
||||||
createElements(parent) {
|
createElements(parent) {
|
||||||
@ -11,11 +14,16 @@ export class HUDSettingsMenu extends BaseHUDPart {
|
|||||||
|
|
||||||
this.menuElement = makeDiv(this.background, null, ["menuElement"]);
|
this.menuElement = makeDiv(this.background, null, ["menuElement"]);
|
||||||
|
|
||||||
this.timePlayed = makeDiv(
|
this.statsElement = makeDiv(
|
||||||
this.background,
|
this.background,
|
||||||
null,
|
null,
|
||||||
["timePlayed"],
|
["statsElement"],
|
||||||
`<strong>${T.ingame.settingsMenu.playtime}</strong><span class="playtime"></span>`
|
`
|
||||||
|
<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"]);
|
this.buttonContainer = makeDiv(this.menuElement, null, ["buttons"]);
|
||||||
@ -89,10 +97,18 @@ export class HUDSettingsMenu extends BaseHUDPart {
|
|||||||
this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever);
|
this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever);
|
||||||
|
|
||||||
const totalMinutesPlayed = Math.ceil(this.root.time.now() / 60);
|
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>",
|
"<x>",
|
||||||
"" + totalMinutesPlayed
|
"" + 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() {
|
close() {
|
||||||
|
@ -55,7 +55,7 @@ export class PlatformWrapperInterface {
|
|||||||
* @returns {number}
|
* @returns {number}
|
||||||
*/
|
*/
|
||||||
getMinimumZoom() {
|
getMinimumZoom() {
|
||||||
return 0.2 * this.getScreenScale();
|
return 0.1 * this.getScreenScale();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -200,8 +200,8 @@ ingame:
|
|||||||
settingsMenu:
|
settingsMenu:
|
||||||
playtime: Playtime
|
playtime: Playtime
|
||||||
|
|
||||||
playtime1Minute: 1 minutes
|
buildingsPlaced: Buildings
|
||||||
playtimeXMinutes: <x> minutes
|
beltsPlaced: Belts
|
||||||
|
|
||||||
buttons:
|
buttons:
|
||||||
continue: Continue
|
continue: Continue
|
||||||
|
Loading…
Reference in New Issue
Block a user