// f-strenger: hullene fylles med verdier — Manimo lesson scene.
// Chapter 3 of itgk (Inn-/utdata og strengformatering). The misconception:
// students concatenate with `+` and call `str()` everywhere. An f-string
// is a *template*: text with HULL — Python evaluates each hole and drops
// the result into place. The scene shows the template literally, lets
// two values glide from VarBoxes into the highlighted slots, then closes
// with a slot that contains an expression Python crunches before printing.
//
// Beats (placeholder timings — rewire-scene.js overwrites them after audio):
// 0–10 Manimo hook (handled by SceneChrome)
// 10–22 Anatomi — the f-prefix, the {} slots, the literal text
// 22–38 Glir inn — value chips fly from VarBoxes into slots (GENUINE MOTION)
// 38–52 Mer enn navn — the slot evaluates an expression in three steps
// 52–60 Takeaway
//
// Colour discipline:
// chalk-100 primary text inside the template, primary values
// chalk-200 secondary text, name tags
// chalk-300 dimmed labels, hints
// amber-400 the {hole} highlight, primary accent
// amber-300 payoff bands, output
// teal-400 a value once it has landed in its slot
// rose-400 the f-prefix flag (a single sigil)
//
// NOTE (Norwegian narration): generate-audio.js routes language: "no" to
// ElevenLabs eleven_turbo_v2_5 with language_code "no" and voice Liam —
// multilingual_v2 reads bokmål as Danish.
const SCENE_DURATION = 48;
const NARRATION = [
/* 0–10 */ 'Du har en variabel, og du vil putte den inn i en setning. Hvordan setter du strengen sammen uten å lime alt med pluss?',
/* 10–22 */ 'En f-streng er en mal. En f foran anførselstegnet flagger den, krøllparentesene er hull, og resten er bokstaver Python lar stå.',
/* 22–38 */ 'Variablene står klare i sine egne bokser. Når Python møter et hull, henter den verdien fra boksen og glir den inn på plassen — én etter én, til hele setningen er ferdig.',
/* 38–52 */ 'Hullet er ikke begrenset til et navn. Python regner ut det som står inni — som pris ganger antall — og lar bare svaret bli stående igjen.',
/* 52–60 */ 'En f-streng er en mal med hull. Python regner ut hver bit i hullet, og fyller den inn for deg.',
];
const NARRATION_AUDIO = 'audio/f-strenger-hullene-fylles/scene.mp3';
// ─── Shared text segments ──────────────────────────────────────────────────
// The template `f"Hei {navn}! Du er {alder} år."` broken into typed pieces
// so beat 2 can colour each part and beat 3 can drop chip values into the
// SLOT pieces without re-typesetting.
const TEMPLATE = [
{ kind: 'prefix', text: 'f' },
{ kind: 'quote', text: '"' },
{ kind: 'literal', text: 'Hei ' },
{ kind: 'slot', text: '{navn}', name: 'navn' },
{ kind: 'literal', text: '! Du er ' },
{ kind: 'slot', text: '{alder}', name: 'alder' },
{ kind: 'literal', text: ' år.' },
{ kind: 'quote', text: '"' },
];
const TEMPLATE4 = [
{ kind: 'call', text: 'print(' },
{ kind: 'prefix', text: 'f' },
{ kind: 'quote', text: '"' },
{ kind: 'literal', text: 'Totalt: ' },
{ kind: 'slot', text: '{pris * antall}', name: 'expr' },
{ kind: 'literal', text: ' kroner' },
{ kind: 'quote', text: '"' },
{ kind: 'call', text: ')' },
];
// ─── Helpers ───────────────────────────────────────────────────────────────
// Soft panel matching the founding-five pattern.
function SoftPanel({ children, left, top, width, style }) {
return (
{children}
);
}
function PanelEyebrow({ children, color = 'var(--amber-300)' }) {
return (
{children}
);
}
// A live variable box: serif-italic name above, mono value inside. Glows
// amber for a moment while its hole is being filled.
function VarBox({ name, value, flash, portrait }) {
return (
);
}
// Output payoff band (mono inside an amber-outlined chip).
function OutputBand({ text, fontSize = 22, style }) {
return (
utskrift
{text}
);
}
// ─── Template renderer ─────────────────────────────────────────────────────
// Renders the f-string template as one inline mono line. Each slot can be
// either empty (showing its `{name}` placeholder) or filled (showing the
// landed value in teal). The slot positions are reported by ref so the
// flying chip knows where to land.
function TemplateLine({ template, fontSize, fillState, slotRefs }) {
return (
{template.map((seg, i) => {
if (seg.kind === 'prefix') {
return {seg.text};
}
if (seg.kind === 'quote') {
return {seg.text};
}
if (seg.kind === 'call') {
return {seg.text};
}
if (seg.kind === 'literal') {
return {seg.text};
}
// slot
const filled = fillState && fillState[seg.name];
return (
{ if (slotRefs.current) slotRefs.current[seg.name] = el; } : undefined}
style={{
display: 'inline-block',
padding: '2px 6px', borderRadius: 6,
border: `1.5px solid ${filled ? 'var(--teal-400)' : 'var(--amber-400)'}`,
background: filled ? 'rgba(127,209,197,0.14)' : 'rgba(244,184,96,0.14)',
color: filled ? 'var(--teal-400)' : 'var(--amber-300)',
fontStyle: filled ? 'normal' : 'italic',
transition: 'background 0.25s linear, border-color 0.25s linear, color 0.25s linear',
}}>
{filled ? String(filled) : seg.text}
);
})}
);
}
// ─── Scene ─────────────────────────────────────────────────────────────────
function Scene() {
return (
);
}
// ─── Beat 2: Anatomi ───────────────────────────────────────────────────────
function AnatomiBeat() {
const { localTime } = useSprite();
const portrait = usePortrait();
const fontSize = portrait ? 28 : 38;
// Labels for each part — render in step with the explanation.
return (
<>
{/* Three callouts naming the parts */}
en f foran
krøllparentes
resten står
{/* Caption underneath the chips */}
{localTime >= 6.2 && (
Tre deler. En mal.
)}
);
}
function LabelChip({ color, hint, children }) {
return (
{hint}
{children}
);
}
// ─── Beat 3: Glir inn (GENUINE MOTION) ─────────────────────────────────────
// Two VarBoxes at the top, the template in the middle with empty slots
// highlighted amber, and the formatted result at the bottom. Two chips
// fly — value-by-value — from VarBox to slot, where the slot text swaps
// to the landed value (amber italic placeholder → teal mono answer).
function GlirInnBeat() {
const { localTime, duration } = useSprite();
const portrait = usePortrait();
// Layout geometry. The slot positions are measured in canvas coords
// (matching the centered template at the configured fontSize).
const G = portrait
? { fontSize: 22,
boxNavnX: 180, boxAlderX: 540, boxY: 320,
templY: 660, slotNavnX: 244, slotAlderX: 440,
outputY: 870, outputFont: 18 }
: { fontSize: 32,
boxNavnX: 320, boxAlderX: 900, boxY: 200,
templY: 380, slotNavnX: 522, slotAlderX: 822,
outputY: 540, outputFont: 24 };
// Milestones as fractions of the sprite's actual duration so rewire
// keeps the choreography aligned with the audio.
const T = Math.max(duration - 0.6, 1);
const at = (f) => f * T;
// Phases for each chip: appear at VarBox, fly, land, slot swaps.
const navnAppear = at(0.18);
const navnLand = at(0.32);
const alderAppear = at(0.45);
const alderLand = at(0.60);
const resultAt = at(0.72);
const navnFlight = clamp((localTime - navnAppear) / (navnLand - navnAppear), 0, 1);
const alderFlight = clamp((localTime - alderAppear) / (alderLand - alderAppear), 0, 1);
const navnFilled = localTime >= navnLand ? 'Ada' : null;
const alderFilled = localTime >= alderLand ? '17' : null;
// Highlight whichever VarBox is currently sending its value.
const flashNavn = localTime >= navnAppear - 0.2 && localTime < navnLand + 0.4;
const flashAlder = localTime >= alderAppear - 0.2 && localTime < alderLand + 0.4;
return (
<>
{/* VarBoxes — top row */}
{/* Template line — centered horizontally */}
{/* Flying chips */}
{localTime >= navnAppear && navnFlight < 1 && (
)}
{localTime >= alderAppear && alderFlight < 1 && (
)}
{/* Output band — bottom row */}
{localTime >= resultAt && (
)}
);
}
// A small mono chip that ferries a value from VarBox to slot. Positioned
// absolutely in canvas coords. Eased-out cubic on the path, fades in/out
// at the endpoints so it reads as a pickup-and-drop, not a hard teleport.
function FlyingChip({ fromX, fromY, toX, toY, progress, value }) {
const eased = Easing.easeInOutCubic ? Easing.easeInOutCubic(progress) : progress;
const x = fromX + (toX - fromX) * eased;
const y = fromY + (toY - fromY) * eased;
// Fade in over the first 15%, full opacity through middle, fade out last 10%.
const opacity = progress < 0.15 ? progress / 0.15 : (progress > 0.90 ? (1 - progress) / 0.10 : 1);
return (
{value}
);
}
// ─── Beat 4: Mer enn navn ──────────────────────────────────────────────────
// Two VarBoxes (pris, antall). The code line carries a slot containing an
// EXPRESSION. A side panel shows the slot evaluating in three steps:
// pris * antall → 25 * 4 → 100. Then the output band lands at the bottom.
function MerEnnNavnBeat() {
const { localTime, duration } = useSprite();
const portrait = usePortrait();
const G = portrait
? { fontSize: 20,
boxPrisX: 180, boxAntallX: 540, boxY: 320,
templY: 600, panelX: 60, panelY: 760, panelW: 600,
outputY: 980, outputFont: 18 }
: { fontSize: 28,
boxPrisX: 320, boxAntallX: 900, boxY: 200,
templY: 360, panelX: 320, panelY: 460, panelW: 640,
outputY: 600, outputFont: 22 };
const T = Math.max(duration - 0.6, 1);
const at = (f) => f * T;
const step1At = at(0.30); // pris * antall
const step2At = at(0.45); // 25 * 4
const step3At = at(0.62); // 100
const resultAt = at(0.78);
// Determine which evaluation step to show in the slot for the highlight
// band. Once step3 lands we treat the slot as "filled" so its border
// turns teal (matching beat 3's convention).
const slotFilled = localTime >= step3At ? '100' : null;
return (
<>
{/* VarBoxes */}
= step1At && localTime < step3At} portrait={portrait}/>
= step1At && localTime < step3At} portrait={portrait}/>
{/* Template line */}
{/* Evaluation panel — shows the slot crunching in three steps */}
inne i hullet
= step1At}
step2Show={localTime >= step2At}
step3Show={localTime >= step3At}
portrait={portrait}
/>
{/* Output band */}
{localTime >= resultAt && (
)}
);
}
function EvalSteps({ step1Show, step2Show, step3Show, portrait }) {
const monoBig = { fontFamily: 'var(--font-mono)', fontSize: portrait ? 20 : 26,
fontVariantLigatures: 'none' };
const arrow = { fontFamily: 'var(--font-mono)', fontSize: portrait ? 18 : 22,
color: 'var(--chalk-300)', padding: '0 8px' };
return (
{step1Show && (
pris * antall
)}
{step2Show && (
<>
→
25 * 4
)}
{step3Show && (
<>
→
100
)}
);
}
// ─── Beat 5: Takeaway ──────────────────────────────────────────────────────
function Takeaway() {
const portrait = usePortrait();
return (
f-streng
En mal med hull — Python fyller dem for deg.
{'f"... {uttrykk} ..."'}
);
}
// Expose narration to external tooling (TTS generation, subtitle export)
window.sceneNarration = NARRATION;
// ─── Mount ─────────────────────────────────────────────────────────────────
function App() {
return (
);
}
ReactDOM.createRoot(document.getElementById('root')).render();