# Full Dominoes — Pack 03

Tres cosas: el lienzo de la mesa fuera, las fichas quietas de verdad, y
todos los botones del lobby con el estilo de `btn-jugar-ahora`.

---

## 1. Archivos

| Archivo | Destino | Tipo |
|---|---|---|
| `public/assets/js/tablero3d.js` | `public/assets/js/` | **reemplaza** |
| `public/assets/js/btn-lobby-pack.js` | `public/assets/js/` | **nuevo** |
| `public/preview_botones.html` | `public/` | opcional (solo para verlos) |

Este `tablero3d.js` ya trae lo del pack 02. Si venís del 02, este lo pisa.

---

## 2. El rectángulo oscuro en el centro de la mesa

Tenías razón: había una superficie que no debía existir. Era esto, en
`init()`:

```js
const planoSombra = new THREE.Mesh(
  new THREE.PlaneGeometry(1600, 1600),
  new THREE.ShadowMaterial({ opacity: 0.34 })
);
```

Un plano de 1600×1600 que recibía sombras. El detalle que lo rompía: la
cámara de sombras de la luz principal solo cubre **±420** unidades. Todo
lo que queda fuera de ese recuadro muestrea el texel del borde del shadow
map y se pinta sombreado — de ahí el rectángulo oscuro de bordes rectos
justo en el centro, encima del fondo real de la mesa.

Y lo importante: **no hacía falta**. Cada ficha ya lleva su propia sombra
pintada (`crearMeshFicha` → `geoSombra` + `texturaSombra`), un sprite
suave pegado debajo de la pieza. Esa es la sombra que se ve y la que hace
que la ficha se lea apoyada.

Así que el plano se fue entero. El canvas 3D ya no dibuja **ninguna**
superficie propia: la mesa es el fondo, tal como dijiste. Como efecto
lateral se pudo apagar todo el pase de shadow map (`shadowMap.enabled =
false`, `castShadow = false`) — eso es un render de 2048×2048 menos por
cuadro, que en Android se nota.

---

## 3. Las fichas ya no se mueven. Punto.

En el pack 02 dejé un travelling de cámara suave. Tenías razón otra vez:
por suave que sea, sigue siendo movimiento, y al colocar una ficha se
siente incómodo.

Lo apagué del todo:

```js
const ENCUADRE_ACTIVO = false;
```

Y no es un parche: con el layout actual la cadena crece equilibrada hacia
los dos lados (cada extremo alterna de fila en sentido contrario), así que
su centro **nunca se aleja más de ~14px del origen**. Lo medí en las
simulaciones del pack anterior. O sea que no hay nada que reencuadrar: la
mesa se queda absolutamente quieta y la cadena igual queda centrada sola.

Si algún día cambiás el layout y la cadena sí se descentra, poné esa
constante en `true` y el travelling vuelve tal cual, con su zona muerta y
su suavizado.

---

## 4. Botones del lobby

`btn-lobby-pack.js` define **en un solo archivo** estos nueve
componentes, con el estilo de `btn-jugar-ahora` y los colores que ya tenía
cada uno:

| Tag | Acabado |
|---|---|
| `btn-tienda`, `btn-tienda-ofertas`, `btn-tienda-trofeo`, `btn-zona-vip` | oro |
| `btn-ranking`, `btn-individual`, `btn-equipos`, `btn-crea-mesa`, `btn-invitar-amigos` | hielo |

Los cuatro rasgos que hacen reconocible a `btn-jugar-ahora`, ahora
parametrizados por paleta:

1. Aro biselado exterior + doble sombra interna (el marco de metal).
2. Fondo radial translúcido con `backdrop-filter` (vidrio tintado).
3. Barrido de luz que recorre el botón en bucle.
4. Perspectiva que se endereza al pulsar.

Un botón azul y uno dorado son ahora **el mismo objeto en dos acabados**,
no dos diseños distintos. Eso es lo que hace que un lobby se vea diseñado
y no ensamblado.

**La API no cambia.** Mismo atributo `url`, mismos eventos:

```html
<btn-tienda url="tienda.html"></btn-tienda>
<btn-equipos @click="abrirTorneo2vs2()"></btn-equipos>
```

### IMPORTANTE al integrar

`customElements.define()` lanza excepción si el mismo tag se registra dos
veces, y esa excepción **corta el script**. Así que en `home.html` hay que
QUITAR estas líneas:

```html
<script src="assets/js/btn-tienda.js"></script>
<script src="assets/js/btn-ranking.js"></script>
<script src="assets/js/btn-individual.js"></script>
<script src="assets/js/btn-equipos.js"></script>
<script src="assets/js/btn-crea-mesa.js"></script>
<script src="assets/js/btn-zona-vip.js"></script>
<script src="assets/js/btn-invitar-amigos.js"></script>
<script src="assets/js/btn-tienda-ofertas.js"></script>
<script src="assets/js/btn-tienda-trofeo.js"></script>
```

y poner en su lugar una sola:

```html
<script src="assets/js/btn-lobby-pack.js?v=1"></script>
```

`btn-jugar-ahora.js` se queda como está — ese es el original y no se toca.

Antes de integrar podés abrir **`public/preview_botones.html`** y verlos
todos juntos. Si algún color o texto no te cuadra, se cambia en la tabla
de `PALETAS` y en las nueve líneas `definir(...)` del final del archivo,
que están todas juntas a propósito.

Para agregar botones nuevos con el mismo lenguaje:

```js
FDBotonLobby.definir('btn-torneos', { paleta: 'oro', icono: 'trofeo', titulo: 'TORNEOS' });
```

---

## 5. Cómo hacemos que esto vaya más rápido

Me preguntaste directo, te contesto directo. El cuello de botella no es
que no entienda lo que pedís: es que trabajo a ciegas sobre 3.400
archivos y una captura. Tres cosas cambian eso mucho:

**Una captura por problema, con una flecha.** La de la sala me sirvió
muchísimo — el rectángulo oscuro y el desalineado del giro los ubiqué por
esa imagen. Cuando en un mensaje van cinco temas juntos, tengo que
adivinar cuál de los elementos de la pantalla es "el lienzo", y ahí es
donde se pierde el tiempo.

**Decime el archivo si lo sabés.** "El lienzo de la mesa" me costó tres
búsquedas; "el plano ese de tablero3d" habría sido inmediato.

**De a un frente por vez.** Si en un mensaje van tablero + botones +
tienda + otras pantallas, cada uno se lleva un tercio de la atención que
merece. Un mensaje = un frente = un pack cerrado y probado. Vamos más
rápido en total, aunque parezca lo contrario.

Y al revés, algo que me toca a mí: cuando algo no lo puedo determinar con
certeza desde el código, la respuesta correcta es preguntarte una cosa
concreta, no entregar una suposición envuelta en confianza. En el pack 02
te di un travelling suave cuando lo que querías era que no se moviera
nada — eso fue mío, no tuyo.

---

## 6. Pendiente

- Reestructurar `sala.html` (posición de avatares, tamaño de la mesa
  respecto a la escenografía, dónde va el marcador).
- Tienda: aplicar `.fd-panel` y `.fd-card-3d` dentro de
  `tienda-carrusel.js`.

Decime cuál de los dos primero y va completo en el 04.