Mascali
/
shapez
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Reverse order of shapes in shape info

This commit is contained in:
tobspr 2020-08-28 22:48:47 +02:00
parent a498ee2704
commit 7cbe5bb8e7
1 changed files with 133 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

266
src/js/game/hud/parts/shape_viewer.js
View File

@ -1,133 +1,133 @@
import { InputReceiver } from "../../../core/input_receiver"; import { InputReceiver } from "../../../core/input_receiver";
import { makeDiv, removeAllChildren } from "../../../core/utils"; import { makeDiv, removeAllChildren } from "../../../core/utils";
import { T } from "../../../translations"; import { T } from "../../../translations";
import { KeyActionMapper, KEYMAPPINGS } from "../../key_action_mapper"; import { KeyActionMapper, KEYMAPPINGS } from "../../key_action_mapper";
import { ShapeDefinition } from "../../shape_definition"; import { ShapeDefinition } from "../../shape_definition";
import { BaseHUDPart } from "../base_hud_part"; import { BaseHUDPart } from "../base_hud_part";
import { DynamicDomAttach } from "../dynamic_dom_attach"; import { DynamicDomAttach } from "../dynamic_dom_attach";
const copy = require("clipboard-copy"); const copy = require("clipboard-copy");
export class HUDShapeViewer extends BaseHUDPart { export class HUDShapeViewer extends BaseHUDPart {
createElements(parent) { createElements(parent) {
this.background = makeDiv(parent, "ingame_HUD_ShapeViewer", ["ingameDialog"]); this.background = makeDiv(parent, "ingame_HUD_ShapeViewer", ["ingameDialog"]);
// DIALOG Inner / Wrapper // DIALOG Inner / Wrapper
this.dialogInner = makeDiv(this.background, null, ["dialogInner"]); this.dialogInner = makeDiv(this.background, null, ["dialogInner"]);
this.title = makeDiv(this.dialogInner, null, ["title"], T.ingame.shapeViewer.title); this.title = makeDiv(this.dialogInner, null, ["title"], T.ingame.shapeViewer.title);
this.closeButton = makeDiv(this.title, null, ["closeButton"]); this.closeButton = makeDiv(this.title, null, ["closeButton"]);
this.trackClicks(this.closeButton, this.close); this.trackClicks(this.closeButton, this.close);
this.contentDiv = makeDiv(this.dialogInner, null, ["content"]); this.contentDiv = makeDiv(this.dialogInner, null, ["content"]);
this.renderArea = makeDiv(this.contentDiv, null, ["renderArea"]); this.renderArea = makeDiv(this.contentDiv, null, ["renderArea"]);
this.infoArea = makeDiv(this.contentDiv, null, ["infoArea"]); this.infoArea = makeDiv(this.contentDiv, null, ["infoArea"]);
// Create button to copy the shape area // Create button to copy the shape area
this.copyButton = document.createElement("button"); this.copyButton = document.createElement("button");
this.copyButton.classList.add("styledButton", "copyKey"); this.copyButton.classList.add("styledButton", "copyKey");
this.copyButton.innerText = T.ingame.shapeViewer.copyKey; this.copyButton.innerText = T.ingame.shapeViewer.copyKey;
this.infoArea.appendChild(this.copyButton); this.infoArea.appendChild(this.copyButton);
} }
initialize() { initialize() {
this.root.hud.signals.viewShapeDetailsRequested.add(this.renderForShape, this); this.root.hud.signals.viewShapeDetailsRequested.add(this.renderForShape, this);
this.domAttach = new DynamicDomAttach(this.root, this.background, { this.domAttach = new DynamicDomAttach(this.root, this.background, {
attachClass: "visible", attachClass: "visible",
}); });
this.currentShapeKey = null; this.currentShapeKey = null;
this.inputReciever = new InputReceiver("shape_viewer"); this.inputReciever = new InputReceiver("shape_viewer");
this.keyActionMapper = new KeyActionMapper(this.root, this.inputReciever); this.keyActionMapper = new KeyActionMapper(this.root, this.inputReciever);
this.keyActionMapper.getBinding(KEYMAPPINGS.general.back).add(this.close, this); this.keyActionMapper.getBinding(KEYMAPPINGS.general.back).add(this.close, this);
this.trackClicks(this.copyButton, this.onCopyKeyRequested); this.trackClicks(this.copyButton, this.onCopyKeyRequested);
this.close(); this.close();
} }
/** /**
* Called when the copying of a key was requested * Called when the copying of a key was requested
*/ */
onCopyKeyRequested() { onCopyKeyRequested() {
if (this.currentShapeKey) { if (this.currentShapeKey) {
copy(this.currentShapeKey); copy(this.currentShapeKey);
this.close(); this.close();
} }
} }
/** /**
* Closes the dialog * Closes the dialog
*/ */
close() { close() {
this.visible = false; this.visible = false;
document.body.classList.remove("ingameDialogOpen"); document.body.classList.remove("ingameDialogOpen");
this.root.app.inputMgr.makeSureDetached(this.inputReciever); this.root.app.inputMgr.makeSureDetached(this.inputReciever);
this.update(); this.update();
} }
/** /**
* Shows the viewer for a given definition * Shows the viewer for a given definition
* @param {ShapeDefinition} definition * @param {ShapeDefinition} definition
*/ */
renderForShape(definition) { renderForShape(definition) {
this.visible = true; this.visible = true;
document.body.classList.add("ingameDialogOpen"); document.body.classList.add("ingameDialogOpen");
this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever); this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever);
removeAllChildren(this.renderArea); removeAllChildren(this.renderArea);
this.currentShapeKey = definition.getHash(); this.currentShapeKey = definition.getHash();
const layers = definition.layers; const layers = definition.layers;
this.contentDiv.setAttribute("data-layers", layers.length); this.contentDiv.setAttribute("data-layers", layers.length);
for (let i = 0; i < layers.length; ++i) { for (let i = layers.length - 1; i >= 0; --i) {
const layerElem = makeDiv(this.renderArea, null, ["layer", "layer-" + i]); const layerElem = makeDiv(this.renderArea, null, ["layer", "layer-" + i]);
let fakeLayers = []; let fakeLayers = [];
for (let k = 0; k < i; ++k) { for (let k = 0; k < i; ++k) {
fakeLayers.push([null, null, null, null]); fakeLayers.push([null, null, null, null]);
} }
fakeLayers.push(layers[i]); fakeLayers.push(layers[i]);
const thisLayerOnly = new ShapeDefinition({ layers: fakeLayers }); const thisLayerOnly = new ShapeDefinition({ layers: fakeLayers });
const thisLayerCanvas = thisLayerOnly.generateAsCanvas(160); const thisLayerCanvas = thisLayerOnly.generateAsCanvas(160);
layerElem.appendChild(thisLayerCanvas); layerElem.appendChild(thisLayerCanvas);
for (let quad = 0; quad < 4; ++quad) { for (let quad = 0; quad < 4; ++quad) {
const quadElem = makeDiv(layerElem, null, ["quad", "quad-" + quad]); const quadElem = makeDiv(layerElem, null, ["quad", "quad-" + quad]);
const contents = layers[i][quad]; const contents = layers[i][quad];
if (contents) { if (contents) {
const colorLabelElem = makeDiv( const colorLabelElem = makeDiv(
quadElem, quadElem,
null, null,
["colorLabel"], ["colorLabel"],
T.ingame.colors[contents.color] T.ingame.colors[contents.color]
); );
} else { } else {
const emptyLabelElem = makeDiv( const emptyLabelElem = makeDiv(
quadElem, quadElem,
null, null,
["emptyLabel"], ["emptyLabel"],
T.ingame.shapeViewer.empty T.ingame.shapeViewer.empty
); );
} }
} }
} }
} }
/** /**
* Cleans up everything * Cleans up everything
*/ */
cleanup() { cleanup() {
document.body.classList.remove("ingameDialogOpen"); document.body.classList.remove("ingameDialogOpen");
} }
update() { update() {
this.domAttach.update(this.visible); this.domAttach.update(this.visible);
} }
} }