Polish Princess Lima map data and interaction feedback

assets/scripts/pages/princess-lima-scenes.js

@@ -182,7 +182,8 @@
         if (!puzzle || controller.getState().solvedPuzzles.includes(puzzle.id)) return;
         puzzle.objects.forEach(([id, x, y]) => {
           const node = this.add.zone(x, y, 38, 38);
-          this.interactables.push({ type: "puzzle", id, puzzle, x, y, sprite: node });
+          const marker = this.createInteractionMarker(x, y, `${readableId(id)} · E`);
+          this.interactables.push({ type: "puzzle", id, puzzle, x, y, sprite: node, marker });
         });
       }
 
@@ -191,10 +192,22 @@
           const chestId = `${this.regionId}-${id}-${index}`;
           if (controller.getState().openedChests.includes(chestId)) return;
           const item = this.add.zone(x, y, 34, 34);
-          this.interactables.push({ type: "pickup", id, chestId, x, y, sprite: item });
+          const marker = this.createInteractionMarker(x, y, `${Data.ITEMS[id].name} · E`);
+          this.interactables.push({ type: "pickup", id, chestId, x, y, sprite: item, marker });
         });
       }
 
+      createInteractionMarker(x, y, label) {
+        return this.add.text(x, y - 32, label, {
+          fontFamily: "monospace",
+          fontSize: "13px",
+          fontStyle: "bold",
+          color: "#fff6ce",
+          backgroundColor: "#111827",
+          padding: { x: 7, y: 4 }
+        }).setOrigin(0.5).setDepth(900).setVisible(false);
+      }
+
       createInput() {
         this.cursors = this.input.keyboard.createCursorKeys();
         this.keys = this.input.keyboard.addKeys({
@@ -253,6 +266,7 @@
         let nearest = null;
         this.interactables.forEach((item) => {
           const distance = Math.hypot(item.x - this.player.x, item.y - this.player.y);
+          if (item.marker) item.marker.setVisible(distance <= 92);
           const radius = item.type === "exit" ? 70 : 54;
           if (distance <= radius && distance < best) {
             best = distance;
@@ -342,6 +356,7 @@
         if (state.solvedPuzzles.includes(puzzle.id)) return;
         if (puzzle.type === "set") {
           if (!this.puzzleInput.includes(item.id)) this.puzzleInput.push(item.id);
+          if (item.marker) item.marker.setText(`✓ ${readableId(item.id)}`);
           if (this.puzzleInput.length === puzzle.sequence.length) this.finishPuzzle(puzzle.id);
           else controller.status(`${this.puzzleInput.length} / ${puzzle.sequence.length} mechanisms active.`);
           return;
@@ -353,6 +368,7 @@
           controller.status("The sequence resets. Look for the environmental clue and try again.");
           return;
         }
+        if (item.marker) item.marker.setText(`✓ ${readableId(item.id)}`);
         if (this.puzzleInput.length === puzzle.sequence.length) this.finishPuzzle(puzzle.id);
         else controller.status(`${item.id} answers. ${this.puzzleInput.length} / ${puzzle.sequence.length}.`);
       }
@@ -377,6 +393,7 @@
         controller.setState(state, `${Data.ITEMS[item.id].name} collected.`);
         controller.audio.play("pickup");
         item.sprite.destroy();
+        if (item.marker) item.marker.destroy();
         this.interactables = this.interactables.filter((entry) => entry !== item);
       }
 
@@ -585,5 +602,9 @@
     return "Interact · E / Enter";
   }
 
+  function readableId(value) {
+    return String(value).replace(/_/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase());
+  }
+
   root.PrincessLimaScenes = Object.freeze({ createSceneClasses, playerFrame });
 }(typeof globalThis !== "undefined" ? globalThis : this));