mirror of
https://git.srhtnin.garden/sarah/srhtnin.github.io.git
synced 2026-10-13 18:38:11 +02:00
Made styling more coherent.
This commit is contained in:
1 parent
bafb53e4d5
commit
39e196e994
5 files changed
+730
-692
No files matched your search
@@ -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
@@ -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
@@ -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
|
||||||
) {
|
) {
|
||||||
|
|||||||
@@ -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
@@ -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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user