// === Escena 05 — "El equipo" === // «Leaderboard — Pipeline por Comercial»: insignia #N, nombre, «(N opp.)», total en verde y // «(N € ponderado)» en azul (Dashboard:145-155). Sin paginar (:143) y ordenado por el PONDERADO // (:254): por eso el primero tiene menos total que el segundo, y se ve sin que la voz lo explique. // Solo entra la oportunidad con comercial asignado (:244) — de ahí que el reparto sume 214.900 € // y 27 frente a los 231.700 € y 31 de los marcadores. Y la ayuda vive plegada tras un «?» // (CardTitle:38-43, 47-70): en pantalla, por defecto, solo hay un interrogante. function EscenaPN05({ t }){ // LOCUCIÓN (audio/escena-05.mp3): el reparto por comercial → puesto y nombre → total en verde → // pausa → un detalle que cambia la lectura → no se ordena por el total → se ordena por el // ponderado → el que más apunta → solo con comercial asignado → detrás del interrogante. const T = { reparto:0.3, // "El reparto por comercial" -> la tarjeta del leaderboard entra filas:3.0, // "su puesto, su nombre" -> las 3 filas en cascada; insignias #1 #2 #3 filaStep:0.16, // (incremento de la cascada de filas) cifras:7.8, // "su total en verde" -> los totales y los ponderados aterrizan detalle:11.6, // "un detalle que cambia la lectura" -> nada se mueve: el beat es la calma noTotal:14.1, // "no se ordena por el total" -> la columna verde, tachada como criterio porPond:16.0, // "Se ordena por el ponderado" -> la columna azul se subraya; flecha ↓ apunta:19.7, // "el que más apunta" -> el 96.400 de la fila 2 pulsa sobre el 74.200 asignado:23.3, // "llevan comercial asignado" -> 4 oportunidades sin cara caen fuera caraStep:0.11, // (incremento de la caída de las cuatro sin comercial) interrogante:27.8,// "detrás del interrogante" -> el botón «?»; el panel se despliega salida:32.6, // "no te está diciendo" -> salida: tres huecos numerados esperando }; const LEADER = [ { pos:'#1', nom:'Sergio Lamas', opp:'(7 opp.)', tot:'74.200 €', pon:'(44.900 € ponderado)' }, { pos:'#2', nom:'Nuria Peláez', opp:'(11 opp.)', tot:'96.400 €', pon:'(28.100 € ponderado)' }, { pos:'#3', nom:'Iván Castro', opp:'(9 opp.)', tot:'44.300 €', pon:'(23.300 € ponderado)' }, ]; const Ico = ({ n, s=24, c='#0F172A', w=2 })=>{ const P = { leader:<>, user:<>, help:<>, }; return {P[n]}; }; // ── Geometría de la fila (contenido 1640 dentro de la tarjeta de 1700) ── const COL = { badge:76, opp:140, tot:200, pon:300, gap:24 }; const CARD_Y = 290, HEAD_H = 84, ROW_H = 96; const X_TOT = 1256, X_PON = 1480; // x en el lienzo de las dos columnas de cifras // ── Progresos ── const rpP = clamp((t-T.reparto)/0.8,0,1), rpE = Easing.easeOutBack(rpP); const noTotP = clamp((t-T.noTotal)/0.5,0,1); const noTotTacha = Easing.easeInOutCubic(clamp((t-T.noTotal-0.2)/0.7,0,1)); const ponP = clamp((t-T.porPond)/0.5,0,1); const ponSub = Easing.easeInOutCubic(clamp((t-T.porPond-0.15)/0.7,0,1)); const flecha = Easing.easeInOutCubic(clamp((t-T.porPond-0.4)/0.9,0,1)); const pulso = t >= T.apunta && t < T.apunta+1.4 ? Math.sin((t-T.apunta)/1.4*Math.PI) : 0; const asP = clamp((t-T.asignado)/0.6,0,1); const anexosOut = clamp((t-T.interrogante+0.5)/0.5,0,1); const ayudaP = clamp((t-T.interrogante)/0.7,0,1), ayudaE = Easing.easeOutCubic(ayudaP); const ayudaH = 152*ayudaE; const salP = clamp((t-T.salida)/0.8,0,1), salE = Easing.easeOutCubic(salP); const cursor = [ { t:0.5, x:1860, y:1035 }, { t:26.9, x:1860, y:1035 }, { t:27.7, x:1758, y:332 }, { t:31.6, x:1758, y:332 }, { t:32.6, x:1860, y:1035 }, ]; return (
Quién lleva cada cosa}/>
{/* ── Leaderboard — Pipeline por Comercial ── */}
Leaderboard — Pipeline por Comercial
0 ? '#1565c0' : '#CBD5E1'}`, background:ayudaP > 0 ? 'rgba(21,101,192,0.10)' : '#fff', transform:`scale(${lerp(1,1.1,ayudaP)})`}}> 0 ? '#1565c0' : '#64748B'} w={2}/>
{/* El panel de ayuda, plegado hasta que se pulsa el «?» */}
2 ? '1px solid rgba(21,101,192,0.18)' : 'none'}}>
Solo oportunidades abiertas. El valor ponderado se calcula multiplicando el importe estimado por la probabilidad de cierre de cada oportunidad.
{LEADER.map((r,i)=>{ const e = Easing.easeOutCubic(clamp((t-T.filas-i*T.filaStep)/0.5,0,1)); const cf = clamp((t-T.cifras-i*0.12)/0.5,0,1); const cfE = Easing.easeOutBack(cf); const glow = i === 1 ? pulso : 0; return (
{r.pos} {r.nom} {r.opp} {r.tot} {r.pon}
); })}
{/* La columna del total, tachada como criterio de orden */} {noTotP > 0.01 && (
{[0,1,2].map(i=>( ))}
)}
{/* ─────────── Los dos criterios, bajo sus columnas ─────────── */} {noTotP > 0.01 && (
no es el criterio
)} {ponP > 0.01 && (
este es el criterio
)} {/* ─────────── Las cuatro que no llevan comercial se quedan fuera ─────────── */} {asP > 0.01 && (
SIN COMERCIAL ASIGNADO
{[0,1,2,3].map(i=>{ const e = Easing.easeOutCubic(clamp((t-T.asignado-0.2-i*T.caraStep)/0.55,0,1)); return (
); })}
{/* La cuenta que cierra: el reparto no suma lo que suman los marcadores */}
214.900 €
27 en el reparto
+
16.800 €
4 sin comercial
=
231.700 €
31 en el marcador
)} {/* ─────────── Salida: quedan tres cosas por decir ─────────── */} {salP > 0.01 && (
{['1','2','3'].map((n,i)=>{ const e = Easing.easeOutBack(clamp((t-T.salida-i*0.14)/0.5,0,1)); return ( {n} ); })}
)} ); } Object.assign(window, { EscenaPN05 });