Merge branch 'puzzle' into puzzle-fix-toolbar

src/css/ingame_hud/buildings_toolbar.scss

@@ -41,11 +41,13 @@
                     @include S(height, 22px);
                     background-size: 45%;
                 }
+              
                 &:not(.unlocked) {
                     &::before {
                         background-size: #{D(13px)};
                     }
                 }
+              
                 &.unlocked {
                     .puzzle-lock {
                         & {
@@ -63,6 +65,10 @@
         }
 
         .building {
+            display: flex;
+            @include S(width, 40px);
+            position: relative;
+            @include S(height, 40px);
             .icon {
                 color: $accentColorDark;
                 display: flex;
@@ -70,18 +76,18 @@
                 position: relative;
                 align-items: center;
                 justify-content: center;
-                @include S(padding, 5px);
-                @include S(padding-bottom, 1px);
-                @include S(width, 35px);
-                @include S(height, 37px);
+                width: 100%;
+                height: 100%;
+                padding: 0;
+                margin: 0;
                 @include S(border-radius, $globalBorderRadius);
 
                 background: center center / 70% no-repeat;
             }
 
             &:not(.unlocked) {
+                @include S(width, 25px);
                 .icon {
-                    @include S(width, 20px);
                     opacity: 0.15;
                 }
                 &.editor {
@@ -105,8 +111,8 @@
                     pointer-events: all;
                     transition: all 50ms ease-in-out;
                     transition-property: background-color, transform;
-
                     cursor: pointer;
+
                     &:hover {
                         background-color: rgba(30, 40, 90, 0.1);
                     }
@@ -134,12 +140,11 @@
 
                     display: grid;
                     grid-auto-flow: column;
-                    @include S(margin-top, 2px);
-                    @include S(margin-left, 16px);
-                    @include S(margin-bottom, 29px);
 
                     position: absolute;
-                    bottom: 20px;
+                    top: -30px;
+                    left: 50%;
+                    transform: translateX(-50%) !important;
                     transition: all 0.12s ease-in-out;
                     transition-property: opacity, transform;
 

src/css/ingame_hud/puzzle_complete_notification.scss

@@ -96,12 +96,13 @@
                         @include S(height, 60px);
                         @include S(margin, 0, 10px);
                         box-sizing: border-box;
-                        @include S(border-radius, $globalBorderRadius);
+                        border-radius: 50%;
                         transition: opacity 0.12s ease-in-out, background-color 0.12s ease-in-out;
+                        @include IncreasedClickArea(0px);
 
                         &.liked-yes {
                             /* @load-async */
-                            background: uiResource("icons/puzzle_action_liked_yes.png") center center / 70%
+                            background: uiResource("icons/puzzle_action_liked_yes.png") center 55% / 60%
                                 no-repeat;
                         }
 
@@ -110,7 +111,18 @@
                         }
 
                         &.active {
-                            background-color: #151118 !important;
+                            background-color: $colorRedBright !important;
+                            @include InlineAnimation(0.3s ease-in-out) {
+                                0% {
+                                    transform: scale(0);
+                                }
+                                50% {
+                                    transform: scale(1.2);
+                                }
+                                100% {
+                                    transform: scale(1);
+                                }
+                            }
                         }
                         &:not(.active) {
                             opacity: 0.4;
@@ -119,6 +131,26 @@
                 }
             }
 
+            > .buttonBar {
+                display: flex;
+                @include S(margin-top, 20px);
+
+                button.continue {
+                    background: #555;
+                    @include S(margin-right, 10px);
+                }
+
+                button.menu {
+                    background-color: $colorGreenBright;
+                }
+
+                > button {
+                    @include S(min-width, 100px);
+                    @include S(padding, 10px, 20px);
+                    @include IncreasedClickArea(0px);
+                }
+            }
+
             > .actions {
                 position: absolute;
                 @include S(bottom, 40px);
@@ -135,14 +167,5 @@
                 }
             }
         }
-
-        button.close {
-            border: 0;
-            position: relative;
-            @include S(margin-top, 15px);
-            background: $colorGreenBright;
-            @include Heading;
-            @include S(padding, 14px, 40px);
-        }
     }
 }

src/css/states/main_menu.scss

@@ -88,11 +88,7 @@
 
         @include S(grid-column-gap, 10px);
         display: grid;
-        grid-template-columns: 1fr;
-
-        &.demo {
         grid-template-columns: 1fr 1fr;
-        }
 
         .standaloneBanner {
             background: rgb(255, 75, 84);
@@ -223,9 +219,33 @@
         }
     }
 
+    .puzzleContainer {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        background: #4cc98a;
+        grid-row: 1 / 2;
+        grid-column: 2 / 3;
+        @include S(padding, 20px);
+        @include S(border-radius, $globalBorderRadius);
+        > .dlcLogo {
+            @include S(width, 200px);
+        }
+
+        > button {
+            @include S(margin-top, 20px);
+            @include Heading;
+            @include S(padding, 10px, 30px);
+            background-color: #333;
+            color: #fff;
+        }
+    }
+
     .mainContainer {
         display: flex;
         align-items: center;
+        grid-row: 1 / 2;
         justify-content: center;
         flex-direction: column;
         background: #fafafa;

src/js/core/state_manager.js

@@ -90,9 +90,9 @@ export class StateManager {
         dialogParent.classList.add("modalDialogParent");
         document.body.appendChild(dialogParent);
 
+        this.currentState.internalEnterCallback(payload);
         this.app.sound.playThemeMusic(this.currentState.getThemeMusic());
 
-        this.currentState.internalEnterCallback(payload);
         this.currentState.onResized(this.app.screenWidth, this.app.screenHeight);
 
         this.app.analytics.trackStateEnter(key);

src/js/game/hud/parts/base_toolbar.js

@@ -40,7 +40,6 @@ export class HUDBaseToolbar extends BaseHUDPart {
          * element: HTMLElement,
          * index: number
          * puzzleLocked: boolean;
-         * class: typeof MetaBuilding,
          * }>} */
         this.buildingHandles = {};
     }
@@ -136,7 +135,6 @@ export class HUDBaseToolbar extends BaseHUDPart {
                 selected: false,
                 index: i,
                 puzzleLocked: false,
-                class: allBuildings[i],
             };
         }
 

src/js/game/hud/parts/puzzle_complete_notification.js

@@ -52,19 +52,23 @@ export class HUDPuzzleCompleteNotification extends BaseHUDPart {
             this.updateState();
         });
 
+        const buttonBar = document.createElement("div");
+        buttonBar.classList.add("buttonBar");
+        this.elemContents.appendChild(buttonBar);
+
         this.continueBtn = document.createElement("button");
-        this.continueBtn.classList.add("close", "styledButton");
+        this.continueBtn.classList.add("continue", "styledButton");
         this.continueBtn.innerText = T.ingame.puzzleCompletion.continueBtn;
-        dialog.appendChild(this.continueBtn);
-
-        this.menuBtn = document.createElement("button");
-        this.menuBtn.classList.add("close", "styledButton");
-        this.menuBtn.innerText = T.ingame.puzzleCompletion.menuBtn;
-        dialog.appendChild(this.menuBtn);
-
+        buttonBar.appendChild(this.continueBtn);
         this.trackClicks(this.continueBtn, () => {
             this.close(false);
         });
+
+        this.menuBtn = document.createElement("button");
+        this.menuBtn.classList.add("menu", "styledButton");
+        this.menuBtn.innerText = T.ingame.puzzleCompletion.menuBtn;
+        buttonBar.appendChild(this.menuBtn);
+
         this.trackClicks(this.menuBtn, () => {
             this.close(true);
         });

src/js/game/hud/parts/puzzle_editor_review.js

@@ -163,7 +163,9 @@ export class HUDPuzzleEditorReview extends BaseHUDPart {
         const serialized = new PuzzleSerializer().generateDumpFromGameRoot(this.root);
 
         logger.log("Submitting puzzle, title=", title, "shortKey=", shortKey);
+        if (G_IS_DEV) {
             logger.log("Serialized data:", serialized);
+        }
 
         const closeLoading = this.root.hud.parts.dialogs.showLoadingDialog(T.puzzleMenu.submittingPuzzle);
 

src/js/game/hud/parts/sandbox_controller.js

@@ -152,9 +152,6 @@ export class HUDSandboxController extends BaseHUDPart {
     }
 
     toggle() {
-        if (!this.visible) {
-            return;
-        }
         this.visible = !this.visible;
     }
 

src/js/game/modes/puzzle.js

@@ -7,9 +7,6 @@ import { types } from "../../savegame/serialization";
 import { enumGameModeTypes, GameMode } from "../game_mode";
 import { HUDPuzzleBackToMenu } from "../hud/parts/puzzle_back_to_menu";
 import { HUDPuzzleDLCLogo } from "../hud/parts/puzzle_dlc_logo";
-import { gMetaBuildingRegistry } from "../../core/global_registries";
-import { MetaBalancerBuilding } from "../buildings/balancer";
-import { MetaUndergroundBeltBuilding } from "../buildings/underground_belt";
 
 export class PuzzleGameMode extends GameMode {
     static getType() {

src/js/game/modes/puzzle_play.js

@@ -29,6 +29,7 @@ import { HUDPuzzleCompleteNotification } from "../hud/parts/puzzle_complete_noti
 import { HUDPuzzlePlaySettings } from "../hud/parts/puzzle_play_settings";
 import { MetaBlockBuilding } from "../buildings/block";
 import { MetaBuilding } from "../meta_building";
+import { gMetaBuildingRegistry } from "../../core/global_registries";
 
 const logger = createLogger("puzzle-play");
 const copy = require("clipboard-copy");
@@ -47,7 +48,7 @@ export class PuzzlePlayGameMode extends PuzzleGameMode {
         super(root);
 
         /** @type {Array<typeof MetaBuilding>} */
-        const excludedBuildings = [
+        let excludedBuildings = [
             MetaConstantProducerBuilding,
             MetaGoalAcceptorBuilding,
             MetaBlockBuilding,
@@ -70,7 +71,22 @@ export class PuzzlePlayGameMode extends PuzzleGameMode {
             MetaTransistorBuilding,
         ];
 
-        this.hiddenBuildings = excludedBuildings.concat(puzzle.game.excludedBuildings);
+        if (puzzle.game.excludedBuildings) {
+            /**
+             * @type {any}
+             */
+            const puzzleHidden = puzzle.game.excludedBuildings
+                .map(id => {
+                    if (!gMetaBuildingRegistry.hasId(id)) {
+                        return;
+                    }
+                    return gMetaBuildingRegistry.findById(id).constructor;
+                })
+                .filter(x => !!x);
+            excludedBuildings = excludedBuildings.concat(puzzleHidden);
+        }
+
+        this.hiddenBuildings = excludedBuildings;
 
         this.additionalHudParts.puzzlePlayMetadata = HUDPuzzlePlayMetadata;
         this.additionalHudParts.puzzlePlaySettings = HUDPuzzlePlaySettings;

src/js/platform/sound.js

@@ -35,6 +35,10 @@ export const MUSIC = {
     menu: "menu",
 };
 
+if (G_IS_STANDALONE || G_IS_DEV) {
+    MUSIC.puzzle = "puzzle-full";
+}
+
 export class SoundInstanceInterface {
     constructor(key, url) {
         this.key = key;

src/js/savegame/puzzle_serializer.js

@@ -85,12 +85,13 @@ export class PuzzleSerializer {
         const handles = root.hud.parts.buildingsToolbar.buildingHandles;
         const ids = gMetaBuildingRegistry.getAllIds();
 
-        /** @type {Array<typeof MetaBuilding>} */
+        /** @type {Array<string>} */
         let excludedBuildings = [];
         for (let i = 0; i < ids.length; ++i) {
             const handle = handles[ids[i]];
             if (handle && handle.puzzleLocked) {
-                excludedBuildings.push(handle.class);
+                // @ts-ignore
+                excludedBuildings.push(handle.metaBuilding.getId());
             }
         }
 

src/js/savegame/savegame_typedefs.js

@@ -87,7 +87,7 @@ import { MetaBuilding } from "../game/meta_building";
  *   version: number;
  *   bounds: { w: number; h: number; },
  *   buildings: (PuzzleGameBuildingGoal | PuzzleGameBuildingConstantProducer | PuzzleGameBuildingBlock)[],
- *   excludedBuildings: Array<typeof MetaBuilding>,
+ *   excludedBuildings: Array<string>,
  * }} PuzzleGameData
  */
 

src/js/states/ingame.js

@@ -104,6 +104,9 @@ export class InGameState extends GameState {
     }
 
     getThemeMusic() {
+        if (this.creationPayload.gameModeId && this.creationPayload.gameModeId.includes("puzzle")) {
+            return MUSIC.puzzle;
+        }
         return MUSIC.theme;
     }
 

src/js/states/main_menu.js

@@ -15,7 +15,6 @@ import {
     startFileChoose,
     waitNextFrame,
 } from "../core/utils";
-import { enumGameModeIds } from "../game/game_mode";
 import { HUDModalDialogs } from "../game/hud/parts/modal_dialogs";
 import { getApplicationSettingById } from "../profile/application_settings";
 import { T } from "../translations";
@@ -83,9 +82,19 @@ export class MainMenuState extends GameState {
                     }
                     <div class="buttons"></div>
                 </div>
-                <div class="bottomContainer">
-                    <div class="buttons"></div>
-                </div>
+
+                ${
+                    // @TODO: Only display if DLC is owned, otherwise show ad for store page
+                    showDemoBadges
+                        ? ""
+                        : `
+                    <div class="puzzleContainer">
+                        <img class="dlcLogo" src="${cachebust(
+                            "res/puzzle_dlc_logo.png"
+                        )}" alt="shapez.io Logo">
+                        <button class="styledButton puzzleDlcPlayButton">Play</button>
+                    </div>`
+                }
             </div>
 
             <div class="footer ${G_CHINA_VERSION ? "china" : ""}">
@@ -314,14 +323,11 @@ export class MainMenuState extends GameState {
             buttonContainer.appendChild(importButtonElement);
         }
 
-        const bottomButtonContainer = this.htmlElement.querySelector(".bottomContainer .buttons");
-        removeAllChildren(bottomButtonContainer);
-
-        const puzzleModeButton = makeButton(bottomButtonContainer, ["styledButton"], T.mainMenu.puzzleMode);
-
-        bottomButtonContainer.appendChild(puzzleModeButton);
+        const puzzleModeButton = this.htmlElement.querySelector(".puzzleDlcPlayButton");
+        if (puzzleModeButton) {
             this.trackClicks(puzzleModeButton, () => this.onPuzzleModeButtonClicked());
         }
+    }
 
     onPuzzleModeButtonClicked(force = false) {
         const hasUnlockedBlueprints = this.app.savegameMgr.getSavegamesMetaData().some(s => s.level >= 12);

src/js/states/puzzle_menu.js

@@ -186,7 +186,10 @@ export class PuzzleMenuState extends TextualGameState {
                 const difficulty = document.createElement("div");
                 difficulty.classList.add("difficulty");
 
-                const completionPercentage = Math.round((puzzle.completions / puzzle.downloads) * 100.0);
+                const completionPercentage = Math.max(
+                    0,
+                    Math.min(100, Math.round((puzzle.completions / puzzle.downloads) * 100.0))
+                );
                 difficulty.innerText = completionPercentage + "%";
                 stats.appendChild(difficulty);
 
@@ -201,10 +204,13 @@ export class PuzzleMenuState extends TextualGameState {
                 }
             }
 
+            if (this.activeCategory === "mine") {
                 const downloads = document.createElement("div");
                 downloads.classList.add("downloads");
                 downloads.innerText = String(puzzle.downloads);
                 stats.appendChild(downloads);
+                stats.classList.add("withDownloads");
+            }
 
             const likes = document.createElement("div");
             likes.classList.add("likes");

translations/base-en.yaml

@@ -628,7 +628,7 @@ ingame:
         titleRating: How difficult did you find the puzzle?
         titleRatingDesc: Your rating will help me to make you better suggestions in the future
 
-        continueBtn: Continue
+        continueBtn: Keep Playing
         menuBtn: Menu
 
     puzzleMetadata:

translations/base-he.yaml

@@ -417,41 +417,51 @@ ingame:
         get_on_steam: Steamהשג ב
 
     standaloneAdvantages:
-        title: !השג את הגרסה המלאה
-        no_thanks: !לא, תודה
+        title: >-
+            !השג את הגרסה המלאה
+        no_thanks: >-
+            !לא, תודה
 
         points:
             levels:
                 title: 12 שלבים חדשים
-                desc: !סה"כ  26 שלבים
+                desc: >-
+                    !סה"כ  26 שלבים
 
             buildings:
                 title: 18 מבנים חדשים
-                desc: !אפשרות להפוך את המפעל לאוטומטי לגמרי
+                desc: >-
+                    !אפשרות להפוך את המפעל לאוטומטי לגמרי
 
             achievements:
                 title: הישגים
-                desc: !השג את כולם
+                desc: >-
+                    !השג את כולם
 
             upgrades:
                 title: רמות לשדרוגים ∞
-                desc: !לגרסת הדמו הזאת יש רק 5
+                desc: >-
+                    !לגרסת הדמו הזאת יש רק 5
 
             markers:
                 title: סימונים ∞
-                desc: !אף פעם לא תלך לאיבוד במפעל שלך
+                desc: >-
+                    !אף פעם לא תלך לאיבוד במפעל שלך
 
             wires:
                 title: כבלים
-                desc: !מימד חדש לגמרי
+                desc: >-
+                    !מימד חדש לגמרי
 
             darkmode:
                 title: תצוגה כהה
-                desc: !תפסיק להכאיב לעיניים שלך
+                desc: >-
+                    !תפסיק להכאיב לעיניים שלך
 
             support:
                 title: תמוך בי
-                desc: !אני יצרתי רת המשחק הזה בזמני החופשי
+                desc: >-
+                    !אני יצרתי רת המשחק הזה בזמני החופשי
 
 # All shop upgrades
 shopUpgrades:
@@ -1150,39 +1160,50 @@ demo:
     settingNotAvailable: .הגדרה לא זמינה בדמו
 
 tips:
-    - !ההאב יקבל כל צורה, לא רק את הצורה הנדרשת עכשיו
-    - !וודא שהמפעלים שלך מחולקים - זה יהיה לך יותר קל
-    - !אל תבנה יותר מדיי קרוב להאב, זה יהפוך לבלגן
+    - >-
+        !ההאב יקבל כל צורה, לא רק את הצורה הנדרשת עכשיו
+    - >-
+        !וודא שהמפעלים שלך מחולקים - זה יהיה לך יותר קל
+    - >-
+        !אל תבנה יותר מדיי קרוב להאב, זה יהפוך לבלגן
     - .אם החיבור לא עובד, תנסה להחליף את מה נכנס לאיזה צד
     - .<b>R</b> אתה יכול לשנות את הכיוון של בניית המסועים המהירה ע"י ללחוץ על
     - .תאפשר לבנות הרבה מסילות באותו כיוון <b>CTRL</b> החזקת
     - .היחס של המהירויות של המבנים ישאר זהה אם השדרוגים הם באותו רמה
     - .לשים חפצים במסוע אחת מאשר כמה יהיה יותר יעיל במקום
-    - !אתה תשיג עוד צורות של מבנים בהמשך המשחק
+    - >-
+        !אתה תשיג עוד צורות של מבנים בהמשך המשחק
     - .בשביל להחליף בין צורות שונות של מבנים <b>T</b>אתה יכול להשתמש ב
-    - !סימטריה זה המפתח
+    - >-
+        !סימטריה זה המפתח
     - .אתה יכול לשים סוגים שונים של מנהרות על אותו קו לסרוגין
-    - !נסה לבנות מפעלים קומפקטים, זה ישתלם
+    - >-
+        !נסה לבנות מפעלים קומפקטים, זה ישתלם
     - <b>T</b> לצובע יש סוג הפוך שאתה יכול לבחור ע"י
     - .אם יש לך את היחס הנכון בין כמות המבנים, יהיה לך את האיכות המיטבית
     - .ברמה המקסימלית, 5 חוצבים ימלאו מסוע אחד
-    - !אל תשכח בקשר למנהרות
+    - >-
+        !אל תשכח בקשר למנהרות
     - .אתה לא צריך לחלק חפצים באופן שווה בשביל יעילות המיטבית
     - .תפעיל את מצב בנייה מהירה של מסועים, שתתן לך לשים מסועים ארוכים בקלות <b>SHIFT</b> החזקת
     - .חותכים תמיד חותכים לגובה, לא משנה מה הכיוון שלהם
     - .ערבב את כל שלושת הצבעים הבסיסיים בשביל להשיג את הצבע לבן
     - .לאכסון יש העדפה להוציא רק מהצד השמאלי
-    - !הכן לך עיצוב של מבנה שתוכל להשתמש בו כשתצטרך - זה שווה את זה
+    - >-
+        !הכן לך עיצוב של מבנה שתוכל להשתמש בו כשתצטרך - זה שווה את זה
     - .תתן לך לבנות כמה מבנים באותו זמן <b>SHIFT</b> החזקת
     - .בשביל להפוך את הכיוון של המסועים שאתה שם <b>ALT</b> אתה יכול להחזיק
-    - !יעילות זה המפתח
+    - >-
+        !יעילות זה המפתח
     - .מאגרי צורות שיותר רחוקות מההאב הן יותר מסובכות
     - .למכונות יש מהירות מוגבלת, חלק את החומרים בשביל היעילות המיטבית
     - .התשמש במאזנים בשביל למקסם את היעילות
     - .כיוון זה לא חשוב. נסה לא לחצות מסועים יותא מידי
-    - !תכנן מראש, אחרת יהיה לך בלאגן
+    - >-
+        !תכנן מראש, אחרת יהיה לך בלאגן
     - .אל תמחק את המפעלים הישנים שלך! אתה תצתרך אותם בשביל לפתוח שדרוגים
-    - !נסה לפתור את השלבים 20 ו26 בעצמך לפני שאתה מחפש פתרונות
+    - >-
+        !נסה לפתור את השלבים 20 ו26 בעצמך לפני שאתה מחפש פתרונות
     - .אל תסבך דברים, נסה להשאר פשוט ותגיע רחוק
     - .אתה כנראה תצטרך להשתמש במפעלים שלך שוב בהמשך המשחק. תבנה את המפעלים שלך בצורה שתוכל להשתמש בהם שוב בהמשך
     - .לפעמים אתה יכול למצוא צורה שאתה צריך במפה בלי להתחיל לבנות אותה עם חותכים ומחברים
@@ -1195,13 +1216,17 @@ tips:
     - .בנייה קרובה מידי להאב יכולה להפריע בדרך של פרוייקטים מאוחרים יותר
     - .סימן הסיכה ליד כל צורה בשדרוגים תצמיד אותה לצד שמאל של המסך
     - .ערבב את כל שלושת הצבעים הבסיסיים בשביל להשיג את הצבע לבן
-    - !יש לך מפה אין סופית. אל תשים את המפעל שלך רק צמוד להאב, תרחיב אותו
+    - >-
+        !יש לך מפה אין סופית. אל תשים את המפעל שלך רק צמוד להאב, תרחיב אותו
     - .זה המשחק האהוב עליי !Factorio נסה גם את את
     - .החותך המרובע חותך עם כיוון השעון, מתחיל מלמעלה ימין.
-    - !אתה יכול להוריד את השמירות שלך בתפריט הראשי!
+    - >-
+        !אתה יכול להוריד את השמירות שלך בתפריט הראשי!
     - .למשחק הזה יש הרבה מקשים שימושיים! חפש אותם בהגדרות.
-    - !למשחק הזה יש הרבה הגדרות, חפש אותם
-    - !לסימון של ההאב שלך יש חץ שמסמן באיזה כיוון הוא
+    - >-
+        !למשחק הזה יש הרבה הגדרות, חפש אותם
+    - >-
+        !לסימון של ההאב שלך יש חץ שמסמן באיזה כיוון הוא
     - .בשביל לנקות מסוע, חתוך את האיזור ואז תדביק באותו מקום
     - .לחץ F4 בשביל להציג את הFPS ואת הTickRate
     - .לחץ F4 פעמיים בשביל להציג את המשבצת שהעכבר והמצלמה בהם