script.js

const games = [
    { id: "01", title: "Candy Crush", folder: "01-Candy-Crush-Game", category: "Puzzle" },
    { id: "02", title: "Pac-Man", folder: "02-Pac-Man-Game", category: "Arcade" },
    { id: "03", title: "Chess", folder: "03-Chess-Game", category: "Logic" },
    { id: "04", title: "Doodle Jump", folder: "04-Doodle-Jump-Game", category: "Arcade" },
    { id: "05", title: "Solitaire", folder: "05-Solitaire-Game", category: "Puzzle" },
    { id: "06", title: "Sudoku", folder: "06-Sudoku-Game", category: "Logic" },
    { id: "07", title: "Crossy Road", folder: "07-Crossy-Road-Game", category: "Arcade" },
    { id: "08", title: "Rock Paper Scissors", folder: "08-Rock-Paper-Scissors", category: "Casual" },
    { id: "09", title: "Flappy Bird", folder: "09-Flappy-Bird-Game", category: "Arcade" },
    { id: "10", title: "2048", folder: "10-2048-Game", category: "Puzzle" },
    { id: "11", title: "Wordle", folder: "11-Wordle-Game", category: "Word" },
    { id: "12", title: "Hangman", folder: "12-Hangman-Game", category: "Word" },
    { id: "13", title: "Tower Blocks", folder: "13-Tower-Blocks", category: "Arcade" },
    { id: "14", title: "Archery Game", folder: "14-Archery-Game", category: "Action" },
    { id: "15", title: "Tic Tac Toe", folder: "15-Tic-Tac-Toe", category: "Logic" },
    { id: "16", title: "Minesweeper", folder: "16-Minesweeper-Game", category: "Logic" },
    { id: "17", title: "Speed Typing", folder: "17-Speed-Typing-Game", category: "Action" },
    { id: "18", title: "Breakout", folder: "18-Breakout-Game", category: "Arcade" },
    { id: "19", title: "Ping Pong", folder: "19-Ping-Pong-Game", category: "Arcade" },
    { id: "20", title: "Tetris", folder: "20-Tetris-Game", category: "Puzzle" },
    { id: "21", title: "Tilting Maze", folder: "21-Tilting-Maze-Game", category: "Logic" },
    { id: "22", title: "Memory Card", folder: "22-Memory-Card-Game", category: "Logic" },
    { id: "23", title: "Number Guessing", folder: "23-Type-Number-Guessing-Game", category: "Logic" },
    { id: "24", title: "Snake", folder: "24-Snake-Game", category: "Arcade" },
    { id: "25", title: "Connect Four", folder: "25-Connect-Four-Game", category: "Logic" },
    { id: "26", title: "Insect Catch", folder: "26-Insect-Catch-Game", category: "Action" },
    { id: "27", title: "Typing Battle", folder: "27-Typing-Game", category: "Action" },
    { id: "28", title: "Dice Roll", folder: "28-Dice-Roll-Simulator", category: "Casual" },
    { id: "29", title: "Shape Clicker", folder: "29-Shape-Clicker-Game", category: "Action" },
    { id: "30", title: "Typing Master", folder: "30-Typing-Game", category: "Action" },
    { id: "31", title: "Voice Guess", folder: "31-Speak-Number-Guessing-Game", category: "Logic" },
    { id: "32", title: "Fruit Slicer", folder: "32-Fruit-Slicer-Game", category: "Action" },
    { id: "33", title: "Quiz Master", folder: "33-Quiz-Game", category: "Word" },
    { id: "34", title: "Emoji Catcher", folder: "34-Emoji-Catcher-Game", category: "Action" },
    { id: "35", title: "Whack A Mole", folder: "35-Whack-A-Mole-Game", category: "Action" },
    { id: "36", title: "Simon Says", folder: "36-Simon-Says-Game", category: "Arcade" },
    { id: "37", title: "Sliding Puzzle", folder: "37-Sliding-Puzzle-Game", category: "Puzzle" }
];

const gameGrid = document.getElementById('gameGrid');
const gameSearch = document.getElementById('gameSearch');
const filterBtns = document.querySelectorAll('.filter-btn');

let currentCategory = 'all';
let currentSearch = '';

// Initialize ratings
games.forEach(game => {
    game.rating = (Math.random() * (5.0 - 4.2) + 4.2).toFixed(1);
    game.reviews = Math.floor(Math.random() * 500) + 50;
    // For now use a consistent placeholder.
    // In a real scenario, we could look for thumbnails in their folders.
    game.thumb = `./assets/thumb.png`;
});

function renderGames() {
    const filtered = games.filter(game => {
        const matchesCategory = currentCategory === 'all' || game.category.toLowerCase() === currentCategory.toLowerCase();
        const matchesSearch = game.title.toLowerCase().includes(currentSearch.toLowerCase());
        return matchesCategory && matchesSearch;
    });

    gameGrid.innerHTML = filtered.map(game => `
        <div class="game-card" onclick="window.location.href='./${game.folder}/'">
            <img src="${game.thumb}" alt="${game.title}" loading="lazy">
            <div class="game-info">
                <div class="game-title">${game.title}</div>
                <div style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem;">${game.category} Play</div>
                <div class="game-meta">
                    <div class="rating">
                        <i class="fa-solid fa-star"></i>
                        <span>${game.rating} (${game.reviews})</span>
                    </div>
                    <a href="./${game.folder}/" class="play-btn">Play Now</a>
                </div>
            </div>
        </div>
    `).join('');

    if (filtered.length === 0) {
        gameGrid.innerHTML = `
            <div style="grid-column: 1/-1; text-align: center; padding: 5rem;">
                <i class="fa-solid fa-ghost fa-3x" style="color: var(--text-muted); margin-bottom: 1rem;"></i>
                <p style="color: var(--text-muted);">No games found matching "${currentSearch}"</p>
            </div>
        `;
    }
}

// Search Logic
gameSearch.addEventListener('input', (e) => {
    currentSearch = e.target.value;
    renderGames();
});

// Filter Logic
filterBtns.forEach(btn => {
    btn.addEventListener('click', () => {
        // Update active class
        filterBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        currentCategory = btn.getAttribute('data-category');
        renderGames();
    });
});

// Initial Render
document.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
        renderGames();
    }, 800); // Small delay for "loader" effect
});