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

Binary Page Beta 1

Browse Source 
Signed-off-by: Alexander Lyall <alex@adcm.uk>
This commit is contained in:
Alexander Lyall
2025-12-16 17:18:03 +00:00
parent 91a07e49ae
commit f68aea4e33
3 changed files with 493 additions and 467 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
src/pages/binary.astro
View File

@@ -1,31 +1,92 @@
--- ---
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>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Binary | Computing:Box</title> <title>Binary | Computing:Box</title>
</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 -->
<aside id="toolboxPanel" class="toolboxFixed" aria-label="Toolbox">
<div class="panelCol">
<div class="card">
<div class="cardTitle">Mode</div>
<div class="toggleRow">
<div class="toggleLabel" id="lblUnsigned">Unsigned</div>
<label class="switch" aria-label="Toggle mode">
<input id="modeToggle" type="checkbox" />
<span class="slider"></span>
</label>
<div class="toggleLabel" id="lblTwos">Two&rsquo;s complement</div>
</div>
<div class="hint" id="modeHint">
Tip: In unsigned binary, all bits represent positive values.
</div>
</div>
<!-- MERGED: Tools + Bit width -->
<div class="card">
<div class="cardTitle">Tools</div>
<!-- Row 1: ▼ ▲ (left) + Reset (right) -->
<div class="toolsTopRow">
<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>
<button class="toolBtn toolReset" id="btnClear" type="button">Reset</button>
</div>
<!-- Row 2: Bit Width (left) + Random (right) -->
<div class="toolsBottomRow">
<div class="bitWidthMini" aria-label="Bit width">
<div class="bitWidthMiniLabel">Bit width</div>
<div class="bitWidthMiniRow">
<button class="miniBtn" id="btnBitsDown" type="button" aria-label="Decrease bits">−</button>
<input
id="bitsInput"
class="bitInput"
type="number"
inputmode="numeric"
min="1"
max="64"
step="1"
value="8"
aria-label="Number of bits"
/>
<button class="miniBtn" id="btnBitsUp" type="button" aria-label="Increase bits">+</button>
</div>
</div>
<button class="toolBtn toolRandom" id="btnRandom" type="button">Random</button>
</div>
<div class="hint">Random runs briefly then stops automatically.</div>
</div>
</div>
</aside>
<!-- Main content (reserves space for toolbox when open) -->
<main id="mainWrap" class="wrap">
<section class="topGrid"> <section class="topGrid">
<!-- LEFT --> <!-- LEFT -->
<div> <div>
@@ -34,16 +95,14 @@ import binaryScriptUrl from "../scripts/binary.js?url";
<div id="denaryNumber" class="num denaryValue">0</div> <div id="denaryNumber" class="num denaryValue">0</div>
<div class="label">Binary</div> <div class="label">Binary</div>
<div id="binaryNumber" class="num binaryValue">0</div> <div id="binaryNumber" class="num binaryValue">0000 0000</div>
<!-- Custom buttons on one line -->
<div class="controlsStack"> <div class="controlsStack">
<div class="controlsRow"> <div class="controlsRow">
<button class="btn btnAccent" id="btnCustomBinary" type="button">Custom Binary</button> <button class="btn btnAccent" id="btnCustomBinary" type="button">Custom Binary</button>
<button class="btn btnAccent" id="btnCustomDenary" type="button">Custom Denary</button> <button class="btn btnAccent" id="btnCustomDenary" type="button">Custom Denary</button>
</div> </div>
<!-- Shift buttons on another line -->
<div class="controlsRow"> <div class="controlsRow">
<button class="btn" id="btnShiftLeft" type="button">Left Shift</button> <button class="btn" id="btnShiftLeft" type="button">Left Shift</button>
<button class="btn" id="btnShiftRight" type="button">Right Shift</button> <button class="btn" id="btnShiftRight" type="button">Right Shift</button>
@@ -57,64 +116,10 @@ import binaryScriptUrl from "../scripts/binary.js?url";
<div class="bitsGrid" id="bitsGrid"></div> <div class="bitsGrid" id="bitsGrid"></div>
</section> </section>
</div> </div>
<!-- RIGHT -->
<aside class="panelCol" id="sidePanel">
<button class="panelToggle" id="btnPanelToggle" type="button" aria-label="Toggle side panel">❯</button>
<div class="card">
<div class="cardTitle">Mode</div>
<div class="toggleRow">
<div class="toggleLabel" id="lblUnsigned">Unsigned</div>
<label class="switch" aria-label="Toggle mode">
<input id="modeToggle" type="checkbox" />
<span class="slider"></span>
</label>
<div class="toggleLabel" id="lblTwos">Two&rsquo;s complement</div>
</div>
<div class="hint" id="modeHint">Tip: In unsigned binary, all bits represent positive values.</div>
</div>
<!-- Tools + Bit Width on the same row -->
<div class="sideRow">
<div class="card">
<div class="cardTitle">Tools</div>
<div class="toolRow">
<button class="toolBtn toolQuarter toolDown" id="btnDec" type="button" aria-label="Decrement">▼</button>
<button class="toolBtn toolQuarter toolUp" id="btnInc" type="button" aria-label="Increment">▲</button>
</div>
<div class="toolRow2" style="margin-top:10px;">
<button class="toolBtn toolHalf" id="btnClear" type="button">Reset</button>
<button class="toolBtn toolHalf" id="btnRandom" type="button">Random</button>
</div>
<div class="hint">Random runs briefly then stops automatically.</div>
</div>
<div class="card">
<div class="cardTitle">Bit width</div>
<div class="bitWidthRow">
<button class="miniBtn" id="btnBitsDown" type="button" aria-label="Decrease bits">−</button>
<div class="bitInputWrap">
<div class="bitInputLabel">Bits</div>
<input id="bitsInput" class="bitInput" type="number" inputmode="numeric"
min="1" max="64" step="1" value="8" aria-label="Number of bits" />
</div>
<button class="miniBtn" id="btnBitsUp" type="button" aria-label="Increase bits">+</button>
</div>
<div class="hint">Minimum 1 bit, maximum 64 bits.</div>
</div>
</div>
</aside>
</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>

220
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,30 +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", () => updateUI());
// Collapsible right panel
const sidePanel = document.getElementById("sidePanel");
const btnPanelToggle = document.getElementById("btnPanelToggle");
btnPanelToggle?.addEventListener("click", () => {
sidePanel?.classList.toggle("isCollapsed");
// flip the chevron
btnPanelToggle.textContent = sidePanel?.classList.contains("isCollapsed") ? "❮" : "❯";
});
modeToggle?.addEventListener("change", () => {
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`);
@@ -507,14 +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);
})(); })();

581
src/styles/binary.css
View File

@@ -1,219 +1,218 @@
:root{ :root{
--bg: #1f2027; --bg:#1f2027;
--panel2: rgba(255,255,255,.04); --panel2:rgba(255,255,255,.04);
--text: #e8e8ee; --text:#e8e8ee;
--muted: #a9acb8; --muted:#a9acb8;
--accent: #33ff7a; --accent:#33ff7a;
--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);
/* right column sizing */ /* Toolbox sizing */
--sideW: 720px; --toolboxW: 320px; /* default width */
--sidePad: 24px; --toolboxGap: 20px; /* gap from right edge */
--toolboxTop: 92px; /* below header area */
/* header offset (tweak if your header is taller/shorter) */
--sideTop: 92px;
} }
/* ---------- Fonts ---------- */
/* Numbers */
@font-face{ @font-face{
font-family: "DSEG7ClassicRegular"; font-family:"DSEG7ClassicRegular";
src: src:
url("/fonts/DSEG7Classic-Regular.woff") format("woff"), url("/fonts/DSEG7Classic-Regular.woff") format("woff"),
url("/fonts/DSEG7Classic-Regular.ttf") format("truetype"); url("/fonts/DSEG7Classic-Regular.ttf") format("truetype");
font-weight: 400; font-weight:400;
font-style: normal; font-style:normal;
font-display: swap; font-display:swap;
} }
/* Text */
@font-face{ @font-face{
font-family: "SevenSegment"; font-family:"SevenSegment";
src: src:
url("/fonts/Seven-Segment.woff2") format("woff2"), url("/fonts/Seven-Segment.woff2") format("woff2"),
url("/fonts/Seven-Segment.woff") format("woff"); url("/fonts/Seven-Segment.woff") format("woff");
font-weight: 400; font-weight:400;
font-style: normal; font-style:normal;
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;
} }
/* Leave enough room for the fixed right panel */ /* 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;
padding-right: calc(var(--sideW) + (var(--sidePad) * 2));
/* 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; grid-template-columns: 1fr;
gap: 28px; gap:28px;
align-items:start; align-items:start;
} }
.readout{ .readout{
text-align:center; text-align:center;
padding: 10px 10px 0; padding:10px 10px 0;
} }
.label{ .label{
letter-spacing: .18em; letter-spacing:.18em;
font-weight: 700; font-weight:700;
color: var(--muted); color:var(--muted);
text-transform: uppercase; text-transform:uppercase;
font-size: 14px; font-size:14px;
margin-top: 10px; margin-top:10px;
} }
/* All numbers */
.num,
.bitVal,
.bitInput{
font-family:"DSEG7ClassicRegular", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-weight:400;
}
/* Denary/Binary display (25% smaller than before) */
.num{ .num{
font-family: "DSEG7ClassicRegular", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color:var(--accent);
font-weight: 400; text-shadow:0 0 18px var(--accent-dim);
color: var(--accent); letter-spacing: 0.03em; /* + a pixel-ish feel */
text-shadow: 0 0 18px var(--accent-dim);
} }
/* 25% smaller */
.denaryValue{ .denaryValue{
font-size: 53px; font-size: 52px; /* was ~70 */
line-height: 1.0; line-height:1.0;
margin: 6px 0 10px; margin:6px 0 10px;
} }
/* 25% smaller + slightly wider spacing */
.binaryValue{ .binaryValue{
font-size: 39px; font-size: 39px; /* was ~52 */
letter-spacing: calc(.12em + 2px); line-height:1.05;
line-height: 1.0; margin:6px 0 14px;
margin: 6px 0 14px; white-space: pre-wrap;
white-space: pre; /* preserve spaces */ 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;
flex-direction:column; flex-direction:column;
gap: 10px; gap:10px;
align-items:center; align-items:center;
} }
.controlsRow{ .controlsRow{
display:flex; display:flex;
gap: 12px; gap:12px;
justify-content:center; justify-content:center;
flex-wrap:wrap; flex-wrap:wrap;
} }
.btn{ .btn{
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);
color: #fff; color:#fff;
padding: 12px 14px; padding:12px 14px;
border-radius: 12px; border-radius:12px;
font-weight: 700; font-weight:700;
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); }
.btnAccent{ .btnAccent{
background: rgba(51,255,122,.18); background:rgba(51,255,122,.18);
border-color: rgba(51,255,122,.45); border-color:rgba(51,255,122,.45);
} }
.divider{ .divider{
margin-top: 26px; margin-top:26px;
border-top: 1px solid var(--line); border-top:1px solid var(--line);
} }
/* ------------------------- /* ---------- Bits grid ---------- */
RIGHT COLUMN: pinned + collapsible .bitsWrap{ margin-top:22px; }
------------------------- */
.panelCol{ /* auto-fit prevents overlap at large values without shrinking the digits */
position: fixed; .bitsGrid{
right: var(--sidePad); display:grid;
top: var(--sideTop); gap:18px;
width: var(--sideW); 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;
z-index: 50;
transition: transform .2s ease;
}
/* collapse leaves a small handle visible */
.panelCol.isCollapsed{
transform: translateX(calc(100% - 52px));
}
.panelToggle{
position: absolute;
left: -52px;
top: 0;
width: 44px;
height: 44px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
color: #fff;
cursor: pointer;
font-weight: 900;
display:flex;
align-items:center; align-items:center;
justify-content:center; gap:10px;
font-family: "SevenSegment", system-ui, sans-serif; padding:8px 4px;
text-align:center;
min-width:120px;
} }
/* cards */ .bulb{
.card{ /* NO circle/ring. Just the emoji. 25% bigger than prior ~26px -> ~33px */
background: var(--panel2); font-size: 33px;
border: 1px solid rgba(255,255,255,.10); line-height:1;
border-radius: 14px; background:transparent;
padding: 14px; border:none;
width:auto;
height:auto;
opacity:.45;
filter: grayscale(1);
text-shadow:none;
user-select:none;
} }
.cardTitle{ .bitVal{
letter-spacing: .18em; font-size:28px;
font-weight: 800; color:var(--text);
color: var(--muted); opacity:.95;
text-transform: uppercase; line-height:1;
font-size: 12px; min-height:32px;
margin: 0 0 10px; white-space: nowrap; /* stop wrapping into each other */
letter-spacing: 0.02em;
} }
.hint{ /* Shared toggle switch (bit switches + mode) */
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;
}
/* Shared toggle switch */
.switch{ .switch{
position: relative; position:relative;
width: 56px; width:56px;
height: 34px; height:34px;
display:inline-block; display:inline-block;
flex: 0 0 auto; flex:0 0 auto;
} }
.switch input{ .switch input{
opacity:0; opacity:0;
@@ -223,88 +222,198 @@ body{
.slider{ .slider{
position:absolute; position:absolute;
inset:0; inset:0;
background: rgba(255,255,255,.10); background:rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14);
border-radius: 999px; border-radius:999px;
transition: .18s ease; transition:.18s ease;
} }
.slider::before{ .slider::before{
content:""; content:"";
position:absolute; position:absolute;
height: 28px; height:28px;
width: 28px; width:28px;
left: 3px; left:3px;
top: 2px; top:2px;
background: rgba(255,255,255,.92); background:rgba(255,255,255,.92);
border-radius: 50%; border-radius:50%;
transition: .18s ease; transition:.18s ease;
} }
.switch input:checked + .slider{ .switch input:checked + .slider{
background: rgba(51,255,122,.20); background:rgba(51,255,122,.20);
border-color: rgba(51,255,122,.55); border-color:rgba(51,255,122,.55);
} }
.switch input:checked + .slider::before{ .switch input:checked + .slider::before{
transform: translateX(22px); transform: translateX(22px);
background: var(--accent); background:var(--accent);
} }
/* Tools + Bit Width side-by-side */ /* ---------- Toolbox (fixed, non-overlapping) ---------- */
.sideRow{ .toolboxToggle{
display:flex; position: fixed;
gap: 14px; top: 18px;
} right: var(--toolboxGap);
.sideRow .card{ z-index: 40;
flex: 1 1 0;
}
/* Tools layout: arrows row + reset/random row */
.toolRow, .toolRow2{
display:flex; display:flex;
gap: 10px;
align-items:center; align-items:center;
} gap:10px;
/* Reset/Random = 50% current width (explicit) */
.toolBtn{
height: 48px;
border-radius: 12px;
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);
color: #fff; color:#fff;
cursor: pointer; border-radius: 12px;
font-weight: 800; padding: 10px 12px;
font-family: "SevenSegment", system-ui, sans-serif; cursor:pointer;
font-family:"SevenSegment", system-ui, sans-serif;
letter-spacing:.06em;
} }
/* Reset/Random smaller */ .toolboxIcon{ font-size: 16px; line-height:1; }
.toolBtn.toolHalf{ .toolboxText{ font-weight:800; font-size: 14px; }
width: 120px;
.toolboxFixed{
position: fixed;
top: var(--toolboxTop);
right: var(--toolboxGap);
width: var(--toolboxW);
z-index: 35;
transition: transform .2s ease, opacity .2s ease;
} }
/* Arrows half of that */ body.toolbox-collapsed .toolboxFixed{
.toolBtn.toolQuarter{ transform: translateX(calc(100% + var(--toolboxGap)));
width: 60px; opacity: 0;
font-size: 22px; pointer-events: none;
padding: 0;
} }
/* colour arrows */ /* cards inside toolbox */
.toolBtn.toolUp{ .panelCol{
background: rgba(51,255,122,.18); display:flex;
border-color: rgba(51,255,122,.45); flex-direction:column;
} gap:14px;
.toolBtn.toolDown{
background: rgba(255,80,80,.18);
border-color: rgba(255,80,80,.45);
} }
/* Bit width control */ .card{
.bitWidthRow{ 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;
grid-template-columns: 1fr 1fr;
gap:10px;
align-items:center;
margin-bottom: 10px;
}
.spinGroup{
display:grid;
grid-template-columns: 1fr 1fr;
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{
height:48px;
border-radius:12px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.14);
color:#fff;
cursor:pointer;
font-weight:800;
font-family:"SevenSegment", system-ui, sans-serif;
letter-spacing:.06em;
}
.toolSpin{
font-size:22px;
width: 100%; /* kept narrow via grid allocation */
}
.toolDown{
background: rgba(255, 70, 70, .20);
border-color: rgba(255, 70, 70, .45);
}
.toolUp{
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;
@@ -315,107 +424,39 @@ body{
cursor:pointer; cursor:pointer;
font-weight:900; font-weight:900;
font-size:18px; font-size:18px;
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;
}
.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: no circle here (JS controls the emoji), but keep sizing if used */
.bulb{
border: none;
background: transparent;
width: auto;
height: auto;
border-radius: 0;
box-shadow: none;
display:flex;
align-items:center;
justify-content:center;
line-height: 1;
opacity: .55;
font-size: 33px; /* 25% larger from 26px */
}
.bitVal{
font-family:"DSEG7ClassicRegular", ui-monospace, monospace;
font-size: 28px;
color: var(--text);
opacity: .95;
line-height: 1;
min-height: 32px;
}
/* responsive: stop pinning on small screens */
@media (max-width: 980px){ @media (max-width: 980px){
.panelCol{
position: static;
width: auto;
transform: none !important;
}
.panelToggle{ display:none; }
.wrap{ .wrap{
/* On small screens, don’t reserve fixed sidebar space; toolbox floats */
padding-right: 20px; 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)); }
.toolBtn.toolHalf{ width: 100px; }
.toolBtn.toolQuarter{ width: 52px; }
} }