BIG heap of bugfixes. Deselecting tools, profile colour picker, player

name colour contrast, mutation pricing (not really a bug, but still an
issue).

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

Scripts/Garden/Economy.js

@@ -1,4 +1,4 @@
-const MutationTimeFeePerHour = 10;
+const MutationTimeFeePerMinute = 15;
 
 const PlantKeysById = new Map();
 const PlantsById = new Map();
@@ -553,8 +553,8 @@ function GetMutationTimeFee(
 
     return Math.ceil(
         MutationTime /
-        3600000 *
+        60000 *
-        MutationTimeFeePerHour
+        MutationTimeFeePerMinute
     );
 }
 

Scripts/Garden/Garden.js

@@ -59,8 +59,16 @@ function BindGardenTools() {
     ShovelButton.addEventListener(
         "click",
         () => {
-            SelectedGardenTool =
+            if (
-                "Shovel";
+                SelectedGardenTool ===
+                "Shovel"
+            ) {
+                SelectedGardenTool =
+                    null;
+            } else {
+                SelectedGardenTool =
+                    "Shovel";
+            }
 
             RenderSeeds();
             RenderTools();
@@ -142,6 +150,15 @@ function EnsureSelectedSeed() {
     if (SeedIds.length > 0) {
         SelectedSeedId =
             SeedIds[0];
+
+        return;
+    }
+
+    if (
+        SelectedGardenTool ===
+        "Seed"
+    ) {
+        SelectedGardenTool = null;
     }
 }
 

Scripts/Garden/Leaderboard.js

@@ -141,14 +141,12 @@ async function RenderLeaderboard() {
             Username.textContent =
                 Player.Username;
 
-            if (
+            ApplyPlayerColour(
-                Player.Colour !== null
+                Username,
-            ) {
+                Player.Colour
-                Username.style.color =
+            );
-                    Player.Colour;
-            }
 
-          Dew.textContent =
+            Dew.textContent =
                 Player.Dew.toLocaleString();
 
 

Scripts/Garden/Profile.js

@@ -56,8 +56,10 @@ async function StartProfile() {
     ColourInput.addEventListener(
         "input",
         () => {
-            ColourPreview.style.color =
+            ApplyPlayerColour(
-                ColourInput.value;
+                ColourPreview,
+                ColourInput.value
+            );
         }
     );
 
@@ -115,15 +117,24 @@ async function RenderProfilePlayer() {
         }
 
 
-        if (
+        const ProfileColour =
-            Profile.Colour !== null
+            IsValidPlayerColour(
-        ) {
+                Profile.Colour
-            ColourInput.value =
+            )
-                Profile.Colour;
+                ? Profile.Colour
+                : DefaultPlayerColour;
 
-            ColourPreview.style.color =
+        ColourInput.value =
-                Profile.Colour;
+            ProfileColour;
-        }
+
+        ApplyPlayerColour(
+            ColourPreview,
+            IsValidPlayerColour(
+                Profile.Colour
+            )
+                ? Profile.Colour
+                : null
+        );
 
 
         UsernameMessage.textContent =
@@ -244,8 +255,14 @@ async function SubmitProfileColour(
         }
 
 
-        Preview.style.color =
+        ApplyPlayerColour(
-            Result.Colour;
+            Preview,
+            IsValidPlayerColour(
+                Result.Colour
+            )
+                ? Result.Colour
+                : Input.value
+        );
 
         Message.textContent =
             "Colour saved.";
@@ -294,10 +311,11 @@ async function ResetProfileColour() {
 
 
         Input.value =
-            "#cdd6f4";
+            DefaultPlayerColour;
 
-        Preview.style.removeProperty(
+        ApplyPlayerColour(
-            "color"
+            Preview,
+            null
         );
 
         Message.textContent =

Scripts/Garden/Users.js

@@ -1,3 +1,89 @@
+const DefaultPlayerColour = "#cdd6f4";
+
+
+function IsValidPlayerColour(
+    Colour
+) {
+    return (
+        typeof Colour === "string" &&
+        /^#[0-9A-Fa-f]{6}$/.test(
+            Colour
+        )
+    );
+}
+
+
+function GetPlayerColourOutline(
+    Colour
+) {
+    const Red = parseInt(
+        Colour.slice(1, 3),
+        16
+    );
+
+    const Green = parseInt(
+        Colour.slice(3, 5),
+        16
+    );
+
+    const Blue = parseInt(
+        Colour.slice(5, 7),
+        16
+    );
+
+    const Brightness =
+        (
+            Red * 299 +
+            Green * 587 +
+            Blue * 114
+        ) / 1000;
+
+    return Brightness < 150
+        ? "var(--Text)"
+        : "var(--Crust)";
+}
+
+
+function ApplyPlayerColour(
+    Element,
+    Colour
+) {
+    Element.style.removeProperty(
+        "color"
+    );
+
+    Element.style.removeProperty(
+        "text-shadow"
+    );
+
+    if (
+        !IsValidPlayerColour(
+            Colour
+        )
+    ) {
+        return;
+    }
+
+    const Outline =
+        GetPlayerColourOutline(
+            Colour
+        );
+
+    Element.style.color =
+        Colour;
+
+    Element.style.textShadow =
+        `-1px -1px 0 ${Outline}, ` +
+        `0 -1px 0 ${Outline}, ` +
+        `1px -1px 0 ${Outline}, ` +
+        `-1px 0 0 ${Outline}, ` +
+        `1px 0 0 ${Outline}, ` +
+        `-1px 1px 0 ${Outline}, ` +
+        `0 1px 0 ${Outline}, ` +
+        `1px 1px 0 ${Outline}`;
+}
+
+
 async function GetProfile() {
     const Response = await fetch(
         ApiUrl + "/Profile.php",
@@ -89,14 +175,12 @@ async function RenderUser() {
         UsernameDisplay.textContent =
             Profile.Username;
 
-        if (
+        ApplyPlayerColour(
-            Profile.Colour !== null
+            UsernameDisplay,
-        ) {
+            Profile.Colour
-            UsernameDisplay.style.color =
+        );
-                Profile.Colour;
-        }
 
-      UsernameForm.hidden = true;
+        UsernameForm.hidden = true;
 
         return;
     }
@@ -104,6 +188,11 @@ async function RenderUser() {
     UsernameDisplay.textContent =
         "Unnamed";
 
+    ApplyPlayerColour(
+        UsernameDisplay,
+        null
+    );
+
     UsernameForm.hidden = false;
 }
 

Styles/Style.css

@@ -7,22 +7,22 @@
 
 :root,
 :root[data-palette="CatppuccinMocha"] {
-    --Rosewater: #f5e0dc;
+    --Rosewater:#f5e0dc;
     --Flamingo: #f2cdcd;
-    --Pink: #f5c2e7;
+    --Pink:     #f5c2e7;
-    --Mauve: #cba6f7;
+    --Mauve:    #cba6f7;
-    --Red: #f38ba8;
+    --Red:      #f38ba8;
-    --Maroon: #eba0ac;
+    --Maroon:   #eba0ac;
-    --Peach: #fab387;
+    --Peach:    #fab387;
-    --Yellow: #f9e2af;
+    --Yellow:   #f9e2af;
-    --Green: #a6e3a1;
+    --Green:    #a6e3a1;
-    --Teal: #94e2d5;
+    --Teal:     #94e2d5;
-    --Sky: #89dceb;
+    --Sky:      #89dceb;
     --Sapphire: #74c7ec;
-    --Blue: #89b4fa;
+    --Blue:     #89b4fa;
     --Lavender: #b4befe;
 
-    --Text: #cdd6f4;
+    --Text:     #cdd6f4;
     --Subtext1: #bac2de;
     --Subtext0: #a6adc8;
     --Overlay2: #9399b2;
@@ -31,9 +31,9 @@
     --Surface2: #585b70;
     --Surface1: #45475a;
     --Surface0: #313244;
-    --Base: #1e1e2e;
+    --Base:     #1e1e2e;
-    --Mantle: #181825;
+    --Mantle:   #181825;
-    --Crust: #11111b;
+    --Crust:    #11111b;
 }
 
 html {
@@ -773,18 +773,15 @@ select {
     color: var(--Green);
 }
 
-.LeaderboardRank1 .LeaderboardRank,
+.LeaderboardRank1 .LeaderboardRank {
-.LeaderboardRank1 .LeaderboardUsername {
     color: var(--Yellow);
 }
 
-.LeaderboardRank2 .LeaderboardRank,
+.LeaderboardRank2 .LeaderboardRank {
-.LeaderboardRank2 .LeaderboardUsername {
     color: var(--Text);
 }
 
-.LeaderboardRank3 .LeaderboardRank,
+.LeaderboardRank3 .LeaderboardRank {
-.LeaderboardRank3 .LeaderboardUsername {
     color: var(--Peach);
 }