othello.js

'use strict';

// 2D array of game board squares, y-coordinate first.
const grid = [];
// Score container and scoreSpan elements, indexed by color (white/black).
const scoreElements = {};

// Whose turn it is, either 'white' or 'black'.
let turn;
// A timer used when someone has to pass.
let passTimerId = null;
// True while the flip animation is in-progress.
let animatingFlip = false;
// True if the game is over.
let gameOver = false;
// The number of consecutive passes.  Game over at 2.
let passCount = 0;

// True if we're playing a P2P game.
let remoteGame = false;
// A PeerJS object.
let peer = null;
// A PeerJS Connection object.
let conn = null;
// PeerJS Connections for game observers.
const observers = [];
// A PeerJS Call object.
let call = null;
// The color of the local player, either 'white' or 'black'.
let myColor = null;
// A MediaStream object for the local WebRTC feed.
let localStream = null;

// Neither white nor black, so it is never your turn if you're an observer.
const OBSERVER_COLOR = 'blue';

const urlParameters = new Map();
if (location.search) {
    const pairs = location.search.substr(1).split('&');
    for (const pair of pairs) {
        const [key, value] = pair.split('=');
        urlParameters.set(key, value);
    }
}
const withVideo = !urlParameters.has('novideo');
const tableId = urlParameters.get('tableid');

function init() {
    // Create the score board.
    scoreElements.black = createScore('black');
    scoreElements.white = createScore('white');

    // Create the game board.
    createBoard();

    // When the reset button is clicked, reset the game.
    window.resetButton.addEventListener('click', () => {
        if (remoteGame) {
            // In a P2P game, send a reset message over the data connection to the
            // peer.
            broadcast({reset: true});
        }

        resetGame();
    });

    if (tableId) {
        // Setup RTC right away.
        setupRtc();
        // Hide the reset button until we're connected.
        window.resetButton.classList.add('hide');
    } else {
        // Set the initial board state.
        resetGame();

        // When the P2P button is clicked, set up the WebRTC components.
        window.remoteButton.addEventListener('click', () => {
            // Hide the P2P button and show the P2P components.
            window.remoteButton.classList.remove('show');
            window.p2pContainer.classList.add('show');
            window.idContainer.classList.add('show');
            if (withVideo) {
                window.videoContainer.classList.add('show');
            }

            // Setup RTC.
            setupRtc();
        });
    }

    // When the online/offline state changes, update the UI.  Then set the
    // initial state.
    window.addEventListener('online', onOnlineStatusChanged);
    window.addEventListener('offline', onOnlineStatusChanged);
    onOnlineStatusChanged();

    // When the local ID field is clicked, copy it to the clipboard.
    window.myId.addEventListener('click', () => {
        window.myId.select();
        document.execCommand("copy");
    });

    // When the user presses enter on the remote ID field, try to connect to the
    // specified peer.
    window.joinPeer.addEventListener('keypress', (event) => {
        if (event.keyCode == 13) {
            // Initiate a data connection first.
            const peerId = window.joinPeer.value.trim();
            connectToPeer(peerId);
        }
    });

    // When the mute button is clicked, toggle the mute status of both video
    // feeds.  The mute button is necessary for the remote feed because it cannot
    // be muted on Android using the volume rocker only.  The mute button is
    // necessary for the local feed because it is the only way for the user to
    // control their own privacy if they need to.
    window.muteButton.addEventListener('click', () => {
        const newState = !window.friend.muted;

        // Mute the outgoing stream.
        if (localStream) {
            for (const track of localStream.getAudioTracks()) {
                track.enabled = newState;
            }
        }

        // Mute the incoming stream.
        window.friend.muted = newState;

        // Update the button state.
        window.muteButton.setAttribute('muted', newState);
    });

    // When the close button is clicked, close the P2P connections.
    window.closeRtcButton.addEventListener('click', closeRtc);

    // Register a service-worker so that the game will work offline.
    if (navigator.serviceWorker) {
        navigator.serviceWorker.register('service-worker.js');
    }
}

function broadcast(data) {
    conn.send(data);

    // Forward this game event to all observers.
    for (const observer of observers) {
        if (observer.open) {
            observer.send(data);
        }
    }
}

// Initiate a connection to a peer.  This is done you enter a friend's ID or
// when using a table ID from the URL.
function connectToPeer(peerId, color) {
    conn = peer.connect(peerId);

    window.joinPeer.value = '(connecting...)';
    window.joinPeer.disabled = true;

    conn.on('open', () => {
        // If we're calling someone else, we will play 'white'.
        onConnection(color || 'white');

        if (withVideo) {
            // Then try to establish a video call.
            call = peer.call(window.joinPeer.value.trim(), localStream);
            onCall();
        }
    });
}

// Set up WebRTC-based P2P game.
async function setupRtc() {
    if (withVideo) {
        // Initialize the video to be unmuted.
        window.friend.muted = false;
        window.muteButton.setAttribute('muted', window.friend.muted);

        // Get a local media stream from the user's camera & mic.
        localStream = await navigator.mediaDevices.getUserMedia({
            video: {
                width: 500, height: 500, facingMode: 'user',
            }, audio: true,
        });

        // Attach the local stream to the "me" video.
        window.me.srcObject = localStream;
    }

    // Connect to PeerJS.
    window.myId.value = '(connecting...)';
    window.myId.disabled = true;

    if (tableId) {
        window.tableStatus.textContent = 'Connecting...';
        window.tableStatus.classList.add('show');
        registerWithPeerJs('othello-table-' + tableId, 0);
    } else {
        registerWithPeerJs(generateRandomId());
    }
}

function registerWithPeerJs(id, counter) {
    const options = {};
    if (urlParameters.has('peerserver')) {
        options.host = urlParameters.get('peerserver');
    }

    peer = new Peer(counter ? id + '-' + counter : id, options);
    peer.on('open', () => {
        // When we know our own ID, fill in that part of the UI.
        window.myId.value = peer.id;
        window.myId.disabled = false;

        if (tableId && counter) {
            if (counter > 1) {
                connectToPeer(id, OBSERVER_COLOR);  // So it's never your turn
            } else {
                connectToPeer(id);
            }
        } else {
            window.tableStatus.textContent = 'Waiting for opponent...';
        }
    });

    peer.on('call', (callArg) => {
        // When a call comes in, answer it with the local stream.
        call = callArg;
        call.answer(localStream);
        onCall();
    });

    peer.on('connection', (connArg) => {
        // When a data connection comes in, answer it.
        if (!conn || !conn.open) {
            // If it's the first connection, assign the first player to 'black'.
            conn = connArg;
            onConnection('black');
            if (tableId) {
                // Finally set up the initial game.
                resetGame();
            }
        } else {
            // Otherwise, add it to the observer list.
            observers.push(connArg);
        }

        // Wait for the data channel to be open, then send the full game state.
        connArg.on('open', () => {
            sendFullGameState(connArg);
        });
    });

    peer.on('error', (error) => {
        // If an error occurs, log it and show an error message.
        console.log('PEER ERROR', error);

        if (tableId && error.type == 'unavailable-id' && counter < 10) {
            setTimeout(() => {
                registerWithPeerJs(id, counter + 1);
            }, 1000);
        } else {
            window.tableStatus.textContent = 'Table full?';
            window.joinPeer.value = '(ERROR!)';
            setTimeout(() => {
                window.joinPeer.value = '';
                window.joinPeer.disabled = false;
            }, 5000);
        }
    });
}

// Stop the local stream, close all connections, and reset the game state.
function closeRtc() {
    if (conn) {
        conn.close();
    }

    if (call) {
        call.close();
    }

    if (peer) {
        peer.destroy();
    }

    if (localStream) {
        for (const track of localStream.getTracks()) {
            track.stop();
        }
    }

    peer = null;
    conn = null;
    remoteGame = false;
    myColor = null;
    localStream = null;

    window.myId.value = '';
    window.friend.srcObject = null;
    window.me.srcObject = null;

    onOnlineStatusChanged();  // To compute whether to show the remote button.

    // Hide the P2P components.
    window.p2pContainer.classList.remove('show');

    // Reset the game state.
    resetGame();
}

// Create and return an SVG object representing the game stone.
function createStone() {
    const xmlns = 'http://www.w3.org/2000/svg';
    const svg = document.createElementNS(xmlns, 'svg');
    svg.setAttributeNS(null, 'viewBox', '0 0 100 100');

    // The circle of the stone itself.
    const circle = document.createElementNS(xmlns, 'circle');
    circle.classList.add('stone');
    circle.setAttributeNS(null, 'cx', '50');
    circle.setAttributeNS(null, 'cy', '50');
    circle.setAttributeNS(null, 'r', '45');
    svg.appendChild(circle);

    // A smaller circle inside and on top of the stone, to indicate "last play"
    // or "valid play" states.
    const indicator = document.createElementNS(xmlns, 'circle');
    indicator.classList.add('indicator');
    indicator.setAttributeNS(null, 'cx', '50');
    indicator.setAttributeNS(null, 'cy', '50');
    indicator.setAttributeNS(null, 'r', '15');
    svg.appendChild(indicator);

    return svg;
}

// Create and return score container elements for the given color.
function createScore(color) {
    // The container for this player's score.
    const span = document.createElement('span');
    span.classList.add('score-wrapper');
    window.scoreBoard.appendChild(span);

    // The container for the stone in the score board.
    const stoneContainer = document.createElement('span');
    stoneContainer.classList.add('stone-container');
    stoneContainer.classList.add(color);
    span.appendChild(stoneContainer);

    // The stone itself.
    const stone = createStone();
    stoneContainer.appendChild(stone);

    // Add a message container on top of the stone.
    const msgContainer = document.createElement('div');
    msgContainer.classList.add('msg-container');
    stoneContainer.appendChild(msgContainer);

    // A span to contain the actual numerical score.
    const scoreSpan = document.createElement('span');
    scoreSpan.classList.add('score-text');
    span.appendChild(scoreSpan);

    const aiSpan = document.createElement('span');


    // When the animation on the score text is over, remove the animation class,
    // so that it can be added again when the score changes.
    scoreSpan.addEventListener('animationend', () => {
        scoreSpan.classList.remove('animated-text');
    });

    // Return the container and score span.
    return {
        container: stoneContainer, scoreSpan,
    };
}

// Create the game board and its squares.
function createBoard() {
    // The 8x8 grid of squares first.
    for (let y = 0; y < 8; ++y) {
        const row = [];
        grid.push(row);

        for (let x = 0; x < 8; ++x) {
            // Create a square element.
            const div = document.createElement('div');
            div.classList.add('square');
            div.classList.add('stone-container');

            // Store the grid coordinates on the element.
            div.dataset.x = x;
            div.dataset.y = y;

            // When the square is clicked, invoke this callback.
            div.addEventListener('click', onClick);

            // When the flip animation ends, update the flip state and mark the valid
            // moves for the next player.
            div.addEventListener('animationend', () => {
                animatingFlip = false;
                markValidMoves();
            });

            // Add the stone itself, which will not show up until a black or white
            // class is added to the square.
            div.appendChild(createStone());

            // Add the square to the DOM and to the 2D array.
            window.gameBoard.appendChild(div);
            row.push(div);
        }
    }

    // Add the spots on the inner board corners.
    for (let x = 0; x < 4; ++x) {
        const spot = document.createElement('div');
        spot.classList.add('spot');
        spot.id = 'spot-' + x;
        window.gameBoard.appendChild(spot);
    }
}

// Count the stones on the board and update the score text.
function takeScore() {
    const scores = {black: 0, white: 0};

    for (let y = 0; y < 8; ++y) {
        for (let x = 0; x < 8; ++x) {
            if (grid[y][x].classList.contains('black')) {
                scores.black += 1;
            }

            if (grid[y][x].classList.contains('white')) {
                scores.white += 1;
            }
        }
    }

    for (const color in scores) {
        scoreElements[color].scoreSpan.textContent = scores[color];
        scoreElements[color].scoreSpan.classList.add('animated-text');
    }

    // If the board is full, the game is over.
    if (scores.black + scores.white == 64) {
        endGame();
    }
}

// End the game and update the UI to match.
function endGame() {
    gameOver = true;

    // It's nobody's turn.
    scoreElements.white.container.classList.remove('turn');
    scoreElements.black.container.classList.remove('turn');

    // Count the score and update state for the winner or for a tie.
    const black = window.gameBoard.querySelectorAll('.black').length;
    const white = window.gameBoard.querySelectorAll('.white').length;

    if (black > white) {
        scoreElements.black.container.classList.add('win');
    } else if (white > black) {
        scoreElements.white.container.classList.add('win');
    } else {
        scoreElements.black.container.classList.add('tie');
        scoreElements.white.container.classList.add('tie');
    }
}

// Reset the game state.
function resetGame() {
    console.log('Resetting game');

    gameOver = false;

    // Remove any state classes from the score board.
    for (const color in scoreElements) {
        scoreElements[color].container.classList.remove('turn');
        scoreElements[color].container.classList.remove('win');
        scoreElements[color].container.classList.remove('tie');
        scoreElements[color].container.classList.remove('bailed');
    }

    // Remove any state classes from the game board.
    for (const div of window.gameBoard.querySelectorAll('.square')) {
        div.classList.remove('black');
        div.classList.remove('white');
        div.classList.remove('last');
        div.classList.remove('flip');
        div.classList.remove('valid');
    }

    // Set the initial 4 stones.
    grid[3][3].classList.add('white');
    grid[3][4].classList.add('black');
    grid[4][3].classList.add('black');
    grid[4][4].classList.add('white');

    // Black always goes first.
    // https://www.worldothello.org/about/about-othello/othello-rules
    turn = 'black';
    passCount = 0;
    // Update the score.
    takeScore();
    // Indicate that it's the first player's turn.
    scoreElements[turn].container.classList.add('turn');
    // Mark the valid moves for the first player.
    markValidMoves();
}

// This code is contributed by rag2127


// Signal when a user must pass.
function onPass() {
    console.log('pass', turn);

    // Indicate the pass in the UI.
    scoreElements[turn].container.classList.add('pass');

    // If there's already a timer for this, cancel it.
    if (passTimerId != null) {
        clearTimeout(passTimerId);
    }

    // Set a timer to remove the "pass" indicator and move to the next player's
    // turn.
    passTimerId = setTimeout(() => {
        // The timer is over, so wipe out the ID.
        passTimerId = null;

        // Stop the "pass" indication in the UI.
        scoreElements[turn].container.classList.remove('pass');

        // Move on to the next turn and mark the valid moves.
        nextTurn();
        markValidMoves();
    }, 1000);  // The timer lasts 1 second.
}

// Clear the "valid move" indicators on the board.
function unmarkValidMoves() {
    for (const div of window.gameBoard.querySelectorAll('.valid')) {
        div.classList.remove('valid');
    }
}

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}


// Set state for the next player's turn.
async function nextTurn() {
    unmarkValidMoves();
    scoreElements[turn].container.classList.remove('turn');
    turn = oppositeColor(turn);
    scoreElements[turn].container.classList.add('turn');

    console.log(turn);

    if (turn === "white") {

        markValidMoves();

        console.log("Playing AI move...");

        await sleep(1000);

        var simplifiedBoard = getSimplifiedBoard(grid);

        var playTree = createTreeAB(simplifiedBoard, 5, 0, true);

        var bestMove = null;
        for (var node of playTree.children) {
            if (bestMove == null) {
                bestMove = node;
            } else {
                if (node.boardScore > bestMove.boardScore) {
                    bestMove = node;
                }
            }
        }

        console.log("AI wants to play move: " + bestMove.move[0] + " " + bestMove.move[1]);

        playStone(bestMove.move[1], bestMove.move[0], "white");
        takeScore();
        nextTurn();
    }

}

// A generator that yields board squares starting at x,y and moving in the
// direction dx,dy, excluding the starting position at x,y.
function* scanDirection(x, y, dx, dy) {
    x += dx;
    y += dy;

    for (; y >= 0 && y <= 7 && x >= 0 && x <= 7; y += dy, x += dx) {
        yield grid[y][x];
    }
}

// A generator which yields all 8 directions as dx,dy vectors.
function* allDirections() {
    for (const dx of [-1, 0, 1]) {
        for (const dy of [-1, 0, 1]) {
            // Never yield direction [0, 0] (in place)
            if (dx || dy) {
                yield [dx, dy];
            }
        }
    }
}

// True if the square is empty.
function isEmpty(div) {
    return !div.classList.contains('black') && !div.classList.contains('white');
}

// True if the square belongs to that player.
function isColor(div, color) {
    return div.classList.contains(color);
}

// Returns the opposite of a player's color.
function oppositeColor(color) {
    return color == 'white' ? 'black' : 'white';
}

// Returns true if square x,y would be a valid play for player "color" in the
// direction dx,dy.
function isValidInDirection(x, y, dx, dy, color) {
    let first = true;

    for (const div of scanDirection(x, y, dx, dy)) {
        // If the first square in direction dx,dy is not the opposite player's,
        // then this is not a valid play based on that direction.
        if (first) {
            if (!isColor(div, oppositeColor(color))) {
                return false;
            }

            first = false;
        }

        // If the next square is empty, we failed to find another stone in our
        // color, so this is not a valid play based on that direction.
        if (isEmpty(div)) {
            return false;
        }

        // Once we find a stone of our own color after some number of the
        // opponent's stones, this is a valid play in this direction.
        if (isColor(div, color)) {
            return true;
        }
    }

    // If we reach the end of the board without finding our own color, this is
    // not a valid play based on that direction.
    return false;
}

// True if the square x,y would be a valid play for "color".
function isValidPlay(x, y, color) {
    // If it's not empty, it's not a valid play.
    if (!isEmpty(grid[y][x])) {
        return false;
    }

    // A valid play at x,y must be able to flip stones in some direction.
    for (const [dx, dy] of allDirections()) {
        if (isValidInDirection(x, y, dx, dy, color)) {
            return true;
        }
    }

    return false;
}

// Play a stone of the given color at the x,y coordinates.
function playStone(x, y, color) {
    // Ignore clicks on invalid squares.
    if (!isValidPlay(x, y, color)) {
        console.log('invalid play', x, y, color);
        return false;
    }

    // In a P2P game, for your own plays, send info about this play over the data
    // connection to your peers.
    if (remoteGame && color == myColor) {
        broadcast({x, y, color});
    }

    // Place the stone by adding the relevant color class.
    console.log('play', x, y, color);
    const playSquare = grid[y][x];
    playSquare.classList.add(color);

    // Remove the "last play" indicator if there's one out there.
    const last = window.gameBoard.querySelector('.last');
    if (last) {
        last.classList.remove('last');
    }
    // Add the "last play" indicator to this newly-played square.
    playSquare.classList.add('last');

    // Flip over the opponent's pieces in every valid direction.
    for (const [dx, dy] of allDirections()) {
        if (isValidInDirection(x, y, dx, dy, color)) {
            for (const div of scanDirection(x, y, dx, dy)) {
                // Stop on your own color.
                if (isColor(div, color)) {
                    break;
                }

                // Use the "flip" class to start the animation, and change the color
                // class to the new color.
                div.classList.add('flip');
                div.classList.add(color);
                div.classList.remove(oppositeColor(color));
            }
        }
    }

    // Set this flag to indicate that we're animating the flip now.
    animatingFlip = true;
    return true;
}

// Called when a square is clicked.
function onClick(event) {
    // Ignore if the game is over.
    if (gameOver) {
        return;
    }

    // Ignore if it's a P2P game and not my turn.
    if (remoteGame && turn != myColor) {
        return;
    }

    // Ignore if we're still animating the last move.
    if (animatingFlip) {
        return;
    }

    // Find the coordinates of the clicked square.
    const div = event.currentTarget;
    const {x, y} = div.dataset;  // NOTE: strings, not ints

    // Try to play a stone here.
    const ok = playStone(parseInt(x), parseInt(y), turn);
    // If the play was valid, update the score and switch turns.
    if (ok) {
        takeScore();
        nextTurn();
    }
}

// Called when a data connection is established.
function onConnection(color) {
    myColor = color;
    remoteGame = true;

    if (color == OBSERVER_COLOR) {
        window.tableStatus.textContent = 'Connected (observer)';
    } else {
        window.tableStatus.textContent = 'Connected';

        // Finally show the reset button.
        window.resetButton.classList.remove('hide');
    }

    window.joinPeer.value = conn.peer;
    window.joinPeer.disabled = true;

    conn.on('data', onRemoteData);
    conn.on('close', () => {
        // When the connection is closed, remove turn indicator, win state, and tie
        // state, then mark the other player as having bailed.
        for (const color in scoreElements) {
            scoreElements[color].container.classList.remove('turn');
            scoreElements[color].container.classList.remove('win');
            scoreElements[color].container.classList.remove('tie');
        }
        scoreElements[oppositeColor(myColor)].container.classList.add('bailed');
        window.tableStatus.textContent = 'Disconnected';

        // Mark the game as over, and remove all "valid move" indicators.
        gameOver = true;
        unmarkValidMoves();

        window.joinPeer.disabled = false;
    });

    if (withVideo) {
        // When connected, hide the P2P IDs, which we don't need any more.
        window.idContainer.classList.remove('show');
    }
}

function onCall() {
    // When a call is established, put the remote stream up on the "friend" video
    // element.
    call.on('stream', (remoteStream) => {
        window.friend.srcObject = remoteStream;
    });
}

// Called when a data message comes from the remote peer in a P2P game.
function onRemoteData(data) {
    console.log('remote data', data);

    // Forward this incoming game event to all observers.
    for (const observer of observers) {
        if (observer.open) {
            observer.send(data);
        }
    }

    // The peer clicked the "reset" button.
    if (data.reset) {
        resetGame();
        return;
    }

    // The peer had to pass.
    if (data.pass) {
        onPass();
        return;
    }

    // The full game state when we initially join the game.
    if (data.state) {
        ingestFullGameState(data.state);
        return;
    }

    // Otherwise, it's a play.
    const ok = playStone(data.x, data.y, data.color);
    // If the play was valid, update the score and switch turns.
    if (ok) {
        nextTurn();
        takeScore();
    }
}

// Called when someone connects to the first player (second player or observer)
function sendFullGameState(someConnection) {
    const state = {
        grid: [], scores: {}, turn, gameOver, passCount,
    };

    for (const row of grid) {
        const rowState = [];
        for (const square of row) {
            rowState.push(square.className);
        }
        state.grid.push(rowState);
    }

    for (const color in scoreElements) {
        const elements = scoreElements[color];
        const scoreState = {
            classes: elements.container.className, points: elements.scoreSpan.textContent,
        };
        state.scores[color] = scoreState;
    }

    console.log('SENDING FULL STATE', state);
    someConnection.send({state});
}

// Called when someone connects to the first player (second player or observer)
// VERY TRUSTING
// The other player should be a friend, who you are looking at on video chat.
// And you also have access to the "reset" button, so if they cheat you, reset.
function ingestFullGameState(state) {
    console.log('RECEIVING FULL STATE', state);

    for (let y = 0; y < 8; ++y) {
        for (let x = 0; x < 8; ++x) {
            grid[y][x].className = state.grid[y][x];
        }
    }

    for (const color in scoreElements) {
        const elements = scoreElements[color];
        elements.container.className = state.scores[color].classes;
        elements.scoreSpan.textContent = state.scores[color].points;
    }

    turn = state.turn;
    gameOver = state.gameOver;
    passCount = state.passCount;

    // The "valid" moves for the other person don't show for me, and vice-versa.
    // So after ingesting the game state, including the "valid" markers for the
    // other person, compute the valid moves for ourselves.
    markValidMoves();
}

// Called when the online/offline status changes.
function onOnlineStatusChanged() {
    // Hide or show the offline ribbon.
    if (navigator.onLine) {
        window.offlineRibbon.classList.remove('show');
    } else {
        window.offlineRibbon.classList.add('show');
    }

    // If we have the peerjs library loaded, and we have a camera, and we're
    // online, and we're not connected yet... show the P2P button.
    if (window.Peer && navigator.mediaDevices && navigator.onLine && !peer) {
        window.remoteButton.classList.add('show');
    } else {
        window.remoteButton.classList.remove('show');
    }
}

// PeerJS IDs are too long to tell someone without copy/paste.  The ID should
// be short and easy to get right.  No confusing characters like l/1/I, 0/O/o.
// How about all numbers?  With dashes in it?  It's similar to a phone number,
// and the lack of letters will make it clear that 0 is 0 and not o/O.
// It's gross how much effort this is in JavaScript.  Did I do this wrong?
function generateRandomId() {
    const randomBuffer = crypto.getRandomValues(new Uint8Array(4)).buffer;
    const rand32 = (new DataView(randomBuffer)).getUint32();
    // scale 2^32 down to 10^10 (9-digit number)
    let idNumber = Math.floor((rand32 / 0x100000000) * 1e10);
    // break it up into 3 groups of 3 digits
    const idParts = []
    for (let i = 0; i < 3; ++i) {
        const part = idNumber % 1000;
        idNumber = (idNumber - part) / 1000;

        let partString = part.toString();
        while (partString.length < 3) {
            partString = '0' + partString;
        }
        idParts.push(partString);
    }
    return idParts.join('-');
}

function getSimplifiedBoard(currentGrid) {

    var copiedGrid = new Array(8);

    for (var i = 0; i < 8; i++) {
        copiedGrid[i] = new Array(8);
    }

    for (let i = 0; i < 8; i++) {
        for (let j = 0; j < 8; j++) {
            var element = currentGrid[i][j];
            if (element.classList.contains("black")) {
                copiedGrid[i][j] = "X";
            } else if (element.classList.contains("white")) {
                copiedGrid[i][j] = "O"
            } else {
                copiedGrid[i][j] = "-";
            }
        }
    }

    return copiedGrid;

}

function markValidMoves() {
    // If the game is over, don't do anything.
    if (gameOver) {
        return;
    }

    // If we're showing someone must pass, don't do anything.
    if (passTimerId != null) {
        return;
    }

    // If someone is out of pieces, the game is over.
    if (window.gameBoard.querySelector('.black') == null || window.gameBoard.querySelector('.white') == null) {
        endGame();
        return;
    }

    // If both players had to pass, nobody can move and the game is over.
    if (passCount >= 2) {
        endGame();
        return;
    }

    // In a P2P game, don't show the valid move indicators when it's the other
    // player's turn.
    if (remoteGame && turn != myColor) {
        unmarkValidMoves();
        return;
    }

    // Find and mark all the valid moves in the game board.
    for (let y = 0; y < 8; ++y) {
        for (let x = 0; x < 8; ++x) {
            if (isValidPlay(x, y, turn)) {
                grid[y][x].classList.add('valid');
            }
        }
    }

    // If there are no valid moves, then the current player must pass.
    if (window.gameBoard.querySelector('.valid') == null) {
        if (remoteGame) {
            // In a P2P game, send a message over the data connection that you've
            // passed.
            broadcast({pass: true});
        }

        passCount++;
        onPass();
    } else {
        passCount = 0;
    }
}

var advancedAIMode = false;


function findPossibleMoves(board, player) {
    let possibleMoves = [];

    // Iterate over all squares in the board
    for (let i = 0; i < 8; i++) {
        for (let j = 0; j < 8; j++) {
            // If the square is empty, check if it's a valid move for the player
            if (board[i][j] === '-') {
                if (isValidMove(board, i, j, player)) {
                    possibleMoves.push([i, j]);
                }
            }
        }
    }

    return possibleMoves;
}

function isValidMove(board, row, col, player) {
    // Check if the move is valid in any of the eight directions
    for (let dRow = -1; dRow <= 1; dRow++) {
        for (let dCol = -1; dCol <= 1; dCol++) {
            if (dRow === 0 && dCol === 0) {
                continue;
            }
            if (isValidDirection(board, row, col, player, dRow, dCol)) {
                return true;
            }
        }
    }

    return false;
}

function isValidDirection(board, row, col, player, dRow, dCol) {
    let opponent = (player === 'X') ? 'O' : 'X';

    // Check if there is at least one opponent piece in the direction
    let r = row + dRow;
    let c = col + dCol;
    let foundOpponent = false;
    while (r >= 0 && r < 8 && c >= 0 && c < 8) {
        if (board[r][c] === opponent) {
            foundOpponent = true;
            break;
        }
        if (board[r][c] === '-') {
            break;
        }
        r += dRow;
        c += dCol;
    }

    if (!foundOpponent) {
        return false;
    }

    // Check if there is a player piece in the direction
    r += dRow;
    c += dCol;
    while (r >= 0 && r < 8 && c >= 0 && c < 8) {
        if (board[r][c] === player) {
            return true;
        }
        if (board[r][c] === '-') {
            break;
        }
        r += dRow;
        c += dCol;
    }

    return false;
}

function evaluateBoard(board, player) {
    let score = 0;
    let opponent = player === 'X' ? 'O' : 'X';

    // Count the number of pieces for each player
    let playerPieces = 0;
    let opponentPieces = 0;
    for (let row = 0; row < 8; row++) {
        for (let col = 0; col < 8; col++) {
            if (board[row][col] === player) {
                playerPieces++;
            } else if (board[row][col] === opponent) {
                opponentPieces++;
            }
        }
    }

    // Add the piece difference to the score
    score += playerPieces - opponentPieces;

    // Count the number of legal moves for each player
    let playerMoves = findPossibleMoves(board, player).length;
    let opponentMoves = findPossibleMoves(board, opponent).length;

    // Add the move difference to the score
    score += playerMoves - opponentMoves;

    // Calculate the stability for each player
    let playerStability = calculateStability(board, player);
    let opponentStability = calculateStability(board, opponent);

    // Add the stability difference to the score
    score += playerStability - opponentStability;

    return score;
}

function calculateStability(board, player) {
    let stability = 0;
    let opponent = player === 'X' ? 'O' : 'X';

    // Check the stability of each piece
    for (let row = 0; row < 8; row++) {
        for (let col = 0; col < 8; col++) {
            if (board[row][col] === player) {
                let stable = true;
                // Check stability in all 8 directions
                for (let dx = -1; dx <= 1; dx++) {
                    for (let dy = -1; dy <= 1; dy++) {
                        if (dx === 0 && dy === 0) {
                            continue;
                        }
                        let x = row + dx;
                        let y = col + dy;
                        let consecutiveOpponents = 0;
                        while (x >= 0 && x < 8 && y >= 0 && y < 8) {
                            if (board[x][y] === opponent) {
                                consecutiveOpponents++;
                            } else if (board[x][y] === player) {
                                if (consecutiveOpponents > 0) {
                                    // This piece is stable in this direction
                                    stable = false;
                                    break;
                                }
                            } else {
                                // This is an empty square
                                break;
                            }
                            x += dx;
                            y += dy;
                        }
                        if (!stable) {
                            break;
                        }
                    }
                    if (!stable) {
                        break;
                    }
                }
                if (stable) {
                    stability++;
                }
            }
        }
    }

    return stability;
}

function score(board) {
    let scores = {
        'X': 0,
        'O': 0
    };

    for (let i = 0; i < board.length; i++) {
        for (let j = 0; j < board[i].length; j++) {
            if (board[i][j] === 'X') {
                scores['X'] += 1;
            } else if (board[i][j] === 'O') {
                scores['O'] += 1;
            }
        }
    }

    return scores;
}

function returnBoardWithPlayedMove(board, movePos, player) {
    let opponent = player === 'X' ? 'O' : 'X';
    let newBoard = board.map(function(arr) {
        return [...arr];
    });

    // Place the player's piece at the specified location
    newBoard[movePos[0]][movePos[1]] = player;

    // Check all 8 directions for pieces to flip
    for (let dx = -1; dx <= 1; dx++) {
        for (let dy = -1; dy <= 1; dy++) {
            if (dx === 0 && dy === 0) {
                continue;
            }
            let i = movePos[0] + dx;
            let j = movePos[1] + dy;
            let flipped = false;
            let flippedPositions = [];
            while (i >= 0 && i < 8 && j >= 0 && j < 8) {
                if (newBoard[i][j] === opponent) {
                    flippedPositions.push([i, j]); // keep track of the positions of flipped pieces
                    i += dx;
                    j += dy;
                } else if (newBoard[i][j] === player) {
                    // Found a line of opponent pieces that can be flipped
                    flipped = true;
                    break;
                } else {
                    // Found an empty square
                    break;
                }
            }
            if (flipped) {
                // Flip all pieces in the line
                for (let k = 0; k < flippedPositions.length; k++) {
                    let [xFlip, yFlip] = flippedPositions[k];
                    newBoard[xFlip][yFlip] = player;
                }
            }
        }
    }

    return newBoard;
}

class Node {
    constructor(board) {
        this.board = board;
        if (board != null) {
            this.totalScore = score(board);

            if (!advancedAIMode) {
                this.boardScore = this.totalScore["O"] - this.totalScore["X"];
            } else {
                this.boardScore = evaluateBoard(board, "O");
            }

        }
        this.move = null;
        this.children = [];
    }
}

function createTreeAB(rootValue, maxDepth, currentDepth = 0, maximizingPlayer, alpha, beta) {
    if (currentDepth >= maxDepth) {
        return null;
    }

    if (alpha == null || beta == null) {
        alpha = new Node();
        alpha.boardScore = -Infinity
        beta = new Node();
        beta.boardScore = Infinity;

    }

    let rootNode = new Node(rootValue);
    let fetchedPossibleMoves = findPossibleMoves(rootNode.board, maximizingPlayer ? "O" : "X");

    if (maximizingPlayer) {
        let maxScore = new Node();
        maxScore.boardScore = -Infinity;

        for (let i = 0; i < fetchedPossibleMoves.length; i++) {
            let newBoard = returnBoardWithPlayedMove(rootNode.board, fetchedPossibleMoves[i], "O");
            let childNode = createTreeAB(newBoard, maxDepth, currentDepth + 1, false, alpha, beta);

            if (childNode !== null) {
                childNode.move = fetchedPossibleMoves[i];

                rootNode.children.push(childNode);

                if (maxScore.boardScore < childNode.boardScore) {
                    maxScore = childNode;
                }
                if (alpha.boardScore < maxScore) {
                    alpha = maxScore;
                }

                if (beta.boardScore <= alpha.boardScore) {
                    break;
                }
            }
        }

        return rootNode;
    } else {
        let minScore = new Node();
        minScore.boardScore = Infinity;

        for (let i = 0; i < fetchedPossibleMoves.length; i++) {
            let newBoard = returnBoardWithPlayedMove(rootNode.board, fetchedPossibleMoves[i], "X");
            let childNode = createTreeAB(newBoard, maxDepth, currentDepth + 1, true, alpha, beta);

            if (childNode !== null) {
                childNode.move = fetchedPossibleMoves[i];
                rootNode.children.push(childNode);

                if (childNode.boardScore < minScore.boardScore) {
                    minScore = childNode;
                }
                if (minScore.boardScore < beta.boardScore) {
                    beta = minScore;
                }

                if (beta.boardScore <= alpha.boardScore) {
                    break;
                }
            }
        }

        return rootNode;
    }
}