Added hidden achievements

src/css/ingame_hud/achievements.scss

@@ -16,6 +16,10 @@
             @include S(height, 85px);
             grid-template-rows: #{D(20px)} auto;
 
+            &.hidden {
+                display: none;
+            }
+
             &:last-child {
                 margin-bottom: 0;
             }

src/css/resources.scss

@@ -66,8 +66,8 @@ $icons: notification_saved, notification_success, notification_upgrade;
     }
 }
 
-$achievements: belt500Tiles, blueprint100k, blueprint1m, completeLvl26, cutShape, darkMode, destroy1000,
+$achievements: hidden, belt500Tiles, blueprint100k, blueprint1m, completeLvl26, cutShape, darkMode,
-    irrelevantShape, level100, level50, logoBefore18, mam, mapMarkers15, noBeltUpgradesUntilBp,
+    destroy1000, irrelevantShape, level100, level50, logoBefore18, mam, mapMarkers15, noBeltUpgradesUntilBp,
     noInverseRotater, oldLevel17, openWires, paintShape, place5000Wires, placeBlueprint, placeBp1000, play1h,
     play10h, play20h, produceLogo, produceMsLogo, produceRocket, rotateShape, speedrunBp30, speedrunBp60,
     speedrunBp120, stack4Layers, stackShape, store100Unique, storeShape, throughputBp25, throughputBp50,

src/js/game/hud/parts/achievements.js

@@ -1,6 +1,10 @@
 import { InputReceiver } from "../../../core/input_receiver";
 import { makeDiv } from "../../../core/utils";
-import { ACHIEVEMENTS, enum_achievement_mappings } from "../../../platform/achievement_provider";
+import {
+    ACHIEVEMENTS,
+    enum_achievement_mappings,
+    HIDDEN_ACHIEVEMENTS,
+} from "../../../platform/achievement_provider";
 import { T } from "../../../translations";
 import { KeyActionMapper, KEYMAPPINGS } from "../../key_action_mapper";
 import { BaseHUDPart } from "../base_hud_part";
@@ -60,15 +64,53 @@ export class HUDAchievements extends BaseHUDPart {
             // Assign handle
             this.achievementToElements[achievementKey] = handle;
         }
+
+        const handle = {};
+        // Wrapper
+        handle.hidden = makeDiv(this.contentDiv, null, ["achievement"]);
+
+        // Icon
+        handle.icon = makeDiv(handle.hidden, null, ["icon"]);
+        handle.icon.setAttribute("data-icon", "achievements/hidden.png");
+
+        // Info
+        handle.info = makeDiv(handle.hidden, null, ["info"]);
+
+        // Title
+        handle.title = makeDiv(handle.info, null, ["title"], T.achievements.hidden.title);
+
+        // Description
+        handle.description = makeDiv(
+            handle.info,
+            null,
+            ["description"],
+            T.achievements.hidden.description.replace("<amountHidden>", HIDDEN_ACHIEVEMENTS.length + "")
+        );
+        this.hiddenElement = handle;
     }
 
     renderStatus() {
+        let hidden = 0;
         for (const achievementKey in this.achievementToElements) {
             const handle = this.achievementToElements[achievementKey];
+
             if (!this.root.achievementProxy.provider.collection.map.get(ACHIEVEMENTS[achievementKey])) {
                 if (!handle.elem.classList.contains("unlocked")) handle.elem.classList.add("unlocked");
-            } else if (handle.elem.classList.contains("unlocked")) handle.elem.classList.remove("unlocked");
+                if (handle.elem.classList.contains("hidden")) handle.elem.classList.remove("hidden");
+            } else {
+                if (handle.elem.classList.contains("unlocked")) handle.elem.classList.remove("unlocked");
+
+                if (HIDDEN_ACHIEVEMENTS.includes(ACHIEVEMENTS[achievementKey])) {
+                    if (!handle.elem.classList.contains("hidden")) handle.elem.classList.add("hidden");
+                    hidden++;
+                }
+            }
         }
+
+        this.hiddenElement.description.innerHTML = T.achievements.hidden.description.replace(
+            "<amountHidden>",
+            hidden + ""
+        );
     }
 
     initialize() {

src/js/platform/achievement_provider.js

@@ -58,6 +58,17 @@ export const ACHIEVEMENTS = {
     upgradesTier8: "upgradesTier8",
 };
 
+export const HIDDEN_ACHIEVEMENTS = [
+    ACHIEVEMENTS.placeBp1000,
+    ACHIEVEMENTS.darkMode,
+    ACHIEVEMENTS.irrelevantShape,
+    ACHIEVEMENTS.logoBefore18,
+    ACHIEVEMENTS.mapMarkers15,
+    ACHIEVEMENTS.produceMsLogo,
+    ACHIEVEMENTS.belt500Tiles,
+    ACHIEVEMENTS.oldLevel17,
+];
+
 export const enum_achievement_mappings = {
     [ACHIEVEMENTS.belt500Tiles]: function () {
         return {

translations/base-en.yaml

@@ -499,6 +499,9 @@ shopUpgrades:
 
 # All achievements
 achievements:
+    hidden:
+        title: Hidden achievements
+        description: You have <amountHidden> hidden achievement(s)
     belt500Tiles:
         title: I need trains
         description: Have a belt with a length of 500 tiles