🎮 Integración de Sistema de Mesas Dinámicas

1. HTML a Agregar en tienda.html

Agregar este código donde quieras mostrar la galería de mesas (dentro de tienda.html, probablemente como un nuevo tab):

<!-- TAB 5: MESAS (NUEVO) -->
<div x-show="tabActivo === 'mesas'" x-transition>
  <div x-data="componenteMesasTienda()" x-init="init()">
    
    <!-- Encabezado -->
    <div class="mb-6">
      <h3 class="text-xl font-bold text-cyan-400 mb-2">🎯 Mesas Personalizadas</h3>
      <p class="text-sm text-gray-400">Personaliza tu mesa de juego con diferentes temas</p>
    </div>
    
    <!-- Mensaje de Error -->
    <div x-show="error" class="bg-red-500/20 border border-red-500 text-red-300 p-3 rounded mb-4" x-cloak>
      <span x-text="error"></span>
    </div>
    
    <!-- Galería de Mesas -->
    <div class="grid grid-cols-2 gap-3" x-show="!cargando">
      <template x-for="mesa in mesas" :key="mesa.id">
        <div class="bg-gradient-to-br rounded-lg overflow-hidden border-2 transition-all"
             :style="'border-color: ' + mesa.color_fondo + '80'"
             @mouseenter="mostrarPreview(mesa)"
             @mouseleave="ocultarPreview()">
          
          <!-- Preview del Color -->
          <div class="w-full h-24 border-b-2 transition-all"
               :style="'background-color: ' + mesa.color_fondo">
          </div>
          
          <!-- Info de la Mesa -->
          <div class="p-3">
            <h4 class="font-bold text-sm mb-1" x-text="mesa.nombre"></h4>
            <p class="text-xs text-gray-400 mb-3 line-clamp-2" x-text="mesa.descripcion"></p>
            
            <!-- Precio -->
            <div class="text-xs font-bold mb-3" 
                 :class="mesa.precio_diamantes === 0 ? 'text-green-400' : 'text-amber-400'">
              <span x-text="formatoPrecio(mesa.precio_diamantes)"></span>
            </div>
            
            <!-- Botón de Acción -->
            <button 
              :class="obtenerClaseBtnMesa(mesa.id)"
              :disabled="cargando || obtenerEstadoMesa(mesa.id) === 'activa'"
              @click="obtenerEstadoMesa(mesa.id) === 'comprar' ? comprarMesa(mesa.id) : usarMesa(mesa.id)"
              x-text="obtenerTextoBtnMesa(mesa.id)">
            </button>
          </div>
        </div>
      </template>
    </div>
    
    <!-- Loading -->
    <div x-show="cargando" class="text-center py-8">
      <div class="inline-block animate-spin">⏳</div>
      <p class="text-gray-400 mt-2">Cargando mesas...</p>
    </div>
    
  </div>
</div>

2. Script a Agregar en tienda.html (antes de </body>)

Asegúrate de cargar los siguientes scripts en el orden correcto:

<!-- MESAS TIENDA COMPONENT -->
<script src="assets/js/mesas-tienda.js"></script>

<!-- Esto debería estar ya en tienda.html (Alpine.js) -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

3. Botón para Acceder a Tab de Mesas

Agregar en la barra de tabs (donde están Skins, Trofeos, etc.):

<!-- En la lista de tabs, agregar: -->
<button 
  @click="tabActivo = 'mesas'"
  :class="tabActivo === 'mesas' ? 'bg-cyan-500/30' : 'bg-gray-700/30'"
  class="px-4 py-2 rounded-lg font-bold text-sm transition-all">
  🎯 Mesas
</button>

4. CSS a Agregar (opcional, si no tienes Tailwind)

Si necesitas estilos específicos para las mesas:

/* Galería de Mesas */ .mesa-card { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border-radius: 8px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; cursor: pointer; } .mesa-card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(6, 182, 212, 0.2); } .mesa-preview { width: 100%; height: 100px; border-bottom: 2px solid; transition: all 0.3s; } .mesa-info { padding: 12px; } .mesa-nombre { font-weight: bold; font-size: 14px; margin-bottom: 6px; } .mesa-descripcion { font-size: 12px; color: #94a3b8; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mesa-precio { font-size: 12px; font-weight: bold; margin-bottom: 12px; } .btn-usar { width: 100%; padding: 8px; border-radius: 6px; font-weight: bold; font-size: 12px; border: none; cursor: pointer; transition: all 0.3s; } .btn-usar.activa { background-color: #06b6d4; color: white; cursor: default; } .btn-usar.comprada { background-color: rgba(34, 197, 94, 0.2); color: #22c55e; } .btn-usar.comprada:hover { background-color: rgba(34, 197, 94, 0.4); } .btn-usar.comprar { background-color: rgba(251, 191, 36, 0.2); color: #fbbf24; } .btn-usar.comprar:hover { background-color: rgba(251, 191, 36, 0.4); }

5. Cómo Funciona (Flujo de Datos)

USUARIO ABRE TIENDA DE MESAS
    ↓
init() → Llamar a obtener_mesas_disponibles.php
    ↓
Se cargan: todasMesas, mesasCompradas, mesaActual
    ↓
USUARIO VE GALERÍA con botones:
  - Mesa comprada → "✓ Usando" (si es la actual)
  - Mesa comprada → "Usar" (si no es la actual)
  - Mesa no comprada (150◆) → "Comprar"
  - Mesa gratis (Mesa 1) → "Usar"
    ↓
USUARIO HOVER SOBRE MESA
    ↓
mostrarPreview(mesa)
    ↓
Canvas cambia color en tiempo real:
    Tablero3D.cambiarColorMesa(mesa.color_fondo)
    ↓
USUARIO CLICK "COMPRAR"
    ↓
comprarMesa(mesaId)
    ↓
POST a comprar_mesa.php → Validar diamantes
    ↓
Si éxito: recargar mesas + auto-usar
    ↓
Canvas cambia color permanentemente

USUARIO CLICK "USAR"
    ↓
usarMesa(mesaId)
    ↓
POST a establecer_mesa_actual.php
    ↓
Si éxito: actualizar mesa_actual_id en BD
    ↓
Canvas cambia color permanentemente

6. Testing (Consola del Navegador - F12)

// Test 1: Ver componente
console.log(window.componenteMesasTienda)

// Test 2: Obtener mesas
fetch('api/obtener_mesas_disponibles.php')
  .then(r => r.json())
  .then(d => console.log(d))

// Test 3: Cambiar color en vivo
Tablero3D.cambiarColorMesa('#1a0033')  // Púrpura
Tablero3D.cambiarColorMesa('#2b1515')  // Rojo
Tablero3D.cambiarColorMesa('#0F1B2E')  // Azul (original)

// Test 4: Simular compra
fetch('api/comprar_mesa.php', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({mesa_id: 2})
})
  .then(r => r.json())
  .then(d => console.log(d))

7. Checklist de Integración

8. Archivos Necesarios (Resumen)

Nuevos archivos a crear:

Archivos a modificar: