# 🎨 FULL DOMINOES - SISTEMA DE MESAS DINÁMICAS

## ✨ Novedades

Se ha agregado un **sistema completo de mesas personalizadas** donde los jugadores pueden:

✅ **Seleccionar entre 4 temas de mesas**:
- **Azul Marino** - Clásica profesional (GRATIS)
- **Púrpura Oscura** - Elegante sofisticada (150◆)
- **Gris Minimalista** - Diseño moderno (150◆)
- **Rojo Clásico** - Casino tradicional (150◆)

✅ **Cambio de color en TIEMPO REAL**:
- Hover sobre mesa en tienda → Canvas cambia color instantly
- Las fichas blancas se adaptan a cualquier fondo
- Efecto profesional y sin z-fighting

✅ **Compra e integración**:
- Comprar con diamantes en la tienda
- Cambiar entre mesas compradas
- Guardado en BD (persistencia)

## 📁 Archivos Agregados

### SQL Migration
- `sql/026_mesas_dinamicas.sql` - Tablas: mesas_personalizadas, usuario_mesas_compradas

### APIs (3 nuevos endpoints)
- `public/api/obtener_mesas_disponibles.php` - Obtener catálogo + estado de usuario
- `public/api/comprar_mesa.php` - Comprar mesa con diamantes
- `public/api/establecer_mesa_actual.php` - Cambiar mesa activa

### JavaScript
- `public/assets/js/mesas-tienda.js` - Componente Alpine.js para galería de mesas
- `public/assets/js/tablero3d.js` - ACTUALIZADO: nueva función cambiarColorMesa()

### Documentación
- `INTEGRACION_MESAS_TIENDA.html` - Guía de integración en tienda.html

## 🚀 Implementación Rápida

### Paso 1: Ejecutar Migración
```bash
mysql -u usuario -p base_de_datos < sql/026_mesas_dinamicas.sql
```

### Paso 2: Copiar Archivos API
```bash
cp public/api/obtener_mesas_disponibles.php → tu_proyecto/public/api/
cp public/api/comprar_mesa.php → tu_proyecto/public/api/
cp public/api/establecer_mesa_actual.php → tu_proyecto/public/api/
```

### Paso 3: Copiar Componente JavaScript
```bash
cp public/assets/js/mesas-tienda.js → tu_proyecto/public/assets/js/
```

### Paso 4: Actualizar tablero3d.js
Reemplazar tu version anterior con la nueva que incluye `cambiarColorMesa()`

### Paso 5: Integrar en tienda.html
Ver `INTEGRACION_MESAS_TIENDA.html` para el HTML exacto a agregar

## 🎮 Cómo Funciona

```javascript
// Usuario abre tienda
→ Carga mesas disponibles
→ Muestra galería con preview de colores
→ Hover sobre mesa → Canvas cambia color (preview en vivo)
→ Click "Comprar" → Valida diamantes → Compra + auto-usa
→ Click "Usar" → Cambia mesa activa → Color permanente
```

## 📐 Configuración de Mesas

Cada mesa tiene 4 propiedades:
```javascript
{
  id: 1,
  nombre: 'Clásica Azul',
  color_fondo: '#0F1B2E',     // Color de fondo del canvas
  color_borde: 'rgba(6,182,212,0.8)',  // Color neon del borde
  precio_diamantes: 0,        // 0 = gratis
  descripcion: 'Mesa profesional de casino'
}
```

## ✅ Testing

Ver archivo `INTEGRACION_MESAS_TIENDA.html` para comandos de testing completos.

Pruebas básicas:
```javascript
// Cambiar color en vivo
Tablero3D.cambiarColorMesa('#1a0033')

// Obtener mesas
fetch('api/obtener_mesas_disponibles.php').then(r => r.json()).then(console.log)
```

## 🔧 Problemas Comunes

**P: El color no cambia en el canvas**
R: Verificar que tablero3d.js tenga la función cambiarColorMesa() exportada

**P: API retorna error de tabla**
R: Ejecutar migración SQL 026

**P: No puedo comprar mesa**
R: Verificar que tienes suficientes diamantes y que usuario está autenticado

## 🎯 Próximas Mejoras

- [ ] Más temas de mesas (gold, space, neon, etc)
- [ ] Animación de transición entre mesas
- [ ] Efectos de partículas al cambiar mesa
- [ ] Mesas limitadas/exclusivas
- [ ] Mesas por temporada/evento

---

**Versión**: 3.0 (Con Mesas Dinámicas)
**Fecha**: 22 Julio 2026
**Estado**: Production Ready ✅