// === Escena 04 — «El enlace» === [49.8 s · CLÍMAX de la pieza] // // LOCUCIÓN (audio/escena-04.mp3): mira arriba, fuera de la aplicación → casi todo lo que filtras // se escribe en la dirección → la ruta del proyecto; detrás, lo que buscas, quién la lleva y de // qué tipo es → caben seis cosas, aquí hay tres → cambias al tablero y la dirección cambia con // él → ahora cópiala y pégala → tu compañero la abre y le sale tu tablero, el // mismo → no le mandas una captura: le mandas la vista → con una condición: tiene que ser del // proyecto → LA ÚNICA COSA (prueba) → vamos con él. // // LA BARRA DE DIRECCIONES ES UN COMPONENTE PROPIO, no la de `BrowserChrome`: aquella es un // de 11 px con ellipsis en una línea (primitives.jsx:66-70) y una dirección real de esta // app —ruta con identificador de proyecto más `users` y `types` con identificadores completos de // 36 caracteres (ToSTR.vb:351-353)— se corta y no se lee ni parada. Aquí va a 30-32 px de // monoespaciada, con cada parámetro en su propia pastilla para poder señalarlos de uno en uno. // Los identificadores se pintan ENTEROS pero atenuados: se ve que son identificadores, que es la // verdad, sin obligar a nadie a leerlos. El plan pedía dos renglones y salen TRES: con los dos // identificadores completos a 30 px la query no cabe en uno, y antes que recortar un // identificador —que sería dibujar una dirección falsa— se gasta un renglón más. // // FIDELIDAD: // · «CASI todo lo que filtras»: `BuildFilterQuery` escribe seis cosas y los cinco atajos no // están entre ellas. La escena 06 nombra las excepciones; esta no promete de más. // · La persona ha puesto TRES filtros -> la dirección lleva exactamente `q`, `users` y `types`. // `statuses`, `nat` y `open` se dibujan en la LEYENDA, apagados; nunca dentro de la barra. // · La ruta de la tabla se llama `Workitems`; aquí se cambia a `Kanban`, que es lo que abre el // compañero. // · Quien no es miembro ve «No eres miembro de este proyecto.» y nada más. function EscenaTV04({ t }){ const T = { arriba:0.1, // "Mira arriba, fuera de la aplicación" -> velo sobre la app; la barra se amplia escribe:4.5, // "se escribe en la dirección" -> el primer parametro se escribe solo ruta:6.7, // "La ruta del proyecto" -> se resalta el tramo de la ruta detras:8.9, // "Detrás, lo que buscas" -> se resalta q quien:10.6, // "quién la lleva" -> se escribe y se resalta users tipo:11.2, // "de qué tipo es" -> se escribe y se resalta types seis:13.1, // "Caben seis cosas" -> la leyenda: tres encendidas, tres apagadas tres:14.4, // "aquí hay tres" -> las tres encendidas rematan tablero:16.2, // "Cambias al tablero" -> la palabra de la vista cambia cambia:17.2, // "y la dirección cambia con él" filtroentero:18.8,// "arrastrando el filtro entero" -> la query se queda quieta pausa:20.9, // (pausa 0.6 s) -> quietud total: anticipacion copia:21.8, // "Ahora cópiala" -> la direccion se selecciona entera y se copia pega:22.8, // "pégala en un mensaje" -> el mensaje con el enlace dentro compa:25.0, // "Tu compañero la abre" -> EL MOMENTO: segunda ventana, misma direccion suyo:26.5, // "y le sale tu tablero" mismo:28.5, // "El mismo." -> los dos tableros, lado a lado, identicos captura:30.1, // "No le mandas una captura" -> la captura fantasma se tacha en gris vista:32.8, // "le mandas la vista" condicion:34.8, // "Con una condición" delproyecto:36.1, // "tiene que ser del proyecto" -> tercera ventana, la de quien no es miembro sino:38.3, // "Si no, en vez de tus tareas" aviso:40.0, // "ve un aviso" -> el aviso literal, y nada mas unica1:41.7, // "La dirección es el filtro" -> UNICA COSA mitad 1 (prueba) unica2:43.4, // "se comparte pegándola" -> mitad 2 vamos:48.0, // "Vamos con él" -> se cierra la ventana propia; queda la del compañero colStep:0.10, // cascada entre columnas del tablero cardStep:0.07, // cascada entre tarjetas de una columna claveStep:0.09, // cascada entre las seis claves de la leyenda }; const PID='8f3c1d92-4b77-4e0a-9a51-2c6de07b1f44'; const UID='1d4b8e77-90c3-42a5-8e11-77bd9a4f0c62'; const TID='6a02f5c1-38de-4b9f-a7c4-051e83d6b28a'; // La barra ocupa tres renglones: host+ruta arriba y la query debajo, partida donde cabe. Con // los identificadores completos —36 caracteres cada uno— a 30 px de monoespaciada no entra en // dos: se prefiere un renglón más antes que recortar un identificador, que sería mentir. const ADX=210, ADY=150, ADW=1500; const enKanban = t >= T.tablero; const dos = t >= T.compa && t < T.vamos; // las dos ventanas, lado a lado const solo = t >= T.vamos; // solo la del compañero const velo = clamp((t-T.unica1)/0.7,0,1)*0.93 * (1-clamp((t-T.vamos)/0.6,0,1)); const u1E = Easing.easeOutCubic(clamp((t-T.unica1)/0.6,0,1))*(1-clamp((t-T.vamos)/0.45,0,1)); const u2E = Easing.easeOutCubic(clamp((t-T.unica2)/0.6,0,1))*(1-clamp((t-T.vamos)/0.45,0,1)); const Ico = ({ n, s=24, c='#64748B', sw=2 })=>{ const Q = { lupa: <>, escudo:, copiar:<>, check: , cerrar:, alerta:<>, imagen:<>, flecha:, }; return {Q[n]}; }; // Identificador completo, pero legible: los primeros ocho caracteres a plena tinta y el resto // atenuado. Se ve que es un identificador —que es la verdad— sin pedirle a nadie que lo lea. const Ident = ({ v, col='#0F172A' })=>( {v.slice(0,8)}{v.slice(8)} ); // Pastilla de un parámetro de la query: se escribe sola y se puede resaltar por separado. const Par = ({ k, hijo, from, foco })=>{ const p = clamp((t-from)/0.45,0,1); if (p <= 0) return null; const on = foco !== null && t >= foco && t < foco+1.7; const e = Easing.easeOutCubic(p); return ( {k} {hijo} ); }; const CLAVES = [ { k:'q', d:'lo que buscas', on:true }, { k:'users', d:'quién la lleva', on:true }, { k:'types', d:'de qué tipo es', on:true }, { k:'statuses', d:'en qué estado', on:false }, { k:'nat', d:'naturaleza', on:false }, { k:'open', d:'solo abiertas', on:false }, ]; // Las seis columnas del flujo, las mismas que enseña la escena 05. En una ventana estrecha // se ven cuatro y media, recortadas por el marco: es lo que hace un tablero de verdad. const COLS = [ { n:'Backlog', col:'#94A3B8', c:1, cards:['Etiquetas del blog'] }, { n:'Pendiente', col:'#0EA5E9', c:3, cards:['Revisar etiquetas de producto','Etiquetas con acentos rotos','Etiquetas del buscador'] }, { n:'En proceso', col:'#0085FF', c:2, cards:['Etiquetas duplicadas','Acentos en el catálogo'] }, { n:'Pausado', col:'#F59E0B', c:1, cards:['Etiquetas del pie'] }, { n:'25%', col:'#10B981', c:1, cards:['Etiquetas de envío'] }, { n:'Completado', col:'#059669', c:0, cards:[] }, ]; // Tablero mini: el mismo dibujo en las dos ventanas. Que sea el MISMO es la prueba. const Tablero = ({ desde, escala=1, colw=168 })=>(
{COLS.map((C,i)=>{ const e = Easing.easeOutCubic(clamp((t-desde-i*T.colStep)/0.4,0,1)); return (
{C.n} {C.c}
{C.cards.map((cd,j)=>(
{cd}
NTO
))}
); })}
); // Una ventana simulada con sus chips y su tablero: la propia y la del compañero son idénticas. const Ventana = ({ x, y, w, h, ruta, desde, rotulo, rotuloCol, op=1, anillo }) => (
{[['Abiertas','#DCFCE7','#15803D'],['Marta Ruiz','#E4F1FF','#0B4F86'],['Error','#E4F1FF','#0B4F86']].map(c=>( {c[0]} ))}
{rotulo && {rotulo}}
1000 ? 1.35 : 1} colw={w > 1000 ? 205 : 168}/>
); // Geometría de las ventanas: una sola centrada -> dos lado a lado -> solo la del compañero. const gemP = Easing.easeInOutCubic(clamp((t-T.compa+0.35)/0.7,0,1)); const propiaX = lerp(300, 170, gemP), propiaW = lerp(1320, 760, gemP); const dimTerc = clamp((t-T.delproyecto+0.2)/0.5,0,1)*0.72; return (
La dirección lleva el filtro puesto}/>
{/* ═════════ LA BARRA DE DIRECCIONES · el protagonista de la escena ═════════ */} {(()=>{ const p = clamp((t-T.arriba)/0.8,0,1), e = Easing.easeOutBack(p); const salida = clamp((t-T.unica1)/0.6,0,1); if (salida >= 1) return null; const sel = t >= T.copia && t < T.copia+2.2; const rutaOn = t >= T.ruta && t < T.ruta+1.9; const cambiando = t >= T.tablero && t < T.tablero+1.6; return (
{/* línea 1 · el host y la ruta */}
play.dinaup.com /App/ToDo/ / {enKanban ? 'Kanban' : 'To-Do'}
{/* línea 2 · la query, parámetro a parámetro */}
} from={T.escribe} foco={T.detras}/> } from={T.quien-0.35} foco={T.quien}/> } from={T.tipo-0.35} foco={T.tipo}/>
{/* la selección entera + «copiado» */} {sel && (
)}
{t >= T.copia && t < T.compa && (
Copiado
)} {/* «arrastrando el filtro entero»: la query no se ha movido */} {t >= T.filtroentero && t < T.copia-0.3 && (
la vista cambia · el filtro no se mueve
)}
); })()} {/* ═════════ La leyenda: caben seis cosas, aquí hay tres ═════════ */} {(()=>{ const p = clamp((t-T.seis)/0.4,0,1), out = clamp((t-T.pega+0.6)/0.5,0,1); if (p <= 0 || out >= 1) return null; return (
{CLAVES.map((c,i)=>{ const e = Easing.easeOutBack(clamp((t-T.seis-i*T.claveStep)/0.4,0,1)); const remate = c.on && t >= T.tres && t < T.tres+1.2 ? Math.sin((t-T.tres)/1.2*Math.PI) : 0; return (
0 ? `0 0 ${remate*26}px rgba(0,133,255,0.55)` : 'none', opacity:(c.on ? 1 : 0.55)*clamp((t-T.seis-i*T.claveStep)/0.3,0,1), transform:`translateY(${(1-e)*10}px)`}}>
{c.k}
{c.d}
); })}
Caben seis. Aquí hay tres: solo se escribe lo que has puesto.
); })()} {/* «pégala en un mensaje» */} {(()=>{ const p = clamp((t-T.pega)/0.4,0,1), out = clamp((t-T.captura+0.5)/0.4,0,1); if (p <= 0 || out >= 1) return null; const e = Easing.easeOutBack(p); return (
Para Javier
play.dinaup.com/App/ToDo/{PID.slice(0,8)}…/Kanban?q=etiquetas&users=…&types=…
); })()} {/* «No le mandas una captura»: la captura fantasma, tachada */} {(()=>{ const p = clamp((t-T.captura)/0.4,0,1), out = clamp((t-T.condicion+0.4)/0.4,0,1); if (p <= 0 || out >= 1) return null; const tacha = Easing.easeInOutCubic(clamp((t-T.captura-0.5)/0.6,0,1)); const vistaP = clamp((t-T.vista)/0.4,0,1); return (
una captura de pantalla
{vistaP > 0 && (
le mandas la vista
)}
); })()} {/* ═════════ LAS VENTANAS ═════════ */} {!solo && (
0.1 ? 'saturate(0.55)' : 'none'}}> {dos && ( = T.mismo && t < T.mismo+2.4 ? '#0085FF' : null}/> )} {/* «El mismo.» — el sello que cierra la prueba */} {t >= T.mismo && t < T.condicion && (
El mismo tablero
)}
)} {/* ═════════ El borde: quien no es del proyecto ═════════ */} {(()=>{ const p = clamp((t-T.delproyecto)/0.5,0,1), out = clamp((t-T.unica1+0.3)/0.5,0,1); if (p <= 0 || out >= 1) return null; const e = Easing.easeOutBack(p); const avP = clamp((t-T.aviso)/0.45,0,1); return (
QUIEN NO ES DEL PROYECTO
No eres miembro de este proyecto. y nada más
); })()} {/* ═════════ LA ÚNICA COSA · prueba ═════════ */} {velo > 0.01 &&
} {u1E > 0 && (
La dirección es el filtro,
)} {u2E > 0 && (
y se comparte pegándola.
)} {/* ═════════ «Vamos con él»: se cierra la propia; queda la del compañero ═════════ */} {solo && (()=>{ const e = Easing.easeOutCubic(clamp((t-T.vamos)/0.75,0,1)); return (
{[['Abiertas','#DCFCE7','#15803D'],['Marta Ruiz','#E4F1FF','#0B4F86'],['Error','#E4F1FF','#0B4F86']].map(c=>( {c[0]} ))}
Él lo ha abierto en el tablero. Vamos con él.
); })()} ); } Object.assign(window, { EscenaTV04 });