{#if hasDirection}
@@ -31,6 +32,8 @@
.guard.blinking { background: var(--guard-blinking); }
.guard.blinking.off { background: var(--guard-blinking-off); }
.guard.patrolling { background: var(--guard-patrolling); }
+ .guard.chaser { background: var(--guard-chaser, #ff6622); }
+ .guard.chaser.alert { background: #ff2200; box-shadow: 0 0 8px #ff2200; }
.guard.mirror { background: var(--guard-mirror); border-radius: 4px; transform: translate(-50%, -50%) rotate(45deg); }
.direction-indicator {
diff --git a/src/components/LevelCompletePopup.svelte b/src/components/LevelCompletePopup.svelte
new file mode 100644
index 0000000..0d66d5c
--- /dev/null
+++ b/src/components/LevelCompletePopup.svelte
@@ -0,0 +1,76 @@
+
+
+
+
+
{getText('levelComplete') || 'Level Complete!'}
+
+ {#each [1, 2, 3] as i}
+ ★
+ {/each}
+
+
Moves: {moves} / Par: {parMoves}
+
+
+
+
+
diff --git a/src/lib/game/guards.js b/src/lib/game/guards.js
index b937b4f..c712fe6 100644
--- a/src/lib/game/guards.js
+++ b/src/lib/game/guards.js
@@ -141,6 +141,101 @@ export class MirrorGuard extends Guard {
}
}
+export class ChaserGuard extends Guard {
+ constructor(grid, row, col, detectionRadius) {
+ super(grid, row, col, 'chaser');
+ this.startRow = row;
+ this.startCol = col;
+ this.detectionRadius = detectionRadius || 3;
+ this.isChasing = false;
+ this.targetRow = row;
+ this.targetCol = col;
+ }
+
+ updateLight() {
+ if (this.grid.isValidPosition(this.row, this.col)) {
+ this.grid.setLight(this.row, this.col, true);
+ }
+ // Light cell in facing direction
+ const dir = this.getDirectionOffset(this.direction);
+ const fr = this.row + dir.row;
+ const fc = this.col + dir.col;
+ if (this.grid.isValidPosition(fr, fc)) {
+ this.grid.setLight(fr, fc, true);
+ }
+ }
+
+ getDirectionOffset(dir) {
+ const directions = [
+ { row: -1, col: 0 }, { row: 0, col: 1 },
+ { row: 1, col: 0 }, { row: 0, col: -1 },
+ ];
+ return directions[dir];
+ }
+
+ onTurnChange(allGuards, player) {
+ if (!player) { this.updateLight(); return; }
+
+ const dist = Math.abs(this.row - player.row) + Math.abs(this.col - player.col);
+
+ if (dist <= this.detectionRadius) {
+ this.isChasing = true;
+ this.targetRow = player.row;
+ this.targetCol = player.col;
+ }
+
+ if (this.isChasing) {
+ // Move one step toward target
+ const dr = this.targetRow - this.row;
+ const dc = this.targetCol - this.col;
+ let newRow = this.row;
+ let newCol = this.col;
+
+ // Prefer row movement, then col
+ if (dr !== 0) {
+ const step = dr > 0 ? 1 : -1;
+ if (this.grid.isValidPosition(this.row + step, this.col) &&
+ !this.grid.isWall(this.row + step, this.col)) {
+ newRow = this.row + step;
+ } else if (dc !== 0) {
+ const cstep = dc > 0 ? 1 : -1;
+ if (this.grid.isValidPosition(this.row, this.col + cstep) &&
+ !this.grid.isWall(this.row, this.col + cstep)) {
+ newCol = this.col + cstep;
+ }
+ }
+ } else if (dc !== 0) {
+ const step = dc > 0 ? 1 : -1;
+ if (this.grid.isValidPosition(this.row, this.col + step) &&
+ !this.grid.isWall(this.row, this.col + step)) {
+ newCol = this.col + step;
+ }
+ }
+
+ // Update facing direction
+ if (newRow < this.row) this.direction = 0;
+ else if (newCol > this.col) this.direction = 1;
+ else if (newRow > this.row) this.direction = 2;
+ else if (newCol < this.col) this.direction = 3;
+
+ this.row = newRow;
+ this.col = newCol;
+
+ // Reached target and player not nearby — return to start
+ if (this.row === this.targetRow && this.col === this.targetCol &&
+ dist > this.detectionRadius) {
+ this.targetRow = this.startRow;
+ this.targetCol = this.startCol;
+ if (this.row === this.startRow && this.col === this.startCol) {
+ this.isChasing = false;
+ }
+ }
+ }
+
+ this.updateLight();
+ }
+}
+
export class PatrollingGuard extends Guard {
constructor(grid, startRow, startCol, path) {
super(grid, startRow, startCol, 'patrolling');
diff --git a/src/lib/game/level-manager.js b/src/lib/game/level-manager.js
index c0f4f80..88103c6 100644
--- a/src/lib/game/level-manager.js
+++ b/src/lib/game/level-manager.js
@@ -3,7 +3,7 @@
import { LEVELS } from '../levels/levels.js';
import { GridSystem } from './grid-system.js';
import { Player } from './player.js';
-import { StaticGuard, RotatingGuard, BlinkingGuard, PatrollingGuard, MirrorGuard } from './guards.js';
+import { StaticGuard, RotatingGuard, BlinkingGuard, PatrollingGuard, MirrorGuard, ChaserGuard } from './guards.js';
// Load a level by ID, returns complete game state
export function loadLevel(levelId) {
@@ -50,6 +50,9 @@ export function loadLevel(levelId) {
case 'mirror':
guard = new MirrorGuard(grid, g.position.row, g.position.col, g.reflectDirection);
break;
+ case 'chaser':
+ guard = new ChaserGuard(grid, g.position.row, g.position.col, g.detectionRadius);
+ break;
}
if (guard) guards.push(guard);
});
@@ -67,6 +70,7 @@ export function loadLevel(levelId) {
isFinalLevel: data.isFinalLevel || false,
goalRow: data.goal.row,
goalCol: data.goal.col,
+ parMoves: data.parMoves || 99,
};
}
diff --git a/src/lib/game/turn-manager.js b/src/lib/game/turn-manager.js
index a5c6ea0..792e59a 100644
--- a/src/lib/game/turn-manager.js
+++ b/src/lib/game/turn-manager.js
@@ -17,7 +17,7 @@ export class TurnManager {
// Clear current lights and update guards
grid.clearAllLight();
- guards.forEach(guard => guard.onTurnChange(guards));
+ guards.forEach(guard => guard.onTurnChange(guards, player));
// Check if player is now in a lit cell
if (grid.isLight(player.row, player.col)) {
@@ -27,6 +27,47 @@ export class TurnManager {
return { detected: false, levelComplete: false };
}
+ // Simulate next turn to preview future lit cells (non-destructive)
+ previewNextTurn(grid, player, guards) {
+ // Snapshot guard states
+ const snapshots = guards.map(g => ({
+ row: g.row, col: g.col, direction: g.direction,
+ isOn: g.isOn, currentPathIndex: g.currentPathIndex,
+ isReversing: g.isReversing, isChasing: g.isChasing,
+ targetRow: g.targetRow, targetCol: g.targetCol,
+ }));
+
+ // Run one turn on real guards
+ grid.clearAllLight();
+ guards.forEach(g => g.onTurnChange(guards, player));
+
+ // Collect lit cells
+ const previewSet = new Set();
+ for (let r = 0; r < grid.rows; r++) {
+ for (let c = 0; c < grid.cols; c++) {
+ if (grid.isLight(r, c)) previewSet.add(`${r},${c}`);
+ }
+ }
+
+ // Restore guard states
+ guards.forEach((g, i) => {
+ const s = snapshots[i];
+ g.row = s.row; g.col = s.col; g.direction = s.direction;
+ g.isOn = s.isOn;
+ if (s.currentPathIndex !== undefined) g.currentPathIndex = s.currentPathIndex;
+ if (s.isReversing !== undefined) g.isReversing = s.isReversing;
+ if (s.isChasing !== undefined) g.isChasing = s.isChasing;
+ if (s.targetRow !== undefined) g.targetRow = s.targetRow;
+ if (s.targetCol !== undefined) g.targetCol = s.targetCol;
+ });
+
+ // Restore current lighting
+ grid.clearAllLight();
+ guards.forEach(g => g.updateLight(guards));
+
+ return previewSet;
+ }
+
reset() {
this.turnCount = 0;
}
diff --git a/src/lib/levels/levels.js b/src/lib/levels/levels.js
index d5763c8..7312d98 100644
--- a/src/lib/levels/levels.js
+++ b/src/lib/levels/levels.js
@@ -8,10 +8,12 @@ export const LEVELS = [
player: { row: 0, col: 0 },
goal: { row: 5, col: 5 },
walls: [
- { row: 1, col: 1 }, { row: 1, col: 2 },
- { row: 3, col: 3 }, { row: 3, col: 4 },
+ { row: 1, col: 1 }, { row: 1, col: 2 }, { row: 1, col: 3 },
+ { row: 3, col: 2 }, { row: 3, col: 3 }, { row: 3, col: 4 },
+ { row: 4, col: 0 }, { row: 4, col: 1 },
],
guards: [],
+ parMoves: 10,
},
{
id: 2,
@@ -21,7 +23,8 @@ export const LEVELS = [
player: { row: 0, col: 0 },
goal: { row: 5, col: 5 },
walls: [
- { row: 2, col: 2 }, { row: 3, col: 3 },
+ { row: 1, col: 3 }, { row: 2, col: 1 }, { row: 2, col: 2 },
+ { row: 3, col: 3 }, { row: 3, col: 4 }, { row: 4, col: 1 },
],
guards: [
{
@@ -32,7 +35,16 @@ export const LEVELS = [
{ row: 2, col: 5 }, { row: 3, col: 4 },
],
},
+ {
+ type: "static",
+ position: { row: 4, col: 2 },
+ litCells: [
+ { row: 3, col: 2 }, { row: 4, col: 3 },
+ { row: 5, col: 2 },
+ ],
+ },
],
+ parMoves: 12,
},
// === ACT 2: THE VEGETABLE GARDEN (walls as shields + rotating guards) ===
@@ -44,28 +56,40 @@ export const LEVELS = [
player: { row: 0, col: 0 },
goal: { row: 6, col: 6 },
walls: [
- { row: 1, col: 1 }, { row: 2, col: 1 },
- { row: 3, col: 3 }, { row: 3, col: 5 }, { row: 5, col: 4 },
+ { row: 1, col: 1 }, { row: 2, col: 1 }, { row: 2, col: 5 },
+ { row: 3, col: 3 }, { row: 3, col: 5 },
+ { row: 4, col: 1 }, { row: 5, col: 3 }, { row: 5, col: 4 },
],
guards: [
{
type: "static",
position: { row: 2, col: 3 },
litCells: [
- { row: 1, col: 3 }, { row: 2, col: 2 }, { row: 2, col: 4 },
+ { row: 1, col: 3 }, { row: 2, col: 2 },
+ { row: 2, col: 4 }, { row: 3, col: 3 },
],
},
{
type: "static",
- position: { row: 5, col: 5 },
+ position: { row: 4, col: 5 },
litCells: [
- { row: 4, col: 5 }, { row: 5, col: 6 },
+ { row: 3, col: 5 }, { row: 4, col: 4 },
+ { row: 4, col: 6 }, { row: 5, col: 5 },
+ ],
+ },
+ {
+ type: "static",
+ position: { row: 5, col: 1 },
+ litCells: [
+ { row: 4, col: 1 }, { row: 5, col: 0 },
+ { row: 5, col: 2 }, { row: 6, col: 1 },
],
},
],
+ parMoves: 14,
},
{
- // First rotating guard — enclosed in walls so player can observe the pattern
+ // First rotating guard — must time passage; walls create a narrow corridor
id: 4,
name: "The Searchlight",
storyKey: "level4Story",
@@ -73,17 +97,28 @@ export const LEVELS = [
player: { row: 0, col: 0 },
goal: { row: 6, col: 6 },
walls: [
- { row: 2, col: 2 }, { row: 2, col: 3 }, { row: 2, col: 4 },
- { row: 3, col: 2 }, { row: 3, col: 4 },
- { row: 4, col: 2 }, { row: 4, col: 3 }, { row: 4, col: 4 },
+ { row: 1, col: 2 }, { row: 1, col: 3 },
+ { row: 2, col: 2 }, { row: 2, col: 5 },
+ { row: 3, col: 4 }, { row: 3, col: 5 },
+ { row: 4, col: 1 }, { row: 4, col: 2 },
+ { row: 5, col: 4 },
],
guards: [
{
type: "rotating",
- position: { row: 3, col: 3 },
+ position: { row: 3, col: 2 },
startDirection: 0,
},
+ {
+ type: "static",
+ position: { row: 5, col: 5 },
+ litCells: [
+ { row: 4, col: 5 }, { row: 5, col: 6 },
+ { row: 6, col: 5 },
+ ],
+ },
],
+ parMoves: 15,
},
// === ACT 3: THE FORTRESS (blinking guards + timing puzzles) ===
@@ -95,23 +130,43 @@ export const LEVELS = [
player: { row: 0, col: 0 },
goal: { row: 6, col: 6 },
walls: [
- { row: 2, col: 2 }, { row: 2, col: 4 },
- { row: 4, col: 2 }, { row: 4, col: 4 },
+ { row: 1, col: 3 }, { row: 2, col: 1 },
+ { row: 2, col: 5 }, { row: 3, col: 3 },
+ { row: 4, col: 1 }, { row: 4, col: 5 },
+ { row: 5, col: 3 },
],
guards: [
{
type: "blinking",
- position: { row: 3, col: 3 },
+ position: { row: 2, col: 3 },
startState: true,
litCells: [
- { row: 2, col: 3 }, { row: 3, col: 2 },
- { row: 3, col: 4 }, { row: 4, col: 3 },
+ { row: 1, col: 3 }, { row: 2, col: 2 },
+ { row: 2, col: 4 },
+ ],
+ },
+ {
+ type: "blinking",
+ position: { row: 4, col: 3 },
+ startState: false,
+ litCells: [
+ { row: 4, col: 2 }, { row: 4, col: 4 },
+ { row: 5, col: 3 },
+ ],
+ },
+ {
+ type: "static",
+ position: { row: 3, col: 6 },
+ litCells: [
+ { row: 2, col: 6 }, { row: 3, col: 5 },
+ { row: 4, col: 6 },
],
},
],
+ parMoves: 14,
},
{
- // Blinking guard + static guard — must time passage through blinking zone
+ // Blinking + static — narrow corridor requires precise timing and wait action
id: 6,
name: "The Flickering Corridor",
storyKey: "level6Story",
@@ -119,35 +174,50 @@ export const LEVELS = [
player: { row: 0, col: 0 },
goal: { row: 7, col: 7 },
walls: [
- { row: 2, col: 2 }, { row: 2, col: 3 }, { row: 2, col: 4 }, { row: 2, col: 5 },
- { row: 3, col: 2 }, { row: 3, col: 5 },
- { row: 4, col: 2 }, { row: 4, col: 5 },
- { row: 5, col: 2 }, { row: 5, col: 3 }, { row: 5, col: 4 }, { row: 5, col: 5 },
+ { row: 1, col: 3 }, { row: 1, col: 4 },
+ { row: 2, col: 1 }, { row: 2, col: 6 },
+ { row: 3, col: 3 }, { row: 3, col: 4 },
+ { row: 4, col: 1 }, { row: 4, col: 6 },
+ { row: 5, col: 3 }, { row: 5, col: 4 },
+ { row: 6, col: 1 }, { row: 6, col: 6 },
],
guards: [
{
type: "blinking",
- position: { row: 3, col: 3 },
+ position: { row: 2, col: 3 },
startState: true,
litCells: [
- { row: 3, col: 4 }, { row: 4, col: 3 },
+ { row: 2, col: 2 }, { row: 2, col: 4 },
+ { row: 3, col: 3 },
+ ],
+ },
+ {
+ type: "blinking",
+ position: { row: 5, col: 5 },
+ startState: false,
+ litCells: [
+ { row: 4, col: 5 }, { row: 5, col: 6 },
+ { row: 6, col: 5 },
],
},
{
type: "static",
position: { row: 1, col: 6 },
litCells: [
- { row: 0, col: 6 }, { row: 1, col: 7 },
+ { row: 0, col: 6 }, { row: 1, col: 5 },
+ { row: 1, col: 7 },
],
},
{
type: "static",
- position: { row: 6, col: 1 },
+ position: { row: 6, col: 2 },
litCells: [
- { row: 5, col: 1 }, { row: 6, col: 0 }, { row: 6, col: 2 },
+ { row: 5, col: 2 }, { row: 6, col: 3 },
+ { row: 7, col: 2 },
],
},
],
+ parMoves: 16,
},
// === ACT 4: THE UNDERGROUND (patrolling guards + path prediction) ===
@@ -161,8 +231,8 @@ export const LEVELS = [
walls: [
{ row: 1, col: 2 }, { row: 1, col: 3 }, { row: 1, col: 4 }, { row: 1, col: 5 },
{ row: 2, col: 2 }, { row: 2, col: 5 },
- { row: 3, col: 2 }, { row: 3, col: 5 },
- { row: 4, col: 2 }, { row: 4, col: 5 },
+ { row: 3, col: 5 },
+ { row: 4, col: 2 },
{ row: 5, col: 2 }, { row: 5, col: 5 },
{ row: 6, col: 2 }, { row: 6, col: 3 }, { row: 6, col: 4 }, { row: 6, col: 5 },
],
@@ -175,10 +245,19 @@ export const LEVELS = [
{ row: 4, col: 4 }, { row: 4, col: 3 },
],
},
+ {
+ type: "static",
+ position: { row: 5, col: 7 },
+ litCells: [
+ { row: 4, col: 7 }, { row: 5, col: 6 },
+ { row: 6, col: 7 },
+ ],
+ },
],
+ parMoves: 17,
},
{
- // Two patrols with interlocking paths — player must weave between them
+ // Two patrols with interlocking paths + blinking gate
id: 8,
name: "The Gauntlet",
storyKey: "level8Story",
@@ -186,8 +265,10 @@ export const LEVELS = [
player: { row: 0, col: 0 },
goal: { row: 7, col: 7 },
walls: [
+ { row: 1, col: 1 }, { row: 1, col: 6 },
{ row: 3, col: 3 }, { row: 3, col: 4 },
{ row: 4, col: 3 }, { row: 4, col: 4 },
+ { row: 6, col: 1 }, { row: 6, col: 6 },
],
guards: [
{
@@ -208,13 +289,21 @@ export const LEVELS = [
{ row: 5, col: 2 }, { row: 5, col: 5 },
],
},
+ {
+ type: "blinking",
+ position: { row: 3, col: 7 },
+ startState: true,
+ litCells: [
+ { row: 2, col: 7 }, { row: 4, col: 7 },
+ ],
+ },
],
+ parMoves: 18,
},
- // === ACT 5: THE ROYAL PALACE (combinations + "The Decoy") ===
+ // === ACT 5: THE ROYAL PALACE (combinations + chaser + "The Decoy") ===
{
- // The Decoy — two routes: obvious short one syncs to danger at turn 6,
- // longer route is actually safe if you count turns
+ // The Decoy — chaser guard punishes the obvious short path
id: 9,
name: "The Decoy Path",
storyKey: "level9Story",
@@ -222,9 +311,9 @@ export const LEVELS = [
player: { row: 0, col: 0 },
goal: { row: 7, col: 7 },
walls: [
- // Central wall creates two corridors
{ row: 1, col: 3 }, { row: 2, col: 3 }, { row: 3, col: 3 },
{ row: 4, col: 4 }, { row: 5, col: 4 }, { row: 6, col: 4 },
+ { row: 5, col: 1 },
],
guards: [
{
@@ -249,10 +338,17 @@ export const LEVELS = [
{ row: 6, col: 7 },
],
},
+ {
+ // Chaser lurks near the short route — triggers when player rushes
+ type: "chaser",
+ position: { row: 2, col: 1 },
+ detectionRadius: 3,
+ },
],
+ parMoves: 19,
},
{
- // Hall of Mirrors — rotating guard + mirror guards redirect beams
+ // Hall of Mirrors — rotating guard + mirror guards redirect beams + chaser
id: 10,
name: "Hall of Mirrors",
storyKey: "level10Story",
@@ -260,8 +356,10 @@ export const LEVELS = [
player: { row: 0, col: 0 },
goal: { row: 7, col: 7 },
walls: [
+ { row: 2, col: 1 },
{ row: 3, col: 3 }, { row: 3, col: 4 },
{ row: 4, col: 3 }, { row: 4, col: 4 },
+ { row: 5, col: 6 },
],
guards: [
{
@@ -284,10 +382,22 @@ export const LEVELS = [
position: { row: 5, col: 5 },
startDirection: 2,
},
+ {
+ type: "mirror",
+ position: { row: 5, col: 2 },
+ reflectDirection: "cw",
+ },
+ {
+ // Chaser in bottom-right quadrant to pressure the player
+ type: "chaser",
+ position: { row: 7, col: 4 },
+ detectionRadius: 3,
+ },
],
+ parMoves: 20,
},
{
- // The Throne Room — all guard types combined
+ // The Throne Room — all guard types combined including chaser
id: 11,
name: "The Throne Room",
storyKey: "level11Story",
@@ -307,7 +417,7 @@ export const LEVELS = [
type: "static",
position: { row: 1, col: 7 },
litCells: [
- { row: 1, col: 6 }, { row: 1, col: 8 },
+ { row: 0, col: 7 }, { row: 1, col: 6 }, { row: 1, col: 8 },
],
},
{
@@ -332,12 +442,18 @@ export const LEVELS = [
{ row: 7, col: 3 }, { row: 7, col: 2 },
],
},
+ {
+ // Chaser guards the final stretch
+ type: "chaser",
+ position: { row: 7, col: 7 },
+ detectionRadius: 3,
+ },
],
+ parMoves: 24,
},
{
- // THE PRINCESS CHAMBER — escalating detection: light radiates from goal
- // when player reaches distance 4, one ring per turn lights up, creating
- // an expanding wave. The princess senses you approaching.
+ // THE PRINCESS CHAMBER — unbeatable: expanding light wave from goal
+ // When player reaches distance 4, one ring per turn lights up.
id: 12,
name: "The Princess Chamber",
storyKey: "level12Story",
@@ -395,7 +511,14 @@ export const LEVELS = [
{ row: 8, col: 6 }, { row: 8, col: 7 },
],
},
+ {
+ // Extra chaser to make it even more hopeless
+ type: "chaser",
+ position: { row: 8, col: 2 },
+ detectionRadius: 4,
+ },
],
isFinalLevel: true,
+ parMoves: 99,
},
];
diff --git a/src/lib/progress.js b/src/lib/progress.js
index 47faab9..68ce494 100644
--- a/src/lib/progress.js
+++ b/src/lib/progress.js
@@ -5,6 +5,8 @@ const STORAGE_KEY = 'nntv-progress';
const DEFAULT_PROGRESS = {
maxLevel: 1,
completedLevels: [],
+ levelStars: {},
+ levelBestMoves: {},
};
export function getProgress() {
@@ -15,6 +17,8 @@ export function getProgress() {
return {
maxLevel: parsed.maxLevel || 1,
completedLevels: parsed.completedLevels || [],
+ levelStars: parsed.levelStars || {},
+ levelBestMoves: parsed.levelBestMoves || {},
};
}
} catch (e) {
@@ -23,7 +27,14 @@ export function getProgress() {
return { ...DEFAULT_PROGRESS };
}
-export function completeLevel(levelNum, totalLevels) {
+// Calculate star rating: 3★ = ≤par, 2★ = par+1 to par+3, 1★ = completed
+export function calculateStars(moves, parMoves) {
+ if (moves <= parMoves) return 3;
+ if (moves <= parMoves + 3) return 2;
+ return 1;
+}
+
+export function completeLevel(levelNum, totalLevels, moves, parMoves) {
const progress = getProgress();
if (!progress.completedLevels.includes(levelNum)) {
progress.completedLevels.push(levelNum);
@@ -33,10 +44,20 @@ export function completeLevel(levelNum, totalLevels) {
if (nextLevel > progress.maxLevel) {
progress.maxLevel = nextLevel;
}
+ // Star rating (only update if better)
+ let stars = 1;
+ if (moves != null && parMoves != null) {
+ stars = calculateStars(moves, parMoves);
+ const key = String(levelNum);
+ const prevStars = progress.levelStars[key] || 0;
+ if (stars > prevStars) progress.levelStars[key] = stars;
+ const prevBest = progress.levelBestMoves[key];
+ if (prevBest == null || moves < prevBest) progress.levelBestMoves[key] = moves;
+ }
try {
localStorage.setItem(STORAGE_KEY, JSON.stringify(progress));
} catch (e) {
// Storage full or unavailable
}
- return progress;
+ return { ...progress, stars };
}
diff --git a/src/scenes/Game.svelte b/src/scenes/Game.svelte
index 46be84b..0260e88 100644
--- a/src/scenes/Game.svelte
+++ b/src/scenes/Game.svelte
@@ -3,12 +3,14 @@
import { getText } from '../lib/localization.js';
import { loadLevel, getTotalLevels } from '../lib/game/level-manager.js';
import { TurnManager } from '../lib/game/turn-manager.js';
- import { completeLevel } from '../lib/progress.js';
+ import { completeLevel, calculateStars } from '../lib/progress.js';
+ import { LEVELS } from '../lib/levels/levels.js';
import GameBoard from '../components/GameBoard.svelte';
import PlayerSprite from '../components/PlayerSprite.svelte';
import GuardSprite from '../components/GuardSprite.svelte';
import GameHud from '../components/GameHud.svelte';
import DetectionPopup from '../components/DetectionPopup.svelte';
+ import LevelCompletePopup from '../components/LevelCompletePopup.svelte';
import PauseMenu from '../components/PauseMenu.svelte';
let { navigate, level = 1, lives = 3 } = $props();
@@ -29,6 +31,10 @@
let detected = $state(false);
let showFlash = $state(false);
let finalMessage = $state(false);
+ let showLevelComplete = $state(false);
+ let completionStars = $state(0);
+ let completionMoves = $state(0);
+ let showPreview = $state(false);
// Render version counter — incremented after each state mutation to force
// Svelte 5 to re-derive rendering data (class instances are not proxied)
@@ -41,8 +47,11 @@
let playerRow = $derived((renderVersion, player ? player.row : 0));
let playerCol = $derived((renderVersion, player ? player.col : 0));
let guardSnapshots = $derived((renderVersion, guards.map(g => ({
- row: g.row, col: g.col, type: g.type, direction: g.direction, isOn: g.isOn
+ row: g.row, col: g.col, type: g.type, direction: g.direction, isOn: g.isOn, isChasing: g.isChasing
}))));
+ let previewCells = $derived((renderVersion, showPreview && grid && player && guards.length
+ ? turnManager.previewNextTurn(grid, player, guards)
+ : new Set()));
// Initialize level
function initLevel() {
@@ -61,23 +70,39 @@
showFlash = false;
princessAlerted = false;
alertRadius = 0;
+ showLevelComplete = false;
+ completionStars = 0;
+ completionMoves = 0;
}
onMount(() => { initLevel(); });
// Input handling
function onKeyDown(e) {
- if (isPaused || detected) return;
+ if (isPaused || detected || showLevelComplete) return;
const dirMap = {
ArrowUp: 'up', ArrowDown: 'down', ArrowLeft: 'left', ArrowRight: 'right',
w: 'up', s: 'down', a: 'left', d: 'right',
};
+ if (e.key === 'v') { showPreview = !showPreview; return; }
+ if (e.key === ' ') { e.preventDefault(); handleWait(); return; }
const dir = dirMap[e.key];
if (dir) { e.preventDefault(); handleMove(dir); }
}
+ function handleWait() {
+ if (!player || !grid) return;
+ const result = turnManager.nextTurn(grid, player, guards);
+ if (isFinalLevel && checkFinalLevel()) { renderVersion++; return; }
+ renderVersion++;
+ if (result.levelComplete) handleLevelComplete();
+ else if (result.detected) detected = true;
+ }
+
function onCellClick(row, col) {
- if (isPaused || detected || !player) return;
+ if (isPaused || detected || showLevelComplete || !player) return;
+ // Tap on player cell = wait
+ if (row === player.row && col === player.col) { handleWait(); return; }
const rowDiff = Math.abs(row - player.row);
const colDiff = Math.abs(col - player.col);
if ((rowDiff === 1 && colDiff === 0) || (rowDiff === 0 && colDiff === 1)) {
@@ -152,19 +177,28 @@
function handleLevelComplete() {
const total = getTotalLevels();
- completeLevel(currentLevel, total);
+ const levelData = LEVELS[currentLevel - 1];
+ const moves = turnManager.turnCount;
+ const par = levelData.parMoves || 99;
+ completeLevel(currentLevel, total, moves, par);
+ completionMoves = moves;
+ completionStars = calculateStars(moves, par);
showFlash = true;
- setTimeout(() => {
- showFlash = false;
- const next = currentLevel + 1;
- if (isFinalLevel) {
- navigate('GameOver', { level: currentLevel, isLastLevel: true });
- } else if (next > total) {
- navigate('GameOver', { level: currentLevel, isLastLevel: false });
- } else {
- navigate('LevelIntro', { level: next, lives: livesRemaining });
- }
- }, 600);
+ showLevelComplete = true;
+ }
+
+ function handleLevelCompleteNext() {
+ showLevelComplete = false;
+ showFlash = false;
+ const total = getTotalLevels();
+ const next = currentLevel + 1;
+ if (isFinalLevel) {
+ navigate('GameOver', { level: currentLevel, isLastLevel: true });
+ } else if (next > total) {
+ navigate('GameOver', { level: currentLevel, isLastLevel: false });
+ } else {
+ navigate('LevelIntro', { level: next, lives: livesRemaining });
+ }
}
function handleDetectionDismiss() {
@@ -185,6 +219,8 @@
lives={livesRemaining}
level={currentLevel}
{turns}
+ {showPreview}
+ ontogglepreview={() => showPreview = !showPreview}
onpause={() => isPaused = true}
onmenu={() => navigate('MainMenu')}
/>
@@ -197,6 +233,7 @@
rows={grid.rows}
cols={grid.cols}
{cellSize}
+ {previewCells}
oncellclick={onCellClick}
/>
@@ -213,6 +250,15 @@