mirror of
https://git.srhtnin.garden/sarah/srhtnin.github.io.git
synced 2026-10-13 18:38:11 +02:00
Added editor pages for plants and mutations.
This commit is contained in:
sarah committed
1 parent
953df07878
commit
c2a78b18b4
6 files changed
+4288
-2
No files matched your search
+24
-2
@@ -30,9 +30,31 @@ $PageSection = "Admin";
|
||||
hidden
|
||||
>
|
||||
<p>
|
||||
Admin access verified. Garden content
|
||||
editors will live here.
|
||||
Content tools for editing the Garden catalogue.
|
||||
Changes here affect the live game data.
|
||||
</p>
|
||||
|
||||
<div class="AdminEditorNavigation">
|
||||
<a
|
||||
class="ActionButton AdminEditorLink"
|
||||
href="/Pages/AdminPlants.html"
|
||||
>
|
||||
<strong>Plant editor</strong>
|
||||
<span>
|
||||
Add plants and edit their catalogue data.
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="ActionButton AdminEditorLink"
|
||||
href="/Pages/AdminMutations.html"
|
||||
>
|
||||
<strong>Mutation editor</strong>
|
||||
<span>
|
||||
Build mutation recipes with a visual grid.
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
@@ -0,0 +1,432 @@
|
||||
<?php
|
||||
|
||||
$PageTitle = "Admin mutations";
|
||||
$PageSection = "Admin";
|
||||
|
||||
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en" data-palette="CatppuccinMocha">
|
||||
<?php require __DIR__ . "/Bits/Head.php"; ?>
|
||||
|
||||
<body>
|
||||
<?php require __DIR__ . "/Bits/Navbar.php"; ?>
|
||||
|
||||
<main class="MainContainer AdminMutationMain">
|
||||
<h1>Mutation editor</h1>
|
||||
|
||||
<p>
|
||||
Edit mutation settings and build the recipe visually.
|
||||
Select a cell in either grid to change what it means.
|
||||
</p>
|
||||
|
||||
<p
|
||||
id="AdminAccessMessage"
|
||||
class="PageMessage"
|
||||
aria-live="polite"
|
||||
>
|
||||
Checking admin access...
|
||||
</p>
|
||||
|
||||
<div
|
||||
id="AdminContent"
|
||||
hidden
|
||||
>
|
||||
<div class="AdminEditorToolbar">
|
||||
<label for="AdminMutationSelect">
|
||||
Mutation
|
||||
</label>
|
||||
|
||||
<select id="AdminMutationSelect"></select>
|
||||
|
||||
<button
|
||||
id="AdminMutationNewButton"
|
||||
class="ActionButton AdminInlineButton"
|
||||
type="button"
|
||||
>
|
||||
New mutation
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form
|
||||
id="AdminMutationForm"
|
||||
class="Panel AdminEditorForm"
|
||||
>
|
||||
<div class="AdminEditorGrid">
|
||||
<label class="AdminEditorField">
|
||||
<span>ID</span>
|
||||
<input
|
||||
id="AdminMutationId"
|
||||
type="number"
|
||||
min="1"
|
||||
step="1"
|
||||
required
|
||||
>
|
||||
<small>
|
||||
Permanent. New mutations default to the next ID.
|
||||
</small>
|
||||
</label>
|
||||
|
||||
<label class="AdminEditorField">
|
||||
<span>Mutation Key</span>
|
||||
<input
|
||||
id="AdminMutationKey"
|
||||
type="text"
|
||||
maxlength="64"
|
||||
required
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="AdminEditorField AdminEditorWideField">
|
||||
<span>Name</span>
|
||||
<input
|
||||
id="AdminMutationName"
|
||||
type="text"
|
||||
maxlength="128"
|
||||
required
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="AdminEditorField AdminEditorWideField">
|
||||
<span>Description</span>
|
||||
<textarea
|
||||
id="AdminMutationDescription"
|
||||
rows="4"
|
||||
required
|
||||
></textarea>
|
||||
</label>
|
||||
|
||||
<label class="AdminEditorField">
|
||||
<span>Priority</span>
|
||||
<input
|
||||
id="AdminMutationPriority"
|
||||
type="number"
|
||||
step="1"
|
||||
required
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="AdminEditorField">
|
||||
<span>Chance (%)</span>
|
||||
<input
|
||||
id="AdminMutationChance"
|
||||
type="number"
|
||||
min="0"
|
||||
max="100"
|
||||
step="0.01"
|
||||
required
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="AdminEditorField">
|
||||
<span>Cooldown (ms)</span>
|
||||
<input
|
||||
id="AdminMutationCooldown"
|
||||
type="number"
|
||||
min="0"
|
||||
step="1000"
|
||||
required
|
||||
>
|
||||
<small id="AdminMutationCooldownHint"></small>
|
||||
</label>
|
||||
|
||||
<label class="AdminEditorField">
|
||||
<span>Rotation</span>
|
||||
<select id="AdminMutationRotation">
|
||||
<option value="None">None</option>
|
||||
<option value="Any">Any</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="AdminEditorCheckField">
|
||||
<input
|
||||
id="AdminMutationAllowImmature"
|
||||
type="checkbox"
|
||||
>
|
||||
<span>
|
||||
Allow immature plants
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<section class="AdminMutationRecipeSection">
|
||||
<div class="AdminMutationRecipeHeader">
|
||||
<div>
|
||||
<h2>Visual recipe</h2>
|
||||
<p>
|
||||
Pattern and result always use the same dimensions.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="AdminMutationDimensions">
|
||||
<label>
|
||||
Width
|
||||
<input
|
||||
id="AdminMutationWidth"
|
||||
type="number"
|
||||
min="1"
|
||||
max="7"
|
||||
step="1"
|
||||
value="3"
|
||||
>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Height
|
||||
<input
|
||||
id="AdminMutationHeight"
|
||||
type="number"
|
||||
min="1"
|
||||
max="7"
|
||||
step="1"
|
||||
value="1"
|
||||
>
|
||||
</label>
|
||||
|
||||
<button
|
||||
id="AdminMutationResizeButton"
|
||||
class="ActionButton AdminInlineButton"
|
||||
type="button"
|
||||
>
|
||||
Resize
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="AdminMutationRecipeFlow">
|
||||
<div class="AdminMutationGridPanel">
|
||||
<h3>Arrange</h3>
|
||||
<div
|
||||
id="AdminMutationPatternGrid"
|
||||
class="GuideRecipe AdminMutationGrid"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="MutationEncyclopediaRecipeArrow"
|
||||
aria-hidden="true"
|
||||
>
|
||||
→
|
||||
</span>
|
||||
|
||||
<div class="AdminMutationGridPanel">
|
||||
<h3>Result</h3>
|
||||
<div
|
||||
id="AdminMutationResultGrid"
|
||||
class="GuideRecipe AdminMutationGrid"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="AdminMutationCellEditor"
|
||||
class="AdminMutationCellEditor"
|
||||
hidden
|
||||
>
|
||||
<h3 id="AdminMutationCellEditorTitle">
|
||||
Cell
|
||||
</h3>
|
||||
|
||||
<div id="AdminMutationPatternCellControls">
|
||||
<label class="AdminEditorField">
|
||||
<span>Type</span>
|
||||
<select id="AdminMutationPatternCellType">
|
||||
<option value="Any">Any</option>
|
||||
<option value="Empty">Empty</option>
|
||||
<option value="Plant">Exact plant</option>
|
||||
<option value="Matcher">Tag matcher</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label
|
||||
id="AdminMutationPatternPlantRow"
|
||||
class="AdminEditorField"
|
||||
hidden
|
||||
>
|
||||
<span>Plant</span>
|
||||
<select id="AdminMutationPatternPlant"></select>
|
||||
</label>
|
||||
|
||||
<div
|
||||
id="AdminMutationMatcherRows"
|
||||
class="AdminMatcherFields"
|
||||
hidden
|
||||
>
|
||||
<label class="AdminEditorField">
|
||||
<span>Exact plant (optional)</span>
|
||||
<select id="AdminMutationMatcherPlant"></select>
|
||||
</label>
|
||||
|
||||
<label class="AdminEditorField">
|
||||
<span>Required tags</span>
|
||||
<input
|
||||
id="AdminMutationMatcherTags"
|
||||
type="text"
|
||||
placeholder="Rose, Red"
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="AdminEditorField">
|
||||
<span>Any of these tags</span>
|
||||
<input
|
||||
id="AdminMutationMatcherTagsAny"
|
||||
type="text"
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="AdminEditorField">
|
||||
<span>Excluded tags</span>
|
||||
<input
|
||||
id="AdminMutationMatcherTagsNot"
|
||||
type="text"
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="AdminEditorField">
|
||||
<span>Capture name</span>
|
||||
<input
|
||||
id="AdminMutationMatcherCapture"
|
||||
type="text"
|
||||
placeholder="ParentA"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="AdminMutationResultCellControls"
|
||||
hidden
|
||||
>
|
||||
<label class="AdminEditorField">
|
||||
<span>Type</span>
|
||||
<select id="AdminMutationResultCellType">
|
||||
<option value="Keep">Keep</option>
|
||||
<option value="Empty">Empty</option>
|
||||
<option value="Plant">Plant</option>
|
||||
<option value="Capture">Captured plant</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label
|
||||
id="AdminMutationResultPlantRow"
|
||||
class="AdminEditorField"
|
||||
hidden
|
||||
>
|
||||
<span>Plant</span>
|
||||
<select id="AdminMutationResultPlant"></select>
|
||||
</label>
|
||||
|
||||
<label
|
||||
id="AdminMutationResultCaptureRow"
|
||||
class="AdminEditorField"
|
||||
hidden
|
||||
>
|
||||
<span>Capture name</span>
|
||||
<input
|
||||
id="AdminMutationResultCapture"
|
||||
type="text"
|
||||
placeholder="ParentA"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="AdminMutationRelationsSection">
|
||||
<h2>Plant relationships</h2>
|
||||
|
||||
<p>
|
||||
These power discoveries and encyclopedia links.
|
||||
They are metadata, so tag-based recipes may still
|
||||
need explicit plants selected here.
|
||||
</p>
|
||||
|
||||
<div class="AdminMutationRelationColumns">
|
||||
<fieldset>
|
||||
<legend>Plants used</legend>
|
||||
<div
|
||||
id="AdminMutationPlantsUsed"
|
||||
class="AdminPlantChecklist"
|
||||
></div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Plants created</legend>
|
||||
<div
|
||||
id="AdminMutationPlantsCreated"
|
||||
class="AdminPlantChecklist"
|
||||
></div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="AdminMutationFailureSection">
|
||||
<h2>Failure result</h2>
|
||||
|
||||
<label class="AdminEditorField">
|
||||
<span>On failure</span>
|
||||
<select id="AdminMutationFailureType">
|
||||
<option value="Keep">Keep everything</option>
|
||||
<option value="Clear">Clear matched area</option>
|
||||
<option value="Custom">Custom result JSON</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label
|
||||
id="AdminMutationFailureJsonRow"
|
||||
class="AdminEditorField"
|
||||
hidden
|
||||
>
|
||||
<span>Custom failure result JSON</span>
|
||||
<textarea
|
||||
id="AdminMutationFailureJson"
|
||||
rows="6"
|
||||
spellcheck="false"
|
||||
></textarea>
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<details class="AdminGeneratedJson">
|
||||
<summary>Generated mutation JSON</summary>
|
||||
<pre id="AdminMutationJsonPreview"></pre>
|
||||
</details>
|
||||
|
||||
<p id="AdminMutationArchiveNote" hidden>
|
||||
This mutation is currently archived.
|
||||
</p>
|
||||
|
||||
<div class="AdminEditorActions">
|
||||
<button
|
||||
id="AdminMutationSaveButton"
|
||||
class="ActionButton AdminSaveButton"
|
||||
type="submit"
|
||||
>
|
||||
Save mutation
|
||||
</button>
|
||||
|
||||
<a
|
||||
class="ActionButton AdminInlineButton AdminEditorBackLink"
|
||||
href="/Pages/Admin.html"
|
||||
>
|
||||
Back to Admin
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p
|
||||
id="AdminMutationMessage"
|
||||
class="PageMessage"
|
||||
aria-live="polite"
|
||||
></p>
|
||||
</div>
|
||||
</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/AdminMutationEditor.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,225 @@
|
||||
<?php
|
||||
|
||||
$PageTitle = "Admin plants";
|
||||
$PageSection = "Admin";
|
||||
|
||||
|
||||
?>
|
||||
|
||||
<!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>Plant editor</h1>
|
||||
|
||||
<p>
|
||||
Add plants or edit existing catalogue data. Numeric IDs
|
||||
and existing Plant Keys stay permanent once created.
|
||||
</p>
|
||||
|
||||
<p
|
||||
id="AdminAccessMessage"
|
||||
class="PageMessage"
|
||||
aria-live="polite"
|
||||
>
|
||||
Checking admin access...
|
||||
</p>
|
||||
|
||||
<div
|
||||
id="AdminContent"
|
||||
hidden
|
||||
>
|
||||
<div class="AdminEditorToolbar">
|
||||
<label for="AdminPlantSelect">
|
||||
Plant
|
||||
</label>
|
||||
|
||||
<select id="AdminPlantSelect"></select>
|
||||
|
||||
<button
|
||||
id="AdminPlantNewButton"
|
||||
class="ActionButton AdminInlineButton"
|
||||
type="button"
|
||||
>
|
||||
New plant
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form
|
||||
id="AdminPlantForm"
|
||||
class="Panel AdminEditorForm"
|
||||
>
|
||||
<div class="AdminEditorGrid">
|
||||
<label class="AdminEditorField">
|
||||
<span>ID</span>
|
||||
<input
|
||||
id="AdminPlantId"
|
||||
name="Id"
|
||||
type="number"
|
||||
min="1"
|
||||
step="1"
|
||||
required
|
||||
>
|
||||
<small>
|
||||
Permanent. New plants default to the next ID.
|
||||
</small>
|
||||
</label>
|
||||
|
||||
<label class="AdminEditorField">
|
||||
<span>Plant Key</span>
|
||||
<input
|
||||
id="AdminPlantKey"
|
||||
name="PlantKey"
|
||||
type="text"
|
||||
maxlength="64"
|
||||
required
|
||||
>
|
||||
<small>
|
||||
Used by saves, recipes and the sprite folder.
|
||||
</small>
|
||||
</label>
|
||||
|
||||
<label class="AdminEditorField AdminEditorWideField">
|
||||
<span>Name</span>
|
||||
<input
|
||||
id="AdminPlantName"
|
||||
name="Name"
|
||||
type="text"
|
||||
maxlength="64"
|
||||
required
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="AdminEditorField AdminEditorWideField">
|
||||
<span>Description</span>
|
||||
<textarea
|
||||
id="AdminPlantDescription"
|
||||
name="Description"
|
||||
rows="4"
|
||||
required
|
||||
></textarea>
|
||||
</label>
|
||||
|
||||
<label class="AdminEditorField AdminEditorWideField">
|
||||
<span>Tags</span>
|
||||
<input
|
||||
id="AdminPlantTags"
|
||||
name="Tags"
|
||||
type="text"
|
||||
placeholder="Rose, Flower, Red"
|
||||
>
|
||||
<small>
|
||||
Comma-separated. Spaces around tags are ignored.
|
||||
</small>
|
||||
</label>
|
||||
|
||||
<label class="AdminEditorField">
|
||||
<span>Growth time (ms)</span>
|
||||
<input
|
||||
id="AdminPlantGrowthTime"
|
||||
name="GrowthTime"
|
||||
type="number"
|
||||
min="0"
|
||||
step="1000"
|
||||
required
|
||||
>
|
||||
<small id="AdminPlantGrowthTimeHint"></small>
|
||||
</label>
|
||||
|
||||
<label class="AdminEditorField">
|
||||
<span>Base seed cost</span>
|
||||
<input
|
||||
id="AdminPlantBaseCost"
|
||||
name="BaseCost"
|
||||
type="number"
|
||||
min="0"
|
||||
step="1"
|
||||
>
|
||||
<small>
|
||||
Used only for plants stocked from the start.
|
||||
</small>
|
||||
</label>
|
||||
|
||||
<label class="AdminEditorCheckField">
|
||||
<input
|
||||
id="AdminPlantShopPlant"
|
||||
name="ShopPlant"
|
||||
type="checkbox"
|
||||
>
|
||||
<span>
|
||||
Available in the Shop from the beginning
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label class="AdminEditorField AdminEditorWideField">
|
||||
<span>Effects JSON</span>
|
||||
<textarea
|
||||
id="AdminPlantEffects"
|
||||
name="Effects"
|
||||
rows="6"
|
||||
spellcheck="false"
|
||||
></textarea>
|
||||
<small>
|
||||
Keep this as <code>{}</code> when the plant has no effects.
|
||||
</small>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="AdminEditorPreview">
|
||||
<h2>Preview</h2>
|
||||
|
||||
<div class="AdminPlantPreviewRow">
|
||||
<div
|
||||
id="AdminPlantPreviewTile"
|
||||
class="PlantTile AdminPlantPreviewTile"
|
||||
></div>
|
||||
|
||||
<div>
|
||||
<strong id="AdminPlantPreviewName">
|
||||
New plant
|
||||
</strong>
|
||||
<p id="AdminPlantPreviewKey"></p>
|
||||
<p id="AdminPlantArchiveNote" hidden>
|
||||
This plant is currently archived.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="AdminEditorActions">
|
||||
<button
|
||||
id="AdminPlantSaveButton"
|
||||
class="ActionButton AdminSaveButton"
|
||||
type="submit"
|
||||
>
|
||||
Save plant
|
||||
</button>
|
||||
|
||||
<a
|
||||
class="ActionButton AdminInlineButton AdminEditorBackLink"
|
||||
href="/Pages/Admin.html"
|
||||
>
|
||||
Back to Admin
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p
|
||||
id="AdminPlantMessage"
|
||||
class="PageMessage"
|
||||
aria-live="polite"
|
||||
></p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="/Scripts/Garden/PlantImages.js"></script>
|
||||
<script src="/Scripts/Garden/Plants.js"></script>
|
||||
<script src="/Scripts/Garden/Save.js"></script>
|
||||
<script src="/Scripts/Garden/AdminPlantEditor.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,863 @@
|
||||
let AdminPlantCatalogue = {};
|
||||
let AdminPlantEditingKey = null;
|
||||
let AdminPlantSavePending = false;
|
||||
|
||||
|
||||
async function StartAdminPlantEditor() {
|
||||
try {
|
||||
const Status =
|
||||
await GetAdminStatus();
|
||||
|
||||
if (
|
||||
Status.Success !== true ||
|
||||
Status.IsAdmin !== true
|
||||
) {
|
||||
SetAdminPlantMessage(
|
||||
"Admin access required."
|
||||
);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
BindAdminPlantEditor();
|
||||
await LoadAdminPlants();
|
||||
} catch (Error) {
|
||||
console.error(
|
||||
"Couldn't start Plant editor:",
|
||||
Error
|
||||
);
|
||||
|
||||
SetAdminPlantMessage(
|
||||
Error.message ??
|
||||
"Couldn't load the Plant editor."
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function BindAdminPlantEditor() {
|
||||
document.getElementById(
|
||||
"AdminPlantSelect"
|
||||
).addEventListener(
|
||||
"change",
|
||||
Event => {
|
||||
const PlantKey =
|
||||
Event.target.value;
|
||||
|
||||
if (PlantKey === "") {
|
||||
StartNewAdminPlant();
|
||||
return;
|
||||
}
|
||||
|
||||
LoadAdminPlantIntoForm(
|
||||
PlantKey
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
document.getElementById(
|
||||
"AdminPlantNewButton"
|
||||
).addEventListener(
|
||||
"click",
|
||||
StartNewAdminPlant
|
||||
);
|
||||
|
||||
document.getElementById(
|
||||
"AdminPlantForm"
|
||||
).addEventListener(
|
||||
"submit",
|
||||
SaveAdminPlant
|
||||
);
|
||||
|
||||
for (
|
||||
const ElementId
|
||||
of [
|
||||
"AdminPlantId",
|
||||
"AdminPlantKey",
|
||||
"AdminPlantName",
|
||||
"AdminPlantGrowthTime",
|
||||
"AdminPlantShopPlant",
|
||||
"AdminPlantBaseCost"
|
||||
]
|
||||
) {
|
||||
document.getElementById(
|
||||
ElementId
|
||||
).addEventListener(
|
||||
"input",
|
||||
RenderAdminPlantPreview
|
||||
);
|
||||
|
||||
document.getElementById(
|
||||
ElementId
|
||||
).addEventListener(
|
||||
"change",
|
||||
RenderAdminPlantPreview
|
||||
);
|
||||
}
|
||||
|
||||
document.getElementById(
|
||||
"AdminPlantShopPlant"
|
||||
).addEventListener(
|
||||
"change",
|
||||
UpdateAdminPlantShopFields
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
async function AdminPlantRequest(
|
||||
Action,
|
||||
Data = {}
|
||||
) {
|
||||
const SaveKey =
|
||||
localStorage.getItem(
|
||||
SaveKeyName
|
||||
);
|
||||
|
||||
if (
|
||||
typeof SaveKey !== "string" ||
|
||||
!/^[0-9A-Fa-f]{64}$/.test(
|
||||
SaveKey
|
||||
)
|
||||
) {
|
||||
throw new Error(
|
||||
"A valid Account Key is required."
|
||||
);
|
||||
}
|
||||
|
||||
const Response = await fetch(
|
||||
ApiUrl +
|
||||
"/AdminPlants.php",
|
||||
{
|
||||
method: "POST",
|
||||
|
||||
headers: {
|
||||
"Content-Type":
|
||||
"application/json"
|
||||
},
|
||||
|
||||
body: JSON.stringify({
|
||||
SaveKey: SaveKey,
|
||||
Action: Action,
|
||||
...Data
|
||||
})
|
||||
}
|
||||
);
|
||||
|
||||
let Result;
|
||||
|
||||
try {
|
||||
Result = await Response.json();
|
||||
} catch (Error) {
|
||||
throw new Error(
|
||||
"Plant admin API returned invalid JSON."
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
!Response.ok ||
|
||||
Result.Success !== true
|
||||
) {
|
||||
throw new Error(
|
||||
Result.Error ??
|
||||
"Plant admin request failed."
|
||||
);
|
||||
}
|
||||
|
||||
return Result;
|
||||
}
|
||||
|
||||
|
||||
async function LoadAdminPlants(
|
||||
PreferredPlantKey = null
|
||||
) {
|
||||
SetAdminPlantMessage(
|
||||
"Loading plants..."
|
||||
);
|
||||
|
||||
const Result =
|
||||
await AdminPlantRequest(
|
||||
"List"
|
||||
);
|
||||
|
||||
AdminPlantCatalogue =
|
||||
Result.Plants ?? {};
|
||||
|
||||
Plants =
|
||||
AdminPlantCatalogue;
|
||||
|
||||
RenderAdminPlantSelect();
|
||||
|
||||
const Keys =
|
||||
GetSortedAdminPlantKeys();
|
||||
|
||||
const PlantKey =
|
||||
PreferredPlantKey !== null &&
|
||||
AdminPlantCatalogue[
|
||||
PreferredPlantKey
|
||||
] !== undefined
|
||||
? PreferredPlantKey
|
||||
: Keys[0] ?? null;
|
||||
|
||||
if (PlantKey === null) {
|
||||
StartNewAdminPlant();
|
||||
} else {
|
||||
LoadAdminPlantIntoForm(
|
||||
PlantKey
|
||||
);
|
||||
}
|
||||
|
||||
SetAdminPlantMessage(
|
||||
Keys.length === 1
|
||||
? "1 plant loaded."
|
||||
: Keys.length +
|
||||
" plants loaded."
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function GetSortedAdminPlantKeys() {
|
||||
return Object.keys(
|
||||
AdminPlantCatalogue
|
||||
).sort(
|
||||
(A, B) => {
|
||||
const PlantA =
|
||||
AdminPlantCatalogue[A];
|
||||
|
||||
const PlantB =
|
||||
AdminPlantCatalogue[B];
|
||||
|
||||
return (
|
||||
Number(PlantA.Id) -
|
||||
Number(PlantB.Id) ||
|
||||
A.localeCompare(B)
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function RenderAdminPlantSelect() {
|
||||
const Select =
|
||||
document.getElementById(
|
||||
"AdminPlantSelect"
|
||||
);
|
||||
|
||||
Select.replaceChildren();
|
||||
|
||||
for (
|
||||
const PlantKey
|
||||
of GetSortedAdminPlantKeys()
|
||||
) {
|
||||
const Plant =
|
||||
AdminPlantCatalogue[
|
||||
PlantKey
|
||||
];
|
||||
|
||||
const Option =
|
||||
document.createElement(
|
||||
"option"
|
||||
);
|
||||
|
||||
Option.value =
|
||||
PlantKey;
|
||||
|
||||
Option.textContent =
|
||||
String(
|
||||
Plant.Id
|
||||
).padStart(
|
||||
3,
|
||||
"0"
|
||||
) +
|
||||
" — " +
|
||||
Plant.Name +
|
||||
(
|
||||
Plant.Archived === true
|
||||
? " (archived)"
|
||||
: ""
|
||||
);
|
||||
|
||||
Select.appendChild(
|
||||
Option
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function LoadAdminPlantIntoForm(
|
||||
PlantKey
|
||||
) {
|
||||
const Plant =
|
||||
AdminPlantCatalogue[
|
||||
PlantKey
|
||||
];
|
||||
|
||||
if (Plant === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
AdminPlantEditingKey =
|
||||
PlantKey;
|
||||
|
||||
document.getElementById(
|
||||
"AdminPlantSelect"
|
||||
).value = PlantKey;
|
||||
|
||||
SetAdminPlantField(
|
||||
"AdminPlantId",
|
||||
Plant.Id
|
||||
);
|
||||
|
||||
SetAdminPlantField(
|
||||
"AdminPlantKey",
|
||||
PlantKey
|
||||
);
|
||||
|
||||
SetAdminPlantField(
|
||||
"AdminPlantName",
|
||||
Plant.Name ?? ""
|
||||
);
|
||||
|
||||
SetAdminPlantField(
|
||||
"AdminPlantDescription",
|
||||
Plant.Description ?? ""
|
||||
);
|
||||
|
||||
SetAdminPlantField(
|
||||
"AdminPlantTags",
|
||||
Array.isArray(
|
||||
Plant.Tags
|
||||
)
|
||||
? Plant.Tags.join(", ")
|
||||
: ""
|
||||
);
|
||||
|
||||
SetAdminPlantField(
|
||||
"AdminPlantGrowthTime",
|
||||
Number(
|
||||
Plant.GrowthTime ?? 0
|
||||
)
|
||||
);
|
||||
|
||||
document.getElementById(
|
||||
"AdminPlantShopPlant"
|
||||
).checked =
|
||||
Plant.Shop?.ShopPlant === true;
|
||||
|
||||
SetAdminPlantField(
|
||||
"AdminPlantBaseCost",
|
||||
Plant.Shop?.BaseCost ?? ""
|
||||
);
|
||||
|
||||
SetAdminPlantField(
|
||||
"AdminPlantEffects",
|
||||
JSON.stringify(
|
||||
Plant.Effects ?? {},
|
||||
null,
|
||||
4
|
||||
)
|
||||
);
|
||||
|
||||
document.getElementById(
|
||||
"AdminPlantId"
|
||||
).readOnly = true;
|
||||
|
||||
document.getElementById(
|
||||
"AdminPlantKey"
|
||||
).readOnly = true;
|
||||
|
||||
document.getElementById(
|
||||
"AdminPlantArchiveNote"
|
||||
).hidden =
|
||||
Plant.Archived !== true;
|
||||
|
||||
UpdateAdminPlantShopFields();
|
||||
RenderAdminPlantPreview();
|
||||
}
|
||||
|
||||
|
||||
function StartNewAdminPlant() {
|
||||
AdminPlantEditingKey = null;
|
||||
|
||||
document.getElementById(
|
||||
"AdminPlantSelect"
|
||||
).value = "";
|
||||
|
||||
SetAdminPlantField(
|
||||
"AdminPlantId",
|
||||
GetNextAdminPlantId()
|
||||
);
|
||||
|
||||
SetAdminPlantField(
|
||||
"AdminPlantKey",
|
||||
""
|
||||
);
|
||||
|
||||
SetAdminPlantField(
|
||||
"AdminPlantName",
|
||||
""
|
||||
);
|
||||
|
||||
SetAdminPlantField(
|
||||
"AdminPlantDescription",
|
||||
""
|
||||
);
|
||||
|
||||
SetAdminPlantField(
|
||||
"AdminPlantTags",
|
||||
""
|
||||
);
|
||||
|
||||
SetAdminPlantField(
|
||||
"AdminPlantGrowthTime",
|
||||
3600000
|
||||
);
|
||||
|
||||
document.getElementById(
|
||||
"AdminPlantShopPlant"
|
||||
).checked = false;
|
||||
|
||||
SetAdminPlantField(
|
||||
"AdminPlantBaseCost",
|
||||
""
|
||||
);
|
||||
|
||||
SetAdminPlantField(
|
||||
"AdminPlantEffects",
|
||||
"{}"
|
||||
);
|
||||
|
||||
document.getElementById(
|
||||
"AdminPlantId"
|
||||
).readOnly = false;
|
||||
|
||||
document.getElementById(
|
||||
"AdminPlantKey"
|
||||
).readOnly = false;
|
||||
|
||||
document.getElementById(
|
||||
"AdminPlantArchiveNote"
|
||||
).hidden = true;
|
||||
|
||||
UpdateAdminPlantShopFields();
|
||||
RenderAdminPlantPreview();
|
||||
SetAdminPlantMessage(
|
||||
"Creating a new plant."
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function GetNextAdminPlantId() {
|
||||
return Math.max(
|
||||
0,
|
||||
...Object.values(
|
||||
AdminPlantCatalogue
|
||||
).map(
|
||||
Plant =>
|
||||
Number(
|
||||
Plant.Id ?? 0
|
||||
)
|
||||
)
|
||||
) + 1;
|
||||
}
|
||||
|
||||
|
||||
function SetAdminPlantField(
|
||||
ElementId,
|
||||
Value
|
||||
) {
|
||||
document.getElementById(
|
||||
ElementId
|
||||
).value =
|
||||
Value ?? "";
|
||||
}
|
||||
|
||||
|
||||
function UpdateAdminPlantShopFields() {
|
||||
const ShopPlant =
|
||||
document.getElementById(
|
||||
"AdminPlantShopPlant"
|
||||
).checked;
|
||||
|
||||
const BaseCost =
|
||||
document.getElementById(
|
||||
"AdminPlantBaseCost"
|
||||
);
|
||||
|
||||
BaseCost.disabled =
|
||||
!ShopPlant;
|
||||
|
||||
BaseCost.required =
|
||||
ShopPlant;
|
||||
}
|
||||
|
||||
|
||||
function ParseAdminPlantTags() {
|
||||
const Value =
|
||||
document.getElementById(
|
||||
"AdminPlantTags"
|
||||
).value;
|
||||
|
||||
return [
|
||||
...new Set(
|
||||
Value
|
||||
.split(",")
|
||||
.map(
|
||||
Tag =>
|
||||
Tag.trim()
|
||||
)
|
||||
.filter(
|
||||
Tag =>
|
||||
Tag.length > 0
|
||||
)
|
||||
)
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
function ParseAdminPlantEffects() {
|
||||
const Value =
|
||||
document.getElementById(
|
||||
"AdminPlantEffects"
|
||||
).value.trim();
|
||||
|
||||
if (Value === "") {
|
||||
return {};
|
||||
}
|
||||
|
||||
const Effects =
|
||||
JSON.parse(Value);
|
||||
|
||||
if (
|
||||
Effects === null ||
|
||||
typeof Effects !== "object" ||
|
||||
Array.isArray(Effects)
|
||||
) {
|
||||
throw new Error(
|
||||
"Effects JSON must be an object."
|
||||
);
|
||||
}
|
||||
|
||||
return Effects;
|
||||
}
|
||||
|
||||
|
||||
function GetAdminPlantFormData() {
|
||||
const ShopPlant =
|
||||
document.getElementById(
|
||||
"AdminPlantShopPlant"
|
||||
).checked;
|
||||
|
||||
const BaseCostValue =
|
||||
document.getElementById(
|
||||
"AdminPlantBaseCost"
|
||||
).value;
|
||||
|
||||
return {
|
||||
Id: Number(
|
||||
document.getElementById(
|
||||
"AdminPlantId"
|
||||
).value
|
||||
),
|
||||
|
||||
PlantKey:
|
||||
document.getElementById(
|
||||
"AdminPlantKey"
|
||||
).value.trim(),
|
||||
|
||||
Name:
|
||||
document.getElementById(
|
||||
"AdminPlantName"
|
||||
).value.trim(),
|
||||
|
||||
Description:
|
||||
document.getElementById(
|
||||
"AdminPlantDescription"
|
||||
).value.trim(),
|
||||
|
||||
Tags:
|
||||
ParseAdminPlantTags(),
|
||||
|
||||
GrowthTime: Number(
|
||||
document.getElementById(
|
||||
"AdminPlantGrowthTime"
|
||||
).value
|
||||
),
|
||||
|
||||
Effects:
|
||||
ParseAdminPlantEffects(),
|
||||
|
||||
ShopPlant: ShopPlant,
|
||||
|
||||
BaseCost:
|
||||
ShopPlant
|
||||
? Number(BaseCostValue)
|
||||
: null,
|
||||
|
||||
IsNew:
|
||||
AdminPlantEditingKey ===
|
||||
null
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
async function SaveAdminPlant(
|
||||
Event
|
||||
) {
|
||||
Event.preventDefault();
|
||||
|
||||
if (AdminPlantSavePending) {
|
||||
return;
|
||||
}
|
||||
|
||||
const Form =
|
||||
document.getElementById(
|
||||
"AdminPlantForm"
|
||||
);
|
||||
|
||||
if (!Form.reportValidity()) {
|
||||
return;
|
||||
}
|
||||
|
||||
let Plant;
|
||||
|
||||
try {
|
||||
Plant =
|
||||
GetAdminPlantFormData();
|
||||
} catch (Error) {
|
||||
SetAdminPlantMessage(
|
||||
Error.message
|
||||
);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
AdminPlantSavePending = true;
|
||||
|
||||
const SaveButton =
|
||||
document.getElementById(
|
||||
"AdminPlantSaveButton"
|
||||
);
|
||||
|
||||
SaveButton.disabled = true;
|
||||
SaveButton.textContent =
|
||||
"Saving...";
|
||||
|
||||
SetAdminPlantMessage(
|
||||
"Saving plant..."
|
||||
);
|
||||
|
||||
try {
|
||||
const Result =
|
||||
await AdminPlantRequest(
|
||||
"Save",
|
||||
{
|
||||
Plant: Plant
|
||||
}
|
||||
);
|
||||
|
||||
localStorage.removeItem(
|
||||
"SarahtoninGardenContent"
|
||||
);
|
||||
|
||||
await LoadAdminPlants(
|
||||
Result.PlantKey ??
|
||||
Plant.PlantKey
|
||||
);
|
||||
|
||||
SetAdminPlantMessage(
|
||||
"Plant saved."
|
||||
);
|
||||
} catch (Error) {
|
||||
console.error(
|
||||
"Couldn't save plant:",
|
||||
Error
|
||||
);
|
||||
|
||||
SetAdminPlantMessage(
|
||||
Error.message ??
|
||||
"Couldn't save plant."
|
||||
);
|
||||
} finally {
|
||||
AdminPlantSavePending = false;
|
||||
SaveButton.disabled = false;
|
||||
SaveButton.textContent =
|
||||
"Save plant";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function RenderAdminPlantPreview() {
|
||||
const PlantKey =
|
||||
document.getElementById(
|
||||
"AdminPlantKey"
|
||||
).value.trim();
|
||||
|
||||
const Name =
|
||||
document.getElementById(
|
||||
"AdminPlantName"
|
||||
).value.trim() ||
|
||||
"New plant";
|
||||
|
||||
const Tile =
|
||||
document.getElementById(
|
||||
"AdminPlantPreviewTile"
|
||||
);
|
||||
|
||||
Tile.replaceChildren();
|
||||
|
||||
const Images =
|
||||
PlantImages[
|
||||
PlantKey
|
||||
] ?? [];
|
||||
|
||||
if (
|
||||
Array.isArray(Images) &&
|
||||
Images.length > 0
|
||||
) {
|
||||
const Image =
|
||||
document.createElement(
|
||||
"img"
|
||||
);
|
||||
|
||||
Image.className =
|
||||
"PlantSprite";
|
||||
|
||||
Image.src =
|
||||
Images[
|
||||
Images.length - 1
|
||||
];
|
||||
|
||||
Image.alt = Name;
|
||||
|
||||
Tile.appendChild(
|
||||
Image
|
||||
);
|
||||
} else {
|
||||
const Missing =
|
||||
document.createElement(
|
||||
"span"
|
||||
);
|
||||
|
||||
Missing.className =
|
||||
"AdminPlantPreviewMissing";
|
||||
|
||||
Missing.textContent =
|
||||
PlantKey === ""
|
||||
? "No key"
|
||||
: "No sprite";
|
||||
|
||||
Tile.appendChild(
|
||||
Missing
|
||||
);
|
||||
}
|
||||
|
||||
document.getElementById(
|
||||
"AdminPlantPreviewName"
|
||||
).textContent = Name;
|
||||
|
||||
document.getElementById(
|
||||
"AdminPlantPreviewKey"
|
||||
).textContent =
|
||||
PlantKey === ""
|
||||
? "Plant Key not set"
|
||||
: PlantKey;
|
||||
|
||||
const GrowthTime = Number(
|
||||
document.getElementById(
|
||||
"AdminPlantGrowthTime"
|
||||
).value
|
||||
);
|
||||
|
||||
document.getElementById(
|
||||
"AdminPlantGrowthTimeHint"
|
||||
).textContent =
|
||||
Number.isFinite(GrowthTime)
|
||||
? FormatAdminDuration(
|
||||
GrowthTime
|
||||
)
|
||||
: "";
|
||||
}
|
||||
|
||||
|
||||
function FormatAdminDuration(
|
||||
Milliseconds
|
||||
) {
|
||||
Milliseconds = Math.max(
|
||||
0,
|
||||
Number(Milliseconds)
|
||||
);
|
||||
|
||||
if (Milliseconds < 1000) {
|
||||
return Milliseconds + "ms";
|
||||
}
|
||||
|
||||
const TotalSeconds =
|
||||
Math.round(
|
||||
Milliseconds /
|
||||
1000
|
||||
);
|
||||
|
||||
const Hours =
|
||||
Math.floor(
|
||||
TotalSeconds /
|
||||
3600
|
||||
);
|
||||
|
||||
const Minutes =
|
||||
Math.floor(
|
||||
(
|
||||
TotalSeconds %
|
||||
3600
|
||||
) /
|
||||
60
|
||||
);
|
||||
|
||||
const Seconds =
|
||||
TotalSeconds % 60;
|
||||
|
||||
const Parts = [];
|
||||
|
||||
if (Hours > 0) {
|
||||
Parts.push(
|
||||
Hours + "h"
|
||||
);
|
||||
}
|
||||
|
||||
if (Minutes > 0) {
|
||||
Parts.push(
|
||||
Minutes + "m"
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
Seconds > 0 ||
|
||||
Parts.length === 0
|
||||
) {
|
||||
Parts.push(
|
||||
Seconds + "s"
|
||||
);
|
||||
}
|
||||
|
||||
return Parts.join(" ");
|
||||
}
|
||||
|
||||
|
||||
function SetAdminPlantMessage(
|
||||
Message
|
||||
) {
|
||||
const Element =
|
||||
document.getElementById(
|
||||
"AdminPlantMessage"
|
||||
);
|
||||
|
||||
if (Element !== null) {
|
||||
Element.textContent =
|
||||
Message;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener(
|
||||
"DOMContentLoaded",
|
||||
StartAdminPlantEditor
|
||||
);
|
||||
@@ -1722,3 +1722,481 @@ select {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Admin editors
|
||||
*/
|
||||
|
||||
.AdminEditorNavigation {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
repeat(
|
||||
2,
|
||||
minmax(0, 1fr)
|
||||
);
|
||||
gap: 1rem;
|
||||
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.AdminEditorLink {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
|
||||
min-height: 7rem;
|
||||
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
|
||||
padding: 1rem;
|
||||
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.AdminEditorLink strong {
|
||||
color: var(--Green);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.AdminEditorLink span {
|
||||
color: var(--Subtext1);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.AdminEditorToolbar {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
auto
|
||||
minmax(0, 1fr)
|
||||
auto;
|
||||
gap: 0.75rem;
|
||||
|
||||
align-items: center;
|
||||
|
||||
margin: 1.5rem 0 1rem;
|
||||
}
|
||||
|
||||
.AdminEditorToolbar label {
|
||||
color: var(--Blue);
|
||||
}
|
||||
|
||||
.AdminEditorForm {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.AdminEditorGrid {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
repeat(
|
||||
2,
|
||||
minmax(0, 1fr)
|
||||
);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.AdminEditorField {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.AdminEditorField > span,
|
||||
.AdminMutationDimensions label {
|
||||
color: var(--Blue);
|
||||
}
|
||||
|
||||
.AdminEditorField small {
|
||||
color: var(--Overlay2);
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.AdminEditorWideField {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.AdminEditorForm input,
|
||||
.AdminEditorForm textarea,
|
||||
.AdminEditorForm select,
|
||||
.AdminEditorToolbar select,
|
||||
.AdminMutationDimensions input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 0.55rem;
|
||||
|
||||
color: var(--Text);
|
||||
background-color: var(--Surface0);
|
||||
|
||||
border: 3px solid var(--Surface2);
|
||||
border-radius: 0;
|
||||
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.AdminEditorForm textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.AdminEditorForm input:focus,
|
||||
.AdminEditorForm textarea:focus,
|
||||
.AdminEditorForm select:focus,
|
||||
.AdminEditorToolbar select:focus,
|
||||
.AdminMutationDimensions input:focus {
|
||||
border-color: var(--Sky);
|
||||
}
|
||||
|
||||
.AdminEditorForm input:read-only {
|
||||
color: var(--Subtext0);
|
||||
background-color: var(--Base);
|
||||
}
|
||||
|
||||
.AdminEditorForm input:disabled {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.AdminEditorCheckField {
|
||||
display: flex;
|
||||
gap: 0.65rem;
|
||||
|
||||
align-items: center;
|
||||
align-self: end;
|
||||
|
||||
min-height: 2.8rem;
|
||||
}
|
||||
|
||||
.AdminEditorCheckField input {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
margin: 0;
|
||||
|
||||
accent-color: var(--Green);
|
||||
}
|
||||
|
||||
.AdminInlineButton {
|
||||
width: auto;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
.AdminSaveButton {
|
||||
--ActionAccent: var(--Green);
|
||||
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.AdminEditorBackLink {
|
||||
display: inline-flex;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.AdminEditorActions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.AdminEditorPreview,
|
||||
.AdminMutationRecipeSection,
|
||||
.AdminMutationRelationsSection,
|
||||
.AdminMutationFailureSection {
|
||||
margin-top: 1.5rem;
|
||||
padding-top: 1rem;
|
||||
|
||||
border-top: 3px solid var(--Surface2);
|
||||
}
|
||||
|
||||
.AdminEditorPreview h2,
|
||||
.AdminMutationRecipeSection h2,
|
||||
.AdminMutationRelationsSection h2,
|
||||
.AdminMutationFailureSection h2 {
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.AdminPlantPreviewRow {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.AdminPlantPreviewTile {
|
||||
display: flex;
|
||||
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.AdminPlantPreviewMissing {
|
||||
padding: 0.5rem;
|
||||
|
||||
color: var(--Overlay1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#AdminPlantPreviewKey,
|
||||
#AdminPlantArchiveNote,
|
||||
#AdminMutationArchiveNote {
|
||||
margin: 0.35rem 0 0;
|
||||
|
||||
color: var(--Overlay2);
|
||||
}
|
||||
|
||||
#AdminPlantArchiveNote,
|
||||
#AdminMutationArchiveNote {
|
||||
color: var(--Yellow);
|
||||
}
|
||||
|
||||
.AdminMutationRecipeHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.AdminMutationRecipeHeader p,
|
||||
.AdminMutationRelationsSection > p {
|
||||
margin-bottom: 0;
|
||||
|
||||
color: var(--Subtext1);
|
||||
}
|
||||
|
||||
.AdminMutationDimensions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.6rem;
|
||||
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.AdminMutationDimensions label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.AdminMutationDimensions input {
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.AdminMutationRecipeFlow {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
minmax(0, 1fr)
|
||||
auto
|
||||
minmax(0, 1fr);
|
||||
gap: 0.75rem;
|
||||
|
||||
align-items: center;
|
||||
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.AdminMutationGridPanel {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.AdminMutationGridPanel h3 {
|
||||
margin-bottom: 0.25rem;
|
||||
|
||||
color: var(--Subtext1);
|
||||
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.AdminMutationGrid {
|
||||
width: 100%;
|
||||
margin: 0.5rem auto;
|
||||
}
|
||||
|
||||
.AdminMutationGridCell {
|
||||
width: 100%;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.AdminMutationGridCell:hover {
|
||||
border-color: var(--Sky);
|
||||
}
|
||||
|
||||
.AdminMutationGridCellSelected {
|
||||
border-color: var(--Yellow) !important;
|
||||
box-shadow:
|
||||
0 0 0 2px
|
||||
var(--Crust);
|
||||
}
|
||||
|
||||
.AdminMutationCellEditor {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
|
||||
background-color: var(--Base);
|
||||
border: 3px solid var(--Yellow);
|
||||
}
|
||||
|
||||
.AdminMutationCellEditor h3 {
|
||||
margin-bottom: 0.75rem;
|
||||
|
||||
color: var(--Yellow);
|
||||
}
|
||||
|
||||
#AdminMutationPatternCellControls,
|
||||
#AdminMutationResultCellControls,
|
||||
.AdminMatcherFields {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
repeat(
|
||||
2,
|
||||
minmax(0, 1fr)
|
||||
);
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.AdminMatcherFields {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.AdminMutationRelationColumns {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
repeat(
|
||||
2,
|
||||
minmax(0, 1fr)
|
||||
);
|
||||
gap: 1rem;
|
||||
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.AdminMutationRelationColumns fieldset {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
padding: 0.75rem;
|
||||
|
||||
background-color: var(--Base);
|
||||
border: 3px solid var(--Surface2);
|
||||
}
|
||||
|
||||
.AdminMutationRelationColumns legend {
|
||||
padding: 0 0.35rem;
|
||||
|
||||
color: var(--Peach);
|
||||
}
|
||||
|
||||
.AdminPlantChecklist {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.45rem;
|
||||
|
||||
max-height: 14rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.AdminPlantChecklistItem {
|
||||
display: flex;
|
||||
gap: 0.55rem;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.AdminPlantChecklistItem input {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: 0;
|
||||
|
||||
accent-color: var(--Green);
|
||||
}
|
||||
|
||||
.AdminGeneratedJson {
|
||||
margin-top: 1.5rem;
|
||||
padding: 0.75rem;
|
||||
|
||||
background-color: var(--Base);
|
||||
border: 3px solid var(--Surface2);
|
||||
}
|
||||
|
||||
.AdminGeneratedJson summary {
|
||||
cursor: pointer;
|
||||
color: var(--Sky);
|
||||
}
|
||||
|
||||
.AdminGeneratedJson pre {
|
||||
max-height: 24rem;
|
||||
margin: 0.75rem 0 0;
|
||||
padding: 0.75rem;
|
||||
|
||||
overflow: auto;
|
||||
|
||||
color: var(--Subtext1);
|
||||
background-color: var(--Crust);
|
||||
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.AdminEditorNavigation,
|
||||
.AdminEditorGrid,
|
||||
#AdminMutationPatternCellControls,
|
||||
#AdminMutationResultCellControls,
|
||||
.AdminMatcherFields,
|
||||
.AdminMutationRelationColumns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.AdminEditorToolbar {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.AdminEditorToolbar label {
|
||||
margin-bottom: -0.35rem;
|
||||
}
|
||||
|
||||
.AdminInlineButton,
|
||||
.AdminSaveButton {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.AdminMutationRecipeHeader {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.AdminMutationRecipeFlow {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.AdminMutationRecipeFlow >
|
||||
.MutationEncyclopediaRecipeArrow {
|
||||
justify-self: center;
|
||||
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.AdminMutationDimensions {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.AdminMutationDimensions label {
|
||||
flex: 1 1 5rem;
|
||||
}
|
||||
|
||||
.AdminMutationDimensions input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user