From 6c638f853cc2e872abb155a2a22e816d727f1989 Mon Sep 17 00:00:00 2001
From: tobspr <tobias.springer1@gmail.com>
Date: Wed, 13 May 2020 12:57:18 +0200
Subject: [PATCH] UI Improvements

---
 res/ui/toolbar_bg.lossless.png               | Bin 0 -> 3136 bytes
 res/ui/vignette.lossless.png                 | Bin 0 -> 6059 bytes
 src/css/common.scss                          |   4 +-
 src/css/ingame_hud/building_placer.scss      |  47 ++++++---
 src/css/ingame_hud/buildings_toolbar.scss    |  99 ++-----------------
 src/css/ingame_hud/keybindings_overlay.scss  |   2 +
 src/css/ingame_hud/vignette_overlay.scss     |   9 ++
 src/css/main.scss                            |   7 +-
 src/css/states/ingame.scss                   |   8 ++
 src/js/application.js                        |   9 +-
 src/js/game/hud/hud.js                       |   3 +
 src/js/game/hud/parts/building_placer.js     |  23 ++++-
 src/js/game/hud/parts/buildings_toolbar.js   |  13 ---
 src/js/game/hud/parts/vignette_overlay.js    |  10 ++
 src/js/platform/browser/no_game_analytics.js |   7 ++
 15 files changed, 115 insertions(+), 126 deletions(-)
 create mode 100644 res/ui/toolbar_bg.lossless.png
 create mode 100644 res/ui/vignette.lossless.png
 create mode 100644 src/css/ingame_hud/vignette_overlay.scss
 create mode 100644 src/js/game/hud/parts/vignette_overlay.js
 create mode 100644 src/js/platform/browser/no_game_analytics.js

diff --git a/res/ui/toolbar_bg.lossless.png b/res/ui/toolbar_bg.lossless.png
new file mode 100644
index 0000000000000000000000000000000000000000..93967a9192aaa2b0cac7ecfd4aa6d5bc8f300463
GIT binary patch
literal 3136
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

literal 0
HcmV?d00001

diff --git a/res/ui/vignette.lossless.png b/res/ui/vignette.lossless.png
new file mode 100644
index 0000000000000000000000000000000000000000..26f0529627adcba53e99fd74fd90861a079e3cce
GIT binary patch
literal 6059
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
N%}lJY1x9X{{s*G5$M^sM

literal 0
HcmV?d00001

diff --git a/src/css/common.scss b/src/css/common.scss
index 7b8bafd2..c0a305aa 100644
--- a/src/css/common.scss
+++ b/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);
diff --git a/src/css/ingame_hud/building_placer.scss b/src/css/ingame_hud/building_placer.scss
index 68f3d8cd..689ac598 100644
--- a/src/css/ingame_hud/building_placer.scss
+++ b/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) {
diff --git a/src/css/ingame_hud/buildings_toolbar.scss b/src/css/ingame_hud/buildings_toolbar.scss
index 09663939..ff4d7793 100644
--- a/src/css/ingame_hud/buildings_toolbar.scss
+++ b/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;
-                    }
-                }
-            }
         }
     }
 }
diff --git a/src/css/ingame_hud/keybindings_overlay.scss b/src/css/ingame_hud/keybindings_overlay.scss
index c0377e32..aa6248a0 100644
--- a/src/css/ingame_hud/keybindings_overlay.scss
+++ b/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;
     }
diff --git a/src/css/ingame_hud/vignette_overlay.scss b/src/css/ingame_hud/vignette_overlay.scss
new file mode 100644
index 00000000..c973b16e
--- /dev/null
+++ b/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;
+}
diff --git a/src/css/main.scss b/src/css/main.scss
index 43e6db60..4aa0aa31 100644
--- a/src/css/main.scss
+++ b/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;
 
diff --git a/src/css/states/ingame.scss b/src/css/states/ingame.scss
index 04e9383a..e131c1d7 100644
--- a/src/css/states/ingame.scss
+++ b/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;
+    }
 }
diff --git a/src/js/application.js b/src/js/application.js
index 0690ec55..9f1bf55e 100644
--- a/src/js/application.js
+++ b/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);
+        }
     }
 
     /**
diff --git a/src/js/game/hud/hud.js b/src/js/game/hud/hud.js
index 3e4102d4..7533585a 100644
--- a/src/js/game/hud/hud.js
+++ b/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),
         };
 
diff --git a/src/js/game/hud/parts/building_placer.js b/src/js/game/hud/parts/building_placer.js
index ff313b5b..4d2f2268 100644
--- a/src/js/game/hud/parts/building_placer.js
+++ b/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;
diff --git a/src/js/game/hud/parts/buildings_toolbar.js b/src/js/game/hud/parts/buildings_toolbar.js
index ef68886d..564d95e6 100644
--- a/src/js/game/hud/parts/buildings_toolbar.js
+++ b/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), {});
diff --git a/src/js/game/hud/parts/vignette_overlay.js b/src/js/game/hud/parts/vignette_overlay.js
new file mode 100644
index 00000000..dc0e5db7
--- /dev/null
+++ b/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() {}
+}
diff --git a/src/js/platform/browser/no_game_analytics.js b/src/js/platform/browser/no_game_analytics.js
new file mode 100644
index 00000000..805e6fb1
--- /dev/null
+++ b/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();
+    }
+}