Added shape generator ingame

src/css/ingame_hud/web_viewer.scss

@@ -0,0 +1,12 @@
+#ingame_HUD_Web {
+    .content {
+        @include S(width, 500px);
+        height: calc(100vh - #{D(40px)});
+        iframe {
+            width: 100%;
+            height: 98%;
+            border: none;
+            overflow: visible;
+        }
+    }
+}

src/css/main.scss

@@ -55,6 +55,7 @@
 @import "ingame_hud/sandbox_controller";
 @import "ingame_hud/standalone_advantages";
 @import "ingame_hud/cat_memes";
+@import "ingame_hud/web_viewer";
 
 // prettier-ignore
 $elements:
@@ -84,6 +85,7 @@ ingame_HUD_WatermarkClicker,
 ingame_HUD_Watermark,
 ingame_HUD_ColorBlindBelowTileHelper,
 ingame_HUD_SandboxController,
+ingame_HUD_Web,
 
 // Overlays
 ingame_HUD_BetaOverlay,

src/js/game/hud/hud.js

@@ -49,6 +49,7 @@ import { HUDStandaloneAdvantages } from "./parts/standalone_advantages";
 import { HUDCatMemes } from "./parts/cat_memes";
 import { HUDTutorialVideoOffer } from "./parts/tutorial_video_offer";
 import { HUDConstantSignalEdit } from "./parts/constant_signal_edit";
+import { HUDWebViewer } from "./parts/web_viewer";
 
 export class GameHUD {
     /**
@@ -88,6 +89,7 @@ export class GameHUD {
             wireInfo: new HUDWireInfo(this.root),
             leverToggle: new HUDLeverToggle(this.root),
             constantSignalEdit: new HUDConstantSignalEdit(this.root),
+            webViewer: new HUDWebViewer(this.root),
 
             // Must always exist
             pinnedShapes: new HUDPinnedShapes(this.root),

src/js/game/hud/parts/web_viewer.js

@@ -0,0 +1,74 @@
+import { InputReceiver } from "../../../core/input_receiver";
+import { makeDiv } from "../../../core/utils";
+import { KeyActionMapper, KEYMAPPINGS } from "../../key_action_mapper";
+import { BaseHUDPart } from "../base_hud_part";
+import { DynamicDomAttach } from "../dynamic_dom_attach";
+
+export class HUDWebViewer extends BaseHUDPart {
+    createElements(parent) {
+        this.background = makeDiv(parent, "ingame_HUD_Web", ["ingameDialog"]);
+
+        // DIALOG Inner / Wrapper
+        this.dialogInner = makeDiv(this.background, null, ["dialogInner"]);
+        this.title = makeDiv(this.dialogInner, null, ["title"], "Empty Web");
+        this.closeButton = makeDiv(this.title, null, ["closeButton"]);
+        this.trackClicks(this.closeButton, this.close);
+
+        this.contentDiv = makeDiv(this.dialogInner, null, ["content"]);
+    }
+
+    initialize() {
+        this.domAttach = new DynamicDomAttach(this.root, this.background, {
+            attachClass: "visible",
+        });
+
+        this.inputReciever = new InputReceiver("web_viewer");
+        this.keyActionMapper = new KeyActionMapper(this.root, this.inputReciever);
+
+        this.keyActionMapper.getBinding(KEYMAPPINGS.general.back).add(this.close, this);
+        this.keyActionMapper.getBinding(KEYMAPPINGS.ingame.menuClose).add(this.close, this);
+
+        this.root.keyMapper.getBinding(KEYMAPPINGS.ingame.shapeViewer).add(this.openViewer, this);
+
+        this.close();
+    }
+
+    show(url, title = null) {
+        this.visible = true;
+        this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever);
+        this.url = url;
+
+        let ifrm = document.createElement("iframe");
+        ifrm.setAttribute("id", "ingame_HUD_web_iframe");
+        ifrm.setAttribute("src", this.url);
+        if (!title) {
+            let urlTag = document.createElement("a");
+            urlTag.href = this.url;
+            title = urlTag.hostname;
+        }
+        this.title.innerText = title;
+        this.closeButton = makeDiv(this.title, null, ["closeButton"]);
+        this.trackClicks(this.closeButton, this.close);
+
+        this.contentDiv.innerHTML = "";
+        this.contentDiv.appendChild(ifrm);
+    }
+
+    openViewer() {
+        this.show("https://viewer.shapez.io/", "Shapes Generator");
+    }
+
+    close() {
+        this.visible = false;
+        this.root.app.inputMgr.makeSureDetached(this.inputReciever);
+        this.update();
+    }
+
+    update() {
+        this.domAttach.update(this.visible);
+    }
+
+    isBlockingOverlay() {
+        return this.visible;
+    }
+}

src/js/game/key_action_mapper.js

@@ -32,6 +32,8 @@ export const KEYMAPPINGS = {
         toggleFPSInfo: { keyCode: 115 }, // F4
 
         switchLayers: { keyCode: key("E") },
+
+        shapeViewer: { keyCode: 119 }, // F8
     },
 
     navigation: {

translations/base-en.yaml

@@ -1102,6 +1102,7 @@ keybindings:
         toggleFPSInfo: Toggle FPS and Debug Info
         switchLayers: Switch layers
         exportScreenshot: Export whole Base as Image
+        shapeViewer: Open shape viewer ingame
 
         # --- Do not translate the values in this section
         belt: *belt