Added social page and fixed garden page layout. ALSO added text next to

navbar.

Pages/Bits/Navbar.php

@@ -1,32 +1,64 @@
 <?php
 
 $NavbarPages = [
-    "Home" => "/",
+    "Home" => [
-    "Sarahtonin" => "/Pages/Sarahtonin.html",
+        "Href" => "/",
-    "Garden" => "/Pages/Garden.html",
+        "Icon" => "Home.png"
-    "Shop" => "/Pages/Shop.html",
+    ],
-    "Plants" => "/Pages/Plants.html",
+    "Sarahtonin" => [
-    "Mutations" => "/Pages/Mutations.html",
+        "Href" => "/Pages/Sarahtonin.html",
-    "Guide" => "/Pages/Guide.html",
+        "Icon" => "Sarahtonin.png"
-    "Profile" => "/Pages/Profile.html"
+    ],
+    "Garden" => [
+        "Href" => "/Pages/Garden.html",
+        "Icon" => "Garden.png"
+    ],
+    "Shop" => [
+        "Href" => "/Pages/Shop.html",
+        "Icon" => "Shop.png"
+    ],
+    "Plants" => [
+        "Href" => "/Pages/Plants.html",
+        "Icon" => "Plants.png"
+    ],
+    "Mutations" => [
+        "Href" => "/Pages/Mutations.html",
+        "Icon" => "Mutations.png"
+    ],
+    "Guide" => [
+        "Href" => "/Pages/Guide.html",
+        "Icon" => "Guide.png"
+    ],
+    "Profile" => [
+        "Href" => "/Pages/Profile.html",
+        "Icon" => "Profile.png"
+    ],
+    "Social" => [
+        "Href" => "/Pages/Social.html",
+        "Icon" => "Social.png"
+    ]
 ];
 
 ?>
 
 <nav class="Navbar" aria-label="Main navigation">
-    <?php foreach ($NavbarPages as $NavbarPage => $NavbarHref): ?>
+    <?php foreach ($NavbarPages as $NavbarPage => $NavbarData): ?>
         <a
             class="NavbarLink"
-            href="<?= htmlspecialchars($NavbarHref, ENT_QUOTES, "UTF-8") ?>"
+            href="<?= htmlspecialchars($NavbarData["Href"], ENT_QUOTES, "UTF-8") ?>"
             aria-label="<?= htmlspecialchars($NavbarPage, ENT_QUOTES, "UTF-8") ?>"
             title="<?= htmlspecialchars($NavbarPage, ENT_QUOTES, "UTF-8") ?>"
             <?= ($PageSection ?? $PageTitle ?? "") === $NavbarPage ? 'aria-current="page"' : "" ?>
         >
             <img
                 class="NavbarIcon"
-                src="/Assets/Img/<?= rawurlencode($NavbarPage) ?>.png"
+                src="/Assets/Img/<?= rawurlencode($NavbarData["Icon"]) ?>"
                 alt=""
             >
+
+            <span class="NavbarText">
+                <?= htmlspecialchars($NavbarPage, ENT_QUOTES, "UTF-8") ?>
+            </span>
         </a>
     <?php endforeach; ?>
 
@@ -44,6 +76,10 @@ $NavbarPages = [
             src="/Assets/Img/Icon.png"
             alt=""
         >
+
+        <span class="NavbarText">
+            Admin
+        </span>
     </a>
 </nav>
 

Pages/Garden.php

@@ -15,12 +15,46 @@ $PageSection = "Garden";
         <?php require __DIR__ . "/Bits/Navbar.php"; ?>
 
         <main class="MainContainer">
-            <h1>Garden</h1>
+            <h1 id="GardenPageHeading">Your Garden</h1>
 
             <div
+                id="GardenSelector"
+                class="GardenSelectorPanel"
+            >
+                <button
+                    id="PreviousGardenButton"
+                    class="ActionButton GardenSelectorButton"
+                    type="button"
+                    aria-label="Previous Garden"
+                >
+                    &lt;
+                </button>
+
+                <input
+                    id="GardenNameInput"
+                    class="GardenNameInput"
+                    type="text"
+                    maxlength="32"
+                    value="Garden"
+                    aria-label="Garden name"
+                >
+
+                <button
+                    id="NextGardenButton"
+                    class="ActionButton GardenSelectorButton"
+                    type="button"
+                    aria-label="Next Garden"
+                >
+                    &gt;
+                </button>
+            </div>
+
+            <section
                 id="GardenInfoPanel"
                 class="StatusPanel GardenInfoPanel"
             >
+                <h2 class="GardenInfoHeading">Info</h2>
+
                 <div class="GardenInfoRow GardenInfoTopRow">
                     <div class="GardenInfoSection GardenInfoPrimarySection">
                         <div class="GardenStatusLine">
@@ -130,39 +164,7 @@ $PageSection = "Garden";
                         </div>
                     </div>
                 </div>
-            </div>
+            </section>
-
-            <div
-                id="GardenSelector"
-                class="GardenSelectorPanel"
-            >
-                <button
-                    id="PreviousGardenButton"
-                    class="ActionButton GardenSelectorButton"
-                    type="button"
-                    aria-label="Previous Garden"
-                >
-                    &lt;
-                </button>
-
-                <input
-                    id="GardenNameInput"
-                    class="GardenNameInput"
-                    type="text"
-                    maxlength="32"
-                    value="Garden"
-                    aria-label="Garden name"
-                >
-
-                <button
-                    id="NextGardenButton"
-                    class="ActionButton GardenSelectorButton"
-                    type="button"
-                    aria-label="Next Garden"
-                >
-                    &gt;
-                </button>
-            </div>
 
             <section
                 id="QuickBuy"
@@ -208,33 +210,11 @@ $PageSection = "Garden";
                 ></div>
             </section>
 
-            <div class="GardenLayout">
             <section
-                    id="Plots"
+                id="Tools"
-                    class="Panel GardenPlotsPanel"
+                class="Panel GardenToolsPanel"
             >
-                    <h2>Plots</h2>
+                <h2>Tools</h2>
-
-                    <div
-                        id="GardenGrid"
-                        class="GardenGrid"
-                    ></div>
-                </section>
-
-                <section
-                    id="Seeds"
-                    class="Panel SeedPanel"
-                >
-                    <h2>Seeds</h2>
-
-                    <div
-                        id="SeedList"
-                        class="SeedList"
-                    ></div>
-
-                    <h3 class="GardenToolHeading">
-                        Tools
-                    </h3>
 
                 <div class="ToolList">
                     <button
@@ -246,7 +226,32 @@ $PageSection = "Garden";
                     </button>
                 </div>
             </section>
+
+            <section
+                id="Seeds"
+                class="Panel GardenInventoryPanel"
+            >
+                <h2>Inventory</h2>
+
+                <div
+                    id="SeedList"
+                    class="SeedList"
+                ></div>
+            </section>
+
+            <section
+                id="Plots"
+                class="Panel GardenPlotsPanel"
+            >
+                <h2>Plots</h2>
+
+                <div class="GardenGridViewport">
+                    <div
+                        id="GardenGrid"
+                        class="GardenGrid"
+                    ></div>
                 </div>
+            </section>
 
             <p id="GardenMessage" class="PageMessage">
                 Select a seed, then choose an empty plot.
@@ -287,34 +292,6 @@ $PageSection = "Garden";
                 </form>
             </section>
 
-            <section
-                id="Leaderboard"
-                class="Panel Leaderboard"
-            >
-                <h2>Leaderboard</h2>
-
-                <div class="LeaderboardTableContainer">
-                    <table class="LeaderboardTable">
-                        <thead>
-                            <tr>
-                                <th class="LeaderboardRankColumn">
-                                    #
-                                </th>
-
-                                <th>
-                                    Username
-                                </th>
-
-                                <th class="LeaderboardDewColumn">
-                                    Dew
-                                </th>
-                            </tr>
-                        </thead>
-
-                        <tbody id="LeaderboardBody"></tbody>
-                    </table>
-                </div>
-            </section>
         </main>
 
         <script src="/Scripts/Garden/PlantImages.js"></script>
@@ -326,7 +303,6 @@ $PageSection = "Garden";
         <script src="/Scripts/Garden/Upgrades.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>
     </body>
 </html>

Pages/Social.php

@@ -0,0 +1,54 @@
+<?php
+
+$PageTitle = "Social";
+$PageSection = "Social";
+
+?>
+
+<!DOCTYPE html>
+
+<html lang="en" data-palette="CatppuccinMocha">
+    <?php require __DIR__ . "/Bits/Head.php"; ?>
+
+    <body>
+        <?php require __DIR__ . "/Bits/Navbar.php"; ?>
+
+        <main class="MainContainer">
+            <h1>Social</h1>
+
+            <section
+                id="Leaderboard"
+                class="Panel Leaderboard"
+            >
+                <h2>Leaderboard</h2>
+
+                <div class="LeaderboardTableContainer">
+                    <table class="LeaderboardTable">
+                        <thead>
+                            <tr>
+                                <th class="LeaderboardRankColumn">
+                                    #
+                                </th>
+
+                                <th>
+                                    Username
+                                </th>
+
+                                <th class="LeaderboardDewColumn">
+                                    Dew
+                                </th>
+                            </tr>
+                        </thead>
+
+                        <tbody id="LeaderboardBody"></tbody>
+                    </table>
+                </div>
+            </section>
+        </main>
+
+        <script src="/Scripts/Garden/Save.js"></script>
+        <script src="/Scripts/Garden/Users.js"></script>
+        <script src="/Scripts/Garden/Leaderboard.js"></script>
+        <script src="/Scripts/Garden/Social.js"></script>
+    </body>
+</html>

Scripts/Garden/Garden.js

@@ -88,7 +88,6 @@ async function StartGame() {
     );
 
     await RenderUser();
-    await RenderLeaderboard();
 }
 
 

Scripts/Garden/Leaderboard.js

@@ -1,9 +1,15 @@
-async function RenderLeaderboard() {
+async function RenderLeaderboard(
+    CurrentUsername = null
+) {
     const Body =
         document.getElementById(
             "LeaderboardBody"
         );
 
+    if (Body === null) {
+        return;
+    }
+
     try {
         const Response = await fetch(
             ApiUrl + "/Leaderboard.php"
@@ -53,13 +59,16 @@ async function RenderLeaderboard() {
         }
 
 
+        if (CurrentUsername === null) {
             const UsernameDisplay =
                 document.getElementById(
                     "UsernameDisplay"
                 );
 
-        const CurrentUsername =
+            CurrentUsername =
-            UsernameDisplay?.textContent;
+                UsernameDisplay?.textContent ??
+                null;
+        }
 
 
         for (

Scripts/Garden/Social.js

@@ -0,0 +1,30 @@
+async function StartSocial() {
+    let CurrentUsername = null;
+
+    try {
+        const Profile = await GetProfile();
+
+        if (
+            Profile.Success &&
+            Profile.Username !== null
+        ) {
+            CurrentUsername =
+                Profile.Username;
+        }
+    } catch (Error) {
+        console.error(
+            "Couldn't load current profile:",
+            Error
+        );
+    }
+
+    await RenderLeaderboard(
+        CurrentUsername
+    );
+}
+
+
+document.addEventListener(
+    "DOMContentLoaded",
+    StartSocial
+);

Scripts/Garden/Users.js

@@ -1,6 +1,25 @@
 const DefaultColourPickerValue = "#000000";
 
 
+function RenderGardenOwnerHeading(
+    Username
+) {
+    const Heading =
+        document.getElementById(
+            "GardenPageHeading"
+        );
+
+    if (Heading === null) {
+        return;
+    }
+
+    Heading.textContent =
+        Username === null
+            ? "Your Garden"
+            : Username + "'s Garden";
+}
+
+
 function IsValidPlayerColour(
     Colour
 ) {
@@ -270,6 +289,10 @@ async function RenderUser() {
 
         UsernameForm.hidden = true;
 
+        RenderGardenOwnerHeading(
+            Profile.Username
+        );
+
         return;
     }
 
@@ -282,6 +305,10 @@ async function RenderUser() {
     );
 
     UsernameForm.hidden = false;
+
+    RenderGardenOwnerHeading(
+        null
+    );
 }
 
 
@@ -316,7 +343,6 @@ async function SubmitUsername(
         "Username set.";
 
     await RenderUser();
-    await RenderLeaderboard();
 }
 
 

Styles/Style.css

@@ -87,6 +87,12 @@ body {
     padding: 0;
 }
 
+.GardenInfoHeading {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    border-bottom: 3px solid var(--Surface2);
+}
+
 .GardenInfoRow {
     display: grid;
     grid-template-columns: repeat( 2, minmax(0, 1fr) );
@@ -300,11 +306,12 @@ input, button, textarea, select {
 }
 
 .NavbarLink {
-    display: block;
+    display: flex;
-    width: 4rem;
+    width: 12rem;
     height: 4rem;
     padding: 0;
-    line-height: 0;
+    align-items: center;
+    line-height: 1;
     text-decoration: none;
     overflow: hidden;
     background-color: var(--Mantle);
@@ -336,12 +343,24 @@ input, button, textarea, select {
 
 .NavbarIcon {
     display: block;
-    width: 100%;
+    flex: 0 0 4rem;
-    height: 100%;
+    width: 4rem;
+    height: 4rem;
     object-fit: fill;
     image-rendering: auto;
 }
 
+.NavbarText {
+    min-width: 0;
+    padding: 0 0.8rem;
+    overflow: hidden;
+    color: var(--Text);
+    font-size: 1.25rem;
+    line-height: 1;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .GardenSelectorPanel {
     display: grid;
     grid-template-columns: 3rem minmax(0, 1fr) 3rem;
@@ -549,25 +568,44 @@ input, button, textarea, select {
     border: 3px solid var(--Surface2);
 }
 
-.GardenLayout {
+.GardenToolsPanel,
-    display: grid;
+.GardenInventoryPanel,
-    grid-template-columns: minmax(0, 1fr) 12rem;
+.GardenPlotsPanel {
-    gap: 1rem;
+    margin-bottom: 1rem;
-    align-items: start;
+    padding: 0.75rem;
+}
+
+.GardenToolsPanel h2,
+.GardenInventoryPanel h2,
+.GardenPlotsPanel h2 {
+    margin-bottom: 0.75rem;
+}
+
+.GardenToolsPanel .ToolList,
+.GardenInventoryPanel .SeedList {
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.GardenToolsPanel .ToolButton,
+.GardenInventoryPanel .SeedButton {
+    width: auto;
 }
 
 .GardenPlotsPanel {
-    padding: 0.75rem;
     border-color: var(--GardenBorderColour, var(--Lavender));
 }
 
-.GardenPlotsPanel h2 {
+.GardenGridViewport {
-    margin-bottom: 0.75rem;
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
 }
 
 .GardenGrid {
     --GardenWidth: 3;
     display: grid;
+    width: 100%;
     grid-template-columns: repeat( var(--GardenWidth), minmax(0, 1fr) );
     gap: 0.5rem;
 }
@@ -658,17 +696,8 @@ input, button, textarea, select {
     --GrowthColour: var(--Yellow);
 }
 
-.SeedPanel {
-    padding: 0.75rem;
-}
-
-.SeedPanel h2 {
-    margin-bottom: 0.75rem;
-}
-
 .SeedList {
     display: flex;
-    flex-direction: column;
     gap: 0.5rem;
 }
 
@@ -687,7 +716,6 @@ input, button, textarea, select {
 
 .ToolList {
     display: flex;
-    flex-direction: column;
     gap: 0.5rem;
 }
 
@@ -1060,35 +1088,35 @@ input, button, textarea, select {
     }
 
     .NavbarLink {
-        flex: 0 0 3.5rem;
+        flex: 0 0 9.5rem;
+        width: 9.5rem;
+        height: 3.5rem;
+    }
+
+    .NavbarIcon {
+        flex-basis: 3.5rem;
         width: 3.5rem;
         height: 3.5rem;
     }
 
+    .NavbarText {
+        padding: 0 0.6rem;
+        font-size: 1.05rem;
+    }
+
     .MainContainer {
         grid-column: 1;
         grid-row: 2;
-    }
+        padding: 1rem;
-
-    .GardenLayout {
-        grid-template-columns: 1fr;
-    }
-
-    .SeedPanel {
-        grid-row: 1;
-    }
-
-    .SeedList, .ToolList {
-        flex-direction: row;
-        flex-wrap: wrap;
-    }
-
-    .SeedButton, .ToolButton {
-        width: auto;
     }
 
     .GardenGrid {
-        grid-row: 2;
+        width: max-content;
+        min-width: 100%;
+        grid-template-columns: repeat(
+            var(--GardenWidth),
+            minmax(4.25rem, 1fr)
+        );
     }
 
     .LeaderboardRankColumn, .LeaderboardRank {