script.js

document.addEventListener('DOMContentLoaded', () => {
    const doorsContainer = document.querySelector('.grid');
    const resultDisplay = document.getElementById('result');
    const resetBtn = document.getElementById('reset-btn');
    let prizeDoor = Math.floor(Math.random() * 20) + 1;
    let gameActive = true;
    
    // Create 20 doors
    for (let i = 1; i <= 20; i++) {
        const door = document.createElement('div');
        door.className = 'door';
        door.innerHTML = `
            <div class="door-inner">
                <div class="door-front" style="background-image: url('http://static.photos/holiday/300x450/${i}')">
                    <span class="text-white font-bold text-xl bg-black bg-opacity-50 px-2 rounded">${i}</span>
                </div>
                <div class="door-back">
                    ${i === prizeDoor ? '<div class="ghost">👻</div>' : '<div class="text-red-500 text-4xl">💀</div>'}
                </div>
            </div>
        `;
        
        door.addEventListener('click', () => handleDoorClick(door, i));
        doorsContainer.appendChild(door);
    }
    
    resetBtn.addEventListener('click', resetGame);
    
    function handleDoorClick(door, doorNumber) {
        if (!gameActive) return;
        
        const doorInner = door.querySelector('.door-inner');
        doorInner.classList.add('open');
        
        if (doorNumber === prizeDoor) {
            doorInner.querySelector('.door-back').classList.add('prize');
            resultDisplay.textContent = '🎉 CONGRATULATIONS! You found the ghost! 🎉';
            resultDisplay.classList.remove('hidden');
            resultDisplay.classList.add('text-green-400');
        } else {
            resultDisplay.textContent = '💀 Wrong door! Try again next year! 💀';
            resultDisplay.classList.remove('hidden');
            resultDisplay.classList.add('text-red-400');
        }
        
        gameActive = false;
        resetBtn.classList.remove('hidden');
    }
    
    function resetGame() {
        doorsContainer.innerHTML = '';
        resultDisplay.classList.add('hidden');
        resetBtn.classList.add('hidden');
        prizeDoor = Math.floor(Math.random() * 20) + 1;
        gameActive = true;
        
        for (let i = 1; i <= 20; i++) {
            const door = document.createElement('div');
            door.className = 'door';
            door.innerHTML = `
                <div class="door-inner">
                    <div class="door-front" style="background-image: url('http://static.photos/holiday/300x450/${i}')">
                        <span class="text-white font-bold text-xl bg-black bg-opacity-50 px-2 rounded">${i}</span>
                    </div>
                    <div class="door-back">
                        ${i === prizeDoor ? '<div class="ghost">👻</div>' : '<div class="text-red-500 text-4xl">💀</div>'}
                    </div>
                </div>
            `;
            
            door.addEventListener('click', () => handleDoorClick(door, i));
            doorsContainer.appendChild(door);
        }
    }
});