import React from "react"; import { AbsoluteFill, OffthreadVideo, Sequence, staticFile, useCurrentFrame, useVideoConfig, interpolate, Easing, } from "remotion"; import { Pause, Play, Gauge, Radio, ArrowRightLeft, Check, X as XIcon, TrendingUp, Sparkles, ArrowUp, } from "lucide-react"; import { ClubLogo } from "@game/GameInterface/Components/ClubLogo"; import { ScreenFrame } from "../components/ScreenFrame"; import { MATCH_SNAPSHOT } from "../data/matchSnapshot"; // ───────────────────────────────────────────────────────────────────────────── // Match scene — 5-beat narrative built around 3 real engine recordings: // // 1. fail.mov Garcia gets a chance and blasts it over (5.0s) // 2. SubOverlay Garcia ⇄ Mbappé substitution panel (2.4s) // 3. shot_miss.mov Mbappé in position but his shot misses (3.3s) // 4. TrainingOverlay Mbappé's finishing stat trains up (2.4s) // 5. goal.mov Mbappé scores (3.5s) // // Total: ~18.0s. The TopNav + ScoreBar + team panels + broadcast bar persist // across all five beats — only the pitch area swaps between videos and UI // overlays. // ───────────────────────────────────────────────────────────────────────────── const eo = Easing.bezier(0.16, 1, 0.3, 1); // Beat timing in seconds (scene-relative). const T = { failStart: 0.0, failEnd: 5.0, subStart: 5.2, subEnd: 7.6, missStart: 7.8, missEnd: 11.1, trainStart:11.3, trainEnd: 13.7, goalStart: 13.9, goalEnd: 17.4, sceneEnd: 17.5, } as const; const HOME = { name: "Real Madrid", color: MATCH_SNAPSHOT.homeColor, accent: MATCH_SNAPSHOT.homeAccent, logo: "logos/la_liga/real_madrid.svg", }; const AWAY = { name: "Barcelona", color: MATCH_SNAPSHOT.awayColor, accent: MATCH_SNAPSHOT.awayAccent, logo: "logos/la_liga/barcelona.svg", }; // ───────────────────────────────────────────────────────────────────────────── export const MatchScene: React.FC = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const t = frame / fps; // Scene-level fade in/out. const fadeIn = interpolate(frame, [0, fps * 0.4], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: eo, }); const fadeOut = interpolate(frame, [T.sceneEnd * fps - fps * 0.3, T.sceneEnd * fps], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp", }); // Stoppage-time clock — same format the actual game uses for second-half // injury time: "90+X'". Builds drama by parking the match in the final // seconds across every beat of the narrative. const clockStr = t < T.failStart + 1.5 ? "90+1'" : t < T.failEnd ? "90+2'" : t < T.subStart ? "90+2'" : t < T.subEnd ? "90+2'" // game paused for sub : t < T.missEnd ? "90+3'" : t < T.trainEnd ? "BREAK" // training is between-match montage : "90+3'"; // back to in-match — the last gasp // Score — starts at 1-1 (Barça already scored earlier in the half) and // Real Madrid chase the winner in stoppage time. Flips to 2-1 at the goal. const goalFlipped = t > T.goalStart + 2.0; const scoreA = goalFlipped ? 2 : 1; const scoreB = 1; // Beat-driven broadcast lines — amped for late-game drama. 1-1 in stoppage // time, Real Madrid chasing the winner. const broadcastLine = t < T.failStart + 1.5 ? "1-1 and time running out — Garcia driving into the area…" : t < T.failEnd ? "Picks his spot for the winner…" : t < T.failEnd + 1.0 ? "OFF THE BAR! GARCIA HAS MISSED IT! Bernabéu silent…" : t < T.subStart ? "" : t < T.subEnd ? "MANAGER throws on MBAPPÉ — last roll of the dice at 1-1." : t < T.missStart + 1.5 ? "Mbappé in behind — clean through…" : t < T.missEnd ? "SLICED WIDE! He couldn't finish it! Heads in hands…" : t < T.trainEnd ? "Cut to training — Mbappé drills finishing all week." : t < T.goalStart + 1.4 ? "Back to the match. Still 1-1. Mbappé one-on-one…" : t < T.goalEnd - 0.5 ? "He shoots…" : "GOOOOAAAL! MBAPPÉ! 90+3' — RM 2 — 1 BAR! HE'S WON IT!"; return (
); }; // Linear clock advance helper. function lerpClock(t: number, t0: number, t1: number, c0: number, c1: number) { const k = Math.max(0, Math.min(1, (t - t0) / Math.max(0.0001, t1 - t0))); return c0 + (c1 - c0) * k; } // ───────────────────────────────────────────────────────────────────────────── // Pitch area — sequences each beat in absolute time. // ───────────────────────────────────────────────────────────────────────────── const PITCH_W = 1200; const PITCH_H = 666; const PitchArea: React.FC<{ fps: number }> = ({ fps }) => { const dur = (s0: number, s1: number) => Math.ceil((s1 - s0) * fps); return (
); }; // ───────────────────────────────────────────────────────────────────────────── // Beat: video clip. Each beat is a fresh , so frame=0 here = beat start. // ───────────────────────────────────────────────────────────────────────────── const BeatVideo: React.FC<{ src: string; duration: number }> = ({ src, duration }) => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const opacity = interpolate( frame, [0, fps * 0.2, duration * fps - fps * 0.2, duration * fps], [0, 1, 1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }, ); return ( ); }; // ───────────────────────────────────────────────────────────────────────────── // Beat: substitution panel — visual matches the real SubstitutionPanel.tsx. // // Timeline (within the 2.4s beat): // 0.0–0.3s : modal slides up + dims pitch // 0.3–1.0s : Garcia row highlights red ("OUT") // 1.0–1.7s : Mbappé row highlights green ("IN"), arrow connects them // 1.7–2.2s : pending banner pulses "✓ Substitution made" // 2.2–2.4s : fades out // ───────────────────────────────────────────────────────────────────────────── const SubOverlay: React.FC<{ duration: number }> = ({ duration }) => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const t = frame / fps; const dimIn = interpolate(t, [0, 0.3], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: eo }); const modalIn = interpolate(t, [0, 0.4], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.bezier(0.34, 1.56, 0.64, 1) }); const modalY = interpolate(t, [0, 0.4], [40, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: eo }); const outHi = interpolate(t, [0.3, 0.6], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: eo }); const inHi = interpolate(t, [0.9, 1.3], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: eo }); const arrow = interpolate(t, [0.6, 1.2], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: eo }); const confirm = interpolate(t, [1.5, 1.8], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.bezier(0.34, 1.56, 0.64, 1) }); const exit = interpolate(t, [duration - 0.2, duration], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }); return ( {/* Backdrop dim */}
{/* Faint pitch behind so context isn't lost */}
{/* Modal */}
{/* Header — mirrors SubstitutionPanel.tsx */}

Player Swap

XI Avg 7.4 · Bench Avg 7.0 4 remaining
{/* Tabs */}
Player Swap
Formation
{/* Swap arena: two rows side by side */}
On Pitch
Bench
{/* Big swap arrow between the two — visible after Garcia is selected */}
Gonzalo García Kylian Mbappé
{/* Confirmation banner */}
Substitution made · 90+2'
); }; const PlayerSubRow: React.FC<{ role: string; name: string; rating: number; kind: "in" | "out"; highlight: number; // 0..1 }> = ({ role, name, rating, kind, highlight }) => { const color = kind === "out" ? "rgb(248,113,113)" : "rgb(52,211,153)"; // red-400 / emerald-400 return (
0.1 ? `${color}` : "rgba(255,255,255,0.08)", background: highlight > 0.1 ? `${color}1A` : undefined, boxShadow: highlight > 0.5 ? `0 0 18px ${color}55` : undefined, }} > {role}
{name} Energy 88% · Rating {rating.toFixed(1)}
0.3 ? color : "rgba(255,255,255,0.5)" }} > {kind === "out" ? "OUT" : "IN"} = 8.0 ? "text-primary glow-text" : rating >= 7.0 ? "text-foreground" : "text-muted-foreground") } > {rating.toFixed(1)}
); }; // ───────────────────────────────────────────────────────────────────────────── // Beat: Mbappé training. Finishing attribute pulses and climbs from 6.5 → 8.2. // ───────────────────────────────────────────────────────────────────────────── const TrainingOverlay: React.FC<{ duration: number }> = ({ duration }) => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const t = frame / fps; const inO = interpolate(t, [0, 0.4], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: eo }); const exit = interpolate(t, [duration - 0.2, duration], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }); // Animate finishing: 6.5 → 8.2. const finishing = interpolate(t, [0.5, duration - 0.4], [6.5, 8.2], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: eo, }); // +1.7 SHOOTING chip pops mid-beat. const chipIn = interpolate(t, [1.1, 1.5], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.bezier(0.34, 1.56, 0.64, 1), }); // Other attributes — small drifts so the panel feels alive. const attrs = [ { name: "Speed", value: 9.2, focus: "primary" }, { name: "Acceleration", value: 9.4, focus: "primary" }, { name: "Finishing", value: finishing, focus: "primary", primary: true }, { name: "Dribbling", value: 8.6, focus: "primary" }, { name: "Vision", value: 7.1, focus: "secondary" }, { name: "Passing", value: 7.0, focus: "secondary" }, { name: "Strength", value: 7.6, focus: "secondary" }, { name: "Stamina", value: 8.0, focus: "secondary" }, ]; return ( {/* Faint scanline grid for texture */}
{/* Profile card */}
{/* +X.X SHOOTING chip */}
+1.7 Shooting
{/* Initials avatar */}
KM
Kylian Mbappé
Striker · 27y
Training Session · Finishing focus
Match-driven development — focused finishing reps lift the shooting attribute in a single session.
{/* Attributes panel */}

Attributes

Live training feedback
{attrs.map((a) => { const isHero = a.primary === true; const heroPulse = isHero ? 0.4 + Math.sin((frame / fps) * 6) * 0.6 : 0; const barColor = a.focus === "primary" ? "oklch(0.75 0.18 var(--team-hue))" : "oklch(0.65 0.15 240)"; return (
{a.name} {a.value.toFixed(1)}
); })}
Shooting accuracy ↑
Training paid off — Mbappé is ready to convert.
); }; // ───────────────────────────────────────────────────────────────────────────── // ScoreBar / Broadcast / Controls / TeamColumn // (TeamColumn highlights Garcia OR Mbappé as ST depending on the beat.) // ───────────────────────────────────────────────────────────────────────────── const ScoreBar: React.FC<{ scoreA: number; scoreB: number; clock: string; urgent: boolean; scorePop: number | null; // seconds since the score flipped, or null frame: number; }> = ({ scoreA, scoreB, clock, urgent, scorePop, frame }) => { // Pulsing destructive glow on the clock when we're in stoppage time. const urgencyPulse = urgent ? 0.55 + Math.sin(frame * 0.22) * 0.45 : 0; // Score pop — burst scale + glow when the 0 flips to 1. const popScale = scorePop !== null ? 1 + Math.max(0, 0.6 - scorePop) * 1.2 // spike then settle : 1; const popGlow = scorePop !== null ? Math.max(0, 1.0 - scorePop) // 1 → 0 over 1.0s : 0; return (
{HOME.name}
0 ? `0 0 ${30 + popGlow * 60}px oklch(0.85 0.20 var(--team-hue) / ${popGlow})` : undefined, }} > 0 ? `0 0 ${20 + popGlow * 30}px oklch(0.85 0.20 var(--team-hue))` : undefined, color: popGlow > 0 ? "oklch(0.95 0.20 var(--team-hue))" : undefined, }} > {scoreA}
{clock} La Liga · R14
{scoreB}
{AWAY.name}
); }; const Broadcast: React.FC<{ line: string; frame: number; fps: number }> = ({ line, frame, fps }) => { const o = interpolate(frame, [fps * 0.3, fps * 0.7], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: eo, }); const isGoal = line.toUpperCase().includes("GOAL"); const isMiss = line.toUpperCase().includes("OFF") || line.toUpperCase().includes("WIDE"); const pulse = isGoal ? 0.6 + Math.sin(frame * 0.25) * 0.4 : 1; return (
Broadcast
{line || …}
); }; const MatchControls: React.FC = () => (
Pause
1×
2×
Possession: 57% – 43% Shots: 12 – 8
); const TeamColumn: React.FC<{ frame: number; fps: number; side: "left" | "right"; t: number }> = ({ frame, fps, side, t, }) => { const isHome = side === "left"; const o = interpolate(frame, [0, fps * 0.4], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: eo, }); const tx = interpolate(frame, [0, fps * 0.4], [isHome ? -30 : 30, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: eo, }); // Real Madrid lineup — swap Garcia → Mbappé at sub time. interface TeamRow { name: string; role: string; rating: number; justOn?: boolean; scorer?: boolean; } const subbedIn = t > T.subEnd; const homePlayers: TeamRow[] = [ { name: "Courtois", role: "GK", rating: 7.4 }, { name: "Mendy", role: "LB", rating: 6.9 }, { name: "Militão", role: "CB", rating: 7.1 }, { name: "Alaba", role: "CB", rating: 7.0 }, { name: "Alexander-Arnold", role: "RB", rating: 7.2 }, { name: "Tchouaméni", role: "CM", rating: 7.3 }, { name: "Valverde", role: "CM", rating: 7.6 }, { name: "Bellingham", role: "CAM", rating: 7.5 }, { name: "Vinícius", role: "LW", rating: 7.9 }, subbedIn ? { name: "Mbappé", role: "ST", rating: 8.2, justOn: true, scorer: t > T.goalStart + 2.0 } : { name: "Gonzalo García", role: "ST", rating: 6.4 }, { name: "Rodrygo", role: "RW", rating: 7.3 }, ]; const awayPlayers: TeamRow[] = [ { name: "García", role: "GK", rating: 6.4 }, { name: "Balde", role: "LB", rating: 6.8 }, { name: "Cubarsí", role: "CB", rating: 6.6 }, { name: "Koundé", role: "CB", rating: 6.7 }, { name: "Cancelo", role: "RB", rating: 6.9 }, { name: "Pedri", role: "CM", rating: 7.4 }, { name: "F. de Jong", role: "CM", rating: 6.9 }, { name: "Olmo", role: "CAM", rating: 6.8 }, { name: "Raphinha", role: "LW", rating: 6.7 }, { name: "Lewandowski", role: "ST", rating: 6.9 }, { name: "Yamal", role: "RW", rating: 7.6 }, ]; const players = isHome ? homePlayers : awayPlayers; const meta = isHome ? HOME : AWAY; return (
{meta.name}
4-3-3
{players.map((p, i) => { const justOnPulse = p.justOn && t < T.subEnd + 1.5 ? 0.6 + Math.sin(frame * 0.4) * 0.4 : 0; return (
0.2 ? `rgba(52,211,153,${justOnPulse * 0.18})` : undefined, boxShadow: justOnPulse > 0.4 ? `0 0 12px rgba(52,211,153,${justOnPulse * 0.5})` : undefined, }} >
{p.role} {p.name} {p.scorer && ⚽} {p.justOn && t < T.subEnd + 1.5 && ( IN )}
= 8.0 ? "text-primary glow-text" : p.rating >= 7.0 ? "text-foreground" : "text-muted-foreground") } > {p.rating.toFixed(1)}
); })}
); };