Pyramid

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>$10,000 Pyramid</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
        
        body {
            margin: 0;
            padding: 0;
            background: linear-gradient(#001133, #000000);
            color: #ffd700;
            font-family: 'Press Start 2P', cursive;
            overflow: hidden;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        header {
            background: #000;
            padding: 15px;
            text-align: center;
            border-bottom: 6px solid #ffd700;
            font-size: 32px;
            letter-spacing: 4px;
        }
        
        #game-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        
        .pyramid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            width: 720px;
            margin: 30px auto;
        }
        
        .pyramid-level {
            background: rgba(255, 215, 0, 0.15);
            border: 4px solid #ffd700;
            padding: 20px 10px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 18px;
            min-height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .pyramid-level:hover {
            background: #ffd700;
            color: #000;
            transform: scale(1.05);
        }
        
        .bottom-row { grid-column: 1 / -1; display: flex; justify-content: space-around; }
        
        .clue-area {
            background: #111;
            border: 6px solid #ffd700;
            padding: 40px;
            margin: 20px;
            width: 85%;
            max-width: 900px;
            min-height: 280px;
            text-align: center;
            font-size: 32px;
            display: none;
            border-radius: 8px;
        }
        
        button {
            background: #ffd700;
            color: #000;
            border: none;
            padding: 18px 36px;
            margin: 12px;
            font-family: 'Press Start 2P', cursive;
            font-size: 20px;
            cursor: pointer;
            box-shadow: 0 4px 0 #b38b00;
        }
        
        button:active { transform: translateY(4px); box-shadow: 0 0 0; }
        
        .timer {
            font-size: 72px;
            color: #ff3333;
            margin: 20px;
            text-shadow: 0 0 10px #ff0000;
        }
        
        .hidden { display: none !important; }
    </style>
</head>
<body>
    <header>$10,000 PYRAMID</header>
    
    <div id="main-menu">
        <h1 style="font-size: 52px; margin: 40px 0 60px;">WELCOME TO THE PYRAMID</h1>
        <button onclick="startGame()">START GAME</button><br>
        <button onclick="showCustomize()">CUSTOMIZE CATEGORIES</button><br>
        <button onclick="showSettings()">SETTINGS</button>
    </div>
    
    <div id="customize-screen" class="hidden">
        <h2>CUSTOMIZE CATEGORIES</h2>
        <div id="categories-list" style="max-height: 60vh; overflow-y: auto; width: 80%;"></div>
        <button onclick="addNewCategory()">+ ADD NEW CATEGORY</button>
        <button onclick="backToMenu()">BACK TO MENU</button>
    </div>
    
    <div id="game-screen" class="hidden">
        <div id="team-info" style="position: absolute; top: 20px; left: 20px; font-size: 18px; background: rgba(0,0,0,0.7); padding: 15px;"></div>
        
        <div class="pyramid" id="pyramid-board"></div>
        
        <div id="clue-area" class="clue-area">
            <div id="category-name" style="font-size: 26px; margin-bottom: 30px; color: #aaa;"></div>
            <div id="current-word"></div>
            <div id="timer" class="timer">30</div>
            <div>
                <button onclick="correctGuess()">CORRECT! (Space)</button>
                <button onclick="nextWord()">NEXT (N)</button>
                <button onclick="endRound()">END ROUND</button>
            </div>
        </div>
        
        <div style="margin-top: 30px;">
            <button onclick="startRound()">START ROUND</button>
            <button onclick="backToMenuFromGame()">MAIN MENU</button>
        </div>
        
        <div id="score-board" style="position: absolute; bottom: 30px; right: 30px; font-size: 22px; background: rgba(0,0,0,0.7); padding: 15px;"></div>
    </div>
    
    <script>
        let categories = [
            { name: "Things You Find in a Bathroom", words: ["Toilet", "Sink", "Shower", "Soap", "Towels", "Mirror", "Toilet Paper"] },
            { name: "Famous French Things", words: ["Paris", "Wine", "Fashion", "Eiffel Tower", "Croissant", "Louvre", "Beret"] },
            { name: "Sports Equipment", words: ["Basketball", "Football", "Tennis Racket", "Golf Club", "Baseball Bat", "Hockey Puck", "Soccer Ball"] },
            { name: "Things That Are Red", words: ["Apple", "Fire Truck", "Tomato", "Stop Sign", "Cherry", "Blood", "Rose"] },
            { name: "Movie Genres", words: ["Action", "Comedy", "Horror", "Drama", "Sci-Fi", "Romance", "Thriller"] },
            { name: "Breakfast Foods", words: ["Pancakes", "Bacon", "Eggs", "Coffee", "Cereal", "Toast", "Orange Juice"] }
        ];
        
        let teams = [
            { name: "Team A", score: 0, clueGiver: "Contestant A", guesser: "Celebrity A" },
            { name: "Team B", score: 0, clueGiver: "Contestant B", guesser: "Celebrity B" }
        ];
        
        let currentTeam = 0;
        let selectedCategories = [];
        let currentCategoryIndex = -1;
        let currentWordIndex = 0;
        let timerInterval;
        let timeLeft = 30;
        let roundScore = 0;

        function populatePyramid() {
            const pyramid = document.getElementById('pyramid-board');
            pyramid.innerHTML = '';
            
            // Bottom row (3)
            const bottom = document.createElement('div');
            bottom.className = 'bottom-row';
            for (let i = 0; i < 3; i++) {
                const div = createPyramidSlot(i);
                bottom.appendChild(div);
            }
            pyramid.appendChild(bottom);
            
            // Middle row (2)
            const middle = document.createElement('div');
            middle.style.display = 'flex'; middle.style.justifyContent = 'space-around'; middle.style.gridColumn = '1 / -1';
            for (let i = 3; i < 5; i++) {
                const div = createPyramidSlot(i);
                middle.appendChild(div);
            }
            pyramid.appendChild(middle);
            
            // Top
            if (selectedCategories.length > 5) {
                const topDiv = createPyramidSlot(5);
                topDiv.style.gridColumn = '2 / 3';
                pyramid.appendChild(topDiv);
            }
        }

        function createPyramidSlot(i) {
            const cat = selectedCategories[i];
            const div = document.createElement('div');
            div.className = 'pyramid-level';
            div.textContent = cat ? cat.name.substring(0, 22) + (cat.name.length > 22 ? '...' : '') : '';
            if (cat) div.onclick = () => selectCategory(i);
            return div;
        }

        function selectCategory(index) {
            currentCategoryIndex = index;
            const cat = selectedCategories[index];
            document.getElementById('category-name').textContent = cat.name.toUpperCase();
            currentWordIndex = 0;
            roundScore = 0;
            showCurrentWord();
            document.getElementById('clue-area').style.display = 'block';
        }

        function showCurrentWord() {
            const cat = selectedCategories[currentCategoryIndex];
            document.getElementById('current-word').innerHTML = `<strong>${cat.words[currentWordIndex] || 'ROUND COMPLETE!'}</strong>`;
        }

        function startRound() {
            if (currentCategoryIndex === -1) return alert("Select a category from the pyramid!");
            timeLeft = 30;
            document.getElementById('timer').textContent = timeLeft;
            clearInterval(timerInterval);
            timerInterval = setInterval(() => {
                timeLeft--;
                document.getElementById('timer').textContent = timeLeft;
                if (timeLeft <= 5) document.getElementById('timer').style.color = '#ffff00';
                if (timeLeft <= 0) endRound();
            }, 1000);
        }

        function correctGuess() {
            roundScore++;
            nextWord();
        }

        function nextWord() {
            currentWordIndex++;
            const cat = selectedCategories[currentCategoryIndex];
            if (currentWordIndex < cat.words.length) {
                showCurrentWord();
            } else {
                endRound();
            }
        }

        function endRound() {
            clearInterval(timerInterval);
            teams[currentTeam].score += roundScore * 10;
            updateScores();
            alert(`Round Over!\n${roundScore} correct → ${roundScore * 10} points`);
            document.getElementById('clue-area').style.display = 'none';
            currentCategoryIndex = -1;
            currentTeam = 1 - currentTeam;
            updateTeamInfo();
        }

        function updateScores() {
            document.getElementById('score-board').innerHTML = `
                ${teams[0].name}: <strong>${teams[0].score}</strong><br>
                ${teams[1].name}: <strong>${teams[1].score}</strong>
            `;
        }

        function updateTeamInfo() {
            const t = teams[currentTeam];
            document.getElementById('team-info').innerHTML = `
                <strong>${t.name}</strong><br>
                Clue Giver: ${t.clueGiver}<br>
                Guesser: ${t.guesser}
            `;
        }

        function startGame() {
            selectedCategories = [...categories];
            document.getElementById('main-menu').classList.add('hidden');
            document.getElementById('game-screen').classList.remove('hidden');
            populatePyramid();
            updateScores();
            updateTeamInfo();
        }

        // Customization
        function showCustomize() {
            document.getElementById('main-menu').classList.add('hidden');
            document.getElementById('customize-screen').classList.remove('hidden');
            renderCategoriesList();
        }

        function renderCategoriesList() {
            const list = document.getElementById('categories-list');
            list.innerHTML = categories.map((cat, i) => `
                <div style="background:#222; padding:15px; margin:8px 0; border-left:6px solid #ffd700;">
                    <strong>${cat.name}</strong> (${cat.words.length} words)<br>
                    <small>${cat.words.slice(0,5).join(', ')}${cat.words.length>5?'...':''}</small><br>
                    <button onclick="deleteCategory(${i})" style="padding:5px 12px; font-size:14px;">DELETE</button>
                </div>
            `).join('');
        }

        function addNewCategory() {
            const name = prompt("New Category Name:");
            if (!name) return;
            const wordsStr = prompt("Words/phrases (comma separated):");
            if (wordsStr) {
                const words = wordsStr.split(',').map(w => w.trim()).filter(Boolean);
                categories.push({name, words});
                renderCategoriesList();
            }
        }

        function deleteCategory(i) {
            if (confirm("Delete category?")) {
                categories.splice(i, 1);
                renderCategoriesList();
            }
        }

        function backToMenu() {
            document.getElementById('customize-screen').classList.add('hidden');
            document.getElementById('main-menu').classList.remove('hidden');
        }

        function backToMenuFromGame() {
            if (confirm("Return to menu?")) {
                location.reload();
            }
        }

        function showSettings() {
            alert("TV Tips:\n• Use Fullscreen (F11)\n• Connect HDMI\n• Keyboard: Space = Correct, N = Next");
        }

        // Keyboard support
        document.addEventListener('keydown', e => {
            if (document.getElementById('clue-area').style.display === 'block') {
                if (e.key === ' ') { e.preventDefault(); correctGuess(); }
                if (e.key.toLowerCase() === 'n') nextWord();
            }
        });
    </script>
</body>
</html>