Add 'copy key' button to shape viewer

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;

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 { 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"], "+");
-            }
         }
     }