<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-scale=1.0">
   
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f4f4f4;
            margin: 0px;
            padding: 0px;
        }
      
        .game-board {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            gap: 5px;
            width: 600px;
            height: 399px;
            border: 2px solid #007BFF;
        }
        .cell {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            background-color: #e0e0e0;
            cursor: pointer;
            border: 1px solid #ccc;
            transition: background-color 0.3s;
            height: 126px; /* Fixed height */
            width: 194px; /* Fixed width */
        }
        .cell:hover {
            background-color: #d0d0d0;
        }
        .cell.selected {
            background-color: #3396FF;  /* Darker background when selected */
        }
        .feedback {
            margin: 10px; /* Reduced gap */
            font-size: 24px;
            min-height: 40px; /* Reserve space for feedback */
        }
        .correct-message {
            color: green;
        }
        .incorrect-message {
            color: red;
        }
        button {
            font-size: 18px;
            padding: 10px 15px;
            margin: 5px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        .correct {
            background-color: green;
            color: white;
        }
        .incorrect {
            background-color: red;
            color: white;
        }
    </style>
</head>
<body>

<div class="feedback" id="feedback"></div>
<div class="game-board" id="gameBoard"></div>
<button id="submitBtn">Submit</button>
<button id="nextSetBtn" style="display: none;">Next Set</button>
<button id="resetBtn" style="display: none;">Reset</button>
<button id="replayBtn" style="display: none;">Replay</button>

<script>
    const sets = [
        {
            words: ['Bread', 'Tea', 'Jam', 'Cola', 'Coffee', 'Butter', 'Water', 'Milk', 'Cheese'],
            correctWords: ['Tea', 'Coffee', 'Milk'],
            category: 'drinks'
        },
        {
            words: ['Latte', 'Juice', 'Tea', 'Coffee', 'Water', 'Soda', 'Expresso', 'Milk', 'Lemonade'],
            correctWords: ['Latte', 'Coffee', 'Expresso'],
            category: 'drinks'
        },
        {
            words: ['Door', 'Window', 'Chair', 'Table', 'Wall', 'Sofa', 'Desk', 'Carpet', 'Bed'],
            correctWords: ['Chair', 'Sofa', 'Bed'],
            category: 'drinks'
        },
        {
            words: ['Hamster', 'Rabbit', 'Duck', 'Parrot', 'Rat', 'Mouse', 'Cat', 'Horse', 'Sheep'],
            correctWords: ['Hamster', 'Parrot', 'Cat'],
            category: 'drinks'
        },
        {
            words: ['Volleyball', 'Basketball', 'Cycling', 'Baseball', 'Running', 'Football', 'Swimming', 'Cricket', 'Soccer'],
            correctWords: ['Cycling', 'Running', 'Swimming'],
            category: 'drinks'
        },
        {
            words: ['Sun', 'Neptune', 'Star', 'Jupiter', 'Moon', 'Saturn', 'Earth', 'Mars', 'Venus'],
            correctWords: ['Earth', 'Mars', 'Venus'],
            category: 'drinks'
        },
        {
            words: ['Mother', 'Father', 'Uncle', 'Daughter', 'Son', 'Aunt', 'Sister', 'Niece', 'Brother'],
            correctWords: ['Mother', 'Daughter', 'Sister'],
            category: 'drinks'
        },
 {
            words: ['Trumpet', 'flute', 'Guitar', 'Tube', 'Cello', 'Banjo', 'Violin', 'Piano', 'Bagpipe'],
            correctWords: ['Guitar', 'Cello', 'Violin'],
            category: 'drinks'
        },
        {
            words: ['Shoes', 'Jeans', 'Trousers', 'Dress', 'Trainers', 'Sandals', 'Skirt', 'Shorts', 'Boots'],
            correctWords: ['Shoes', 'Trainers', 'Boots'],
            category: 'drinks'
        }
    ];

    let currentSetIndex = 0;
    let selectedWords = [];
    const feedback = document.getElementById('feedback');
    const gameBoard = document.getElementById('gameBoard');
    const resetBtn = document.getElementById('resetBtn');
    const replayBtn = document.getElementById('replayBtn');

    function initializeGame() {
        selectedWords = [];
        feedback.textContent = '';
        document.getElementById('nextSetBtn').style.display = 'none';
        document.getElementById('resetBtn').style.display = 'none';
        renderBoard();
        setupWords();
    }

    function setupWords() {
        const { words } = sets[currentSetIndex];
        const cells = document.querySelectorAll('.cell');
        cells.forEach((cell, index) => {
            cell.textContent = words[index];
            cell.className = 'cell'; // Reset class
            cell.onclick = () => handleCellClick(cell, words[index]);
        });
    }

    function renderBoard() {
        gameBoard.innerHTML = '';
        for (let i = 0; i < 9; i++) {
            const cell = document.createElement('div');
            cell.className = 'cell';
            gameBoard.appendChild(cell);
        }
    }

    function handleCellClick(cell, word) {
        if (selectedWords.length < 3 && !selectedWords.includes(word)) {
            selectedWords.push(word);
            cell.classList.add('selected'); // Add selected class for darker background
        }
    }

    document.getElementById('submitBtn').addEventListener('click', () => {
        if (selectedWords.length === 3) {
            checkWin();
        } else {
            feedback.innerHTML = 'Please select exactly three words.';
        }
    });

    function checkWin() {
        const { correctWords } = sets[currentSetIndex];

        // Check if all selected words are correct
        const isCorrect = selectedWords.every(word => correctWords.includes(word));

        // Highlight selected words
        selectedWords.forEach(word => {
            const cell = [...document.querySelectorAll('.cell')].find(c => c.textContent === word);
            if (cell) {
                if (isCorrect) {
                    cell.classList.add('correct'); // Green for correct category
                } else {
                    cell.classList.add('incorrect'); // Red for incorrect category
                }
            }
        });

        // Provide feedback
        if (isCorrect) {
            feedback.innerHTML = `<span class="correct-message">Correct!</span>`;
            document.getElementById('nextSetBtn').style.display = 'block';
        } else {
            feedback.innerHTML = `<span class="incorrect-message">Incorrect! Try again!</span>`;
            resetBtn.style.display = 'block';
        }
    }

    document.getElementById('nextSetBtn').addEventListener('click', () => {
        currentSetIndex++;
        if (currentSetIndex < sets.length) {
            initializeGame();
        } else {
            feedback.innerHTML = `<span class="correct-message">Congratulations! You have completed all sets.</span>`;
            document.getElementById('nextSetBtn').style.display = 'none';
            document.getElementById('submitBtn').style.display = 'none';
            replayBtn.style.display = 'block';
        }
    });

    resetBtn.addEventListener('click', () => {
        initializeGame();
    });

    replayBtn.addEventListener('click', () => {
        currentSetIndex = 0;
        feedback.textContent = '';
        replayBtn.style.display = 'none';
        initializeGame();
    });

    initializeGame(); // Start the first game
</script>

</body>
</html>