// Listekomprimering — Manimo lesson scene.
// Chapter 8 of itgk (Lister og tupler). The misconception this corrects:
// students think list comprehension is a brand-new concept. It's the
// same for-loop they already know, with the result-list constructor
// inlined into the loop expression. The scene runs the verbose form
// first (empty list + for + append), then the compact form on the SAME
// inputs so the eye sees identical data-model motion, then adds an
// `if`-filter to show how some elements are excluded mid-iteration.
//
// Beats (placeholder timings — rewire-scene.js overwrites them after audio):
// 0– 9 Manimo hook
// 9–23 Lang variant — empty list + for + append (GENUINE MOTION)
// 23–37 Kort variant — same job, comprehension form (GENUINE MOTION)
// 37–49 Med filter — `if x%2==0` rejects odd values (GENUINE MOTION)
// 49–57 Takeaway
//
// Colour discipline:
// chalk-100 code text, source-cell values, result-cell values
// chalk-200 body text on dark
// chalk-300 dimmed cells, hints, sub-labels
// amber-400 pointer, body-line execution highlight, result-row accent
// amber-300 payoff readouts, output banner
// teal-400 source cells (the input row colour), for-clause tint
// rose-400 rejected-by-filter values
//
// Milestones inside the motion beats are fractions of the sprite's actual
// duration, so audio rewires keep the choreography aligned.
//
// NOTE (Norwegian narration): generate-audio.js routes language: "no" scenes
// to ElevenLabs eleven_turbo_v2_5 with language_code "no" and voice Liam —
// multilingual_v2 reads bokmål as Danish.
const SCENE_DURATION = 77;
const NARRATION = [
/* 0– 9 */ 'Du har en for-løkke som bygger en ny liste. Fire linjer kode. Plutselig ser du den samme jobben gjort i én linje, med klammeparenteser rundt. Er det magi?',
/* 9–23 */ 'Først den lange varianten. Vi starter med en tom liste, vandrer over tallene én til fem, og legger kvadratet av hver verdi inn på slutten. Etter fem runder står kvadratene én, fire, ni, seksten og tjuefem på rad.',
/* 23–37 */ 'Nå kortformen. Klammene rundt sier ny liste. Uttrykket foran sier hva som havner i hver celle. Resten er den samme løkka. Samme verdier flyr gjennom kvadrat-operasjonen og lander i den nye lista — samme resultat, færre linjer.',
/* 37–49 */ 'Vi kan også filtrere underveis. Et if helt til slutt sier hvilke verdier som slipper gjennom. Nå blir bare partallene tatt med — én, tre og fem blir avvist, mens to og fire kvadreres og lander i lista. Resultatet er fire og seksten.',
/* 49–57 */ 'Listekomprimering er ikke magi. Det er en for-løkke som bygger en ny liste, skrevet på én linje. Klammene rundt, uttrykket foran, løkka bak — eventuelt et filter på slutten.',
];
const NARRATION_AUDIO = 'audio/listekomprimering/scene.mp3';
// ─── Data ──────────────────────────────────────────────────────────────────
const SOURCE = [1, 2, 3, 4, 5];
const SQUARES = SOURCE.map((x) => x * x); // [1, 4, 9, 16, 25]
const EVEN_KEEP = SOURCE.map((x) => x % 2 === 0); // F,T,F,T,F
const EVEN_RESULTS = SOURCE.filter((x) => x % 2 === 0).map((x) => x * x); // [4, 16]
// Verbose code shown in beat 2.
const CODE_LONG = [
'tall = [1, 2, 3, 4, 5]', // 1
'kvadrater = []', // 2
'for x in tall:', // 3
' kvadrater.append(x * x)', // 4
].join('\n');
// ─── Layout ────────────────────────────────────────────────────────────────
// Landscape: code on the LEFT (vertical column), data stage on the RIGHT,
// rows stacked vertically (source above, glyph middle, result below).
// Portrait: code at TOP, data stage centred BELOW. Same vertical stack.
function layoutGeom(portrait) {
if (portrait) {
return {
// Code panel
codeLeft: 56, codeTop: 220, codeW: 608, codeFont: 19,
// Stage anchors
stageLeft: 56, stageW: 608, cell: 64, pitch: 76,
sourceY: 580, glyphY: 700, resultY: 820,
glyphSize: 72,
captionY: 940, infoY: 1000,
canvasW: 720, canvasH: 1280,
};
}
return {
// Code panel
codeLeft: 80, codeTop: 200, codeW: 500, codeFont: 22,
// Stage anchors — right half of canvas
stageLeft: 680, stageW: 540, cell: 72, pitch: 84,
sourceY: 220, glyphY: 332, resultY: 444,
glyphSize: 88,
captionY: 560, infoY: 600,
canvasW: 1280, canvasH: 720,
};
}
function codePos(G) {
return { position: 'absolute', left: G.codeLeft, top: G.codeTop,
width: G.codeW, fontVariantLigatures: 'none' };
}
// Centre N cells in the stage area, return the x0 of the leftmost cell.
function rowX0(G, n) {
const total = n * G.pitch - (G.pitch - G.cell);
return G.stageLeft + Math.round((G.stageW - total) / 2);
}
function easeInOutCubic(t) {
return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
}
// ─── Cells ────────────────────────────────────────────────────────────────
// One value cell. `accent` controls the border colour family; `state`
// controls visited/active/normal/dim.
function ValueCell({ x, y, w, h, value, accent = 'teal', state = 'normal', fontSize, opacity = 1 }) {
const baseStroke = accent === 'teal' ? 'var(--teal-400)'
: accent === 'amber' ? 'var(--amber-400)'
: accent === 'rose' ? 'var(--rose-400)'
: 'rgba(232,220,193,0.25)';
const border =
state === 'active' ? 'var(--amber-400)' :
state === 'visited' ? 'rgba(232,220,193,0.20)' :
state === 'dim' ? 'rgba(232,220,193,0.15)' :
baseStroke;
const flashBg = accent === 'rose' ? 'rgba(232,122,144,0.16)' : 'rgba(244,184,96,0.16)';
const bg =
state === 'active' ? flashBg :
state === 'visited' ? 'rgba(0,0,0,0.45)' :
state === 'dim' ? 'rgba(0,0,0,0.40)' :
'rgba(0,0,0,0.35)';
const valueColor =
state === 'active' ? 'var(--chalk-100)' :
state === 'dim' ? 'var(--chalk-300)' :
state === 'visited' ? 'var(--chalk-300)' :
'var(--chalk-100)';
const op = state === 'dim' ? 0.55 * opacity : opacity;
return (
{value}
);
}
// Empty placeholder cell — chalk-300 dashed outline.
function PlaceholderCell({ x, y, w, h }) {
return (
);
}
function Pointer({ x, y, show }) {
if (!show) return null;
return (
);
}
// A travelling chip — lerps between two centres on an eased arc.
function FlyingChip({ from, to, t, value, w, h, accent = 'amber' }) {
if (t <= 0 || t >= 1) return null;
const e = easeInOutCubic(t);
const cx = from.x + (to.x - from.x) * e;
const cy = from.y + (to.y - from.y) * e - Math.sin(Math.PI * e) * 22;
const border = accent === 'rose' ? 'var(--rose-400)' : 'var(--amber-400)';
const bg = accent === 'rose' ? 'rgba(232,122,144,0.16)' : 'rgba(244,184,96,0.18)';
const color = accent === 'rose' ? 'var(--rose-300)' : 'var(--amber-300)';
return (
{value}
);
}
// The (·)² glyph in the middle of beats 3 + 4.
function SquareGlyph({ x, y, w, h, active, label = '(·)²' }) {
return (
{label}
);
}
function RowLabel({ x, y, text, color = 'var(--chalk-300)', portrait }) {
return (
{text}
);
}
// ─── A coloured-span code panel for the compact form (beats 3 + 4) ───────
function CompCodeLine({ segments, fontSize, style }) {
return (
{segments.map((s, i) => (
{s.text}
))}
);
}
// A small inline info bar BELOW the result row — replaces the SoftPanel.
function InfoBar({ G, portrait, items }) {
return (
{items.map((node, i) =>
{node}
)}
avvist
)}
{/* Inline info below result row */}
kvadrater
= [{EVEN_RESULTS.slice(0, landedTotal).join(', ')}]
),
(<>
Et if til slutt
{' '}bestemmer hvilke verdier som slipper gjennom.
Partall slipper, oddetall
{' '}avvises.
),
]}/>
);
}
// ─── Beat 5: Takeaway ──────────────────────────────────────────────────────
function Takeaway() {
const portrait = usePortrait();
return (
listekomprimering
En for-løkke, presset ned til én linje.
[ uttrykk for x in xs if betingelse ]
);
}
// Expose narration to external tooling (TTS generation, subtitle export)
window.sceneNarration = NARRATION;
// ─── Mount ─────────────────────────────────────────────────────────────────
function App() {
return (
);
}
ReactDOM.createRoot(document.getElementById('root')).render();