diff --git a/Assets/Img/Social.png b/Assets/Img/Social.png new file mode 100644 index 0000000..9068505 Binary files /dev/null and b/Assets/Img/Social.png differ 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 {