Preparations for the puzzle DLC

src/css/states/main_menu.scss

@@ -88,7 +88,9 @@
 
         @include S(grid-column-gap, 10px);
         display: grid;
-        grid-template-columns: 1fr 1fr;
+        &[data-columns="1"] {
+            grid-template-columns: 1fr;
+        }
 
         .standaloneBanner {
             background: rgb(255, 75, 84);
@@ -230,7 +232,7 @@
         @include S(padding, 20px);
         @include S(border-radius, $globalBorderRadius);
         > .dlcLogo {
-            @include S(width, 200px);
+            @include S(width, 190px);
         }
 
         > button {
@@ -240,6 +242,21 @@
             background-color: #333;
             color: #fff;
         }
+
+        &.notOwned {
+            p {
+                @include PlainText;
+                color: #333;
+                @include S(margin-top, 10px);
+                @include S(width, 190px);
+            }
+            > button {
+                box-sizing: border-box;
+                @include S(margin-top, 10px);
+                @include S(width, 190px);
+                @include S(padding, 10px, 20px);
+            }
+        }
     }
 
     .mainContainer {

src/js/changelog.js

@@ -1,11 +1,11 @@
 export const CHANGELOG = [
     {
         version: "1.4.0",
-        date: "UNRELEASED",
+        date: "27.05.2021",
         entries: [
-            "Added puzzle mode",
             "Belts in blueprints should now always paste correctly",
             "You can now clear belts by selecting them, and then pressing 'B'",
+            "Preparations for the puzzle dlc!",
         ],
     },
     {

src/js/states/main_menu.js

@@ -69,7 +69,9 @@ export class MainMenuState extends GameState {
                 <span class="updateLabel">v${G_BUILD_VERSION} - Puzzle DLC!</span>
             </div>
 
-            <div class="mainWrapper ${showDemoBadges ? "demo" : "noDemo"}">
+            <div class="mainWrapper ${showDemoBadges ? "demo" : "noDemo"}" data-columns="${
+            G_IS_STANDALONE ? 2 : showDemoBadges ? 2 : 1
+        }">
                 <div class="sideContainer">
                     ${showDemoBadges ? `<div class="standaloneBanner">${bannerHtml}</div>` : ""}
                 </div>
@@ -85,15 +87,31 @@ export class MainMenuState extends GameState {
 
                 ${
                     // @TODO: Only display if DLC is owned, otherwise show ad for store page
-                    showDemoBadges
-                        ? ""
-                        : `
+                    G_IS_STANDALONE && false
+                        ? `
                     <div class="puzzleContainer">
                         <img class="dlcLogo" src="${cachebust(
                             "res/puzzle_dlc_logo.png"
                         )}" alt="shapez.io Logo">
                         <button class="styledButton puzzleDlcPlayButton">Play</button>
                     </div>`
+                        : ""
+                }
+
+                ${
+                    // @TODO: Only display if DLC is owned, otherwise show ad for store page
+                    G_IS_STANDALONE && true
+                        ? `
+                    <div class="puzzleContainer notOwned">
+                        <img class="dlcLogo" src="${cachebust(
+                            "res/puzzle_dlc_logo.png"
+                        )}" alt="shapez.io Logo">
+                        <p>${T.mainMenu.puzzleDlcText}</p>
+                        <button class="styledButton puzzleDlcGetButton">${
+                            T.mainMenu.puzzleDlcWishlist
+                        }</button>
+                    </div>`
+                        : ""
                 }
             </div>