Made styling more coherent.

This commit is contained in:
sarah committed 2026-09-07 19:42:35 +02:00
1 parent bafb53e4d5
commit 39e196e994
5 files changed
+730 -692

No files matched your search

+1
View File
@@ -310,6 +310,7 @@ $PageSection = "Garden";
</main> </main>
<script src="/Scripts/Garden/PlantImages.js"></script> <script src="/Scripts/Garden/PlantImages.js"></script>
<script src="/Scripts/Garden/GardenView.js"></script>
<script src="/Scripts/Garden/Plants.js"></script> <script src="/Scripts/Garden/Plants.js"></script>
<script src="/Scripts/Garden/Mutations.js"></script> <script src="/Scripts/Garden/Mutations.js"></script>
<script src="/Scripts/Garden/FunctionalEffects.js"></script> <script src="/Scripts/Garden/FunctionalEffects.js"></script>
+3 -2
View File
@@ -86,7 +86,7 @@ $PageSection = "Social";
<section <section
id="GardenerGardensSection" id="GardenerGardensSection"
class="Panel SocialSection" class="Panel SocialSection GardenPlotsPanel"
hidden hidden
> >
<div class="PanelHeader PanelHeaderInset GardenerSectionHeader"> <div class="PanelHeader PanelHeaderInset GardenerSectionHeader">
@@ -123,7 +123,7 @@ $PageSection = "Social";
<div class="GardenGridViewport"> <div class="GardenGridViewport">
<div <div
id="GardenerGardenGrid" id="GardenerGardenGrid"
class="GardenGrid GardenerGardenGrid" class="GardenGrid"
></div> ></div>
</div> </div>
@@ -218,6 +218,7 @@ $PageSection = "Social";
</main> </main>
<script src="/Scripts/Garden/PlantImages.js"></script> <script src="/Scripts/Garden/PlantImages.js"></script>
<script src="/Scripts/Garden/GardenView.js"></script>
<script src="/Scripts/Garden/Plants.js"></script> <script src="/Scripts/Garden/Plants.js"></script>
<script src="/Scripts/Garden/Mutations.js"></script> <script src="/Scripts/Garden/Mutations.js"></script>
<script src="/Scripts/Garden/Save.js"></script> <script src="/Scripts/Garden/Save.js"></script>
+71 -494
View File
@@ -9,57 +9,6 @@ let QuickBuyAmountMode = "One";
const GardenUpdateInterval = 1000; const GardenUpdateInterval = 1000;
const GardenBorderColours = [
"var(--Rosewater)",
"var(--Flamingo)",
"var(--Pink)",
"var(--Mauve)",
"var(--Red)",
"var(--Maroon)",
"var(--Peach)",
"var(--Yellow)",
"var(--Green)",
"var(--Teal)",
"var(--Sky)",
"var(--Sapphire)",
"var(--Blue)",
"var(--Lavender)"
];
const GardenPlotDefaultRotation = "East";
const GardenPlotRotations = [
"North",
"East",
"South",
"West"
];
const GardenPlotRotationLabels = {
North: "^",
East: "->",
South: "v",
West: "<-"
};
function GetGardenBorderColour(
GardenIndex
) {
const ColourCount =
GardenBorderColours.length;
const NormalizedIndex =
(
Number(GardenIndex) %
ColourCount +
ColourCount
) % ColourCount;
return GardenBorderColours[
NormalizedIndex
];
}
async function StartGame() { async function StartGame() {
try { try {
await LoadGameContent(); await LoadGameContent();
@@ -1434,28 +1383,6 @@ function GetGardenDisplaySettings() {
} }
function GetGardenPlotRotation(
Plot
) {
return GardenPlotRotations.includes(
Plot?.Rotation
)
? Plot.Rotation
: GardenPlotDefaultRotation;
}
function GetGardenPlotRotationLabel(
Plot
) {
return GardenPlotRotationLabels[
GetGardenPlotRotation(
Plot
)
] ?? "->";
}
async function RotateGardenPlot( async function RotateGardenPlot(
PlotIndex PlotIndex
) { ) {
@@ -1524,87 +1451,97 @@ function CreatePlotElement(
DisplaySettings, DisplaySettings,
IsPreview = false IsPreview = false
) { ) {
const Tile =
document.createElement(
"div"
);
Tile.className =
"PlantTile GardenPlot";
const MainButton =
document.createElement(
"button"
);
MainButton.className =
"GardenPlotMain";
MainButton.type = "button";
if (
DisplaySettings.ShowPlantNames
) {
Tile.classList.add(
"GardenPlotWithName"
);
}
const Plant = const Plant =
Plot === null Plot === null
? null ? null
: Plants[Plot.Plant]; : Plants[Plot.Plant];
let Progress = 0;
let CooldownState = null;
let BorderProgress = 0;
let ImagePath = null;
let TimerText = "";
if ( if (
DisplaySettings.ShowPlantNames Plot !== null &&
Plant !== undefined
) { ) {
MainButton.appendChild( Progress =
CreateGardenPlotName( GetPlantGrowthProgress(
Plot, Plot,
Plant Plant
) );
);
CooldownState =
Progress >= 1 &&
typeof GetFunctionalPlantCooldownDisplayState ===
"function"
? GetFunctionalPlantCooldownDisplayState(
Plot,
Plant,
GetSimulationTime(
GameSave
)
)
: null;
BorderProgress =
CooldownState === null
? Progress
: CooldownState.Progress;
ImagePath =
GetPlantImage(
Plot,
Plant
);
TimerText =
GetGardenPlotTimerText(
Plot,
Plant,
Progress,
GetSimulationTime(
GameSave
),
CooldownState
);
} }
const View =
CreateGardenPlotView({
Plot,
Plant,
Progress,
BorderProgress,
DisplaySettings,
ImagePath,
TimerText,
FunctionalCooldown:
CooldownState !== null,
ShowRotation:
Plot !== null &&
DisplaySettings
.ShowPlotRotation &&
!IsPreview,
OnRotate: () => {
RotateGardenPlot(
PlotIndex
);
}
});
const Visual = const Tile = View.Tile;
document.createElement( const MainButton =
"span" View.MainButton;
);
Visual.className =
"GardenPlotVisual";
MainButton.appendChild(
Visual
);
Tile.appendChild(
MainButton
);
if (Plot === null) { if (Plot === null) {
Tile.classList.add(
"GardenPlotEmpty"
);
MainButton.title = MainButton.title =
IsPreview IsPreview
? "Future Sight: empty plot" ? "Future Sight: empty plot"
: "Empty plot"; : "Empty plot";
AppendGardenPlotFooter(
Tile,
null,
null,
0,
PlotIndex,
DisplaySettings,
IsPreview
);
if (IsPreview) { if (IsPreview) {
MainButton.disabled = true; MainButton.disabled = true;
return Tile; return Tile;
@@ -1646,112 +1583,11 @@ function CreatePlotElement(
if (Plant === undefined) { if (Plant === undefined) {
Visual.textContent = "?";
AppendGardenPlotFooter(
Tile,
Plot,
null,
0,
PlotIndex,
DisplaySettings,
IsPreview
);
MainButton.disabled = true; MainButton.disabled = true;
return Tile; return Tile;
} }
const Progress =
GetPlantGrowthProgress(
Plot,
Plant
);
const CooldownState =
Progress >= 1 &&
typeof GetFunctionalPlantCooldownDisplayState ===
"function"
? GetFunctionalPlantCooldownDisplayState(
Plot,
Plant,
GetSimulationTime(
GameSave
)
)
: null;
const BorderProgress =
CooldownState === null
? Progress
: CooldownState.Progress;
Tile.style.setProperty(
"--GrowthProgress",
`${BorderProgress * 100}%`
);
if (CooldownState !== null) {
Tile.classList.add(
"GardenPlotFunctionalCooldown"
);
}
const ImagePath =
GetPlantImage(
Plot,
Plant
);
if (ImagePath !== null) {
const Image =
document.createElement(
"img"
);
Image.className =
"PlantSprite";
Image.alt =
Plant.Name;
Image.src =
ImagePath;
Visual.appendChild(
Image
);
} else {
const MissingImage =
document.createElement(
"span"
);
MissingImage.className =
"GardenPlantMissing";
MissingImage.textContent =
Plant.Name;
Visual.appendChild(
MissingImage
);
}
AppendGardenPlotFooter(
Tile,
Plot,
Plant,
Progress,
PlotIndex,
DisplaySettings,
IsPreview
);
if (IsPreview) { if (IsPreview) {
MainButton.title = MainButton.title =
"Future Sight: " + "Future Sight: " +
@@ -1919,265 +1755,6 @@ function CreatePlotElement(
} }
function AppendGardenPlotFooter(
Tile,
Plot,
Plant,
Progress,
PlotIndex,
DisplaySettings,
IsPreview
) {
const ShowTimer =
DisplaySettings.ShowGrowthTimers;
const ShowRotation =
Plot !== null &&
DisplaySettings.ShowPlotRotation &&
!IsPreview;
if (
!ShowTimer &&
!ShowRotation
) {
return;
}
Tile.classList.add(
"GardenPlotWithFooter"
);
const Footer =
document.createElement(
"span"
);
Footer.className =
"GardenPlotFooter";
if (
ShowTimer &&
ShowRotation
) {
Footer.classList.add(
"GardenPlotFooterSplit"
);
}
if (ShowTimer) {
Footer.appendChild(
CreateGardenPlotTimer(
Plot,
Plant,
Progress
)
);
}
if (ShowRotation) {
const RotateButton =
document.createElement(
"button"
);
RotateButton.className =
"GardenPlotRotationButton";
RotateButton.type = "button";
RotateButton.textContent =
GetGardenPlotRotationLabel(
Plot
);
RotateButton.title =
"Rotate plot clockwise";
RotateButton.setAttribute(
"aria-label",
"Rotate " +
(Plant?.Name ?? "plot") +
" clockwise"
);
RotateButton.addEventListener(
"click",
() => {
RotateGardenPlot(
PlotIndex
);
}
);
Footer.appendChild(
RotateButton
);
}
Tile.appendChild(Footer);
}
function CreateGardenPlotName(
Plot,
Plant
) {
const Name =
document.createElement(
"span"
);
Name.className =
"GardenPlotName";
if (Plot === null) {
Name.textContent =
"Empty";
} else if (Plant === undefined) {
Name.textContent =
"Unknown";
} else {
Name.textContent =
Plant.Name;
Name.title =
Plant.Name;
}
return Name;
}
function CreateGardenPlotTimer(
Plot,
Plant,
Progress
) {
const Timer =
document.createElement(
"span"
);
Timer.className =
"GardenPlotTimer";
if (
Plot === null ||
Plant === null ||
Plant === undefined
) {
Timer.textContent = "";
return Timer;
}
if (
Progress >= 1 &&
typeof GetFunctionalPlantCooldownDisplayState ===
"function"
) {
const CooldownState =
GetFunctionalPlantCooldownDisplayState(
Plot,
Plant,
GetSimulationTime(
GameSave
)
);
if (CooldownState !== null) {
Timer.textContent =
FormatGardenRemainingTime(
CooldownState.Remaining
);
return Timer;
}
}
if (Progress >= 1) {
Timer.textContent =
"Ready";
return Timer;
}
const RemainingTime =
Math.max(
0,
Plant.GrowthTime -
(
GetSimulationTime(
GameSave
) -
Plot.PlantedAt
)
);
Timer.textContent =
FormatGardenRemainingTime(
RemainingTime
);
return Timer;
}
function FormatGardenRemainingTime(
Milliseconds
) {
const TotalSeconds =
Math.max(
0,
Math.ceil(
Number(
Milliseconds
) / 1000
)
);
const Hours =
Math.floor(
TotalSeconds / 3600
);
const Minutes =
Math.floor(
(
TotalSeconds % 3600
) / 60
);
const Seconds =
TotalSeconds % 60;
if (Hours > 0) {
return (
Hours +
":" +
String(Minutes).padStart(
2,
"0"
) +
":" +
String(Seconds).padStart(
2,
"0"
)
);
}
return (
Minutes +
":" +
String(Seconds).padStart(
2,
"0"
)
);
}
async function PlantSeed( async function PlantSeed(
PlotIndex PlotIndex
) { ) {
+572
View File
@@ -0,0 +1,572 @@
const GardenBorderColours = [
"var(--Rosewater)",
"var(--Flamingo)",
"var(--Pink)",
"var(--Mauve)",
"var(--Red)",
"var(--Maroon)",
"var(--Peach)",
"var(--Yellow)",
"var(--Green)",
"var(--Teal)",
"var(--Sky)",
"var(--Sapphire)",
"var(--Blue)",
"var(--Lavender)"
];
const GardenPlotDefaultRotation = "East";
const GardenPlotRotations = [
"North",
"East",
"South",
"West"
];
const GardenPlotRotationLabels = {
North: "^",
East: "->",
South: "v",
West: "<-"
};
function GetGardenBorderColour(
GardenIndex
) {
const ColourCount =
GardenBorderColours.length;
const NormalizedIndex =
(
Number(GardenIndex) %
ColourCount +
ColourCount
) % ColourCount;
return GardenBorderColours[
NormalizedIndex
];
}
function GetGardenPlotRotation(
Plot
) {
return GardenPlotRotations.includes(
Plot?.Rotation
)
? Plot.Rotation
: GardenPlotDefaultRotation;
}
function GetGardenPlotRotationLabel(
Plot
) {
return GardenPlotRotationLabels[
GetGardenPlotRotation(
Plot
)
] ?? "->";
}
function GetGardenPlotGrowthProgress(
Plot,
Plant,
AtTime = Date.now()
) {
const GrowthTime =
Number(Plant?.GrowthTime ?? 0);
if (GrowthTime <= 0) {
return 1;
}
const PlantedAt =
Number(Plot?.PlantedAt ?? 0);
return Math.max(
0,
Math.min(
(
Number(AtTime) -
PlantedAt
) /
GrowthTime,
1
)
);
}
function GetGardenPlotImageSources(
Plot,
Plant
) {
const Direction =
Plot !== null &&
Plant?.DirectionalSprites === true
? GetGardenPlotRotation(
Plot
)
: null;
return GetPlantImageSources(
Plant ?? Plot?.Plant,
Direction
);
}
function GetGardenPlotImage(
Plot,
Plant,
Progress
) {
const Images =
GetGardenPlotImageSources(
Plot,
Plant
);
if (Images.length === 0) {
return null;
}
if (Images.length === 1) {
return Images[0] ?? null;
}
if (Progress >= 1) {
return Images[
Images.length - 1
] ?? null;
}
const GrowingImageCount =
Images.length - 1;
const ImageIndex = Math.min(
Math.floor(
Progress *
GrowingImageCount
),
GrowingImageCount - 1
);
return Images[
ImageIndex
] ?? null;
}
function FormatGardenRemainingTime(
Milliseconds
) {
const TotalSeconds =
Math.max(
0,
Math.ceil(
Number(
Milliseconds
) / 1000
)
);
const Hours = Math.floor(
TotalSeconds / 3600
);
const Minutes = Math.floor(
(TotalSeconds % 3600) / 60
);
const Seconds =
TotalSeconds % 60;
if (Hours > 0) {
return (
Hours +
":" +
String(Minutes).padStart(
2,
"0"
) +
":" +
String(Seconds).padStart(
2,
"0"
)
);
}
return (
Minutes +
":" +
String(Seconds).padStart(
2,
"0"
)
);
}
function GetGardenPlotTimerText(
Plot,
Plant,
Progress,
AtTime = Date.now(),
CooldownState = null
) {
if (
Plot === null ||
Plant === null ||
Plant === undefined
) {
return "";
}
if (
Progress >= 1 &&
CooldownState !== null
) {
return FormatGardenRemainingTime(
CooldownState.Remaining
);
}
if (Progress >= 1) {
return "Ready";
}
return FormatGardenRemainingTime(
Math.max(
0,
Number(Plant.GrowthTime ?? 0) -
(
Number(AtTime) -
Number(Plot.PlantedAt ?? 0)
)
)
);
}
function CreateGardenPlotView(
Options
) {
const Plot =
Options.Plot ?? null;
const Plant =
Options.Plant;
const Progress =
Number(
Options.Progress ?? 0
);
const BorderProgress =
Number(
Options.BorderProgress ??
Progress
);
const DisplaySettings =
Options.DisplaySettings ?? {};
const Tile =
document.createElement(
"div"
);
Tile.className =
"PlantTile GardenPlot";
if (Options.ReadOnly === true) {
Tile.classList.add(
"GardenPlotReadOnly"
);
}
if (
Options.FunctionalCooldown ===
true
) {
Tile.classList.add(
"GardenPlotFunctionalCooldown"
);
}
if (
Options.Mature === true
) {
Tile.classList.add(
"GardenPlotMature"
);
}
if (Plot === null) {
Tile.classList.add(
"GardenPlotEmpty"
);
} else if (
Plant !== null &&
Plant !== undefined
) {
Tile.style.setProperty(
"--GrowthProgress",
`${BorderProgress * 100}%`
);
}
const MainButton =
document.createElement(
"button"
);
MainButton.className =
"GardenPlotMain";
MainButton.type = "button";
MainButton.disabled =
Options.ReadOnly === true;
if (
DisplaySettings.ShowPlantNames
) {
Tile.classList.add(
"GardenPlotWithName"
);
MainButton.appendChild(
CreateGardenPlotName(
Plot,
Plant
)
);
}
const Visual =
document.createElement(
"span"
);
Visual.className =
"GardenPlotVisual";
if (
Plot !== null &&
Plant === undefined
) {
Visual.textContent = "?";
} else if (
Plot !== null &&
Plant !== null
) {
const ImagePath =
Options.ImagePath ?? null;
if (ImagePath !== null) {
const Image =
document.createElement(
"img"
);
Image.className =
"PlantSprite";
Image.alt =
Plant.Name ?? "";
Image.src =
ImagePath;
Image.draggable = false;
Visual.appendChild(
Image
);
} else {
const MissingImage =
document.createElement(
"span"
);
MissingImage.className =
"GardenPlantMissing";
MissingImage.textContent =
Plant.Name ?? "Unknown";
Visual.appendChild(
MissingImage
);
}
}
MainButton.appendChild(
Visual
);
Tile.appendChild(
MainButton
);
AppendGardenPlotFooter(
Tile,
Plot,
Plant,
DisplaySettings,
Options.TimerText ?? "",
Options.ShowRotation === true,
Options.OnRotate,
Options.ReadOnly === true
);
return {
Tile,
MainButton,
Visual
};
}
function AppendGardenPlotFooter(
Tile,
Plot,
Plant,
DisplaySettings,
TimerText,
ShowRotation,
OnRotate,
ReadOnly
) {
const ShowTimer =
DisplaySettings.ShowGrowthTimers ===
true;
if (
!ShowTimer &&
!ShowRotation
) {
return;
}
Tile.classList.add(
"GardenPlotWithFooter"
);
const Footer =
document.createElement(
"span"
);
Footer.className =
"GardenPlotFooter";
if (
ShowTimer &&
ShowRotation
) {
Footer.classList.add(
"GardenPlotFooterSplit"
);
}
if (ShowTimer) {
const Timer =
document.createElement(
"span"
);
Timer.className =
"GardenPlotTimer";
Timer.textContent =
TimerText;
Footer.appendChild(
Timer
);
}
if (ShowRotation) {
const RotateButton =
document.createElement(
"button"
);
RotateButton.className =
"GardenPlotRotationButton";
RotateButton.type = "button";
RotateButton.textContent =
GetGardenPlotRotationLabel(
Plot
);
RotateButton.title =
ReadOnly
? "Plot rotation"
: "Rotate plot clockwise";
RotateButton.setAttribute(
"aria-label",
ReadOnly
? (
Plant?.Name ?? "Plot"
) +
" faces " +
GetGardenPlotRotation(
Plot
).toLowerCase()
: "Rotate " +
(Plant?.Name ?? "plot") +
" clockwise"
);
RotateButton.disabled =
ReadOnly;
if (
!ReadOnly &&
typeof OnRotate ===
"function"
) {
RotateButton.addEventListener(
"click",
OnRotate
);
}
Footer.appendChild(
RotateButton
);
}
Tile.appendChild(
Footer
);
}
function CreateGardenPlotName(
Plot,
Plant
) {
const Name =
document.createElement(
"span"
);
Name.className =
"GardenPlotName";
if (Plot === null) {
Name.textContent =
"Empty";
} else if (Plant === undefined) {
Name.textContent =
"Unknown";
} else {
Name.textContent =
Plant.Name;
Name.title =
Plant.Name;
}
return Name;
}
+83 -196
View File
@@ -447,6 +447,11 @@ function RenderCurrentGardenerGarden() {
const Garden = const Garden =
Gardens[GardenerGardenIndex]; Gardens[GardenerGardenIndex];
const Section =
document.getElementById(
"GardenerGardensSection"
);
const Grid = const Grid =
document.getElementById( document.getElementById(
"GardenerGardenGrid" "GardenerGardenGrid"
@@ -486,6 +491,13 @@ function RenderCurrentGardenerGarden() {
return; return;
} }
Section?.style.setProperty(
"--GardenBorderColour",
GetGardenBorderColour(
GardenerGardenIndex
)
);
Grid.style.setProperty( Grid.style.setProperty(
"--GardenWidth", "--GardenWidth",
Math.max( Math.max(
@@ -551,214 +563,89 @@ function RenderCurrentGardenerGarden() {
function CreateGardenerGardenPlot( function CreateGardenerGardenPlot(
Plot Plot
) { ) {
const Tile = const Plant =
document.createElement(
"div"
);
Tile.className =
"PlantTile GardenPlot GardenPlotReadOnly";
const Main =
document.createElement(
"button"
);
Main.type = "button";
Main.className =
"GardenPlotMain";
Main.disabled = true;
const Visual =
document.createElement(
"span"
);
Visual.className =
"GardenPlotVisual";
if (
Plot === null || Plot === null ||
typeof Plot !== "object" typeof Plot !== "object"
? null
: Plants[Plot.Plant];
let Progress = 0;
let ImagePath = null;
let TimerText = "";
const RenderTime =
Date.now();
if (
Plot !== null &&
typeof Plot === "object" &&
Plant !== undefined
) { ) {
Tile.classList.add( Progress =
"GardenPlotEmpty" GetGardenPlotGrowthProgress(
); Plot,
Plant,
Main.title = "Empty plot"; RenderTime
Main.appendChild(
Visual
);
Tile.appendChild(
Main
);
return Tile;
}
const Plant =
Plants[Plot.Plant];
Tile.classList.add(
"GardenPlotWithName"
);
const PlantName =
document.createElement(
"span"
);
PlantName.className =
"GardenPlotName";
PlantName.textContent =
Plant?.Name ?? Plot.Plant ?? "Unknown";
Main.appendChild(
PlantName
);
if (Plant === undefined) {
Visual.textContent = "?";
Main.title = "Unknown plant";
Main.appendChild(
Visual
);
Tile.appendChild(
Main
);
return Tile;
}
const Progress =
GetGardenerGardenPlantProgress(
Plot,
Plant
);
Tile.style.setProperty(
"--GrowthProgress",
(Progress * 100) + "%"
);
if (Progress >= 1) {
Tile.classList.add(
"GardenPlotMature"
);
}
const ImageSource =
GetGardenerGardenPlantImage(
Plot,
Plant,
Progress
);
if (ImageSource !== null) {
const Image =
document.createElement(
"img"
); );
Image.className = ImagePath =
"PlantSprite"; GetGardenPlotImage(
Image.src = ImageSource; Plot,
Image.alt = ""; Plant,
Image.draggable = false; Progress
);
Visual.appendChild( TimerText =
Image GetGardenPlotTimerText(
); Plot,
Plant,
Progress,
RenderTime
);
} }
Main.title = const View =
Plant.Name + CreateGardenPlotView({
(Progress >= 1 Plot:
? " — mature" Plot !== null &&
: " — growing"); typeof Plot === "object"
? Plot
Main.appendChild( : null,
Visual
);
Tile.appendChild(
Main
);
return Tile;
}
function GetGardenerGardenPlantProgress(
Plot,
Plant
) {
const GrowthTime =
Number(Plant.GrowthTime ?? 0);
if (GrowthTime <= 0) {
return 1;
}
const PlantedAt =
Number(Plot.PlantedAt ?? 0);
const Age =
Date.now() - PlantedAt;
return Math.max(
0,
Math.min(
Age / GrowthTime,
1
)
);
}
function GetGardenerGardenPlantImage(
Plot,
Plant,
Progress
) {
const Direction =
Plant.DirectionalSprites === true
? Plot.Rotation ?? "East"
: null;
const Images =
GetPlantImageSources(
Plant, Plant,
Direction Progress,
); BorderProgress: Progress,
DisplaySettings: {
ShowPlantNames: true,
ShowGrowthTimers: true,
ShowPlotRotation: false
},
ImagePath,
TimerText,
ReadOnly: true,
Mature:
Plant !== null &&
Plant !== undefined &&
Progress >= 1
});
if (Images.length === 0) { if (Plot === null) {
return null; View.MainButton.title =
"Empty plot";
} else if (
Plant === null ||
Plant === undefined
) {
View.MainButton.title =
"Unknown plant";
} else {
View.MainButton.title =
Plant.Name +
(Progress >= 1
? " — mature"
: " — growing");
} }
if (Images.length === 1) { return View.Tile;
return Images[0] ?? null;
}
if (Progress >= 1) {
return Images[
Images.length - 1
] ?? null;
}
const GrowingImageCount =
Images.length - 1;
const Index = Math.min(
Math.floor(
Progress *
GrowingImageCount
),
GrowingImageCount - 1
);
return Images[Index] ?? null;
} }