Added search and sort.

Scripts/Garden/Shop.js

@@ -1,5 +1,7 @@
 let ShopSave;
 let ShopPurchasePending = false;
+let ShopSeedSearchQuery = "";
+let ShopSeedSortMode = "IdAsc";
 
 
 async function StartShop() {
@@ -22,6 +24,7 @@ async function StartShop() {
     ShopSave = await LoadGame();
 
     BindShopSectionToggles();
+    BindShopSeedControls();
     RenderShop();
 }
 
@@ -84,6 +87,51 @@ function BindShopSectionToggle(
 }
 
 
+function BindShopSeedControls() {
+    const SearchInput =
+        document.getElementById(
+            "ShopSeedSearchInput"
+        );
+
+    const SortSelect =
+        document.getElementById(
+            "ShopSeedSortSelect"
+        );
+
+
+    if (SearchInput !== null) {
+        SearchInput.value =
+            ShopSeedSearchQuery;
+
+        SearchInput.addEventListener(
+            "input",
+            () => {
+                ShopSeedSearchQuery =
+                    SearchInput.value;
+
+                RenderShopSeeds();
+            }
+        );
+    }
+
+
+    if (SortSelect !== null) {
+        SortSelect.value =
+            ShopSeedSortMode;
+
+        SortSelect.addEventListener(
+            "change",
+            () => {
+                ShopSeedSortMode =
+                    SortSelect.value;
+
+                RenderShopSeeds();
+            }
+        );
+    }
+}
+
+
 function RenderShop() {
     RenderShopCurrency();
     RenderShopSeeds();
@@ -124,29 +172,41 @@ function RenderShopSeeds() {
                         ShopSave,
                         Plant
                     )
+            );
+
+    const SearchQuery =
+        ShopSeedSearchQuery
+            .trim()
+            .toLocaleLowerCase();
+
+    const VisiblePlants =
+        AvailablePlants
+            .filter(
+                Plant =>
+                    DoesShopPlantMatchSearch(
+                        Plant,
+                        SearchQuery
+                    )
             )
             .sort(
-                (A, B) =>
-                    A.Id - B.Id
+                CompareShopPlants
             );
 
 
-    if (
-        AvailablePlants.length === 0
-    ) {
-        const EmptyMessage =
-            document.createElement(
-                "p"
-            );
+    if (AvailablePlants.length === 0) {
+        AppendShopSeedEmptyMessage(
+            SeedList,
+            "No seeds are available yet."
+        );
 
-        EmptyMessage.className =
-            "ShopEmpty";
+        return;
+    }
 
-        EmptyMessage.textContent =
-            "No seeds are available yet.";
 
-        SeedList.appendChild(
-            EmptyMessage
+    if (VisiblePlants.length === 0) {
+        AppendShopSeedEmptyMessage(
+            SeedList,
+            "No seeds match your search."
         );
 
         return;
@@ -155,7 +215,7 @@ function RenderShopSeeds() {
 
     for (
         const Plant
-        of AvailablePlants
+        of VisiblePlants
     ) {
         SeedList.appendChild(
             CreateShopSeedCard(
@@ -166,6 +226,202 @@ function RenderShopSeeds() {
 }
 
 
+function AppendShopSeedEmptyMessage(
+    SeedList,
+    Message
+) {
+    const EmptyMessage =
+        document.createElement(
+            "p"
+        );
+
+    EmptyMessage.className =
+        "ShopEmpty";
+
+    EmptyMessage.textContent =
+        Message;
+
+    SeedList.appendChild(
+        EmptyMessage
+    );
+}
+
+
+function DoesShopPlantMatchSearch(
+    Plant,
+    SearchQuery
+) {
+    if (SearchQuery.length === 0) {
+        return true;
+    }
+
+    const SearchParts = [
+        Plant.Id,
+        Plant.Name,
+        Plant.Description,
+        ...(Array.isArray(Plant.Tags)
+            ? Plant.Tags
+            : [])
+    ];
+
+    return SearchParts
+        .filter(
+            Value =>
+                Value !== null &&
+                Value !== undefined
+        )
+        .join(" ")
+        .toLocaleLowerCase()
+        .includes(
+            SearchQuery
+        );
+}
+
+
+function CompareShopPlants(
+    A,
+    B
+) {
+    switch (ShopSeedSortMode) {
+        case "NameAsc":
+            return CompareShopText(
+                A.Name,
+                B.Name
+            ) || A.Id - B.Id;
+
+        case "PriceAsc":
+            return CompareShopNumbers(
+                GetPlantShopCost(ShopSave, A.Id),
+                GetPlantShopCost(ShopSave, B.Id),
+                1
+            ) || A.Id - B.Id;
+
+        case "PriceDesc":
+            return CompareShopNumbers(
+                GetPlantShopCost(ShopSave, A.Id),
+                GetPlantShopCost(ShopSave, B.Id),
+                -1
+            ) || A.Id - B.Id;
+
+        case "GrowthAsc":
+            return CompareShopNumbers(
+                A.GrowthTime,
+                B.GrowthTime,
+                1
+            ) || A.Id - B.Id;
+
+        case "GrowthDesc":
+            return CompareShopNumbers(
+                A.GrowthTime,
+                B.GrowthTime,
+                -1
+            ) || A.Id - B.Id;
+
+        case "RewardAsc":
+            return CompareShopNumbers(
+                GetPlantHarvestReward(ShopSave, A.Id),
+                GetPlantHarvestReward(ShopSave, B.Id),
+                1
+            ) || A.Id - B.Id;
+
+        case "RewardDesc":
+            return CompareShopNumbers(
+                GetPlantHarvestReward(ShopSave, A.Id),
+                GetPlantHarvestReward(ShopSave, B.Id),
+                -1
+            ) || A.Id - B.Id;
+
+        case "DphAsc":
+            return CompareShopNumbers(
+                GetPlantDewPerHour(ShopSave, A.Id),
+                GetPlantDewPerHour(ShopSave, B.Id),
+                1
+            ) || A.Id - B.Id;
+
+        case "DphDesc":
+            return CompareShopNumbers(
+                GetPlantDewPerHour(ShopSave, A.Id),
+                GetPlantDewPerHour(ShopSave, B.Id),
+                -1
+            ) || A.Id - B.Id;
+
+        case "InventoryAsc":
+            return CompareShopNumbers(
+                GetSeedCount(ShopSave, A.Id),
+                GetSeedCount(ShopSave, B.Id),
+                1
+            ) || A.Id - B.Id;
+
+        case "InventoryDesc":
+            return CompareShopNumbers(
+                GetSeedCount(ShopSave, A.Id),
+                GetSeedCount(ShopSave, B.Id),
+                -1
+            ) || A.Id - B.Id;
+
+        case "IdAsc":
+        default:
+            return A.Id - B.Id;
+    }
+}
+
+
+function CompareShopText(
+    A,
+    B
+) {
+    return String(A ?? "")
+        .localeCompare(
+            String(B ?? ""),
+            undefined,
+            {sensitivity: "base"}
+        );
+}
+
+
+function CompareShopNumbers(
+    A,
+    B,
+    Direction
+) {
+    const MissingA =
+        A === null ||
+        A === undefined ||
+        A === "";
+
+    const MissingB =
+        B === null ||
+        B === undefined ||
+        B === "";
+
+    const NumberA = Number(A);
+    const NumberB = Number(B);
+
+    const ValidA =
+        !MissingA &&
+        Number.isFinite(NumberA);
+
+    const ValidB =
+        !MissingB &&
+        Number.isFinite(NumberB);
+
+    if (!ValidA && !ValidB) {
+        return 0;
+    }
+
+    if (!ValidA) {
+        return 1;
+    }
+
+    if (!ValidB) {
+        return -1;
+    }
+
+    return (NumberA - NumberB) *
+        Direction;
+}
+
+
 function RenderGardenUpgrades() {
     const UpgradeList =
         document.getElementById(