/* schematic-kit.jsx — Level 2 · The Language (how to read a schematic).
Self-contained schematic SYMBOL glyphs + matching physical BREADBOARD part
glyphs + the interactive pieces that teach reading: SymbolKey (the alphabet),
ReadTheLoop (trace the current), and SchematicVsBoard (the same circuit shown
as a diagram AND as a real build, cross-highlighted). All names slg-/Slg-
prefixed so they never collide with other per-file globals. */
const SLG_INK = "var(--ink-soft)";
const SLG_HOT = "var(--current)";
const SLG_FAINT = "var(--ink-faint)";
const slgGlow = (on) => (on ? "drop-shadow(0 0 5px var(--current))" : "none");
/* ── schematic SYMBOL glyphs ────────────────────────────────────────────────
Each takes (cx, cy, col, o?) and returns an SVG group of stroked primitives
in the site's hand-drawn ink style. o.h = horizontal (default true). */
const SlgSym = {
battery(cx, cy, col) {
// two stacked cells, vertical orientation (leads exit top/bottom)
return (
+
);
},
resistor(cx, cy, col, o = {}) {
const h = o.h !== false;
return h
?
: ;
},
led(cx, cy, col, o = {}) {
const dir = o.dir || "down"; // arrow of travel
// triangle + cathode bar; vertical (current flows down) by default
if (dir === "down") {
return (
);
}
return ( // horizontal, points right
);
},
capacitor(cx, cy, col) {
// vertical branch: two horizontal plates
return (
+
);
},
diode(cx, cy, col, o = {}) {
const h = o.h !== false;
if (h) return (
);
return (
);
},
ground(cx, cy, col) {
return (
);
},
switch(cx, cy, col) {
return (
);
},
transistor(cx, cy, col) {
return (
);
},
ic(cx, cy, col) {
return (
555
);
},
wire(cx, cy, col) {
return (
);
},
};
/* the alphabet, in teaching order */
const SLG_ALPHABET = [
{ type: "battery", name: { adult: "Battery / cell", kids: "Battery" },
desc: { adult: "The source. Long line is +, short fat line is −. Stacked pairs mean more cells (more volts).",
kids: "The pusher. The long line is the + side. It gives the push that moves the flow." } },
{ type: "wire", name: { adult: "Wire & junction", kids: "Wire" },
desc: { adult: "A plain line is a wire — no resistance. A solid dot means wires are joined; crossing with no dot means they pass over, unconnected.",
kids: "A line is a wire the flow runs along. A dot means two wires are joined together." } },
{ type: "resistor", name: { adult: "Resistor", kids: "Resistor (pinch)" },
desc: { adult: "Limits current. The rectangle (or zig-zag, in US style) is the same part. Value in Ω sits beside it.",
kids: "A pinch in the pipe. It slows the flow down so nothing gets too much." } },
{ type: "led", name: { adult: "LED", kids: "LED (light)" },
desc: { adult: "A diode that emits light. Triangle points the way current flows; the bar is the cathode (−). The two arrows mean 'light out'.",
kids: "A light. The triangle shows which way the flow goes through it. It only works one way round." } },
{ type: "capacitor", name: { adult: "Capacitor", kids: "Capacitor (bucket)" },
desc: { adult: "Stores charge. Two plates. A curved/ + -marked plate means it's polarised (electrolytic) — mind the +.",
kids: "A little bucket. It fills up with charge and empties out — that's what makes things fade and blink." } },
{ type: "diode", name: { adult: "Diode", kids: "Diode (one-way)" },
desc: { adult: "A one-way valve for current. Triangle is the allowed direction; the bar blocks the reverse.",
kids: "A one-way door. Flow goes through the pointy way, never backwards." } },
{ type: "switch", name: { adult: "Switch", kids: "Switch" },
desc: { adult: "Opens or closes the path. Drawn open (lever lifted) — press it and the two dots connect.",
kids: "A gate. Open = no flow. Closed = flow runs through." } },
{ type: "transistor", name: { adult: "Transistor (NPN)", kids: "Transistor (gate)" },
desc: { adult: "A current-controlled switch/amplifier. Base (left) controls flow from collector to emitter (the arrow marks the emitter).",
kids: "A tiny tap a small signal can open. A little push on the side lets a big flow through." } },
{ type: "ic", name: { adult: "IC (e.g. 555)", kids: "Chip" },
desc: { adult: "An integrated circuit — many parts in one box. Pins are numbered; the notch/dot marks pin 1.",
kids: "A whole circuit packed into one little box, with legs (pins) to wire it up." } },
{ type: "ground", name: { adult: "Ground (0 V)", kids: "Ground" },
desc: { adult: "The reference 0 V — usually the − rail. Every ground symbol is the same node, even when not drawn connected.",
kids: "The bottom — where the flow returns to. Think of it as the floor everything sits on." } },
];
function SlgSymbolKey({ kids }) {
const [open, setOpen] = React.useState("battery");
return (
{SLG_ALPHABET.map(s => {
const on = open === s.type;
return (
);
})}