// Dict eller liste? Ett oppslag mot mange — Manimo lesson scene.
// Chapter 9 of itgk (Dictionaries og sets). Two ways to look up the phone
// number for Per. The list version walks every contact, comparing names one
// by one until Per shows up in the sixth cell — six comparisons. The dict
// version sends the key 'Per' straight to its row via a hash gadget — one
// look-up, whether the table holds six contacts or six million. The same
// six-row table sits on screen for both beats so the access pattern is the
// only thing that changes.
//
// Beats (placeholder timings — rewire-scene.js overwrites them after audio):
// 0–12 Manimo hook
// 12–25 Oppsettet — code reveals, six contact cells appear
// 25–39 Liste-søk — Per-chip walks cell-by-cell, counter climbs to 6 (GENUINE MOTION)
// 39–50 Dict-oppslag — Per-chip flies straight to row 5 via hash gadget (GENUINE MOTION)
// 50–58 Takeaway
//
// Colour discipline:
// chalk-100 code text, code values
// chalk-200 cell name (idle)
// chalk-300 dimmed text, hint captions
// amber-400 liste pointer, "match" border
// amber-300 liste counter / payoff
// rose-400 "miss" cell border (already checked, not Per)
// teal-400 dict arrow, hash gadget
// teal-300 dict counter / payoff
//
// Milestones inside motion beats are fractions of the sprite's actual
// duration so audio rewires keep the choreography aligned.
const SCENE_DURATION = 61;
const NARRATION = [
/* 0–12 */ 'Du har en haug med kontakter, og du leter etter telefonnummeret til Per. Du kan bla deg gjennom listen din til du finner ham — eller du kan slå opp direkte. Hva er forskjellen egentlig?',
/* 12–25 */ 'Vi har seks kontakter i to varianter: først som en liste med par av navn og nummer, så som en ordbok der navnet er nøkkelen. Begge formene holder akkurat samme data — vi vil finne nummeret til Per.',
/* 25–39 */ 'Med listen må vi sjekke en og en. Vi sammenligner Ada med Per — nei. Ben — nei. Slik fortsetter vi nedover, og Per ligger sist i den sjette cellen. Seks sammenligninger for seks kontakter.',
/* 39–50 */ 'Med en ordbok trenger vi ikke å lete. Nøkkelen Per fører oss rett til riktig celle. Ett oppslag, uansett om vi har seks eller seks millioner kontakter.',
/* 50–58 */ 'Vil du slå opp en verdi gjennom en nøkkel, bruk en ordbok. Da går du fra orden n til konstant tid.',
];
const NARRATION_AUDIO = 'audio/dict-oppslag-vs-liste-sok/scene.mp3';
// ─── Data ──────────────────────────────────────────────────────────────────
const CONTACTS = [
['Ada', '934'],
['Ben', '412'],
['Cay', '918'],
['Dag', '201'],
['Eli', '557'],
['Per', '615'],
];
const TARGET_IDX = 5;
const CODE = [
"# Som liste — gå gjennom", // 1
"for navn, tlf in kontakter:", // 2
" if navn == 'Per':", // 3
" print(tlf)", // 4
"", // 5
"# Som dict — slå opp", // 6
"print(kontakter['Per'])", // 7
].join('\n');
// ─── Layout ────────────────────────────────────────────────────────────────
function layoutGeom(portrait) {
if (portrait) {
return {
codeLeft: 70, codeTop: 200, codeFont: 22,
cellsLeft: 150, cellsTop: 580,
cellW: 440, cellH: 58, cellGap: 6,
pointerColX: 130,
counterTop: 970, outputTop: 1042,
panelLeft: 70, panelW: 580,
svgW: 720, svgH: 1280,
};
}
return {
codeLeft: 96, codeTop: 200, codeFont: 24,
cellsLeft: 760, cellsTop: 170,
cellW: 380, cellH: 58, cellGap: 6,
pointerColX: 728,
counterTop: 555, outputTop: 612,
panelLeft: 760, panelW: 380,
svgW: 1280, svgH: 720,
};
}
function codePos(G) {
return { position: 'absolute', left: G.codeLeft, top: G.codeTop, fontVariantLigatures: 'none' };
}
function cellTopY(G, i) {
return G.cellsTop + i * (G.cellH + G.cellGap);
}
function cellCenterY(G, i) {
return cellTopY(G, i) + G.cellH / 2;
}
// clamp + Easing.easeOutCubic / Easing.easeInOutCubic come from animations.jsx
// (top-level scripts share the global scope, so duplicating them collides).
// ─── Contact cell (DOM) ────────────────────────────────────────────────────
const CELL_LOOK = {
idle: { border: 'rgba(232,220,193,0.30)', bg: 'rgba(0,0,0,0.32)', nameColor: 'var(--chalk-200)', tlfColor: 'var(--chalk-300)' },
visiting: { border: 'var(--amber-400)', bg: 'rgba(244,184,96,0.10)', nameColor: 'var(--chalk-100)', tlfColor: 'var(--chalk-200)' },
miss: { border: 'rgba(232,122,144,0.55)', bg: 'rgba(232,122,144,0.10)', nameColor: 'var(--rose-300)', tlfColor: 'var(--chalk-300)' },
match: { border: 'var(--amber-400)', bg: 'rgba(244,184,96,0.22)', nameColor: 'var(--amber-300)', tlfColor: 'var(--amber-300)' },
dictMatch: { border: 'var(--teal-400)', bg: 'rgba(0,0,0,0.55)', nameColor: 'var(--teal-300)', tlfColor: 'var(--teal-300)' },
};
function ContactCell({ x, y, w, h, name, tlf, state, opacity = 1 }) {
const s = CELL_LOOK[state] || CELL_LOOK.idle;
return (
{`'${name}'`}
{`'${tlf}'`}
);
}
// ─── Pointer chip (the searched key, walking or flying) ────────────────────
// (x, y) places the chip's right tip at the cell-row centre.
function KeyChip({ x, y, color, label, opacity = 1 }) {
return (
);
}
// ─── Hash gadget (only the dict beat) — a small chip the key passes through ─
function HashBadge({ x, y, color, show }) {
if (!show) return null;
return (
hash → rad 6
);
}
// ─── Counter (live count of comparisons / lookups) ─────────────────────────
function Counter({ G, label, value, color, show }) {
if (!show) return null;
return (
{label}
{value}
);
}
// ─── Output panel (the print result) ───────────────────────────────────────
function OutputRow({ G, text, color, show }) {
if (!show) return null;
return (
utskrift
{text}
);
}
// ─── Scene ─────────────────────────────────────────────────────────────────
function Scene() {
return (
);
}
// ─── Beat 2: Oppsettet ─────────────────────────────────────────────────────
function OppsettetBeat() {
const { localTime, duration } = useSprite();
const portrait = usePortrait();
const G = layoutGeom(portrait);
const T = Math.max(duration - 1, 1);
const at = (f) => f * T;
return (
<>
{CONTACTS.map(([name, tlf], i) => {
const showAt = at(0.20) + i * 0.18;
if (localTime < showAt) return null;
return (
);
})}
{localTime >= at(0.80) && (
Mål: finn tlf der navn er 'Per'.
)}
);
}
// ─── Beat 3: Liste-søk (GENUINE DATA-MODEL MOTION) ─────────────────────────
// The 'Per' chip walks down the cells. Each non-match cell stays rose-bordered
// once checked, the final Per cell glows amber. Counter ticks up to 6.
function ListeSokBeat() {
const { localTime, duration } = useSprite();
const portrait = usePortrait();
const G = layoutGeom(portrait);
const T = Math.max(duration - 1, 1);
const at = (f) => f * T;
const enter = at(0.04);
const visits = [0.10, 0.22, 0.34, 0.46, 0.58, 0.70].map(at);
const matchSettle = at(0.80);
const outputAt = at(0.86);
// How many cells have been "touched" so far → counter value.
let touched = 0;
for (let i = 0; i < visits.length; i++) if (localTime >= visits[i]) touched = i + 1;
// Pointer y as smooth interpolation between successive visits.
let chipY;
if (localTime < enter) {
chipY = cellCenterY(G, 0) - 50;
} else if (localTime < visits[0]) {
const k = (localTime - enter) / (visits[0] - enter);
chipY = cellCenterY(G, 0) - 50 + 50 * Easing.easeOutCubic(k);
} else {
// pause briefly at each cell, then slide
let i = touched - 1;
if (i >= visits.length - 1) {
chipY = cellCenterY(G, visits.length - 1);
} else {
const settle = visits[i] + 0.35;
if (localTime < settle) {
chipY = cellCenterY(G, i);
} else {
const k = clamp((localTime - settle) / (visits[i + 1] - settle), 0, 1);
chipY = cellCenterY(G, i) + (cellCenterY(G, i + 1) - cellCenterY(G, i)) * Easing.easeInOutCubic(k);
}
}
}
const cellStates = CONTACTS.map((_, i) => {
if (localTime < visits[i]) return 'idle';
// Each cell briefly amber when first visited, then resolves.
const settle = visits[i] + 0.30;
if (localTime < settle) return 'visiting';
if (i === TARGET_IDX) {
return localTime >= matchSettle ? 'match' : 'visiting';
}
return 'miss';
});
return (
<>
{CONTACTS.map(([name, tlf], i) => (
))}
{localTime >= enter && (
)}
= visits[0]}/>
= outputAt}/>
);
}
// ─── Beat 4: Dict-oppslag (GENUINE DATA-MODEL MOTION) ──────────────────────
// The 'Per' chip flies diagonally from the upper-left straight to row 6
// without touching any other row. A hash badge appears mid-flight as a hint
// that the redirection is what makes the leap possible.
function DictOppslagBeat() {
const { localTime, duration } = useSprite();
const portrait = usePortrait();
const G = layoutGeom(portrait);
const T = Math.max(duration - 1, 1);
const at = (f) => f * T;
const flyStart = at(0.10);
const flyEnd = at(0.42);
const hashShow = at(0.26);
const hashHide = at(0.50);
const matchAt = at(0.48);
const counterAt = at(0.55);
const outputAt = at(0.68);
const perY = cellCenterY(G, TARGET_IDX);
const endX = G.pointerColX;
const startX = portrait ? -60 : -40;
const startY = G.cellsTop - 80;
const flyT = clamp((localTime - flyStart) / (flyEnd - flyStart), 0, 1);
const e = Easing.easeOutCubic(flyT);
const chipX = startX + (endX - startX) * e;
const chipY = startY + (perY - startY) * e;
// Hash badge sits at ~60 % along the flight (between start and target).
const hashX = startX + (endX - startX) * 0.60;
const hashY = startY + (perY - startY) * 0.60;
const cellStates = CONTACTS.map((_, i) => {
if (i === TARGET_IDX && localTime >= matchAt) return 'dictMatch';
return 'idle';
});
const oppslag = localTime >= matchAt ? 1 : 0;
return (
<>
{CONTACTS.map(([name, tlf], i) => (
))}
= hashShow && localTime < hashHide}/>
{localTime >= flyStart && (
)}
= counterAt}/>
= outputAt}/>
);
}
// ─── Beat 5: Takeaway ──────────────────────────────────────────────────────
function Takeaway() {
const portrait = usePortrait();
return (
dict · key → value
Slår du opp med en nøkkel — bruk en dict.
liste: orden n · dict: konstant tid
);
}
// Expose narration to external tooling (TTS generation, subtitle export)
window.sceneNarration = NARRATION;
// ─── Mount ─────────────────────────────────────────────────────────────────
function App() {
return (
);
}
ReactDOM.createRoot(document.getElementById('root')).render();