feat(gioser/web): fix mobile swipe, taskbar agnóstica, trazos zodiacales
Mobile drag fix (vista-web):
- pointermove listener ahora con `AddEventListenerOptions { passive: false }`.
Sin esto, en navegadores móviles `preventDefault()` es no-op y el browser
se traga el gesto horizontal como pan/scroll antes de que JS pueda
detectar la dirección y capturar el pointer.
- CSS: `.deck-strip` y `.deck-strip *` y `.deck-page` con
`touch-action: pan-y`. El touch-action del target inmediato es lo que
el browser consulta; sin esto, sobre un <p> dentro del strip el browser
asume `auto` y reclama horizontal.
Taskbar agnóstica (barra-web):
- Nuevo crate `crates/modules/barra/barra-web` que maneja sólo el LIST
dinámico de tareas; el resto del layout (home, brand, credits) es del
host. Misma filosofía que vista-web: separar lo reusable.
- API: Task::new(id, label).active() builder; TaskList::mount(ul) +
set_tasks/on_click/task_center. Click delegado, callback recibe
(id, cx, cy) en CSS pixels para origin de animaciones.
- Sanitiza IDs a [a-zA-Z0-9_-] y HTML-escapa labels.
- 3 tests unitarios.
- gioser-web refactoreado para consumir TaskList: sync_taskbar arma
Vec<Task> y delega; on_click del taskbar dispara minimize/restore_from_tab
según estado. install_taskbar reducido a sólo home buttons.
Trazos zodiacales (gioser-shaders + canvas-web):
- 12 líneas radiales muy sutiles entre la chacana y el aro principal, una
por signo, con colores significativos:
Aries→fuego rojo, Tauro→tierra verde, Géminis→aire amarillo,
Cáncer→agua plata, Leo→fuego dorado, Virgo→tierra marrón,
Libra→aire rosa, Escorpio→agua rojo profundo, Sagitario→fuego púrpura,
Capricornio→tierra verde oscuro, Acuario→aire celeste, Piscis→agua
verde mar.
- Aries empieza en el norte, giran en sentido horario (rueda zodiacal
clásica). Banda radial r∈[1.05*L, 0.96*ringR_main], gauss angular
con σ=0.0042 rad (~0.24° de ancho), multiplier 0.55 → apenas visible.
- Uniform `vec3 u_zodiac[12]` subido como array plano de 36 floats vía
uniform3fv. Constante ZODIAC_COLORS expuesta en canvas-web por si otros
callers la quieren.
Workspace verde + 21 tests (geom 6 + palette 4 + physics 3 + pluma-md 5
+ barra-web 3).
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -185,7 +185,11 @@ body.deck-active-fuego .deck { --deck-glow: rgba(245, 144, 86, 0.28); }
|
||||
body.deck-active-agua .deck { --deck-glow: rgba(108, 208, 243, 0.22); }
|
||||
body.deck-active-tierra .deck { --deck-glow: rgba(212, 152, 115, 0.24); }
|
||||
|
||||
/* Strip horizontal con páginas — vista-web traslada esto. */
|
||||
/* Strip horizontal con páginas — vista-web traslada esto.
|
||||
touch-action: pan-y declara al browser "yo manejo horizontal, el
|
||||
vertical (scroll interno de cada página) lo dejas pasar". Sin esto
|
||||
el navegador móvil se traga el gesto horizontal antes de que JS
|
||||
pueda capturarlo. */
|
||||
.deck-strip {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -194,6 +198,13 @@ body.deck-active-tierra .deck { --deck-glow: rgba(212, 152, 115, 0.24); }
|
||||
transform: translate3d(var(--vista-offset, 0px), 0, 0);
|
||||
transition: transform 360ms var(--ease-page);
|
||||
will-change: transform;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
/* Asegurar que TODOS los descendientes del strip hereden el contrato
|
||||
touch-action — si el toque llega a un párrafo o <a>, el browser
|
||||
chequea el touch-action del target, no del padre. */
|
||||
.deck-strip * {
|
||||
touch-action: pan-y;
|
||||
}
|
||||
.deck-strip.vista-dragging,
|
||||
.deck-strip.vista-instant {
|
||||
@@ -207,9 +218,7 @@ body.deck-active-tierra .deck { --deck-glow: rgba(212, 152, 115, 0.24); }
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
/* contenido alineado al pop-snap mismo si la lista de páginas viviera
|
||||
dentro de scroll nativo; con vista-web esto es informativo nomás. */
|
||||
scroll-snap-align: start;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
.deck-page[data-element="aire"] { --page-accent: var(--aire); }
|
||||
.deck-page[data-element="fuego"] { --page-accent: var(--fuego); }
|
||||
|
||||
Reference in New Issue
Block a user