script.js

let rollCount = 0;

function createDiceFace(number) {
    const patterns = {
        1: [false, false, false, false, true, false, false, false, false],
        2: [true, false, false, false, false, false, false, false, true],
        3: [true, false, false, false, true, false, false, false, true],
        4: [true, false, true, false, false, false, true, false, true],
        5: [true, false, true, false, true, false, true, false, true],
        6: [true, false, true, true, false, true, true, false, true]
    };

    const pattern = patterns[number];
    let dotsHTML = '';
    
    for (let i = 0; i < 9; i++) {
        if (pattern[i]) {
            dotsHTML += '<div class="dot"></div>';
        } else {
            dotsHTML += '<div class="dot hidden"></div>';
        }
    }

    return dotsHTML;
}

function rollDice() {
    const numDiceInput = document.getElementById('numDice');
    const numDice = parseInt(numDiceInput.value);
    const errorDiv = document.getElementById('errorMessage');
    const diceContainer = document.getElementById('diceContainer');
    const resultText = document.getElementById('resultText');
    const rollCountDiv = document.getElementById('rollCount');
    const countSpan = document.getElementById('countNumber');

    errorDiv.innerHTML = '';

    if (!numDice || numDice < 1 || numDice > 10) {
        errorDiv.innerHTML = '<div class="error-message">Please enter a valid number between 1 and 10.</div>';
        return;
    }

    diceContainer.innerHTML = '';
    resultText.innerHTML = '';

    const rollButton = document.querySelector('.roll-button');
    rollButton.disabled = true;
    rollButton.textContent = '🎲 Rolling...';

    const results = [];
    const diceElements = [];

    for (let i = 0; i < numDice; i++) {
        const dice = document.createElement('div');
        dice.className = 'dice rolling';
        dice.innerHTML = '<div class="dot hidden"></div>'.repeat(9);
        diceContainer.appendChild(dice);
        diceElements.push(dice);

        const result = Math.floor(Math.random() * 6) + 1;
        results.push(result);
    }

    setTimeout(() => {
        diceElements.forEach((dice, index) => {
            dice.classList.remove('rolling');
            dice.innerHTML = createDiceFace(results[index]);
        });

        rollCount++;
        countSpan.textContent = rollCount;
        rollCountDiv.style.display = 'inline-block';

        resultText.innerHTML = `You rolled: <strong>${results.join(', ')}</strong>`;
        resultText.classList.add('fade-in');

        rollButton.disabled = false;
        rollButton.textContent = '🎲 Roll Again!';
    }, 2000);
}

function resetGame() {
    rollCount = 0;
    document.getElementById('numDice').value = '1';
    document.getElementById('diceContainer').innerHTML = '';
    document.getElementById('resultText').innerHTML = '';
    document.getElementById('rollCount').style.display = 'none';
    document.getElementById('errorMessage').innerHTML = '';
    document.querySelector('.roll-button').textContent = '🎲 Roll Dice!';
}

// Enable Enter key to trigger roll
document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('numDice').addEventListener('keypress', function (event) {
        if (event.key === 'Enter') {
            rollDice();
        }
    });
});