UI Improvements

src/css/common.scss

@@ -563,7 +563,7 @@ canvas {
 .keybinding {
     background: #fff;
     text-transform: uppercase;
-    @include S(padding, 2px, 1px, 2px);
+    @include S(padding, 1.5px, 3px, 2px);
     @include PlainText;
     @include BorderRadius(2px);
     &,
@@ -589,7 +589,7 @@ canvas {
     box-sizing: border-box;
     @include S(height, 12px);
     overflow: hidden;
-    border: #{D(1px)} solid $accentColorDark;
+    border: #{D(0px)} solid $accentColorDark;
 
     .keybinding_space {
         @include S(font-size, 17px);

src/css/ingame_hud/building_placer.scss

@@ -1,30 +1,53 @@
 #ingame_HUD_building_placer {
     position: fixed;
-    @include S(top, 50px);
+    @include S(top, 40px);
     @include S(right, 10px);
 
-    display: flex;
-    flex-direction: column;
+    display: grid;
 
     @include S(padding, 6px);
-    justify-content: center;
-    align-items: flex-start;
-    @include S(border-radius, 4px);
-    background: rgba(#333, 0.9);
-    @include S(width, 200px);
+    @include S(border-radius, 2px);
+    @include S(width, 240px);
+    @include S(grid-column-gap, 5px);
+
+    background: rgba(#333438, 0.8);
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto 1fr;
 
     .buildingLabel {
         @include PlainText;
+        @include S(margin-bottom, 2px);
         color: #fff;
         text-transform: uppercase;
-        @include S(margin-bottom, 2px);
+        grid-column: 1 / 3;
+        grid-row: 1 / 2;
     }
 
-    .instructions,
     .description {
-        color: #fff;
-        opacity: 0.8;
+        color: #bbb;
         @include SuperSmallText;
+        grid-column: 1 / 2;
+        grid-row: 2 / 3;
+        display: grid;
+        grid-template-rows: 1fr auto;
+
+        strong {
+            color: #fff;
+        }
+    }
+
+    .hotkey {
+        color: lighten($colorGreenBright, 10);
+        font-weight: bold;
+    }
+
+    .buildingImage {
+        grid-column: 2 / 3;
+        grid-row: 1 / 3;
+        @include S(width, 100px);
+        @include S(height, 100px);
+        background: top left / 100% 100% no-repeat;
+        @include S(border-radius, 2px);
     }
 
     @include StyleBelowWidth(700px) {

src/css/ingame_hud/buildings_toolbar.scss

@@ -7,14 +7,14 @@
     $toolbarBg: rgba($accentColorBright, 0.9);
     display: flex;
     flex-direction: column;
-    background-color: $toolbarBg;
-    // border: $ingameHudBorder;
+    background-color: rgb(255, 255, 255);
+    background: transparent;
     border-bottom-width: 0;
-
-    @include S(border-radius, 4px, 4px, 0, 0);
-    // box-shadow: 0 0 0 #{D(2px)} rgba(darken($toolbarBg, 20), 0.5);
     transition: transform 0.12s ease-in-out;
 
+    background: uiResource("toolbar_bg.lossless.png") center center / 100% 100% no-repeat;
+    @include S(padding, 20px, 100px, 0);
+
     &:not(.visible) {
         transform: translateX(-50%) translateY(#{D(100px)});
     }
@@ -32,7 +32,7 @@
             align-items: center;
             justify-content: center;
             @include S(padding, 5px);
-            @include S(padding-bottom, 7px);
+            @include S(padding-bottom, 1px);
             $buildingIconSize: 32px;
 
             &:not(.unlocked) {
@@ -59,7 +59,7 @@
             }
 
             &.selected {
-                background: rgb(173, 221, 253) !important;
+                background: rgba(74, 163, 223, 0.3) !important;
                 transform: scale(1.05);
                 .keybinding {
                     color: #111;
@@ -67,7 +67,7 @@
             }
 
             pointer-events: all;
-            transition: all 0.1s ease-in-out;
+            transition: all 0.05s ease-in-out;
             transition-property: background-color, transform;
             &.unlocked:hover {
                 background: rgba($accentColorDark, 0.1);
@@ -89,15 +89,6 @@
                 text-transform: uppercase;
             }
 
-            .keybinding {
-                // position: relative;
-                right: 50%;
-                transform: translateX(50%);
-                background: transparent;
-                border: 0;
-                @include S(bottom, 2pxpx);
-            }
-
             &[data-tilewidth="2"] {
                 .iconWrap {
                     @include S(width, 2 * $buildingIconSize);
@@ -107,80 +98,6 @@
             &:last-child {
                 border: none;
             }
-
-            .tooltip {
-                position: absolute;
-                pointer-events: none;
-                background: #333;
-                @include S(padding, 7px);
-                bottom: calc(100% + #{D(10px)});
-                left: 50%;
-                transform: translateX(-50%);
-                box-sizing: content-box;
-                @include SuperSmallText;
-                @include S(width, 200px);
-                @include S(border-radius, 4px);
-
-                box-shadow: #{D(1px)} #{D(1px)} 0 0 rgba(0, 10, 25, 0.2);
-
-                display: none;
-                z-index: 9999;
-
-                flex-direction: column;
-
-                .title {
-                    color: #fff;
-                    @include PlainText;
-                    text-transform: uppercase;
-                    margin-bottom: 5px;
-                }
-
-                .desc {
-                    color: #aaa;
-                    @include SuperSmallText;
-                    margin-bottom: 10px;
-                    strong {
-                        color: #fff;
-                    }
-                }
-
-                .tutorialImage {
-                    display: inline-block;
-                    @include S(width, 200px);
-                    @include S(height, 200px);
-                    @include S(border-radius, 4px);
-                    background-size: contain;
-                    background-repeat: no-repeat;
-                }
-
-                &::after {
-                    top: 100%;
-                    left: 50%;
-                    border: solid transparent;
-                    content: " ";
-                    height: 0;
-                    width: 0;
-                    position: absolute;
-                    pointer-events: none;
-                    border-top-color: #333;
-                    @include S(border-width, 5px);
-                    transform: translateX(-50%);
-                }
-            }
-
-            &:hover .tooltip {
-                display: flex;
-
-                @include InlineAnimation(0.5s ease-in-out) {
-                    90% {
-                        opacity: 0;
-                    }
-                    0% {
-                        transform: translate(-50%, 5%) scale(0.9);
-                        opacity: 0;
-                    }
-                }
-            }
         }
     }
 }

src/css/ingame_hud/keybindings_overlay.scss

@@ -38,6 +38,7 @@
                 background: #fff uiResource("icons/mouse_left.png") center center / 85% no-repeat;
             }
         }
+
         label {
             color: $accentColorDark;
             @include SuperSmallText;
@@ -49,6 +50,7 @@
     &:not(.placementActive) .binding.placementOnly {
         display: none;
     }
+
     &.placementActive .binding.noPlacementOnly {
         display: none;
     }

src/css/ingame_hud/vignette_overlay.scss

@@ -0,0 +1,9 @@
+#ingame_VignetteOverlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: uiResource("vignette.lossless.png") center center / cover no-repeat;
+    pointer-events: none;
+}

src/css/main.scss

@@ -34,11 +34,12 @@
 @import "ingame_hud/blur_overlay";
 @import "ingame_hud/dialogs";
 @import "ingame_hud/mass_selector";
+@import "ingame_hud/vignette_overlay";
 
 // Z-Index
-$elements: ingame_Canvas, ingame_HUD_building_placer, ingame_HUD_buildings_toolbar, ingame_HUD_GameMenu,
-    ingame_HUD_KeybindingOverlay, ingame_HUD_Shop, ingame_HUD_BetaOverlay, ingame_HUD_MassSelector,
-    ingame_HUD_UnlockNotification;
+$elements: ingame_Canvas, ingame_VignetteOverlay, ingame_HUD_building_placer, ingame_HUD_buildings_toolbar,
+    ingame_HUD_GameMenu, ingame_HUD_KeybindingOverlay, ingame_HUD_Shop, ingame_HUD_BetaOverlay,
+    ingame_HUD_MassSelector, ingame_HUD_UnlockNotification;
 
 $zindex: 100;
 

src/css/states/ingame.scss

@@ -13,4 +13,12 @@
         background: $mainBgColor;
         flex-direction: column;
     }
+
+    #ingame_Canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
 }

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,8 +123,13 @@ export class Application {
         this.sound = new SoundImplBrowser(this);
         this.platformWrapper = new PlatformWrapperImplBrowser(this);
         this.analytics = new GoogleAnalyticsImpl(this);
+
+        if (queryParamOptions.betaMode) {
+            this.gameAnalytics = new NoGameAnalytics(this);
+        } else {
             this.gameAnalytics = new ShapezGameAnalytics(this);
         }
+    }
 
     /**
      * Registers all game states

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();
+    }
+}