${T.mainMenu.puzzleDlcText}
+ + ${T.puzzleMenu.dlcHint} +
- ${categories
+
+
+
`;
@@ -154,6 +126,52 @@ export class PuzzleMenuState extends TextualGameState {
.then(() => (this.loading = false));
}
+ /**
+ * Selects a root category
+ * @param {string} rootCategory
+ * @param {string=} category
+ */
+ selectRootCategory(rootCategory, category) {
+ const subCategory = category || navigation[rootCategory][0];
+ console.warn("Select root category", rootCategory, category, "->", subCategory);
+
+ if (this.loading) {
+ return;
+ }
+ if (this.activeCategory === subCategory) {
+ return;
+ }
+
+ const activeCategory = this.htmlElement.querySelector(".active[data-root-category]");
+ if (activeCategory) {
+ activeCategory.classList.remove("active");
+ }
+
+ const newActiveCategory = this.htmlElement.querySelector(`[data-root-category="${rootCategory}"]`);
+ if (newActiveCategory) {
+ newActiveCategory.classList.add("active");
+ }
+
+ // Rerender buttons
+
+ const subContainer = this.htmlElement.querySelector(".subCategories");
+ while (subContainer.firstChild) {
+ subContainer.removeChild(subContainer.firstChild);
+ }
+
+ const children = navigation[rootCategory];
+ for (const category of children) {
+ const button = document.createElement("button");
+ button.setAttribute("data-category", category);
+ button.classList.add("styledButton", "category", "child");
+ button.innerText = T.puzzleMenu.categories[category];
+ this.trackClicks(button, () => this.selectCategory(category));
+ subContainer.appendChild(button);
+ }
+
+ this.selectCategory(subCategory);
+ }
+
/**
*
* @param {import("../savegame/savegame_typedefs").PuzzleMetadata[]} puzzles
@@ -167,7 +185,11 @@ export class PuzzleMenuState extends TextualGameState {
for (const puzzle of puzzles) {
const elem = document.createElement("div");
elem.classList.add("puzzle");
- elem.classList.toggle("completed", puzzle.completed);
+ elem.setAttribute("data-puzzle-id", String(puzzle.id));
+
+ if (this.activeCategory !== "mine") {
+ elem.classList.toggle("completed", puzzle.completed);
+ }
if (puzzle.title) {
const title = document.createElement("div");
@@ -176,7 +198,7 @@ export class PuzzleMenuState extends TextualGameState {
elem.appendChild(title);
}
- if (puzzle.author) {
+ if (puzzle.author && !["official", "mine"].includes(this.activeCategory)) {
const author = document.createElement("div");
author.classList.add("author");
author.innerText = "by " + puzzle.author;
@@ -187,7 +209,10 @@ export class PuzzleMenuState extends TextualGameState {
stats.classList.add("stats");
elem.appendChild(stats);
- if (puzzle.downloads > 0) {
+ if (
+ puzzle.downloads > 3 &&
+ !["official", "easy", "medium", "hard"].includes(this.activeCategory)
+ ) {
const difficulty = document.createElement("div");
difficulty.classList.add("difficulty");
@@ -198,14 +223,15 @@ export class PuzzleMenuState extends TextualGameState {
difficulty.innerText = completionPercentage + "%";
stats.appendChild(difficulty);
- if (completionPercentage < 10) {
+ if (completionPercentage < 40) {
difficulty.classList.add("stage--hard");
- } else if (completionPercentage < 30) {
+ difficulty.innerText = T.puzzleMenu.difficulties.hard;
+ } else if (completionPercentage < 80) {
difficulty.classList.add("stage--medium");
- } else if (completionPercentage < 60) {
- difficulty.classList.add("stage--normal");
+ difficulty.innerText = T.puzzleMenu.difficulties.medium;
} else {
difficulty.classList.add("stage--easy");
+ difficulty.innerText = T.puzzleMenu.difficulties.easy;
}
}
@@ -230,6 +256,23 @@ export class PuzzleMenuState extends TextualGameState {
icon.appendChild(canvas);
elem.appendChild(icon);
+ if (this.activeCategory === "mine") {
+ const deleteButton = document.createElement("button");
+ deleteButton.classList.add("styledButton", "delete");
+ this.trackClicks(
+ deleteButton,
+ () => {
+ this.tryDeletePuzzle(puzzle);
+ },
+ {
+ consumeEvents: true,
+ preventClick: true,
+ preventDefault: true,
+ }
+ );
+ elem.appendChild(deleteButton);
+ }
+
container.appendChild(elem);
this.trackClicks(elem, () => this.playPuzzle(puzzle));
@@ -243,16 +286,39 @@ export class PuzzleMenuState extends TextualGameState {
}
}
+ /**
+ * @param {import("../savegame/savegame_typedefs").PuzzleMetadata} puzzle
+ */
+ tryDeletePuzzle(puzzle) {
+ const signals = this.dialogs.showWarning(
+ T.dialogs.puzzleDelete.title,
+ T.dialogs.puzzleDelete.desc.replace("
+ ${Object.keys(navigation)
.map(
- category => `
-
- `
+ rootCategory =>
+ ``
)
.join("")}
+
+
+
+
+