function displayMainMenu() {
    mainMenu.classList.remove('hidden');
    loadMenu.classList.add('hidden');
    boardContainer.classList.add('hidden');
    pauseButton.classList.remove('paused');
    buttonContainer.classList.add('hidden');
    previewFrame.classList.add('hidden');

    gameOverMenu.classList.add('hidden');
}

function displayPause() {
    mainMenu.classList.add('hidden');
    loadMenu.classList.add('hidden');
    boardContainer.classList.add('hidden');
    previewFrame.classList.add('hidden');

    pauseButton.classList.add('paused');
    pauseMenu.classList.remove('hidden');
}

function displayGameBoard() {
    mainMenu.classList.add('hidden');
    loadMenu.classList.add('hidden');
    pauseMenu.classList.add('hidden');
    gameOverMenu.classList.add('hidden');
    pauseButton.classList.remove('paused');
    buttonContainer.classList.remove('hidden');
    previewFrame.classList.remove('hidden');

    boardContainer.classList.remove('hidden');
}

function displayGameOver() {
    mainMenu.classList.add('hidden');
    loadMenu.classList.add('hidden');
    boardContainer.classList.add('hidden');
    pauseButton.classList.remove('paused');
    buttonContainer.classList.add('hidden');
    previewFrame.classList.add('hidden');

    gameOverMenu.classList.remove('hidden');
}

function displayBestScores() {
    fetch('/api/getHighScores')
        .then(response => response.json())
        .then(data => {
            highScoresList.innerHTML = '';

            data.forEach(score => {
                // Clone template content properly
                const scoreElement = document.importNode(highScoreTemplate.content, true).firstElementChild;
                scoreElement.querySelector('.high-score-name').innerHTML = score.player_name;
                scoreElement.querySelector('.high-score-score').innerHTML = score.score;
                highScoresList.appendChild(scoreElement);
            });
        })
        .catch(error => console.error('Error fetching high scores:', error));
}