feat: popup when caught

src/game/objects/GridSystem.js

@@ -6,23 +6,23 @@ export class GridSystem {
         this.rows = rows;
         this.cols = cols;
         this.cellSize = cellSize;
-        
+
         // Create grid data
         this.grid = Array(rows).fill().map(() => Array(cols).fill().map(() => ({
             isWall: false,
             isGoal: false,
             isLight: false
         })));
-        
+
         // Create graphics object for rendering
         this.graphics = this.scene.add.graphics();
     }
-    
+
     // Resize grid
     resize(rows, cols) {
         this.rows = rows;
         this.cols = cols;
-        
+
         // Create new grid data with new size
         this.grid = Array(rows).fill().map(() => Array(cols).fill().map(() => ({
             isWall: false,
@@ -30,19 +30,19 @@ export class GridSystem {
             isLight: false
         })));
     }
-    
+
     // Check if position is valid
     isValidPosition(row, col) {
         return row >= 0 && row < this.rows && col >= 0 && col < this.cols;
     }
-    
+
     // Set wall at position
     setWall(row, col, value) {
         if (this.isValidPosition(row, col)) {
             this.grid[row][col].isWall = value;
         }
     }
-    
+
     // Check if position is a wall
     isWall(row, col) {
         if (this.isValidPosition(row, col)) {
@@ -50,14 +50,14 @@ export class GridSystem {
         }
         return false;
     }
-    
+
     // Set goal at position
     setGoal(row, col, value) {
         if (this.isValidPosition(row, col)) {
             this.grid[row][col].isGoal = value;
         }
     }
-    
+
     // Check if position is a goal
     isGoal(row, col) {
         if (this.isValidPosition(row, col)) {
@@ -65,14 +65,14 @@ export class GridSystem {
         }
         return false;
     }
-    
+
     // Set light at position
     setLight(row, col, value) {
         if (this.isValidPosition(row, col)) {
             this.grid[row][col].isLight = value;
         }
     }
-    
+
     // Check if position is lit
     isLight(row, col) {
         if (this.isValidPosition(row, col)) {
@@ -80,7 +80,7 @@ export class GridSystem {
         }
         return false;
     }
-    
+
     // Convert grid coordinates to pixel coordinates
     gridToPixel(row, col) {
         return {
@@ -88,7 +88,7 @@ export class GridSystem {
             y: row * this.cellSize + this.cellSize / 2
         };
     }
-    
+
     // Convert pixel coordinates to grid coordinates
     pixelToGrid(x, y) {
         return {
@@ -96,18 +96,18 @@ export class GridSystem {
             col: Math.floor(x / this.cellSize)
         };
     }
-    
+
     // Render the grid
     render() {
         this.graphics.clear();
-        
+
         // Draw grid cells
         for (let row = 0; row < this.rows; row++) {
             for (let col = 0; col < this.cols; col++) {
                 const cell = this.grid[row][col];
                 const x = col * this.cellSize;
                 const y = row * this.cellSize;
-                
+
                 // Draw cell background
                 if (cell.isWall) {
                     // Wall cells
@@ -118,15 +118,15 @@ export class GridSystem {
                     this.graphics.fillStyle(0x00FF00);
                     this.graphics.fillRect(x, y, this.cellSize, this.cellSize);
                 } else if (cell.isLight) {
-                    // Lit cells
-                    this.graphics.fillStyle(0xFFFF99);
+                    // Lit cells - make them more visible with a brighter yellow
+                    this.graphics.fillStyle(0xFFFF00);
                     this.graphics.fillRect(x, y, this.cellSize, this.cellSize);
                 } else {
                     // Empty cells
                     this.graphics.fillStyle(0x333333);
                     this.graphics.fillRect(x, y, this.cellSize, this.cellSize);
                 }
-                
+
                 // Draw cell border
                 this.graphics.lineStyle(1, 0x444444);
                 this.graphics.strokeRect(x, y, this.cellSize, this.cellSize);

src/game/objects/Player.js

@@ -41,7 +41,14 @@ export class Player {
             x: x,
             y: y,
             duration: 100,
-            ease: 'Linear'
+            ease: 'Linear',
+            onComplete: () => {
+                // Kiểm tra xem người chơi có đang ở ô sáng không sau khi di chuyển
+                if (this.isInLitCell()) {
+                    // Người chơi bị phát hiện
+                    this.scene.showDetectionPopup();
+                }
+            }
         });
 
         return true;

src/game/objects/TurnManager.js

@@ -10,11 +10,11 @@ export class TurnManager {
     // Chuyển sang lượt tiếp theo
     nextTurn() {
         this.turnCount++;
-        
+
         // Kiểm tra xem người chơi có đang ở ô đích không
         const playerRow = this.scene.player.row;
         const playerCol = this.scene.player.col;
-        
+
         // Kiểm tra nếu grid đã được khởi tạo và có phương thức isGoal
         if (this.scene.grid && typeof this.scene.grid.isGoal === 'function') {
             if (this.scene.grid.isGoal(playerRow, playerCol)) {
@@ -23,12 +23,12 @@ export class TurnManager {
                 return;
             }
         }
-        
+
         // Xóa ánh sáng hiện tại
         if (this.scene.lightSystem && typeof this.scene.lightSystem.clearAllLight === 'function') {
             this.scene.lightSystem.clearAllLight();
         }
-        
+
         // Cập nhật trạm gác
         if (this.scene.guards && Array.isArray(this.scene.guards)) {
             this.scene.guards.forEach(guard => {
@@ -37,16 +37,16 @@ export class TurnManager {
                 }
             });
         }
-        
+
         // Kiểm tra xem người chơi có đang ở ô sáng không
         if (this.scene.grid && typeof this.scene.grid.isLight === 'function') {
             if (this.scene.grid.isLight(playerRow, playerCol)) {
-                // Người chơi bị bắt
-                this.scene.handlePlayerCaught();
+                // Người chơi bị bắt - hiển thị popup trước
+                this.scene.showDetectionPopup();
                 return;
             }
         }
-        
+
         // Chuyển lượt về người chơi
         this.isPlayerTurn = true;
     }

src/game/scenes/Game.js

@@ -374,6 +374,60 @@ export class Game extends Phaser.Scene {
         return this.grid.pixelToGrid(x - this.gridOffsetX, y - this.gridOffsetY);
     }
 
+    // Hiển thị popup khi người chơi bị phát hiện
+    showDetectionPopup() {
+        const width = this.cameras.main.width;
+        const height = this.cameras.main.height;
+
+        // Tạm dừng game
+        this.isPaused = true;
+        this.inputEnabled = false;
+
+        // Tạo container cho popup
+        this.detectionPopup = this.add.container(width / 2, height / 2);
+        this.detectionPopup.setDepth(100);
+
+        // Background
+        const bg = this.add.rectangle(0, 0, 300, 200, 0x000000, 0.8);
+
+        // Thông báo
+        const title = this.add.text(0, -60, 'Bạn đã bị phát hiện!', {
+            font: 'bold 28px Arial',
+            fill: '#FF0000'
+        });
+        title.setOrigin(0.5, 0.5);
+
+        // Nút chơi lại
+        const restartButton = this.add.rectangle(0, 20, 200, 40, 0x444444);
+        const restartText = this.add.text(0, 20, 'CHƠI LẠI', {
+            font: '20px Arial',
+            fill: '#ffffff'
+        });
+        restartText.setOrigin(0.5, 0.5);
+
+        // Thêm các phần tử vào container
+        this.detectionPopup.add([bg, title, restartButton, restartText]);
+
+        // Làm cho nút có thể tương tác
+        restartButton.setInteractive({ useHandCursor: true })
+            .on('pointerover', () => restartButton.fillColor = 0x666666)
+            .on('pointerout', () => restartButton.fillColor = 0x444444)
+            .on('pointerdown', () => {
+                this.closeDetectionPopup();
+                this.handlePlayerCaught();
+            });
+    }
+
+    // Đóng popup phát hiện
+    closeDetectionPopup() {
+        if (this.detectionPopup) {
+            this.detectionPopup.destroy();
+            this.detectionPopup = null;
+            this.isPaused = false;
+            this.inputEnabled = true;
+        }
+    }
+
     // Xử lý khi người chơi bị bắt
     handlePlayerCaught() {
         this.livesRemaining--;