Added mutation engine (so stuff actually mutates), and added a shovel

(to dig up plants).

Signed-off-by: Sarahtonin <[email protected]>

Pages/Garden.php

@@ -56,6 +56,20 @@ $SubNavbarCurrent = "Garden";
                         id="SeedList"
                         class="SeedList"
                     ></div>
+
+                    <h3 class="GardenToolHeading">
+                        Tools
+                    </h3>
+
+                    <div class="ToolList">
+                        <button
+                            id="ShovelToolButton"
+                            class="ToolButton ToolButtonShovel"
+                            type="button"
+                        >
+                            Shovel
+                        </button>
+                    </div>
                 </section>
             </div>
 
@@ -134,6 +148,7 @@ $SubNavbarCurrent = "Garden";
         <script src="/Scripts/Garden/Mutations.js"></script>
         <script src="/Scripts/Garden/Save.js"></script>
         <script src="/Scripts/Garden/Economy.js"></script>
+        <script src="/Scripts/Garden/MutationEngine.js"></script>
         <script src="/Scripts/Garden/Users.js"></script>
         <script src="/Scripts/Garden/Leaderboard.js"></script>
         <script src="/Scripts/Garden/Garden.js"></script>

Scripts/Garden/Economy.js

@@ -356,7 +356,8 @@ function GetMutationIngredientCost(
         ) {
             if (
                 Matcher === null ||
-                Matcher === "Empty"
+                Matcher === "Empty" ||
+                Matcher === "Any"
             ) {
                 continue;
             }

Scripts/Garden/Garden.js

@@ -1,5 +1,8 @@
 let GameSave;
 let SelectedSeedId = null;
+let SelectedGardenTool = "Seed";
+
+let MutationCheckPending = false;
 
 const GardenUpdateInterval = 1000;
 
@@ -7,14 +10,24 @@ const GardenUpdateInterval = 1000;
 async function StartGame() {
     GameSave = await LoadGame();
 
+    BindGardenTools();
     EnsureSelectedSeed();
+
+    const InitialMutationResult =
+        CheckGardenMutations(
+            GameSave
+        );
+
     RenderGame();
 
+    if (InitialMutationResult.Attempted) {
+        await SaveGame(
+            GameSave
+        );
+    }
+
     setInterval(
-        () => {
-            RenderGarden();
-            RenderNextHarvest();
-        },
+        GardenTick,
         GardenUpdateInterval
     );
 
@@ -27,11 +40,62 @@ function RenderGame() {
     EnsureSelectedSeed();
     RenderCurrency();
     RenderSeeds();
+    RenderTools();
     RenderGarden();
     RenderNextHarvest();
 }
 
 
+function BindGardenTools() {
+    const ShovelButton =
+        document.getElementById(
+            "ShovelToolButton"
+        );
+
+    if (ShovelButton === null) {
+        return;
+    }
+
+    ShovelButton.addEventListener(
+        "click",
+        () => {
+            SelectedGardenTool =
+                "Shovel";
+
+            RenderSeeds();
+            RenderTools();
+            RenderGarden();
+        }
+    );
+}
+
+
+function RenderTools() {
+    const ShovelButton =
+        document.getElementById(
+            "ShovelToolButton"
+        );
+
+    if (ShovelButton === null) {
+        return;
+    }
+
+    if (
+        SelectedGardenTool ===
+        "Shovel"
+    ) {
+        ShovelButton.setAttribute(
+            "aria-current",
+            "true"
+        );
+    } else {
+        ShovelButton.removeAttribute(
+            "aria-current"
+        );
+    }
+}
+
+
 function RenderCurrency() {
     const DewAmount =
         document.getElementById(
@@ -178,8 +242,10 @@ function RenderSeeds() {
             );
 
         if (
+            SelectedGardenTool ===
+                "Seed" &&
             PlantId ===
-            SelectedSeedId
+                SelectedSeedId
         ) {
             Button.setAttribute(
                 "aria-current",
@@ -190,10 +256,15 @@ function RenderSeeds() {
         Button.addEventListener(
             "click",
             () => {
+                SelectedGardenTool =
+                    "Seed";
+
                 SelectedSeedId =
                     PlantId;
 
                 RenderSeeds();
+                RenderTools();
+                RenderGarden();
 
                 SetGardenMessage(
                     "Selected " +
@@ -262,14 +333,19 @@ function CreatePlotElement(
         Button.title =
             "Empty plot";
 
-        Button.addEventListener(
-            "click",
-            () => {
-                PlantSeed(
-                    PlotIndex
-                );
-            }
-        );
+        if (
+            SelectedGardenTool ===
+            "Seed"
+        ) {
+            Button.addEventListener(
+                "click",
+                () => {
+                    PlantSeed(
+                        PlotIndex
+                    );
+                }
+            );
+        }
 
         return Button;
     }
@@ -327,6 +403,31 @@ function CreatePlotElement(
     }
 
 
+    if (
+        SelectedGardenTool ===
+        "Shovel"
+    ) {
+        Button.classList.add(
+            "GardenPlotRemove"
+        );
+
+        Button.title =
+            "Remove " +
+            Plant.Name;
+
+        Button.addEventListener(
+            "click",
+            () => {
+                RemovePlant(
+                    PlotIndex
+                );
+            }
+        );
+
+        return Button;
+    }
+
+
     if (
         IsPlantMature(
             Plot,
@@ -437,6 +538,10 @@ async function PlantSeed(
         "."
     );
 
+    CheckGardenMutations(
+        GameSave
+    );
+
     RenderGame();
 
     await SaveGame(
@@ -506,6 +611,10 @@ async function HarvestPlant(
         " Dew."
     );
 
+    CheckGardenMutations(
+        GameSave
+    );
+
     RenderGame();
 
     await SaveGame(
@@ -514,6 +623,68 @@ async function HarvestPlant(
 }
 
 
+async function RemovePlant(
+    PlotIndex
+) {
+    if (
+        GameSave.Garden.Plots[
+            PlotIndex
+        ] === null
+    ) {
+        return;
+    }
+
+
+    GameSave.Garden.Plots[
+        PlotIndex
+    ] = null;
+
+
+    CheckGardenMutations(
+        GameSave
+    );
+
+    RenderGame();
+
+    await SaveGame(
+        GameSave
+    );
+}
+
+
+async function GardenTick() {
+    RenderGarden();
+    RenderNextHarvest();
+
+
+    if (MutationCheckPending) {
+        return;
+    }
+
+
+    MutationCheckPending = true;
+
+
+    try {
+        const MutationResult =
+            CheckGardenMutations(
+                GameSave
+            );
+
+
+        if (MutationResult.Attempted) {
+            RenderGame();
+
+            await SaveGame(
+                GameSave
+            );
+        }
+    } finally {
+        MutationCheckPending = false;
+    }
+}
+
+
 function GiveReward(
     Reward
 ) {

Scripts/Garden/Mutations.js

@@ -6,6 +6,9 @@ const MutationSets = {
         Description:
             "A mutation that seems to corrupt roses.",
 
+        Priority: 10,
+        Rotation: "Any",
+
         Chance: 0.1,
         Cooldown: 120000,
 
@@ -59,6 +62,9 @@ const MutationSets = {
         Description:
             "A colourful mutation that makes a purple rose.",
 
+        Priority: 20,
+        Rotation: "Any",
+
         Chance: 1.0,
         Cooldown: 100000,
 

Styles/Style.css

@@ -501,6 +501,66 @@ select {
     border-color: var(--Green);
 }
 
+.GardenToolHeading {
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+
+    color: var(--Peach);
+}
+
+.ToolList {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.ToolButton {
+    width: 100%;
+    padding: 0.6rem;
+
+    cursor: pointer;
+
+    color: var(--Text);
+    background-color: var(--Surface0);
+
+    border: 3px solid var(--Surface2);
+    border-radius: 0;
+
+    box-shadow:
+        3px 3px 0
+        var(--Crust);
+
+    appearance: none;
+}
+
+.ToolButton:hover {
+    color: var(--Sky);
+    background-color: var(--Surface1);
+
+    border-color: var(--Sky);
+
+    transform:
+        translate(
+            1px,
+            1px
+        );
+
+    box-shadow:
+        2px 2px 0
+        var(--Crust);
+}
+
+.ToolButtonShovel[aria-current="true"] {
+    color: var(--Red);
+    background-color: var(--Surface1);
+
+    border-color: var(--Red);
+}
+
+.GardenPlotRemove:hover {
+    border-color: var(--Red);
+}
+
 #GardenMessage {
     margin-top: 1rem;
     margin-bottom: 0;
@@ -1016,12 +1076,14 @@ select {
         grid-row: 1;
     }
 
-    .SeedList {
+    .SeedList,
+    .ToolList {
         flex-direction: row;
         flex-wrap: wrap;
     }
 
-    .SeedButton {
+    .SeedButton,
+    .ToolButton {
         width: auto;
     }