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.
+
+
+
+
+
+
+ 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;
+ }
+}