Added mutations encyclopedia.

Pages/Bits/Navbar.php

@@ -6,6 +6,7 @@ $NavbarPages = [
     "Garden" => "/Pages/Garden.html",
     "Shop" => "/Pages/Shop.html",
     "Plants" => "/Pages/Plants.html",
+    "Mutations" => "/Pages/Mutations.html",
     "Guide" => "/Pages/Guide.html",
     "Profile" => "/Pages/Profile.html"
 ];

Pages/Mutations.php

@@ -0,0 +1,48 @@
+<?php
+
+$PageTitle = "Mutations";
+$PageSection = "Mutations";
+
+
+?>
+
+<!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>Mutation encyclopedia</h1>
+
+            <p>
+                Every mutation you discover is recorded here.
+                Once found, its recipe and result stay visible so
+                you can recreate it whenever you want.
+            </p>
+
+            <div
+                id="MutationEncyclopediaList"
+                class="MutationEncyclopediaList"
+            ></div>
+
+            <p
+                id="MutationEncyclopediaMessage"
+                class="PageMessage"
+                aria-live="polite"
+            >
+                Loading discovered mutations...
+            </p>
+        </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/Economy.js"></script>
+        <script src="/Scripts/Garden/MutationEncyclopedia.js"></script>
+    </body>
+</html>

Styles/Style.css

@@ -1225,7 +1225,7 @@ select {
     display: grid;
     grid-template-columns:
         repeat(
-            3,
+            var(--RecipeWidth, 3),
             minmax(0, 5.75rem)
         );
     gap: 0.75rem;
@@ -1288,7 +1288,7 @@ select {
     .GuideRecipe {
         grid-template-columns:
             repeat(
-                3,
+                var(--RecipeWidth, 3),
                 minmax(0, 1fr)
             );
         gap: 0.5rem;
@@ -1475,3 +1475,246 @@ select {
         gap: 0.2rem;
     }
 }
+
+
+/*
+ * Mutation encyclopedia
+ */
+
+.MutationEncyclopediaList {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    margin-top: 1.5rem;
+}
+
+.MutationEncyclopediaCard {
+    overflow: hidden;
+
+    box-shadow: 3px 3px 0 var(--Crust);
+}
+
+.MutationEncyclopediaHeader {
+    display: flex;
+    gap: 0.75rem;
+
+    align-items: baseline;
+
+    padding: 0.75rem 1rem;
+
+    background-color: var(--Surface0);
+    border-bottom: 3px solid var(--Surface2);
+}
+
+.MutationEncyclopediaHeader h2 {
+    margin: 0;
+
+    color: var(--Mauve);
+}
+
+.MutationEncyclopediaNumber {
+    flex: 0 0 auto;
+
+    color: var(--Overlay2);
+
+    font-size: 1.1rem;
+}
+
+.MutationEncyclopediaBody {
+    padding: 1rem;
+}
+
+.MutationEncyclopediaDescription {
+    margin-bottom: 1rem;
+}
+
+.MutationEncyclopediaStats {
+    display: grid;
+    grid-template-columns:
+        repeat(
+            2,
+            minmax(0, 1fr)
+        );
+    gap: 0 1rem;
+
+    margin-bottom: 1.25rem;
+}
+
+.MutationEncyclopediaStat {
+    display: flex;
+    justify-content: space-between;
+    gap: 0.75rem;
+
+    padding: 0.35rem 0;
+
+    border-bottom: 2px solid var(--Surface0);
+}
+
+.MutationEncyclopediaStatName {
+    flex: 0 0 auto;
+
+    color: var(--Subtext1);
+}
+
+.MutationEncyclopediaStat > :last-child {
+    min-width: 0;
+
+    text-align: right;
+    overflow-wrap: anywhere;
+}
+
+.MutationEncyclopediaRecipeSection {
+    margin-bottom: 1.25rem;
+    padding: 1rem;
+
+    background-color: var(--Base);
+    border: 3px solid var(--Surface2);
+}
+
+.MutationEncyclopediaRecipeSection > h3 {
+    margin-bottom: 0.75rem;
+
+    color: var(--Peach);
+}
+
+.MutationEncyclopediaRecipeFlow {
+    display: grid;
+    grid-template-columns:
+        minmax(0, 1fr)
+        auto
+        minmax(0, 1fr);
+    gap: 0.75rem;
+
+    align-items: center;
+}
+
+.MutationEncyclopediaRecipePanel {
+    min-width: 0;
+}
+
+.MutationEncyclopediaRecipePanel h4 {
+    margin-bottom: 0.25rem;
+
+    color: var(--Subtext1);
+
+    font-size: 1rem;
+    text-align: center;
+}
+
+.MutationEncyclopediaRecipePanel .GuideRecipe {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.MutationEncyclopediaRecipeArrow {
+    color: var(--Yellow);
+
+    font-size: 2rem;
+}
+
+.MutationRecipeAny {
+    color: var(--Overlay2);
+    background-color: var(--Mantle);
+    border-style: dashed;
+}
+
+.MutationRecipeMatcher {
+    color: var(--Sky);
+    background-color: var(--Mantle);
+}
+
+.MutationRecipeKeep {
+    color: var(--Subtext1);
+    background-color: var(--Surface0);
+}
+
+.MutationRecipeCapture {
+    color: var(--Lavender);
+    background-color: var(--Surface0);
+}
+
+.MutationRecipeText {
+    max-width: 100%;
+
+    overflow-wrap: anywhere;
+
+    font-size: 0.75rem;
+    line-height: 1.15;
+    white-space: pre-line;
+}
+
+.MutationEncyclopediaMissingRecipe {
+    margin-bottom: 0;
+
+    color: var(--Overlay1);
+}
+
+.MutationEncyclopediaRelations {
+    display: grid;
+    grid-template-columns:
+        repeat(
+            2,
+            minmax(0, 1fr)
+        );
+    gap: 1rem;
+}
+
+.MutationEncyclopediaRelationGroup {
+    padding: 0.75rem;
+
+    background-color: var(--Base);
+    border: 3px solid var(--Surface2);
+}
+
+.MutationEncyclopediaRelationGroup h3 {
+    margin-bottom: 0.5rem;
+
+    color: var(--Peach);
+
+    font-size: 1rem;
+}
+
+.MutationEncyclopediaRelationList {
+    margin: 0;
+    padding-left: 1.25rem;
+}
+
+.MutationEncyclopediaRelationList li {
+    margin-bottom: 0.35rem;
+}
+
+.MutationEncyclopediaRelationList li:last-child {
+    margin-bottom: 0;
+}
+
+.MutationEncyclopediaRelationUnknown,
+.MutationEncyclopediaRelationEmpty {
+    color: var(--Overlay1);
+}
+
+@media (max-width: 700px) {
+    .MutationEncyclopediaStats,
+    .MutationEncyclopediaRelations {
+        grid-template-columns: 1fr;
+    }
+
+    .MutationEncyclopediaRecipeFlow {
+        grid-template-columns: 1fr;
+    }
+
+    .MutationEncyclopediaRecipeArrow {
+        justify-self: center;
+
+        transform: rotate(90deg);
+    }
+
+    .MutationEncyclopediaStat {
+        flex-direction: column;
+        gap: 0.2rem;
+    }
+
+    .MutationEncyclopediaStat > :last-child {
+        text-align: left;
+    }
+}