From 3a700c4f48e667e04654b884cca71bb1e216e869 Mon Sep 17 00:00:00 2001 From: Miguel Astor Date: Thu, 26 Feb 2026 17:07:28 -0400 Subject: [PATCH] Add category badges to game tables in all templates Display game categories as colored badges after service badges in both top games and others sections. Categories filtered to exclude .hidden, favorite, and Horny. Co-Authored-By: Claude Sonnet 4.5 --- templates/brutalism.html | 34 ++++++++++++++++++++++++++++++---- templates/glassmorphism.html | 33 +++++++++++++++++++++++++++++---- templates/neumorphism.html | 36 ++++++++++++++++++++++++++++++++---- templates/platinum.html | 32 ++++++++++++++++++++++++++++---- 4 files changed, 119 insertions(+), 16 deletions(-) diff --git a/templates/brutalism.html b/templates/brutalism.html index 009964d..bef39b6 100644 --- a/templates/brutalism.html +++ b/templates/brutalism.html @@ -448,6 +448,18 @@ font-weight: 700; letter-spacing: 0.5px; } + .category-badge { + display: inline-block; + font-size: 10px; + padding: 2px 6px; + background: var(--accent-secondary); + border: 1px solid var(--border-color); + color: var(--bg-primary); + margin-left: 4px; + text-transform: uppercase; + font-weight: 700; + letter-spacing: 0.5px; + } .no-data { text-align: center; @@ -844,7 +856,8 @@ const topGames = filtered.slice(0, topN).map(g => ({ name: g.name, playtime: g.playtime, - service: g.service + service: g.service, + categories: g.categories || [] })); let othersGames = []; @@ -853,7 +866,8 @@ othersGames = filtered.slice(topN).map(g => ({ name: g.name, playtime: g.playtime, - service: g.service + service: g.service, + categories: g.categories || [] })); const othersPlaytime = othersGames.reduce((sum, g) => sum + g.playtime, 0); const othersCount = othersGames.length; @@ -1069,6 +1083,12 @@ const serviceBadge = !isOthers ? `${game.service}` : ''; + const categoriesBadges = !isOthers && game.categories && game.categories.length > 0 + ? game.categories + .filter(cat => cat !== '.hidden' && cat !== 'favorite' && cat !== 'Horny') + .map(cat => `${cat}`) + .join('') + : ''; const row = document.createElement('tr'); if (isOthers) { row.className = 'others-row'; @@ -1077,7 +1097,7 @@ ${index + 1} - ${game.name}${serviceBadge} + ${game.name}${serviceBadge}${categoriesBadges} ${formatTime(game.playtime)} ${percent}% @@ -1088,13 +1108,19 @@ const detailRows = []; othersGames.forEach((otherGame, otherIndex) => { const otherPercent = ((otherGame.playtime / totalPlaytime) * 100).toFixed(1); + const otherCategoriesBadges = otherGame.categories && otherGame.categories.length > 0 + ? otherGame.categories + .filter(cat => cat !== '.hidden' && cat !== 'favorite' && cat !== 'Horny') + .map(cat => `${cat}`) + .join('') + : ''; const detailRow = document.createElement('tr'); detailRow.className = 'others-detail'; detailRow.innerHTML = ` ${index + 1}.${otherIndex + 1} ${otherGame.name} - ${otherGame.service} + ${otherGame.service}${otherCategoriesBadges} ${formatTime(otherGame.playtime)} ${otherPercent}% diff --git a/templates/glassmorphism.html b/templates/glassmorphism.html index ba2a58f..85f9ba0 100644 --- a/templates/glassmorphism.html +++ b/templates/glassmorphism.html @@ -413,6 +413,17 @@ text-transform: capitalize; font-weight: 500; } + .category-badge { + display: inline-block; + font-size: 10px; + padding: 2px 8px; + background: rgba(99, 102, 241, 0.2); + border-radius: 12px; + color: var(--accent-color); + margin-left: 4px; + text-transform: capitalize; + font-weight: 500; + } .no-data { text-align: center; @@ -808,7 +819,8 @@ const topGames = filtered.slice(0, topN).map(g => ({ name: g.name, playtime: g.playtime, - service: g.service + service: g.service, + categories: g.categories || [] })); let othersGames = []; @@ -817,7 +829,8 @@ othersGames = filtered.slice(topN).map(g => ({ name: g.name, playtime: g.playtime, - service: g.service + service: g.service, + categories: g.categories || [] })); const othersPlaytime = othersGames.reduce((sum, g) => sum + g.playtime, 0); const othersCount = othersGames.length; @@ -1013,6 +1026,12 @@ const serviceBadge = !isOthers ? `${game.service}` : ''; + const categoriesBadges = !isOthers && game.categories && game.categories.length > 0 + ? game.categories + .filter(cat => cat !== '.hidden' && cat !== 'favorite' && cat !== 'Horny') + .map(cat => `${cat}`) + .join('') + : ''; const row = document.createElement('tr'); if (isOthers) { row.className = 'others-row'; @@ -1021,7 +1040,7 @@ ${index + 1} - ${game.name}${serviceBadge} + ${game.name}${serviceBadge}${categoriesBadges} ${formatTime(game.playtime)} ${percent}% @@ -1032,13 +1051,19 @@ const detailRows = []; othersGames.forEach((otherGame, otherIndex) => { const otherPercent = ((otherGame.playtime / totalPlaytime) * 100).toFixed(1); + const otherCategoriesBadges = otherGame.categories && otherGame.categories.length > 0 + ? otherGame.categories + .filter(cat => cat !== '.hidden' && cat !== 'favorite' && cat !== 'Horny') + .map(cat => `${cat}`) + .join('') + : ''; const detailRow = document.createElement('tr'); detailRow.className = 'others-detail'; detailRow.innerHTML = ` ${index + 1}.${otherIndex + 1} ${otherGame.name} - ${otherGame.service} + ${otherGame.service}${otherCategoriesBadges} ${formatTime(otherGame.playtime)} ${otherPercent}% diff --git a/templates/neumorphism.html b/templates/neumorphism.html index 77d250a..7b60469 100644 --- a/templates/neumorphism.html +++ b/templates/neumorphism.html @@ -445,6 +445,20 @@ inset 1px 1px 2px var(--shadow-inset-dark), inset -1px -1px 2px var(--shadow-inset-light); } + .category-badge { + display: inline-block; + font-size: 10px; + padding: 3px 10px; + background: var(--bg-tertiary); + border-radius: 12px; + color: var(--accent-color); + margin-left: 4px; + text-transform: capitalize; + font-weight: 500; + box-shadow: + inset 1px 1px 2px var(--shadow-inset-dark), + inset -1px -1px 2px var(--shadow-inset-light); + } .no-data { text-align: center; @@ -845,7 +859,8 @@ const topGames = filtered.slice(0, topN).map(g => ({ name: g.name, playtime: g.playtime, - service: g.service + service: g.service, + categories: g.categories || [] })); let othersGames = []; @@ -854,7 +869,8 @@ othersGames = filtered.slice(topN).map(g => ({ name: g.name, playtime: g.playtime, - service: g.service + service: g.service, + categories: g.categories || [] })); const othersPlaytime = othersGames.reduce((sum, g) => sum + g.playtime, 0); const othersCount = othersGames.length; @@ -1050,6 +1066,12 @@ const serviceBadge = !isOthers ? `${game.service}` : ''; + const categoriesBadges = !isOthers && game.categories && game.categories.length > 0 + ? game.categories + .filter(cat => cat !== '.hidden' && cat !== 'favorite' && cat !== 'Horny') + .map(cat => `${cat}`) + .join('') + : ''; const row = document.createElement('tr'); if (isOthers) { row.className = 'others-row'; @@ -1058,7 +1080,7 @@ ${index + 1} - ${game.name}${serviceBadge} + ${game.name}${serviceBadge}${categoriesBadges} ${formatTime(game.playtime)} ${percent}% @@ -1069,13 +1091,19 @@ const detailRows = []; othersGames.forEach((otherGame, otherIndex) => { const otherPercent = ((otherGame.playtime / totalPlaytime) * 100).toFixed(1); + const otherCategoriesBadges = otherGame.categories && otherGame.categories.length > 0 + ? otherGame.categories + .filter(cat => cat !== '.hidden' && cat !== 'favorite' && cat !== 'Horny') + .map(cat => `${cat}`) + .join('') + : ''; const detailRow = document.createElement('tr'); detailRow.className = 'others-detail'; detailRow.innerHTML = ` ${index + 1}.${otherIndex + 1} ${otherGame.name} - ${otherGame.service} + ${otherGame.service}${otherCategoriesBadges} ${formatTime(otherGame.playtime)} ${otherPercent}% diff --git a/templates/platinum.html b/templates/platinum.html index 9fd5140..6aa52dc 100644 --- a/templates/platinum.html +++ b/templates/platinum.html @@ -299,6 +299,16 @@ margin-left: 6px; text-transform: capitalize; } + .category-badge { + display: inline-block; + font-size: 9px; + padding: 1px 4px; + background: #D4E4FF; + border: 1px solid #A8C8FF; + color: #2d5a9f; + margin-left: 4px; + text-transform: capitalize; + } .no-data { text-align: center; padding: 20px; @@ -680,7 +690,8 @@ const topGames = filtered.slice(0, topN).map(g => ({ name: g.name, playtime: g.playtime, - service: g.service + service: g.service, + categories: g.categories || [] })); let othersGames = []; @@ -689,7 +700,8 @@ othersGames = filtered.slice(topN).map(g => ({ name: g.name, playtime: g.playtime, - service: g.service + service: g.service, + categories: g.categories || [] })); const othersPlaytime = othersGames.reduce((sum, g) => sum + g.playtime, 0); const othersCount = othersGames.length; @@ -859,6 +871,12 @@ const serviceBadge = !isOthers ? `${game.service}` : ''; + const categoriesBadges = !isOthers && game.categories && game.categories.length > 0 + ? game.categories + .filter(cat => cat !== '.hidden' && cat !== 'favorite' && cat !== 'Horny') + .map(cat => `${cat}`) + .join('') + : ''; const row = document.createElement('tr'); if (isOthers) { row.className = 'others-row'; @@ -867,7 +885,7 @@ ${index + 1} - ${game.name}${serviceBadge} + ${game.name}${serviceBadge}${categoriesBadges} ${formatTime(game.playtime)} ${percent}% @@ -878,13 +896,19 @@ const detailRows = []; othersGames.forEach((otherGame, otherIndex) => { const otherPercent = ((otherGame.playtime / totalPlaytime) * 100).toFixed(1); + const otherCategoriesBadges = otherGame.categories && otherGame.categories.length > 0 + ? otherGame.categories + .filter(cat => cat !== '.hidden' && cat !== 'favorite' && cat !== 'Horny') + .map(cat => `${cat}`) + .join('') + : ''; const detailRow = document.createElement('tr'); detailRow.className = 'others-detail'; detailRow.innerHTML = ` ${index + 1}.${otherIndex + 1} ${otherGame.name} - ${otherGame.service} + ${otherGame.service}${otherCategoriesBadges} ${formatTime(otherGame.playtime)} ${otherPercent}%