traduccion del juego al español 100%

client/src/components/EventChart.vue

@@ -16,7 +16,7 @@
           {{ activeFilters?.dataSource === 'active-rooms' ? '🔴 Tiempo Real' : '📁 Agregado' }}
         </span>
         <span class="filter-tag" v-if="activeFilters?.round !== 'all'">
-          Round {{ activeFilters?.round }}
+          Ronda {{ activeFilters?.round }}
         </span>
         <span class="filter-tag" v-if="activeFilters?.game !== 'all'">
           {{ activeFilters?.game }}
@@ -68,7 +68,7 @@
           </div>
         </div>
       </div>
-      <div class="hint small">Basado en mensajes disponibles por sala. Click jugador para comparar.</div>
+      <div class="hint small">Basado en mensajes disponibles por sala. Haz clic en un jugador para comparar.</div>
     </div>
   </div>
 
@@ -113,7 +113,7 @@
       </div>
     </div>
     <div class="hint small">
-      {{ selectedPlayerUuid ? 'Ratios del jugador seleccionado' : 'Ratios globales' }}. 
+      {{ selectedPlayerUuid ? 'Proporciones del jugador seleccionado' : 'Proporciones globales' }}. 
       Los segmentos muestran la proporción relativa dentro de cada categoría.
     </div>
   </div>

client/src/components/EventFilters.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="filters-container glass light">
     <div class="filter-group">
-      <label class="filter-label">Round:</label>
+      <label class="filter-label">Ronda:</label>
       <div class="filter-buttons">
         <button 
           class="filter-btn" 
@@ -17,7 +17,7 @@
           class="filter-btn" 
           :class="{ active: roundFilter?.includes(r) }"
           @click="$emit('update:roundFilter', roundFilter?.includes(r) ? roundFilter.filter(x=>x!==r) : [...(roundFilter||[]), r])"
-          :title="`Mostrar solo Round ${r}`"
+          :title="`Mostrar solo Ronda ${r}`"
         >
           R{{ r }}
         </button>
@@ -25,7 +25,7 @@
     </div>
     
     <div class="filter-group">
-      <label class="filter-label">Game:</label>
+      <label class="filter-label">Juego:</label>
       <div class="filter-buttons">
         <button 
           class="filter-btn" 

client/src/views/Dashboard.vue

@@ -6,24 +6,24 @@
           <button @click="goToSelector" class="btn btn-back">
             ← UUIDs
           </button>
-          <h1>🎛️ Admin Dashboard</h1>
+          <h1>🎛️ Panel de Administración</h1>
         </div>
         <div class="connection-status">
           <div :class="['status-indicator', { 'connected': isSSEConnected, 'disconnected': !isSSEConnected }]"></div>
-          <span class="status-text">{{ isSSEConnected ? 'Real-time' : 'Polling' }}</span>
+          <span class="status-text">{{ isSSEConnected ? 'Tiempo real' : 'Sondeo' }}</span>
         </div>
       </div>
       <div class="stats-summary">
         <div class="stat-card">
-          <span class="stat-label">Total CCU</span>
+          <span class="stat-label">CCU Total</span>
           <span class="stat-value">{{ globalStats?.globalCCU || 0 }}</span>
         </div>
         <div class="stat-card">
-          <span class="stat-label">Active Rooms</span>
+          <span class="stat-label">Salas Activas</span>
           <span class="stat-value">{{ rooms.length }}</span>
         </div>
         <div class="stat-card">
-          <span class="stat-label">Total Players</span>
+          <span class="stat-label">Jugadores Totales</span>
           <span class="stat-value">{{ totalPlayers }}</span>
         </div>
       </div>
@@ -60,73 +60,73 @@
       <!-- Global Controls Section -->
       <div class="global-controls-section">
         <div class="section-header">
-          <h2>🌐 Global Controls</h2>
+          <h2>🌐 Controles Globales</h2>
         </div>
         <div class="global-controls-grid">
           <div class="control-group">
-            <h3>Game State</h3>
+            <h3>Estado del Juego</h3>
             <div class="control-buttons">
               <button 
                 @click="pauseAllGames" 
                 class="btn btn-pause"
                 :disabled="isLoadingGlobal"
               >
-                ⏸️ Pause All Games
+                ⏸️ Pausar Todos los Juegos
               </button>
               <button 
                 @click="resumeAllGames" 
                 class="btn btn-resume"
                 :disabled="isLoadingGlobal"
               >
-                ▶️ Resume All Games
+                ▶️ Reanudar Todos los Juegos
               </button>
               <button 
                 @click="restartAllGames" 
                 class="btn btn-restart"
                 :disabled="isLoadingGlobal"
               >
-                🔄 Restart All Games
+                🔄 Reiniciar Todos los Juegos
               </button>
             </div>
           </div>
           
           <div class="control-group">
-            <h3>Game Variant</h3>
+            <h3>Variante del Juego</h3>
             <div class="variant-controls">
               <select v-model="selectedGlobalVariant" class="variant-selector">
-                <option value="">Select Variant</option>
+                <option value="">Seleccionar Variante</option>
-                <option value="G1">G1 - Basic Game</option>
+                <option value="G1">G1 - Juego Básico</option>
-                <option value="G2">G2 - Forced Offers</option>
+                <option value="G2">G2 - Ofertas Forzadas</option>
-                <option value="G3">G3 - Shame Tokens</option>
+                <option value="G3">G3 - Fichas de Vergüenza</option>
-                <option value="G4">G4 - Judge System</option>
+                <option value="G4">G4 - Sistema de Juez</option>
-                <option value="G5">G5 - Advanced</option>
+                <option value="G5">G5 - Avanzado</option>
               </select>
               <button 
                 @click="changeGlobalVariant" 
                 class="btn btn-variant"
                 :disabled="!selectedGlobalVariant || isLoadingGlobal"
               >
-                🎮 Change All to {{ selectedGlobalVariant }}
+                🎮 Cambiar Todo a {{ selectedGlobalVariant }}
               </button>
             </div>
           </div>
           
           <div class="control-group">
-            <h3>Player Management</h3>
+            <h3>Gestión de Jugadores</h3>
             <div class="control-buttons">
               <button 
                 @click="shufflePlayers" 
                 class="btn btn-shuffle"
                 :disabled="isLoadingGlobal"
               >
-                🎲 Shuffle Players
+                🎲 Mezclar Jugadores
               </button>
               <button 
                 @click="sendAllToLobby" 
                 class="btn btn-lobby-all"
                 :disabled="isLoadingGlobal"
               >
-                🏠 Send All to Lobby
+                🏠 Enviar Todos al Lobby
               </button>
               <button 
                 @click="resetAllUuidProfiles" 
@@ -134,7 +134,7 @@
                 :disabled="isLoadingGlobal"
                 title="Borrar nombre, color y vergüenza de todos los UUIDs"
               >
-                🧹 Reset All UUID Profiles
+                🧹 Resetear Todos los Perfiles UUID
               </button>
             </div>
           </div>
@@ -144,25 +144,25 @@
       <div class="rooms-section">
         <DashboardActions :rooms="rooms" :room-details="roomDetails" />
         <div class="section-header">
-          <h2>Active Game Rooms</h2>
+          <h2>Salas de Juego Activas</h2>
           <div class="view-controls">
             <button 
               @click="viewMode = 'table'" 
               :class="['btn', 'btn-view-mode', { active: viewMode === 'table' }]"
             >
-              📊 Table View
+              📊 Vista de Tabla
             </button>
             <button 
               @click="viewMode = 'cards'" 
               :class="['btn', 'btn-view-mode', { active: viewMode === 'cards' }]"
             >
-              🎴 Cards View
+              🎴 Vista de Tarjetas
             </button>
           </div>
         </div>
 
         <div v-if="rooms.length === 0" class="no-rooms">
-          No active game rooms
+          No hay salas de juego activas
         </div>
         
         <!-- Table View -->
@@ -194,15 +194,15 @@
       </div>
 
       <div class="lobby-section">
-        <h2>Lobby Rooms</h2>
+        <h2>Salas del Lobby</h2>
         <div v-if="lobbyRooms.length === 0" class="no-rooms">
-          No active lobby rooms
+          No hay salas de lobby activas
         </div>
         <div v-else class="lobby-grid">
           <div v-for="room in lobbyRooms" :key="room.roomId" class="lobby-card">
             <div class="lobby-header">
               <span class="room-type">🏠 Lobby</span>
-              <span class="room-clients">{{ room.clients }} players</span>
+              <span class="room-clients">{{ room.clients }} jugadores</span>
             </div>
             <div class="room-id-small">{{ room.roomId.slice(0, 8) }}</div>
           </div>
@@ -212,10 +212,10 @@
 
     <div class="dashboard-footer">
       <button @click="refreshData" class="btn btn-refresh">
-        🔄 Refresh Data
+        🔄 Actualizar Datos
       </button>
       <button @click="goToLobby" class="btn btn-lobby">
-        🎮 Go to Lobby
+        🎮 Ir al Lobby
       </button>
     </div>
 
@@ -455,7 +455,7 @@ function openTabs() {
 
 // Global control functions
 async function pauseAllGames() {
-  if (!confirm('Are you sure you want to pause ALL active games?')) return;
+  if (!confirm('¿Estás seguro de que quieres pausar TODOS los juegos activos?')) return;
   
   isLoadingGlobal.value = true;
   try {
@@ -477,7 +477,7 @@ async function pauseAllGames() {
 }
 
 async function resumeAllGames() {
-  if (!confirm('Are you sure you want to resume ALL paused games?')) return;
+  if (!confirm('¿Estás seguro de que quieres reanudar TODOS los juegos pausados?')) return;
   
   isLoadingGlobal.value = true;
   try {
@@ -499,7 +499,7 @@ async function resumeAllGames() {
 }
 
 async function restartAllGames() {
-  if (!confirm('Are you sure you want to RESTART ALL active games? This will reset all progress!')) return;
+  if (!confirm('¿Estás seguro de que quieres REINICIAR TODOS los juegos activos? ¡Esto reiniciará todo el progreso!')) return;
   
   isLoadingGlobal.value = true;
   try {
@@ -522,7 +522,7 @@ async function restartAllGames() {
 
 async function changeGlobalVariant() {
   if (!selectedGlobalVariant.value) return;
-  if (!confirm(`Are you sure you want to change ALL games to variant ${selectedGlobalVariant.value}?`)) return;
+  if (!confirm(`¿Estás seguro de que quieres cambiar TODOS los juegos a la variante ${selectedGlobalVariant.value}?`)) return;
   
   isLoadingGlobal.value = true;
   try {
@@ -545,7 +545,7 @@ async function changeGlobalVariant() {
 }
 
 async function shufflePlayers() {
-  if (!confirm('Are you sure you want to SHUFFLE all players? This will randomly redistribute players between rooms and assign new roles!')) return;
+  if (!confirm('¿Estás seguro de que quieres MEZCLAR todos los jugadores? ¡Esto redistribuirá aleatoriamente a los jugadores entre las salas y asignará nuevos roles!')) return;
   
   isLoadingGlobal.value = true;
   try {
@@ -558,7 +558,7 @@ async function shufflePlayers() {
     
     const result = await response.json();
     console.log('Players shuffled successfully:', result.message);
-    alert(`Shuffle completed! ${result.message}`);
+    alert(`¡Mezcla completada! ${result.message}`);
     await fetchData();
   } catch (error) {
     console.error('Failed to shuffle players:', error);
@@ -569,7 +569,7 @@ async function shufflePlayers() {
 }
 
 async function sendAllToLobby() {
-  if (!confirm('Are you sure you want to send ALL players back to the lobby? This will end all active games!')) return;
+  if (!confirm('¿Estás seguro de que quieres enviar a TODOS los jugadores de vuelta al lobby? ¡Esto terminará todos los juegos activos!')) return;
   
   isLoadingGlobal.value = true;
   try {

client/src/views/DemoGame.vue

@@ -16,9 +16,9 @@
       <div class="game-header">
         <h1 @click="onTitleClick" :title="titleUnlockTitle">💼 Sala de negocios</h1>
         <div class="meta">
-          <div>Room: <code>{{ roomId }}</code></div>
+          <div>Sala: <code>{{ roomId }}</code></div>
-          <div>Round: {{ currentRound }}/3</div>
+          <div>Ronda: {{ currentRound }}/3</div>
-          <div>Status: <span class="badge">{{ gameStatus }}</span></div>
+          <div>Estado: <span class="badge">{{ gameStatus }}</span></div>
         </div>
         <div class="variant-selector">
           <button
@@ -41,8 +41,8 @@
       <div v-if="gameStatus === 'waiting'" class="waiting-area">
         <div class="waiting-message">
           <div class="spinner"></div>
-          <h2>Waiting for opponent...</h2>
+          <h2>Esperando oponente...</h2>
-          <p>Players in room: {{ players.length }}/2</p>
+          <p>Jugadores en la sala: {{ players.length }}/2</p>
         </div>
       </div>
 
@@ -61,8 +61,8 @@
 
         <div class="outcome" v-if="outcomeP1 || outcomeP2">
           <div class="outcome-box">
-            <div>Outcome P1: <strong>{{ outcomeP1 }}</strong></div>
+            <div>Resultado J1: <strong>{{ outcomeP1 }}</strong></div>
-            <div>Outcome P2: <strong>{{ outcomeP2 }}</strong></div>
+            <div>Resultado J2: <strong>{{ outcomeP2 }}</strong></div>
           </div>
         </div>
       </div>
@@ -70,7 +70,7 @@
       <ChatWidget />
 
       <div class="game-footer">
-        <button @click="leaveGame" class="btn btn-leave">Leave Game</button>
+        <button @click="leaveGame" class="btn btn-leave">Salir del Juego</button>
       </div>
     </div>
 

client/src/views/Lobby.vue

@@ -7,7 +7,7 @@
         </button>
       </div>
       <h1 class="title">🎮 Snatch Game</h1>
-      <div class="subtitle">Competitive Clicker Battle</div>
+      <div class="subtitle">Batalla Competitiva de Clics</div>
 
       <div class="player-section">
         <div class="name-input-group">
@@ -15,14 +15,14 @@
             v-model="inputName"
             @keyup.enter="updateName"
             type="text"
-            placeholder="Enter your name"
+            placeholder="Ingresa tu nombre"
             class="name-input"
             maxlength="20"
           />
-          <button @click="updateName" class="btn btn-secondary">Set Name</button>
+          <button @click="updateName" class="btn btn-secondary">Confirmar Nombre</button>
         </div>
         <div class="current-name">
-          Playing as: <span class="player-name">{{ playerName || 'guest' }}</span>
+          Jugando como: <span class="player-name">{{ playerName || 'invitado' }}</span>
         </div>
         <div class="color-picker">
           <label class="color-label">Color:</label>
@@ -35,18 +35,18 @@
 
       <div class="main-actions">
         <button @click="handleQuickPlay" class="btn btn-primary btn-large" :disabled="isJoining || !nameConfirmed">
-          <span v-if="!isJoining">🧪 Demo Play</span>
+          <span v-if="!isJoining">🧪 Juego Demo</span>
-          <span v-else>Finding match...</span>
+          <span v-else>Buscando partida...</span>
         </button>
-        <div v-if="!nameConfirmed" class="hint">Antes de jugar, presiona "Set Name" para confirmar tu nombre.</div>
+        <div v-if="!nameConfirmed" class="hint">Antes de jugar, presiona "Confirmar Nombre" para confirmar tu nombre.</div>
         <div v-else class="hint ok">Nombre confirmado ✔</div>
       </div>
 
       <div class="qr-section">
-        <h2>🎯 Your Game Access</h2>
+        <h2>🎯 Tu Acceso al Juego</h2>
         <div class="qr-container">
           <div class="qr-header">
-            <h3>{{ playerName || 'Guest' }}'s Game Link</h3>
+            <h3>Enlace de Juego de {{ playerName || 'Invitado' }}</h3>
             <p class="uuid-display">UUID: {{ routeUuid.substring(0, 8) }}...</p>
           </div>
           <div class="qr-code-wrapper">
@@ -55,8 +55,8 @@
           <div class="qr-footer">
             <p class="url-display">{{ gameUrl }}</p>
             <div class="qr-actions">
-              <button @click="copyUrl" class="btn btn-copy">📋 Copy Link</button>
+              <button @click="copyUrl" class="btn btn-copy">📋 Copiar Enlace</button>
-              <button @click="shareQR" class="btn btn-share">📤 Share QR</button>
+              <button @click="shareQR" class="btn btn-share">📤 Compartir QR</button>
             </div>
           </div>
         </div>
@@ -92,7 +92,7 @@ const nameConfirmed = computed(() => colyseusService.nameConfirmed.value);
 const playerColor = computed(() => colyseusService.playerColor.value);
 const previewPlayer = computed(() => ({
   sessionId: 'preview',
-  name: playerName.value || 'guest',
+  name: playerName.value || 'invitado',
   role: 'P1',
   pavoTokens: 10,
   eloteTokens: 0,
@@ -347,8 +347,8 @@ async function copyUrl() {
 function shareQR() {
   if (navigator.share) {
     navigator.share({
-      title: 'Join my Snatch Game',
+      title: 'Únete a mi Snatch Game',
-      text: `Join ${playerName.value || 'me'} in Snatch Game!`,
+      text: `Únete a ${playerName.value || 'mí'} en Snatch Game!`,
       url: gameUrl.value
     }).catch(err => console.log('Error sharing:', err));
   } else {

client/src/views/games/ChatWidget.vue

@@ -93,7 +93,7 @@ function send() {
   const id = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
   const mine: ChatMsg = {
     id,
-    from: colyseusService.playerName.value || "Yo",
+    from: colyseusService.playerName.value || "Tú",
     fromId: colyseusService.sessionId.value || "",
     text: t,
     ts: Date.now(),

client/src/views/games/GameEndModal.vue

@@ -39,7 +39,7 @@
           </button>
         </div>
         <div v-else class="round-info clickable" @click="onRoundInfoClick" :title="roundInfoTitle">
-          (espere a que el administrador continue la partida)
+          (espera a que el administrador continúe la partida)
         </div>
       </template>
       <div v-else class="round-info">

client/src/views/games/PlayerStats.vue

@@ -53,7 +53,7 @@
             <span class="th r">Rol</span>
             <span class="th tok">Tokens</span>
             <span class="th k">Evento</span>
-            <span class="th rnd">Round/Game</span>
+            <span class="th rnd">Ronda/Juego</span>
             <span class="th x">Mensaje</span>
             <span class="th room">Sala</span>
           </div>
@@ -62,7 +62,7 @@
             <span class="r">{{ (m.role || '') || '—' }}</span>
             <span class="tok">🦃 {{ m.pavoTokens ?? 0 }} · 🌽 {{ m.eloteTokens ?? 0 }} <span v-if="(m.shameTokens ?? 0) > 0">· 😶 {{ m.shameTokens }}</span></span>
             <span class="k">{{ friendlyKind(m.kind) }}</span>
-            <span class="rnd" :title="`Round ${m.round || '?'} - Game ${m.gameVariant || m.variant || '?'}`">R{{ m.round || '?' }}/{{ (m.gameVariant || m.variant || '?').replace('G', '') }}</span>
+            <span class="rnd" :title="`Ronda ${m.round || '?'} - Juego ${m.gameVariant || m.variant || '?'}`">R{{ m.round || '?' }}/{{ (m.gameVariant || m.variant || '?').replace('G', '') }}</span>
             <span class="x">{{ m.text }}</span>
             <span class="room">{{ (m.roomId || '').slice(0,8) }}</span>
           </div>