# Full Dominoes — Pack 02
Corrige los dos bugs del tablero que se ven en tu captura, hace que las
ondas salgan en cualquier toque de pantalla, y agrega el sistema de
profundidad que faltaba en todas las pantallas.
---
## 1. Archivos
| Archivo | Destino | Tipo |
|---|---|---|
| `public/assets/js/sala.js` | `public/assets/js/` | **reemplaza** |
| `public/assets/js/tablero3d.js` | `public/assets/js/` | **reemplaza** |
| `public/assets/js/fd-experiencia.js` | `public/assets/js/` | **reemplaza** (v2) |
| `public/assets/js/fd-fondo-vivo.js` | `public/assets/js/` | igual que el pack 01 |
| `public/assets/js/fd-profundidad.js` | `public/assets/js/` | **nuevo** |
| `public/assets/css/fd-experiencia.css` | `public/assets/css/` | **reemplaza** (v2) |
`sala.js` y `tablero3d.js` van completos, con tus cambios intactos. Lo
único que se tocó son los cuatro puntos que se detallan abajo, todos
comentados en el código con el porqué.
---
## 2. Bug del giro con dobles — qué estaba pasando
En `calcularLayoutTablero`, el bloque del codo tenía las medidas escritas
a mano dando por sentado que la ficha anterior estaba **acostada**:
```js
x = cursor.x + dirX * ((LARGO - CORTO) / 2); // 13.5px
y = cursor.y + filaSigno * (CORTO/2 + LARGO/2);
```
Pero un doble va **parado**: mide `CORTO` de ancho y `LARGO` de alto, o
sea justo al revés. Cuando el giro caía inmediatamente después de un
doble, la bisagra se corría 13.5px más allá del borde real y además se le
restaba de menos en Y — resultado: **13.5 × 13.5 px de solape**. Eso es
lo que se ve deformado en tu captura.
Lo verifiqué simulando manos de 26 fichas antes y después:
```
ALGORITMO ORIGINAL
dobles en [9,10,11] -> 26 fichas, solapes: 2
SOLAPE 10(-256.5, 0.0 27x54) vs 12(-270.0, -40.5 27x54) -> 13.5x13.5
SOLAPE 11( 256.5, 0.0 27x54) vs 13( 270.0, 40.5 27x54) -> 13.5x13.5
ALGORITMO CORREGIDO
dobles en [] / [5,6] / [9,10,11] / [3,8,13,18] / [7,12,17,22]
-> 26 fichas, solapes: 0 (en los cinco casos)
```
La corrección usa las medidas **reales** de la ficha anterior, que el
cursor ya venía arrastrando en `ultimoAncho` (le agregué `ultimoAlto`).
Sirve igual para normales y para dobles, y no hay que volver a tocarlo si
algún día cambian las proporciones de las fichas.
También quedó alineado `calcularZonasDrop`, que razonaba distinto que
`avanzar()` en tres puntos y por eso el indicador de "soltar aquí" se
despegaba de la punta justo después de un doble.
---
## 3. La ficha de apertura que se movía sola
Ese era el bloque de "recentrado". Medía la caja de todas las fichas y le
restaba el centro a **cada ficha**. Como la cadena crece desigual, ese
centro cambia en cada jugada, así que todas las piezas —incluida la de
apertura, que en la vida real no se movió nunca— saltaban de sitio en
cada poll:
```
ANTES DESPUÉS
con 1 fichas -> apertura en (0, 0) con 1 fichas -> (0, 0)
con 4 fichas -> apertura en (-27, 0) con 4 fichas -> (0, 0)
con 9 fichas -> apertura en (-13.5,0) con 9 fichas -> (0, 0)
con 14 fichas -> (-13.5, -13.5) con 14 fichas -> (0, 0)
con 20 fichas -> (-13.5, 0) con 20 fichas -> (0, 0)
con 26 fichas -> (-13.5, 0) con 26 fichas -> (0, 0)
```
Ahora las fichas conservan sus coordenadas reales para siempre, y el
encuadre viaja aparte como **desplazamiento de cámara**: `tablero3d.js`
lo interpola cuadro a cuadro sobre `grupoFichas`. Es la diferencia entre
mover el mundo y mover la cámara — en pantalla se parece, pero uno se lee
como glitch y el otro como travelling.
Dos detalles que hacen que se sienta bien:
- **Zona muerta de 26px** (`ENCUADRE_ZONA_MUERTA`): mientras la cadena
siga cómoda, la cámara no se mueve **nada**. Sin esto cada ficha nueva
movería la mesa uno o dos píxeles y quedaría un temblor permanente.
- **Suavizado 0.09** (`ENCUADRE_SUAVIZADO`): arranca rápido y frena solo
al llegar. Si lo querés más ágil, subilo a 0.15; más cinematográfico,
bajalo a 0.05.
`proyectarPunto()` ahora suma el encuadre actual, si no las zonas de drop
se quedarían pegadas a las coordenadas crudas.
---
## 4. Fichas opacas
Dos perillas, ambas en `tablero3d.js`:
- `toneMappingExposure`: **1.05 → 1.32**. Sobre el fondo neón brillante
de tu mesa sci-fi, a 1.05 las fichas quedaban por debajo del brillo del
entorno y el ojo las leía como apagadas aunque el material fuera
correcto. El marfil tiene que ser lo más luminoso de la escena.
- `envMapIntensity` de la cara: **1.6 → 2.05**. Es la perilla del reflejo
de barniz.
Si ahora te quedan quemadas (blanco plano sin detalle), bajá la exposición
a 1.20. Están las dos comentadas en el código para que las muevas sin
buscarlas.
---
## 5. Ondas en toda la pantalla
`fd-experiencia.js` v2. Ahora cada toque deja marca, en cualquier punto:
- **Sobre un botón**: onda completa — la interna recortada dentro del
botón nace en el punto exacto del dedo, y el anillo se escapa hacia
afuera. Dorada si la acción es de valor (comprar, jugar, reclamar…),
turquesa si no.
- **Sobre cualquier otro punto**: solo el anillo, más chico y más
apagado.
Esa diferencia de intensidad es deliberada: el jugador aprende con el
dedo qué zonas responden y cuáles son escenografía, sin que se lo
expliques. Se apaga con `FDExperiencia.ondasEnFondo = false`.
Las fichas de la mano también entran como pulsables, así que ahora
responden al toque.
---
## 6. Profundidad — `fd-profundidad.js`
"Se ve pegado" es literal: hoy el fondo, el brillo y las tarjetas están
todos a la misma distancia del ojo y nunca se mueven uno respecto al
otro, así que el cerebro los lee como una sola lámina. No hay sombra ni
degradado que arregle eso — la profundidad se percibe por **paralaje**.
El script mueve cuatro capas a distinta velocidad según cómo inclinás el
teléfono (giroscopio; puntero en escritorio):
| Capa | Factor |
|---|---|
| foto de fondo | 0.20 (casi quieta, es el horizonte) |
| aurora / brumas | 0.55 |
| partículas | 1.00 |
| contenido (`.fd-plano-frontal`) | −0.35 (al revés, para despegarse) |
Se calibra solo a cómo sostenés el teléfono en la primera lectura. En iOS
el permiso se pide en el primer toque, que es la única ventana en la que
iOS lo concede; si se niega, cae al puntero sin avisar.
Para que el contenido participe, poné `class="fd-plano-frontal"` en el
contenedor principal de cada pantalla (`.tienda-wrap`, `.pantalla`, etc.).
---
## 7. Material de interfaz `.fd-panel`
El CSS trae ahora un material único de vidrio con escalera de elevación
de tres peldaños. Cada peldaño lleva **dos** sombras: una corta y oscura
(contacto) y una larga y difusa (proyectada). Usar una sola sombra es lo
que hace que las tarjetas parezcan recortes de papel.
```html
…
…
…
```
Aplicá `.fd-panel` a las tarjetas de la tienda, los paneles del lobby y
los modales, y las cinco pantallas pasan a verse de la misma familia. Eso
—un material consistente— es lo que separa "app profesional" de
"colección de pantallas".
---
## 8. Integración
En cada HTML, después de `estilos.css`:
```html
```
Antes de `