// Inni en while-løkke — Manimo lesson scene.
// Chapter 5 of itgk (Løkker). The core misconception: students read a loop as
// text, top to bottom, once. They don't see that *execution jumps back*. This
// scene traces `sum of 1..5` line by line with a live execution highlight that
// cycles condition → body → back to the top, while variable boxes tick upward
// round by round. The code stands still; the run goes in circles.
//
// Beats (placeholder timings — rewire-scene.js overwrites them after audio):
// 0– 6 Manimo hook
// 6–17 Kode — the program reveals line by line + the goal
// 17–33 Trace — execution marker cycles 3→4→5→3…, vars tick (GENUINE MOTION)
// 33–42 Exit — condition turns false, marker jumps past the body, prints 15
// 42–48 Takeaway
//
// Colour discipline:
// chalk-100 code text, values
// chalk-300 dimmed code, hints
// amber-400 execution highlight, primary accent
// amber-300 payoff / readouts
// teal-400 condition true
// rose-400 condition false / exit
//
// NOTE (Norwegian narration): this is the library's first `language: "no"`
// scene. generate-audio.js routes it to ElevenLabs eleven_turbo_v2_5 with
// language_code "no" and voice Liam — multilingual_v2 reads bokmål as Danish.
const SCENE_DURATION = 59;
const NARRATION = [
/* 0– 6 */ 'Hvordan får du en datamaskin til å gjøre det samme om og om igjen? Du skriver oppskriften én gang, og lar den gå i løkke.',
/* 6–17 */ 'Her er et lite program som legger sammen tallene fra én til fem. Først settes i til én, og summen til null. Så kommer selve løkka: så lenge i er mindre enn eller lik fem, legger vi i til summen, og øker i med én.',
/* 17–33 */ 'Følg den lyse linja. Programmet sjekker betingelsen, kjører kroppen, og hopper tilbake til toppen. Runde etter runde vokser summen, mens i teller seg oppover mot fem. Koden står stille, men kjøringen går i ring.',
/* 33–42 */ 'Til slutt blir i seks. Da er betingelsen usann, løkka er ferdig, og programmet hopper forbi kroppen, videre til neste linje, og skriver ut femten.',
/* 42–48 */ 'Det er hele hemmeligheten bak en while-løkke. Betingelsen sjekkes før hver eneste runde, og kroppen kjører bare så lenge den er sann.',
];
const NARRATION_AUDIO = 'audio/while-lokke-trace/scene.mp3';
// ─── The program ───────────────────────────────────────────────────────────
const CODE = [
'i = 1', // 1
'sum = 0', // 2
'while i <= 5:', // 3
' sum = sum + i', // 4
' i = i + 1', // 5
'print(sum)', // 6
].join('\n');
// Execution schedule for the trace beat. Each step: the line that runs, plus
// the variable state *after* it has run. cond is set on while-line checks.
const TRACE_STEPS = (() => {
const steps = [];
steps.push({ ln: 1, i: 1, sum: null, cond: null, round: 0 });
steps.push({ ln: 2, i: 1, sum: 0, cond: null, round: 0 });
let sum = 0;
for (let i = 1; i <= 5; i++) {
steps.push({ ln: 3, i, sum, cond: true, round: i });
sum += i;
steps.push({ ln: 4, i, sum, cond: null, round: i });
steps.push({ ln: 5, i: i + 1, sum, cond: null, round: i });
}
return steps; // 17 steps, ends at i=6, sum=15
})();
// ─── Layout ────────────────────────────────────────────────────────────────
function layoutGeom(portrait) {
return portrait
? { codeLeft: 120, codeTop: 270, codeFont: 27,
panelLeft: 56, panelBottom: 190, panelW: 608, panelTop: null, panelRight: null }
: { codeLeft: 96, codeTop: 190, codeFont: 26,
panelRight: 64, panelTop: 190, panelW: 430, panelLeft: null, panelBottom: null };
}
// Mono ligatures would render `<=` as a single `≤` glyph — wrong when the
// point is teaching the exact characters Python is written with.
function codePos(G) {
return { position: 'absolute', left: G.codeLeft, top: G.codeTop, fontVariantLigatures: 'none' };
}
// ─── Helpers ───────────────────────────────────────────────────────────────
function SoftPanel({ children, right, top, width = 420, left, bottom }) {
const positioning = left != null || bottom != null
? { left, bottom }
: { right, top };
return (
{children}
);
}
function PanelEyebrow({ children }) {
return (
{children}
);
}
// A live variable box: serif-italic name above, mono value inside. Glows amber
// for a moment whenever its line has just executed.
function VarBox({ name, value, flash, portrait }) {
return (
{name}
{value === null ? '–' : value}
);
}
// Condition badge: «i ≤ 5 → sann/usann», teal when true, rose when false.
function CondBadge({ i, verdict, portrait }) {
const truthy = verdict === true;
const color = truthy ? 'var(--teal-400)' : 'var(--rose-400)';
return (
{i} ≤ 5
→
{truthy ? 'sann' : 'usann'}
);
}
// ─── Scene ─────────────────────────────────────────────────────────────────
function Scene() {
return (
);
}
// ─── Beat 2: Kode ──────────────────────────────────────────────────────────
function KodeBeat() {
const portrait = usePortrait();
const G = layoutGeom(portrait);
return (
<>
{portrait
?
: }
);
}
function KodePanel({ portrait }) {
return (
<>
målet
1 + 2 + 3 + 4 + 5 = ?
To variabler gjør jobben: i teller
oppover, sum samler underveis.
);
}
// ─── Beat 3: Trace (GENUINE MOTION) ────────────────────────────────────────
function TraceBeat() {
const { localTime, duration } = useSprite();
const portrait = usePortrait();
const G = layoutGeom(portrait);
// Scale the schedule to the actual beat length so audio rewire keeps the
// choreography intact: small lead-in, all 17 steps, then a short hold.
const startDelay = 0.6;
const tailHold = 1.4;
const n = TRACE_STEPS.length;
const perStep = (duration - startDelay - tailHold) / n;
const idx = clamp(Math.floor((localTime - startDelay) / perStep), 0, n - 1);
const st = TRACE_STEPS[idx];
const sinceStep = localTime - (startDelay + idx * perStep);
const justRan = sinceStep < perStep * 0.55;
const flashI = justRan && (st.ln === 1 || st.ln === 5);
const flashSum = justRan && (st.ln === 2 || st.ln === 4);
const Panel = (
<>
kjøringen, runde for runde
runde {st.round} av 5
{st.cond != null
?
:
{st.ln === 4 ? 'kroppen: legg i til summen' : st.ln === 5 ? 'kroppen: øk telleren' : 'oppstart'}
}
Koden står stille — kjøringen går i ring.
);
return (
<>
{portrait
? {Panel}
: {Panel}}
);
}
// ─── Beat 4: Exit ──────────────────────────────────────────────────────────
function ExitBeat() {
const { localTime } = useSprite();
const portrait = usePortrait();
const G = layoutGeom(portrait);
// Two-step mini-schedule: the failing check, then the jump to print.
const checkAt = 0.4;
const jumpAt = 2.6;
const onPrint = localTime >= jumpAt;
const ln = onPrint ? 6 : 3;
const Panel = (
<>
siste sjekk
{localTime >= checkAt && (
)}
Usann betingelse: hopp forbi kroppen, rett til neste linje.
utskrift
15
);
return (
<>
{portrait
? {Panel}
: {Panel}}
);
}
// ─── Beat 5: Takeaway ──────────────────────────────────────────────────────
function Takeaway() {
const portrait = usePortrait();
return (
while
Betingelsen sjekkes før hver eneste runde.
sjekk → kjør kroppen → hopp tilbake
);
}
// Expose narration to external tooling (TTS generation, subtitle export)
window.sceneNarration = NARRATION;
// ─── Mount ─────────────────────────────────────────────────────────────────
function App() {
return (
);
}
ReactDOM.createRoot(document.getElementById('root')).render();