alexander.lyall/computing-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 30 Wiki Activity

Snapshot as lots broken. Taken snapshot before reverting commits

Browse Source
This commit is contained in:
Alexander Lyall
2025-12-17 17:28:40 +00:00
parent ce6c2298a1
commit 3addaca2f2
22 changed files with 3319 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
src/scripts/binary.js
View File

@@ -34,11 +34,8 @@
----------------------------- */
let bitCount = clampInt(Number(bitsInput?.value ?? 8), 1, 64);
let bits = new Array(bitCount).fill(false);
let randomTimer = null;
// For responsive wrapping of the top binary display
let nibblesPerLine = null;
let wrapMeasureSpan = null;
let randomTimer = null;
/* -----------------------------
HELPERS
@@ -83,7 +80,6 @@
function unsignedBigIntToBits(vUnsigned) {
const span = unsignedMaxExclusive(bitCount);
const v = ((vUnsigned % span) + span) % span;
for (let i = 0; i < bitCount; i++) {
bits[i] = ((v >> BigInt(i)) & 1n) === 1n;
}
@@ -102,6 +98,16 @@
unsignedBigIntToBits(v);
}
function formatBinaryGrouped() {
let s = "";
for (let i = bitCount - 1; i >= 0; i--) {
s += bits[i] ? "1" : "0";
const posFromRight = (bitCount - i);
if (i !== 0 && posFromRight % 4 === 0) s += " ";
}
return s;
}
function updateModeHint() {
if (!modeHint) return;
modeHint.textContent = isTwosMode()
@@ -109,72 +115,6 @@
: "Tip: In unsigned binary, all bits represent positive values.";
}
/* -----------------------------
TOP BINARY DISPLAY: responsive wrap by nibble count
----------------------------- */
function ensureWrapMeasurer() {
if (wrapMeasureSpan || !binaryEl) return;
wrapMeasureSpan = document.createElement("span");
wrapMeasureSpan.style.position = "absolute";
wrapMeasureSpan.style.visibility = "hidden";
wrapMeasureSpan.style.whiteSpace = "pre";
wrapMeasureSpan.style.pointerEvents = "none";
// Inherit font/letterspacing from binaryEl
wrapMeasureSpan.style.font = getComputedStyle(binaryEl).font;
wrapMeasureSpan.style.letterSpacing = getComputedStyle(binaryEl).letterSpacing;
document.body.appendChild(wrapMeasureSpan);
}
function computeNibblesPerLine() {
if (!binaryEl) return null;
ensureWrapMeasurer();
// Available width = width of the readout area (binaryEl parent)
const host = binaryEl.parentElement;
if (!host) return null;
const hostW = host.getBoundingClientRect().width;
if (!Number.isFinite(hostW) || hostW <= 0) return null;
// Measure one nibble including trailing space ("0000 ")
wrapMeasureSpan.textContent = "0000 ";
const nibbleW = wrapMeasureSpan.getBoundingClientRect().width || 1;
// Safety: keep at least 1 nibble per line
const max = Math.max(1, Math.floor(hostW / nibbleW));
return max;
}
function formatBinaryWrapped() {
// EXACT bitCount digits (no padding to 4)
let raw = "";
for (let i = bitCount - 1; i >= 0; i--) raw += bits[i] ? "1" : "0";
// If <= 4 bits, do NOT insert spaces/newlines at all
if (bitCount <= 4) return raw;
const groups = [];
for (let i = 0; i < raw.length; i += 4) {
groups.push(raw.slice(i, i + 4));
}
const perLine = nibblesPerLine ?? groups.length;
if (perLine >= groups.length) return groups.join(" ");
const lines = [];
for (let i = 0; i < groups.length; i += perLine) {
lines.push(groups.slice(i, i + perLine).join(" "));
}
return lines.join("\n");
}
function refreshBinaryWrap() {
const next = computeNibblesPerLine();
// Only update if it actually changes (prevents jitter)
if (next !== nibblesPerLine) nibblesPerLine = next;
updateReadout(); // re-render with new wrap
}
/* -----------------------------
BUILD UI (BITS)
----------------------------- */
@@ -188,17 +128,9 @@
bitsGrid.innerHTML = "";
bitsGrid.classList.toggle("bitsFew", bitCount < 8);
if (bitCount < 8) {
bitsGrid.style.setProperty("--cols", String(bitCount));
} else {
bitsGrid.style.removeProperty("--cols");
}
for (let i = bitCount - 1; i >= 0; i--) {
const bitEl = document.createElement("div");
bitEl.className = "bit";
bitEl.innerHTML = `
<div class="bulb" id="bulb-${i}" aria-hidden="true">💡</div>
<div class="bitVal" id="bitLabel-${i}"></div>
@@ -207,7 +139,6 @@
<span class="slider"></span>
</label>
`;
bitsGrid.appendChild(bitEl);
}
@@ -219,28 +150,6 @@
});
});
// bulb styling + 25% bigger (vs 26px previously)
for (let i = 0; i < bitCount; i++) {
const bulb = document.getElementById(`bulb-${i}`);
if (!bulb) continue;
bulb.style.width = "auto";
bulb.style.height = "auto";
bulb.style.border = "none";
bulb.style.background = "transparent";
bulb.style.borderRadius = "0";
bulb.style.boxShadow = "none";
bulb.style.opacity = "0.45";
bulb.style.fontSize = "32px";
bulb.style.lineHeight = "1";
bulb.style.display = "flex";
bulb.style.alignItems = "center";
bulb.style.justifyContent = "center";
bulb.style.filter = "grayscale(1)";
bulb.textContent = "💡";
}
// wrapping may change when bit width changes
refreshBinaryWrap();
updateUI();
}
@@ -252,8 +161,10 @@
const label = document.getElementById(`bitLabel-${i}`);
if (!label) continue;
// Keep label on ONE LINE (no wrapping)
label.style.whiteSpace = "nowrap";
if (isTwosMode() && i === bitCount - 1) {
// Keep on one line (CSS: white-space:nowrap)
label.textContent = `-${pow2Big(bitCount - 1).toString()}`;
} else {
label.textContent = pow2Big(i).toString();
@@ -272,25 +183,14 @@
for (let i = 0; i < bitCount; i++) {
const bulb = document.getElementById(`bulb-${i}`);
if (!bulb) continue;
const on = bits[i] === true;
if (on) {
bulb.style.opacity = "1";
bulb.style.filter = "grayscale(0)";
bulb.style.textShadow = "0 0 18px rgba(255,216,107,.75), 0 0 30px rgba(255,216,107,.45)";
} else {
bulb.style.opacity = "0.45";
bulb.style.filter = "grayscale(1)";
bulb.style.textShadow = "none";
}
bulb.classList.toggle("on", bits[i] === true);
}
}
function updateReadout() {
if (!denaryEl || !binaryEl) return;
denaryEl.textContent = (isTwosMode() ? bitsToSignedBigIntTwos() : bitsToUnsignedBigInt()).toString();
binaryEl.textContent = formatBinaryWrapped();
binaryEl.textContent = formatBinaryGrouped();
}
function updateUI() {
@@ -302,18 +202,16 @@
}
/* -----------------------------
SET FROM INPUT
INPUT SETTERS
----------------------------- */
function setFromBinaryString(binStr) {
const clean = String(binStr ?? "").replace(/\s+/g, "");
if (!/^[01]+$/.test(clean)) return false;
const padded = clean.slice(-bitCount).padStart(bitCount, "0");
for (let i = 0; i < bitCount; i++) {
const charFromRight = padded[padded.length - 1 - i];
bits[i] = charFromRight === "1";
}
updateUI();
return true;
}
@@ -355,15 +253,13 @@
}
function shiftRight() {
if (isTwosMode()) {
// arithmetic right shift: keep MSB
const msb = bits[bitCount - 1];
for (let i = 0; i < bitCount - 1; i++) bits[i] = bits[i + 1];
bits[bitCount - 1] = msb;
} else {
for (let i = 0; i < bitCount - 1; i++) bits[i] = bits[i + 1];
bits[bitCount - 1] = false;
}
// Unsigned: logical right shift (MSB becomes 0)
// Two's complement: arithmetic right shift (MSB preserved)
const msb = bits[bitCount - 1];
for (let i = 0; i < bitCount - 1; i++) bits[i] = bits[i + 1];
bits[bitCount - 1] = isTwosMode() ? msb : false;
updateUI();
}
@@ -384,7 +280,8 @@
signedBigIntToBitsTwos(v);
} else {
const span = unsignedMaxExclusive(bitCount);
unsignedBigIntToBits((bitsToUnsignedBigInt() + 1n) % span);
const v = (bitsToUnsignedBigInt() + 1n) % span;
unsignedBigIntToBits(v);
}
updateUI();
}
@@ -398,16 +295,18 @@
signedBigIntToBitsTwos(v);
} else {
const span = unsignedMaxExclusive(bitCount);
unsignedBigIntToBits((bitsToUnsignedBigInt() - 1n + span) % span);
const v = (bitsToUnsignedBigInt() - 1n + span) % span;
unsignedBigIntToBits(v);
}
updateUI();
}
/* -----------------------------
RANDOM
RANDOM (with running pulse + longer run)
----------------------------- */
function cryptoRandomBigInt(maxExclusive) {
if (maxExclusive <= 0n) return 0n;
const bitLen = maxExclusive.toString(2).length;
const byteLen = Math.ceil(bitLen / 8);
@@ -420,12 +319,13 @@
const extraBits = BigInt(byteLen * 8 - bitLen);
if (extraBits > 0n) x = x >> extraBits;
if (x < maxExclusive) return x;
}
}
function setRandomOnce() {
const span = unsignedMaxExclusive(bitCount);
const span = unsignedMaxExclusive(bitCount); // 2^n
const u = cryptoRandomBigInt(span);
unsignedBigIntToBits(u);
updateUI();
@@ -437,8 +337,11 @@
randomTimer = null;
}
// pulse while running
btnRandom?.classList.add("is-running");
const start = Date.now();
const durationMs = 1125; // (your “~25% longer” vs 900ms)
const durationMs = 1125; // 25% longer than 900ms
const tickMs = 80;
randomTimer = setInterval(() => {
@@ -446,30 +349,31 @@
if (Date.now() - start >= durationMs) {
clearInterval(randomTimer);
randomTimer = null;
btnRandom?.classList.remove("is-running");
}
}, tickMs);
}
/* -----------------------------
BIT WIDTH CONTROLS
BIT WIDTH
----------------------------- */
function setBitWidth(n) {
buildBits(clampInt(n, 1, 64));
}
/* -----------------------------
TOOLBOX TOGGLE (simple open/close state)
TOOLBOX VISIBILITY
----------------------------- */
function setToolboxOpen(open) {
document.body.classList.toggle("toolboxClosed", !open);
toolboxToggle?.setAttribute("aria-expanded", open ? "true" : "false");
refreshBinaryWrap(); // width changes when toolbox closes/opens
function setToolboxVisible(isVisible) {
if (!toolboxPanel) return;
toolboxPanel.style.display = isVisible ? "flex" : "none";
toolboxToggle?.setAttribute("aria-expanded", String(isVisible));
}
/* -----------------------------
EVENTS
----------------------------- */
modeToggle?.addEventListener("change", () => updateUI());
modeToggle?.addEventListener("change", updateUI);
btnCustomBinary?.addEventListener("click", () => {
const v = prompt(`Enter binary (spaces allowed). Current width: ${bitCount} bits`);
@@ -480,8 +384,8 @@
btnCustomDenary?.addEventListener("click", () => {
const v = prompt(
isTwosMode()
? `Enter denary (${twosMin(bitCount).toString()} to ${twosMax(bitCount).toString()}):`
: `Enter denary (0 to ${unsignedMaxValue(bitCount).toString()}):`
? `Enter denary (${twosMin(bitCount)} to ${twosMax(bitCount)}):`
: `Enter denary (0 to ${unsignedMaxValue(bitCount)}):`
);
if (v === null) return;
if (!setFromDenaryInput(v)) alert("Invalid denary for current mode/bit width");
@@ -502,15 +406,8 @@
bitsInput?.addEventListener("change", () => setBitWidth(Number(bitsInput.value)));
toolboxToggle?.addEventListener("click", () => {
const isOpen = !document.body.classList.contains("toolboxClosed");
setToolboxOpen(!isOpen);
});
// Recompute wrapping live when the window size changes
let resizeT = null;
window.addEventListener("resize", () => {
if (resizeT) clearTimeout(resizeT);
resizeT = setTimeout(() => refreshBinaryWrap(), 60);
const isOpen = toolboxToggle.getAttribute("aria-expanded") !== "false";
setToolboxVisible(!isOpen);
});
/* -----------------------------
@@ -518,5 +415,5 @@
----------------------------- */
updateModeHint();
buildBits(bitCount);
setToolboxOpen(true);
setToolboxVisible(true);
})();