From 7cbe5bb8e7585e87561cdd59cd140edc1b7ef416 Mon Sep 17 00:00:00 2001 From: tobspr Date: Fri, 28 Aug 2020 22:48:47 +0200 Subject: [PATCH] Reverse order of shapes in shape info --- src/js/game/hud/parts/shape_viewer.js | 266 +++++++++++++------------- 1 file changed, 133 insertions(+), 133 deletions(-) diff --git a/src/js/game/hud/parts/shape_viewer.js b/src/js/game/hud/parts/shape_viewer.js index 55feb976..ea4273aa 100644 --- a/src/js/game/hud/parts/shape_viewer.js +++ b/src/js/game/hud/parts/shape_viewer.js @@ -1,133 +1,133 @@ -import { InputReceiver } from "../../../core/input_receiver"; -import { makeDiv, removeAllChildren } from "../../../core/utils"; -import { T } from "../../../translations"; -import { KeyActionMapper, KEYMAPPINGS } from "../../key_action_mapper"; -import { ShapeDefinition } from "../../shape_definition"; -import { BaseHUDPart } from "../base_hud_part"; -import { DynamicDomAttach } from "../dynamic_dom_attach"; - -const copy = require("clipboard-copy"); - -export class HUDShapeViewer extends BaseHUDPart { - createElements(parent) { - this.background = makeDiv(parent, "ingame_HUD_ShapeViewer", ["ingameDialog"]); - - // DIALOG Inner / Wrapper - this.dialogInner = makeDiv(this.background, null, ["dialogInner"]); - this.title = makeDiv(this.dialogInner, null, ["title"], T.ingame.shapeViewer.title); - this.closeButton = makeDiv(this.title, null, ["closeButton"]); - this.trackClicks(this.closeButton, this.close); - this.contentDiv = makeDiv(this.dialogInner, null, ["content"]); - - this.renderArea = makeDiv(this.contentDiv, null, ["renderArea"]); - this.infoArea = makeDiv(this.contentDiv, null, ["infoArea"]); - - // Create button to copy the shape area - this.copyButton = document.createElement("button"); - this.copyButton.classList.add("styledButton", "copyKey"); - this.copyButton.innerText = T.ingame.shapeViewer.copyKey; - this.infoArea.appendChild(this.copyButton); - } - - initialize() { - this.root.hud.signals.viewShapeDetailsRequested.add(this.renderForShape, this); - - this.domAttach = new DynamicDomAttach(this.root, this.background, { - attachClass: "visible", - }); - - this.currentShapeKey = null; - - this.inputReciever = new InputReceiver("shape_viewer"); - this.keyActionMapper = new KeyActionMapper(this.root, this.inputReciever); - - this.keyActionMapper.getBinding(KEYMAPPINGS.general.back).add(this.close, this); - - this.trackClicks(this.copyButton, this.onCopyKeyRequested); - - this.close(); - } - - /** - * Called when the copying of a key was requested - */ - onCopyKeyRequested() { - if (this.currentShapeKey) { - copy(this.currentShapeKey); - this.close(); - } - } - - /** - * Closes the dialog - */ - close() { - this.visible = false; - document.body.classList.remove("ingameDialogOpen"); - this.root.app.inputMgr.makeSureDetached(this.inputReciever); - this.update(); - } - - /** - * Shows the viewer for a given definition - * @param {ShapeDefinition} definition - */ - renderForShape(definition) { - this.visible = true; - document.body.classList.add("ingameDialogOpen"); - this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever); - - removeAllChildren(this.renderArea); - - this.currentShapeKey = definition.getHash(); - - const layers = definition.layers; - this.contentDiv.setAttribute("data-layers", layers.length); - - for (let i = 0; i < layers.length; ++i) { - const layerElem = makeDiv(this.renderArea, null, ["layer", "layer-" + i]); - - let fakeLayers = []; - for (let k = 0; k < i; ++k) { - fakeLayers.push([null, null, null, null]); - } - fakeLayers.push(layers[i]); - - const thisLayerOnly = new ShapeDefinition({ layers: fakeLayers }); - const thisLayerCanvas = thisLayerOnly.generateAsCanvas(160); - layerElem.appendChild(thisLayerCanvas); - - for (let quad = 0; quad < 4; ++quad) { - const quadElem = makeDiv(layerElem, null, ["quad", "quad-" + quad]); - - const contents = layers[i][quad]; - if (contents) { - const colorLabelElem = makeDiv( - quadElem, - null, - ["colorLabel"], - T.ingame.colors[contents.color] - ); - } else { - const emptyLabelElem = makeDiv( - quadElem, - null, - ["emptyLabel"], - T.ingame.shapeViewer.empty - ); - } - } - } - } - - /** - * Cleans up everything - */ - cleanup() { - document.body.classList.remove("ingameDialogOpen"); - } - - update() { - this.domAttach.update(this.visible); - } -} +import { InputReceiver } from "../../../core/input_receiver"; +import { makeDiv, removeAllChildren } from "../../../core/utils"; +import { T } from "../../../translations"; +import { KeyActionMapper, KEYMAPPINGS } from "../../key_action_mapper"; +import { ShapeDefinition } from "../../shape_definition"; +import { BaseHUDPart } from "../base_hud_part"; +import { DynamicDomAttach } from "../dynamic_dom_attach"; + +const copy = require("clipboard-copy"); + +export class HUDShapeViewer extends BaseHUDPart { + createElements(parent) { + this.background = makeDiv(parent, "ingame_HUD_ShapeViewer", ["ingameDialog"]); + + // DIALOG Inner / Wrapper + this.dialogInner = makeDiv(this.background, null, ["dialogInner"]); + this.title = makeDiv(this.dialogInner, null, ["title"], T.ingame.shapeViewer.title); + this.closeButton = makeDiv(this.title, null, ["closeButton"]); + this.trackClicks(this.closeButton, this.close); + this.contentDiv = makeDiv(this.dialogInner, null, ["content"]); + + this.renderArea = makeDiv(this.contentDiv, null, ["renderArea"]); + this.infoArea = makeDiv(this.contentDiv, null, ["infoArea"]); + + // Create button to copy the shape area + this.copyButton = document.createElement("button"); + this.copyButton.classList.add("styledButton", "copyKey"); + this.copyButton.innerText = T.ingame.shapeViewer.copyKey; + this.infoArea.appendChild(this.copyButton); + } + + initialize() { + this.root.hud.signals.viewShapeDetailsRequested.add(this.renderForShape, this); + + this.domAttach = new DynamicDomAttach(this.root, this.background, { + attachClass: "visible", + }); + + this.currentShapeKey = null; + + this.inputReciever = new InputReceiver("shape_viewer"); + this.keyActionMapper = new KeyActionMapper(this.root, this.inputReciever); + + this.keyActionMapper.getBinding(KEYMAPPINGS.general.back).add(this.close, this); + + this.trackClicks(this.copyButton, this.onCopyKeyRequested); + + this.close(); + } + + /** + * Called when the copying of a key was requested + */ + onCopyKeyRequested() { + if (this.currentShapeKey) { + copy(this.currentShapeKey); + this.close(); + } + } + + /** + * Closes the dialog + */ + close() { + this.visible = false; + document.body.classList.remove("ingameDialogOpen"); + this.root.app.inputMgr.makeSureDetached(this.inputReciever); + this.update(); + } + + /** + * Shows the viewer for a given definition + * @param {ShapeDefinition} definition + */ + renderForShape(definition) { + this.visible = true; + document.body.classList.add("ingameDialogOpen"); + this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever); + + removeAllChildren(this.renderArea); + + this.currentShapeKey = definition.getHash(); + + const layers = definition.layers; + this.contentDiv.setAttribute("data-layers", layers.length); + + for (let i = layers.length - 1; i >= 0; --i) { + const layerElem = makeDiv(this.renderArea, null, ["layer", "layer-" + i]); + + let fakeLayers = []; + for (let k = 0; k < i; ++k) { + fakeLayers.push([null, null, null, null]); + } + fakeLayers.push(layers[i]); + + const thisLayerOnly = new ShapeDefinition({ layers: fakeLayers }); + const thisLayerCanvas = thisLayerOnly.generateAsCanvas(160); + layerElem.appendChild(thisLayerCanvas); + + for (let quad = 0; quad < 4; ++quad) { + const quadElem = makeDiv(layerElem, null, ["quad", "quad-" + quad]); + + const contents = layers[i][quad]; + if (contents) { + const colorLabelElem = makeDiv( + quadElem, + null, + ["colorLabel"], + T.ingame.colors[contents.color] + ); + } else { + const emptyLabelElem = makeDiv( + quadElem, + null, + ["emptyLabel"], + T.ingame.shapeViewer.empty + ); + } + } + } + } + + /** + * Cleans up everything + */ + cleanup() { + document.body.classList.remove("ingameDialogOpen"); + } + + update() { + this.domAttach.update(this.visible); + } +}