// === Escena 02 — «La fila compacta» === [45.1 s · 11 beats del plan] // // LOCUCIÓN (audio/escena-02.mp3): esta es la fila, de izquierda a derecha → el círculo es el // estado, lo pulsas y salen los pasos del flujo → si espera a otra, se vuelve candado y desde // aquí ya no cambias el estado → el título y su tipo → otro candado con cuántas van antes → el // vencimiento en palabras → la foto de quien la lleva, la pulsas y queda cambiada → los tres // puntos → al pie escribes y pulsas intro → esto va bien con veinte; ¿y con doscientas? // // LA VENTANA DE LA ESCENA 01 SIGUE DEBAJO, atenuada: la fila ampliada es una LUPA sobre su // propia lista, no una ilustración suelta. Así el lienzo está lleno de arriba abajo en todo // momento y el espectador nunca pierde dónde está. Al llegar al alta de una tecla la lupa se // retira y la ventana recupera su luz: el gesto ocurre donde ocurre de verdad, al pie de la lista. // // FIDELIDAD · LOS DOS CANDADOS SON LA MISMA RAMA (StatusButtonCompactU.razor:5 y // WorkItemCompactU.razor:24 comparten la condición `CantidadDePredecesorasPendientes > 0`): // antes de T.candado la fila tiene círculo pulsable y NINGÚN candado; a partir de T.candado // tiene LOS DOS y el estado no se toca. La fila «círculo pulsable + candado con cifra» no existe // y aquí no se dibuja en ningún fotograma. El beat «otro candado» (19.05) no lo hace aparecer: // solo lo señala, porque ya estaba. // // FIDELIDAD · El marcador del alta NO es un rótulo fijo: es «Agregar » + el nombre del tipo + // «...» (InlineTaskAddU.razor:33). Este inquilino está traducido, así que pone «Agregar Tarea...». function EscenaTV02({ t }){ const T = { fila:0.1, // "Esta es la fila" -> la lupa se levanta sobre la lista circulo:3.3, // "El círculo del principio" -> halo sobre el circulo de estado pulsas:5.6, // "lo pulsas y salen" -> el cursor pulsa el circulo flujo:6.5, // "los pasos del flujo" -> el desplegable de estados se abre espera:8.5, // "Si la tarea espera a otra" -> el desplegable se cierra candado:10.8, // "se vuelve un candado" -> circulo -> candado SIN numero, y a la vez el de la cifra noestado:12.9, // "Desde aquí ya no cambias el estado" -> el desplegable, en gris y tachado titulo:15.7, // "Luego el título" -> halo sobre el titulo tipo:16.5, // "y su tipo" -> halo sobre la etiqueta de tipo candado2:19.1, // "otro candado" -> foco en el SEGUNDO candado, el de la franja derecha cuantas:19.6, // "con cuántas van antes" -> la cifra se realza vence:21.8, // "El vencimiento va en palabras" -> foco en el vencimiento palabras:23.7, // "hoy, mañana, ayer" -> la fecha pasa a «Hoy» y sale el vocabulario avatar:26.3, // "la foto de quien la lleva" -> halo sobre el avatar reasigna:28.5, // "La pulsas, eliges a otra" -> buscador de miembros; la foto cambia puntos:32.0, // "Los tres puntos" -> el menu con sus opciones literales alta:35.9, // "Al pie escribes" -> la lupa se retira; la caja de alta al pie intro:36.9, // "pulsas intro" -> la tecla se pulsa y la tarea entra veinte:38.6, // "Esto va bien con veinte tareas" -> el recuento doscientas:41.1,// "¿Y con doscientas?" -> la lista se multiplica y se vuelve ilegible arriba:43.4, // "Mira arriba" -> la barra de filtros se enciende filaStep:0.07, // cascada entre filas de la lista marStep:0.045, // cascada entre filas de la marea de doscientas opcStep:0.045, // cascada entre opciones de un desplegable }; // ── La ventana, idéntica a la de la escena 01 ───────────────────────────────────────────── const WX=180, WY=150, WW=1560, CHR=76; const AY=WY+CHR, SBW=300, MX=WX+SBW, MW=WW-SBW; const HDR=AY+92, BAR=HDR+84; // 318 · 402 · la lista arranca en 462 const ROWH=68, ADDY=938; // ── La lupa: la fila ampliada, 1480 de ancho, sobre la lista ───────────────────────────── const RX=220, RW=1480, RY=402, RH=104; const P = { estado:272, titulo:600, tipo:975, cand:1095, vence:1225, prio:1355, clave:1470, avatar:1574, dots:1645 }; const bloqueada = t >= T.candado; // la rama: los dos candados, o ninguno const reasignada = t >= T.reasigna + 1.15; const lupaP = clamp((t-T.fila)/0.7,0,1), lupaE = Easing.easeOutBack(lupaP); const lupaOut = clamp((t-T.alta)/0.55,0,1); // la lupa se retira y la ventana recupera su luz const appOp = lerp(0.30, 1, lupaOut); const mareaP = clamp((t-T.doscientas)/0.9,0,1); const cuenta = useCountUp(20, 200, T.doscientas, 1.1, t); const arribaE = Easing.easeOutBack(clamp((t-T.arriba)/0.55,0,1)); const Ico = ({ n, s=24, c='#64748B', sw=2 })=>{ const Q = { lock: <>, dots: <>, lupa: <>, filtro:, folder:, compacta:, kanban:<>, tabla: <>, gantt: <>, check: , flecha:, }; return {Q[n]}; }; // Rótulo con línea de guía: sale, señala una pieza de la fila y se retira solo. const Rotulo = ({ cx, texto, from, dur=2.6 })=>{ const p = clamp((t-from)/0.32,0,1), out = clamp((t-from-dur)/0.4,0,1); if (p <= 0 || out >= 1 || lupaOut > 0.2) return null; const e = Easing.easeOutBack(p); const op = p*(1-out); return ( <>
{texto}
); }; const Halo = ({ x, y, w, h, from, dur=2.6, r=12, color='#0085FF' })=>{ const p = clamp((t-from)/0.3,0,1), out = clamp((t-from-dur)/0.4,0,1); if (p <= 0 || out >= 1 || lupaOut > 0.2) return null; return
; }; const ESTADOS = ['Pendiente','En proceso','Pausado','Completado']; const MENU = ['Vence Hoy','Vence mañana','Vence prox. Lunes.','Vence prox. Jueves.','Urgente','Muy Alta','Alta','Media','Cerrar tarea','Eliminar']; const MIEMBROS = [ { n:'Marta Ruiz', f:'../_engine/assets/avatares/marta.jpg' }, { n:'Ana Costa', f:'../_engine/assets/avatares/nuria.jpg' }, { n:'Carlos Vega', f:'../_engine/assets/avatares/carlos.jpg' }, ]; const LISTA = [ { c:'NTO-21', ti:'Importar catálogo del proveedor', tp:'Tarea', tc:'#0085FF', a:'javier', v:'Mañana', hero:true }, { c:'NTO-14', ti:'Revisar etiquetas de producto', tp:'Error', tc:'#DC2626', a:'marta', v:'Hoy' }, { c:'NTO-08', ti:'Pasarela de pago en pruebas', tp:'Tarea', tc:'#0085FF', a:'nuria', v:'18 ago' }, { c:'NTO-33', ti:'Etiquetas duplicadas en el buscador', tp:'Error', tc:'#DC2626', a:'marta', v:'Ayer' }, { c:'NTO-05', ti:'Fotos de la portada', tp:'Mejora', tc:'#7C3AED', a:'nuria', v:'21 ago' }, { c:'NTO-40', ti:'Aviso de cookies', tp:'Tarea', tc:'#0085FF', a:'javier', v:'' }, ]; const MAREA = ['Etiquetas con acentos rotos','Alta del transportista','Revisar textos legales','Cupones de descuento', 'Buscador interno','Fichas sin foto','Alta de proveedor','Devoluciones','Correos de aviso','Portes por zona', 'Migrar inventario','Sello de tiempo','Formulario de contacto','Facturas en pdf','Tallas y colores', 'Descuento por volumen','Aviso de stock','Alta de marca','Filtros del catálogo','Etiquetas del blog']; return ( Una fila, de izquierda a derecha}/> {/* ═════════ LA VENTANA · el suelo de la escena, atenuado mientras manda la lupa ═════════ */}
{['Inicio','Mi día','Todas las tareas'].map(x=>(
{x}
))}
PROYECTOS
{[['Nueva tienda online',true],['Reforma del obrador',false],['Web corporativa',false]].map(x=>(
{x[0]}
))}
Nueva tienda online NTO
{['marta','javier','nuria'].map((a,i)=>( ))}
{['compacta','kanban','tabla','gantt'].map((v,i)=>( ))} Filtros Buscar… (escribe nat: @ tipo: estado: o abiertas)
Abiertas ✕
{/* La lista: siete huecos de 68 y la caja de alta clavada al pie */}
{LISTA.map((f,i)=>{ const e = Easing.easeOutCubic(clamp((t-0.3-i*T.filaStep)/0.45,0,1)); const esHero = f.hero && lupaOut < 1; // la fila que la lupa está ampliando return (
{f.ti} {f.tp} {f.v} {f.c}
); })} {/* La tarea escrita al pie entra en verde cuando se pulsa intro */} {t >= T.intro && (
Fotos de las cajas de envío Tarea NTO-41
)} {/* La marea: filas finas, apretadas, ilegibles */} {mareaP > 0 && (
{Array.from({length:20}).map((_,i)=>(
{MAREA[i % MAREA.length]} NTO-{100+i}
))}
)}
{/* La caja de alta, clavada al pie de la lista (coordenadas del lienzo). Está desde el primer fotograma, como en la app: lo que cambia en T.alta es quién manda en la escena. */}
= T.alta+0.35 && t < T.intro) ? '#0F172A' : '#94A3B8'}}> {(t >= T.alta+0.35 && t < T.intro) ? : 'Agregar Tarea...'} {t >= T.alta && }
{/* ═════════ LA LUPA · la fila ampliada sobre su propia lista ═════════ */} {lupaOut < 1 && (
{/* estado: círculo pulsable HASTA que la tarea queda bloqueada; después, candado sin número */}
{bloqueada ? : }
Importar catálogo del proveedor Tarea {/* segundo candado: MISMA rama, entra a la vez (+0.12 s para que se lea como un gesto) */} {bloqueada && ( = T.cuantas && t < T.cuantas+1.3) ? `0 0 ${Math.sin((t-T.cuantas)/1.3*Math.PI)*20}px rgba(180,83,9,0.85)` : 'none'}}>2 )} = T.palabras ? 700 : 500, color:t >= T.palabras ? '#B45309' : '#64748B'}}>{t >= T.palabras ? 'Hoy' : 'Mañana'} Alta NTO-21
)} {/* Rótulos del recorrido: uno por beat */} {/* ── El desplegable de estados: se abre al pulsar el círculo y se cierra al bloquearse ── */} {(()=>{ const p = clamp((t-T.flujo)/0.4,0,1), out = clamp((t-T.espera)/0.4,0,1); if (p <= 0 || out >= 1) return null; const e = Easing.easeOutBack(p); return (
{ESTADOS.map((s,i)=>(
{s}
))}
); })()} {/* «Desde aquí ya no cambias el estado»: el mismo desplegable, en gris y tachado */} {(()=>{ const p = clamp((t-T.noestado)/0.4,0,1), out = clamp((t-T.noestado-2.4)/0.4,0,1); if (p <= 0 || out >= 1) return null; const tacha = Easing.easeInOutCubic(clamp((t-T.noestado-0.3)/0.55,0,1)); return (
{ESTADOS.map(s=>(
{s}
))}
ni se abre
); })()} {/* «hoy, mañana, ayer»: el vocabulario de las fechas cercanas */} {(()=>{ const p = clamp((t-T.palabras)/0.4,0,1), out = clamp((t-T.palabras-2.4)/0.4,0,1); if (p <= 0 || out >= 1) return null; return (
{['Hoy','Mañana','Ayer'].map((w,i)=>( {w} ))}
); })()} {/* «La pulsas, eliges a otra»: el buscador de miembros, sin abrir la tarea */} {(()=>{ const p = clamp((t-T.reasigna)/0.4,0,1), out = clamp((t-T.reasigna-2.9)/0.4,0,1); if (p <= 0 || out >= 1) return null; const e = Easing.easeOutBack(p); return (
Buscar miembro…
{MIEMBROS.map((m,i)=>{ const elegida = i === 1 && t >= T.reasigna+0.95; return (
{m.n} {elegida && }
); })}
); })()} {/* «Los tres puntos»: el mismo menú que el botón derecho, con sus opciones literales */} {(()=>{ const p = clamp((t-T.puntos)/0.4,0,1), out = clamp((t-T.puntos-3.1)/0.4,0,1); if (p <= 0 || out >= 1) return null; const e = Easing.easeOutBack(p); return (
{MENU.map((m,i)=>(
{m}
))}
); })()} {/* El recuento: veinte -> doscientas */} {t >= T.veinte && t < T.arriba+0.9 && (
0.3 ? '#B42318' : '#0085FF'}}>{cuenta} tareas en la lista
)} {/* «Mira arriba»: la barra de filtros se enciende — puente a la escena 3 */} {t >= T.arriba && (
)} ); } Object.assign(window, { EscenaTV02 });