/* schematic-actualize.jsx — Level 2 · The Language.
The heart of the chapter: a circuit shown two ways at once — as a schematic
AND as the real breadboard build — with every part cross-highlighted, plus
ReadTheLoop (trace the current round a diagram). Depends on schematic-kit.jsx
(SlgSym, SLG_HOT/INK, slgGlow). All names sla-/Sla- prefixed. */
const { useState: _slaState, useEffect: _slaEffect, useRef: _slaRef } = React;
/* hover/tap wrapper — children is a render fn (on) => svg */
function SlaHot({ id, active, setActive, hit, children }) {
const on = active === id;
return (
setActive(id)}
onMouseLeave={() => setActive(a => (a === id ? null : a))}
onClick={() => setActive(a => (a === id ? null : id))}>
{hit}
{children(on)}
);
}
const slaCol = (on) => (on ? SLG_HOT : SLG_INK);
/* ── physical breadboard part glyphs ───────────────────────────────────── */
function slaBoardFrame() {
const holes = [];
for (let r = 0; r < 5; r++) for (let c = 0; c < 11; c++)
holes.push();
return (
{/* + rail */}
+
{/* − rail */}
−{holes}
);
}
const slaLead = (x1, y1, x2, y2, col) => ;
function slaBatt9V(col, on) {
// a 9V block at far left with + (red) and − (blue) leads to the rails
return (
9V▇
{/* terminals up to rails */}
);
}
function slaResV(x, y1, y2, col) {
const cy = (y1 + y2) / 2;
return (
{slaLead(x, y1, x, cy - 15, col)}{slaLead(x, cy + 15, x, y2, col)}
);
}
function slaLedV(x, y1, y2, col, lit) {
const cy = (y1 + y2) / 2;
return (
{slaLead(x - 4, cy + 6, x - 4, y2, col)}{slaLead(x + 4, cy + 6, x + 4, y1, col)}
);
}
function slaCapV(x, y1, y2, col) {
const cy = (y1 + y2) / 2;
return (
{slaLead(x, y1, x, cy - 16, col)}{slaLead(x, cy + 16, x, y2, col)}
+
);
}
const slaWireSeg = (pts, col) => ;
/* ════════ CIRCUIT A — the simple loop: battery → resistor → LED ════════ */
function SlaLoopSchematic({ active, setActive, lit }) {
const T = 46, B = 178, L = 46, R = 250;
return (
);
}
function SlaLoopBoard({ active, setActive, lit }) {
return (
);
}
/* ════════ CIRCUIT B — the blinker (RC): battery → R → (cap ∥ LED) ════════ */
function SlaBlinkSchematic({ active, setActive, lit }) {
const T = 46, B = 178, L = 46, R = 250, NODE = 178;
return (
);
}
function SlaBlinkBoard({ active, setActive, lit }) {
return (
);
}
/* the two circuits, registry */
const SLA_CIRCUITS = {
loop: {
title: { adult: "The simplest loop", kids: "One light, one loop" },
blurb: { adult: "A battery, one resistor, one LED — a single series loop. Hover any part to see it in both views.",
kids: "A battery pushes flow through a pinch (resistor) and a light (LED), then home. Tap a part to find it on the board!" },
Schem: SlaLoopSchematic, Board: SlaLoopBoard,
parts: [
{ id: "batt", n: { adult: "Battery (9 V)", kids: "Battery" },
s: { adult: "Two stacked lines = the source. On the board it's the 9 V block, + lead to the red rail, − to the blue.",
kids: "The pusher. On the board it's the 9V block — red wire to the + line, black to the − line." } },
{ id: "res", n: { adult: "Resistor", kids: "Resistor (pinch)" },
s: { adult: "The rectangle on the top wire = the beige banded resistor bridging the + rail down to the LED's column.",
kids: "The little box = the striped resistor. It pinches the flow so the LED is safe." } },
{ id: "led", n: { adult: "LED", kids: "LED (light)" },
s: { adult: "Triangle + bar on the right wire = the domed LED, long leg (+) up toward the resistor, short leg to the − rail.",
kids: "The triangle = the round light. It only glows one way round — long leg toward the push." } },
],
},
blink: {
title: { adult: "The blinker (RC)", kids: "The blinker" },
blurb: { adult: "Add a capacitor across the LED and the current ramps instead of snapping on — the bones of Level 2's RC timer.",
kids: "Add a bucket (capacitor) and the light fades in instead of popping on. Tap a part to match it up." },
Schem: SlaBlinkSchematic, Board: SlaBlinkBoard,
parts: [
{ id: "batt", n: { adult: "Battery (9 V)", kids: "Battery" },
s: { adult: "Same source: 9 V block feeding the + and − rails.",
kids: "The same 9V pusher, feeding the two rails." } },
{ id: "res", n: { adult: "Resistor", kids: "Resistor (pinch)" },
s: { adult: "Sets how fast the cap fills. On the board it runs from the + rail to the shared node row.",
kids: "Decides how fast the bucket fills. It runs from + down to the middle row." } },
{ id: "cap", n: { adult: "Capacitor", kids: "Bucket (capacitor)" },
s: { adult: "Two plates on the middle branch = the electrolytic can from the node to the − rail. Mind the + leg.",
kids: "Two lines = the bucket. It sits from the middle row down to −, filling and emptying." } },
{ id: "led", n: { adult: "LED", kids: "LED (light)" },
s: { adult: "Shares the node with the cap, then down to −. It brightens as the cap charges.",
kids: "Sits next to the bucket. It glows brighter as the bucket fills up." } },
],
},
};
function SlaSchematicVsBoard({ kids }) {
const [which, setWhich] = _slaState("loop");
const [active, setActive] = _slaState(null);
const C = SLA_CIRCUITS[which];
const activePart = C.parts.find(p => p.id === active);
return (
schematic{kids ? "the drawing" : "how it's drawn"}
becomes
→
breadboard{kids ? "the real build" : "how it's built"}
{/* part chips + explanation */}
{C.parts.map(p => (
))}
{activePart
? <>{kids ? activePart.n.kids : activePart.n.adult}. {kids ? activePart.s.kids : activePart.s.adult}
: (kids ? "Hover or tap a part above to light it up in both pictures." : "Hover or tap any part — symbol or chip — to see the same component highlighted in the diagram and on the board.")}
);
}
/* ════════ ReadTheLoop — trace the current around a diagram ════════ */
const SLA_LOOP_PTS = [[46, 46], [250, 46], [250, 178], [46, 178]]; // closed rect, clockwise
function slaLoopGeom() {
const pts = SLA_LOOP_PTS;
const segs = [];
let total = 0;
for (let i = 0; i < pts.length; i++) {
const a = pts[i], b = pts[(i + 1) % pts.length];
const len = Math.hypot(b[0] - a[0], b[1] - a[1]);
segs.push({ a, b, len, start: total }); total += len;
}
return { segs, total };
}
function slaPosAt(u, geom) {
let d = u * geom.total;
for (const s of geom.segs) {
if (d <= s.len || s === geom.segs[geom.segs.length - 1]) {
const f = Math.max(0, Math.min(1, d / s.len));
return [s.a[0] + (s.b[0] - s.a[0]) * f, s.a[1] + (s.b[1] - s.a[1]) * f];
}
d -= s.len;
}
return geom.segs[0].a;
}
/* which story beat is the dot in, by position */
function slaBeat(pos, kids) {
const [x, y] = pos;
if (x <= 70 && y > 70) return kids ? { t: "The battery pushes", d: "The + side shoves the flow out the top." } : { t: "1 · The source", d: "Current leaves the battery's + terminal (top-left)." };
if (y <= 70) return x < 180
? (kids ? { t: "Into the resistor", d: "The pinch slows the flow to a safe trickle." } : { t: "2 · Through the resistor", d: "The resistor limits the current before it reaches the LED." })
: (kids ? { t: "Along the wire", d: "Plain wire — no slowing here." } : { t: "Wire — no drop", d: "A bare wire carries current with ~no resistance." });
if (x >= 230) return kids ? { t: "The LED lights!", d: "Flow passes the right way through the light — it glows." } : { t: "3 · Through the LED", d: "Current passes the LED in its forward (arrow) direction — it emits light." };
return kids ? { t: "Back home", d: "The flow returns to the battery's − side." } : { t: "4 · Return to −", d: "Current completes the loop back to the battery's − terminal." };
}
function SlaReadTheLoop({ kids }) {
const dotRef = _slaRef(null);
const [playing, setPlaying] = _slaState(true);
const [beat, setBeat] = _slaState(() => slaBeat([46, 120], kids));
const geom = _slaRef(slaLoopGeom()).current;
_slaEffect(() => {
let raf, t0 = performance.now(), last = -1;
const speed = 0.16; // loops/sec
const tick = (now) => {
const u = ((now - t0) / 1000 * speed) % 1;
const pos = slaPosAt(u, geom);
if (dotRef.current) { dotRef.current.setAttribute("cx", pos[0].toFixed(1)); dotRef.current.setAttribute("cy", pos[1].toFixed(1)); }
const zone = Math.floor(u * 8);
if (zone !== last) { last = zone; setBeat(slaBeat(pos, kids)); }
if (playing) raf = requestAnimationFrame(tick);
};
if (playing) raf = requestAnimationFrame(tick);
return () => raf && cancelAnimationFrame(raf);
}, [playing, kids]);
const T = 46, B = 178, L = 46, R = 250;
return (
{beat.t}
{beat.d}
{kids ? "The orange dot is the flow. Watch it go round and round — that's a circuit!" : "The dot follows conventional current: + → around the loop → −. A circuit must be a closed loop or nothing flows."}