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",
|
||||
"Garden" => "/Pages/Garden.html",
|
||||
"Shop" => "/Pages/Shop.html",
|
||||
"Guide" => "/Pages/Guide.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);
|
||||
}
|
||||
|
||||
/*
|
||||
* 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