Add 'copy key' button to shape viewer

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",

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"

src/css/ingame_hud/shape_viewer.scss

@@ -1,13 +1,43 @@
 #ingame_HUD_ShapeViewer {
-    .dialogInner {
+    $dims: 170px;
-        @include S(width, 160px);
+
-    }
     .content {
         display: flex;
-        flex-direction: column;
+        @include S(width, $dims);
         width: 100%;
-        align-items: center;
+        flex-direction: column;
-        justify-items: center;
+        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;

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",

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 { BaseHUDPart } from "../base_hud_part";
-import { InputReceiver } from "../../../core/input_receiver";
 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"], "+");
-            }
         }
     }
 

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.