From de94c6ea82fe55cb7e7ba5a671f9bb4fd7e3a45f Mon Sep 17 00:00:00 2001 From: tobspr Date: Wed, 24 Jun 2020 21:03:46 +0200 Subject: [PATCH] Add 'copy key' button to shape viewer --- gulp/package.json | 1 + gulp/yarn.lock | 5 +++ src/css/ingame_hud/shape_viewer.scss | 42 +++++++++++++++++++++---- src/js/changelog.js | 1 + src/js/game/hud/parts/shape_viewer.js | 44 +++++++++++++++++++++------ translations/base-en.yaml | 5 +-- 6 files changed, 80 insertions(+), 18 deletions(-) diff --git a/gulp/package.json b/gulp/package.json index 653db52d..1fd39c40 100644 --- a/gulp/package.json +++ b/gulp/package.json @@ -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", diff --git a/gulp/yarn.lock b/gulp/yarn.lock index 755d1648..a0a8d4f2 100644 --- a/gulp/yarn.lock +++ b/gulp/yarn.lock @@ -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" diff --git a/src/css/ingame_hud/shape_viewer.scss b/src/css/ingame_hud/shape_viewer.scss index 5d2484f0..65491a5a 100644 --- a/src/css/ingame_hud/shape_viewer.scss +++ b/src/css/ingame_hud/shape_viewer.scss @@ -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; diff --git a/src/js/changelog.js b/src/js/changelog.js index 75d38437..3884d397 100644 --- a/src/js/changelog.js +++ b/src/js/changelog.js @@ -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", diff --git a/src/js/game/hud/parts/shape_viewer.js b/src/js/game/hud/parts/shape_viewer.js index fa083793..55feb976 100644 --- a/src/js/game/hud/parts/shape_viewer.js +++ b/src/js/game/hud/parts/shape_viewer.js @@ -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"], "+"); - } } } diff --git a/translations/base-en.yaml b/translations/base-en.yaml index 8581bb2c..39eb3cd3 100644 --- a/translations/base-en.yaml +++ b/translations/base-en.yaml @@ -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.