-
By Category
-
-
-
-
- | # |
- Category |
- Playtime |
- % |
-
-
-
-
+
+
+
Top Games
+
By Category
+
+
+
+
+
+
+
+ | # |
+ Game |
+ Playtime |
+ % |
+
+
+
+
+
+
+
+
+
+
+
+ | # |
+ Category |
+ Playtime |
+ % |
+
+
+
+
+
+
@@ -314,14 +527,13 @@ HTML_TEMPLATE = """
const allGames = __ALL_GAMES__;
const topN = __TOP_N__;
- // Colors for the chart
+ // Mac OS 9 inspired colors
const colors = [
- '#ff6384', '#36a2eb', '#ffce56', '#4bc0c0', '#9966ff',
- '#ff9f40', '#ff6384', '#c9cbcf', '#7bc043', '#ee4035',
- '#808080'
+ '#336699', '#993366', '#669933', '#CC6633', '#663399',
+ '#339966', '#996633', '#336666', '#993333', '#666699',
+ '#888888'
];
- // Format hours to "Xh Ym" format
function formatTime(hours) {
const h = Math.floor(hours);
const m = Math.round((hours - h) * 60);
@@ -330,7 +542,6 @@ HTML_TEMPLATE = """
return h + 'h ' + m + 'm';
}
- // Get unique services and their counts
function getServices() {
const services = {};
allGames.forEach(g => {
@@ -344,7 +555,6 @@ HTML_TEMPLATE = """
.map(([name, data]) => ({ name, ...data }));
}
- // Build filter checkboxes
const services = getServices();
const filtersDiv = document.getElementById('filters');
services.forEach(service => {
@@ -358,11 +568,9 @@ HTML_TEMPLATE = """
filtersDiv.appendChild(label);
});
- // Chart instance
let chart = null;
const ctx = document.getElementById('playtime-chart').getContext('2d');
- // Get selected services
function getSelectedServices() {
const checkboxes = filtersDiv.querySelectorAll('input[type="checkbox"]');
return Array.from(checkboxes)
@@ -370,7 +578,6 @@ HTML_TEMPLATE = """
.map(cb => cb.value);
}
- // Filter and aggregate data
function getFilteredData(selectedServices) {
const filtered = allGames
.filter(g => selectedServices.includes(g.service))
@@ -383,17 +590,14 @@ HTML_TEMPLATE = """
const totalPlaytime = filtered.reduce((sum, g) => sum + g.playtime, 0);
const totalGames = filtered.length;
- // Get top N games
const topGames = filtered.slice(0, topN).map(g => ({
name: g.name,
playtime: g.playtime,
service: g.service
}));
- // Games in "Others" category
let othersGames = [];
- // Add "Others" if needed
if (filtered.length > topN) {
othersGames = filtered.slice(topN).map(g => ({
name: g.name,
@@ -409,7 +613,6 @@ HTML_TEMPLATE = """
});
}
- // Aggregate by category
const categoryMap = {};
filtered.forEach(g => {
if (g.categories && g.categories.length > 0) {
@@ -429,16 +632,13 @@ HTML_TEMPLATE = """
return { chartData: topGames, othersGames, categoriesData, totalPlaytime, totalGames };
}
- // Update the display
function updateDisplay() {
const selectedServices = getSelectedServices();
const { chartData, othersGames, categoriesData, totalPlaytime, totalGames } = getFilteredData(selectedServices);
- // Update stats
document.getElementById('total-games').textContent = totalGames;
document.getElementById('total-time').textContent = formatTime(totalPlaytime);
- // Update chart
if (chart) {
chart.destroy();
}
@@ -458,8 +658,8 @@ HTML_TEMPLATE = """
datasets: [{
data: chartData.map(g => g.playtime),
backgroundColor: colors.slice(0, chartData.length),
- borderColor: '#1a1a2e',
- borderWidth: 2
+ borderColor: '#FFFFFF',
+ borderWidth: 1
}]
},
options: {
@@ -468,8 +668,12 @@ HTML_TEMPLATE = """
legend: {
position: 'bottom',
labels: {
- color: '#eee',
- padding: 15
+ color: '#000000',
+ font: {
+ family: "'Charcoal', 'Chicago', Geneva, sans-serif",
+ size: 10
+ },
+ padding: 10
}
},
tooltip: {
@@ -485,7 +689,6 @@ HTML_TEMPLATE = """
}
});
- // Update table
const tbody = document.getElementById('games-table');
tbody.innerHTML = '';
chartData.forEach((game, index) => {
@@ -509,7 +712,6 @@ HTML_TEMPLATE = """
`;
tbody.appendChild(row);
- // Add expandable rows for "Others"
if (isOthers && othersGames.length > 0) {
const detailRows = [];
othersGames.forEach((otherGame, otherIndex) => {
@@ -529,7 +731,6 @@ HTML_TEMPLATE = """
detailRows.push(detailRow);
});
- // Toggle expand/collapse on click
row.addEventListener('click', () => {
row.classList.toggle('expanded');
detailRows.forEach(dr => dr.classList.toggle('visible'));
@@ -537,7 +738,6 @@ HTML_TEMPLATE = """
}
});
- // Update categories table
const catTbody = document.getElementById('categories-table');
catTbody.innerHTML = '';
if (categoriesData.length === 0) {
@@ -557,27 +757,42 @@ HTML_TEMPLATE = """
}
}
- // Listen for filter changes
filtersDiv.addEventListener('change', updateDisplay);
-
- // Initial render
updateDisplay();
+
+ // Tab switching
+ document.querySelectorAll('.tab').forEach(tab => {
+ tab.addEventListener('click', () => {
+ const tabId = tab.dataset.tab;
+ document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+ tab.classList.add('active');
+ document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
+ document.getElementById('tab-' + tabId).classList.add('active');
+ });
+ });