diff --git a/Assets/Img/Guide.png b/Assets/Img/Guide.png new file mode 100644 index 0000000..d2f5431 Binary files /dev/null and b/Assets/Img/Guide.png differ diff --git a/Assets/Img/Shop.png b/Assets/Img/Shop.png index 24a11b7..cf81d5b 100644 Binary files a/Assets/Img/Shop.png and b/Assets/Img/Shop.png differ diff --git a/Pages/Bits/Navbar.php b/Pages/Bits/Navbar.php index 50206a7..2f665cf 100644 --- a/Pages/Bits/Navbar.php +++ b/Pages/Bits/Navbar.php @@ -5,6 +5,7 @@ $NavbarPages = [ "Sarahtonin" => "/Pages/Sarahtonin.html", "Garden" => "/Pages/Garden.html", "Shop" => "/Pages/Shop.html", + "Guide" => "/Pages/Guide.html", "Profile" => "/Pages/Profile.html" ]; diff --git a/Pages/Guide.php b/Pages/Guide.php new file mode 100644 index 0000000..0f47eeb --- /dev/null +++ b/Pages/Guide.php @@ -0,0 +1,243 @@ + + + + + + + + + + +
+

Garden guide

+ +

+ A quick guide to growing plants, earning Dew, + and discovering mutations. You do not need to + know everything here before you start playing. + (But it's useful to do..) +

+ +
+

Getting started

+ +

+ A new Garden starts with a Red Rose seed and + some Dew. The Shop + stocks seeds you can buy to start gardening and + making some Dew. +

+ +

+ Seeds are consumable. Planting one removes it + from your inventory, so you need to buy + another if you want to grow the same plant again. + ..So just buy multiple at once. +

+
+ +
+

Planting and growing

+ +

+ In the Garden, + select a seed and then choose an empty plot. + Plants continue growing with real time, even while + you are away from the page. +

+ +

+ Plant sprites change as they grow. When the final + growth sprite appears, the plant is mature and can + be harvested. The Garden also shows when your next + plant will be ready. Don't worry: it'll also have + a green border around it when it's ready to harvest. +

+
+ +
+

Harvesting

+ +

+ Click a mature plant to harvest it. Harvesting gives + you Dew and makes the plot empty again, as it once was. +

+ +

+ More valuable seeds usually give more Dew. + The Shop shows the current seed cost, + harvest reward, growth time, and how many seeds you + already own. So you can be smart in your plant investments! +

+
+ +
+

The Shop

+ +

+ Some basic plants can be bought from the beginning. + Plants created through mutations become purchasable + in the shop after you discover them. +

+ +

+ Mutation-derived seed prices are based on their + recipes, so discovering and performing mutations is + often a useful alternative to simply buying the + resulting seed. +

+
+ +
+

Mutations

+ +

+ Most plants can create new plants or change when they are + arranged in a particular pattern. Unless a mutation + says otherwise, the plants involved need to be + mature before the recipe can work. +

+ +

+ As soon as a valid recipe exists, the Garden tries + the mutation. Some mutations are guaranteed, but + others may only have a chance to succeed. A failed + attempt may need to wait for its cooldown before + that same area can try mutating again. +

+ +
+ + Since you were good and actually read this... + + +

+ Try arranging mature plants like this: +

+ +
+
+ + Red Rose + +
+ +
+ Empty +
+ +
+ + Blue Rose + +
+
+ +

+ "Empty" means the middle plot really does need + to be empty. What happens next is for you to + find out. +

+
+
+ +
+

Discoveries

+ +

+ Discovering a new plant or mutation is saved with + your Garden. New plant discoveries also unlock + additional seeds in the Shop, so you can skip + creating them through mutations. Though it always + costs more to buy the seeds than create them by mutation.. +

+ +

+ Experiment with different plants, empty spaces, and + arrangements. Not every recipe has to look like the + example above. Some are logical (Red + Blue = Purple), + while others are visual, or maybe don't make sense at all. +

+
+ +
+

Tools

+ +

+ The Shovel removes a planted crop without giving a + harvest reward. Select it, click the plant you want + to remove, and click the Shovel again when you want + to have no tool equipped. It's very useful when you + decide you want to try a new mutation, for example. +

+
+ +
+

Your account

+ +

+ Your Profile + contains your username, colour, statistics, and + Account Key. Garden saves can sync through the API, + while the Account Key lets you use the same Garden + in another browser or on another device. + It's basically just like logging into an account. +

+ +

+ Treat your Account Key like a password. Anyone who + has it can load the same Garden account and mess stuff up. +

+
+
+ + + + + + + + + diff --git a/Scripts/Garden/Guide.js b/Scripts/Garden/Guide.js new file mode 100644 index 0000000..ebf93b6 --- /dev/null +++ b/Scripts/Garden/Guide.js @@ -0,0 +1,81 @@ +async function StartGuide() { + try { + await LoadGameContent(); + RenderGuideRecipePlants(); + } catch (Error) { + console.error( + "Couldn't load Guide plant images:", + Error + ); + } +} + + +function RenderGuideRecipePlants() { + const Cells = + document.querySelectorAll( + ".GuideRecipePlant[data-plant-key]" + ); + + + for ( + const Cell + of Cells + ) { + const PlantKey = + Cell.dataset.plantKey; + + const Plant = + Plants[PlantKey]; + + const Images = + PlantImages[PlantKey] ?? []; + + + if ( + Plant === undefined || + Images.length === 0 + ) { + continue; + } + + + const Image = + document.createElement( + "img" + ); + + Image.className = + "GuideRecipeImage"; + + Image.src = + Images[ + Images.length - 1 + ]; + + Image.alt = ""; + + + const Label = + Cell.querySelector( + ".GuideRecipeLabel" + ); + + + if (Label !== null) { + Label.textContent = + Plant.Name; + } + + + Cell.prepend( + Image + ); + } +} + + +document.addEventListener( + "DOMContentLoaded", + StartGuide +); diff --git a/Styles/Style.css b/Styles/Style.css index 854121f..198feb8 100644 --- a/Styles/Style.css +++ b/Styles/Style.css @@ -1298,3 +1298,127 @@ select { color: var(--Text); } + +/* + * Garden guide + */ + +.GuideSection { + margin-top: 1.5rem; + padding: 1rem; + + background-color: var(--Mantle); + border: 4px solid var(--Mauve); +} + +.GuideSection h2 { + margin-bottom: 1rem; +} + +.GuideSection > :last-child { + margin-bottom: 0; +} + +.GuideTip { + margin-top: 1.25rem; + padding: 1rem; + + background-color: var(--Base); + border: 3px solid var(--Yellow); +} + +.GuideTip > :first-child { + display: block; + margin-bottom: 0.75rem; +} + +.GuideRecipe { + display: grid; + grid-template-columns: + repeat( + 3, + minmax(0, 5.75rem) + ); + gap: 0.75rem; + + justify-content: center; + + margin: 1rem auto; +} + +.GuideRecipeCell { + display: flex; + flex-direction: column; + gap: 0.35rem; + + min-width: 0; + aspect-ratio: 1; + + align-items: center; + justify-content: center; + + padding: 0.35rem; + + text-align: center; + + background-color: var(--Surface0); + border: 3px solid var(--Surface2); +} + +.GuideRecipePlant { + color: var(--Text); +} + +.GuideRecipeEmpty { + color: var(--Overlay2); + background-color: var(--Crust); + border-style: dashed; +} + +.GuideRecipeImage { + display: block; + + width: 3.75rem; + height: 3.75rem; + + object-fit: contain; + image-rendering: pixelated; +} + +.GuideRecipeLabel { + max-width: 100%; + + overflow: hidden; + + font-size: 0.75rem; + line-height: 1.1; + text-overflow: ellipsis; + white-space: nowrap; +} + +.GuideHintText { + margin-bottom: 0; + + color: var(--Subtext1); + text-align: center; +} + +@media (max-width: 700px) { + .GuideSection { + padding: 0.75rem; + } + + .GuideRecipe { + grid-template-columns: + repeat( + 3, + minmax(0, 1fr) + ); + gap: 0.5rem; + } + + .GuideRecipeImage { + width: 3rem; + height: 3rem; + } +}