sarah/srhtnin.github.io
1
0 Fork 0
mirror of https://git.srhtnin.garden/sarah/srhtnin.github.io.git synced 2026-10-13 18:38:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
navbar.
This commit is contained in:
sarah committed 2026-09-04 18:59:16 +02:00
1 parent 2ea195475e
commit b3902d4f69
9 files changed
+317 -159
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Assets/Img/Social.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

Pages/Bits/Navbar.php
+47 -11
View File
@@ -1,32 +1,64 @@
<?php
$NavbarPages = [
"Home" => "/",
"Sarahtonin" => "/Pages/Sarahtonin.html",
"Garden" => "/Pages/Garden.html",
"Shop" => "/Pages/Shop.html",
"Plants" => "/Pages/Plants.html",
"Mutations" => "/Pages/Mutations.html",
"Guide" => "/Pages/Guide.html",
"Profile" => "/Pages/Profile.html"
"Home" => [
"Href" => "/",
"Icon" => "Home.png"
],
"Sarahtonin" => [
"Href" => "/Pages/Sarahtonin.html",
"Icon" => "Sarahtonin.png"
],
"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
+73 -97
View File
@@ -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>
<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>
<section
id="QuickBuy"
@@ -208,45 +210,48 @@ $PageSection = "Garden";
></div>
</section>
<div class="GardenLayout">
<section
id="Plots"
class="Panel GardenPlotsPanel"
>
<h2>Plots</h2>
<section
id="Tools"
class="Panel GardenToolsPanel"
>
<h2>Tools</h2>
<div class="ToolList">
<button
id="ShovelToolButton"
class="ActionButton ToolButton ToolButtonShovel"
type="button"
>
Shovel
</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>
</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>
</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
+54
View File
@@ -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
-1
View File
@@ -88,7 +88,6 @@ async function StartGame() {
);
await RenderUser();
await RenderLeaderboard();
}
Scripts/Garden/Leaderboard.js
+16 -7
View File
@@ -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() {
}
const UsernameDisplay =
document.getElementById(
"UsernameDisplay"
);
if (CurrentUsername === null) {
const UsernameDisplay =
document.getElementById(
"UsernameDisplay"
);
const CurrentUsername =
UsernameDisplay?.textContent;
CurrentUsername =
UsernameDisplay?.textContent ??
null;
}
for (
Scripts/Garden/Social.js
+30
View File
@@ -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
+27 -1
View File
@@ -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
+70 -42
View File
@@ -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;
width: 4rem;
display: flex;
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%;
height: 100%;
flex: 0 0 4rem;
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 {
display: grid;
grid-template-columns: minmax(0, 1fr) 12rem;
gap: 1rem;
align-items: start;
.GardenToolsPanel,
.GardenInventoryPanel,
.GardenPlotsPanel {
margin-bottom: 1rem;
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 {
margin-bottom: 0.75rem;
.GardenGridViewport {
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;
}
.GardenLayout {
grid-template-columns: 1fr;
}
.SeedPanel {
grid-row: 1;
}
.SeedList, .ToolList {
flex-direction: row;
flex-wrap: wrap;
}
.SeedButton, .ToolButton {
width: auto;
padding: 1rem;
}
.GardenGrid {
grid-row: 2;
width: max-content;
min-width: 100%;
grid-template-columns: repeat(
var(--GardenWidth),
minmax(4.25rem, 1fr)
);
}
.LeaderboardRankColumn, .LeaderboardRank {