mirror of
https://git.srhtnin.garden/sarah/srhtnin.github.io.git
synced 2026-10-13 18:38:11 +02:00
Added guide page
This commit is contained in:
sarah committed
1 parent
ce6dced3ad
commit
40db65d955
6 files changed
+449
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
@@ -5,6 +5,7 @@ $NavbarPages = [
|
|||||||
"Sarahtonin" => "/Pages/Sarahtonin.html",
|
"Sarahtonin" => "/Pages/Sarahtonin.html",
|
||||||
"Garden" => "/Pages/Garden.html",
|
"Garden" => "/Pages/Garden.html",
|
||||||
"Shop" => "/Pages/Shop.html",
|
"Shop" => "/Pages/Shop.html",
|
||||||
|
"Guide" => "/Pages/Guide.html",
|
||||||
"Profile" => "/Pages/Profile.html"
|
"Profile" => "/Pages/Profile.html"
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
+243
@@ -0,0 +1,243 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
$PageTitle = "Guide";
|
||||||
|
$PageSection = "Guide";
|
||||||
|
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!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>Garden guide</h1>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
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..)
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<section
|
||||||
|
id="GettingStarted"
|
||||||
|
class="GuideSection"
|
||||||
|
>
|
||||||
|
<h2>Getting started</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
A new Garden starts with a Red Rose seed and
|
||||||
|
some Dew. The <a href="/Pages/Shop.html">Shop</a>
|
||||||
|
stocks seeds you can buy to start gardening and
|
||||||
|
making some Dew.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section
|
||||||
|
id="Planting"
|
||||||
|
class="GuideSection"
|
||||||
|
>
|
||||||
|
<h2>Planting and growing</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
In the <a href="/Pages/Garden.html">Garden</a>,
|
||||||
|
select a seed and then choose an empty plot.
|
||||||
|
Plants continue growing with real time, even while
|
||||||
|
you are away from the page.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section
|
||||||
|
id="Harvesting"
|
||||||
|
class="GuideSection"
|
||||||
|
>
|
||||||
|
<h2>Harvesting</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Click a mature plant to harvest it. Harvesting gives
|
||||||
|
you Dew and makes the plot empty again, as it once was.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
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!
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section
|
||||||
|
id="Shop"
|
||||||
|
class="GuideSection"
|
||||||
|
>
|
||||||
|
<h2>The Shop</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Some basic plants can be bought from the beginning.
|
||||||
|
Plants created through mutations become purchasable
|
||||||
|
in the shop after you discover them.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section
|
||||||
|
id="Mutations"
|
||||||
|
class="GuideSection"
|
||||||
|
>
|
||||||
|
<h2>Mutations</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="GuideTip">
|
||||||
|
<strong>
|
||||||
|
Since you were good and actually read this...
|
||||||
|
</strong>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Try arranging mature plants like this:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div
|
||||||
|
id="GuideMutationHint"
|
||||||
|
class="GuideRecipe"
|
||||||
|
aria-label="Red Rose, empty plot, Blue Rose"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="GuideRecipeCell GuideRecipePlant"
|
||||||
|
data-plant-key="RedRose"
|
||||||
|
>
|
||||||
|
<span class="GuideRecipeLabel">
|
||||||
|
Red Rose
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="GuideRecipeCell GuideRecipeEmpty"
|
||||||
|
>
|
||||||
|
<span>Empty</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="GuideRecipeCell GuideRecipePlant"
|
||||||
|
data-plant-key="BlueRose"
|
||||||
|
>
|
||||||
|
<span class="GuideRecipeLabel">
|
||||||
|
Blue Rose
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="GuideHintText">
|
||||||
|
"Empty" means the middle plot really does need
|
||||||
|
to be empty. What happens next is for you to
|
||||||
|
find out.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section
|
||||||
|
id="Discoveries"
|
||||||
|
class="GuideSection"
|
||||||
|
>
|
||||||
|
<h2>Discoveries</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
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..
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section
|
||||||
|
id="Tools"
|
||||||
|
class="GuideSection"
|
||||||
|
>
|
||||||
|
<h2>Tools</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section
|
||||||
|
id="Account"
|
||||||
|
class="GuideSection"
|
||||||
|
>
|
||||||
|
<h2>Your account</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Your <a href="/Pages/Profile.html">Profile</a>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Treat your Account Key like a password. Anyone who
|
||||||
|
has it can load the same Garden account and mess stuff up.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script src="/Scripts/Garden/PlantImages.js"></script>
|
||||||
|
<script src="/Scripts/Garden/Plants.js"></script>
|
||||||
|
<script src="/Scripts/Garden/Mutations.js"></script>
|
||||||
|
<script src="/Scripts/Garden/Save.js"></script>
|
||||||
|
<script src="/Scripts/Garden/Content.js"></script>
|
||||||
|
<script src="/Scripts/Garden/Guide.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -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
|
||||||
|
);
|
||||||
@@ -1298,3 +1298,127 @@ select {
|
|||||||
|
|
||||||
color: var(--Text);
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in new issue
Block a user