const reactionButton = document.getElementById('reactionButton');
const resultsTable = document.getElementById('resultsTable');

let startTime = 0;
let endTime = 0;
let gameCounter = 0;
let isRed = false;

reactionButton.addEventListener('click', () => {
    if (isRed) {
        endTime = performance.now();
        recordResult(endTime - startTime);
    } else {
        startTime += 100;
    }
});

function changeToRed() {
    isRed = true;
    reactionButton.style.backgroundColor = 'red';
    startTime = performance.now() + 100; // 當按鈕還是綠色時偷按需要加時0.1秒
}

function recordResult(reactionTime) {
    gameCounter++;
    const resultRow = document.createElement('tr');
    resultRow.innerHTML = `
        <td>${gameCounter}</td>
        <td>${(reactionTime / 1000).toFixed(3)}</td>
    `;
    resultsTable.querySelector('tbody').appendChild(resultRow);

    if (gameCounter < 5) {
        resetGame();
    } else {
        reactionButton.disabled = true;
        reactionButton.textContent = '遊戲結束';
    }
}

function resetGame() {
    isRed = false;
    reactionButton.style.backgroundColor = 'green';
    const randomTime = Math.random() * 15000;
    setTimeout(changeToRed, randomTime);
}

resetGame();