Added player colour choosing. I HOPE.

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

Pages/Profile.php

@@ -66,8 +66,47 @@ $SubNavbarCurrent = "Player";
                         class="ProfileMessage"
                     ></p>
                 </form>
-            </section>
 
+                <form id="ProfileColourForm">
+                    <label
+                        for="ProfileColourInput"
+                    >
+                        Colour
+                    </label>
+
+                    <div class="ProfileFormRow">
+                        <input
+                            id="ProfileColourInput"
+                            class="ProfileColourInput"
+                            type="color"
+                            value="#cdd6f4"
+                        >
+
+                        <strong
+                            id="ProfileColourPreview"
+                            class="ProfileColourPreview"
+                        >
+                            Preview
+                        </strong>
+
+                        <button type="submit">
+                            Save colour
+                        </button>
+
+                        <button
+                            id="ResetProfileColourButton"
+                            type="button"
+                        >
+                            Reset
+                        </button>
+                    </div>
+
+                    <p
+                        id="ProfileColourMessage"
+                        class="ProfileMessage"
+                    ></p>
+                </form>
+            </section>
 
             <section
                 id="Statistics"

Scripts/Garden/Leaderboard.js

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

Scripts/Garden/Profile.js

@@ -2,7 +2,7 @@ let ProfileSave = null;
 
 
 async function StartProfile() {
-    await RenderProfileUsername();
+    await RenderProfilePlayer();
 
     try {
         ProfileSave =
@@ -18,7 +18,6 @@ async function StartProfile() {
         RenderProfileStatisticsError();
     }
 
-
     const UsernameForm =
         document.getElementById(
             "ProfileUsernameForm"
@@ -28,16 +27,64 @@ async function StartProfile() {
         "submit",
         SubmitProfileUsername
     );
+
+    const ColourForm =
+        document.getElementById(
+            "ProfileColourForm"
+        );
+
+    const ColourInput =
+        document.getElementById(
+            "ProfileColourInput"
+        );
+
+    const ColourPreview =
+        document.getElementById(
+            "ProfileColourPreview"
+        );
+
+    const ResetColourButton =
+        document.getElementById(
+            "ResetProfileColourButton"
+        );
+
+    ColourForm.addEventListener(
+        "submit",
+        SubmitProfileColour
+    );
+
+    ColourInput.addEventListener(
+        "input",
+        () => {
+            ColourPreview.style.color =
+                ColourInput.value;
+        }
+    );
+
+    ResetColourButton.addEventListener(
+        "click",
+        ResetProfileColour
+    );
 }
 
 
-async function RenderProfileUsername() {
-    const Input =
+async function RenderProfilePlayer() {
+    const UsernameInput =
         document.getElementById(
             "ProfileUsernameInput"
         );
 
-    const Message =
+    const ColourInput =
+        document.getElementById(
+            "ProfileColourInput"
+        );
+
+    const ColourPreview =
+        document.getElementById(
+            "ProfileColourPreview"
+        );
+
+    const UsernameMessage =
         document.getElementById(
             "ProfileUsernameMessage"
         );
@@ -53,22 +100,42 @@ async function RenderProfileUsername() {
             );
         }
 
+
         if (
             Profile.Username !== null
         ) {
-            Input.value =
+            UsernameInput.value =
                 Profile.Username;
+
+            ColourPreview.textContent =
+                Profile.Username;
+        } else {
+            ColourPreview.textContent =
+                "Preview";
         }
 
-        Message.textContent = "";
+
+        if (
+            Profile.Colour !== null
+        ) {
+            ColourInput.value =
+                Profile.Colour;
+
+            ColourPreview.style.color =
+                Profile.Colour;
+        }
+
+
+        UsernameMessage.textContent =
+            "";
     } catch (Error) {
         console.error(
-            "Couldn't load username:",
+            "Couldn't load profile:",
             Error
         );
 
-        Message.textContent =
-            "Couldn't load username.";
+        UsernameMessage.textContent =
+            "Couldn't load profile.";
     }
 }
 
@@ -137,6 +204,114 @@ async function SubmitProfileUsername(
     }
 }
 
+async function SubmitProfileColour(
+    Event
+) {
+    Event.preventDefault();
+
+    const Input =
+        document.getElementById(
+            "ProfileColourInput"
+        );
+
+    const Preview =
+        document.getElementById(
+            "ProfileColourPreview"
+        );
+
+    const Message =
+        document.getElementById(
+            "ProfileColourMessage"
+        );
+
+
+    Message.textContent =
+        "Saving...";
+
+
+    try {
+        const Result =
+            await SetColour(
+                Input.value
+            );
+
+        if (!Result.Success) {
+            Message.textContent =
+                Result.Error ??
+                "Couldn't save colour.";
+
+            return;
+        }
+
+
+        Preview.style.color =
+            Result.Colour;
+
+        Message.textContent =
+            "Colour saved.";
+    } catch (Error) {
+        console.error(
+            "Couldn't save colour:",
+            Error
+        );
+
+        Message.textContent =
+            "Couldn't save colour.";
+    }
+}
+
+
+async function ResetProfileColour() {
+    const Input =
+        document.getElementById(
+            "ProfileColourInput"
+        );
+
+    const Preview =
+        document.getElementById(
+            "ProfileColourPreview"
+        );
+
+    const Message =
+        document.getElementById(
+            "ProfileColourMessage"
+        );
+
+
+    try {
+        const Result =
+            await SetColour(
+                null
+            );
+
+        if (!Result.Success) {
+            Message.textContent =
+                Result.Error ??
+                "Couldn't reset colour.";
+
+            return;
+        }
+
+
+        Input.value =
+            "#cdd6f4";
+
+        Preview.style.removeProperty(
+            "color"
+        );
+
+        Message.textContent =
+            "Colour reset.";
+    } catch (Error) {
+        console.error(
+            "Couldn't reset colour:",
+            Error
+        );
+
+        Message.textContent =
+            "Couldn't reset colour.";
+    }
+}
 
 function RenderProfileStatistics() {
     const CurrentDew =

Scripts/Garden/Users.js

@@ -40,6 +40,33 @@ async function SetUsername(
     return await Response.json();
 }
 
+async function SetColour(
+    Colour
+) {
+    const Response =
+        await fetch(
+            ApiUrl +
+            "/SetColour.php",
+            {
+                method: "POST",
+
+                headers: {
+                    "Content-Type":
+                        "application/json"
+                },
+
+                body: JSON.stringify({
+                    SaveKey:
+                        GetSaveKey(),
+
+                    Colour:
+                        Colour
+                })
+            }
+        );
+
+    return await Response.json();
+}
 
 async function RenderUser() {
     const Profile =
@@ -62,6 +89,13 @@ async function RenderUser() {
         UsernameDisplay.textContent =
             Profile.Username;
 
+        if (
+            Profile.Colour !== null
+        ) {
+            UsernameDisplay.style.color =
+                Profile.Colour;
+        }
+
       UsernameForm.hidden = true;
 
         return;

Styles/Style.css

@@ -1356,3 +1356,25 @@ select {
         height: 4.5rem;
     }
 }
+
+#ProfileColourForm {
+    margin-top: 1.5rem;
+}
+
+.ProfileColourInput {
+    width: 4rem;
+    min-width: 4rem !important;
+    height: 2.75rem;
+
+    padding: 0.2rem !important;
+
+    cursor: pointer;
+
+    appearance: auto !important;
+}
+
+.ProfileColourPreview {
+    min-width: 8rem;
+
+    color: var(--Text);
+}