From 39e196e994c9b53cdc12736830dbca0ec96b7c5d Mon Sep 17 00:00:00 2001
From: Sarahtonin <SRHTNIN@proton.me>
Date: Mon, 7 Sep 2026 19:42:35 +0200
Subject: [PATCH] Made styling more coherent.

---
 Pages/Garden.php             |   1 +
 Pages/Gardener.php           |   5 +-
 Scripts/Garden/Garden.js     | 565 +++++-----------------------------
 Scripts/Garden/GardenView.js | 572 +++++++++++++++++++++++++++++++++++
 Scripts/Garden/Gardener.js   | 279 +++++------------
 5 files changed, 730 insertions(+), 692 deletions(-)
 create mode 100644 Scripts/Garden/GardenView.js

diff --git a/Pages/Garden.php b/Pages/Garden.php
index 5a9562a..343a631 100644
--- a/Pages/Garden.php
+++ b/Pages/Garden.php
@@ -310,6 +310,7 @@ $PageSection = "Garden";
         </main>
 
         <script src="/Scripts/Garden/PlantImages.js"></script>
+        <script src="/Scripts/Garden/GardenView.js"></script>
         <script src="/Scripts/Garden/Plants.js"></script>
         <script src="/Scripts/Garden/Mutations.js"></script>
         <script src="/Scripts/Garden/FunctionalEffects.js"></script>
diff --git a/Pages/Gardener.php b/Pages/Gardener.php
index f86b497..e3e3f8c 100644
--- a/Pages/Gardener.php
+++ b/Pages/Gardener.php
@@ -86,7 +86,7 @@ $PageSection = "Social";
 
             <section
                 id="GardenerGardensSection"
-                class="Panel SocialSection"
+                class="Panel SocialSection GardenPlotsPanel"
                 hidden
             >
                 <div class="PanelHeader PanelHeaderInset GardenerSectionHeader">
@@ -123,7 +123,7 @@ $PageSection = "Social";
                 <div class="GardenGridViewport">
                     <div
                         id="GardenerGardenGrid"
-                        class="GardenGrid GardenerGardenGrid"
+                        class="GardenGrid"
                     ></div>
                 </div>
 
@@ -218,6 +218,7 @@ $PageSection = "Social";
         </main>
 
         <script src="/Scripts/Garden/PlantImages.js"></script>
+        <script src="/Scripts/Garden/GardenView.js"></script>
         <script src="/Scripts/Garden/Plants.js"></script>
         <script src="/Scripts/Garden/Mutations.js"></script>
         <script src="/Scripts/Garden/Save.js"></script>
diff --git a/Scripts/Garden/Garden.js b/Scripts/Garden/Garden.js
index 1fd4cc0..28ab03b 100644
--- a/Scripts/Garden/Garden.js
+++ b/Scripts/Garden/Garden.js
@@ -9,57 +9,6 @@ let QuickBuyAmountMode = "One";
 
 const GardenUpdateInterval = 1000;
 
-const GardenBorderColours = [
-    "var(--Rosewater)",
-    "var(--Flamingo)",
-    "var(--Pink)",
-    "var(--Mauve)",
-    "var(--Red)",
-    "var(--Maroon)",
-    "var(--Peach)",
-    "var(--Yellow)",
-    "var(--Green)",
-    "var(--Teal)",
-    "var(--Sky)",
-    "var(--Sapphire)",
-    "var(--Blue)",
-    "var(--Lavender)"
-];
-
-const GardenPlotDefaultRotation = "East";
-const GardenPlotRotations = [
-    "North",
-    "East",
-    "South",
-    "West"
-];
-const GardenPlotRotationLabels = {
-    North: "^",
-    East: "->",
-    South: "v",
-    West: "<-"
-};
-
-
-function GetGardenBorderColour(
-    GardenIndex
-) {
-    const ColourCount =
-        GardenBorderColours.length;
-
-    const NormalizedIndex =
-        (
-            Number(GardenIndex) %
-            ColourCount +
-            ColourCount
-        ) % ColourCount;
-
-    return GardenBorderColours[
-        NormalizedIndex
-    ];
-}
-
-
 async function StartGame() {
     try {
         await LoadGameContent();
@@ -1434,28 +1383,6 @@ function GetGardenDisplaySettings() {
 }
 
 
-function GetGardenPlotRotation(
-    Plot
-) {
-    return GardenPlotRotations.includes(
-        Plot?.Rotation
-    )
-        ? Plot.Rotation
-        : GardenPlotDefaultRotation;
-}
-
-
-function GetGardenPlotRotationLabel(
-    Plot
-) {
-    return GardenPlotRotationLabels[
-        GetGardenPlotRotation(
-            Plot
-        )
-    ] ?? "->";
-}
-
-
 async function RotateGardenPlot(
     PlotIndex
 ) {
@@ -1524,87 +1451,97 @@ function CreatePlotElement(
     DisplaySettings,
     IsPreview = false
 ) {
-    const Tile =
-        document.createElement(
-            "div"
-        );
-
-    Tile.className =
-        "PlantTile GardenPlot";
-
-    const MainButton =
-        document.createElement(
-            "button"
-        );
-
-    MainButton.className =
-        "GardenPlotMain";
-    MainButton.type = "button";
-
-
-    if (
-        DisplaySettings.ShowPlantNames
-    ) {
-        Tile.classList.add(
-            "GardenPlotWithName"
-        );
-    }
-
-
     const Plant =
         Plot === null
             ? null
             : Plants[Plot.Plant];
 
+    let Progress = 0;
+    let CooldownState = null;
+    let BorderProgress = 0;
+    let ImagePath = null;
+    let TimerText = "";
+
     if (
-        DisplaySettings.ShowPlantNames
+        Plot !== null &&
+        Plant !== undefined
     ) {
-        MainButton.appendChild(
-            CreateGardenPlotName(
+        Progress =
+            GetPlantGrowthProgress(
                 Plot,
                 Plant
-            )
-        );
+            );
+
+        CooldownState =
+            Progress >= 1 &&
+            typeof GetFunctionalPlantCooldownDisplayState ===
+                "function"
+                ? GetFunctionalPlantCooldownDisplayState(
+                    Plot,
+                    Plant,
+                    GetSimulationTime(
+                        GameSave
+                    )
+                )
+                : null;
+
+        BorderProgress =
+            CooldownState === null
+                ? Progress
+                : CooldownState.Progress;
+
+        ImagePath =
+            GetPlantImage(
+                Plot,
+                Plant
+            );
+
+        TimerText =
+            GetGardenPlotTimerText(
+                Plot,
+                Plant,
+                Progress,
+                GetSimulationTime(
+                    GameSave
+                ),
+                CooldownState
+            );
     }
 
+    const View =
+        CreateGardenPlotView({
+            Plot,
+            Plant,
+            Progress,
+            BorderProgress,
+            DisplaySettings,
+            ImagePath,
+            TimerText,
+            FunctionalCooldown:
+                CooldownState !== null,
+            ShowRotation:
+                Plot !== null &&
+                DisplaySettings
+                    .ShowPlotRotation &&
+                !IsPreview,
+            OnRotate: () => {
+                RotateGardenPlot(
+                    PlotIndex
+                );
+            }
+        });
 
-    const Visual =
-        document.createElement(
-            "span"
-        );
-
-    Visual.className =
-        "GardenPlotVisual";
-
-    MainButton.appendChild(
-        Visual
-    );
-
-    Tile.appendChild(
-        MainButton
-    );
+    const Tile = View.Tile;
+    const MainButton =
+        View.MainButton;
 
 
     if (Plot === null) {
-        Tile.classList.add(
-            "GardenPlotEmpty"
-        );
-
         MainButton.title =
             IsPreview
                 ? "Future Sight: empty plot"
                 : "Empty plot";
 
-        AppendGardenPlotFooter(
-            Tile,
-            null,
-            null,
-            0,
-            PlotIndex,
-            DisplaySettings,
-            IsPreview
-        );
-
         if (IsPreview) {
             MainButton.disabled = true;
             return Tile;
@@ -1646,112 +1583,11 @@ function CreatePlotElement(
 
 
     if (Plant === undefined) {
-        Visual.textContent = "?";
-
-        AppendGardenPlotFooter(
-            Tile,
-            Plot,
-            null,
-            0,
-            PlotIndex,
-            DisplaySettings,
-            IsPreview
-        );
-
         MainButton.disabled = true;
         return Tile;
     }
 
 
-    const Progress =
-        GetPlantGrowthProgress(
-            Plot,
-            Plant
-        );
-
-    const CooldownState =
-        Progress >= 1 &&
-        typeof GetFunctionalPlantCooldownDisplayState ===
-            "function"
-            ? GetFunctionalPlantCooldownDisplayState(
-                Plot,
-                Plant,
-                GetSimulationTime(
-                    GameSave
-                )
-            )
-            : null;
-
-    const BorderProgress =
-        CooldownState === null
-            ? Progress
-            : CooldownState.Progress;
-
-    Tile.style.setProperty(
-        "--GrowthProgress",
-        `${BorderProgress * 100}%`
-    );
-
-    if (CooldownState !== null) {
-        Tile.classList.add(
-            "GardenPlotFunctionalCooldown"
-        );
-    }
-
-
-    const ImagePath =
-        GetPlantImage(
-            Plot,
-            Plant
-        );
-
-    if (ImagePath !== null) {
-        const Image =
-            document.createElement(
-                "img"
-            );
-
-        Image.className =
-            "PlantSprite";
-
-        Image.alt =
-            Plant.Name;
-
-        Image.src =
-            ImagePath;
-
-        Visual.appendChild(
-            Image
-        );
-    } else {
-        const MissingImage =
-            document.createElement(
-                "span"
-            );
-
-        MissingImage.className =
-            "GardenPlantMissing";
-
-        MissingImage.textContent =
-            Plant.Name;
-
-        Visual.appendChild(
-            MissingImage
-        );
-    }
-
-
-    AppendGardenPlotFooter(
-        Tile,
-        Plot,
-        Plant,
-        Progress,
-        PlotIndex,
-        DisplaySettings,
-        IsPreview
-    );
-
-
     if (IsPreview) {
         MainButton.title =
             "Future Sight: " +
@@ -1919,265 +1755,6 @@ function CreatePlotElement(
 }
 
 
-function AppendGardenPlotFooter(
-    Tile,
-    Plot,
-    Plant,
-    Progress,
-    PlotIndex,
-    DisplaySettings,
-    IsPreview
-) {
-    const ShowTimer =
-        DisplaySettings.ShowGrowthTimers;
-
-    const ShowRotation =
-        Plot !== null &&
-        DisplaySettings.ShowPlotRotation &&
-        !IsPreview;
-
-    if (
-        !ShowTimer &&
-        !ShowRotation
-    ) {
-        return;
-    }
-
-    Tile.classList.add(
-        "GardenPlotWithFooter"
-    );
-
-    const Footer =
-        document.createElement(
-            "span"
-        );
-
-    Footer.className =
-        "GardenPlotFooter";
-
-    if (
-        ShowTimer &&
-        ShowRotation
-    ) {
-        Footer.classList.add(
-            "GardenPlotFooterSplit"
-        );
-    }
-
-    if (ShowTimer) {
-        Footer.appendChild(
-            CreateGardenPlotTimer(
-                Plot,
-                Plant,
-                Progress
-            )
-        );
-    }
-
-    if (ShowRotation) {
-        const RotateButton =
-            document.createElement(
-                "button"
-            );
-
-        RotateButton.className =
-            "GardenPlotRotationButton";
-        RotateButton.type = "button";
-        RotateButton.textContent =
-            GetGardenPlotRotationLabel(
-                Plot
-            );
-        RotateButton.title =
-            "Rotate plot clockwise";
-        RotateButton.setAttribute(
-            "aria-label",
-            "Rotate " +
-            (Plant?.Name ?? "plot") +
-            " clockwise"
-        );
-
-        RotateButton.addEventListener(
-            "click",
-            () => {
-                RotateGardenPlot(
-                    PlotIndex
-                );
-            }
-        );
-
-        Footer.appendChild(
-            RotateButton
-        );
-    }
-
-    Tile.appendChild(Footer);
-}
-
-
-function CreateGardenPlotName(
-    Plot,
-    Plant
-) {
-    const Name =
-        document.createElement(
-            "span"
-        );
-
-    Name.className =
-        "GardenPlotName";
-
-    if (Plot === null) {
-        Name.textContent =
-            "Empty";
-    } else if (Plant === undefined) {
-        Name.textContent =
-            "Unknown";
-    } else {
-        Name.textContent =
-            Plant.Name;
-
-        Name.title =
-            Plant.Name;
-    }
-
-    return Name;
-}
-
-
-function CreateGardenPlotTimer(
-    Plot,
-    Plant,
-    Progress
-) {
-    const Timer =
-        document.createElement(
-            "span"
-        );
-
-    Timer.className =
-        "GardenPlotTimer";
-
-    if (
-        Plot === null ||
-        Plant === null ||
-        Plant === undefined
-    ) {
-        Timer.textContent = "";
-
-        return Timer;
-    }
-
-
-    if (
-        Progress >= 1 &&
-        typeof GetFunctionalPlantCooldownDisplayState ===
-            "function"
-    ) {
-        const CooldownState =
-            GetFunctionalPlantCooldownDisplayState(
-                Plot,
-                Plant,
-                GetSimulationTime(
-                    GameSave
-                )
-            );
-
-        if (CooldownState !== null) {
-            Timer.textContent =
-                FormatGardenRemainingTime(
-                    CooldownState.Remaining
-                );
-
-            return Timer;
-        }
-    }
-
-
-    if (Progress >= 1) {
-        Timer.textContent =
-            "Ready";
-
-        return Timer;
-    }
-
-
-    const RemainingTime =
-        Math.max(
-            0,
-            Plant.GrowthTime -
-            (
-                GetSimulationTime(
-                    GameSave
-                ) -
-                Plot.PlantedAt
-            )
-        );
-
-    Timer.textContent =
-        FormatGardenRemainingTime(
-            RemainingTime
-        );
-
-    return Timer;
-}
-
-
-function FormatGardenRemainingTime(
-    Milliseconds
-) {
-    const TotalSeconds =
-        Math.max(
-            0,
-            Math.ceil(
-                Number(
-                    Milliseconds
-                ) / 1000
-            )
-        );
-
-    const Hours =
-        Math.floor(
-            TotalSeconds / 3600
-        );
-
-    const Minutes =
-        Math.floor(
-            (
-                TotalSeconds % 3600
-            ) / 60
-        );
-
-    const Seconds =
-        TotalSeconds % 60;
-
-
-    if (Hours > 0) {
-        return (
-            Hours +
-            ":" +
-            String(Minutes).padStart(
-                2,
-                "0"
-            ) +
-            ":" +
-            String(Seconds).padStart(
-                2,
-                "0"
-            )
-        );
-    }
-
-    return (
-        Minutes +
-        ":" +
-        String(Seconds).padStart(
-            2,
-            "0"
-        )
-    );
-}
-
-
 async function PlantSeed(
     PlotIndex
 ) {
diff --git a/Scripts/Garden/GardenView.js b/Scripts/Garden/GardenView.js
new file mode 100644
index 0000000..a7d77b1
--- /dev/null
+++ b/Scripts/Garden/GardenView.js
@@ -0,0 +1,572 @@
+const GardenBorderColours = [
+    "var(--Rosewater)",
+    "var(--Flamingo)",
+    "var(--Pink)",
+    "var(--Mauve)",
+    "var(--Red)",
+    "var(--Maroon)",
+    "var(--Peach)",
+    "var(--Yellow)",
+    "var(--Green)",
+    "var(--Teal)",
+    "var(--Sky)",
+    "var(--Sapphire)",
+    "var(--Blue)",
+    "var(--Lavender)"
+];
+
+const GardenPlotDefaultRotation = "East";
+const GardenPlotRotations = [
+    "North",
+    "East",
+    "South",
+    "West"
+];
+const GardenPlotRotationLabels = {
+    North: "^",
+    East: "->",
+    South: "v",
+    West: "<-"
+};
+
+
+function GetGardenBorderColour(
+    GardenIndex
+) {
+    const ColourCount =
+        GardenBorderColours.length;
+
+    const NormalizedIndex =
+        (
+            Number(GardenIndex) %
+            ColourCount +
+            ColourCount
+        ) % ColourCount;
+
+    return GardenBorderColours[
+        NormalizedIndex
+    ];
+}
+
+
+function GetGardenPlotRotation(
+    Plot
+) {
+    return GardenPlotRotations.includes(
+        Plot?.Rotation
+    )
+        ? Plot.Rotation
+        : GardenPlotDefaultRotation;
+}
+
+
+function GetGardenPlotRotationLabel(
+    Plot
+) {
+    return GardenPlotRotationLabels[
+        GetGardenPlotRotation(
+            Plot
+        )
+    ] ?? "->";
+}
+
+
+function GetGardenPlotGrowthProgress(
+    Plot,
+    Plant,
+    AtTime = Date.now()
+) {
+    const GrowthTime =
+        Number(Plant?.GrowthTime ?? 0);
+
+    if (GrowthTime <= 0) {
+        return 1;
+    }
+
+    const PlantedAt =
+        Number(Plot?.PlantedAt ?? 0);
+
+    return Math.max(
+        0,
+        Math.min(
+            (
+                Number(AtTime) -
+                PlantedAt
+            ) /
+            GrowthTime,
+            1
+        )
+    );
+}
+
+
+function GetGardenPlotImageSources(
+    Plot,
+    Plant
+) {
+    const Direction =
+        Plot !== null &&
+        Plant?.DirectionalSprites === true
+            ? GetGardenPlotRotation(
+                Plot
+            )
+            : null;
+
+    return GetPlantImageSources(
+        Plant ?? Plot?.Plant,
+        Direction
+    );
+}
+
+
+function GetGardenPlotImage(
+    Plot,
+    Plant,
+    Progress
+) {
+    const Images =
+        GetGardenPlotImageSources(
+            Plot,
+            Plant
+        );
+
+    if (Images.length === 0) {
+        return null;
+    }
+
+    if (Images.length === 1) {
+        return Images[0] ?? null;
+    }
+
+    if (Progress >= 1) {
+        return Images[
+            Images.length - 1
+        ] ?? null;
+    }
+
+    const GrowingImageCount =
+        Images.length - 1;
+
+    const ImageIndex = Math.min(
+        Math.floor(
+            Progress *
+            GrowingImageCount
+        ),
+        GrowingImageCount - 1
+    );
+
+    return Images[
+        ImageIndex
+    ] ?? null;
+}
+
+
+function FormatGardenRemainingTime(
+    Milliseconds
+) {
+    const TotalSeconds =
+        Math.max(
+            0,
+            Math.ceil(
+                Number(
+                    Milliseconds
+                ) / 1000
+            )
+        );
+
+    const Hours = Math.floor(
+        TotalSeconds / 3600
+    );
+
+    const Minutes = Math.floor(
+        (TotalSeconds % 3600) / 60
+    );
+
+    const Seconds =
+        TotalSeconds % 60;
+
+    if (Hours > 0) {
+        return (
+            Hours +
+            ":" +
+            String(Minutes).padStart(
+                2,
+                "0"
+            ) +
+            ":" +
+            String(Seconds).padStart(
+                2,
+                "0"
+            )
+        );
+    }
+
+    return (
+        Minutes +
+        ":" +
+        String(Seconds).padStart(
+            2,
+            "0"
+        )
+    );
+}
+
+
+function GetGardenPlotTimerText(
+    Plot,
+    Plant,
+    Progress,
+    AtTime = Date.now(),
+    CooldownState = null
+) {
+    if (
+        Plot === null ||
+        Plant === null ||
+        Plant === undefined
+    ) {
+        return "";
+    }
+
+    if (
+        Progress >= 1 &&
+        CooldownState !== null
+    ) {
+        return FormatGardenRemainingTime(
+            CooldownState.Remaining
+        );
+    }
+
+    if (Progress >= 1) {
+        return "Ready";
+    }
+
+    return FormatGardenRemainingTime(
+        Math.max(
+            0,
+            Number(Plant.GrowthTime ?? 0) -
+            (
+                Number(AtTime) -
+                Number(Plot.PlantedAt ?? 0)
+            )
+        )
+    );
+}
+
+
+function CreateGardenPlotView(
+    Options
+) {
+    const Plot =
+        Options.Plot ?? null;
+
+    const Plant =
+        Options.Plant;
+
+    const Progress =
+        Number(
+            Options.Progress ?? 0
+        );
+
+    const BorderProgress =
+        Number(
+            Options.BorderProgress ??
+            Progress
+        );
+
+    const DisplaySettings =
+        Options.DisplaySettings ?? {};
+
+    const Tile =
+        document.createElement(
+            "div"
+        );
+
+    Tile.className =
+        "PlantTile GardenPlot";
+
+    if (Options.ReadOnly === true) {
+        Tile.classList.add(
+            "GardenPlotReadOnly"
+        );
+    }
+
+    if (
+        Options.FunctionalCooldown ===
+        true
+    ) {
+        Tile.classList.add(
+            "GardenPlotFunctionalCooldown"
+        );
+    }
+
+    if (
+        Options.Mature === true
+    ) {
+        Tile.classList.add(
+            "GardenPlotMature"
+        );
+    }
+
+    if (Plot === null) {
+        Tile.classList.add(
+            "GardenPlotEmpty"
+        );
+    } else if (
+        Plant !== null &&
+        Plant !== undefined
+    ) {
+        Tile.style.setProperty(
+            "--GrowthProgress",
+            `${BorderProgress * 100}%`
+        );
+    }
+
+    const MainButton =
+        document.createElement(
+            "button"
+        );
+
+    MainButton.className =
+        "GardenPlotMain";
+    MainButton.type = "button";
+    MainButton.disabled =
+        Options.ReadOnly === true;
+
+    if (
+        DisplaySettings.ShowPlantNames
+    ) {
+        Tile.classList.add(
+            "GardenPlotWithName"
+        );
+
+        MainButton.appendChild(
+            CreateGardenPlotName(
+                Plot,
+                Plant
+            )
+        );
+    }
+
+    const Visual =
+        document.createElement(
+            "span"
+        );
+
+    Visual.className =
+        "GardenPlotVisual";
+
+    if (
+        Plot !== null &&
+        Plant === undefined
+    ) {
+        Visual.textContent = "?";
+    } else if (
+        Plot !== null &&
+        Plant !== null
+    ) {
+        const ImagePath =
+            Options.ImagePath ?? null;
+
+        if (ImagePath !== null) {
+            const Image =
+                document.createElement(
+                    "img"
+                );
+
+            Image.className =
+                "PlantSprite";
+            Image.alt =
+                Plant.Name ?? "";
+            Image.src =
+                ImagePath;
+            Image.draggable = false;
+
+            Visual.appendChild(
+                Image
+            );
+        } else {
+            const MissingImage =
+                document.createElement(
+                    "span"
+                );
+
+            MissingImage.className =
+                "GardenPlantMissing";
+            MissingImage.textContent =
+                Plant.Name ?? "Unknown";
+
+            Visual.appendChild(
+                MissingImage
+            );
+        }
+    }
+
+    MainButton.appendChild(
+        Visual
+    );
+
+    Tile.appendChild(
+        MainButton
+    );
+
+    AppendGardenPlotFooter(
+        Tile,
+        Plot,
+        Plant,
+        DisplaySettings,
+        Options.TimerText ?? "",
+        Options.ShowRotation === true,
+        Options.OnRotate,
+        Options.ReadOnly === true
+    );
+
+    return {
+        Tile,
+        MainButton,
+        Visual
+    };
+}
+
+
+function AppendGardenPlotFooter(
+    Tile,
+    Plot,
+    Plant,
+    DisplaySettings,
+    TimerText,
+    ShowRotation,
+    OnRotate,
+    ReadOnly
+) {
+    const ShowTimer =
+        DisplaySettings.ShowGrowthTimers ===
+        true;
+
+    if (
+        !ShowTimer &&
+        !ShowRotation
+    ) {
+        return;
+    }
+
+    Tile.classList.add(
+        "GardenPlotWithFooter"
+    );
+
+    const Footer =
+        document.createElement(
+            "span"
+        );
+
+    Footer.className =
+        "GardenPlotFooter";
+
+    if (
+        ShowTimer &&
+        ShowRotation
+    ) {
+        Footer.classList.add(
+            "GardenPlotFooterSplit"
+        );
+    }
+
+    if (ShowTimer) {
+        const Timer =
+            document.createElement(
+                "span"
+            );
+
+        Timer.className =
+            "GardenPlotTimer";
+        Timer.textContent =
+            TimerText;
+
+        Footer.appendChild(
+            Timer
+        );
+    }
+
+    if (ShowRotation) {
+        const RotateButton =
+            document.createElement(
+                "button"
+            );
+
+        RotateButton.className =
+            "GardenPlotRotationButton";
+        RotateButton.type = "button";
+        RotateButton.textContent =
+            GetGardenPlotRotationLabel(
+                Plot
+            );
+        RotateButton.title =
+            ReadOnly
+                ? "Plot rotation"
+                : "Rotate plot clockwise";
+        RotateButton.setAttribute(
+            "aria-label",
+            ReadOnly
+                ? (
+                    Plant?.Name ?? "Plot"
+                ) +
+                    " faces " +
+                    GetGardenPlotRotation(
+                        Plot
+                    ).toLowerCase()
+                : "Rotate " +
+                    (Plant?.Name ?? "plot") +
+                    " clockwise"
+        );
+        RotateButton.disabled =
+            ReadOnly;
+
+        if (
+            !ReadOnly &&
+            typeof OnRotate ===
+                "function"
+        ) {
+            RotateButton.addEventListener(
+                "click",
+                OnRotate
+            );
+        }
+
+        Footer.appendChild(
+            RotateButton
+        );
+    }
+
+    Tile.appendChild(
+        Footer
+    );
+}
+
+
+function CreateGardenPlotName(
+    Plot,
+    Plant
+) {
+    const Name =
+        document.createElement(
+            "span"
+        );
+
+    Name.className =
+        "GardenPlotName";
+
+    if (Plot === null) {
+        Name.textContent =
+            "Empty";
+    } else if (Plant === undefined) {
+        Name.textContent =
+            "Unknown";
+    } else {
+        Name.textContent =
+            Plant.Name;
+
+        Name.title =
+            Plant.Name;
+    }
+
+    return Name;
+}
diff --git a/Scripts/Garden/Gardener.js b/Scripts/Garden/Gardener.js
index 7e81d65..1d0a0bc 100644
--- a/Scripts/Garden/Gardener.js
+++ b/Scripts/Garden/Gardener.js
@@ -447,6 +447,11 @@ function RenderCurrentGardenerGarden() {
     const Garden =
         Gardens[GardenerGardenIndex];
 
+    const Section =
+        document.getElementById(
+            "GardenerGardensSection"
+        );
+
     const Grid =
         document.getElementById(
             "GardenerGardenGrid"
@@ -486,6 +491,13 @@ function RenderCurrentGardenerGarden() {
         return;
     }
 
+    Section?.style.setProperty(
+        "--GardenBorderColour",
+        GetGardenBorderColour(
+            GardenerGardenIndex
+        )
+    );
+
     Grid.style.setProperty(
         "--GardenWidth",
         Math.max(
@@ -551,214 +563,89 @@ function RenderCurrentGardenerGarden() {
 function CreateGardenerGardenPlot(
     Plot
 ) {
-    const Tile =
-        document.createElement(
-            "div"
-        );
-
-    Tile.className =
-        "PlantTile GardenPlot GardenPlotReadOnly";
-
-    const Main =
-        document.createElement(
-            "button"
-        );
-
-    Main.type = "button";
-    Main.className =
-        "GardenPlotMain";
-    Main.disabled = true;
-
-    const Visual =
-        document.createElement(
-            "span"
-        );
-
-    Visual.className =
-        "GardenPlotVisual";
-
-    if (
+    const Plant =
         Plot === null ||
         typeof Plot !== "object"
+            ? null
+            : Plants[Plot.Plant];
+
+    let Progress = 0;
+    let ImagePath = null;
+    let TimerText = "";
+
+    const RenderTime =
+        Date.now();
+
+    if (
+        Plot !== null &&
+        typeof Plot === "object" &&
+        Plant !== undefined
     ) {
-        Tile.classList.add(
-            "GardenPlotEmpty"
-        );
-
-        Main.title = "Empty plot";
-        Main.appendChild(
-            Visual
-        );
-        Tile.appendChild(
-            Main
-        );
-
-        return Tile;
-    }
-
-    const Plant =
-        Plants[Plot.Plant];
-
-    Tile.classList.add(
-        "GardenPlotWithName"
-    );
-
-    const PlantName =
-        document.createElement(
-            "span"
-        );
-
-    PlantName.className =
-        "GardenPlotName";
-
-    PlantName.textContent =
-        Plant?.Name ?? Plot.Plant ?? "Unknown";
-
-    Main.appendChild(
-        PlantName
-    );
-
-    if (Plant === undefined) {
-        Visual.textContent = "?";
-        Main.title = "Unknown plant";
-        Main.appendChild(
-            Visual
-        );
-        Tile.appendChild(
-            Main
-        );
-
-        return Tile;
-    }
-
-    const Progress =
-        GetGardenerGardenPlantProgress(
-            Plot,
-            Plant
-        );
-
-    Tile.style.setProperty(
-        "--GrowthProgress",
-        (Progress * 100) + "%"
-    );
-
-    if (Progress >= 1) {
-        Tile.classList.add(
-            "GardenPlotMature"
-        );
-    }
-
-    const ImageSource =
-        GetGardenerGardenPlantImage(
-            Plot,
-            Plant,
-            Progress
-        );
-
-    if (ImageSource !== null) {
-        const Image =
-            document.createElement(
-                "img"
+        Progress =
+            GetGardenPlotGrowthProgress(
+                Plot,
+                Plant,
+                RenderTime
             );
 
-        Image.className =
-            "PlantSprite";
-        Image.src = ImageSource;
-        Image.alt = "";
-        Image.draggable = false;
+        ImagePath =
+            GetGardenPlotImage(
+                Plot,
+                Plant,
+                Progress
+            );
 
-        Visual.appendChild(
-            Image
-        );
+        TimerText =
+            GetGardenPlotTimerText(
+                Plot,
+                Plant,
+                Progress,
+                RenderTime
+            );
     }
 
-    Main.title =
-        Plant.Name +
-        (Progress >= 1
-            ? " — mature"
-            : " — growing");
-
-    Main.appendChild(
-        Visual
-    );
-
-    Tile.appendChild(
-        Main
-    );
-
-    return Tile;
-}
-
-
-function GetGardenerGardenPlantProgress(
-    Plot,
-    Plant
-) {
-    const GrowthTime =
-        Number(Plant.GrowthTime ?? 0);
-
-    if (GrowthTime <= 0) {
-        return 1;
-    }
-
-    const PlantedAt =
-        Number(Plot.PlantedAt ?? 0);
-
-    const Age =
-        Date.now() - PlantedAt;
-
-    return Math.max(
-        0,
-        Math.min(
-            Age / GrowthTime,
-            1
-        )
-    );
-}
-
-
-function GetGardenerGardenPlantImage(
-    Plot,
-    Plant,
-    Progress
-) {
-    const Direction =
-        Plant.DirectionalSprites === true
-            ? Plot.Rotation ?? "East"
-            : null;
-
-    const Images =
-        GetPlantImageSources(
+    const View =
+        CreateGardenPlotView({
+            Plot:
+                Plot !== null &&
+                typeof Plot === "object"
+                    ? Plot
+                    : null,
             Plant,
-            Direction
-        );
+            Progress,
+            BorderProgress: Progress,
+            DisplaySettings: {
+                ShowPlantNames: true,
+                ShowGrowthTimers: true,
+                ShowPlotRotation: false
+            },
+            ImagePath,
+            TimerText,
+            ReadOnly: true,
+            Mature:
+                Plant !== null &&
+                Plant !== undefined &&
+                Progress >= 1
+        });
 
-    if (Images.length === 0) {
-        return null;
+    if (Plot === null) {
+        View.MainButton.title =
+            "Empty plot";
+    } else if (
+        Plant === null ||
+        Plant === undefined
+    ) {
+        View.MainButton.title =
+            "Unknown plant";
+    } else {
+        View.MainButton.title =
+            Plant.Name +
+            (Progress >= 1
+                ? " — mature"
+                : " — growing");
     }
 
-    if (Images.length === 1) {
-        return Images[0] ?? null;
-    }
-
-    if (Progress >= 1) {
-        return Images[
-            Images.length - 1
-        ] ?? null;
-    }
-
-    const GrowingImageCount =
-        Images.length - 1;
-
-    const Index = Math.min(
-        Math.floor(
-            Progress *
-            GrowingImageCount
-        ),
-        GrowingImageCount - 1
-    );
-
-    return Images[Index] ?? null;
+    return View.Tile;
 }