WallyHackenslacker/Lutris-Playtime-Report-Generator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add category badges to game tables in all templates

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Miguel Astor
2026-02-26 17:07:28 -04:00
parent f850e4d69c
commit 3a700c4f48
4 changed files with 119 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
templates/brutalism.html
View File

@@ -448,6 +448,18 @@
font-weight: 700; font-weight: 700;
letter-spacing: 0.5px; 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 { .no-data {
text-align: center; text-align: center;
@@ -844,7 +856,8 @@
const topGames = filtered.slice(0, topN).map(g => ({ const topGames = filtered.slice(0, topN).map(g => ({
name: g.name, name: g.name,
playtime: g.playtime, playtime: g.playtime,
service: g.service service: g.service,
categories: g.categories || []
})); }));
let othersGames = []; let othersGames = [];
@@ -853,7 +866,8 @@
othersGames = filtered.slice(topN).map(g => ({ othersGames = filtered.slice(topN).map(g => ({
name: g.name, name: g.name,
playtime: g.playtime, playtime: g.playtime,
service: g.service service: g.service,
categories: g.categories || []
})); }));
const othersPlaytime = othersGames.reduce((sum, g) => sum + g.playtime, 0); const othersPlaytime = othersGames.reduce((sum, g) => sum + g.playtime, 0);
const othersCount = othersGames.length; const othersCount = othersGames.length;
@@ -1069,6 +1083,12 @@
const serviceBadge = !isOthers const serviceBadge = !isOthers
? `<span class="service-badge">${game.service}</span>` ? `<span class="service-badge">${game.service}</span>`
: ''; : '';
const categoriesBadges = !isOthers && game.categories && game.categories.length > 0
? game.categories
.filter(cat => cat !== '.hidden' && cat !== 'favorite' && cat !== 'Horny')
.map(cat => `<span class="category-badge">${cat}</span>`)
.join('')
: '';
const row = document.createElement('tr'); const row = document.createElement('tr');
if (isOthers) { if (isOthers) {
row.className = 'others-row'; row.className = 'others-row';
@@ -1077,7 +1097,7 @@
<td>${index + 1}</td> <td>${index + 1}</td>
<td> <td>
<span class="color-box" style="background: ${colors[index]}"></span> <span class="color-box" style="background: ${colors[index]}"></span>
${game.name}${serviceBadge} ${game.name}${serviceBadge}${categoriesBadges}
</td> </td>
<td class="time">${formatTime(game.playtime)}</td> <td class="time">${formatTime(game.playtime)}</td>
<td class="percent">${percent}%</td> <td class="percent">${percent}%</td>
@@ -1088,13 +1108,19 @@
const detailRows = []; const detailRows = [];
othersGames.forEach((otherGame, otherIndex) => { othersGames.forEach((otherGame, otherIndex) => {
const otherPercent = ((otherGame.playtime / totalPlaytime) * 100).toFixed(1); 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 => `<span class="category-badge">${cat}</span>`)
.join('')
: '';
const detailRow = document.createElement('tr'); const detailRow = document.createElement('tr');
detailRow.className = 'others-detail'; detailRow.className = 'others-detail';
detailRow.innerHTML = ` detailRow.innerHTML = `
<td>${index + 1}.${otherIndex + 1}</td> <td>${index + 1}.${otherIndex + 1}</td>
<td> <td>
${otherGame.name} ${otherGame.name}
<span class="service-badge">${otherGame.service}</span> <span class="service-badge">${otherGame.service}</span>${otherCategoriesBadges}
</td> </td>
<td class="time">${formatTime(otherGame.playtime)}</td> <td class="time">${formatTime(otherGame.playtime)}</td>
<td class="percent">${otherPercent}%</td> <td class="percent">${otherPercent}%</td>

33
templates/glassmorphism.html
View File

@@ -413,6 +413,17 @@
text-transform: capitalize; text-transform: capitalize;
font-weight: 500; 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 { .no-data {
text-align: center; text-align: center;
@@ -808,7 +819,8 @@
const topGames = filtered.slice(0, topN).map(g => ({ const topGames = filtered.slice(0, topN).map(g => ({
name: g.name, name: g.name,
playtime: g.playtime, playtime: g.playtime,
service: g.service service: g.service,
categories: g.categories || []
})); }));
let othersGames = []; let othersGames = [];
@@ -817,7 +829,8 @@
othersGames = filtered.slice(topN).map(g => ({ othersGames = filtered.slice(topN).map(g => ({
name: g.name, name: g.name,
playtime: g.playtime, playtime: g.playtime,
service: g.service service: g.service,
categories: g.categories || []
})); }));
const othersPlaytime = othersGames.reduce((sum, g) => sum + g.playtime, 0); const othersPlaytime = othersGames.reduce((sum, g) => sum + g.playtime, 0);
const othersCount = othersGames.length; const othersCount = othersGames.length;
@@ -1013,6 +1026,12 @@
const serviceBadge = !isOthers const serviceBadge = !isOthers
? `<span class="service-badge">${game.service}</span>` ? `<span class="service-badge">${game.service}</span>`
: ''; : '';
const categoriesBadges = !isOthers && game.categories && game.categories.length > 0
? game.categories
.filter(cat => cat !== '.hidden' && cat !== 'favorite' && cat !== 'Horny')
.map(cat => `<span class="category-badge">${cat}</span>`)
.join('')
: '';
const row = document.createElement('tr'); const row = document.createElement('tr');
if (isOthers) { if (isOthers) {
row.className = 'others-row'; row.className = 'others-row';
@@ -1021,7 +1040,7 @@
<td>${index + 1}</td> <td>${index + 1}</td>
<td> <td>
<span class="color-box" style="background: ${colors[index]}"></span> <span class="color-box" style="background: ${colors[index]}"></span>
${game.name}${serviceBadge} ${game.name}${serviceBadge}${categoriesBadges}
</td> </td>
<td class="time">${formatTime(game.playtime)}</td> <td class="time">${formatTime(game.playtime)}</td>
<td class="percent">${percent}%</td> <td class="percent">${percent}%</td>
@@ -1032,13 +1051,19 @@
const detailRows = []; const detailRows = [];
othersGames.forEach((otherGame, otherIndex) => { othersGames.forEach((otherGame, otherIndex) => {
const otherPercent = ((otherGame.playtime / totalPlaytime) * 100).toFixed(1); 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 => `<span class="category-badge">${cat}</span>`)
.join('')
: '';
const detailRow = document.createElement('tr'); const detailRow = document.createElement('tr');
detailRow.className = 'others-detail'; detailRow.className = 'others-detail';
detailRow.innerHTML = ` detailRow.innerHTML = `
<td>${index + 1}.${otherIndex + 1}</td> <td>${index + 1}.${otherIndex + 1}</td>
<td> <td>
${otherGame.name} ${otherGame.name}
<span class="service-badge">${otherGame.service}</span> <span class="service-badge">${otherGame.service}</span>${otherCategoriesBadges}
</td> </td>
<td class="time">${formatTime(otherGame.playtime)}</td> <td class="time">${formatTime(otherGame.playtime)}</td>
<td class="percent">${otherPercent}%</td> <td class="percent">${otherPercent}%</td>

36
templates/neumorphism.html
View File

@@ -445,6 +445,20 @@
inset 1px 1px 2px var(--shadow-inset-dark), inset 1px 1px 2px var(--shadow-inset-dark),
inset -1px -1px 2px var(--shadow-inset-light); 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 { .no-data {
text-align: center; text-align: center;
@@ -845,7 +859,8 @@
const topGames = filtered.slice(0, topN).map(g => ({ const topGames = filtered.slice(0, topN).map(g => ({
name: g.name, name: g.name,
playtime: g.playtime, playtime: g.playtime,
service: g.service service: g.service,
categories: g.categories || []
})); }));
let othersGames = []; let othersGames = [];
@@ -854,7 +869,8 @@
othersGames = filtered.slice(topN).map(g => ({ othersGames = filtered.slice(topN).map(g => ({
name: g.name, name: g.name,
playtime: g.playtime, playtime: g.playtime,
service: g.service service: g.service,
categories: g.categories || []
})); }));
const othersPlaytime = othersGames.reduce((sum, g) => sum + g.playtime, 0); const othersPlaytime = othersGames.reduce((sum, g) => sum + g.playtime, 0);
const othersCount = othersGames.length; const othersCount = othersGames.length;
@@ -1050,6 +1066,12 @@
const serviceBadge = !isOthers const serviceBadge = !isOthers
? `<span class="service-badge">${game.service}</span>` ? `<span class="service-badge">${game.service}</span>`
: ''; : '';
const categoriesBadges = !isOthers && game.categories && game.categories.length > 0
? game.categories
.filter(cat => cat !== '.hidden' && cat !== 'favorite' && cat !== 'Horny')
.map(cat => `<span class="category-badge">${cat}</span>`)
.join('')
: '';
const row = document.createElement('tr'); const row = document.createElement('tr');
if (isOthers) { if (isOthers) {
row.className = 'others-row'; row.className = 'others-row';
@@ -1058,7 +1080,7 @@
<td>${index + 1}</td> <td>${index + 1}</td>
<td> <td>
<span class="color-box" style="background: ${colors[index]}"></span> <span class="color-box" style="background: ${colors[index]}"></span>
${game.name}${serviceBadge} ${game.name}${serviceBadge}${categoriesBadges}
</td> </td>
<td class="time">${formatTime(game.playtime)}</td> <td class="time">${formatTime(game.playtime)}</td>
<td class="percent">${percent}%</td> <td class="percent">${percent}%</td>
@@ -1069,13 +1091,19 @@
const detailRows = []; const detailRows = [];
othersGames.forEach((otherGame, otherIndex) => { othersGames.forEach((otherGame, otherIndex) => {
const otherPercent = ((otherGame.playtime / totalPlaytime) * 100).toFixed(1); 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 => `<span class="category-badge">${cat}</span>`)
.join('')
: '';
const detailRow = document.createElement('tr'); const detailRow = document.createElement('tr');
detailRow.className = 'others-detail'; detailRow.className = 'others-detail';
detailRow.innerHTML = ` detailRow.innerHTML = `
<td>${index + 1}.${otherIndex + 1}</td> <td>${index + 1}.${otherIndex + 1}</td>
<td> <td>
${otherGame.name} ${otherGame.name}
<span class="service-badge">${otherGame.service}</span> <span class="service-badge">${otherGame.service}</span>${otherCategoriesBadges}
</td> </td>
<td class="time">${formatTime(otherGame.playtime)}</td> <td class="time">${formatTime(otherGame.playtime)}</td>
<td class="percent">${otherPercent}%</td> <td class="percent">${otherPercent}%</td>

32
templates/platinum.html
View File

@@ -299,6 +299,16 @@
margin-left: 6px; margin-left: 6px;
text-transform: capitalize; 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 { .no-data {
text-align: center; text-align: center;
padding: 20px; padding: 20px;
@@ -680,7 +690,8 @@
const topGames = filtered.slice(0, topN).map(g => ({ const topGames = filtered.slice(0, topN).map(g => ({
name: g.name, name: g.name,
playtime: g.playtime, playtime: g.playtime,
service: g.service service: g.service,
categories: g.categories || []
})); }));
let othersGames = []; let othersGames = [];
@@ -689,7 +700,8 @@
othersGames = filtered.slice(topN).map(g => ({ othersGames = filtered.slice(topN).map(g => ({
name: g.name, name: g.name,
playtime: g.playtime, playtime: g.playtime,
service: g.service service: g.service,
categories: g.categories || []
})); }));
const othersPlaytime = othersGames.reduce((sum, g) => sum + g.playtime, 0); const othersPlaytime = othersGames.reduce((sum, g) => sum + g.playtime, 0);
const othersCount = othersGames.length; const othersCount = othersGames.length;
@@ -859,6 +871,12 @@
const serviceBadge = !isOthers const serviceBadge = !isOthers
? `<span class="service-badge">${game.service}</span>` ? `<span class="service-badge">${game.service}</span>`
: ''; : '';
const categoriesBadges = !isOthers && game.categories && game.categories.length > 0
? game.categories
.filter(cat => cat !== '.hidden' && cat !== 'favorite' && cat !== 'Horny')
.map(cat => `<span class="category-badge">${cat}</span>`)
.join('')
: '';
const row = document.createElement('tr'); const row = document.createElement('tr');
if (isOthers) { if (isOthers) {
row.className = 'others-row'; row.className = 'others-row';
@@ -867,7 +885,7 @@
<td>${index + 1}</td> <td>${index + 1}</td>
<td> <td>
<span class="color-box" style="background: ${colors[index]}"></span> <span class="color-box" style="background: ${colors[index]}"></span>
${game.name}${serviceBadge} ${game.name}${serviceBadge}${categoriesBadges}
</td> </td>
<td class="time">${formatTime(game.playtime)}</td> <td class="time">${formatTime(game.playtime)}</td>
<td class="percent">${percent}%</td> <td class="percent">${percent}%</td>
@@ -878,13 +896,19 @@
const detailRows = []; const detailRows = [];
othersGames.forEach((otherGame, otherIndex) => { othersGames.forEach((otherGame, otherIndex) => {
const otherPercent = ((otherGame.playtime / totalPlaytime) * 100).toFixed(1); 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 => `<span class="category-badge">${cat}</span>`)
.join('')
: '';
const detailRow = document.createElement('tr'); const detailRow = document.createElement('tr');
detailRow.className = 'others-detail'; detailRow.className = 'others-detail';
detailRow.innerHTML = ` detailRow.innerHTML = `
<td>${index + 1}.${otherIndex + 1}</td> <td>${index + 1}.${otherIndex + 1}</td>
<td> <td>
${otherGame.name} ${otherGame.name}
<span class="service-badge">${otherGame.service}</span> <span class="service-badge">${otherGame.service}</span>${otherCategoriesBadges}
</td> </td>
<td class="time">${formatTime(otherGame.playtime)}</td> <td class="time">${formatTime(otherGame.playtime)}</td>
<td class="percent">${otherPercent}%</td> <td class="percent">${otherPercent}%</td>