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>
 

translations/base-en.yaml

@@ -120,6 +120,11 @@ mainMenu:
     puzzleMode: Puzzle Mode
     back: Back
 
+    puzzleDlcText: >-
+        Do you enjoy compacting and optimizing factories?
+        Get the Puzzle DLC now on Steam for even more fun!
+    puzzleDlcWishlist: Wishlist now!
+
 puzzleMenu:
     play: Play
     edit: Edit

translations/base-es.yaml

@@ -26,7 +26,7 @@ steamPage:
 global:
     loading: Cargando
     error: Error
-    thousandsDivider: ,
+    thousandsDivider: ","
     decimalSeparator: "."
     suffix:
         thousands: k

translations/base-zh-TW.yaml

@@ -125,13 +125,15 @@ dialogs:
         desc: 你還沒有解鎖藍圖功能！完成更多的關卡來解鎖藍圖。
     keybindingsIntroduction:
         title: 實用按鍵
-        desc: "這個遊戲有很多能幫助搭建工廠的使用按鍵。 以下是其中的一些，記得在<strong>按鍵設定</strong>中查看其他的！ <br><br>
+        desc:
+            "這個遊戲有很多能幫助搭建工廠的使用按鍵。 以下是其中的一些，記得在<strong>按鍵設定</strong>中查看其他的！ <br><br>
             <code class='keybinding'>CTRL</code> + 拖曳：選擇區域以複製或刪除。 <br> <code
             class='keybinding'>SHIFT</code>: 按住以放置多個。 <br> <code
             class='keybinding'>ALT</code>: 反向放置輸送帶。 <br>"
     createMarker:
         title: 建立標記
-        desc: 給地圖標記取一個名字。你可以在名字中加入一個<strong>簡短代碼</strong>以加入圖形。（你可以在<link>這裡</link>
+        desc:
+            給地圖標記取一個名字。你可以在名字中加入一個<strong>簡短代碼</strong>以加入圖形。（你可以在<link>這裡</link>
             建立簡短代碼。）
         titleEdit: 修改標記
     markerDemoLimit:
@@ -243,15 +245,18 @@ ingame:
             1_1_extractor: 在<strong>圓形礦脈</strong>上放一個<strong>開採機</strong>來採集圓形！
             1_2_conveyor: 用<strong>輸送帶</strong>將你的開採機連接到基地上！
                 <br><br>提示：用你的游標<strong>按下並拖曳</strong>輸送帶！
-            1_3_expand: 這<strong>不是</strong>一個放置型遊戲！建造更多的開採機和輸送帶來更快地完成目標。 <br><br>
+            1_3_expand:
+                這<strong>不是</strong>一個放置型遊戲！建造更多的開採機和輸送帶來更快地完成目標。 <br><br>
                 提示：按住<strong>SHIFT</strong>鍵來放置多個開採機，用<strong>R</strong>鍵旋轉它們。
             2_1_place_cutter: "現在放置一個<strong>切割機</strong>並利用它把圓圈切成兩半！<br><br> PS:
                 不論切割機的方向，它都會把圖形<strong>垂直地</strong>切成兩半。"
             2_2_place_trash: 切割機可能會<strong>堵塞並停止運作</strong>！<br><br>
                 用<strong>垃圾桶</strong>把「目前」不需要的部分處理掉。
-            2_3_more_cutters: "做得好！ 現在，再放<strong>2個切割機</strong>來加速這個緩慢的生產線！<br><br> PS:
+            2_3_more_cutters:
+                "做得好！ 現在，再放<strong>2個切割機</strong>來加速這個緩慢的生產線！<br><br> PS:
                 使用<strong>0-9快捷鍵</strong>可以更快選取建築 ！"
-            3_1_rectangles: "現在來開採一些方形吧！<strong>蓋4座開採機</strong>，把形狀收集到基地。<br><br> PS:
+            3_1_rectangles:
+                "現在來開採一些方形吧！<strong>蓋4座開採機</strong>，把形狀收集到基地。<br><br> PS:
                 選擇輸送帶，按住<strong>SHIFT</strong>並拖曳滑鼠可以計畫輸送帶位置！"
             21_1_place_quad_painter: 放置一個<strong>切割機（四分）</strong>並取得一些
                 <strong>圓形</strong>、<strong>白色</strong>和<strong>紅色</strong>！
@@ -445,11 +450,13 @@ buildings:
     transistor:
         default:
             name: 電晶體
-            description: 如果基極（側面）的輸入訊號為「真」，則把射極（底部）輸入的真假值複製到集極（頂部）的輸出。
+            description:
+                如果基極（側面）的輸入訊號為「真」，則把射極（底部）輸入的真假值複製到集極（頂部）的輸出。
                 （「真」值代表：形狀正確、顏色正確或布林值為1）
         mirrored:
             name: 電晶體
-            description: 如果基極（側面）的輸入訊號為「真」，則把射極（底部）輸入的真假值複製到集極（頂部）的輸出。
+            description:
+                如果基極（側面）的輸入訊號為「真」，則把射極（底部）輸入的真假值複製到集極（頂部）的輸出。
                 （「真」值代表：形狀正確、顏色正確或布林值為1）
     filter:
         default:
@@ -580,11 +587,13 @@ storyRewards:
             <strong>布林值</strong>（1或0）。
     reward_logic_gates:
         title: 邏輯閘
-        desc: <strong>邏輯閘</strong>已解鎖。 你可以覺得無所謂，但其實邏輯閘其實超酷的！<br><br> 有了這些邏輯閘，你可以運算 AND,
+        desc:
+            <strong>邏輯閘</strong>已解鎖。 你可以覺得無所謂，但其實邏輯閘其實超酷的！<br><br> 有了這些邏輯閘，你可以運算 AND,
             OR, XOR 與 NOT。<br><br> 錦上添花，我再送你<strong>電晶體</strong>！
     reward_virtual_processing:
         title: 虛擬操作
-        desc: <strong>虛擬操作</strong>！<br><br>已解鎖。很多新建築有虛擬版，你可以模擬切割機、旋轉機、推疊機還有更多電路層上的建築。
+        desc:
+            <strong>虛擬操作</strong>！<br><br>已解鎖。很多新建築有虛擬版，你可以模擬切割機、旋轉機、推疊機還有更多電路層上的建築。
             繼續遊玩的你現在有三個選項：<br><br> -
             蓋一個自動生成任何基地要求圖形的<strong>自動機</strong>（推薦！）。<br><br> -
             利用電路層蓋一些很酷建築<br><br> - 繼續用原本的方式破關。<br><br> 不論你的選擇是什麼，祝你玩得開心！
@@ -811,7 +820,7 @@ keybindings:
         copyWireValue: 電路：複製數值於游標底下
         rotateToUp: "轉動: 向上"
         rotateToDown: "轉動: 向下"
-        rotateToRight: 轉動: 向右"
+        rotateToRight: "轉動: 向右"
         rotateToLeft: "轉動: 向左"
 about:
     title: 關於遊戲