Update index.html

index.html

@@ -16,7 +16,6 @@
             align-items: center;
             flex-direction: column;
         }
-
         .game-container {
             background: rgba(255, 255, 255, 0.95);
             border-radius: 20px;
@@ -24,7 +23,6 @@
             box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
             backdrop-filter: blur(10px);
         }
-
         h1 {
             text-align: center;
             color: #333;
@@ -32,7 +30,6 @@
             font-size: 2.5rem;
             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
         }
-
         .game-info {
             display: flex;
             justify-content: space-between;
@@ -40,7 +37,6 @@
             margin-bottom: 20px;
             gap: 20px;
         }
-
         .player-info {
             background: rgba(0, 0, 0, 0.05);
             padding: 15px;
@@ -48,18 +44,15 @@
             min-width: 150px;
             text-align: center;
         }
-
         .player-info.active {
             background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
             box-shadow: 0 4px 15px rgba(252, 182, 159, 0.4);
         }
-
         .board-container {
             display: flex;
             justify-content: center;
             margin-bottom: 20px;
         }
-
         .board {
             width: 400px;
             height: 400px;
@@ -68,20 +61,16 @@
             border-radius: 10px;
             border: 3px solid #333;
         }
-
         .board-line {
             position: absolute;
             background-color: #333;
         }
-
         .horizontal {
             height: 3px;
         }
-
         .vertical {
             width: 3px;
         }
-
         .position {
             position: absolute;
             width: 30px;
@@ -96,44 +85,40 @@
             align-items: center;
             justify-content: center;
         }
-
         .position:hover {
             box-shadow: 0 0 20px rgba(102, 126, 234, 0.6);
             transform: translate(-50%, -50%) scale(1.1);
         }
-
         .position.occupied {
             cursor: default;
         }
-
         .position.red {
             background: #dc3545;
             border-color: #a02834;
             box-shadow: 0 4px 10px rgba(220, 53, 69, 0.5);
         }
-
         .position.black {
             background: #333;
             border-color: #666;
             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
         }
-
         .position.selected {
             box-shadow: 0 0 25px #ffd700;
             border-color: #ffd700;
             border-width: 4px;
         }
-
         .position.valid-move {
             background: rgba(144, 238, 144, 0.8);
             animation: pulse 1s infinite;
         }
-
+        .position.removable {
+            background: rgba(255, 182, 193, 0.8);
+            animation: pulse 1s infinite;
+        }
         @keyframes pulse {
             0%, 100% { transform: translate(-50%, -50%) scale(1); }
             50% { transform: translate(-50%, -50%) scale(1.1); }
         }
-
         .game-status {
             text-align: center;
             padding: 15px;
@@ -142,19 +127,16 @@
             margin-top: 20px;
             font-size: 1.1rem;
         }
-
         .status-placing { color: #2196F3; }
         .status-moving { color: #4CAF50; }
         .status-removing { color: #FF5722; }
         .status-won { color: #9C27B0; font-weight: bold; }
-
         .controls {
             display: flex;
             justify-content: center;
             gap: 15px;
             margin-top: 20px;
         }
-
         button {
             padding: 12px 24px;
             border: none;
@@ -167,30 +149,30 @@
             transition: all 0.3s ease;
             box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
         }
-
         button:hover {
             transform: translateY(-2px);
             box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
         }
-
         .rules {
             margin-top: 30px;
             padding: 20px;
             background: rgba(0, 0, 0, 0.05);
             border-radius: 10px;
-            max-width: 400px;
+            max-width: 600px;
         }
-
         .rules h3 {
             margin-top: 0;
             color: #333;
         }
-
         .rules ul {
             text-align: left;
             color: #555;
             line-height: 1.6;
         }
+        .phase-indicator {
+            font-weight: bold;
+            margin-bottom: 10px;
+        }
     </style>
 </head>
 <body>
@@ -200,11 +182,13 @@
         <div class="game-info">
             <div class="player-info" id="player1-info">
                 <div><strong>Player 1 (Red)</strong></div>
-                <div>Pieces: <span id="red-pieces">9</span></div>
+                <div>Pieces to place: <span id="red-pieces">9</span></div>
+                <div>Pieces on board: <span id="red-on-board">0</span></div>
             </div>
             <div class="player-info" id="player2-info">
                 <div><strong>Player 2 (Black)</strong></div>
-                <div>Pieces: <span id="black-pieces">9</span></div>
+                <div>Pieces to place: <span id="black-pieces">9</span></div>
+                <div>Pieces on board: <span id="black-on-board">0</span></div>
             </div>
         </div>
 
@@ -238,6 +222,7 @@
         </div>
 
         <div class="game-status" id="game-status">
+            <div class="phase-indicator">Phase 1: Placing Pieces</div>
             <div class="status-placing">Player 1's turn - Place a piece</div>
         </div>
 
@@ -247,13 +232,14 @@
         </div>
 
         <div class="rules" id="rules" style="display: none;">
-            <h3>How to Play:</h3>
+            <h3>Nine Men's Morris Rules:</h3>
             <ul>
-                <li><strong>Phase 1:</strong> Take turns placing your 9 pieces on any empty intersection</li>
-                <li><strong>Phase 2:</strong> Move pieces along lines to adjacent empty positions</li>
-                <li><strong>Mills:</strong> Form a line of 3 pieces to capture an opponent's piece</li>
-                <li><strong>Win:</strong> Reduce opponent to 2 pieces or block all their moves</li>
-                <li><strong>Flying:</strong> When you have only 3 pieces, you can move to any empty position</li>
+                <li><strong>Phase 1 - Placing:</strong> Take turns placing your 9 pieces on any empty intersection. Form mills (3 pieces in a row) to capture opponent pieces.</li>
+                <li><strong>Phase 2 - Moving:</strong> Move pieces to adjacent empty positions along the lines. Continue forming mills to capture pieces.</li>
+                <li><strong>Phase 3 - Flying:</strong> When you have only 3 pieces left, you can move to any empty position (not just adjacent).</li>
+                <li><strong>Capturing:</strong> When you form a mill, remove one opponent piece. Pieces in mills can only be captured if no other pieces are available.</li>
+                <li><strong>Mill Breaking:</strong> You can break your own mill and reform it to capture again.</li>
+                <li><strong>Winning:</strong> Reduce your opponent to 2 pieces or block all their moves.</li>
             </ul>
         </div>
     </div>
@@ -270,6 +256,7 @@
                 this.blackPiecesOnBoard = 0;
                 this.selectedPosition = null;
                 this.mustRemovePiece = false;
+                this.millFormed = false;
                 
                 // Define board positions (x, y coordinates)
                 this.positions = [
@@ -362,7 +349,9 @@
                 
                 if (this.checkForMill(index)) {
                     this.mustRemovePiece = true;
+                    this.millFormed = true;
                 } else {
+                    // Check if placing phase is complete
                     if (this.redPieces === 0 && this.blackPieces === 0) {
                         this.gamePhase = 'moving';
                     }
@@ -375,9 +364,9 @@
             selectPiece(index) {
                 if (this.board[index] !== this.currentPlayer) return;
                 
-                // Check if piece can move (has adjacent empty spaces or can fly)
-                const canFly = (this.currentPlayer === 'red' && this.redPiecesOnBoard === 3) ||
-                              (this.currentPlayer === 'black' && this.blackPiecesOnBoard === 3);
+                // Check if piece can move
+                const piecesOnBoard = this.currentPlayer === 'red' ? this.redPiecesOnBoard : this.blackPiecesOnBoard;
+                const canFly = piecesOnBoard === 3;
                 
                 if (!canFly) {
                     const canMove = this.adjacentPositions[index].some(adj => this.board[adj] === null);
@@ -395,9 +384,10 @@
             
             movePiece(index) {
                 if (this.board[index] !== null) return;
+                if (this.selectedPosition === null) return;
                 
-                const canFly = (this.currentPlayer === 'red' && this.redPiecesOnBoard === 3) ||
-                              (this.currentPlayer === 'black' && this.blackPiecesOnBoard === 3);
+                const piecesOnBoard = this.currentPlayer === 'red' ? this.redPiecesOnBoard : this.blackPiecesOnBoard;
+                const canFly = piecesOnBoard === 3;
                 
                 // Check if move is valid
                 if (!canFly && !this.adjacentPositions[this.selectedPosition].includes(index)) {
@@ -407,10 +397,12 @@
                 // Move the piece
                 this.board[index] = this.currentPlayer;
                 this.board[this.selectedPosition] = null;
+                const movedFromPosition = this.selectedPosition;
                 this.selectedPosition = null;
                 
                 if (this.checkForMill(index)) {
                     this.mustRemovePiece = true;
+                    this.millFormed = true;
                 } else {
                     this.switchPlayer();
                 }
@@ -424,9 +416,11 @@
                 
                 if (this.board[index] !== opponent) return;
                 
-                // Check if piece is part of a mill
-                if (this.isPartOfMill(index) && this.hasNonMillPieces(opponent)) {
-                    return; // Cannot remove piece from mill unless no other pieces available
+                // Check if piece is part of a mill - can only remove if no non-mill pieces available
+                if (this.isPartOfMill(index)) {
+                    if (this.hasNonMillPieces(opponent)) {
+                        return; // Cannot remove piece from mill when other pieces available
+                    }
                 }
                 
                 this.board[index] = null;
@@ -438,6 +432,13 @@
                 }
                 
                 this.mustRemovePiece = false;
+                this.millFormed = false;
+                
+                // Check if placing phase is complete after removal
+                if (this.gamePhase === 'placing' && this.redPieces === 0 && this.blackPieces === 0) {
+                    this.gamePhase = 'moving';
+                }
+                
                 this.switchPlayer();
                 this.updateDisplay();
                 this.checkGameEnd();
@@ -451,6 +452,7 @@
             }
             
             isPartOfMill(index) {
+                if (this.board[index] === null) return false;
                 return this.mills.some(mill => {
                     return mill.includes(index) && 
                            mill.every(pos => this.board[pos] === this.board[index]);
@@ -466,41 +468,72 @@
                 return false;
             }
             
+            getRemovablePieces() {
+                const opponent = this.currentPlayer === 'red' ? 'black' : 'red';
+                const removable = [];
+                
+                // First, try to find non-mill pieces
+                for (let i = 0; i < 24; i++) {
+                    if (this.board[i] === opponent && !this.isPartOfMill(i)) {
+                        removable.push(i);
+                    }
+                }
+                
+                // If no non-mill pieces, all opponent pieces are removable
+                if (removable.length === 0) {
+                    for (let i = 0; i < 24; i++) {
+                        if (this.board[i] === opponent) {
+                            removable.push(i);
+                        }
+                    }
+                }
+                
+                return removable;
+            }
+            
             switchPlayer() {
                 this.currentPlayer = this.currentPlayer === 'red' ? 'black' : 'red';
             }
             
             checkGameEnd() {
-                const opponent = this.currentPlayer === 'red' ? 'black' : 'red';
-                const opponentPieces = opponent === 'red' ? this.redPiecesOnBoard : this.blackPiecesOnBoard;
+                if (this.gamePhase === 'placing') return; // Don't check end conditions during placing phase
+                
+                const redCount = this.redPiecesOnBoard;
+                const blackCount = this.blackPiecesOnBoard;
                 
-                // Check if opponent has only 2 pieces
-                if (opponentPieces < 3 && this.gamePhase === 'moving') {
+                // Check if someone has only 2 pieces left
+                if (redCount < 3) {
+                    this.currentPlayer = 'black'; // Black wins
+                    this.gamePhase = 'game-over';
+                    return;
+                }
+                if (blackCount < 3) {
+                    this.currentPlayer = 'red'; // Red wins
                     this.gamePhase = 'game-over';
                     return;
                 }
                 
-                // Check if current player has no valid moves
-                if (this.gamePhase === 'moving' && !this.hasValidMoves()) {
-                    this.switchPlayer(); // Winner is the other player
+                // Check if current player has no valid moves (is blocked)
+                if (!this.hasValidMoves()) {
+                    this.switchPlayer(); // Other player wins
                     this.gamePhase = 'game-over';
                 }
             }
             
             hasValidMoves() {
-                const canFly = (this.currentPlayer === 'red' && this.redPiecesOnBoard === 3) ||
-                              (this.currentPlayer === 'black' && this.blackPiecesOnBoard === 3);
+                const piecesOnBoard = this.currentPlayer === 'red' ? this.redPiecesOnBoard : this.blackPiecesOnBoard;
+                const canFly = piecesOnBoard === 3;
+                
+                // If can fly, just check if any empty position exists
+                if (canFly) {
+                    return this.board.some(pos => pos === null);
+                }
                 
+                // Otherwise, check if any piece can move to adjacent empty space
                 for (let i = 0; i < 24; i++) {
                     if (this.board[i] === this.currentPlayer) {
-                        if (canFly) {
-                            // If can fly, check if any position is empty
-                            if (this.board.some(pos => pos === null)) return true;
-                        } else {
-                            // Check if piece has adjacent empty space
-                            if (this.adjacentPositions[i].some(adj => this.board[adj] === null)) {
-                                return true;
-                            }
+                        if (this.adjacentPositions[i].some(adj => this.board[adj] === null)) {
+                            return true;
                         }
                     }
                 }
@@ -523,20 +556,30 @@
                         positionEl.classList.add('selected');
                     }
                     
-                    // Show valid moves
-                    if (this.selectedPosition !== null && this.board[i] === null) {
-                        const canFly = (this.currentPlayer === 'red' && this.redPiecesOnBoard === 3) ||
-                                      (this.currentPlayer === 'black' && this.blackPiecesOnBoard === 3);
+                    // Show valid moves for selected piece
+                    if (this.selectedPosition !== null && this.board[i] === null && !this.mustRemovePiece) {
+                        const piecesOnBoard = this.currentPlayer === 'red' ? this.redPiecesOnBoard : this.blackPiecesOnBoard;
+                        const canFly = piecesOnBoard === 3;
                         
                         if (canFly || this.adjacentPositions[this.selectedPosition].includes(i)) {
                             positionEl.classList.add('valid-move');
                         }
                     }
+                    
+                    // Show removable pieces
+                    if (this.mustRemovePiece) {
+                        const removablePieces = this.getRemovablePieces();
+                        if (removablePieces.includes(i)) {
+                            positionEl.classList.add('removable');
+                        }
+                    }
                 }
                 
                 // Update player info
                 document.getElementById('red-pieces').textContent = this.redPieces;
                 document.getElementById('black-pieces').textContent = this.blackPieces;
+                document.getElementById('red-on-board').textContent = this.redPiecesOnBoard;
+                document.getElementById('black-on-board').textContent = this.blackPiecesOnBoard;
                 
                 // Update active player
                 document.getElementById('player1-info').classList.toggle('active', this.currentPlayer === 'red');
@@ -546,14 +589,44 @@
                 const statusEl = document.getElementById('game-status');
                 statusEl.className = 'game-status';
                 
+                let phaseText = '';
+                if (this.gamePhase === 'placing') {
+                    phaseText = 'Phase 1: Placing Pieces';
+                } else if (this.gamePhase === 'moving') {
+                    const redCanFly = this.redPiecesOnBoard === 3;
+                    const blackCanFly = this.blackPiecesOnBoard === 3;
+                    if (redCanFly || blackCanFly) {
+                        phaseText = 'Phase 3: Flying (3 pieces remaining)';
+                    } else {
+                        phaseText = 'Phase 2: Moving Pieces';
+                    }
+                } else {
+                    phaseText = 'Game Over';
+                }
+                
                 if (this.gamePhase === 'game-over') {
-                    statusEl.innerHTML = `<div class="status-won">${this.currentPlayer === 'red' ? 'Player 1 (Red)' : 'Player 2 (Black)'} Wins!</div>`;
+                    statusEl.innerHTML = `
+                        <div class="phase-indicator">${phaseText}</div>
+                        <div class="status-won">${this.currentPlayer === 'red' ? 'Player 1 (Red)' : 'Player 2 (Black)'} Wins!</div>
+                    `;
                 } else if (this.mustRemovePiece) {
-                    statusEl.innerHTML = `<div class="status-removing">${this.currentPlayer === 'red' ? 'Player 1' : 'Player 2'} - Remove an opponent's piece</div>`;
+                    statusEl.innerHTML = `
+                        <div class="phase-indicator">${phaseText}</div>
+                        <div class="status-removing">${this.currentPlayer === 'red' ? 'Player 1' : 'Player 2'} formed a mill! Remove an opponent's piece</div>
+                    `;
                 } else if (this.gamePhase === 'placing') {
-                    statusEl.innerHTML = `<div class="status-placing">${this.currentPlayer === 'red' ? 'Player 1' : 'Player 2'}'s turn - Place a piece</div>`;
+                    statusEl.innerHTML = `
+                        <div class="phase-indicator">${phaseText}</div>
+                        <div class="status-placing">${this.currentPlayer === 'red' ? 'Player 1' : 'Player 2'}'s turn - Place a piece</div>
+                    `;
                 } else {
-                    statusEl.innerHTML = `<div class="status-moving">${this.currentPlayer === 'red' ? 'Player 1' : 'Player 2'}'s turn - Move a piece</div>`;
+                    const piecesOnBoard = this.currentPlayer === 'red' ? this.redPiecesOnBoard : this.blackPiecesOnBoard;
+                    const canFly = piecesOnBoard === 3;
+                    const actionText = canFly ? 'Move to any empty position' : 'Move a piece to adjacent position';
+                    statusEl.innerHTML = `
+                        <div class="phase-indicator">${phaseText}</div>
+                        <div class="status-moving">${this.currentPlayer === 'red' ? 'Player 1' : 'Player 2'}'s turn - ${actionText}</div>
+                    `;
                 }
             }
         }