refactorizacion leaderboard

2025-08-27 21:49:33 -06:00
parent 0877fe1448
commit 499cc02943
5 changed files with 817 additions and 393 deletions
--- a/client/src/components/DataSourceSelector.vue
+++ b/client/src/components/DataSourceSelector.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="data-source-selector glass light">
+    <div class="source-label">Fuente de datos:</div>
+    <div class="source-buttons">
+      <button 
+        class="source-btn" 
+        :class="{ active: modelValue === 'aggregated' }"
+        @click="$emit('update:modelValue', 'aggregated')"
+        title="Muestra el total histórico de todas las acciones registradas de los jugadores"
+      >
+        <span class="source-icon">📁</span>
+        Datos Agregados (Histórico)
+      </button>
+      <button 
+        class="source-btn" 
+        :class="{ active: modelValue === 'active-rooms' }"
+        @click="$emit('update:modelValue', 'active-rooms')"
+        title="Muestra solo los datos de las salas actualmente activas"
+      >
+        <span class="source-icon">🔴</span>
+        Salas Activas (Tiempo Real)
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { DataSource } from '../composables/useEventFilters';
+
+interface Props {
+  modelValue: DataSource;
+}
+
+defineProps<Props>();
+
+defineEmits<{
+  'update:modelValue': [value: DataSource];
+}>();
+</script>
+
+<style scoped>
+.glass.light { 
+  background: rgba(255, 255, 255, 0.78); 
+  border: 1px solid rgba(229, 231, 235, 0.9); 
+  box-shadow: 0 18px 50px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6); 
+  backdrop-filter: blur(18px) saturate(120%); 
+  -webkit-backdrop-filter: blur(18px) saturate(120%); 
+  border-radius: 16px; 
+}
+
+.data-source-selector {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 16px;
+  margin-bottom: 14px;
+}
+
+.source-label {
+  font-size: 14px;
+  font-weight: 700;
+  color: #334155;
+}
+
+.source-buttons {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.source-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+  background: rgba(255,255,255,0.6);
+  color: #64748b;
+  font-weight: 600;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.source-btn:hover {
+  background: rgba(255,255,255,0.9);
+  border-color: #cbd5e1;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+}
+
+.source-btn.active {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border-color: #667eea;
+  box-shadow: 0 6px 20px rgba(102,126,234,0.3);
+}
+
+.source-btn.active:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(102,126,234,0.4);
+}
+
+.source-icon {
+  font-size: 16px;
+}
+
+@media (max-width: 640px) {
+  .data-source-selector {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .source-buttons {
+    flex-direction: column;
+  }
+  
+  .source-btn {
+    justify-content: center;
+  }
+}
+</style>
--- a/client/src/components/EventChart.vue
+++ b/client/src/components/EventChart.vue
@@ -0,0 +1,309 @@
+<template>
+  <div class="panel glass">
+    <h2 class="panel-title">Eventos y comparación</h2>
+    <div v-if="loading" class="placeholder">Cargando datos…</div>
+    <div v-else class="bars big">
+      <div 
+        v-for="eventType in eventTypes" 
+        :key="eventType" 
+        class="bar-row" 
+        :class="{ highlight: highlighted === eventType }" 
+        @mouseenter="highlighted = eventType" 
+        @mouseleave="highlighted = ''"
+      >
+        <div class="bar">
+          <div 
+            class="bar-fill global shimmer" 
+            :style="{ 
+              width: globalBarWidth(eventType) + '%', 
+              background: eventStyles[eventType]?.gradient || 'linear-gradient(90deg, #94a3b8, #64748b)' 
+            }"
+          ></div>
+          <div 
+            v-if="selectedPlayerUuid" 
+            class="bar-fill player" 
+            :style="{ 
+              width: playerBarWidth(eventType) + '%', 
+              background: playerBarGradient 
+            }"
+          ></div>
+          <div 
+            class="bar-chip" 
+            :style="{ 
+              background: getEventChipBg(eventType), 
+              borderColor: getEventBorderColor(eventType) 
+            }"
+          >
+            <span class="event-icon">{{ eventStyles[eventType]?.icon || '📊' }}</span>
+            <span class="chip-label">{{ friendlyEventName(eventType) }}</span>
+            <span class="chip-count global">{{ globalValueLabel(eventType) }}</span>
+            <span v-if="selectedPlayerUuid" class="chip-count player">{{ playerValueLabel(eventType) }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="hint small">Basado en mensajes disponibles por sala. Click jugador para comparar.</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+interface Props {
+  eventTypes: string[];
+  eventStyles: Record<string, { icon: string; color: string; gradient: string }>;
+  globalEventCounts: Record<string, number>;
+  playerEventCounts: Record<string, number>;
+  selectedPlayerUuid?: string;
+  playerBarGradient: string;
+  showPercent: boolean;
+  loading?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  selectedPlayerUuid: '',
+  loading: false
+});
+
+const highlighted = ref('');
+
+// Global calculations
+const globalMax = computed(() => {
+  const vals = props.eventTypes.map(k => props.globalEventCounts[k] || 0);
+  const m = Math.max(0, ...vals);
+  return m || 1;
+});
+
+const globalTotal = computed(() => 
+  props.eventTypes.reduce((acc, k) => acc + (props.globalEventCounts[k] || 0), 0) || 1
+);
+
+function globalBarWidth(eventType: string) {
+  const v = props.globalEventCounts[eventType] || 0;
+  return Math.round((v / (props.showPercent ? globalTotal.value : globalMax.value)) * 100);
+}
+
+function globalValueLabel(eventType: string) {
+  const v = props.globalEventCounts[eventType] || 0;
+  return props.showPercent ? `${Math.round((v / globalTotal.value) * 100)}%` : String(v);
+}
+
+// Player calculations
+const playerMax = computed(() => {
+  const vals = props.eventTypes.map(k => props.playerEventCounts[k] || 0);
+  const m = Math.max(0, ...vals);
+  return m || 1;
+});
+
+const playerTotal = computed(() => 
+  props.eventTypes.reduce((acc, k) => acc + (props.playerEventCounts[k] || 0), 0) || 1
+);
+
+function playerBarWidth(eventType: string) {
+  const v = props.playerEventCounts[eventType] || 0;
+  return Math.round((v / (props.showPercent ? playerTotal.value : playerMax.value)) * 100);
+}
+
+function playerValueLabel(eventType: string) {
+  const v = props.playerEventCounts[eventType] || 0;
+  return props.showPercent ? `${Math.round((v / playerTotal.value) * 100)}%` : String(v);
+}
+
+// Styling helpers
+function getEventChipBg(eventType: string): string {
+  const style = props.eventStyles[eventType];
+  if (!style) return 'rgba(255,255,255,0.82)';
+  return `linear-gradient(135deg, ${style.color}15 0%, rgba(255,255,255,0.9) 100%)`;
+}
+
+function getEventBorderColor(eventType: string): string {
+  const style = props.eventStyles[eventType];
+  if (!style) return 'rgba(229,231,235,0.9)';
+  return `${style.color}40`;
+}
+
+function friendlyEventName(eventType: string): string {
+  const friendlyNames: Record<string, string> = {
+    p1_propose: 'Ofrecer',
+    p1_no_offer: 'No Ofrecer',
+    p2_snatch: 'Robar',
+    p2_accept: 'Aceptar Oferta',
+    p2_force: 'Forzar Oferta',
+    p2_no_force: 'No Forzar Oferta',
+    p2_reject: 'Rechazar Oferta',
+    p1_shame: 'Asignar Vergüenza',
+    p1_no_shame: 'No Asignar Vergüenza',
+    p1_report: 'Denunciar',
+    p1_no_report: 'No Denunciar',
+  };
+  return friendlyNames[eventType] || eventType;
+}
+</script>
+
+<style scoped>
+.panel { 
+  padding: 14px 16px; 
+  display: flex; 
+  flex-direction: column; 
+  flex: 1 1 auto; 
+  min-height: 0; 
+}
+
+.glass { 
+  background: rgba(255, 255, 255, 0.78); 
+  border: 1px solid rgba(229, 231, 235, 0.9); 
+  box-shadow: 0 18px 50px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6); 
+  backdrop-filter: blur(18px) saturate(120%); 
+  -webkit-backdrop-filter: blur(18px) saturate(120%); 
+  border-radius: 16px; 
+}
+
+.panel-title { 
+  margin: 0 0 10px; 
+  color: #334155; 
+}
+
+.placeholder { 
+  color: #64748b; 
+  padding: 12px; 
+  border: 1px dashed #e5e9f0; 
+  border-radius: 10px; 
+  background: #fff; 
+}
+
+.bars { 
+  display: flex; 
+  flex-direction: column; 
+  gap: 8px; 
+  flex: 1 1 auto; 
+  min-height: 0; 
+}
+
+.bars.big { 
+  height: 100%; 
+}
+
+.bars.big .bar-row { 
+  flex: 1 1 0; 
+  min-height: 36px; 
+}
+
+.bar-row { 
+  display: flex; 
+  align-items: stretch; 
+  padding: 0; 
+  background: transparent; 
+  transition: transform .18s ease; 
+}
+
+.bar-row.highlight { 
+  transform: translateX(4px); 
+}
+
+.bar { 
+  position: relative; 
+  height: 100%; 
+  background: linear-gradient(135deg, rgba(238,242,255,0.4) 0%, rgba(199,210,254,0.2) 100%); 
+  border-radius: 12px; 
+  overflow: hidden; 
+  border: 1px solid rgba(199,210,254,0.3); 
+  width: 100%; 
+}
+
+.bar-fill { 
+  position: absolute; 
+  left: 0; 
+  top: 0; 
+  height: 100%; 
+  transform-origin: left center; 
+  transition: width .65s cubic-bezier(.2,.7,.1,1); 
+  border-radius: 12px; 
+}
+
+.bar-fill.global { 
+  backdrop-filter: blur(4px); 
+  opacity: 0.75; 
+}
+
+.bar-fill.player { 
+  mix-blend-mode: normal; 
+  opacity: 0.85; 
+  backdrop-filter: blur(4px); 
+}
+
+.bar-chip { 
+  position: absolute; 
+  left: 50%; 
+  top: 50%; 
+  transform: translate(-50%, -50%); 
+  display: flex; 
+  align-items: center; 
+  gap: 6px; 
+  padding: 5px 10px; 
+  border-radius: 999px; 
+  border: 1px solid; 
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.4); 
+  backdrop-filter: blur(8px) saturate(120%); 
+  -webkit-backdrop-filter: blur(8px) saturate(120%); 
+  transition: all 0.3s ease; 
+}
+
+.bar-row:hover .bar-chip { 
+  transform: translate(-50%, -50%) scale(1.05); 
+  box-shadow: 0 6px 16px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6); 
+}
+
+.event-icon { 
+  font-size: 14px; 
+}
+
+.chip-label { 
+  font-weight: 800; 
+  color: #0f172a; 
+  letter-spacing: .1px; 
+  white-space: nowrap; 
+  font-size: 13px; 
+}
+
+.chip-count { 
+  padding: 2px 6px; 
+  border-radius: 999px; 
+  font-weight: 800; 
+  font-size: 11px; 
+  box-shadow: 0 1px 3px rgba(0,0,0,0.06); 
+  margin-left: 2px; 
+}
+
+.chip-count.global { 
+  background: rgba(255,255,255,0.7); 
+  color: #1f2937; 
+  border: 1px solid rgba(229,231,235,0.5); 
+}
+
+.chip-count.player { 
+  background: rgba(99,102,241,0.15); 
+  color: #312e81; 
+  border: 1px solid rgba(99,102,241,0.3); 
+}
+
+/* Shimmer on global bars for subtle movement */
+.shimmer::after { 
+  content: ''; 
+  position: absolute; 
+  inset: 0; 
+  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%); 
+  transform: translateX(-100%); 
+  animation: shimmer 3.2s ease-in-out infinite; 
+}
+
+@keyframes shimmer { 
+  0% { transform: translateX(-100%); } 
+  45% { transform: translateX(110%); } 
+  100% { transform: translateX(110%); } 
+}
+
+.hint.small { 
+  font-size: 12px; 
+  color: #64748b; 
+}
+</style>
--- a/client/src/components/EventFilters.vue
+++ b/client/src/components/EventFilters.vue
@@ -0,0 +1,232 @@
+<template>
+  <div class="filters-container glass light">
+    <div class="filter-group">
+      <label class="filter-label">Round:</label>
+      <div class="filter-buttons">
+        <button 
+          class="filter-btn" 
+          :class="{ active: roundFilter === 'all' }"
+          @click="$emit('update:roundFilter', 'all')"
+          title="Mostrar todas las rondas"
+        >
+          Todas
+        </button>
+        <button 
+          v-for="r in [1, 2, 3]" 
+          :key="r"
+          class="filter-btn" 
+          :class="{ active: roundFilter === r }"
+          @click="$emit('update:roundFilter', r)"
+          :title="`Mostrar solo Round ${r}`"
+        >
+          R{{ r }}
+        </button>
+      </div>
+    </div>
+    
+    <div class="filter-group">
+      <label class="filter-label">Game:</label>
+      <div class="filter-buttons">
+        <button 
+          class="filter-btn" 
+          :class="{ active: gameFilter === 'all' }"
+          @click="$emit('update:gameFilter', 'all')"
+          title="Mostrar todas las variantes"
+        >
+          Todas
+        </button>
+        <button 
+          v-for="g in ['G1', 'G2', 'G3', 'G4', 'G5']" 
+          :key="g"
+          class="filter-btn" 
+          :class="{ active: gameFilter === g }"
+          @click="$emit('update:gameFilter', g)"
+          :title="`Mostrar solo variante ${g}`"
+        >
+          {{ g }}
+        </button>
+      </div>
+    </div>
+
+    <div v-if="hasActiveFilters" class="filter-summary">
+      <span class="summary-icon">🔍</span>
+      <span class="summary-text">{{ filterSummary }}</span>
+      <button 
+        class="reset-btn" 
+        @click="$emit('resetFilters')"
+        title="Quitar todos los filtros"
+      >
+        ✕
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { RoundFilter, GameFilter } from '../composables/useEventFilters';
+
+interface Props {
+  roundFilter: RoundFilter;
+  gameFilter: GameFilter;
+  hasActiveFilters: boolean;
+  filterSummary: string;
+}
+
+defineProps<Props>();
+
+defineEmits<{
+  'update:roundFilter': [value: RoundFilter];
+  'update:gameFilter': [value: GameFilter];
+  'resetFilters': [];
+}>();
+</script>
+
+<style scoped>
+.glass.light { 
+  background: rgba(255, 255, 255, 0.78); 
+  border: 1px solid rgba(229, 231, 235, 0.9); 
+  box-shadow: 0 18px 50px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6); 
+  backdrop-filter: blur(18px) saturate(120%); 
+  -webkit-backdrop-filter: blur(18px) saturate(120%); 
+  border-radius: 16px; 
+}
+
+.filters-container {
+  display: flex;
+  gap: 20px;
+  padding: 12px 16px;
+  margin-bottom: 14px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.filter-group {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.filter-label {
+  font-size: 14px;
+  font-weight: 700;
+  color: #334155;
+  min-width: 60px;
+}
+
+.filter-buttons {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.filter-btn {
+  padding: 8px 14px;
+  border-radius: 10px;
+  border: 1px solid #e2e8f0;
+  background: rgba(255,255,255,0.6);
+  color: #64748b;
+  font-weight: 600;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  white-space: nowrap;
+}
+
+.filter-btn:hover {
+  background: rgba(255,255,255,0.9);
+  border-color: #cbd5e1;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+}
+
+.filter-btn.active {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border-color: #667eea;
+  box-shadow: 0 4px 16px rgba(102,126,234,0.3);
+}
+
+.filter-btn.active:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(102,126,234,0.4);
+}
+
+.filter-summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+  border: 1px solid #0ea5e9;
+  border-radius: 999px;
+  color: #0c4a6e;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.summary-icon {
+  font-size: 14px;
+}
+
+.summary-text {
+  white-space: nowrap;
+}
+
+.reset-btn {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(239,68,68,0.1);
+  color: #dc2626;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 800;
+  transition: all 0.2s ease;
+}
+
+.reset-btn:hover {
+  background: rgba(239,68,68,0.2);
+  transform: scale(1.1);
+}
+
+@media (max-width: 768px) {
+  .filters-container {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+  
+  .filter-group {
+    justify-content: space-between;
+  }
+  
+  .filter-buttons {
+    justify-content: flex-end;
+  }
+
+  .filter-summary {
+    justify-content: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .filter-group {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+  }
+  
+  .filter-label {
+    min-width: auto;
+    text-align: center;
+  }
+  
+  .filter-buttons {
+    justify-content: center;
+  }
+}
+</style>
--- a/client/src/composables/useEventFilters.ts
+++ b/client/src/composables/useEventFilters.ts
@@ -0,0 +1,117 @@
+import { ref, computed, watch } from 'vue';
+
+export interface DetailedEvent {
+  kind: string;
+  round?: number;
+  gameVariant?: string;
+}
+
+export type DataSource = 'aggregated' | 'active-rooms';
+export type RoundFilter = 'all' | 1 | 2 | 3;
+export type GameFilter = 'all' | 'G1' | 'G2' | 'G3' | 'G4' | 'G5';
+
+export function useEventFilters() {
+  // Filter states
+  const dataSource = ref<DataSource>('aggregated');
+  const roundFilter = ref<RoundFilter>('all');
+  const gameFilter = ref<GameFilter>('all');
+
+  // Event data stores
+  const detailedEventsAggregated = ref<DetailedEvent[]>([]);
+  const detailedEventsActiveRooms = ref<DetailedEvent[]>([]);
+  
+  // Global event counts
+  const globalEventCounts = ref<Record<string, number>>({});
+  const globalEventCountsAggregated = ref<Record<string, number>>({});
+  const globalEventCountsActiveRooms = ref<Record<string, number>>({});
+
+  // Function to apply filters and recalculate counts
+  function applyFilters(eventTypes: string[]) {
+    const sourceEvents = dataSource.value === 'aggregated' 
+      ? detailedEventsAggregated.value 
+      : detailedEventsActiveRooms.value;
+    
+    // Filter events based on round and game
+    const filteredEvents = sourceEvents.filter(event => {
+      if (roundFilter.value !== 'all' && event.round !== roundFilter.value) {
+        return false;
+      }
+      if (gameFilter.value !== 'all' && event.gameVariant !== gameFilter.value) {
+        return false;
+      }
+      return true;
+    });
+    
+    // Recalculate counts from filtered events
+    const counts: Record<string, number> = Object.fromEntries(eventTypes.map(k => [k, 0]));
+    filteredEvents.forEach(event => {
+      if (eventTypes.includes(event.kind)) {
+        counts[event.kind] = (counts[event.kind] || 0) + 1;
+      }
+    });
+    
+    globalEventCounts.value = counts;
+  }
+
+  // Update aggregated data
+  function updateAggregatedData(events: DetailedEvent[], counts: Record<string, number>) {
+    detailedEventsAggregated.value = events;
+    globalEventCountsAggregated.value = counts;
+  }
+
+  // Update active rooms data
+  function updateActiveRoomsData(events: DetailedEvent[], counts: Record<string, number>) {
+    detailedEventsActiveRooms.value = events;
+    globalEventCountsActiveRooms.value = counts;
+  }
+
+  // Reset filters
+  function resetFilters() {
+    roundFilter.value = 'all';
+    gameFilter.value = 'all';
+  }
+
+  // Computed properties
+  const currentSourceEvents = computed(() => 
+    dataSource.value === 'aggregated' ? detailedEventsAggregated.value : detailedEventsActiveRooms.value
+  );
+
+  const currentSourceCounts = computed(() => 
+    dataSource.value === 'aggregated' ? globalEventCountsAggregated.value : globalEventCountsActiveRooms.value
+  );
+
+  const hasActiveFilters = computed(() => 
+    roundFilter.value !== 'all' || gameFilter.value !== 'all'
+  );
+
+  const filterSummary = computed(() => {
+    const parts = [];
+    if (roundFilter.value !== 'all') parts.push(`Round ${roundFilter.value}`);
+    if (gameFilter.value !== 'all') parts.push(`Game ${gameFilter.value}`);
+    return parts.length > 0 ? parts.join(' + ') : 'Sin filtros';
+  });
+
+  return {
+    // State
+    dataSource,
+    roundFilter,
+    gameFilter,
+    detailedEventsAggregated,
+    detailedEventsActiveRooms,
+    globalEventCounts,
+    globalEventCountsAggregated,
+    globalEventCountsActiveRooms,
+    
+    // Methods
+    applyFilters,
+    updateAggregatedData,
+    updateActiveRoomsData,
+    resetFilters,
+    
+    // Computed
+    currentSourceEvents,
+    currentSourceCounts,
+    hasActiveFilters,
+    filterSummary
+  };
+}
--- a/client/src/views/Leaderboard.vue
+++ b/client/src/views/Leaderboard.vue
@@ -10,79 +10,17 @@
      </div>
    </div>

-    <div class="data-source-selector glass light">
-      <div class="source-label">Fuente de datos:</div>
-      <div class="source-buttons">
-        <button 
-          class="source-btn" 
-          :class="{ active: dataSource === 'aggregated' }"
-          @click="dataSource = 'aggregated'"
-          title="Muestra el total histórico de todas las acciones registradas de los jugadores"
-        >
-          <span class="source-icon">📁</span>
-          Datos Agregados (Histórico)
-        </button>
-        <button 
-          class="source-btn" 
-          :class="{ active: dataSource === 'active-rooms' }"
-          @click="dataSource = 'active-rooms'"
-          title="Muestra solo los datos de las salas actualmente activas"
-        >
-          <span class="source-icon">🔴</span>
-          Salas Activas (Tiempo Real)
-        </button>
-      </div>
-    </div>
+    <DataSourceSelector v-model="eventFilters.dataSource.value" />

-    <div class="filters-container glass light">
-      <div class="filter-group">
-        <label class="filter-label">Round:</label>
-        <div class="filter-buttons">
-          <button 
-            class="filter-btn" 
-            :class="{ active: roundFilter === 'all' }"
-            @click="roundFilter = 'all'"
-            title="Mostrar todas las rondas"
-          >
-            Todas
-          </button>
-          <button 
-            v-for="r in [1, 2, 3]" 
-            :key="r"
-            class="filter-btn" 
-            :class="{ active: roundFilter === r }"
-            @click="roundFilter = r as (1 | 2 | 3)"
-            :title="`Mostrar solo Round ${r}`"
-          >
-            R{{ r }}
-          </button>
-        </div>
-      </div>
-      
-      <div class="filter-group">
-        <label class="filter-label">Game:</label>
-        <div class="filter-buttons">
-          <button 
-            class="filter-btn" 
-            :class="{ active: gameFilter === 'all' }"
-            @click="gameFilter = 'all'"
-            title="Mostrar todas las variantes"
-          >
-            Todas
-          </button>
-          <button 
-            v-for="g in ['G1', 'G2', 'G3', 'G4', 'G5']" 
-            :key="g"
-            class="filter-btn" 
-            :class="{ active: gameFilter === g }"
-            @click="gameFilter = g as ('G1' | 'G2' | 'G3' | 'G4' | 'G5')"
-            :title="`Mostrar solo variante ${g}`"
-          >
-            {{ g }}
-          </button>
-        </div>
-      </div>
-    </div>
+    <EventFilters 
+      :round-filter="eventFilters.roundFilter.value"
+      :game-filter="eventFilters.gameFilter.value"
+      :has-active-filters="eventFilters.hasActiveFilters.value"
+      :filter-summary="eventFilters.filterSummary.value"
+      @update:round-filter="eventFilters.roundFilter.value = $event"
+      @update:game-filter="eventFilters.gameFilter.value = $event"
+      @reset-filters="eventFilters.resetFilters"
+    />

    <div class="controls glass light">
      <div class="legend">
@@ -115,38 +53,31 @@
      </div>
    </div>

-    <div class="panel glass">
-      <h2 class="panel-title">Eventos y comparación</h2>
-      <div v-if="loading" class="placeholder">Cargando datos…</div>
-      <div v-else class="bars big">
-        <div v-for="k in EVENTS" :key="k" class="bar-row" :class="{ highlight: highlighted === k }" @mouseenter="highlighted = k" @mouseleave="highlighted = ''">
-          <div class="bar">
-            <div class="bar-fill global shimmer" :style="{ width: globalBarWidth(k) + '%', background: EVENT_STYLES[k]?.gradient || 'linear-gradient(90deg, #94a3b8, #64748b)' }"></div>
-            <div v-if="selectedUuid" class="bar-fill player" :style="{ width: playerBarWidth(k) + '%', background: playerBarGradient }"></div>
-            <div class="bar-chip" :style="{ background: getEventChipBg(k), borderColor: getEventBorderColor(k) }">
-              <span class="event-icon">{{ EVENT_STYLES[k]?.icon || '📊' }}</span>
-              <span class="chip-label">{{ friendlyKind(k) }}</span>
-              <span class="chip-count global">{{ globalValueLabel(k) }}</span>
-              <span v-if="selectedUuid" class="chip-count player">{{ playerValueLabel(k) }}</span>
-            </div>
-          </div>
-        </div>
-        <div class="hint small">Basado en mensajes disponibles por sala. Click jugador para comparar.</div>
-      </div>
-    </div>
+    <EventChart 
+      :event-types="EVENTS"
+      :event-styles="EVENT_STYLES"
+      :global-event-counts="eventFilters.globalEventCounts.value"
+      :player-event-counts="playerEventCounts"
+      :selected-player-uuid="selectedUuid"
+      :player-bar-gradient="playerBarGradient"
+      :show-percent="showPercent"
+      :loading="loading"
+    />
  </div>
 </template>

 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import EventChart from '../components/EventChart.vue';
+import EventFilters from '../components/EventFilters.vue';
+import DataSourceSelector from '../components/DataSourceSelector.vue';
+import { useEventFilters } from '../composables/useEventFilters';

 interface RoomInfo { roomId: string; metadata?: any; }
 interface RoomState { players?: any[]; systemMessages?: { kind: string }[] }

 const loading = ref(false);
-const dataSource = ref<'aggregated' | 'active-rooms'>('aggregated'); // Default to aggregated data
-const roundFilter = ref<'all' | 1 | 2 | 3>('all');
-const gameFilter = ref<'all' | 'G1' | 'G2' | 'G3' | 'G4' | 'G5'>('all');
+const eventFilters = useEventFilters();
 const EVENTS = [
  'p1_propose', 'p1_no_offer',
  'p2_snatch', 'p2_accept', 'p2_force', 'p2_no_force', 'p2_reject',
@@ -167,61 +98,13 @@ const EVENT_STYLES: Record<string, { icon: string; color: string; gradient: stri
  'p1_report': { icon: '⚖️', color: '#8b5cf6', gradient: 'linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)' },
  'p1_no_report': { icon: '🤝', color: '#6b7280', gradient: 'linear-gradient(135deg, #94a3b8 0%, #64748b 100%)' }
 };
-const globalEventCounts = ref<Record<string, number>>((Object.fromEntries(EVENTS.map(k => [k, 0])) as Record<string, number>));
-const globalEventCountsAggregated = ref<Record<string, number>>((Object.fromEntries(EVENTS.map(k => [k, 0])) as Record<string, number>));
-const globalEventCountsActiveRooms = ref<Record<string, number>>((Object.fromEntries(EVENTS.map(k => [k, 0])) as Record<string, number>));
-
-// Store detailed event data with round and game info
-const detailedEventsAggregated = ref<Array<{ kind: string; round?: number; gameVariant?: string }>>([]);
-const detailedEventsActiveRooms = ref<Array<{ kind: string; round?: number; gameVariant?: string }>>([]); 
 const showPercent = ref(false);
-// Function to apply filters and recalculate counts
-function applyFilters() {
-  const sourceEvents = dataSource.value === 'aggregated' 
-    ? detailedEventsAggregated.value 
-    : detailedEventsActiveRooms.value;
-  
-  // Filter events based on round and game
-  const filteredEvents = sourceEvents.filter(event => {
-    if (roundFilter.value !== 'all' && event.round !== roundFilter.value) {
-      return false;
-    }
-    if (gameFilter.value !== 'all' && event.gameVariant !== gameFilter.value) {
-      return false;
-    }
-    return true;
-  });
-  
-  // Recalculate counts from filtered events
-  const counts: Record<string, number> = Object.fromEntries(EVENTS.map(k => [k, 0])) as any;
-  filteredEvents.forEach(event => {
-    if (EVENTS.includes(event.kind)) {
-      counts[event.kind] = (counts[event.kind] || 0) + 1;
-    }
-  });
-  
-  globalEventCounts.value = counts;
-}

 // Watch for changes in filters and data source
-watch([dataSource, roundFilter, gameFilter], () => {
-  applyFilters();
+watch([eventFilters.dataSource, eventFilters.roundFilter, eventFilters.gameFilter], () => {
+  eventFilters.applyFilters(EVENTS);
 });

-const globalMax = computed(() => {
-  const vals = EVENTS.map(k => globalEventCounts.value[k] || 0);
-  const m = Math.max(0, ...vals);
-  return m || 1;
-});
-const globalTotal = computed(() => EVENTS.reduce((acc, k) => acc + (globalEventCounts.value[k] || 0), 0) || 1);
-function globalBarWidth(k: string) {
-  const v = globalEventCounts.value[k] || 0;
-  return Math.round((v / (showPercent.value ? globalTotal.value : globalMax.value)) * 100);
-}
-function globalValueLabel(k: string) {
-  const v = globalEventCounts.value[k] || 0;
-  return showPercent.value ? `${Math.round((v / globalTotal.value) * 100)}%` : String(v);
-}
 const rooms = ref<RoomInfo[]>([]);
 const players = ref<{ uuid: string; name: string; color?: string }[]>([]);
 const search = ref('');
@@ -244,24 +127,9 @@ const playersPage = computed(() => {
 });

 const selectedUuid = ref('');
-const highlighted = ref('');
 const playerLoading = ref(false);
 const playerEventCounts = ref<Record<string, number>>((Object.fromEntries(EVENTS.map(k => [k, 0])) as Record<string, number>));
 const playersActionsByUuid = ref<Record<string, Record<string, number>>>({});
-const playerMax = computed(() => {
-  const vals = EVENTS.map(k => playerEventCounts.value[k] || 0);
-  const m = Math.max(0, ...vals);
-  return m || 1;
-});
-const playerTotal = computed(() => EVENTS.reduce((acc, k) => acc + (playerEventCounts.value[k] || 0), 0) || 1);
-function playerBarWidth(k: string) {
-  const v = playerEventCounts.value[k] || 0;
-  return Math.round((v / (showPercent.value ? playerTotal.value : playerMax.value)) * 100);
-}
-function playerValueLabel(k: string) {
-  const v = playerEventCounts.value[k] || 0;
-  return showPercent.value ? `${Math.round((v / playerTotal.value) * 100)}%` : String(v);
-}

 function initials(name: string): string {
  const n = (name || '').trim();
@@ -298,18 +166,6 @@ const playerBarGradient = computed(() => {
  return `linear-gradient(90deg, ${c}, ${c})`;
 });

-// Helper functions for event styling
-function getEventChipBg(k: string): string {
-  const style = EVENT_STYLES[k];
-  if (!style) return 'rgba(255,255,255,0.82)';
-  return `linear-gradient(135deg, ${style.color}15 0%, rgba(255,255,255,0.9) 100%)`;
-}
-
-function getEventBorderColor(k: string): string {
-  const style = EVENT_STYLES[k];
-  if (!style) return 'rgba(229,231,235,0.9)';
-  return `${style.color}40`;
-}


 const apiBase = (import.meta as any).env?.VITE_API_URL || `${window.location.protocol}//${window.location.host}/api`;
@@ -354,12 +210,11 @@ function setupStreams() {
        });
      });
      
-      globalEventCountsActiveRooms.value = counts as any;
-      detailedEventsActiveRooms.value = detailedEvents;
+      eventFilters.updateActiveRoomsData(detailedEvents, counts);
      
      // Apply filters and update display
-      if (dataSource.value === 'active-rooms') {
-        applyFilters();
+      if (eventFilters.dataSource.value === 'active-rooms') {
+        eventFilters.applyFilters(EVENTS);
      }
      // Build players list from room details (keep color if provided)
      const playerMap = new Map<string, { name: string; color?: string }>();
@@ -433,12 +288,11 @@ function setupStreams() {
      });
      
      playersActionsByUuid.value = byUuid;
-      globalEventCountsAggregated.value = aggregatedCounts;
-      detailedEventsAggregated.value = allDetailedEvents;
+      eventFilters.updateAggregatedData(allDetailedEvents, aggregatedCounts);
      
      // Apply filters and update display if viewing aggregated data
-      if (dataSource.value === 'aggregated') {
-        applyFilters();
+      if (eventFilters.dataSource.value === 'aggregated') {
+        eventFilters.applyFilters(EVENTS);
      }
      // If a player is selected, update playerEventCounts live
      if (selectedUuid.value) {
@@ -477,7 +331,7 @@ async function refreshAll() {
    const list = await fetchRooms();
    rooms.value = (list || []).filter((r: any) => r?.name === 'game');
    // reset counts
-    globalEventCounts.value = Object.fromEntries(EVENTS.map(k => [k, 0])) as Record<string, number>;
+    eventFilters.globalEventCounts.value = Object.fromEntries(EVENTS.map(k => [k, 0])) as Record<string, number>;
    const playerMap = new Map<string, { name: string; color?: string }>();

    for (const r of rooms.value) {
@@ -487,7 +341,7 @@ async function refreshAll() {
        msgs.forEach(m => {
          const k = (m?.kind || '').toString();
          if (EVENTS.includes(k)) {
-            globalEventCounts.value[k] = (globalEventCounts.value[k] || 0) + 1;
+            eventFilters.globalEventCounts.value[k] = (eventFilters.globalEventCounts.value[k] || 0) + 1;
          }
        });
        // collect players for filter
@@ -517,7 +371,7 @@ async function loadPlayerHistory() {
 onMounted(() => {
  setupStreams();
  // Initialize with aggregated data as default
-  globalEventCounts.value = { ...globalEventCountsAggregated.value };
+  eventFilters.globalEventCounts.value = { ...eventFilters.globalEventCountsAggregated.value };
 });
 onUnmounted(closeStreams);

@@ -530,23 +384,6 @@ watch(() => playersFiltered.value.length, () => {
 // Removed totals table and sorting; keep actions stream for per-player counts only
 const allPlayersActions = ref<{ uuid: string; name: string; total: number }[]>([]);

-function friendlyKind(kind: string): string {
-  const k = (kind || '').toString();
-  const map: Record<string, string> = {
-    p1_propose: 'Ofrecer',
-    p1_no_offer: 'No Ofrecer',
-    p2_snatch: 'Robar',
-    p2_accept: 'Aceptar Oferta',
-    p2_force: 'Forzar Oferta',
-    p2_no_force: 'No Forzar Oferta',
-    p2_reject: 'Rechazar Oferta',
-    p1_shame: 'Asignar Vergüenza',
-    p1_no_shame: 'No Asignar Vergüenza',
-    p1_report: 'Denunciar',
-    p1_no_report: 'No Denunciar',
-  };
-  return map[k] || k;
-}
 </script>

 <style scoped>
@@ -579,110 +416,7 @@ function friendlyKind(kind: string): string {
 .chip.clear { background:#fff; border-style:dashed; color:#334155; }
 .avatar { width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 25%, #eef2ff); display:grid; place-items:center; font-weight:900; color: color-mix(in srgb, var(--primary) 80%, #111); }

-.panel { padding: 14px 16px; display:flex; flex-direction:column; flex: 1 1 auto; min-height: 0; }
-.panel-title { margin: 0 0 10px; color:#334155; }
-.placeholder { color:#64748b; padding: 12px; border:1px dashed #e5e9f0; border-radius:10px; background:#fff; }

-.bars { display:flex; flex-direction:column; gap: 8px; flex: 1 1 auto; min-height: 0; }
-.bars.big { height: 100%; }
-.bars.big .bar-row { flex: 1 1 0; min-height: 36px; }
-.bar-row { display:flex; align-items:stretch; padding: 0; background: transparent; transition: transform .18s ease; }
-.bar-row.highlight { transform: translateX(4px); }
-
-/* Remove the chip-glass style since we're making containers transparent */
-.chip-glass { background: transparent; border: none; box-shadow: none; }
-
-.bar { position:relative; height: 100%; background: linear-gradient(135deg, rgba(238,242,255,0.4) 0%, rgba(199,210,254,0.2) 100%); border-radius: 12px; overflow: hidden; border: 1px solid rgba(199,210,254,0.3); width: 100%; }
-.bar-fill { position:absolute; left:0; top:0; height: 100%; transform-origin: left center; transition: width .65s cubic-bezier(.2,.7,.1,1); border-radius: 12px; }
-.bar-fill.global { backdrop-filter: blur(4px); opacity: 0.75; }
-.bar-fill.player { mix-blend-mode: normal; opacity: 0.85; backdrop-filter: blur(4px); }
-.bar-chip { position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); display:flex; align-items:center; gap:6px; padding:5px 10px; border-radius: 999px; border:1px solid; box-shadow: 0 4px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.4); backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); transition: all 0.3s ease; }
-.bar-row:hover .bar-chip { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 6px 16px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6); }
-.event-icon { font-size: 14px; }
-.chip-label { font-weight:800; color:#0f172a; letter-spacing:.1px; white-space: nowrap; font-size: 13px; }
-.chip-count { padding:2px 6px; border-radius:999px; font-weight:800; font-size: 11px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin-left: 2px; }
-.chip-count.global { background: rgba(255,255,255,0.7); color:#1f2937; border:1px solid rgba(229,231,235,0.5); }
-.chip-count.player { background: rgba(99,102,241,0.15); color:#312e81; border:1px solid rgba(99,102,241,0.3); }
-
-/* Shimmer on global bars for subtle movement */
-.shimmer::after { content:''; position:absolute; inset:0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%); transform: translateX(-100%); animation: shimmer 3.2s ease-in-out infinite; }
-@keyframes shimmer { 0%{ transform: translateX(-100%); } 45%{ transform: translateX(110%); } 100%{ transform: translateX(110%); } }
-
-.hint.small { font-size: 12px; color:#64748b; }
-
-/* Data Source Selector */
-.data-source-selector {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 12px 16px;
-  margin-bottom: 14px;
-}
-
-.source-label {
-  font-size: 14px;
-  font-weight: 700;
-  color: #334155;
-}
-
-.source-buttons {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.source-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
-  border-radius: 12px;
-  border: 1px solid #e2e8f0;
-  background: rgba(255,255,255,0.6);
-  color: #64748b;
-  font-weight: 600;
-  font-size: 13px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.source-btn:hover {
-  background: rgba(255,255,255,0.9);
-  border-color: #cbd5e1;
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
-}
-
-.source-btn.active {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border-color: #667eea;
-  box-shadow: 0 6px 20px rgba(102,126,234,0.3);
-}
-
-.source-btn.active:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(102,126,234,0.4);
-}
-
-.source-icon {
-  font-size: 16px;
-}
-
-@media (max-width: 640px) {
-  .data-source-selector {
-    flex-direction: column;
-    align-items: stretch;
-  }
-  
-  .source-buttons {
-    flex-direction: column;
-  }
-  
-  .source-btn {
-    justify-content: center;
-  }
-}

 /* Pagination styles */
 .pagination {
@@ -736,82 +470,6 @@ function friendlyKind(kind: string): string {
  text-align: center;
 }

-/* Filters Container */
-.filters-container {
-  display: flex;
-  gap: 20px;
-  padding: 12px 16px;
-  margin-bottom: 14px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.filter-group {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.filter-label {
-  font-size: 14px;
-  font-weight: 700;
-  color: #334155;
-  min-width: 60px;
-}
-
-.filter-buttons {
-  display: flex;
-  gap: 6px;
-  flex-wrap: wrap;
-}
-
-.filter-btn {
-  padding: 8px 14px;
-  border-radius: 10px;
-  border: 1px solid #e2e8f0;
-  background: rgba(255,255,255,0.6);
-  color: #64748b;
-  font-weight: 600;
-  font-size: 13px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  white-space: nowrap;
-}
-
-.filter-btn:hover {
-  background: rgba(255,255,255,0.9);
-  border-color: #cbd5e1;
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
-}
-
-.filter-btn.active {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border-color: #667eea;
-  box-shadow: 0 4px 16px rgba(102,126,234,0.3);
-}
-
-.filter-btn.active:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(102,126,234,0.4);
-}
-
-@media (max-width: 768px) {
-  .filters-container {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 12px;
-  }
-  
-  .filter-group {
-    justify-content: space-between;
-  }
-  
-  .filter-buttons {
-    justify-content: flex-end;
-  }
-}

@media (max-width: 480px) {
  .player-chips {
@@ -823,20 +481,5 @@ function friendlyKind(kind: string): string {
    width: 100%;
    justify-content: center;
  }
-  
-  .filter-group {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 8px;
-  }
-  
-  .filter-label {
-    min-width: auto;
-    text-align: center;
-  }
-  
-  .filter-buttons {
-    justify-content: center;
-  }
 }
 </style>