From b3902d4f69113089d4a72e8e7e4d49cb47d72b13 Mon Sep 17 00:00:00 2001 From: Sarahtonin Date: Fri, 4 Sep 2026 18:59:16 +0200 Subject: [PATCH] Added social page and fixed garden page layout. ALSO added text next to navbar. --- Assets/Img/Social.png | Bin 0 -> 1288 bytes Pages/Bits/Navbar.php | 58 +++++++++--- Pages/Garden.php | 170 +++++++++++++++------------------- Pages/Social.php | 54 +++++++++++ Scripts/Garden/Garden.js | 1 - Scripts/Garden/Leaderboard.js | 23 +++-- Scripts/Garden/Social.js | 30 ++++++ Scripts/Garden/Users.js | 28 +++++- Styles/Style.css | 112 +++++++++++++--------- 9 files changed, 317 insertions(+), 159 deletions(-) create mode 100644 Assets/Img/Social.png create mode 100644 Pages/Social.php create mode 100644 Scripts/Garden/Social.js diff --git a/Assets/Img/Social.png b/Assets/Img/Social.png new file mode 100644 index 0000000000000000000000000000000000000000..906850543406e699bca1a7131f835ae223f44e15 GIT binary patch literal 1288 zcmeAS@N?(olHy`uVBq!ia0y~yU~~Xs4rZXpFTcH^J{ba&qwQ*JzhBF(bdj7uS<@<>D=;b%f5eSuYK8d z=-#rmCnnF_RNpcur=Tq&y1>;v%FxI~PEJokLRC;u+IVs16riEfB|(0{4F7S0Bbh~} z3=AxGo-U3d6?5L+bu1FLW^fHGW8i7n|9|Q~$)p8BclUWkYo3#~%6$Fps;yj&PLSvIOF<5~({;lQPjAG|-kcYcw`pQv{a zgBoscVmPMLV91?thDl;GocSZ@jKZ&NcXn&6-(>5l+Lo$LH-!*e% zZS1?qQ-{7aPGMkV+7r!XFpa5aDMPa6fd~kbouRLLeNyb*ihZ_IcHcA$WMbhEP;h7f zDrVs@VC;*YZ(COS`uS~Mi*q~rO?QjIq(ExkGwbNTO1u7!?a$BZ?>Ez=&$GjI3Md>% zXGm|%Zuy%0_?B(X>r3+c%>}O2KloVv_?GWd>@IOVA5dUNpy|K8ZyRuhK2k(rF!hhFVZ85enJp<_@@HF6gZu=nj+?&8 z?tJvW>+$=TKCDNM50t1mcOy-{(&n4qsnt3B!MMCR!?fd_{Wja|NUP?ZzizOjrvX@U zsL@ROb||NJ>%Ow!2TMwh1=j7-L`zZ#pZv0E*lhkap7qYZMqswYo^0awel>mY_xbI! zX217-?cVAON?-7_^T(axdi>7{d4t+k6=-4trw#q-_x7J%-SD*MP?`LOIgCi@1z8m% z)1RD%@cfr{36{D3FaOp@@2-(LP=N#eT{=DgiQR+E+710FXvrVub<|8jg6Mqq51($Q n%{z;n@erYeM|4fS_=kGCh=PqKTN-+R1rCF!tDnm{r-UW|o$V9v literal 0 HcmV?d00001 diff --git a/Pages/Bits/Navbar.php b/Pages/Bits/Navbar.php index 48c717f..5bcd123 100644 --- a/Pages/Bits/Navbar.php +++ b/Pages/Bits/Navbar.php @@ -1,32 +1,64 @@ "/", - "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" + ] ]; ?> diff --git a/Pages/Garden.php b/Pages/Garden.php index 8d6622a..42f5d25 100644 --- a/Pages/Garden.php +++ b/Pages/Garden.php @@ -15,12 +15,46 @@ $PageSection = "Garden";
-

Garden

+

Your Garden

+ + + + + +
+ +
+

Info

+
@@ -130,39 +164,7 @@ $PageSection = "Garden";
- - -
- - - - - -
+
-
-
-

Plots

+
+

Tools

+
+ +
+
+ +
+

Inventory

+ +
+
+ +
+

Plots

+ +
-
- -
-

Seeds

- -
- -

- Tools -

- -
- -
-
-
+ +

Select a seed, then choose an empty plot. @@ -287,34 +292,6 @@ $PageSection = "Garden"; -

-

Leaderboard

- -
- - - - - - - - - - - - -
- # - - Username - - Dew -
-
-
@@ -326,7 +303,6 @@ $PageSection = "Garden"; - diff --git a/Pages/Social.php b/Pages/Social.php new file mode 100644 index 0000000..a41f253 --- /dev/null +++ b/Pages/Social.php @@ -0,0 +1,54 @@ + + + + + + + + + + +
+

Social

+ +
+

Leaderboard

+ +
+ + + + + + + + + + + + +
+ # + + Username + + Dew +
+
+
+
+ + + + + + + diff --git a/Scripts/Garden/Garden.js b/Scripts/Garden/Garden.js index f675a72..e8f2324 100644 --- a/Scripts/Garden/Garden.js +++ b/Scripts/Garden/Garden.js @@ -88,7 +88,6 @@ async function StartGame() { ); await RenderUser(); - await RenderLeaderboard(); } diff --git a/Scripts/Garden/Leaderboard.js b/Scripts/Garden/Leaderboard.js index 231e168..4808c59 100644 --- a/Scripts/Garden/Leaderboard.js +++ b/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() { } - const UsernameDisplay = - document.getElementById( - "UsernameDisplay" - ); + if (CurrentUsername === null) { + const UsernameDisplay = + document.getElementById( + "UsernameDisplay" + ); - const CurrentUsername = - UsernameDisplay?.textContent; + CurrentUsername = + UsernameDisplay?.textContent ?? + null; + } for ( diff --git a/Scripts/Garden/Social.js b/Scripts/Garden/Social.js new file mode 100644 index 0000000..e5bb34a --- /dev/null +++ b/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 +); diff --git a/Scripts/Garden/Users.js b/Scripts/Garden/Users.js index 8049b5e..cecbbf9 100644 --- a/Scripts/Garden/Users.js +++ b/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(); } diff --git a/Styles/Style.css b/Styles/Style.css index 23526a9..4ed2f03 100644 --- a/Styles/Style.css +++ b/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; - 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 {