script.js

class TicTacToe {
    constructor() {
        this.board = Array(16).fill(null);
        this.currentPlayer = 'X';
        this.gameActive = true;
        this.humanPlayer = 'X';
        this.computerPlayer = 'O';
        this.serverUrl = window.location.origin;
        
        this.initializeGame();
    }
    
    initializeGame() {
        this.createBoard();
        this.updateDisplay();
        this.attachEventListeners();
    }
    
    createBoard() {
        const gameBoard = document.getElementById('game-board');
        gameBoard.innerHTML = '';
        
        for (let i = 0; i < 16; i++) {
            const cell = document.createElement('div');
            cell.classList.add('cell');
            cell.dataset.index = i;
            cell.addEventListener('click', () => this.handleCellClick(i));
            gameBoard.appendChild(cell);
        }
    }
    
    attachEventListeners() {
        document.getElementById('reset-button').addEventListener('click', () => this.resetGame());
    }
    
    handleCellClick(index) {
        if (!this.gameActive || this.board[index] || this.currentPlayer !== this.humanPlayer) {
            return;
        }
        
        this.makeMove(index, this.humanPlayer);
        
        if (this.gameActive && !this.isBoardFull()) {
            setTimeout(async () => {
                await this.computerMove();
            }, 500);
        }
    }
    
    makeMove(index, player) {
        this.board[index] = player;
        this.updateCell(index, player);
        
        if (this.checkWinner()) {
            this.endGame(`${player === this.humanPlayer ? 'You' : 'Computer'} win!`);
            this.highlightWinningCells();
            return;
        }
        
        if (this.isBoardFull()) {
            this.endGame("It's a tie!");
            return;
        }
        
        this.currentPlayer = player === 'X' ? 'O' : 'X';
        this.updateDisplay();
    }
    
    async computerMove() {
        console.log('Computer move called', {
            gameActive: this.gameActive,
            currentPlayer: this.currentPlayer,
            computerPlayer: this.computerPlayer
        });
        
        if (!this.gameActive || this.currentPlayer !== this.computerPlayer) {
            console.log('Computer move blocked');
            return;
        }
        
        try {
            console.log('Requesting computer move from server...');
            const response = await fetch(`${this.serverUrl}/api/computer-move`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ board: this.board })
            });
            
            if (!response.ok) {
                throw new Error(`Server error: ${response.status}`);
            }
            
            const data = await response.json();
            console.log('Computer move received:', data.move);
            
            this.makeMove(data.move, this.computerPlayer);
        } catch (error) {
            console.error('Error getting computer move:', error);
            // Fallback to random move if server is unavailable
            const availableMoves = [];
            for (let i = 0; i < 16; i++) {
                if (!this.board[i]) {
                    availableMoves.push(i);
                }
            }
            if (availableMoves.length > 0) {
                const randomMove = availableMoves[Math.floor(Math.random() * availableMoves.length)];
                this.makeMove(randomMove, this.computerPlayer);
            }
        }
    }
    
    
    
    checkWinner() {
        return this.checkWinnerForBoard(this.board);
    }
    
    checkWinnerForBoard(board) {
        const winPatterns = [
            [0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11], [12, 13, 14, 15],
            [0, 4, 8, 12], [1, 5, 9, 13], [2, 6, 10, 14], [3, 7, 11, 15],
            [0, 5, 10, 15], [3, 6, 9, 12]
        ];
        
        for (let pattern of winPatterns) {
            const [a, b, c, d] = pattern;
            if (board[a] && board[a] === board[b] && board[a] === board[c] && board[a] === board[d]) {
                this.winningPattern = pattern;
                return board[a];
            }
        }
        
        return null;
    }
    
    highlightWinningCells() {
        if (this.winningPattern) {
            this.winningPattern.forEach(index => {
                const cell = document.querySelector(`[data-index="${index}"]`);
                cell.classList.add('winning');
            });
        }
    }
    
    isBoardFull() {
        return this.board.every(cell => cell !== null);
    }
    
    
    updateCell(index, player) {
        const cell = document.querySelector(`[data-index="${index}"]`);
        cell.textContent = player;
        cell.classList.add(player.toLowerCase());
        cell.classList.add('disabled');
    }
    
    updateDisplay() {
        const currentPlayerElement = document.getElementById('current-player');
        const gameStatusElement = document.getElementById('game-status');
        
        if (this.gameActive) {
            if (this.currentPlayer === this.humanPlayer) {
                currentPlayerElement.textContent = 'X (You)';
                gameStatusElement.textContent = 'Your turn!';
                gameStatusElement.className = 'game-status';
            } else {
                currentPlayerElement.textContent = 'O (Computer)';
                gameStatusElement.textContent = 'Computer is thinking...';
                gameStatusElement.className = 'game-status loading';
            }
        }
    }
    
    endGame(message) {
        this.gameActive = false;
        const gameStatusElement = document.getElementById('game-status');
        gameStatusElement.textContent = message;
        
        if (message.includes('You win')) {
            gameStatusElement.className = 'game-status game-won';
        } else if (message.includes('Computer win')) {
            gameStatusElement.className = 'game-status game-over';
        } else {
            gameStatusElement.className = 'game-status';
        }
        
        const cells = document.querySelectorAll('.cell');
        cells.forEach(cell => cell.classList.add('disabled'));
    }
    
    resetGame() {
        this.board = Array(16).fill(null);
        this.currentPlayer = 'X';
        this.gameActive = true;
        this.winningPattern = null;
        
        const cells = document.querySelectorAll('.cell');
        cells.forEach(cell => {
            cell.textContent = '';
            cell.className = 'cell';
        });
        
        this.updateDisplay();
    }
}

document.addEventListener('DOMContentLoaded', () => {
    new TicTacToe();
});