refactorizacion leaderboard

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>

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>

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>