Api's - Kitch41/Blok-Tech GitHub Wiki

async function fetchGames(apiKey, clientId, offset, limit) {
  const gamesResponse = await fetch('https://api.igdb.com/v4/games', {
    method: 'POST',
    headers: {
      'Client-ID': clientId,
      'Authorization': `Bearer ${apiKey}`,
      'Content-Type': 'text/plain'
    },
    body: `fields name,rating,cover,summary; sort rating desc; limit ${limit}; offset ${offset};`
  });
  const games = await gamesResponse.json();

  const coverIds = games.map(game => game.cover).filter(id => id != null);

  const coversResponse = await fetch('https://api.igdb.com/v4/covers', {
    method: 'POST',
    headers: {
      'Client-ID': clientId,
      'Authorization': `Bearer ${apiKey}`,
      'Content-Type': 'text/plain'
    },
    body: `fields url; where id = (${coverIds.join(',')});`
  });
  const covers = await coversResponse.json();

  const coverMap = covers.reduce((acc, cover) => {
    acc[cover.id] = cover.url;
    return acc;
  }, {});

  return games.map(game => {
    if (game.cover) {
      game.coverUrl = coverMap[game.cover];
    }
    return game;
  });
}

    gamesButton.addEventListener('click', function () {
        toggleTrigger(create);
        document.body.classList.add('long');
        gamesButton.classList.add('active');
        overviewButton.classList.remove('active');
        gamesContainer.classList.remove('hidden');
        overviewContainer.classList.add('hidden');
        observe();
    });

    function toggleTrigger(state) {
        const loadMoreTrigger = document.getElementById('loadMoreTrigger');
        if (state === create && !loadMoreTrigger) {
            const newLoadMoreTrigger = document.createElement('div');
            newLoadMoreTrigger.id = 'loadMoreTrigger';
            const gamesContainer = document.getElementById('gamesContainer');
            gamesContainer.insertAdjacentElement('afterend', newLoadMoreTrigger);
        } else if (state === remove && loadMoreTrigger) {
            loadMoreTrigger.remove();
        }
    }


    function observe() {
        // intersection observer
        const observer = new IntersectionObserver(entries => {
            if (entries[0].isIntersecting) {
                loadMoreGames();
            }
        }, {
            root: null,
            rootMargin: '0px',
            threshold: 1.0
        });

        // intersection observer observes if div is in view
        observer.observe(document.querySelector('#loadMoreTrigger'));
    }

    async function loadMoreGames() {
        try {
            const response = await fetch(`/more-games?offset=${offset}&limit=10`);
            const newGames = await response.json();
            newGames.forEach(game => {
                const truncatedSummary = game.summary.length > 200 ? game.summary.substring(0, 200) + '...' : game.summary;
                const gameElement = document.createElement('div');
                gameElement.classList.add('game');
                gameElement.innerHTML = `
              <img src="${game.coverUrl}" alt="${game.name} Cover" />
              <div class="game-details">
                <h2>${game.name}</h2>
                <p>Rating: ${game.rating}</p>
                <p>${truncatedSummary}</p>
              </div>
            `;
                gamesContainer.appendChild(gameElement);
            });
            offset += 10; // Update the offset for the next batch of games
        } catch (error) {
            console.error('Error loading more games:', error);
        }
    }

});