Shottz/gameverse-navigator

1 2// Shared functionality across all pages3document.addEventListener('DOMContentLoaded', async function() {4    // Load featured games on homepage5    if (document.getElementById('featured-games')) {6        await loadFeaturedGames();7    }8    9    // Initialize year filters if present10    if (document.querySelector('.year-filter')) {11        setupYearFilters();12    }13});14 15function setupYearFilters() {16    const yearFilter = document.querySelector('.year-filter');17    yearFilter.addEventListener('change', function() {18        const selectedYear = this.value;19        filterGamesByYear(selectedYear);20    });21}22 23function filterGamesByYear(year) {24    const gameCards = document.querySelectorAll('.game-card');25    gameCards.forEach(card => {26        const cardYear = card.dataset.year;27        if (year === 'all' || cardYear === year) {28            card.style.display = 'block';29        } else {30            card.style.display = 'none';31        }32    });33}34// IGDB API configuration35const CLIENT_ID = 'YOUR_CLIENT_ID'; // Register at https://api.igdb.com/36const ACCESS_TOKEN = 'YOUR_ACCESS_TOKEN'; // Get from Twitch OAuth37 38async function fetchIGDBData(query, endpoint = 'games') {39    try {40        const response = await fetch(`https://api.igdb.com/v4/${endpoint}`, {41            method: 'POST',42            headers: {43                'Client-ID': CLIENT_ID,44                'Authorization': `Bearer ${ACCESS_TOKEN}`,45                'Accept': 'application/json'46            },47            body: query48        });49        return await response.json();50    } catch (error) {51        console.error('Error fetching from IGDB:', error);52        return [];53    }54}55 56async function loadFeaturedGames() {57    try {58        // Fetch upcoming PS5 and Xbox games from IGDB59        const now = Math.floor(Date.now() / 1000);60        const query = `61            fields name, first_release_date, platforms.name, cover.url, rating, summary;62            where platforms = (48,49,167,169) & first_release_date > ${now};63            sort first_release_date asc;64            limit 16;65        `;66        67        const games = await fetchIGDBData(query);68        69        if (games.length === 0) {70            throw new Error('No games returned from IGDB');71        }72 73        const gamesByYear = {};74        games.forEach(game => {75            const year = new Date(game.first_release_date * 1000).getFullYear();76            if (!gamesByYear[year]) {77                gamesByYear[year] = [];78            }79            gamesByYear[year].push({80                title: game.name,81                platform: game.platforms[0].name,82                releaseDate: new Date(game.first_release_date * 1000).toISOString().split('T')[0],83                image: game.cover ? `https://images.igdb.com/igdb/image/upload/t_cover_big/${game.cover.url.split('/').pop()}` : 'http://static.photos/gaming/640x360',84                rating: game.rating ? (game.rating / 20).toFixed(1) : 4.0,85                summary: game.summary || ''86            });87        });88{89                    title: "Final Fantasy XVI",90                    platform: "PS5",91                    releaseDate: "2023-06-22",92                    image: "http://static.photos/gaming/640x360/10",93                    rating: 4.794                },95                {96                    title: "Marvel's Spider-Man 2",97                    platform: "PS5",98                    releaseDate: "2023-10-20",99                    image: "http://static.photos/gaming/640x360/9",100                    rating: 4.9101                },102                {103                    title: "Forza Motorsport",104                    platform: "Xbox Series X",105                    releaseDate: "2023-10-10",106                    image: "http://static.photos/gaming/640x360/16",107                    rating: 4.6108                }109            ],110            "2024": [111                {112                    title: "Marvel's Wolverine",113                    platform: "PS5",114                    releaseDate: "2024-09-15",115                    image: "http://static.photos/gaming/640x360/18",116                    rating: 4.8117                },118                {119                    title: "Final Fantasy VII Rebirth",120                    platform: "PS5",121                    releaseDate: "2024-02-29",122                    image: "http://static.photos/gaming/640x360/19",123                    rating: 4.9124                },125                {126                    title: "Fable",127                    platform: "Xbox Series X",128                    releaseDate: "2024-06-14",129                    image: "http://static.photos/gaming/640x360/25",130                    rating: 4.6131                },132                {133                    title: "Hellblade II",134                    platform: "Xbox Series X",135                    releaseDate: "2024-05-21",136                    image: "http://static.photos/gaming/640x360/26",137                    rating: 4.7138                }139            ],140            "2025": [141                {142                    title: "Death Stranding 2",143                    platform: "PS5",144                    releaseDate: "2025-03-21",145                    image: "http://static.photos/gaming/640x360/20",146                    rating: 4.7147                },148                {149                    title: "Avowed",150                    platform: "Xbox Series X",151                    releaseDate: "2025-02-28",152                    image: "http://static.photos/gaming/640x360/27",153                    rating: 4.5154                },155                {156                    title: "Perfect Dark",157                    platform: "Xbox Series X",158                    releaseDate: "2025-11-15",159                    image: "http://static.photos/gaming/640x360/28",160                    rating: 4.4161                },162                {163                    title: "Horizon Call of the Mountain",164                    platform: "PS5",165                    releaseDate: "2025-11-07",166                    image: "http://static.photos/gaming/640x360/21",167                    rating: 4.6168                }169            ],170            "2026": [171                {172                    title: "The Last of Us Part III",173                    platform: "PS5",174                    releaseDate: "2026-09-02",175                    image: "http://static.photos/gaming/640x360/22",176                    rating: 4.9177                },178                {179                    title: "Ghost of Tsushima 2",180                    platform: "PS5",181                    releaseDate: "2026-05-15",182                    image: "http://static.photos/gaming/640x360/23",183                    rating: 4.8184                },185                {186                    title: "Indiana Jones Game",187                    platform: "Xbox Series X",188                    releaseDate: "2026-10-22",189                    image: "http://static.photos/gaming/640x360/30",190                    rating: 4.8191                },192                {193                    title: "Elder Scrolls VI",194                    platform: "Xbox Series X",195                    releaseDate: "2026-12-18",196                    image: "http://static.photos/gaming/640x360/31",197                    rating: 4.9198                }199            ]200        };201        const allGames = Object.values(gamesByYear).flat();202        const gamesContainer = document.querySelector('#featured-games .grid');203        if (!gamesContainer) return;204        205        gamesContainer.innerHTML = '';206 207        allGames.forEach(game => {208            const gameCard = document.createElement('div');209            const year = game.releaseDate.split('-')[0];210            gameCard.className = 'game-card bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl';211            gameCard.dataset.year = year;212            213            // Extract platform short name214            let platformShort = '';215            let platformClass = 'gray';216            if (game.platform.includes('PlayStation') || game.platform.includes('PS5')) {217                platformShort = 'PS5';218                platformClass = 'purple';219            } else if (game.platform.includes('Xbox') || game.platform.includes('Series')) {220                platformShort = 'Xbox';221                platformClass = 'green';222            }223 224            gameCard.innerHTML = `225                <div class="relative">226                    <img src="${game.image}" alt="${game.title}" class="w-full h-48 object-cover">227                    ${platformShort ? `228                        <span class="absolute top-2 right-2 px-2 py-1 bg-${platformClass}-600 text-xs rounded-full">229                            ${platformShort}230                        </span>231                    ` : ''}232                </div>233                <div class="p-4">234                    <h3 class="text-xl font-bold mb-2 truncate">${game.title}</h3>235                    <div class="flex justify-between text-sm text-gray-300 mb-3">236                        <span>${new Date(game.releaseDate).toLocaleDateString()}</span>237                        <span class="flex items-center">238                            <i data-feather="star" class="w-4 h-4 mr-1 text-yellow-400"></i>239                            ${game.rating}240                        </span>241                    </div>242                    <p class="text-sm text-gray-400 line-clamp-2">${game.summary}</p>243                </div>244            `;245gamesContainer.appendChild(gameCard);246        });247 248        // Add year filter dropdown to featured games section249        const featuredSection = document.getElementById('featured-games');250        const filterHTML = `251            <div class="flex justify-end mb-4">252                <div class="relative">253                    <select class="year-filter appearance-none bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-yellow-500 text-sm">254                        <option value="all">All Years</option>255                        ${Object.keys(gamesByYear).map(year => `256                            <option value="${year}">${year}</option>257                        `).join('')}258                    </select>259                    <i data-feather="chevron-down" class="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none"></i>260                </div>261            </div>262        `;263        featuredSection.insertAdjacentHTML('afterbegin', filterHTML);264feather.replace();265    } catch (error) {266        console.error('Error loading featured games:', error);267    }268}