Mascali
/
shapez.io
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add 'copy key' button to shape viewer

This commit is contained in:
tobspr 2020-06-24 21:03:46 +02:00
parent 3a846ab3c9
commit de94c6ea82
6 changed files with 80 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
gulp/package.json
View File

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

5
gulp/yarn.lock
View File

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

42
src/css/ingame_hud/shape_viewer.scss
View File

@ -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;

1
src/js/changelog.js
View File

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

44
src/js/game/hud/parts/shape_viewer.js
View File

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

5
translations/base-en.yaml
View File

@ -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.