From e43a22b56d70a5f5201d2d078b3f398c59545439 Mon Sep 17 00:00:00 2001
From: tobspr <tobias.springer1@gmail.com>
Date: Thu, 14 May 2020 12:13:33 +0200
Subject: [PATCH] Show available upgrade count in toolbar

---
 src/css/ingame_hud/game_menu.scss  | 35 ++++++++++++++++++++++++++++++
 src/css/ingame_hud/shop.scss       | 13 +++++++++++
 src/js/game/hub_goals.js           | 14 ++++++++++++
 src/js/game/hud/parts/game_menu.js | 32 +++++++++++++++++++++++++--
 4 files changed, 92 insertions(+), 2 deletions(-)

diff --git a/src/css/ingame_hud/game_menu.scss b/src/css/ingame_hud/game_menu.scss
index 4440394d..2f7f139d 100644
--- a/src/css/ingame_hud/game_menu.scss
+++ b/src/css/ingame_hud/game_menu.scss
@@ -91,5 +91,40 @@
             left: 50%;
             transform: translateX(-50%);
         }
+
+        &:not(.hasBadge) .badge {
+            display: none;
+        }
+
+        &.hasBadge {
+            @include InlineAnimation(1s ease-in-out infinite) {
+                50% {
+                    transform: scale(1.04);
+                }
+            }
+
+            .badge {
+                position: absolute;
+                @include S(bottom, -12px);
+                left: 50%;
+                transform: translateX(-50%);
+
+                background: #333;
+                @include PlainText;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                @include S(min-width, 5px);
+                @include S(height, 10px);
+                @include S(padding, 1px, 3px, 2px);
+                @include S(border-radius, 4px);
+                border: #{D(1px)} solid #fff;
+                @include InlineAnimation(1s ease-in-out infinite) {
+                    50% {
+                        transform: translateX(-50%) scale(1.05);
+                    }
+                }
+            }
+        }
     }
 }
diff --git a/src/css/ingame_hud/shop.scss b/src/css/ingame_hud/shop.scss
index 1740bcf0..74be3d46 100644
--- a/src/css/ingame_hud/shop.scss
+++ b/src/css/ingame_hud/shop.scss
@@ -160,6 +160,19 @@
                     pointer-events: none;
                     opacity: 0.3;
                 }
+
+                &.buyable {
+                    @include InlineAnimation(1s ease-in-out infinite) {
+                        0% {
+                        }
+
+                        50% {
+                            background-color: lighten($colorGreenBright, 10);
+                        }
+                        100% {
+                        }
+                    }
+                }
             }
 
             &.maxLevel {
diff --git a/src/js/game/hub_goals.js b/src/js/game/hub_goals.js
index 537a618a..c6d10b6b 100644
--- a/src/js/game/hub_goals.js
+++ b/src/js/game/hub_goals.js
@@ -196,6 +196,20 @@ export class HubGoals extends BasicSerializableObject {
         return true;
     }
 
+    /**
+     * Returns the number of available upgrades
+     * @returns {number}
+     */
+    getAvailableUpgradeCount() {
+        let count = 0;
+        for (const upgradeId in UPGRADES) {
+            if (this.canUnlockUpgrade(upgradeId)) {
+                ++count;
+            }
+        }
+        return count;
+    }
+
     /**
      * Tries to unlock the given upgrade
      * @param {string} upgradeId
diff --git a/src/js/game/hud/parts/game_menu.js b/src/js/game/hud/parts/game_menu.js
index 3a49d598..06cbd503 100644
--- a/src/js/game/hud/parts/game_menu.js
+++ b/src/js/game/hud/parts/game_menu.js
@@ -1,5 +1,5 @@
 import { BaseHUDPart } from "../base_hud_part";
-import { makeDiv } from "../../../core/utils";
+import { makeDiv, randomInt } from "../../../core/utils";
 
 export class HUDGameMenu extends BaseHUDPart {
     initialize() {}
@@ -12,6 +12,7 @@ export class HUDGameMenu extends BaseHUDPart {
                 label: "Upgrades",
                 handler: () => this.root.hud.parts.shop.show(),
                 keybinding: "menu_open_shop",
+                badge: () => this.root.hubGoals.getAvailableUpgradeCount(),
             },
             {
                 id: "stats",
@@ -21,7 +22,10 @@ export class HUDGameMenu extends BaseHUDPart {
             },
         ];
 
-        buttons.forEach(({ id, label, handler, keybinding }) => {
+        /** @type {Array<{ badge: function, button: HTMLElement, badgeElement: HTMLElement, lastRenderAmount: number }>} */
+        this.badgesToUpdate = [];
+
+        buttons.forEach(({ id, label, handler, keybinding, badge }) => {
             const button = document.createElement("button");
             button.setAttribute("data-button-id", id);
             this.element.appendChild(button);
@@ -32,6 +36,16 @@ export class HUDGameMenu extends BaseHUDPart {
                 binding.add(handler);
                 binding.appendLabelToElement(button);
             }
+
+            if (badge) {
+                const badgeElement = makeDiv(button, null, ["badge"]);
+                this.badgesToUpdate.push({
+                    badge,
+                    lastRenderAmount: 0,
+                    button,
+                    badgeElement,
+                });
+            }
         });
 
         const menuButtons = makeDiv(this.element, null, ["menuButtons"]);
@@ -40,4 +54,18 @@ export class HUDGameMenu extends BaseHUDPart {
         this.sfxButton = makeDiv(menuButtons, null, ["button", "sfx"]);
         this.settingsButton = makeDiv(menuButtons, null, ["button", "settings"]);
     }
+
+    update() {
+        for (let i = 0; i < this.badgesToUpdate.length; ++i) {
+            const { badge, button, badgeElement, lastRenderAmount } = this.badgesToUpdate[i];
+            const amount = badge();
+            if (lastRenderAmount !== amount) {
+                if (amount > 0) {
+                    badgeElement.innerText = amount;
+                }
+                this.badgesToUpdate[i].lastRenderAmount = amount;
+                button.classList.toggle("hasBadge", amount > 0);
+            }
+        }
+    }
 }