From f170a522c98bce4e3a6f4fad1d94b5d47feb14d9 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Fri, 29 Aug 2025 12:06:42 -0600
Subject: [PATCH] filtros UI/UX mejorado

---
 client/src/components/EventFilters.vue |  71 ++------
 client/src/views/Leaderboard.vue       | 214 +++++++++++++++++--------
 2 files changed, 163 insertions(+), 122 deletions(-)

diff --git a/client/src/components/EventFilters.vue b/client/src/components/EventFilters.vue
index 50ba92b..2227626 100644
--- a/client/src/components/EventFilters.vue
+++ b/client/src/components/EventFilters.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="filters-container glass light">
+  <div class="filters-container" :class="{ compact }">
     <div class="filter-group">
       <label class="filter-label">Ronda:</label>
       <div class="filter-buttons">
@@ -70,9 +70,10 @@ interface Props {
   gameFilter: GameFilterMulti;
   hasActiveFilters: boolean;
   filterSummary: string;
+  compact?: boolean;
 }
 
-defineProps<Props>();
+withDefaults(defineProps<Props>(), { compact: false });
 
 defineEmits<{
   'update:roundFilter': [value: RoundFilterMulti];
@@ -82,36 +83,26 @@ defineEmits<{
 </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;
+  gap: 12px;
+  padding: 0;
+  margin: 0;
   align-items: center;
   flex-wrap: wrap;
 }
 
+.filters-container.compact {
+  gap: 8px;
+}
+
 .filter-group {
   display: flex;
   align-items: center;
   gap: 12px;
 }
 
-.filter-label {
-  font-size: 14px;
-  font-weight: 700;
-  color: #334155;
-  min-width: 60px;
-}
+.filter-label { font-size: 13px; font-weight: 700; color: #334155; min-width: 52px; }
 
 .filter-buttons {
   display: flex;
@@ -120,13 +111,13 @@ defineEmits<{
 }
 
 .filter-btn {
-  padding: 8px 14px;
+  padding: 6px 10px;
   border-radius: 10px;
   border: 1px solid #e2e8f0;
   background: rgba(255,255,255,0.6);
   color: #64748b;
-  font-weight: 600;
-  font-size: 13px;
+  font-weight: 700;
+  font-size: 12px;
   cursor: pointer;
   transition: all 0.3s ease;
   white-space: nowrap;
@@ -151,18 +142,7 @@ defineEmits<{
   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;
-}
+.filter-summary { display: none; }
 
 .summary-icon {
   font-size: 14px;
@@ -172,26 +152,7 @@ defineEmits<{
   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);
-}
+.reset-btn { display: none; }
 
 @media (max-width: 768px) {
   .filters-container {
diff --git a/client/src/views/Leaderboard.vue b/client/src/views/Leaderboard.vue
index f021f09..82ff646 100644
--- a/client/src/views/Leaderboard.vue
+++ b/client/src/views/Leaderboard.vue
@@ -1,13 +1,14 @@
 <template>
   <div class="leaderboard light">
     <div class="header glass light">
-      <div class="header-left">
+      <div class="header-row">
+        <div class="header-left">
         <button class="btn-back" @click="goHome" title="Volver al inicio">
           ← <span class="label">Inicio</span>
         </button>
         <h1><GameLogo size="medium" /> Estadísticas</h1>
-      </div>
-      <div class="actions">
+        </div>
+        <div class="actions">
         <button class="btn-collapse" @click="filtersCollapsed = !filtersCollapsed" :title="filtersCollapsed ? 'Mostrar filtros' : 'Ocultar filtros'">
           <span class="collapse-icon" :class="{ rotated: filtersCollapsed }">▼</span>
           <span class="collapse-text">{{ filtersCollapsed ? 'Mostrar filtros' : 'Ocultar filtros' }}</span>
@@ -15,20 +16,39 @@
         <button class="btn" @click="downloadJSON" :disabled="loading" title="Descargar datos actuales como JSON">
           📊 <span class="label">JSON</span>
         </button>
+        </div>
+      </div>
+      <div class="header-markers filters-indicators">
+        <span class="marker-chip">
+          <span class="key time"></span>
+          {{ periodLabel }}
+          <button class="chip-x" v-if="timeMode == 'range'" @click="clearTimeFilter" title="Borrar filtro de tiempo">×</button>
+        </span>
+        <span class="marker-chip" v-if="roundActive">
+          <span class="key round"></span>
+          {{ roundLabel }}
+          <button class="chip-x" @click="eventFilters.roundFilter.value = []; onRoundGameChange()">×</button>
+        </span>
+        <span class="marker-chip" v-if="gameActive">
+          <span class="key game"></span>
+          {{ gameLabel }}
+          <button class="chip-x" @click="eventFilters.gameFilter.value = []; onRoundGameChange()">×</button>
+        </span>
+        <span class="marker-chip" v-if="selectedUuids.length" >
+          <span class="key player"></span>
+          Jugadores: {{ selectedUuids.length }}
+          <button class="chip-x" @click="clearPlayers(); onRoundGameChange()" title="Quitar selección de jugadores">×</button>
+        </span>
       </div>
     </div>
+  
 
-    <div class="filters-section" :class="{ collapsed: filtersCollapsed }">
-      
-      <Transition name="filters-slide">
-        <div v-if="!filtersCollapsed" class="filters-content"></div>
-      </Transition>
-    </div>
-
+  <div>
+    
     <Transition name="filters-slide">
       <div v-if="!filtersCollapsed" class="controls glass light">
         <!-- Selector de periodo: Salas activas vs Rango de tiempo -->
-        <div class="time-selector glass light">
+        <div class="time-selector">
           <div class="mode-buttons">
             <button 
               class="mode-btn" 
@@ -56,42 +76,32 @@
               Hasta
               <input type="datetime-local" v-model="rangeToStr" :disabled="timeMode !== 'range' || liveEnd" @change="applyTimeMode" />
             </label>
-            <button class="live-btn" :class="{ active: liveEnd }" :disabled="timeMode !== 'range'" @click="toggleLiveEnd">
-              ⏱ Hasta ahora
-            </button>
-            <div class="quick">
-              <button class="qs-btn" :disabled="timeMode !== 'range'" @click="quickRange(5)">5m</button>
-              <button class="qs-btn" :disabled="timeMode !== 'range'" @click="quickRange(10)">10m</button>
-              <button class="qs-btn" :disabled="timeMode !== 'range'" @click="quickRange(30)">30m</button>
-              <button class="qs-btn" :disabled="timeMode !== 'range'" @click="quickRange(60)">1h</button>
-            </div>
+          </div>
+          <div class="quick">
+            <button class="qs-btn live-btn" :class="{ active: liveEnd }" :disabled="timeMode !== 'range'" @click="toggleLiveEnd" title="Hasta ahora">⏱</button>
+            <button class="qs-btn" :disabled="timeMode !== 'range'" @click="incrementFrom(10,'m')">10m</button>
+            <button class="qs-btn" :disabled="timeMode !== 'range'" @click="incrementFrom(1,'h')">1h</button>
+            <button class="qs-btn" :disabled="timeMode !== 'range'" @click="incrementFrom(1,'d')">1D</button>
+            <button class="qs-btn" :disabled="timeMode !== 'range'" @click="incrementFrom(1,'mo')">1M</button>
+            <button class="qs-btn" :disabled="timeMode !== 'range'" @click="incrementFrom(1,'y')">1Y</button>
           </div>
         </div>
-        <div class="legend">
-          <span class="key global"></span> Global
-          <span class="sep">·</span>
-          <span class="key round"></span> Ronda
-          <span class="sep">·</span>
-          <span class="key game"></span> Juego
-          <span class="sep" v-if="selectedUuids.length">·</span>
-          <span class="key player" v-if="selectedUuids.length"></span> Jugadores
-          <span class="sep" v-if="selectedRoomIds.length">·</span>
-          <span class="key room" v-if="selectedRoomIds.length"></span> Salas
-        </div>
-        
-        <!-- Round/Game filters colocated with player filter -->
-        <div class="secondary-filters">
-          <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>
-        <div class="player-chips">
+        <hr class="divider" />
+  
+        <!-- Ronda / Juego -->
+        <EventFilters 
+          :round-filter="eventFilters.roundFilter.value"
+          :game-filter="eventFilters.gameFilter.value"
+          :has-active-filters="false"
+          :filter-summary="''"
+          :compact="true"
+          @update:round-filter="eventFilters.roundFilter.value = $event; onRoundGameChange()"
+          @update:game-filter="eventFilters.gameFilter.value = $event; onRoundGameChange()"
+          @reset-filters="eventFilters.resetFilters"
+        />
+        <hr class="divider" />
+  
+        <div class="player-chips compact">
           <div class="search-controls">
             <input class="search" v-model="search" placeholder="Buscar jugador…" />
             <div class="pagination compact" v-if="pageCount > 1">
@@ -108,18 +118,19 @@
               :class="{ active: selectedUuids.includes(p.uuid) }"
               @click="togglePlayer(p.uuid)"
               :title="p.uuid"
-              :style="{ '--primary': p.color || '#667eea' } as any"
+              :style="({ '--primary': p.color || '#667eea' } as any)"
             >
               <span class="avatar">{{ initials(p.name) }}</span>
               <span class="label">{{ p.name || 'Jugador' }}</span>
             </button>
-            <button v-if="selectedUuids.length" class="chip clear" @click="clearPlayers">Quitar selección</button>
           </div>
         </div>
         
         <!-- Room slice UI removida: reemplazada por rango de tiempo/activas -->
       </div>
     </Transition>
+  </div>
+
 
     <EventChart 
       :event-types="ALL_CHART_TYPES"
@@ -246,6 +257,17 @@ function applyTimeMode() {
   eventFilters.applyFilters(EVENTS);
 }
 
+function clearTimeFilter() {
+  // Switch to active rooms and set a 1-minute window ending now for consistency
+  timeMode.value = 'active';
+  const now = new Date();
+  rangeToStr.value = fmtLocal(now);
+  const from = new Date(now.getTime() - 60 * 1000);
+  rangeFromStr.value = fmtLocal(from);
+  liveEnd.value = true;
+  applyTimeMode();
+}
+
 function toggleLiveEnd() {
   liveEnd.value = !liveEnd.value;
   if (liveEnd.value) {
@@ -674,11 +696,57 @@ function copyRaw() {
   } catch {}
 }
 
-function quickRange(minutes: number) {
-  const now = new Date();
-  const from = new Date(now.getTime() - minutes * 60 * 1000);
+// Indicator labels
+const periodLabel = computed(() => {
+  if (timeMode.value === 'active') return 'Salas activas';
+  const from = (rangeFromStr.value || '').replace('T', ' ');
+  const to = (rangeToStr.value || '').replace('T', ' ');
+  return `${from} → ${to}${liveEnd.value ? ' (ahora)' : ''}`;
+});
+const roundActive = computed(() => eventFilters.roundFilter.value.length > 0);
+const gameActive = computed(() => eventFilters.gameFilter.value.length > 0);
+const roundLabel = computed(() => `Ronda: ${eventFilters.roundFilter.value.join(',')}`);
+const gameLabel = computed(() => `Juego: ${eventFilters.gameFilter.value.join(',')}`);
+
+function onRoundGameChange() {
+  eventFilters.applyFilters(EVENTS);
+  computeMetricsFromScores();
+}
+
+
+
+function incrementFrom(n: number, unit: 'm'|'h'|'d'|'mo'|'y') {
+  // Ensure we are in range mode to apply manual adjustments
+  if (timeMode.value !== 'range') {
+    timeMode.value = 'range';
+  }
+  // Determine current 'to' reference (now when liveEnd is enabled)
+  const to = liveEnd.value ? new Date() : new Date(Date.parse(rangeToStr.value || ''));
+  if (Number.isNaN(to.getTime())) {
+    // Initialize to now if empty/invalid
+    to.setTime(Date.now());
+  }
+  // Parse current 'from' or initialize to a sensible default window
+  let from = new Date(Date.parse(rangeFromStr.value || ''));
+  if (Number.isNaN(from.getTime())) {
+    from = new Date(to.getTime());
+  }
+  // Apply incremental increase to 'from'
+  // Move 'Desde' backwards in time by the chosen amount (expand window)
+  if (unit === 'm') from.setMinutes(from.getMinutes() - n);
+  else if (unit === 'h') from.setHours(from.getHours() - n);
+  else if (unit === 'd') from.setDate(from.getDate() - n);
+  else if (unit === 'mo') from.setMonth(from.getMonth() - n);
+  else if (unit === 'y') from.setFullYear(from.getFullYear() - n);
+
+  // Clamp to keep at least 1 minute window and never exceed 'to'
+  const minWindowMs = 60 * 1000;
+  if (to.getTime() - from.getTime() < minWindowMs) {
+    from = new Date(to.getTime() - minWindowMs);
+  }
+
   rangeFromStr.value = fmtLocal(from);
-  rangeToStr.value = fmtLocal(now);
+  rangeToStr.value = fmtLocal(to);
   applyTimeMode();
 }
 
@@ -956,17 +1024,19 @@ function downloadJSON() {
 
 .glass.light { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(229, 231, 235, 0.95); box-shadow: 0 18px 50px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.75); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); border-radius: 16px; }
 
-.header { display:flex; align-items:center; justify-content:space-between; gap: 8px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 10px; }
+.header { display:flex; flex-direction: column; gap: 6px; padding: 8px 10px; margin-bottom: 10px; }
+.header-row { display:flex; align-items:center; justify-content:space-between; gap: 8px; flex-wrap: nowrap; }
 .header h1 { margin: 0; font-size: 18px; line-height: 1.2; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; }
-.header-left { display:flex; align-items:center; gap: 10px; flex: 1 1 auto; min-width: 200px; }
+.header-left { display:flex; align-items:center; gap: 10px; flex: 1 1 auto; min-width: 0; }
 .btn-back { background:#667eea; color:#fff; border:none; border-radius:6px; padding:6px 10px; font-weight:600; cursor:pointer; transition: all 0.3s ease; font-size: 12px; }
 .btn-back:hover { background:#5b6bda; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3); }
-.actions { display:flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: flex-end; flex: 1 1 280px; }
+.actions { display:flex; gap: 6px; flex-wrap: nowrap; align-items: center; justify-content: flex-end; flex: 0 0 auto; }
 .actions .btn { background:#667eea; color:#fff; border:none; border-radius:6px; padding:4px 8px; font-weight:800; font-size: 11px; cursor:pointer; }
 .actions .btn.toggle { background:#eef2ff; color:#3949ab; border:1px solid #c7d2fe; }
 .actions .btn.toggle.active { background:#3949ab; color:#fff; border-color:#2e3f9a; }
 
 .controls { display:grid; grid-template-columns: 1fr; gap: 10px; padding: 10px 12px; margin-bottom: 14px; }
+.divider { border: 0; border-top: 1px solid rgba(203,213,225,0.6); margin: 6px 0; }
 .legend { font-size: 13px; color:#334155; display:flex; align-items:center; gap:10px; }
 .key { width: 12px; height: 12px; border-radius: 999px; display:inline-block; }
 .key.global { background: linear-gradient(90deg, #34d399, #10b981); box-shadow: 0 0 8px rgba(16,185,129,0.35); }
@@ -1021,7 +1091,8 @@ function downloadJSON() {
   display: flex;
   align-items: center;
   gap: 12px;
-  justify-content: space-between;
+  justify-content: start;
+  flex-wrap: wrap;
 }
 
 .search { 
@@ -1046,6 +1117,11 @@ function downloadJSON() {
   flex-wrap: wrap; 
   align-items: center;
 }
+.player-chips.compact .search { padding: 6px 8px; min-width: 180px; font-size: 12px; }
+.player-chips.compact .chip { padding: 6px 10px; font-size: 12px; }
+.player-chips.compact .avatar { width: 20px; height: 20px; font-size: 12px; }
+.player-chips.compact .pagination.compact { padding: 3px 6px; }
+.filters-indicators .chip-x { background: transparent; border: none; color: #64748b; margin-left: 6px; cursor: pointer; font-weight: 900; }
 .secondary-filters { margin: 6px 0 4px; }
 .chip { display:flex; align-items:center; gap:8px; background: color-mix(in srgb, var(--primary) 6%, white); border:1px solid color-mix(in srgb, var(--primary) 24%, #e5e7eb); padding:8px 12px; border-radius: 999px; color:#111827; cursor:pointer; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
 .chip:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--primary) 10%, white); box-shadow: 0 6px 18px rgba(102,126,234,0.18); }
@@ -1134,6 +1210,11 @@ function downloadJSON() {
   text-align: center;
 }
 
+/* Compact filter indicators */
+.filters-indicators { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 4px 0; margin: 6px 0 0; }
+.marker-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 999px; border: none; background: transparent; color: #334155; font-size: 12px; font-weight: 700; }
+.marker-chip.clickable { cursor: pointer; }
+
 /* Raw payload styles */
 .raw-viewer { margin-top: 14px; padding: 12px; border-radius: 14px; }
 .raw-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
@@ -1142,16 +1223,17 @@ function downloadJSON() {
 .raw-pre { max-height: 420px; overflow: auto; background: #0b1020; color: #e5e7eb; padding: 12px; border-radius: 10px; font-size: 12px; line-height: 1.4; border: 1px solid #1f2937; }
 
 /* Time selector styles */
-.time-selector { display: flex; flex-wrap: wrap; gap: 12px; padding: 10px; margin-bottom: 12px; align-items: center; }
-.mode-buttons { display: flex; gap: 6px; }
+.time-selector {    align-items: center; }
+.mode-buttons { display: flex; gap: 6px; margin-bottom: 10px; }
 .mode-btn { padding: 6px 10px; border-radius: 8px; border: 1px solid #cbd5e1; background: #fff; color: #334155; font-weight: 800; font-size: 12px; cursor: pointer; }
 .mode-btn.active { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border-color: #667eea; }
-.range-inputs { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
+.range-inputs { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
 .range-inputs.disabled { opacity: 0.6; filter: grayscale(0.1); }
 .range-inputs label { display: flex; gap: 6px; align-items: center; font-weight: 700; color: #334155; }
 .range-inputs input[type="datetime-local"] { padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 12px; }
 .live-btn { padding: 6px 10px; border-radius: 8px; border: 1px solid #cbd5e1; background: #fff; color: #334155; font-weight: 800; font-size: 12px; cursor: pointer; }
 .live-btn.active { background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%); color: #fff; border-color: #06b6d4; }
+.key.time { background: linear-gradient(90deg, #f59e0b, #d97706); box-shadow: 0 0 8px rgba(245,158,11,0.35); }
 
 
 /* Filters section styles */
@@ -1219,13 +1301,10 @@ function downloadJSON() {
   .header { padding: 6px 8px; margin-bottom: 8px; }
   .header h1 { font-size: 16px; }
   .btn-back { padding: 5px 8px; font-size: 11px; border-radius: 6px; }
-  .actions { gap: 6px; }
+  .actions { gap: 6px; flex-wrap: nowrap; }
   .actions .btn { padding: 4px 6px; font-size: 10px; border-radius: 5px; }
-  .search-controls {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 8px;
-  }
+  .header-row { flex-wrap: nowrap; }
+
   
   .search {
     min-width: auto;
@@ -1238,9 +1317,10 @@ function downloadJSON() {
 }
 
 @media (max-width: 640px) {
-  .header { gap: 6px; }
-  .header-left { min-width: 140px; }
-  .actions { justify-content: flex-start; }
+  .header { gap: 4px; }
+  .header-row { flex-wrap: nowrap; }
+  .header-left { min-width: 120px; }
+  .actions { justify-content: flex-start; flex-wrap: nowrap; }
   .btn-collapse .collapse-text {
     display: none;
   }