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

Compare commits

base: alexander.lyall:1519032f5b6a2c88e3551cf46e1a70e59c370fc8
Branches Tags
alexander.lyall:main alexander.lyall:Version-2-Rebase
alexander.lyall:v25.12.26-pre.version-2-rebase.4facee9 alexander.lyall:2.0
...
compare: alexander.lyall:f68aea4e33db1589408a1848c7a469ad77d432d6
Branches Tags
alexander.lyall:Version-2-Rebase alexander.lyall:main
alexander.lyall:v25.12.26-pre.version-2-rebase.4facee9 alexander.lyall:2.0

2 Commits
1519032f5b ... f68aea4e33

Author SHA1 Message Date
Alexander Lyall
f68aea4e33 Binary Page Beta 1 
Signed-off-by: Alexander Lyall <alex@adcm.uk>
 2025-12-16 17:18:03 +00:00
Alexander Lyall
91a07e49ae feat(v2-alpha): add collapsible toolbox and refine binary simulator layout 
- Introduce collapsible right-hand toolbox for the binary simulator
- Pin toolbox to the right edge with responsive fallback on smaller screens
- Rework tools and bit-width controls into a shared side layout
- Adjust control sizing, spacing, and visual hierarchy for clarity

Notes:
- Toolbox collapse is functional but requires refinement
- Tools and Bit Width should be merged into a single module/card
- Collapsed state does not yet fully hide the panel or re-centre content

Signed-off-by: Alexander Lyall <alex@adcm.uk>
 2025-12-16 15:13:18 +00:00
3 changed files with 496 additions and 435 deletions
Expand all files Collapse all files

127
src/pages/binary.astro
View File

@@ -1,13 +1,5 @@
--- ---
import "../styles/binary.css"; import "../styles/binary.css";
// ✅ Vite-bundled JS URL (works in dev + build + preview)
import binaryScriptUrl from "../scripts/binary.js?url";
// If you already have a site-wide Layout that adds header/footer,
// wrap the page with it here.
// Example (uncomment and adjust if you have it):
// import Layout from "../layouts/Layout.astro";
--- ---
<!doctype html> <!doctype html>
@@ -19,47 +11,15 @@ import binaryScriptUrl from "../scripts/binary.js?url";
</head> </head>
<body> <body>
<!-- If using Layout, do: <!-- Fixed/pinned toolbox toggle -->
<Layout title="Binary | Computing:Box"> <button id="toolboxToggle" class="toolboxToggle" type="button" aria-expanded="true" aria-controls="toolboxPanel">
...everything inside <main>... <span class="toolboxIcon" aria-hidden="true">🧰</span>
</Layout> <span class="toolboxText">Toolbox</span>
--> </button>
<main class="wrap"> <!-- Fixed/pinned toolbox panel -->
<section class="topGrid"> <aside id="toolboxPanel" class="toolboxFixed" aria-label="Toolbox">
<!-- LEFT --> <div class="panelCol">
<div>
<div class="readout">
<div class="label">Denary</div>
<div id="denaryNumber" class="num denaryValue">0</div>
<div class="label">Binary</div>
<div id="binaryNumber" class="num binaryValue">0</div>
<!-- Custom buttons on one line -->
<div class="controlsStack">
<div class="controlsRow">
<button class="btn btnAccent" id="btnCustomBinary" type="button">Custom Binary</button>
<button class="btn btnAccent" id="btnCustomDenary" type="button">Custom Denary</button>
</div>
<!-- Shift buttons on another line -->
<div class="controlsRow">
<button class="btn" id="btnShiftLeft" type="button">Left Shift</button>
<button class="btn" id="btnShiftRight" type="button">Right Shift</button>
</div>
</div>
</div>
<div class="divider"></div>
<section class="bitsWrap" aria-label="Bit switches">
<div class="bitsGrid" id="bitsGrid"></div>
</section>
</div>
<!-- RIGHT -->
<aside class="panelCol">
<div class="card"> <div class="card">
<div class="cardTitle">Mode</div> <div class="cardTitle">Mode</div>
@@ -79,31 +39,28 @@ import binaryScriptUrl from "../scripts/binary.js?url";
</div> </div>
</div> </div>
<!-- Tools: arrows on one row, Reset+Random on one row --> <!-- MERGED: Tools + Bit width -->
<div class="card"> <div class="card">
<div class="cardTitle">Tools</div> <div class="cardTitle">Tools</div>
<div class="toolRow"> <!-- Row 1: ▼ ▲ (left) + Reset (right) -->
<button class="toolBtn toolSpin" id="btnDec" type="button" aria-label="Decrement">▼</button> <div class="toolsTopRow">
<button class="toolBtn toolSpin" id="btnInc" type="button" aria-label="Increment">▲</button> <div class="spinGroup" aria-label="Increment and decrement">
<button class="toolBtn toolSpin toolDown" id="btnDec" type="button" aria-label="Decrement">▼</button>
<button class="toolBtn toolSpin toolUp" id="btnInc" type="button" aria-label="Increment">▲</button>
</div> </div>
<div class="toolRow2"> <button class="toolBtn toolReset" id="btnClear" type="button">Reset</button>
<button class="toolBtn" id="btnClear" type="button">Reset</button>
<button class="toolBtn" id="btnRandom" type="button">Random</button>
</div> </div>
<div class="hint">Random runs briefly then stops automatically.</div> <!-- Row 2: Bit Width (left) + Random (right) -->
</div> <div class="toolsBottomRow">
<div class="bitWidthMini" aria-label="Bit width">
<div class="bitWidthMiniLabel">Bit width</div>
<div class="card"> <div class="bitWidthMiniRow">
<div class="cardTitle">Bit width</div>
<div class="bitWidthRow">
<button class="miniBtn" id="btnBitsDown" type="button" aria-label="Decrease bits">−</button> <button class="miniBtn" id="btnBitsDown" type="button" aria-label="Decrease bits">−</button>
<div class="bitInputWrap">
<div class="bitInputLabel">Bits</div>
<input <input
id="bitsInput" id="bitsInput"
class="bitInput" class="bitInput"
@@ -115,18 +72,54 @@ import binaryScriptUrl from "../scripts/binary.js?url";
value="8" value="8"
aria-label="Number of bits" aria-label="Number of bits"
/> />
</div>
<button class="miniBtn" id="btnBitsUp" type="button" aria-label="Increase bits">+</button> <button class="miniBtn" id="btnBitsUp" type="button" aria-label="Increase bits">+</button>
</div> </div>
</div>
<div class="hint">Minimum 1 bit, maximum 64 bits.</div> <button class="toolBtn toolRandom" id="btnRandom" type="button">Random</button>
</div>
<div class="hint">Random runs briefly then stops automatically.</div>
</div>
</div> </div>
</aside> </aside>
<!-- Main content (reserves space for toolbox when open) -->
<main id="mainWrap" class="wrap">
<section class="topGrid">
<!-- LEFT -->
<div>
<div class="readout">
<div class="label">Denary</div>
<div id="denaryNumber" class="num denaryValue">0</div>
<div class="label">Binary</div>
<div id="binaryNumber" class="num binaryValue">0000 0000</div>
<div class="controlsStack">
<div class="controlsRow">
<button class="btn btnAccent" id="btnCustomBinary" type="button">Custom Binary</button>
<button class="btn btnAccent" id="btnCustomDenary" type="button">Custom Denary</button>
</div>
<div class="controlsRow">
<button class="btn" id="btnShiftLeft" type="button">Left Shift</button>
<button class="btn" id="btnShiftRight" type="button">Right Shift</button>
</div>
</div>
</div>
<div class="divider"></div>
<section class="bitsWrap" aria-label="Bit switches">
<div class="bitsGrid" id="bitsGrid"></div>
</section>
</div>
</section> </section>
</main> </main>
<!-- ✅ correct bundled JS reference --> <!-- JS stays in src/ and is bundled by Astro/Vite -->
<script type="module" src={binaryScriptUrl}></script> <script type="module" src="/src/scripts/binary.js"></script>
</body> </body>
</html> </html>

208
src/scripts/binary.js
View File

@@ -1,6 +1,6 @@
// src/scripts/binary.js // src/scripts/binary.js
// Computing:Box — Binary page logic (Unsigned + Two's Complement) // Computing:Box — Binary page logic (Unsigned + Two's Complement)
// NOTE: This file is written to match the IDs/classes in your current binary.astro HTML. // Matches IDs/classes in src/pages/binary.astro
(() => { (() => {
/* ----------------------------- /* -----------------------------
@@ -13,8 +13,6 @@
const modeToggle = document.getElementById("modeToggle"); const modeToggle = document.getElementById("modeToggle");
const modeHint = document.getElementById("modeHint"); const modeHint = document.getElementById("modeHint");
const lblUnsigned = document.getElementById("lblUnsigned");
const lblTwos = document.getElementById("lblTwos");
const btnCustomBinary = document.getElementById("btnCustomBinary"); const btnCustomBinary = document.getElementById("btnCustomBinary");
const btnCustomDenary = document.getElementById("btnCustomDenary"); const btnCustomDenary = document.getElementById("btnCustomDenary");
@@ -29,6 +27,9 @@
const btnBitsUp = document.getElementById("btnBitsUp"); const btnBitsUp = document.getElementById("btnBitsUp");
const btnBitsDown = document.getElementById("btnBitsDown"); const btnBitsDown = document.getElementById("btnBitsDown");
const toolboxToggle = document.getElementById("toolboxToggle");
const toolboxPanel = document.getElementById("toolboxPanel");
/* ----------------------------- /* -----------------------------
STATE STATE
----------------------------- */ ----------------------------- */
@@ -40,6 +41,10 @@
// Random run timer (brief) // Random run timer (brief)
let randomTimer = null; let randomTimer = null;
// Dynamic wrapping for the big binary display
// "nibbles per row" recalculated on resize
let nibblesPerRow = 2; // default for small widths
/* ----------------------------- /* -----------------------------
HELPERS HELPERS
----------------------------- */ ----------------------------- */
@@ -81,7 +86,8 @@
} }
function unsignedBigIntToBits(vUnsigned) { function unsignedBigIntToBits(vUnsigned) {
const v = ((vUnsigned % unsignedMaxExclusive(bitCount)) + unsignedMaxExclusive(bitCount)) % unsignedMaxExclusive(bitCount); const span = unsignedMaxExclusive(bitCount);
const v = ((vUnsigned % span) + span) % span;
for (let i = 0; i < bitCount; i++) { for (let i = 0; i < bitCount; i++) {
bits[i] = ((v >> BigInt(i)) & 1n) === 1n; bits[i] = ((v >> BigInt(i)) & 1n) === 1n;
} }
@@ -91,48 +97,77 @@
const u = bitsToUnsignedBigInt(); const u = bitsToUnsignedBigInt();
const signBit = bits[bitCount - 1] === true; const signBit = bits[bitCount - 1] === true;
if (!signBit) return u; if (!signBit) return u;
// negative: u - 2^n
return u - pow2Big(bitCount); return u - pow2Big(bitCount);
} }
function signedBigIntToBitsTwos(vSigned) { function signedBigIntToBitsTwos(vSigned) {
// wrap into range [-2^(n-1), 2^(n-1)-1]
const min = twosMin(bitCount);
const max = twosMax(bitCount);
const span = pow2Big(bitCount); // 2^n const span = pow2Big(bitCount); // 2^n
let v = vSigned; let v = vSigned;
// wrap using modular arithmetic on signed domain
// Convert to unsigned representative: v mod 2^n
v = ((v % span) + span) % span; v = ((v % span) + span) % span;
unsignedBigIntToBits(v); unsignedBigIntToBits(v);
// labels/denary will show signed later
// (No further action needed here)
}
function formatBinaryGrouped() {
// MSB..LSB with a space every 4 bits (matches your screenshot 0000 0000)
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() { function updateModeHint() {
if (!modeHint) return; if (!modeHint) return;
if (isTwosMode()) { if (isTwosMode()) {
modeHint.textContent = "Tip: In two’s complement, the left-most bit (MSB) represents a negative value."; modeHint.textContent =
"Tip: In two’s complement, the left-most bit (MSB) represents a negative value.";
} else { } else {
modeHint.textContent = "Tip: In unsigned binary, all bits represent positive values."; modeHint.textContent =
"Tip: In unsigned binary, all bits represent positive values.";
} }
} }
/* -----------------------------
BIG BINARY DISPLAY WRAP
- Determines how many nibbles (4 bits) fit per row
- Recalculates on window resize
----------------------------- */
function computeNibblesPerRow() {
if (!binaryEl) return;
// available width for the binary number = element width
const w = binaryEl.getBoundingClientRect().width;
// Approximate "nibble width" in pixels:
// 4 digits + a space; use font size and letter-spacing to estimate.
// This doesn't need to be perfect, just stable and responsive.
const style = window.getComputedStyle(binaryEl);
const fontSize = parseFloat(style.fontSize || "40"); // px
const letterSpacing = parseFloat(style.letterSpacing || "0");
const digitW = fontSize * 0.62 + letterSpacing; // rough digit width
const nibbleW = digitW * 4 + digitW * 1.2; // include gap between nibbles
// Always allow at least 2 nibbles per row
const fit = Math.max(2, Math.floor(w / nibbleW));
nibblesPerRow = fit;
}
function formatBinaryGroupedWrapped() {
// Build MSB..LSB and group into nibbles
const nibbles = [];
let current = "";
for (let i = bitCount - 1; i >= 0; i--) {
current += bits[i] ? "1" : "0";
const posFromRight = (bitCount - i);
if (posFromRight % 4 === 0 || i === 0) {
// if last group is partial, left-pad inside the group
if (current.length < 4) current = current.padStart(4, "0");
nibbles.push(current);
current = "";
}
}
// Now wrap nibbles into lines
const lines = [];
for (let i = 0; i < nibbles.length; i += nibblesPerRow) {
lines.push(nibbles.slice(i, i + nibblesPerRow).join(" "));
}
return lines.join("\n");
}
/* ----------------------------- /* -----------------------------
BUILD UI (BITS) BUILD UI (BITS)
----------------------------- */ ----------------------------- */
@@ -140,28 +175,18 @@
bitCount = clampInt(count, 1, 64); bitCount = clampInt(count, 1, 64);
if (bitsInput) bitsInput.value = String(bitCount); if (bitsInput) bitsInput.value = String(bitCount);
// reset bits array size, preserve existing LSBs where possible // preserve existing LSBs where possible
const oldBits = bits.slice(); const oldBits = bits.slice();
bits = new Array(bitCount).fill(false); bits = new Array(bitCount).fill(false);
for (let i = 0; i < Math.min(oldBits.length, bitCount); i++) bits[i] = oldBits[i]; for (let i = 0; i < Math.min(oldBits.length, bitCount); i++) bits[i] = oldBits[i];
bitsGrid.innerHTML = ""; bitsGrid.innerHTML = "";
// If less than 8 bits, centre nicely using your CSS helper
bitsGrid.classList.toggle("bitsFew", bitCount < 8);
if (bitCount < 8) {
bitsGrid.style.setProperty("--cols", String(bitCount));
} else {
bitsGrid.style.removeProperty("--cols");
}
// Render MSB..LSB left-to-right // Render MSB..LSB left-to-right
for (let i = bitCount - 1; i >= 0; i--) { for (let i = bitCount - 1; i >= 0; i--) {
const bitEl = document.createElement("div"); const bitEl = document.createElement("div");
bitEl.className = "bit"; bitEl.className = "bit";
// IMPORTANT: We render the bulb as an emoji with NO circle/ring.
// We do not rely on the .bulb CSS ring/background at all.
bitEl.innerHTML = ` bitEl.innerHTML = `
<div class="bulb" id="bulb-${i}" aria-hidden="true">💡</div> <div class="bulb" id="bulb-${i}" aria-hidden="true">💡</div>
<div class="bitVal" id="bitLabel-${i}"></div> <div class="bitVal" id="bitLabel-${i}"></div>
@@ -183,36 +208,13 @@
}); });
}); });
// Force the bulb to be "just the emoji" (removes the circle even if CSS adds it)
for (let i = 0; i < bitCount; i++) {
const bulb = document.getElementById(`bulb-${i}`);
if (!bulb) continue;
// Strip the ring/circle coming from CSS
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 = "26px";
bulb.style.lineHeight = "1";
bulb.style.display = "flex";
bulb.style.alignItems = "center";
bulb.style.justifyContent = "center";
bulb.style.filter = "grayscale(1)";
bulb.textContent = "💡";
}
updateUI(); updateUI();
} }
/* ----------------------------- /* -----------------------------
UI UPDATE (READOUT + LABELS + BULBS + SWITCHES) UI UPDATE
----------------------------- */ ----------------------------- */
function updateBitLabels() { function updateBitLabels() {
// Show weights under each bit.
// Unsigned: 2^i // Unsigned: 2^i
// Two's: MSB is -2^(n-1), others are 2^i // Two's: MSB is -2^(n-1), others are 2^i
for (let i = 0; i < bitCount; i++) { for (let i = 0; i < bitCount; i++) {
@@ -235,14 +237,11 @@
} }
function updateBulbs() { function updateBulbs() {
// Bulbs should ALWAYS reflect bits, regardless of mode.
for (let i = 0; i < bitCount; i++) { for (let i = 0; i < bitCount; i++) {
const bulb = document.getElementById(`bulb-${i}`); const bulb = document.getElementById(`bulb-${i}`);
if (!bulb) continue; if (!bulb) continue;
const on = bits[i] === true; const on = bits[i] === true;
// Make it look "lit" when on (no circle, just glow)
if (on) { if (on) {
bulb.style.opacity = "1"; bulb.style.opacity = "1";
bulb.style.filter = "grayscale(0)"; bulb.style.filter = "grayscale(0)";
@@ -266,7 +265,9 @@
denaryEl.textContent = unsigned.toString(); denaryEl.textContent = unsigned.toString();
} }
binaryEl.textContent = formatBinaryGrouped(); // Ensure nibble wrapping is up-to-date
computeNibblesPerRow();
binaryEl.textContent = formatBinaryGroupedWrapped();
} }
function updateUI() { function updateUI() {
@@ -284,11 +285,8 @@
const clean = String(binStr ?? "").replace(/\s+/g, ""); const clean = String(binStr ?? "").replace(/\s+/g, "");
if (!/^[01]+$/.test(clean)) return false; if (!/^[01]+$/.test(clean)) return false;
// Use rightmost bitCount bits; left pad with 0
const padded = clean.slice(-bitCount).padStart(bitCount, "0"); const padded = clean.slice(-bitCount).padStart(bitCount, "0");
for (let i = 0; i < bitCount; i++) { for (let i = 0; i < bitCount; i++) {
// padded is MSB..LSB, bits[] is LSB..MSB
const charFromRight = padded[padded.length - 1 - i]; const charFromRight = padded[padded.length - 1 - i];
bits[i] = charFromRight === "1"; bits[i] = charFromRight === "1";
} }
@@ -304,10 +302,8 @@
const raw = String(vStr ?? "").trim(); const raw = String(vStr ?? "").trim();
if (!raw) return false; if (!raw) return false;
// BigInt parse (supports negatives)
let v; let v;
try { try {
// Allow normal integers only
if (!/^-?\d+$/.test(raw)) return false; if (!/^-?\d+$/.test(raw)) return false;
v = BigInt(raw); v = BigInt(raw);
} catch { } catch {
@@ -315,17 +311,13 @@
} }
if (isTwosMode()) { if (isTwosMode()) {
// Clamp to representable range
const min = twosMin(bitCount); const min = twosMin(bitCount);
const max = twosMax(bitCount); const max = twosMax(bitCount);
if (v < min || v > max) return false; if (v < min || v > max) return false;
signedBigIntToBitsTwos(v); signedBigIntToBitsTwos(v);
} else { } else {
// Unsigned only
if (v < 0n) return false; if (v < 0n) return false;
if (v > unsignedMaxValue(bitCount)) return false; if (v > unsignedMaxValue(bitCount)) return false;
unsignedBigIntToBits(v); unsignedBigIntToBits(v);
} }
@@ -337,19 +329,13 @@
SHIFTS SHIFTS
----------------------------- */ ----------------------------- */
function shiftLeft() { function shiftLeft() {
// logical left shift: bits move to higher index; LSB becomes 0 for (let i = bitCount - 1; i >= 1; i--) bits[i] = bits[i - 1];
for (let i = bitCount - 1; i >= 1; i--) {
bits[i] = bits[i - 1];
}
bits[0] = false; bits[0] = false;
updateUI(); updateUI();
} }
function shiftRight() { function shiftRight() {
// logical right shift: bits move to lower index; MSB becomes 0 for (let i = 0; i < bitCount - 1; i++) bits[i] = bits[i + 1];
for (let i = 0; i < bitCount - 1; i++) {
bits[i] = bits[i + 1];
}
bits[bitCount - 1] = false; bits[bitCount - 1] = false;
updateUI(); updateUI();
} }
@@ -367,7 +353,7 @@
const min = twosMin(bitCount); const min = twosMin(bitCount);
const max = twosMax(bitCount); const max = twosMax(bitCount);
let v = bitsToSignedBigIntTwos() + 1n; let v = bitsToSignedBigIntTwos() + 1n;
if (v > max) v = min; // wrap if (v > max) v = min;
signedBigIntToBitsTwos(v); signedBigIntToBitsTwos(v);
} else { } else {
const span = unsignedMaxExclusive(bitCount); const span = unsignedMaxExclusive(bitCount);
@@ -382,7 +368,7 @@
const min = twosMin(bitCount); const min = twosMin(bitCount);
const max = twosMax(bitCount); const max = twosMax(bitCount);
let v = bitsToSignedBigIntTwos() - 1n; let v = bitsToSignedBigIntTwos() - 1n;
if (v < min) v = max; // wrap if (v < min) v = max;
signedBigIntToBitsTwos(v); signedBigIntToBitsTwos(v);
} else { } else {
const span = unsignedMaxExclusive(bitCount); const span = unsignedMaxExclusive(bitCount);
@@ -393,26 +379,21 @@
} }
/* ----------------------------- /* -----------------------------
RANDOM (FIXED: NO BigInt->Number Math.min) RANDOM (BigInt-safe)
----------------------------- */ ----------------------------- */
function cryptoRandomBigInt(maxExclusive) { function cryptoRandomBigInt(maxExclusive) {
// returns 0 <= x < maxExclusive
if (maxExclusive <= 0n) return 0n; if (maxExclusive <= 0n) return 0n;
const bitLen = maxExclusive.toString(2).length; const bitLen = maxExclusive.toString(2).length;
const byteLen = Math.ceil(bitLen / 8); const byteLen = Math.ceil(bitLen / 8);
// Rejection sampling
while (true) { while (true) {
const bytes = new Uint8Array(byteLen); const bytes = new Uint8Array(byteLen);
crypto.getRandomValues(bytes); crypto.getRandomValues(bytes);
let x = 0n; let x = 0n;
for (const b of bytes) { for (const b of bytes) x = (x << 8n) | BigInt(b);
x = (x << 8n) | BigInt(b);
}
// mask down to bitLen to reduce rejections slightly
const extraBits = BigInt(byteLen * 8 - bitLen); const extraBits = BigInt(byteLen * 8 - bitLen);
if (extraBits > 0n) x = x >> extraBits; if (extraBits > 0n) x = x >> extraBits;
@@ -421,27 +402,20 @@
} }
function setRandomOnce() { function setRandomOnce() {
if (isTwosMode()) {
const span = unsignedMaxExclusive(bitCount); // 2^n
const u = cryptoRandomBigInt(span); // 0..2^n-1
unsignedBigIntToBits(u);
} else {
const span = unsignedMaxExclusive(bitCount); const span = unsignedMaxExclusive(bitCount);
const u = cryptoRandomBigInt(span); const u = cryptoRandomBigInt(span);
unsignedBigIntToBits(u); unsignedBigIntToBits(u);
}
updateUI(); updateUI();
} }
function runRandomBriefly() { function runRandomBriefly() {
// stop any existing run
if (randomTimer) { if (randomTimer) {
clearInterval(randomTimer); clearInterval(randomTimer);
randomTimer = null; randomTimer = null;
} }
const start = Date.now(); const start = Date.now();
const durationMs = 900; // brief run then stop const durationMs = 900;
const tickMs = 80; const tickMs = 80;
randomTimer = setInterval(() => { randomTimer = setInterval(() => {
@@ -454,19 +428,25 @@
} }
/* ----------------------------- /* -----------------------------
BIT WIDTH CONTROLS BIT WIDTH
----------------------------- */ ----------------------------- */
function setBitWidth(n) { function setBitWidth(n) {
const v = clampInt(n, 1, 64); const v = clampInt(n, 1, 64);
buildBits(v); buildBits(v);
} }
/* -----------------------------
TOOLBOX TOGGLE
----------------------------- */
function setToolboxCollapsed(collapsed) {
document.body.classList.toggle("toolbox-collapsed", collapsed);
toolboxToggle?.setAttribute("aria-expanded", String(!collapsed));
}
/* ----------------------------- /* -----------------------------
EVENTS EVENTS
----------------------------- */ ----------------------------- */
modeToggle?.addEventListener("change", () => { modeToggle?.addEventListener("change", () => updateUI());
updateUI();
});
btnCustomBinary?.addEventListener("click", () => { btnCustomBinary?.addEventListener("click", () => {
const v = prompt(`Enter binary (spaces allowed). Current width: ${bitCount} bits`); const v = prompt(`Enter binary (spaces allowed). Current width: ${bitCount} bits`);
@@ -496,13 +476,25 @@
btnBitsUp?.addEventListener("click", () => setBitWidth(bitCount + 1)); btnBitsUp?.addEventListener("click", () => setBitWidth(bitCount + 1));
btnBitsDown?.addEventListener("click", () => setBitWidth(bitCount - 1)); btnBitsDown?.addEventListener("click", () => setBitWidth(bitCount - 1));
bitsInput?.addEventListener("change", () => { bitsInput?.addEventListener("change", () => setBitWidth(Number(bitsInput.value)));
setBitWidth(Number(bitsInput.value));
toolboxToggle?.addEventListener("click", () => {
const collapsed = document.body.classList.contains("toolbox-collapsed");
setToolboxCollapsed(!collapsed);
// ensure binary re-wraps after layout change
requestAnimationFrame(() => updateReadout());
});
// Recompute nibble wrapping on resize
window.addEventListener("resize", () => {
// throttled via rAF to avoid spam
requestAnimationFrame(() => updateReadout());
}); });
/* ----------------------------- /* -----------------------------
INIT INIT
----------------------------- */ ----------------------------- */
updateModeHint(); updateModeHint();
setToolboxCollapsed(false);
buildBits(bitCount); buildBits(bitCount);
})(); })();

390
src/styles/binary.css
View File

@@ -7,13 +7,14 @@
--accent-dim:rgba(51,255,122,.15); --accent-dim:rgba(51,255,122,.15);
--line:rgba(255,255,255,.12); --line:rgba(255,255,255,.12);
--danger: #e24444; /* Toolbox sizing */
--danger-dim: rgba(226,68,68,.22); --toolboxW: 320px; /* default width */
--success: #2fd66b; --toolboxGap: 20px; /* gap from right edge */
--success-dim: rgba(47,214,107,.22); --toolboxTop: 92px; /* below header area */
} }
/* -------- Fonts -------- */ /* ---------- Fonts ---------- */
/* Numbers */
@font-face{ @font-face{
font-family:"DSEG7ClassicRegular"; font-family:"DSEG7ClassicRegular";
src: src:
@@ -24,6 +25,7 @@
font-display:swap; font-display:swap;
} }
/* Text */
@font-face{ @font-face{
font-family:"SevenSegment"; font-family:"SevenSegment";
src: src:
@@ -34,22 +36,38 @@
font-display:swap; font-display:swap;
} }
*{ box-sizing:border-box; }
body{ body{
margin:0; margin:0;
font-family: "SevenSegment", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background:var(--bg); background:var(--bg);
color:var(--text); color:var(--text);
font-family:"SevenSegment", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
} }
/* When toolbox is collapsed, we remove the reserved padding */
body.toolbox-collapsed{
--toolboxW: 0px;
}
/* ---------- Main layout ---------- */
.wrap{ .wrap{
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 32px 20px 60px; padding: 32px 20px 60px;
/* reserve room for the fixed toolbox so it NEVER overlaps */
padding-right: calc(20px + var(--toolboxW) + var(--toolboxGap));
transition: padding-right .2s ease;
}
body.toolbox-collapsed .wrap{
padding-right: 20px;
} }
.topGrid{ .topGrid{
display:grid; display:grid;
grid-template-columns: 1fr 340px; grid-template-columns: 1fr;
gap:28px; gap:28px;
align-items:start; align-items:start;
} }
@@ -68,28 +86,38 @@ body{
margin-top:10px; margin-top:10px;
} }
/* Anything that is a number uses DSEG7 */ /* All numbers */
.num{ .num,
.bitVal,
.bitInput{
font-family:"DSEG7ClassicRegular", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-family:"DSEG7ClassicRegular", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-weight:400; font-weight:400;
}
/* Denary/Binary display (25% smaller than before) */
.num{
color:var(--accent); color:var(--accent);
text-shadow:0 0 18px var(--accent-dim); text-shadow:0 0 18px var(--accent-dim);
letter-spacing: 0.03em; /* + a pixel-ish feel */
} }
.denaryValue{ .denaryValue{
font-size: 70px; font-size: 52px; /* was ~70 */
line-height:1.0; line-height:1.0;
margin:6px 0 10px; margin:6px 0 10px;
} }
.binaryValue{ .binaryValue{
font-size: 52px; font-size: 39px; /* was ~52 */
letter-spacing: .12em; line-height:1.05;
line-height: 1.0;
margin:6px 0 14px; margin:6px 0 14px;
white-space: pre; white-space: pre-wrap;
word-break: normal;
overflow-wrap: normal;
letter-spacing: 0.06em; /* widen characters slightly */
} }
/* Buttons */
.controlsStack{ .controlsStack{
margin-top:10px; margin-top:10px;
display:flex; display:flex;
@@ -115,6 +143,7 @@ body{
cursor:pointer; cursor:pointer;
min-width:170px; min-width:170px;
font-family:"SevenSegment", system-ui, sans-serif; font-family:"SevenSegment", system-ui, sans-serif;
letter-spacing: .06em;
} }
.btn:active{ transform: translateY(1px); } .btn:active{ transform: translateY(1px); }
@@ -128,50 +157,56 @@ body{
border-top:1px solid var(--line); border-top:1px solid var(--line);
} }
.panelCol{ /* ---------- Bits grid ---------- */
.bitsWrap{ margin-top:22px; }
/* auto-fit prevents overlap at large values without shrinking the digits */
.bitsGrid{
display:grid;
gap:18px;
justify-content:center;
padding-top:18px;
/* each tile has a safe min width so large labels don't collide */
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
max-width: 100%;
}
.bit{
display:flex; display:flex;
flex-direction:column; flex-direction:column;
gap: 14px;
}
.card{
background: var(--panel2);
border: 1px solid rgba(255,255,255,.10);
border-radius: 14px;
padding: 14px;
}
.cardTitle{
letter-spacing: .18em;
font-weight: 800;
color: var(--muted);
text-transform: uppercase;
font-size: 12px;
margin: 0 0 10px;
}
.hint{
color: var(--muted);
font-size: 12px;
margin-top: 8px;
line-height: 1.35;
}
.toggleRow{
display:flex;
align-items:center; align-items:center;
justify-content:space-between;
gap:10px; gap:10px;
padding:8px 4px;
text-align:center;
min-width:120px;
} }
.toggleLabel{ .bulb{
/* NO circle/ring. Just the emoji. 25% bigger than prior ~26px -> ~33px */
font-size: 33px;
line-height:1;
background:transparent;
border:none;
width:auto;
height:auto;
opacity:.45;
filter: grayscale(1);
text-shadow:none;
user-select:none;
}
.bitVal{
font-size:28px;
color:var(--text); color:var(--text);
font-weight: 700; opacity:.95;
font-size: 14px; line-height:1;
font-family: "SevenSegment", system-ui, sans-serif; min-height:32px;
white-space: nowrap; /* stop wrapping into each other */
letter-spacing: 0.02em;
} }
/* Switch */ /* Shared toggle switch (bit switches + mode) */
.switch{ .switch{
position:relative; position:relative;
width:56px; width:56px;
@@ -212,19 +247,113 @@ body{
background:var(--accent); background:var(--accent);
} }
/* Tools layout */ /* ---------- Toolbox (fixed, non-overlapping) ---------- */
.toolRow{ .toolboxToggle{
position: fixed;
top: 18px;
right: var(--toolboxGap);
z-index: 40;
display:flex;
align-items:center;
gap:10px;
background: rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.14);
color:#fff;
border-radius: 12px;
padding: 10px 12px;
cursor:pointer;
font-family:"SevenSegment", system-ui, sans-serif;
letter-spacing:.06em;
}
.toolboxIcon{ font-size: 16px; line-height:1; }
.toolboxText{ font-weight:800; font-size: 14px; }
.toolboxFixed{
position: fixed;
top: var(--toolboxTop);
right: var(--toolboxGap);
width: var(--toolboxW);
z-index: 35;
transition: transform .2s ease, opacity .2s ease;
}
body.toolbox-collapsed .toolboxFixed{
transform: translateX(calc(100% + var(--toolboxGap)));
opacity: 0;
pointer-events: none;
}
/* cards inside toolbox */
.panelCol{
display:flex;
flex-direction:column;
gap:14px;
}
.card{
background: var(--panel2);
border:1px solid rgba(255,255,255,.10);
border-radius:14px;
padding:14px;
backdrop-filter: blur(6px);
}
.cardTitle{
letter-spacing:.18em;
font-weight:800;
color:var(--muted);
text-transform:uppercase;
font-size:12px;
margin:0 0 10px;
}
.hint{
color:var(--muted);
font-size:12px;
margin-top:8px;
line-height:1.35;
}
.toggleRow{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.toggleLabel{
color:var(--text);
font-weight:700;
font-size:14px;
}
/* ---------- Tools merged layout ---------- */
.toolsTopRow{
display:grid; display:grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap:10px; gap:10px;
align-items:center;
margin-bottom: 10px; margin-bottom: 10px;
} }
.toolRow2{
.spinGroup{
display:grid; display:grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap:10px; gap:10px;
} }
.toolsBottomRow{
display:grid;
grid-template-columns: 1.25fr 0.75fr; /* bit width gets more space than random */
gap:10px;
align-items:end;
}
.toolBtn{ .toolBtn{
height:48px; height:48px;
border-radius:12px; border-radius:12px;
@@ -234,34 +363,57 @@ body{
cursor:pointer; cursor:pointer;
font-weight:800; font-weight:800;
font-family:"SevenSegment", system-ui, sans-serif; font-family:"SevenSegment", system-ui, sans-serif;
letter-spacing:.06em;
} }
/* Narrower arrow buttons (only the arrow pair) */
.toolSpin{ .toolSpin{
font-size:22px; font-size:22px;
height: 48px; width: 100%; /* kept narrow via grid allocation */
max-width: 120px; /* narrower */
justify-self: start;
padding: 0;
} }
/* Down = red, Up = green */ .toolDown{
#btnDec{ background: rgba(255, 70, 70, .20);
background: var(--danger-dim); border-color: rgba(255, 70, 70, .45);
border-color: rgba(226,68,68,.45);
}
#btnInc{
background: var(--success-dim);
border-color: rgba(47,214,107,.45);
} }
/* Bit width control */ .toolUp{
.bitWidthRow{ background: rgba(51,255,122,.20);
border-color: rgba(51,255,122,.55);
}
.toolReset{
width: 100%;
}
.toolRandom{
width: 100%;
/* make random ~5% narrower by padding reduction (without breaking grid) */
padding-left: 10px;
padding-right: 10px;
}
/* bit width mini block */
.bitWidthMini{
display:flex;
flex-direction:column;
gap:6px;
}
.bitWidthMiniLabel{
color:var(--muted);
font-size:12px;
font-weight:800;
letter-spacing:.18em;
text-transform:uppercase;
}
.bitWidthMiniRow{
display:grid; display:grid;
grid-template-columns: 44px 1fr 44px; grid-template-columns: 44px 1fr 44px;
gap:10px; gap:10px;
align-items:center; align-items:center;
} }
.miniBtn{ .miniBtn{
height:44px; height:44px;
width:44px; width:44px;
@@ -275,112 +427,36 @@ body{
font-family:"SevenSegment", system-ui, sans-serif; font-family:"SevenSegment", system-ui, sans-serif;
} }
.bitInputWrap{ .bitInput{
width: 100%;
min-width: 64px; /* MUST fit 2 digits comfortably */
text-align:center;
background:rgba(255,255,255,.06); background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14);
border-radius:12px; border-radius:12px;
padding:10px 12px; padding:10px 8px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.bitInputLabel{
color:var(--muted);
font-size:12px;
font-weight:800;
letter-spacing:.18em;
text-transform:uppercase;
font-family: "SevenSegment", system-ui, sans-serif;
}
.bitInput{
width:86px;
text-align:right;
background:transparent;
border:none;
outline:none; outline:none;
color:var(--accent); color:var(--accent);
font-family:"DSEG7ClassicRegular", ui-monospace, monospace;
font-size:28px; font-size:28px;
} }
.bitInput::-webkit-outer-spin-button, .bitInput::-webkit-outer-spin-button,
.bitInput::-webkit-inner-spin-button{ .bitInput::-webkit-inner-spin-button{
-webkit-appearance:none; -webkit-appearance:none;
margin:0; margin:0;
} }
/* Bits: wrap every 8, centred */ /* ---------- Responsive ---------- */
.bitsWrap{
margin-top: 22px;
}
.bitsGrid{
display:grid;
gap: 18px;
justify-content:center;
grid-template-columns: repeat(8, minmax(90px, 1fr));
padding-top: 18px;
}
.bitsGrid.bitsFew{
grid-template-columns: repeat(var(--cols, 4), minmax(90px, 1fr));
}
.bit{
display:flex;
flex-direction:column;
align-items:center;
gap: 10px;
padding: 8px 4px;
text-align:center;
}
/* Bulb (emoji only — no circle, no ::before so it won't duplicate) */
.bulb{
width: auto;
height: auto;
border: none;
background: transparent;
border-radius: 0;
box-shadow: none;
display:flex;
align-items:center;
justify-content:center;
font-size: 26px;
line-height: 1;
opacity: .45;
filter: grayscale(1);
text-shadow: none;
}
/* IMPORTANT: remove the pseudo-element that was causing the 2nd bulb */
.bulb::before{
content: none;
}
.bulb.on{
opacity: 1;
filter: grayscale(0);
text-shadow: 0 0 14px rgba(255,216,107,.75), 0 0 26px rgba(255,216,107,.45);
}
/* Bit value numbers use DSEG7 */
.bitVal{
font-family:"DSEG7ClassicRegular", ui-monospace, monospace;
font-size: 28px;
color: var(--text);
opacity: .95;
line-height: 1;
min-height: 32px;
}
@media (max-width: 980px){ @media (max-width: 980px){
.topGrid{ grid-template-columns: 1fr; } .wrap{
.denaryValue{ font-size: 62px; } /* On small screens, don’t reserve fixed sidebar space; toolbox floats */
.binaryValue{ font-size: 46px; } padding-right: 20px;
}
.toolboxFixed{
width: min(320px, calc(100vw - 40px));
}
} }
@media (max-width: 520px){ @media (max-width: 520px){
.btn{ min-width:150px; } .btn{ min-width:150px; }
.bitsGrid{ grid-template-columns: repeat(4, minmax(90px, 1fr)); }
} }