Add 'copy key' button to shape viewer

pull/301/head
tobspr 4 years ago
parent 3a846ab3c9
commit de94c6ea82

@ -23,6 +23,7 @@
"browser-sync": "^2.24.6",
"circular-dependency-plugin": "^5.0.2",
"circular-json": "^0.5.9",
"clipboard-copy": "^3.1.0",
"colors": "^1.3.3",
"core-js": "3",
"crypto": "^1.0.1",

@ -2923,6 +2923,11 @@ cli-width@^2.0.0:
resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=
clipboard-copy@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/clipboard-copy/-/clipboard-copy-3.1.0.tgz#4c59030a43d4988990564a664baeafba99f78ca4"
integrity sha512-Xsu1NddBXB89IUauda5BIq3Zq73UWkjkaQlPQbLNvNsd5WBMnTWPNKYR6HGaySOxGYZ+BKxP2E9X4ElnI3yiPA==
cliui@^3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"

@ -1,13 +1,43 @@
#ingame_HUD_ShapeViewer {
.dialogInner {
@include S(width, 160px);
}
$dims: 170px;
.content {
display: flex;
flex-direction: column;
@include S(width, $dims);
width: 100%;
align-items: center;
justify-items: center;
flex-direction: column;
overflow-x: hidden;
&[data-layers="3"],
&[data-layers="4"] {
@include S(width, 2 * $dims);
.renderArea {
display: grid;
grid-template-columns: 1fr 1fr;
@include S(grid-row-gap, 15px);
}
}
.renderArea {
display: grid;
width: 100%;
@include S(grid-row-gap, 10px);
align-items: center;
justify-items: center;
}
.infoArea {
align-self: flex-end;
@include S(margin-top, 10px);
display: flex;
flex-direction: column;
overflow: hidden;
button {
@include S(margin, 0);
@include PlainText;
}
}
.seperator {
display: flex;

@ -6,6 +6,7 @@ export const CHANGELOG = [
"Preparations for the wires update",
"Update belt placement performance on huge factories (by Phlosioneer)",
"Allow clicking on variants to select them",
"Add 'copy key' button to shape viewer",
"Add setting (on by default) to store the last used rotation per building instead of globally storing it (by Magos)",
"Added chinese (traditional) translation",
"Updated translations",

@ -1,12 +1,13 @@
import { BaseHUDPart } from "../base_hud_part";
import { InputReceiver } from "../../../core/input_receiver";
import { makeDiv, removeAllChildren } from "../../../core/utils";
import { T } from "../../../translations";
import { defaultBuildingVariant } from "../../meta_building";
import { KeyActionMapper, KEYMAPPINGS } from "../../key_action_mapper";
import { ShapeDefinition } from "../../shape_definition";
import { KEYMAPPINGS, KeyActionMapper } from "../../key_action_mapper";
import { InputReceiver } from "../../../core/input_receiver";
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"]);
@ -17,6 +18,15 @@ export class HUDShapeViewer extends BaseHUDPart {
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() {
@ -26,14 +36,28 @@ export class HUDShapeViewer extends BaseHUDPart {
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
*/
@ -53,11 +77,15 @@ export class HUDShapeViewer extends BaseHUDPart {
document.body.classList.add("ingameDialogOpen");
this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever);
removeAllChildren(this.contentDiv);
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.contentDiv, null, ["layer", "layer-" + i]);
const layerElem = makeDiv(this.renderArea, null, ["layer", "layer-" + i]);
let fakeLayers = [];
for (let k = 0; k < i; ++k) {
@ -89,10 +117,6 @@ export class HUDShapeViewer extends BaseHUDPart {
);
}
}
if (i < layers.length - 1) {
makeDiv(this.contentDiv, null, ["seperator"], "+");
}
}
}

@ -400,6 +400,7 @@ ingame:
shapeViewer:
title: Layers
empty: Empty
copyKey: Copy Key
# Interactive tutorial
interactiveTutorial:
@ -721,8 +722,8 @@ settings:
title: Vignette
description: >-
Enables the vignette which darkens the screen corners and makes text easier to read.
rotationByBuilding:
rotationByBuilding:
title: Rotation by building type
description: >-
Each building type remembers the rotation you last set it to individually. This may be more comfortable if you frequently switch between placing different building types.

Loading…
Cancel
Save