Adding support for list view and links to tinfoil.media for more details

app/static/style.css

@@ -44,6 +44,15 @@
     color: white;
 }
 
+.game-link {
+    font-size: 1em;
+    margin-right: 5px;
+}
+
+.game-link img {
+    height: 15px;
+}
+
 p.game-description {
     margin-bottom: 0;
     font-size: 0.875rem;

app/templates/index.html

@@ -75,7 +75,7 @@
                         class="bi bi-card-heading"></i></button>
                 <button id="view-toggle-btn-icon" type="button" class="btn btn-primary view-toggle-btn" data-view="icon"><i
                         class="bi bi-grid-fill"></i></button>
-                <button id="view-toggle-btn-list" type="button" class="btn btn-primary view-toggle-btn" data-view="list" disabled=""><i
+                <button id="view-toggle-btn-list" type="button" class="btn btn-primary view-toggle-btn" data-view="list"><i
                         class="bi bi-list-ul"></i></button>
             </div>
         </div>
@@ -145,6 +145,8 @@
         } else if (currentView === 'icon') {
             renderIconView();
             adjustIconSizes();
+        } else if (currentView === 'list') {
+            renderListView();
         }
 
         // Set slider to show 3 columns by default
@@ -196,6 +198,11 @@
             const typeBadge = $('<span class="badge rounded-pill text-bg-info game-tag"></span>').text(game.type);
             tagsContainer.append(typeBadge);
 
+            // link to tinfoil
+            const tinfoilLink = $('<span class="badge rounded-pill text-bg-info game-link"><a href="https://tinfoil.io/Title/' +game.id +
+                '"><img src="https://tinfoil.media/favicon.ico"></a></span>');
+            tagsContainer.append(tinfoilLink);
+
             if (game.has_latest_version !== undefined) {
                 const versionBadge = $(`<span class="badge rounded-pill game-tag version-tag" title="${game.name} [${game.title_id}] Updates"></span>`)
                     .addClass(`text-bg-${game.has_latest_version ? 'success' : 'warning'}`)
@@ -225,7 +232,10 @@
             }
 
             if (game.has_all_dlcs !== undefined) {
-                const dlcBadge = $('<span class="badge rounded-pill game-tag"></span>').addClass(`text-bg-${game.has_all_dlcs ? 'success' : 'warning'}`).html('<i class="bi bi-box-seam-fill"></i>');
+                const dlcBadge = $('<span class="badge rounded-pill game-tag" title=""></span>').
+                    addClass(`text-bg-${game.has_all_dlcs ? 'success' : 'warning'}`).
+                    prop('title', game.has_all_dlcs ? 'Has all DLC' : 'Missing DLC').
+                    html('<i class="bi bi-box-seam-fill"></i>');
                 tagsContainer.append(dlcBadge);
             }
 
@@ -260,6 +270,59 @@
         updatePaginationControls(baseGames.length)
     }
 
+    function renderListView() {
+        // Render icon view logic...
+        const gameGrid = $('#gameGrid');
+        gameGrid.empty(); // Clear existing games
+        // Get games for the current page
+        start = (currentPage - 1) * itemsPerPage
+        end = start + itemsPerPage
+        baseGames = filteredGames.filter(game => game.type === 'BASE');
+        paginatedGames = baseGames.slice(start, end);
+
+        paginatedGames.forEach(game => {
+            const container = $('<div class="d-flex align-items-center"></div>');
+            const image = $('<div class="flex-shrink-0"><img src="'+game.iconUrl+'" alt="'+game.name+'" width="64px" height="64px"></div>');
+            const title = $('<div class="flex-grow-1 ms-3">' +
+                        (game.title_id_name || game.name) +
+                    '</div>');
+            const tagsContainer = $('<div class="tags-container" style="position:relative;"></div>');
+
+            const typeBadge = $('<span class="badge rounded-pill text-bg-info game-tag"></span>').text(game.type);
+            tagsContainer.append(typeBadge);
+
+            // link to tinfoil
+            const tinfoilLink = $('<span class="badge rounded-pill text-bg-info game-link"><a href="https://tinfoil.io/Title/' +game.id +
+                '"><img src="https://tinfoil.media/favicon.ico"></a></span>');
+            tagsContainer.append(tinfoilLink);
+
+
+            if (game.has_latest_version !== undefined) {
+                 const versionBadge = $('<span class="badge rounded-pill game-tag" title=""></span>').
+                    addClass(`text-bg-${game.has_latest_version ? 'success' : 'warning'}`).
+                    prop('title', game.has_latest_version ? 'Latest Version' : 'Missing Latest Update').
+                    html(`<i class="bi ${game.has_latest_version ? 'bi-check-circle-fill' : 'bi-arrow-down-circle'}"></i>`);
+                tagsContainer.append(versionBadge);
+            }
+
+            if (game.has_all_dlcs !== undefined) {
+                const dlcBadge = $('<span class="badge rounded-pill game-tag" title=""></span>').
+                    addClass(`text-bg-${game.has_all_dlcs ? 'success' : 'warning'}`).
+                    prop('title', game.has_all_dlcs ? 'Has all DLC' : 'Missing DLC').
+                    html('<i class="bi bi-box-seam-fill"></i>');
+                tagsContainer.append(dlcBadge);
+            }
+
+            gameGrid.append(container.append(image, title, tagsContainer));
+        });
+
+        // Adjust icon sizes based on the slider value
+        adjustIconSizes(cardSize);
+        // Update pagination
+        updatePaginationControls(baseGames.length);
+
+    }
+
     function getColumnsForCardSize(size) {
         switch (size) {
             case 1: return 1; // 2 columns
@@ -369,12 +432,8 @@
         $('.view-toggle-btn').click(function () {
             $('.view-toggle-btn').removeClass("active"); 
             $(this).addClass("active");
-            const view = $(this).data('view');
-            if (view === 'card') {
-                currentView = 'card';
-            } else if (view === 'icon') {
-                currentView = 'icon';
-            }
+            currentView = $(this).data('view');
+
             renderGames(games);
         });
 
@@ -522,11 +581,6 @@
 
     }
 
-    // $('#btnApplyFilters').on('click', function () {
-    //     updateFilter();
-    //     applyFilters();
-    // });
-
 
 </script>
 {% endblock %}