srhtnin.github.io/Pages/Garden.php

<?php

$PageTitle = "Garden";
$PageSection = "Garden";


?>

<!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>Garden</h1>

            <div class="StatusPanel">
                <div class="GardenStatusLine">
                    <strong>Dew:</strong>
                    <span id="DewAmount">0</span>
                </div>

                <div
                    id="NextHarvestLine"
                    class="GardenStatusLine"
                >
                    <strong>Next harvest:</strong>
                    <span id="NextHarvest">Nothing planted</span>
                </div>

                <div
                    id="GardenOverviewDetails"
                    class="GardenOverviewDetails"
                    hidden
                >
                    <div
                        id="GardenSizeOverviewLine"
                        class="GardenStatusLine"
                    >
                        <strong>Garden size:</strong>
                        <span id="GardenSizeOverview">3×3 (9)</span>
                    </div>

                    <div
                        id="EmptyPlotsOverviewLine"
                        class="GardenStatusLine"
                    >
                        <strong>Empty plots:</strong>
                        <span id="EmptyPlotsOverview">9/9</span>
                    </div>

                    <div
                        id="PlantedPlotsOverviewLine"
                        class="GardenStatusLine"
                    >
                        <strong>Planted plots:</strong>
                        <span id="PlantedPlotsOverview">0/9</span>
                    </div>

                    <div
                        id="GrowingPlotsOverviewLine"
                        class="GardenStatusLine"
                    >
                        <strong>Growing:</strong>
                        <span id="GrowingPlotsOverview">0/9</span>
                    </div>

                    <div
                        id="ReadyPlotsOverviewLine"
                        class="GardenStatusLine"
                    >
                        <strong>Ready to harvest:</strong>
                        <span id="ReadyPlotsOverview">0/9</span>
                    </div>
                </div>
            </div>

            <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>

            <div class="GardenLayout">
                <section id="Plots">
                    <h2>Plots</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
                            id="ShovelToolButton"
                            class="ActionButton ToolButton ToolButtonShovel"
                            type="button"
                        >
                            Shovel
                        </button>
                    </div>
                </section>
            </div>

            <p id="GardenMessage" class="PageMessage">
                Select a seed, then choose an empty plot.
            </p>

            <section
                id="Player"
                class="Panel GardenUser"
            >
                <h2>Player</h2>

                <p>
                    Username:
                    <strong id="UsernameDisplay">
                        Loading...
                    </strong>
                </p>

                <form
                    id="UsernameForm"
                    hidden
                >
                    <input
                        id="UsernameInput"
                        type="text"
                        minlength="3"
                        maxlength="24"
                        autocomplete="username"
                        placeholder="Username"
                        required
                    >

                    <button type="submit">
                        Set username
                    </button>

                    <p id="UsernameMessage"></p>
                </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>
        <script src="/Scripts/Garden/Plants.js"></script>
        <script src="/Scripts/Garden/Mutations.js"></script>
        <script src="/Scripts/Garden/Save.js"></script>
        <script src="/Scripts/Garden/Content.js"></script>
        <script src="/Scripts/Garden/Economy.js"></script>
        <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>