Fi

Pages/Gardener.php

@@ -86,50 +86,59 @@ $PageSection = "Social";
 
             <section
                 id="GardenerGardensSection"
-                class="Panel SocialSection GardenPlotsPanel"
+                class="SocialSection"
                 hidden
             >
-                <div class="PanelHeader PanelHeaderInset GardenerSectionHeader">
-                    <h2>Gardens</h2>
-                    <span id="GardenerGardenPosition"></span>
-                </div>
-
                 <div
-                    id="GardenerGardenControls"
+                    id="GardenerGardenSelector"
-                    class="GardenerGardenControls"
+                    class="GardenSelectorPanel"
                 >
                     <button
                         id="PreviousGardenerGardenButton"
-                        class="ActionButton"
+                        class="ActionButton GardenSelectorButton"
                         type="button"
+                        aria-label="Previous Garden"
                     >
-                        Previous
+                        &lt;
                     </button>
 
-                    <div class="GardenerGardenTitle">
+                    <input
-                        <strong id="GardenerGardenName">Garden</strong>
+                        id="GardenerGardenName"
-                        <span id="GardenerGardenSize">0×0</span>
+                        class="GardenNameInput"
-                    </div>
+                        type="text"
+                        value="Garden"
+                        aria-label="Garden name"
+                        readonly
+                    >
 
                     <button
                         id="NextGardenerGardenButton"
-                        class="ActionButton"
+                        class="ActionButton GardenSelectorButton"
                         type="button"
+                        aria-label="Next Garden"
                     >
-                        Next
+                        &gt;
                     </button>
                 </div>
 
-                <div class="GardenGridViewport">
+                <section
-                    <div
+                    id="GardenerPlots"
-                        id="GardenerGardenGrid"
+                    class="Panel GardenPlotsPanel"
-                        class="GardenGrid"
+                >
-                    ></div>
+                    <h2 class="PanelHeader PanelHeaderInset">Plots</h2>
-                </div>
+
+                    <div class="GardenGridViewport">
+                        <div
+                            id="GardenerGardenGrid"
+                            class="GardenGrid"
+                        ></div>
+                    </div>
+                </section>
 
                 <p
                     id="GardenerGardensMessage"
                     class="ProfileMessage"
+                    hidden
                 ></p>
             </section>
 

Scripts/Garden/Garden.js

@@ -216,109 +216,24 @@ async function SwitchGarden(
 
 
 function RenderGardenSelector() {
-    const PreviousButton =
+    RenderGardenSelectorView({
-        document.getElementById(
+        Gardens: GameSave.Gardens,
-            "PreviousGardenButton"
+        GardenIndex:
-        );
+            GameSave.ActiveGardenIndex,
-
+        PreviousButton:
-    const NextButton =
+            document.getElementById(
-        document.getElementById(
+                "PreviousGardenButton"
-            "NextGardenButton"
+            ),
-        );
+        NameInput:
-
+            document.getElementById(
-    const NameInput =
+                "GardenNameInput"
-        document.getElementById(
+            ),
-            "GardenNameInput"
+        NextButton:
-        );
+            document.getElementById(
-
+                "NextGardenButton"
-    if (
+            ),
-        PreviousButton === null ||
+        PreserveFocusedName: true
-        NextButton === null ||
+    });
-        NameInput === null
-    ) {
-        return;
-    }
-
-    const GardenCount =
-        GameSave.Gardens.length;
-
-    const GardenIndex =
-        GameSave.ActiveGardenIndex;
-
-    const HasPreviousGarden =
-        GardenIndex > 0;
-
-    const HasNextGarden =
-        GardenIndex <
-        GardenCount - 1;
-
-    PreviousButton.disabled =
-        !HasPreviousGarden;
-
-    NextButton.disabled =
-        !HasNextGarden;
-
-
-    PreviousButton.style.setProperty(
-        "--GardenSelectorBorderColour",
-        HasPreviousGarden
-            ? GetGardenBorderColour(
-                GardenIndex - 1
-            )
-            : "var(--Surface2)"
-    );
-
-    NameInput.style.setProperty(
-        "--GardenSelectorBorderColour",
-        GetGardenBorderColour(
-            GardenIndex
-        )
-    );
-
-    NextButton.style.setProperty(
-        "--GardenSelectorBorderColour",
-        HasNextGarden
-            ? GetGardenBorderColour(
-                GardenIndex + 1
-            )
-            : "var(--Surface2)"
-    );
-
-
-    PreviousButton.setAttribute(
-        "aria-label",
-        HasPreviousGarden
-            ? "Previous Garden: " +
-                GameSave.Gardens[
-                    GardenIndex - 1
-                ].Name
-            : "No previous Garden"
-    );
-
-    NextButton.setAttribute(
-        "aria-label",
-        HasNextGarden
-            ? "Next Garden: " +
-                GameSave.Gardens[
-                    GardenIndex + 1
-                ].Name
-            : "No next Garden"
-    );
-
-
-    if (
-        document.activeElement !==
-        NameInput
-    ) {
-        NameInput.value =
-            GameSave.Garden.Name;
-    }
-
-    NameInput.title =
-        "Garden " +
-        (GardenIndex + 1) +
-        " of " +
-        GardenCount;
 }
 
 

Scripts/Garden/GardenView.js

@@ -49,6 +49,117 @@ function GetGardenBorderColour(
 }
 
 
+
+
+function RenderGardenSelectorView(
+    Options
+) {
+    const Gardens =
+        Array.isArray(Options.Gardens)
+            ? Options.Gardens
+            : [];
+
+    const GardenIndex =
+        Number(Options.GardenIndex) || 0;
+
+    const PreviousButton =
+        Options.PreviousButton ?? null;
+
+    const NextButton =
+        Options.NextButton ?? null;
+
+    const NameInput =
+        Options.NameInput ?? null;
+
+    if (
+        PreviousButton === null ||
+        NextButton === null ||
+        NameInput === null ||
+        Gardens.length === 0
+    ) {
+        return;
+    }
+
+    const HasPreviousGarden =
+        GardenIndex > 0;
+
+    const HasNextGarden =
+        GardenIndex <
+        Gardens.length - 1;
+
+    PreviousButton.disabled =
+        !HasPreviousGarden;
+
+    NextButton.disabled =
+        !HasNextGarden;
+
+
+    PreviousButton.style.setProperty(
+        "--GardenSelectorBorderColour",
+        HasPreviousGarden
+            ? GetGardenBorderColour(
+                GardenIndex - 1
+            )
+            : "var(--Surface2)"
+    );
+
+    NameInput.style.setProperty(
+        "--GardenSelectorBorderColour",
+        GetGardenBorderColour(
+            GardenIndex
+        )
+    );
+
+    NextButton.style.setProperty(
+        "--GardenSelectorBorderColour",
+        HasNextGarden
+            ? GetGardenBorderColour(
+                GardenIndex + 1
+            )
+            : "var(--Surface2)"
+    );
+
+
+    PreviousButton.setAttribute(
+        "aria-label",
+        HasPreviousGarden
+            ? "Previous Garden: " +
+                Gardens[
+                    GardenIndex - 1
+                ].Name
+            : "No previous Garden"
+    );
+
+    NextButton.setAttribute(
+        "aria-label",
+        HasNextGarden
+            ? "Next Garden: " +
+                Gardens[
+                    GardenIndex + 1
+                ].Name
+            : "No next Garden"
+    );
+
+
+    if (
+        Options.PreserveFocusedName !==
+            true ||
+        document.activeElement !==
+            NameInput
+    ) {
+        NameInput.value =
+            Gardens[GardenIndex]
+                ?.Name ?? "Garden";
+    }
+
+    NameInput.title =
+        "Garden " +
+        (GardenIndex + 1) +
+        " of " +
+        Gardens.length;
+}
+
+
 function GetGardenPlotRotation(
     Plot
 ) {

Scripts/Garden/Gardener.js

@@ -370,6 +370,10 @@ function RenderGardenerGardens() {
     Section.hidden = false;
 
     if (!Array.isArray(GardenerData.Gardens)) {
+        Section.classList.add(
+            "Panel"
+        );
+
         Section.replaceChildren(
             CreateGardenerPrivateSection(
                 "Gardens",
@@ -380,6 +384,10 @@ function RenderGardenerGardens() {
         return;
     }
 
+    Section.classList.remove(
+        "Panel"
+    );
+
     if (GardenerData.Gardens.length === 0) {
         const Message =
             document.getElementById(
@@ -389,6 +397,7 @@ function RenderGardenerGardens() {
         if (Message !== null) {
             Message.textContent =
                 "This gardener has no Gardens to preview.";
+            Message.hidden = false;
         }
 
         document.getElementById(
@@ -417,17 +426,29 @@ function ChangeGardenerGarden(
         !Array.isArray(
             GardenerData?.Gardens
         ) ||
-        GardenerData.Gardens.length <= 1
+        GardenerData.Gardens.length === 0
+    ) {
+        return;
+    }
+
+    const NextIndex = Math.max(
+        0,
+        Math.min(
+            GardenerData.Gardens.length - 1,
+            GardenerGardenIndex +
+                Difference
+        )
+    );
+
+    if (
+        NextIndex ===
+        GardenerGardenIndex
     ) {
         return;
     }
 
     GardenerGardenIndex =
-        (
+        NextIndex;
-            GardenerGardenIndex +
-            Difference +
-            GardenerData.Gardens.length
-        ) % GardenerData.Gardens.length;
 
     RenderCurrentGardenerGarden();
 }
@@ -447,39 +468,14 @@ function RenderCurrentGardenerGarden() {
     const Garden =
         Gardens[GardenerGardenIndex];
 
-    const Section =
-        document.getElementById(
-            "GardenerGardensSection"
-        );
-
     const Grid =
         document.getElementById(
             "GardenerGardenGrid"
         );
 
-    const Name =
+    const PlotsPanel =
         document.getElementById(
-            "GardenerGardenName"
+            "GardenerPlots"
-        );
-
-    const Size =
-        document.getElementById(
-            "GardenerGardenSize"
-        );
-
-    const Position =
-        document.getElementById(
-            "GardenerGardenPosition"
-        );
-
-    const PreviousButton =
-        document.getElementById(
-            "PreviousGardenerGardenButton"
-        );
-
-    const NextButton =
-        document.getElementById(
-            "NextGardenerGardenButton"
         );
 
     const Message =
@@ -487,11 +483,32 @@ function RenderCurrentGardenerGarden() {
             "GardenerGardensMessage"
         );
 
-    if (Grid === null) {
+    if (
+        Grid === null ||
+        PlotsPanel === null
+    ) {
         return;
     }
 
-    Section?.style.setProperty(
+    RenderGardenSelectorView({
+        Gardens,
+        GardenIndex:
+            GardenerGardenIndex,
+        PreviousButton:
+            document.getElementById(
+                "PreviousGardenerGardenButton"
+            ),
+        NameInput:
+            document.getElementById(
+                "GardenerGardenName"
+            ),
+        NextButton:
+            document.getElementById(
+                "NextGardenerGardenButton"
+            )
+    });
+
+    PlotsPanel.style.setProperty(
         "--GardenBorderColour",
         GetGardenBorderColour(
             GardenerGardenIndex
@@ -521,41 +538,9 @@ function RenderCurrentGardenerGarden() {
         );
     }
 
-    if (Name !== null) {
-        Name.textContent =
-            Garden.Name ?? "Garden";
-    }
-
-    if (Size !== null) {
-        Size.textContent =
-            Number(Garden.Width) +
-            "×" +
-            Number(Garden.Height);
-    }
-
-    if (Position !== null) {
-        Position.textContent =
-            (GardenerGardenIndex + 1) +
-            " / " +
-            Gardens.length;
-    }
-
-    const HasMultiple =
-        Gardens.length > 1;
-
-    if (PreviousButton !== null) {
-        PreviousButton.disabled =
-            !HasMultiple;
-    }
-
-    if (NextButton !== null) {
-        NextButton.disabled =
-            !HasMultiple;
-    }
-
     if (Message !== null) {
-        Message.textContent =
+        Message.textContent = "";
-            "Read-only Garden preview.";
+        Message.hidden = true;
     }
 }
 
@@ -616,7 +601,7 @@ function CreateGardenerGardenPlot(
             BorderProgress: Progress,
             DisplaySettings: {
                 ShowPlantNames: true,
-                ShowGrowthTimers: true,
+                ShowGrowthTimers: false,
                 ShowPlotRotation: false
             },
             ImagePath,

Styles/Style.css

@@ -1738,39 +1738,6 @@ a.GardenerIdentity:hover .GardenerIdentityName {
     flex-basis: 7rem;
 }
 
-.GardenerSectionHeader {
-    justify-content: space-between;
-}
-
-.GardenerGardenControls {
-    display: grid;
-    grid-template-columns: minmax(7rem, auto) minmax(0, 1fr) minmax(7rem, auto);
-    gap: 0.75rem;
-    margin-bottom: 1rem;
-    align-items: center;
-}
-
-.GardenerGardenTitle {
-    display: flex;
-    min-width: 0;
-    flex-direction: column;
-    gap: 0.2rem;
-    align-items: center;
-    text-align: center;
-}
-
-.GardenerGardenTitle strong {
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.GardenerGardenTitle span,
-.GardenerSectionHeader span {
-    color: var(--Subtext1);
-}
-
 .GardenPlotReadOnly,
 .GardenPlotReadOnly:hover {
     cursor: default;
@@ -1856,15 +1823,6 @@ a.GardenerIdentity:hover .GardenerIdentityName {
         flex-basis: 5.5rem;
     }
 
-    .GardenerGardenControls {
-        grid-template-columns: 1fr 1fr;
-    }
-
-    .GardenerGardenTitle {
-        grid-column: 1 / -1;
-        grid-row: 1;
-    }
-
     .GardenerCommentHeader {
         align-items: flex-start;
         flex-direction: column;