/* beacon-build.jsx — Level 2 capstone: assemble the whole Beacon.
Pulls the values you chose in The Beacon project (localStorage 'hte-project'),
builds the device up step-by-step on a breadboard, and ends with a live
555-driven blink at YOUR computed rate. Names bb-/BB- prefixed. */
/* recommended values that each pass their stage's spec — used as fallback
when a stage wasn't completed in the project. */
const BB_DEFAULTS = {
ledMode: "parallel", ledR: 470, // First Light / Beacon array
Rb: 4700, // transistor base resistor
softR: 10000, softC: 1e-4, // soft-start RC → τ ≈ 1 s
diode: 1.0, // protection diode rating (A)
R1: 1000, R2: 33000, C: 1e-5, // 555 timing → ~2 Hz
};
const bbOhm = (r) => r >= 1000 ? `${(r / 1000).toFixed(r % 1000 ? 1 : 0)} kΩ` : `${r} Ω`;
const bbFar = (c) => c >= 1e-6 ? `${(c * 1e6).toFixed(0)} µF` : `${(c * 1e9).toFixed(0)} nF`;
/* read the player's chosen Beacon parts (or fall back to recommended) */
function bbReadValues() {
let picks = {}, done = {};
try {
const raw = JSON.parse(localStorage.getItem("hte-project") || "{}");
picks = raw.picks || {};
done = raw.done || {};
} catch (e) {}
const g = (stage, pick, def) => {
const v = picks[stage] && picks[stage][pick];
return (v === undefined || v === null) ? def : v;
};
const ledR = g("light", "R", g("array", "R", BB_DEFAULTS.ledR));
const ledMode = g("array", "mode", BB_DEFAULTS.ledMode);
const Rb = g("drive", "Rb", BB_DEFAULTS.Rb);
const softR = g("soft", "R", BB_DEFAULTS.softR);
const softC = g("soft", "C", BB_DEFAULTS.softC);
const diode = g("protect", "d", BB_DEFAULTS.diode);
const R1 = g("blink", "R1", BB_DEFAULTS.R1);
const R2 = g("blink", "R2", BB_DEFAULTS.R2);
const C = g("blink", "C", BB_DEFAULTS.C);
const blinkHz = 1.44 / ((R1 + 2 * R2) * C);
const tau = softR * softC; // soft-start time constant (s)
// which source stages were actually completed by the user
const used = {
led: !!(done.light || done.array),
drive: !!done.drive,
soft: !!done.soft,
protect: !!done.protect,
blink: !!done.blink,
};
const fromProject = used.led || used.drive || used.soft || used.protect || used.blink;
return { ledR, ledMode, Rb, softR, softC, diode, R1, R2, C, blinkHz, tau, used, fromProject };
}
/* ─── breadboard component glyphs ────────────────────────────────────────── */
const BB_INK = "var(--ink)";
const BB_HOT = "var(--current)";
const BB_RED = "#c0392b";
const BB_BLU = "#2a6fb0";
function bbWire(x1, y1, x2, y2, color, k, w = 3) {
return ;
}
function bbResistor(cx, cy, label, k, vertical = false) {
const w = 46, h = 15;
return (
{vertical
? <>
: <>
{[-10, -3, 4, 11].map((dx, i) => )}}
{label && {label}}
);
}
function bbLED(cx, cy, lit, k) {
return (
);
}
function bbCap(cx, cy, label, k) {
return (
+
{label && {label}}
);
}
/* NPN drawn as a proper schematic symbol with distinct, labelled pins:
BASE exits left (cx-32,cy) · COLLECTOR exits up (cx+14,cy-30) · EMITTER
exits down with the outward arrow (cx+14,cy+30). The board wires each pin
to its own node — base from R_b, collector to the lamp, emitter to −. */
function bbTransistor(cx, cy, on, k) {
const col = on ? BB_HOT : BB_INK;
const barX = cx - 6;
// emitter arrowhead, pointing outward along the bar→emitter diagonal
const ax = barX, ay = cy + 7, bx = cx + 14, by = cy + 18;
const dx = bx - ax, dy = by - ay, L = Math.hypot(dx, dy);
const ux = dx / L, uy = dy / L, px = -uy, py = ux;
const tx = ax + ux * (L * 0.66 + 5), ty = ay + uy * (L * 0.66 + 5);
const hx = ax + ux * (L * 0.66), hy = ay + uy * (L * 0.66);
const arrow = `${tx.toFixed(1)},${ty.toFixed(1)} ${(hx + px * 3.4).toFixed(1)},${(hy + py * 3.4).toFixed(1)} ${(hx - px * 3.4).toFixed(1)},${(hy - py * 3.4).toFixed(1)}`;
return (
{/* base bar */}
{/* base lead — exits LEFT */}
{/* collector lead — exits UP */}
{/* emitter lead — exits DOWN, with arrow */}
{/* pin labels */}
C
B
E
NPN · Q1
);
}
/* ─── the 555 DIP ───────────────────────────────────────────────────────── */
function BB555({ x, y, active }) {
const w = 96, h = 116;
const pinL = [y + 20, y + 48, y + 76, y + 104]; // pins 1-4 down the left
const pinR = [y + 104, y + 76, y + 48, y + 20]; // pins 8-5 down the right
const labL = ["GND", "TRG", "OUT", "RST"];
const labR = ["VCC", "DIS", "THR", "CTL"];
return (
{pinL.map((py, i) => )}
{pinR.map((py, i) => )}
555
TIMER
{pinL.map((py, i) => {labL[i]})}
{pinR.map((py, i) => {labR[i]})}
);
}
/* ─── the assembling breadboard ─────────────────────────────────────────── */
function BeaconBoard({ step, lit, vals }) {
const VB = { w: 960, h: 500 };
const railTopP = 42, railTopN = 64, railBotN = 452, railBotP = 474;
const show = (s) => step >= s;
const isNew = (s) => step === s;
const dim = (s) => ({ opacity: show(s) ? 1 : 0.08, transition: "opacity 350ms ease" });
const glow = (s) => isNew(s) ? { filter: "drop-shadow(0 0 6px var(--current))" } : {};
return (
);
}
/* format the live values for board labels */
function bbVals(v) {
return {
ledR: bbOhm(v.ledR), Rb: bbOhm(v.Rb),
R1: bbOhm(v.R1), R2: bbOhm(v.R2), C: bbFar(v.C),
};
}
Object.assign(window, { bbReadValues, BeaconBoard, BB_DEFAULTS, bbOhm, bbFar });