Top Games
By Category
@@ -718,11 +148,11 @@
themeIcon.className = 'icon icon-auto';
themeToggle.title = 'Theme: Auto (click to change)';
} else if (theme === 'light') {
- themeIcon.textContent = '☀️';
+ themeIcon.textContent = '\u2600\uFE0F';
themeIcon.className = 'icon';
themeToggle.title = 'Theme: Light (click to change)';
} else {
- themeIcon.textContent = '🌙';
+ themeIcon.textContent = '\uD83C\uDF19';
themeIcon.className = 'icon';
themeToggle.title = 'Theme: Dark (click to change)';
}
@@ -765,11 +195,8 @@
const allGames = __ALL_GAMES__;
const topN = __TOP_N__;
- const colors = [
- '#6366f1', '#8b5cf6', '#ec4899', '#f43f5e', '#f97316',
- '#eab308', '#22c55e', '#14b8a6', '#06b6d4', '#3b82f6',
- '#64748b'
- ];
+ // Theme-specific configuration
+ const themeConfig = __THEME_CONFIG__;
function formatTime(hours) {
const h = Math.floor(hours);
@@ -890,9 +317,16 @@
function getChartTextColor() {
const theme = themes[currentThemeIndex];
- if (theme === 'dark') return '#f0f0f5';
- if (theme === 'light') return '#1a1a2e';
- return getSystemTheme() === 'dark' ? '#f0f0f5' : '#1a1a2e';
+ if (theme === 'dark') return themeConfig.textColorDark;
+ if (theme === 'light') return themeConfig.textColorLight;
+ return getSystemTheme() === 'dark' ? themeConfig.textColorDark : themeConfig.textColorLight;
+ }
+
+ function getChartBorderColor() {
+ const theme = themes[currentThemeIndex];
+ if (theme === 'dark') return themeConfig.borderColorDark;
+ if (theme === 'light') return themeConfig.borderColorLight;
+ return getSystemTheme() === 'dark' ? themeConfig.borderColorDark : themeConfig.borderColorLight;
}
function updateChartColors() {
@@ -932,6 +366,7 @@
}
const textColor = getChartTextColor();
+ const borderColor = getChartBorderColor();
chart = new Chart(ctx, {
type: 'doughnut',
@@ -939,9 +374,9 @@
labels: chartData.map(g => g.name),
datasets: [{
data: chartData.map(g => g.playtime),
- backgroundColor: colors.slice(0, chartData.length),
- borderColor: 'rgba(255, 255, 255, 0.2)',
- borderWidth: 2
+ backgroundColor: themeConfig.colors.slice(0, chartData.length),
+ borderColor: borderColor,
+ borderWidth: themeConfig.borderWidth
}]
},
options: {
@@ -952,29 +387,34 @@
labels: {
color: textColor,
font: {
- family: "'Inter', sans-serif",
- size: 11
+ family: themeConfig.fontFamily,
+ size: 11,
+ weight: themeConfig.fontWeight
},
padding: 12,
usePointStyle: true,
- pointStyle: 'circle'
+ pointStyle: themeConfig.pointStyle
}
},
tooltip: {
- backgroundColor: 'rgba(0, 0, 0, 0.8)',
- titleFont: { weight: 'bold' },
- bodyFont: { weight: 'normal' },
- cornerRadius: 8,
+ backgroundColor: themeConfig.tooltipBg,
+ titleColor: themeConfig.tooltipTitleColor,
+ bodyColor: themeConfig.tooltipBodyColor,
+ borderColor: themeConfig.tooltipBorderColor,
+ borderWidth: themeConfig.tooltipBorderWidth,
+ titleFont: { weight: 'bold', family: themeConfig.fontFamily },
+ bodyFont: { weight: 'normal', family: themeConfig.fontFamily },
+ cornerRadius: themeConfig.tooltipCornerRadius,
padding: 12,
callbacks: {
title: function(context) {
- return context[0].label;
+ return themeConfig.uppercaseTooltip ? context[0].label.toUpperCase() : context[0].label;
},
beforeBody: function(context) {
const index = context[0].dataIndex;
const service = chartData[index].service;
if (service && service !== 'others') {
- return service.charAt(0).toUpperCase() + service.slice(1);
+ return themeConfig.uppercaseTooltip ? service.toUpperCase() : service.charAt(0).toUpperCase() + service.slice(1);
}
return '';
},
@@ -1010,9 +450,9 @@
labels: categoriesChartData.map(c => c.name),
datasets: [{
data: categoriesChartData.map(c => c.playtime),
- backgroundColor: colors.slice(0, categoriesChartData.length),
- borderColor: 'rgba(255, 255, 255, 0.2)',
- borderWidth: 2
+ backgroundColor: themeConfig.colors.slice(0, categoriesChartData.length),
+ borderColor: borderColor,
+ borderWidth: themeConfig.borderWidth
}]
},
options: {
@@ -1023,18 +463,25 @@
labels: {
color: textColor,
font: {
- family: "'Inter', sans-serif",
- size: 11
+ family: themeConfig.fontFamily,
+ size: 11,
+ weight: themeConfig.fontWeight
},
padding: 12,
usePointStyle: true,
- pointStyle: 'circle'
+ pointStyle: themeConfig.pointStyle
}
},
tooltip: {
- backgroundColor: 'rgba(0, 0, 0, 0.8)',
- cornerRadius: 8,
+ backgroundColor: themeConfig.tooltipBg,
+ titleColor: themeConfig.tooltipTitleColor,
+ bodyColor: themeConfig.tooltipBodyColor,
+ borderColor: themeConfig.tooltipBorderColor,
+ borderWidth: themeConfig.tooltipBorderWidth,
+ cornerRadius: themeConfig.tooltipCornerRadius,
padding: 12,
+ titleFont: { family: themeConfig.fontFamily },
+ bodyFont: { family: themeConfig.fontFamily },
callbacks: {
label: function(context) {
const value = context.raw;
@@ -1069,7 +516,7 @@
row.innerHTML = `
${index + 1} |
-
+
${game.name}${serviceBadge}${categoriesBadges}
|
${formatTime(game.playtime)} |
@@ -1123,7 +570,7 @@
row.innerHTML = `
${index + 1} |
-
+
${cat.name} ${cat.gameCount} games
|
${formatTime(cat.playtime)} |
@@ -1142,7 +589,7 @@
othersRow.innerHTML = `
${othersIndex + 1} |
-
+
Others (${otherCategories.length} categories)
|
${formatTime(othersPlaytime)} |
@@ -1188,7 +635,7 @@
row.innerHTML = `
${index + 1} |
-
+
${runner.name} ${runner.gameCount} games
|
${formatTime(runner.playtime)} |
@@ -1207,7 +654,7 @@
othersRow.innerHTML = `
${othersIndex + 1} |
-
+
Others (${otherRunners.length} runners)
|
${formatTime(othersPlaytime)} |
diff --git a/templates/neumorphism.html b/templates/neumorphism.html
deleted file mode 100644
index 6712ba5..0000000
--- a/templates/neumorphism.html
+++ /dev/null
@@ -1,1319 +0,0 @@
-
-
-
-
-
-
Lutris Playtime Report
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
__TOTAL_LIBRARY__
-
Games in Library
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Top Games
-
By Category
-
By Runner
-
-
-
-
-
-
-
- | # |
- Game |
- Playtime |
- % |
-
-
-
-
-
-
-
-
-
-
-
- | # |
- Category |
- Playtime |
- % |
-
-
-
-
-
-
-
-
-
-
-
- | # |
- Runner |
- Playtime |
- % |
-
-
-
-
-
-
-
-
-
-
-
-
-