Added permanent upgrades! Currently just adding rows or columns to farm.

Pages/Shop.php

@@ -40,6 +40,23 @@ $PageSection = "Shop";
                 seed price, rounded up.
             </p>
 
+            <section
+                id="PermanentUpgrades"
+                class="ShopSection"
+            >
+                <h2>Permanent upgrades</h2>
+
+                <p>
+                    Expand your Garden one row or column at a time.
+                    Existing plants keep their positions.
+                </p>
+
+                <div
+                    id="ShopGardenUpgradeList"
+                    class="ShopSeedList"
+                ></div>
+            </section>
+
             <section
                 id="Seeds"
                 class="ShopSection"
@@ -53,7 +70,7 @@ $PageSection = "Shop";
             </section>
 
             <p id="ShopMessage" class="PageMessage">
-                Choose a seed to buy.
+                Choose something to buy.
             </p>
         </main>
 
@@ -63,6 +80,7 @@ $PageSection = "Shop";
         <script src="/Scripts/Garden/Save.js"></script>
         <script src="/Scripts/Garden/Content.js"></script>
         <script src="/Scripts/Garden/Economy.js"></script>
+        <script src="/Scripts/Garden/Upgrades.js"></script>
         <script src="/Scripts/Garden/Shop.js"></script>
     </body>
 </html>

Scripts/Garden/Save.js

@@ -249,15 +249,19 @@ function NormalizeSaveData(
 
     SaveData.Garden.Width = Math.max(
         1,
+        Math.floor(
             Number(
                 SaveData.Garden.Width ?? 3
+            ) || 3
         )
     );
 
     SaveData.Garden.Height = Math.max(
         1,
+        Math.floor(
             Number(
                 SaveData.Garden.Height ?? 3
+            ) || 3
         )
     );
 

Scripts/Garden/Shop.js

@@ -28,6 +28,7 @@ async function StartShop() {
 function RenderShop() {
     RenderShopCurrency();
     RenderShopSeeds();
+    RenderGardenUpgrades();
 }
 
 
@@ -106,6 +107,169 @@ function RenderShopSeeds() {
 }
 
 
+function RenderGardenUpgrades() {
+    const UpgradeList =
+        document.getElementById(
+            "ShopGardenUpgradeList"
+        );
+
+    if (UpgradeList === null) {
+        return;
+    }
+
+    UpgradeList.replaceChildren(
+        CreateGardenExpansionCard(
+            "Column"
+        ),
+        CreateGardenExpansionCard(
+            "Row"
+        )
+    );
+}
+
+
+function CreateGardenExpansionCard(
+    Direction
+) {
+    const IsColumn =
+        Direction === "Column";
+
+    const AddedPlots =
+        IsColumn
+            ? ShopSave.Garden.Height
+            : ShopSave.Garden.Width;
+
+    const Cost =
+        IsColumn
+            ? GetGardenColumnUpgradeCost(
+                ShopSave
+            )
+            : GetGardenRowUpgradeCost(
+                ShopSave
+            );
+
+    const NewWidth =
+        ShopSave.Garden.Width +
+        (IsColumn ? 1 : 0);
+
+    const NewHeight =
+        ShopSave.Garden.Height +
+        (IsColumn ? 0 : 1);
+
+
+    const Card =
+        document.createElement(
+            "article"
+        );
+
+    Card.className =
+        "Panel ShopItem";
+
+
+    const Header =
+        document.createElement(
+            "div"
+        );
+
+    Header.className =
+        "ShopItemHeader";
+
+
+    const Name =
+        document.createElement(
+            "h3"
+        );
+
+    Name.textContent =
+        "Add " +
+        Direction.toLowerCase();
+
+    Header.appendChild(Name);
+
+
+    const Description =
+        document.createElement(
+            "p"
+        );
+
+    Description.textContent =
+        IsColumn
+            ? "Add one column to the right side of your Garden."
+            : "Add one row to the bottom of your Garden.";
+
+
+    const Details =
+        document.createElement(
+            "div"
+        );
+
+    Details.className =
+        "ShopItemDetails";
+
+    Details.append(
+        CreateShopStat(
+            "Current size",
+            ShopSave.Garden.Width +
+                "×" +
+                ShopSave.Garden.Height
+        ),
+        CreateShopStat(
+            "Adds",
+            AddedPlots.toLocaleString() +
+                (AddedPlots === 1
+                    ? " plot"
+                    : " plots")
+        ),
+        CreateShopStat(
+            "New size",
+            NewWidth +
+                "×" +
+                NewHeight
+        )
+    );
+
+
+    const BuyButton =
+        document.createElement(
+            "button"
+        );
+
+    BuyButton.className =
+        "ActionButton ShopBuyButton";
+
+    BuyButton.type = "button";
+
+    BuyButton.textContent =
+        "Buy - " +
+        Cost.toLocaleString() +
+        " Dew";
+
+    BuyButton.disabled =
+        ShopSave.Currency.Dew < Cost ||
+        ShopPurchasePending;
+
+    BuyButton.addEventListener(
+        "click",
+        () => {
+            BuyGardenExpansion(
+                Direction
+            );
+        }
+    );
+
+
+    Card.append(
+        Header,
+        Description,
+        Details,
+        BuyButton
+    );
+
+
+    return Card;
+}
+
+
 function CreateShopSeedCard(
     Plant
 ) {
@@ -585,6 +749,96 @@ async function BuyPlantSeed(
 }
 
 
+async function BuyGardenExpansion(
+    Direction
+) {
+    if (ShopPurchasePending) {
+        return;
+    }
+
+
+    const IsColumn =
+        Direction === "Column";
+
+    const IsRow =
+        Direction === "Row";
+
+    if (
+        !IsColumn &&
+        !IsRow
+    ) {
+        return;
+    }
+
+
+    const Cost =
+        IsColumn
+            ? GetGardenColumnUpgradeCost(
+                ShopSave
+            )
+            : GetGardenRowUpgradeCost(
+                ShopSave
+            );
+
+    if (
+        ShopSave.Currency.Dew <
+        Cost
+    ) {
+        SetShopMessage(
+            "You don't have enough Dew to add a " +
+            Direction.toLowerCase() +
+            "."
+        );
+
+        return;
+    }
+
+
+    ShopPurchasePending = true;
+
+    try {
+        ShopSave.Currency.Dew -=
+            Cost;
+
+        ShopSave.Statistics.CurrencySpent.Dew +=
+            Cost;
+
+
+        if (IsColumn) {
+            AddGardenColumn(
+                ShopSave
+            );
+        } else {
+            AddGardenRow(
+                ShopSave
+            );
+        }
+
+
+        SetShopMessage(
+            "Added a Garden " +
+            Direction.toLowerCase() +
+            " for " +
+            Cost.toLocaleString() +
+            " Dew. Garden size is now " +
+            ShopSave.Garden.Width +
+            "×" +
+            ShopSave.Garden.Height +
+            "."
+        );
+
+        RenderShop();
+
+        await SaveGame(
+            ShopSave
+        );
+    } finally {
+        ShopPurchasePending = false;
+        RenderShop();
+    }
+}
+
+
 function SetShopMessage(
     Message
 ) {

Scripts/Garden/Upgrades.js

@@ -0,0 +1,103 @@
+const GardenExpansionBaseCost = 1000;
+
+
+function GetGardenColumnUpgradeCost(
+    SaveData
+) {
+    return CalculateGardenExpansionCost(
+        SaveData.Garden.Height
+    );
+}
+
+
+function GetGardenRowUpgradeCost(
+    SaveData
+) {
+    return CalculateGardenExpansionCost(
+        SaveData.Garden.Width
+    );
+}
+
+
+function CalculateGardenExpansionCost(
+    AddedPlots
+) {
+    const PlotCount = Math.max(
+        1,
+        Math.floor(
+            Number(AddedPlots) || 1
+        )
+    );
+
+    return Math.round(
+        GardenExpansionBaseCost *
+        PlotCount *
+        (1 + PlotCount / 10)
+    );
+}
+
+
+function AddGardenColumn(
+    SaveData
+) {
+    const Garden = SaveData.Garden;
+    const OldWidth = Garden.Width;
+    const Height = Garden.Height;
+    const NewWidth = OldWidth + 1;
+
+    const NewPlots = Array(
+        NewWidth * Height
+    ).fill(null);
+
+
+    for (
+        let Y = 0;
+        Y < Height;
+        Y++
+    ) {
+        for (
+            let X = 0;
+            X < OldWidth;
+            X++
+        ) {
+            NewPlots[
+                Y * NewWidth + X
+            ] = Garden.Plots[
+                Y * OldWidth + X
+            ] ?? null;
+        }
+    }
+
+
+    Garden.Width = NewWidth;
+    Garden.Plots = NewPlots;
+
+    ResetGardenMutationCooldowns(
+        SaveData
+    );
+}
+
+
+function AddGardenRow(
+    SaveData
+) {
+    const Garden = SaveData.Garden;
+    const Width = Garden.Width;
+
+    Garden.Height++;
+
+    Garden.Plots.push(
+        ...Array(Width).fill(null)
+    );
+
+    ResetGardenMutationCooldowns(
+        SaveData
+    );
+}
+
+
+function ResetGardenMutationCooldowns(
+    SaveData
+) {
+    SaveData.MutationCooldowns = {};
+}