Fixed styling to look.. Well, better

Scripts/Garden/Leaderboard.js

@@ -1,59 +1,187 @@
 async function RenderLeaderboard() {
-    const Response = await fetch(
-        ApiUrl + "/Leaderboard.php"
-    );
-
-    const Result =
-        await Response.json();
-
-    if (!Result.Success) {
-        return;
-    }
-
     const Body =
         document.getElementById(
             "LeaderboardBody"
         );
 
-    Body.replaceChildren();
+    try {
+        const Response = await fetch(
+            ApiUrl + "/Leaderboard.php"
+        );
+
+        const Result =
+            await Response.json();
+
+        if (!Result.Success) {
+            throw new Error(
+                Result.Error ??
+                "Couldn't load leaderboard."
+            );
+        }
+
+        Body.replaceChildren();
+
+        if (
+            Result.Players.length === 0
+        ) {
+            const Row =
+                document.createElement(
+                    "tr"
+                );
+
+            const Cell =
+                document.createElement(
+                    "td"
+                );
+
+            Cell.colSpan = 3;
+            Cell.className =
+                "LeaderboardEmpty";
+
+            Cell.textContent =
+                "Nobody is on the leaderboard yet.";
+
+            Row.appendChild(
+                Cell
+            );
+
+            Body.appendChild(
+                Row
+            );
+
+            return;
+        }
+
+
+        const UsernameDisplay =
+            document.getElementById(
+                "UsernameDisplay"
+            );
+
+        const CurrentUsername =
+            UsernameDisplay?.textContent;
+
+
+        for (
+            const Player
+            of Result.Players
+        ) {
+            const Row =
+                document.createElement(
+                    "tr"
+                );
+
+            Row.classList.add(
+                "LeaderboardRow"
+            );
+
+
+            /*
+             * Give the top three places
+             * their own styling.
+             */
+
+            if (
+                Player.Rank >= 1 &&
+                Player.Rank <= 3
+            ) {
+                Row.classList.add(
+                    "LeaderboardRank" +
+                    Player.Rank
+                );
+            }
+
+
+            /*
+             * Highlight the current player.
+             */
+
+            if (
+                CurrentUsername !== null &&
+                CurrentUsername !==
+                    "Unnamed" &&
+                Player.Username ===
+                    CurrentUsername
+            ) {
+                Row.classList.add(
+                    "LeaderboardSelf"
+                );
+            }
+
+
+            const Rank =
+                document.createElement(
+                    "td"
+                );
+
+            const Username =
+                document.createElement(
+                    "td"
+                );
+
+            const Dew =
+                document.createElement(
+                    "td"
+                );
+
+
+            Rank.className =
+                "LeaderboardRank";
+
+            Username.className =
+                "LeaderboardUsername";
+
+            Dew.className =
+                "LeaderboardDew";
+
+
+            Rank.textContent =
+                Player.Rank + ".";
+
+            Username.textContent =
+                Player.Username;
+
+            Dew.textContent =
+                Player.Dew.toLocaleString();
+
+
+            Row.append(
+                Rank,
+                Username,
+                Dew
+            );
+
+            Body.appendChild(
+                Row
+            );
+        }
+    } catch (Error) {
+        console.error(
+            "Couldn't render leaderboard:",
+            Error
+        );
+
+        Body.replaceChildren();
 
-    for (
-        const Player
-        of Result.Players
-    ) {
         const Row =
             document.createElement(
                 "tr"
             );
 
-        const Rank =
+        const Cell =
             document.createElement(
                 "td"
             );
 
-        const Username =
-            document.createElement(
-                "td"
-            );
+        Cell.colSpan = 3;
+        Cell.className =
+            "LeaderboardEmpty";
 
-        const Dew =
-            document.createElement(
-                "td"
-            );
+        Cell.textContent =
+            "Couldn't load the leaderboard.";
 
-        Rank.textContent =
-            Player.Rank + ".";
-
-        Username.textContent =
-            Player.Username;
-
-        Dew.textContent =
-            Player.Dew;
-
-        Row.append(
-            Rank,
-            Username,
-            Dew
+        Row.appendChild(
+            Cell
         );
 
         Body.appendChild(