Added farm economics upgrades and edited Garden UI to be a bit cleaner.

Scripts/Garden/Economy.js

@@ -717,6 +717,86 @@ function GetPlantDewPerHour(
 }
 
 
+function GetGardenEconomySummary(
+    SaveData,
+    Garden = SaveData?.Garden
+) {
+    if (
+        Garden === null ||
+        Garden === undefined ||
+        !Array.isArray(
+            Garden.Plots
+        )
+    ) {
+        return null;
+    }
+
+
+    let DewInvested = 0;
+    let HarvestValue = 0;
+    let NetProfit = 0;
+    let DewPerHour = 0;
+
+
+    for (
+        const Plot
+        of Garden.Plots
+    ) {
+        if (Plot === null) {
+            continue;
+        }
+
+        const Plant =
+            Plants[Plot.Plant];
+
+        if (Plant === undefined) {
+            return null;
+        }
+
+        const Cost =
+            GetPlantShopCost(
+                SaveData,
+                Plant.Id
+            );
+
+        const Reward =
+            GetPlantHarvestReward(
+                SaveData,
+                Plant.Id
+            );
+
+        const PlantDewPerHour =
+            GetPlantDewPerHour(
+                SaveData,
+                Plant.Id
+            );
+
+        if (
+            Cost === null ||
+            Reward === null ||
+            PlantDewPerHour === null
+        ) {
+            return null;
+        }
+
+        DewInvested += Cost;
+        HarvestValue += Reward;
+        NetProfit +=
+            Reward - Cost;
+        DewPerHour +=
+            PlantDewPerHour;
+    }
+
+
+    return {
+        DewInvested,
+        HarvestValue,
+        NetProfit,
+        DewPerHour
+    };
+}
+
+
 function FormatDewPerHour(
     DewPerHour
 ) {

Scripts/Garden/Garden.js

@@ -6,6 +6,42 @@ let MutationCheckPending = false;
 
 const GardenUpdateInterval = 1000;
 
+const GardenBorderColours = [
+    "var(--Rosewater)",
+    "var(--Flamingo)",
+    "var(--Pink)",
+    "var(--Mauve)",
+    "var(--Red)",
+    "var(--Maroon)",
+    "var(--Peach)",
+    "var(--Yellow)",
+    "var(--Green)",
+    "var(--Teal)",
+    "var(--Sky)",
+    "var(--Sapphire)",
+    "var(--Blue)",
+    "var(--Lavender)"
+];
+
+
+function GetGardenBorderColour(
+    GardenIndex
+) {
+    const ColourCount =
+        GardenBorderColours.length;
+
+    const NormalizedIndex =
+        (
+            Number(GardenIndex) %
+            ColourCount +
+            ColourCount
+        ) % ColourCount;
+
+    return GardenBorderColours[
+        NormalizedIndex
+    ];
+}
+
 
 async function StartGame() {
     try {
@@ -62,6 +98,8 @@ function RenderGame() {
     RenderGarden();
     RenderNextHarvest();
     RenderGardenOverview();
+    RenderGardenEconomy();
+    RenderGardenInfoLayout();
 }
 
 
@@ -217,12 +255,66 @@ function RenderGardenSelector() {
     const GardenIndex =
         GameSave.ActiveGardenIndex;
 
+    const HasPreviousGarden =
+        GardenIndex > 0;
+
+    const HasNextGarden =
+        GardenIndex <
+        GardenCount - 1;
+
     PreviousButton.disabled =
-        GardenIndex <= 0;
+        !HasPreviousGarden;
 
     NextButton.disabled =
-        GardenIndex >=
-        GardenCount - 1;
+        !HasNextGarden;
+
+
+    PreviousButton.style.setProperty(
+        "--GardenSelectorBorderColour",
+        HasPreviousGarden
+            ? GetGardenBorderColour(
+                GardenIndex - 1
+            )
+            : "var(--Surface2)"
+    );
+
+    NameInput.style.setProperty(
+        "--GardenSelectorBorderColour",
+        GetGardenBorderColour(
+            GardenIndex
+        )
+    );
+
+    NextButton.style.setProperty(
+        "--GardenSelectorBorderColour",
+        HasNextGarden
+            ? GetGardenBorderColour(
+                GardenIndex + 1
+            )
+            : "var(--Surface2)"
+    );
+
+
+    PreviousButton.setAttribute(
+        "aria-label",
+        HasPreviousGarden
+            ? "Previous Garden: " +
+                GameSave.Gardens[
+                    GardenIndex - 1
+                ].Name
+            : "No previous Garden"
+    );
+
+    NextButton.setAttribute(
+        "aria-label",
+        HasNextGarden
+            ? "Next Garden: " +
+                GameSave.Gardens[
+                    GardenIndex + 1
+                ].Name
+            : "No next Garden"
+    );
+
 
     if (
         document.activeElement !==
@@ -555,29 +647,11 @@ function RenderGarden() {
         GameSave.Garden.Width
     );
 
-    const GardenBorderColours = [
-        "var(--Rosewater)",
-        "var(--Flamingo)",
-        "var(--Pink)",
-        "var(--Mauve)",
-        "var(--Red)",
-        "var(--Maroon)",
-        "var(--Peach)",
-        "var(--Yellow)",
-        "var(--Green)",
-        "var(--Teal)",
-        "var(--Sky)",
-        "var(--Sapphire)",
-        "var(--Blue)",
-        "var(--Lavender)"
-    ];
-
     GardenPanel.style.setProperty(
         "--GardenBorderColour",
-        GardenBorderColours[
-            GameSave.ActiveGardenIndex %
-            GardenBorderColours.length
-        ]
+        GetGardenBorderColour(
+            GameSave.ActiveGardenIndex
+        )
     );
 
     GardenGrid.replaceChildren();
@@ -1196,6 +1270,8 @@ async function GardenTick() {
     RenderGarden();
     RenderNextHarvest();
     RenderGardenOverview();
+    RenderGardenEconomy();
+    RenderGardenInfoLayout();
 
 
     if (MutationCheckPending) {
@@ -1770,6 +1846,130 @@ function FormatRemainingTime(
 }
 
 
+function RenderGardenEconomy() {
+    const Details =
+        document.getElementById(
+            "GardenEconomyDetails"
+        );
+
+    if (Details === null) {
+        return;
+    }
+
+
+    if (
+        !HasGardenEconomyUpgrade(
+            GameSave
+        )
+    ) {
+        Details.hidden = true;
+
+        return;
+    }
+
+
+    Details.hidden = false;
+
+    const Summary =
+        GetGardenEconomySummary(
+            GameSave
+        );
+
+    const Values = {
+        GardenDewInvested:
+            Summary === null
+                ? "Unavailable"
+                : Summary.DewInvested
+                    .toLocaleString(),
+
+        GardenHarvestValue:
+            Summary === null
+                ? "Unavailable"
+                : Summary.HarvestValue
+                    .toLocaleString(),
+
+        GardenNetProfit:
+            Summary === null
+                ? "Unavailable"
+                : Summary.NetProfit
+                    .toLocaleString(),
+
+        GardenDewPerHour:
+            Summary === null
+                ? "Unavailable"
+                : FormatDewPerHour(
+                    Summary.DewPerHour
+                )
+    };
+
+
+    for (
+        const [ElementId, Value]
+        of Object.entries(Values)
+    ) {
+        const Element =
+            document.getElementById(
+                ElementId
+            );
+
+        if (Element !== null) {
+            Element.textContent =
+                Value;
+        }
+    }
+}
+
+
+function RenderGardenInfoLayout() {
+    const DetailRow =
+        document.getElementById(
+            "GardenInfoDetailRow"
+        );
+
+    const OverviewSection =
+        document.getElementById(
+            "GardenOverviewSection"
+        );
+
+    const EconomySection =
+        document.getElementById(
+            "GardenEconomySection"
+        );
+
+    if (
+        DetailRow === null ||
+        OverviewSection === null ||
+        EconomySection === null
+    ) {
+        return;
+    }
+
+
+    const HasOverview =
+        HasGardenOverviewUpgrade(
+            GameSave
+        );
+
+    const HasEconomy =
+        HasGardenEconomyUpgrade(
+            GameSave
+        );
+
+    DetailRow.hidden =
+        !HasOverview &&
+        !HasEconomy;
+
+    OverviewSection.classList.toggle(
+        "GardenInfoSectionEmpty",
+        !HasOverview
+    );
+
+    EconomySection.classList.toggle(
+        "GardenInfoSectionEmpty",
+        !HasEconomy
+    );
+}
+
 document.addEventListener(
     "DOMContentLoaded",
     StartGame

Scripts/Garden/Save.js

@@ -420,6 +420,7 @@ function CreateNewSave() {
             PlotSize: 0,
             PlantInformation: false,
             GardenOverview: false,
+            GardenEconomy: false,
             MutationHints: false
         },
 
@@ -610,6 +611,10 @@ function NormalizeSaveData(
         SaveData.Upgrades.GardenOverview ===
         true;
 
+    SaveData.Upgrades.GardenEconomy =
+        SaveData.Upgrades.GardenEconomy ===
+        true;
+
     SaveData.Upgrades.MutationHints =
         SaveData.Upgrades.MutationHints ===
         true;

Scripts/Garden/Shop.js

@@ -127,6 +127,7 @@ function RenderGardenUpgrades() {
         CreateNewGardenCard(),
         CreatePlantInformationUpgradeCard(),
         CreateGardenOverviewUpgradeCard(),
+        CreateGardenEconomyUpgradeCard(),
         CreateMutationHintsUpgradeCard()
     );
 }
@@ -619,6 +620,120 @@ function CreateGardenOverviewUpgradeCard() {
 }
 
 
+function CreateGardenEconomyUpgradeCard() {
+    const Cost =
+        GetGardenEconomyUpgradeCost();
+
+    const IsOwned =
+        HasGardenEconomyUpgrade(
+            ShopSave
+        );
+
+
+    const Card =
+        document.createElement(
+            "article"
+        );
+
+    Card.className =
+        "Panel ShopItem";
+
+
+    const Header =
+        document.createElement(
+            "div"
+        );
+
+    Header.className =
+        "ShopItemHeader";
+
+
+    const Name =
+        document.createElement(
+            "h3"
+        );
+
+    Name.textContent =
+        "Garden economy";
+
+    Header.appendChild(Name);
+
+
+    const Description =
+        document.createElement(
+            "p"
+        );
+
+    Description.textContent =
+        "Add live economy information for the active Garden: Dew invested, total harvest value, net profit after replanting, and Farm DPH.";
+
+
+    const Details =
+        document.createElement(
+            "div"
+        );
+
+    Details.className =
+        "ShopItemDetails";
+
+    Details.append(
+        CreateShopStat(
+            "Garden economics",
+            IsOwned
+                ? "Unlocked"
+                : "Locked"
+        ),
+        CreateShopStat(
+            "Scope",
+            "Active Garden"
+        )
+    );
+
+
+    const BuyButton =
+        document.createElement(
+            "button"
+        );
+
+    BuyButton.className =
+        "ActionButton ShopBuyButton";
+
+    BuyButton.type = "button";
+
+    if (IsOwned) {
+        BuyButton.textContent =
+            "Purchased";
+
+        BuyButton.disabled = true;
+    } else {
+        BuyButton.textContent =
+            "Buy - " +
+            Cost.toLocaleString() +
+            " Dew";
+
+        BuyButton.disabled =
+            ShopSave.Currency.Dew < Cost ||
+            ShopPurchasePending;
+
+        BuyButton.addEventListener(
+            "click",
+            BuyGardenEconomyUpgrade
+        );
+    }
+
+
+    Card.append(
+        Header,
+        Description,
+        Details,
+        BuyButton
+    );
+
+
+    return Card;
+}
+
+
 function CreateMutationHintsUpgradeCard() {
     const Cost =
         GetMutationHintsUpgradeCost();
@@ -1463,6 +1578,64 @@ async function BuyGardenOverviewUpgrade() {
 }
 
 
+async function BuyGardenEconomyUpgrade() {
+    if (
+        ShopPurchasePending ||
+        HasGardenEconomyUpgrade(
+            ShopSave
+        )
+    ) {
+        return;
+    }
+
+
+    const Cost =
+        GetGardenEconomyUpgradeCost();
+
+    if (
+        ShopSave.Currency.Dew <
+        Cost
+    ) {
+        SetShopMessage(
+            "You don't have enough Dew for Garden economy."
+        );
+
+        return;
+    }
+
+
+    ShopPurchasePending = true;
+
+    try {
+        ShopSave.Currency.Dew -=
+            Cost;
+
+        ShopSave.Statistics.CurrencySpent.Dew +=
+            Cost;
+
+        UnlockGardenEconomy(
+            ShopSave
+        );
+
+
+        SetShopMessage(
+            "Bought Garden economy for " +
+            Cost.toLocaleString() +
+            " Dew. Economy information is now visible on the Garden page."
+        );
+
+        RenderShop();
+
+        await SaveGame(
+            ShopSave
+        );
+    } finally {
+        ShopPurchasePending = false;
+        RenderShop();
+    }
+}
+
+
 async function BuyMutationHintsUpgrade() {
     if (
         ShopPurchasePending ||

Scripts/Garden/Upgrades.js

@@ -1,6 +1,7 @@
 const GardenExpansionBaseCost = 1000;
 const PlantInformationUpgradeCost = 500;
 const GardenOverviewUpgradeCost = 1000;
+const GardenEconomyUpgradeCost = 1000;
 const MutationHintsUpgradeCost = 1500;
 const NewGardenBaseCost = 15000;
 const NewGardenCostMultiplier = 1.5;
@@ -240,6 +241,32 @@ function UnlockGardenOverview(
 }
 
 
+function HasGardenEconomyUpgrade(
+    SaveData
+) {
+    return (
+        SaveData
+            ?.Upgrades
+            ?.GardenEconomy ===
+        true
+    );
+}
+
+
+function GetGardenEconomyUpgradeCost() {
+    return GardenEconomyUpgradeCost;
+}
+
+
+function UnlockGardenEconomy(
+    SaveData
+) {
+    SaveData.Upgrades ??= {};
+    SaveData.Upgrades.GardenEconomy =
+        true;
+}
+
+
 function HasMutationHintsUpgrade(
     SaveData
 ) {