Fetch full game data and improve cards

For search results, fetch full game JSON for the first 60 matches (using Promise.all) and gracefully handle fetch failures by falling back to partial data. Normalize IGDB cover URLs to use a larger cover size (t_cover_big) and ensure absolute URLs, increase cover/placeholder height from 180px to 240px, and improve name layout with two-line clamping and bolder text. Also keep the same behavior when platform data can't be loaded by still fetching game details.

Author: ReenigneArcher

gh-pages-template/assets/js/item_loader.js

@@ -384,8 +384,17 @@ function run_search() {
             fetch(`${base_url}/platforms/all.json`)
                 .then(r => r.json())
                 .then(allPlatforms => {
-                    matches.slice(0, 60).forEach(([id, game]) => {
-                        const col = document.createElement("div")
+                    // Fetch full game data for each match
+                    const gamePromises = matches.slice(0, 60).map(([id, _game]) =>
+                        fetch(`${base_url}/games/${id}.json`)
+                            .then(r => r.ok ? r.json() : null)
+                            .then(fullGame => ({ id, game: fullGame || { name: _game.name } }))
+                            .catch(() => ({ id, game: { name: _game.name } }))
+                    )
+
+                    Promise.all(gamePromises).then(results => {
+                        results.forEach(({ id, game }) => {
+                            const col = document.createElement("div")
                         col.className = "col"
                         row.appendChild(col)
 
@@ -398,16 +407,23 @@ function run_search() {
                         if (game.cover && game.cover.url) {
                             const coverImg = document.createElement("img")
                             coverImg.className = "card-img-top rounded-top-0"
-                            coverImg.src = game.cover.url.replace("t_thumb", "t_cover_small")
+                            // Convert IGDB URL properly
+                            let coverUrl = game.cover.url
+                            if (!coverUrl.startsWith('http')) {
+                                coverUrl = 'https://images.igdb.com/igdb/image/upload/t_cover_big/' + coverUrl.split('/').pop()
+                            } else {
+                                coverUrl = coverUrl.replace("t_thumb", "t_cover_big")
+                            }
+                            coverImg.src = coverUrl
                             coverImg.alt = game.name
                             coverImg.loading = "lazy"
-                            coverImg.style.height = "180px"
+                            coverImg.style.height = "240px"
                             coverImg.style.objectFit = "cover"
                             card.appendChild(coverImg)
                         } else {
                             const placeholder = document.createElement("div")
                             placeholder.className = "card-img-top bg-secondary d-flex align-items-center justify-content-center"
-                            placeholder.style.height = "180px"
+                            placeholder.style.height = "240px"
                             const icon = document.createElement("span")
                             icon.className = "material-symbols-outlined text-white"
                             icon.style.fontSize = "3rem"
@@ -422,9 +438,13 @@ function run_search() {
 
                         // Game name
                         const nameEl = document.createElement("h6")
-                        nameEl.className = "card-title small mb-2 fw-bold text-truncate"
+                        nameEl.className = "card-title small mb-2 fw-bold"
                         nameEl.textContent = game.name
                         nameEl.title = game.name
+                        nameEl.style.overflow = "hidden"
+                        nameEl.style.display = "-webkit-box"
+                        nameEl.style.webkitLineClamp = "2"
+                        nameEl.style.webkitBoxOrient = "vertical"
                         cardBody.appendChild(nameEl)
 
                         // Platforms with release years
@@ -475,10 +495,19 @@ function run_search() {
                         moreNote.textContent = `Showing first 60 of ${matches.length} results. Try a more specific search term.`
                         search_container.appendChild(moreNote)
                     }
+                    })
                 })
                 .catch(() => {
-                    // Fallback if platforms can't be loaded
-                    matches.slice(0, 60).forEach(([id, game]) => {
+                    // Fallback if platforms can't be loaded - still fetch game data
+                    const gamePromises = matches.slice(0, 60).map(([id, _game]) =>
+                        fetch(`${base_url}/games/${id}.json`)
+                            .then(r => r.ok ? r.json() : null)
+                            .then(fullGame => ({ id, game: fullGame || { name: _game.name } }))
+                            .catch(() => ({ id, game: { name: _game.name } }))
+                    )
+
+                    Promise.all(gamePromises).then(results => {
+                        results.forEach(({ id, game }) => {
                         const col = document.createElement("div")
                         col.className = "col"
                         row.appendChild(col)
@@ -491,14 +520,23 @@ function run_search() {
                         if (game.cover && game.cover.url) {
                             const coverImg = document.createElement("img")
                             coverImg.className = "card-img-top rounded-top-0"
-                            coverImg.src = game.cover.url.replace("t_thumb", "t_cover_small")
+                            // Convert IGDB URL properly
+                            let coverUrl = game.cover.url
+                            if (!coverUrl.startsWith('http')) {
+                                coverUrl = 'https://images.igdb.com/igdb/image/upload/t_cover_big/' + coverUrl.split('/').pop()
+                            } else {
+                                coverUrl = coverUrl.replace("t_thumb", "t_cover_big")
+                            }
+                            coverImg.src = coverUrl
                             coverImg.alt = game.name
                             coverImg.loading = "lazy"
+                            coverImg.style.height = "240px"
+                            coverImg.style.objectFit = "cover"
                             card.appendChild(coverImg)
                         } else {
                             const placeholder = document.createElement("div")
                             placeholder.className = "card-img-top bg-secondary d-flex align-items-center justify-content-center"
-                            placeholder.style.height = "180px"
+                            placeholder.style.height = "240px"
                             const icon = document.createElement("span")
                             icon.className = "material-symbols-outlined text-white"
                             icon.style.fontSize = "3rem"
@@ -512,9 +550,13 @@ function run_search() {
                         card.appendChild(cardBody)
 
                         const nameEl = document.createElement("p")
-                        nameEl.className = "card-text small mb-0"
+                        nameEl.className = "card-text small mb-0 fw-bold"
                         nameEl.textContent = game.name
                         nameEl.title = game.name
+                        nameEl.style.overflow = "hidden"
+                        nameEl.style.display = "-webkit-box"
+                        nameEl.style.webkitLineClamp = "2"
+                        nameEl.style.webkitBoxOrient = "vertical"
                         cardBody.appendChild(nameEl)
                     })
 
@@ -524,6 +566,7 @@ function run_search() {
                         moreNote.textContent = `Showing first 60 of ${matches.length} results. Try a more specific search term.`
                         search_container.appendChild(moreNote)
                     }
+                    })
                 })
         })
         .catch(err => {