UI Improvements

src/js/application.js

@@ -28,6 +28,8 @@ import { GoogleAnalyticsImpl } from "./platform/browser/google_analytics";
 import { Loader } from "./core/loader";
 import { GameAnalyticsInterface } from "./platform/game_analytics";
 import { ShapezGameAnalytics } from "./platform/browser/game_analytics";
+import { queryParamOptions } from "./core/query_parameters";
+import { NoGameAnalytics } from "./platform/browser/no_game_analytics";
 
 const logger = createLogger("application");
 
@@ -121,7 +123,12 @@ export class Application {
         this.sound = new SoundImplBrowser(this);
         this.platformWrapper = new PlatformWrapperImplBrowser(this);
         this.analytics = new GoogleAnalyticsImpl(this);
-        this.gameAnalytics = new ShapezGameAnalytics(this);
+
+        if (queryParamOptions.betaMode) {
+            this.gameAnalytics = new NoGameAnalytics(this);
+        } else {
+            this.gameAnalytics = new ShapezGameAnalytics(this);
+        }
     }
 
     /**

src/js/game/hud/hud.js

@@ -14,6 +14,7 @@ import { HUDGameMenu } from "./parts/game_menu";
 import { HUDShop } from "./parts/shop";
 import { IS_MOBILE } from "../../core/config";
 import { HUDMassSelector } from "./parts/mass_selector";
+import { HUDVignetteOverlay } from "./parts/vignette_overlay";
 
 export class GameHUD {
     /**
@@ -45,6 +46,8 @@ export class GameHUD {
 
             shop: new HUDShop(this.root),
 
+            vignetteOverlay: new HUDVignetteOverlay(this.root),
+
             // betaOverlay: new HUDBetaOverlay(this.root),
         };
 

src/js/game/hud/parts/building_placer.js

@@ -57,8 +57,12 @@ export class HUDBuildingPlacer extends BaseHUDPart {
     createElements(parent) {
         this.element = makeDiv(parent, "ingame_HUD_building_placer", [], ``);
 
-        this.buildingLabel = makeDiv(this.element, null, ["buildingLabel"], "Extract");
-        this.buildingDescription = makeDiv(this.element, null, ["description"], "");
+        this.buildingInfoElements = {};
+        this.buildingInfoElements.label = makeDiv(this.element, null, ["buildingLabel"], "Extract");
+        this.buildingInfoElements.desc = makeDiv(this.element, null, ["description"], "");
+        this.buildingInfoElements.descText = makeDiv(this.buildingInfoElements.desc, null, ["text"], "");
+        this.buildingInfoElements.hotkey = makeDiv(this.buildingInfoElements.desc, null, ["hotkey"], "");
+        this.buildingInfoElements.tutorialImage = makeDiv(this.element, null, ["buildingImage"]);
     }
 
     abortPlacement() {
@@ -179,8 +183,14 @@ export class HUDBuildingPlacer extends BaseHUDPart {
     onSelectedMetaBuildingChanged(metaBuilding) {
         this.root.hud.signals.selectedPlacementBuildingChanged.dispatch(metaBuilding);
         if (metaBuilding) {
-            this.buildingLabel.innerHTML = metaBuilding.getName();
-            this.buildingDescription.innerHTML = metaBuilding.getDescription();
+            this.buildingInfoElements.label.innerHTML = metaBuilding.getName();
+            this.buildingInfoElements.descText.innerHTML = metaBuilding.getDescription();
+
+            const binding = this.root.gameState.keyActionMapper.getBinding(
+                "building_" + metaBuilding.getId()
+            );
+
+            this.buildingInfoElements.hotkey.innerHTML = "Hotkey: " + binding.getKeyCodeString();
 
             this.fakeEntity = new Entity(null);
             metaBuilding.setupEntityComponents(this.fakeEntity, null);
@@ -191,6 +201,11 @@ export class HUDBuildingPlacer extends BaseHUDPart {
                     tileSize: metaBuilding.getDimensions().copy(),
                 })
             );
+
+            this.buildingInfoElements.tutorialImage.setAttribute(
+                "data-icon",
+                "building_tutorials/" + metaBuilding.getId() + ".png"
+            );
         } else {
             this.currentlyDragging = false;
             this.fakeEntity = null;

src/js/game/hud/parts/buildings_toolbar.js

@@ -71,23 +71,10 @@ export class HUDBuildingsToolbar extends BaseHUDPart {
             const label = makeDiv(itemContainer, null, ["label"]);
             label.innerText = metaBuilding.getName();
 
-            const tooltip = makeDiv(
-                itemContainer,
-                null,
-                ["tooltip"],
-                `
-                <span class="title">${metaBuilding.getName()}</span>
-                <span class="desc">${metaBuilding.getDescription()}</span>
-                <span class="tutorialImage" data-icon="building_tutorials/${metaBuilding.getId()}.png"></span>
-            `
-            );
-
             const sprite = metaBuilding.getPreviewSprite(0);
 
             const spriteWrapper = makeDiv(itemContainer, null, ["iconWrap"]);
             spriteWrapper.innerHTML = sprite.getAsHTML(iconSize * dimensions.x, iconSize * dimensions.y);
-
-            binding.appendLabelToElement(itemContainer);
             binding.add(() => this.selectBuildingForPlacement(metaBuilding));
 
             this.trackClicks(itemContainer, () => this.selectBuildingForPlacement(metaBuilding), {});

src/js/game/hud/parts/vignette_overlay.js

@@ -0,0 +1,10 @@
+import { BaseHUDPart } from "../base_hud_part";
+import { makeDiv } from "../../../core/utils";
+
+export class HUDVignetteOverlay extends BaseHUDPart {
+    createElements(parent) {
+        this.element = makeDiv(parent, "ingame_VignetteOverlay");
+    }
+
+    initialize() {}
+}

src/js/platform/browser/no_game_analytics.js

@@ -0,0 +1,7 @@
+import { GameAnalyticsInterface } from "../game_analytics";
+
+export class NoGameAnalytics extends GameAnalyticsInterface {
+    initialize() {
+        return Promise.resolve();
+    }
+}