Shape tooltip adjustments

src/js/changelog.js

@@ -1,9 +1,9 @@
 export const CHANGELOG = [
-    // Not finished yet
     {
         version: "1.4.3",
         date: "preview",
         entries: [
+            "You can now hold 'ALT' while hovering a building to see its output! (Thanks to Sense101)",
             "Edit signal dialog now has the previous signal filled (Thanks to EmeraldBlock)",
             "Further performance improvements (Thanks to PFedak)",
             "Improved puzzle validation (Thanks to Sense101)",

src/js/game/hud/hud.js

@@ -16,6 +16,7 @@ import { HUDEntityDebugger } from "./parts/entity_debugger";
 import { HUDModalDialogs } from "./parts/modal_dialogs";
 import { enumNotificationType } from "./parts/notifications";
 import { HUDSettingsMenu } from "./parts/settings_menu";
+import { HUDShapeTooltip } from "./parts/shape_tooltip";
 import { HUDVignetteOverlay } from "./parts/vignette_overlay";
 import { TrailerMaker } from "./trailer_maker";
 
@@ -49,6 +50,8 @@ export class GameHUD {
             blueprintPlacer: new HUDBlueprintPlacer(this.root),
             buildingPlacer: new HUDBuildingPlacer(this.root),
 
+            shapeTooltip: new HUDShapeTooltip(this.root),
+
             // Must always exist
             settingsMenu: new HUDSettingsMenu(this.root),
             debugInfo: new HUDDebugInfo(this.root),

src/js/game/hud/parts/shape_tooltip.js

@@ -1,7 +1,8 @@
 import { DrawParameters } from "../../../core/draw_parameters";
-import { Vector } from "../../../core/vector";
+import { enumDirectionToVector, Vector } from "../../../core/vector";
 import { Entity } from "../../entity";
 import { KEYMAPPINGS } from "../../key_action_mapper";
+import { THEME } from "../../theme";
 import { BaseHUDPart } from "../base_hud_part";
 
 export class HUDShapeTooltip extends BaseHUDPart {
@@ -68,6 +69,8 @@ export class HUDShapeTooltip extends BaseHUDPart {
             const ejectorComp = this.currentEntity.components.ItemEjector;
             const staticComp = this.currentEntity.components.StaticMapEntity;
 
+            const context = parameters.context;
+
             for (let i = 0; i < ejectorComp.slots.length; ++i) {
                 const slot = ejectorComp.slots[i];
 
@@ -75,15 +78,34 @@ export class HUDShapeTooltip extends BaseHUDPart {
                     continue;
                 }
 
-                /** @type {Vector} */
-                let drawPos = null;
-                if (ejectorComp.slots.length == 1) {
-                    drawPos = staticComp.getTileSpaceBounds().getCenter().toWorldSpace();
-                } else {
-                    drawPos = staticComp.localTileToWorld(slot.pos).toWorldSpaceCenterOfTile();
-                }
+                const drawPos = staticComp
+                    .localTileToWorld(slot.pos.add(enumDirectionToVector[slot.direction].multiplyScalar(1)))
+                    .toWorldSpaceCenterOfTile();
+
+                const slotCenterPos = staticComp
+                    .localTileToWorld(slot.pos.add(enumDirectionToVector[slot.direction].multiplyScalar(0.2)))
+                    .toWorldSpaceCenterOfTile();
+
+                context.fillStyle = THEME.shapeTooltip.outline;
+                context.strokeStyle = THEME.shapeTooltip.outline;
+
+                context.lineWidth = 1.5;
+                context.beginPath();
+                context.moveTo(slotCenterPos.x, slotCenterPos.y);
+                context.lineTo(drawPos.x, drawPos.y);
+                context.stroke();
+
+                context.beginCircle(slotCenterPos.x, slotCenterPos.y, 3.5);
+                context.fill();
+
+                context.fillStyle = THEME.shapeTooltip.background;
+                context.strokeStyle = THEME.shapeTooltip.outline;
 
-                slot.lastItem.drawItemCenteredClipped(drawPos.x, drawPos.y, parameters, 25);
+                context.lineWidth = 1.2;
+                context.beginCircle(drawPos.x, drawPos.y, 11 + 1.2 / 2);
+                context.fill();
+                context.stroke();
+                slot.lastItem.drawItemCenteredClipped(drawPos.x, drawPos.y, parameters, 22);
             }
         }
     }

src/js/game/modes/puzzle.js

@@ -8,7 +8,6 @@ import { enumGameModeTypes, GameMode } from "../game_mode";
 import { HUDPuzzleBackToMenu } from "../hud/parts/puzzle_back_to_menu";
 import { HUDPuzzleDLCLogo } from "../hud/parts/puzzle_dlc_logo";
 import { HUDMassSelector } from "../hud/parts/mass_selector";
-import { HUDShapeTooltip } from "../hud/parts/shape_tooltip";
 
 export class PuzzleGameMode extends GameMode {
     static getType() {
@@ -33,7 +32,6 @@ export class PuzzleGameMode extends GameMode {
             puzzleBackToMenu: HUDPuzzleBackToMenu,
             puzzleDlcLogo: HUDPuzzleDLCLogo,
             massSelector: HUDMassSelector,
-            shapeTooltip: HUDShapeTooltip,
         };
 
         this.zoneWidth = data.zoneWidth || 8;

src/js/game/themes/dark.json

@@ -59,5 +59,10 @@
         "outline": "#111418",
         "outlineWidth": 0.75,
         "circleBackground": "rgba(20, 30, 40, 0.3)"
+    },
+
+    "shapeTooltip": {
+        "background": "rgba(242, 245, 254, 0.9)",
+        "outline": "#44464e"
     }
 }

src/js/game/themes/light.json

@@ -60,5 +60,10 @@
         "outline": "#55575a",
         "outlineWidth": 0.75,
         "circleBackground": "rgba(40, 50, 65, 0.1)"
+    },
+
+    "shapeTooltip": {
+        "background": "#dee1ea",
+        "outline": "#54565e"
     }
 }

src/js/states/main_menu.js

@@ -39,7 +39,7 @@ export class MainMenuState extends GameState {
         const showExitAppButton = G_IS_STANDALONE;
         const showUpdateLabel = !G_WEGAME_VERSION;
         const showBrowserWarning = !G_IS_STANDALONE && !isSupportedBrowser();
-        const showPuzzleDLC = !G_WEGAME_VERSION && G_IS_STANDALONE;
+        const showPuzzleDLC = !G_WEGAME_VERSION && (G_IS_STANDALONE || G_IS_DEV);
         const showWegameFooter = G_WEGAME_VERSION;
 
         let showExternalLinks = true;
@@ -65,8 +65,9 @@ export class MainMenuState extends GameState {
             showExternalLinks && this.app.restrictionMgr.getIsStandaloneMarketingActive();
 
         const ownsPuzzleDLC =
-            G_IS_STANDALONE &&
-            /** @type { PlatformWrapperImplElectron}*/ (this.app.platformWrapper).dlcs.puzzle;
+            G_IS_DEV ||
+            (G_IS_STANDALONE &&
+                /** @type { PlatformWrapperImplElectron}*/ (this.app.platformWrapper).dlcs.puzzle);
 
         const bannerHtml = `
             <h3>${T.demoBanners.title}</h3>