Adds Player’s Folk Repertoire

Author: Albert Rigo

assets/css/campaign-stats.css

@@ -563,6 +563,101 @@ body.dark-mode .player-class-heatmap-table thead th.obsolete-class > span,
   transition: all 0.15s;
 }
 
+/* Player Folk Heatmap (Player's Folk Repertoire) */
+.player-folk-heatmap-table {
+  border-collapse: collapse;
+  font-size: 0.8rem;
+  width: 100%;
+  background: #ffffff;
+}
+
+.player-folk-heatmap-table th,
+.player-folk-heatmap-table td {
+  padding: 0.4rem 0.5rem;
+  text-align: center;
+  border: 1px solid #e2e8f0;
+}
+
+body.dark-mode .player-folk-heatmap-table,
+.dark-mode .player-folk-heatmap-table {
+  background: #1e293b;
+}
+
+body.dark-mode .player-folk-heatmap-table th,
+body.dark-mode .player-folk-heatmap-table td,
+.dark-mode .player-folk-heatmap-table th,
+.dark-mode .player-folk-heatmap-table td {
+  border-color: #4a5568;
+}
+
+.player-folk-heatmap-table thead th {
+  background-color: #f7fafc;
+  font-weight: 600;
+  font-size: 0.75rem;
+  white-space: nowrap;
+  height: 120px;
+  vertical-align: bottom;
+  padding: 0;
+  position: relative;
+}
+
+.player-folk-heatmap-table thead th:first-child {
+  height: auto;
+  padding: 0.4rem 0.5rem;
+  vertical-align: middle;
+}
+
+.player-folk-heatmap-table thead th > span {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  display: inline-block;
+  padding: 8px 0;
+}
+
+body.dark-mode .player-folk-heatmap-table thead th,
+.dark-mode .player-folk-heatmap-table thead th {
+  background-color: #2d3748;
+  color: #e2e8f0;
+}
+
+.player-folk-heatmap-table .player-name {
+  text-align: left;
+  font-weight: 600;
+  white-space: nowrap;
+  background-color: #f8f9fa;
+  border-right: 2px solid #cbd5e0;
+}
+
+.player-folk-heatmap-table tbody tr:hover td {
+  background-color: rgba(102, 126, 234, 0.1);
+}
+
+.player-folk-heatmap-table tbody tr:hover td.player-name {
+  background-color: rgba(102, 126, 234, 0.15);
+}
+
+body.dark-mode .player-folk-heatmap-table .player-name,
+.dark-mode .player-folk-heatmap-table .player-name {
+  background-color: #334155;
+  color: #e2e8f0;
+  border-right-color: #64748b;
+}
+
+body.dark-mode .player-folk-heatmap-table tbody tr:hover td,
+.dark-mode .player-folk-heatmap-table tbody tr:hover td {
+  background-color: rgba(102, 126, 234, 0.2);
+}
+
+body.dark-mode .player-folk-heatmap-table tbody tr:hover td.player-name,
+.dark-mode .player-folk-heatmap-table tbody tr:hover td.player-name {
+  background-color: rgba(102, 126, 234, 0.25);
+}
+
+.player-folk-heatmap-table tbody td {
+  font-weight: 500;
+  transition: all 0.15s;
+}
+
 .player-class-heatmap-table tbody td:hover {
   transform: scale(1.05);
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);

assets/js/campaign-data.js

@@ -10,8 +10,8 @@
   'use strict';
 
   // Cache configuration
-  const CACHE_KEY = 'campaign_data_v14';
-  const CACHE_TIMESTAMP_KEY = 'campaign_timestamp_v14';
+  const CACHE_KEY = 'campaign_data_v15';
+  const CACHE_TIMESTAMP_KEY = 'campaign_timestamp_v15';
   const CACHE_DURATION = 1 * 60 * 60 * 1000; // 1 hour
 
   // Google Sheets URL
@@ -101,6 +101,7 @@
           end: getDateByColumn(row, charCols, 'end'),
           class: getValueByColumn(row, charCols, 'class') || '',
           class2: getValueByColumn(row, charCols, 'class2') || '',
+          race: getValueByColumn(row, charCols, 'race') || '',
           specialization: getValueByColumn(row, charCols, 'specialization') || '',
           specialization2: getValueByColumn(row, charCols, 'specialization2') || '',
           killer: getValueByColumn(row, charCols, 'killer') || '',

assets/js/campaign-stats.js

@@ -301,6 +301,7 @@ function renderCharts() {
   renderPlayerDeathRate();
   renderPlayerCampaignDiversity();
   renderPlayerClassHeatmap();
+  renderPlayerFolkHeatmap();
 
   // Add event listener for killer detail toggle
   const killerToggle = document.getElementById('killer-detail-toggle');
@@ -2047,7 +2048,8 @@ function renderPlayerClassHeatmap() {
     const charInfo = {
       name: charName,
       path: char.path,
-      classes: classDisplay
+      classes: classDisplay,
+      race: char.race || ''
     };
 
     // Count this character for each of their classes
@@ -2117,7 +2119,127 @@ function renderPlayerClassHeatmap() {
       if (count) {
         const chars = playerClassCharacters[player][cls] || [];
         const charList = chars
-          .map(c => `Path ${c.path}: ${c.name} (${c.classes})`)
+          .map(c => `Path ${c.path}: ${c.name} (${c.classes})${c.race ? ' - ' + c.race : ''}`)
+          .join('\n');
+        title = charList;
+      }
+      html += `<td style="background-color: ${color}; color: ${textColor};" title="${title}">${count || ''}</td>`;
+    });
+    html += '</tr>';
+  });
+
+  html += '</tbody></table>';
+  container.innerHTML = html;
+}
+
+// Render player folk heatmap (Player's Folk Repertoire)
+function renderPlayerFolkHeatmap() {
+  const container = document.getElementById('player-folk-heatmap');
+  if (!container) return;
+
+  // Helper to extract base folk from "FOLK (SUBFOLK)" format
+  const getBaseFolk = (race) => {
+    if (!race) return '';
+    const match = race.match(/^([^(]+)/);
+    return match ? match[1].trim() : race;
+  };
+
+  // Get all unique base folk (without subfolk)
+  const baseFolkSet = new Set();
+  characterData.forEach(c => {
+    if (c.race) baseFolkSet.add(getBaseFolk(c.race));
+  });
+  const allBaseFolk = [...baseFolkSet].sort();
+
+  // Count characters per player per base folk AND collect character details
+  const playerFolkData = {};
+  const playerFolkCharacters = {}; // Store character details
+
+  characterData.forEach(char => {
+    const player = char.category || 'Unknown';
+    const fullRace = char.race;
+    if (!fullRace) return;
+
+    const baseFolk = getBaseFolk(fullRace);
+
+    if (!playerFolkData[player]) {
+      playerFolkData[player] = {};
+      playerFolkCharacters[player] = {};
+    }
+
+    if (!playerFolkData[player][baseFolk]) {
+      playerFolkData[player][baseFolk] = 0;
+      playerFolkCharacters[player][baseFolk] = [];
+    }
+
+    // Store full character details including full race with subfolk
+    const charName = char.shortname || char.name || 'Unknown';
+    const classDisplay = char.class2 ? `${char.class}/${char.class2}` : char.class;
+    const charInfo = {
+      name: charName,
+      path: char.path,
+      classes: classDisplay,
+      race: fullRace
+    };
+
+    playerFolkData[player][baseFolk]++;
+    playerFolkCharacters[player][baseFolk].push(charInfo);
+  });
+
+  // Get top 15 players by total characters
+  const topPlayers = Object.entries(playerFolkData)
+    .map(([player, folk]) => ({
+      player,
+      total: Object.values(folk).reduce((sum, count) => sum + count, 0),
+      folk
+    }))
+    .sort((a, b) => b.total - a.total)
+    .slice(0, 15);
+
+  // Detect dark mode
+  const isDarkMode = document.documentElement.classList.contains('dark-mode');
+
+  // Find max count for color scaling
+  const maxCount = Math.max(...topPlayers.flatMap(p => Object.values(p.folk)));
+
+  // Helper to get color intensity (matching Level Duration Analysis style)
+  const getColorIntensity = (count) => {
+    if (!count) return isDarkMode ? '#334155' : '#f8f9fa'; // Empty cells match first column
+    const normalized = count / maxCount;
+
+    if (isDarkMode) {
+      // Dark mode: cyan to orange heat map
+      const hue = 200 - (normalized * 85); // 200 (cyan) to 30 (orange)
+      const saturation = 65 + (normalized * 15); // 65% to 80%
+      const lightness = 35 + (normalized * 15); // 35% to 50%
+      return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+    } else {
+      // Light mode: blue gradient
+      const hue = 210; // Blue
+      const lightness = 85 - (normalized * 30); // 85% to 55%
+      return `hsl(${hue}, 80%, ${lightness}%)`;
+    }
+  };
+
+  // Build HTML table
+  let html = '<table class="player-folk-heatmap-table"><thead><tr><th>Player</th>';
+  allBaseFolk.forEach(folk => {
+    html += `<th><span>${folk}</span></th>`;
+  });
+  html += '</tr></thead><tbody>';
+
+  const textColor = isDarkMode ? 'rgba(255, 255, 255, 0.95)' : 'rgba(0, 0, 0, 0.87)';
+
+  topPlayers.forEach(({ player, folk }) => {
+    html += `<tr><td class="player-name" style="border-left: 4px solid ${window.CampaignData.getPlayerColor(player).replace('0.7', '1')}">${player}</td>`;
+    allBaseFolk.forEach(f => {
+      const count = folk[f] || 0;
+      const color = getColorIntensity(count);
+      let title = '';
+      if (count) {
+        const chars = playerFolkCharacters[player][f] || [];
+        const charList = chars
+          .map(c => `Path ${c.path}: ${c.name} (${c.classes}) - ${c.race}`)
           .join('\n');
         title = charList;
       }
@@ -2148,4 +2270,10 @@ window.addEventListener('darkModeChanged', function(event) {
     console.log('[CAMPAIGN-STATS] Re-rendering Player Class Heatmap');
     renderPlayerClassHeatmap();
   }
+
+  // Re-render Player Folk Heatmap
+  if (typeof characterData !== 'undefined' && characterData.length > 0) {
+    console.log('[CAMPAIGN-STATS] Re-rendering Player Folk Heatmap');
+    renderPlayerFolkHeatmap();
+  }
 });

docs/_CampaignStats/overview.md

@@ -179,7 +179,12 @@ Average real-world days spent at each character level across all campaigns. Each
 #### Player's Class Repertoire
 
 Which classes has each player explored?
+*Note: Classes marked with * are retired/obsolete and aren't currently available for new characters.*
 
 <div id="player-class-heatmap" class="heatmap-container"></div>
 
-*Note: Classes marked with * are retired/obsolete and aren't currently available for new characters.*
+#### Player's Folk Repertoire
+
+Which folk/races has each player explored?
+
+<div id="player-folk-heatmap" class="heatmap-container"></div>