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

Signed-off-by: Alexander Lyall <alex@adcm.uk>

Browse Source
This commit is contained in:
Alexander Lyall
2025-12-16 18:53:23 +00:00
parent f68aea4e33
commit 7fa90ab165
3 changed files with 424 additions and 454 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/pages/binary.astro
View File

@@ -10,19 +10,48 @@ import "../styles/binary.css";
<title>Binary | Computing:Box</title> <title>Binary | Computing:Box</title>
</head> </head>
<body> <body class="toolbox-open">
<!-- Fixed/pinned toolbox toggle --> <main class="wrap">
<button id="toolboxToggle" class="toolboxToggle" type="button" aria-expanded="true" aria-controls="toolboxPanel"> <section class="topGrid">
<span class="toolboxIcon" aria-hidden="true">🧰</span> <!-- LEFT: readout + buttons -->
<span class="toolboxText">Toolbox</span> <div class="leftCol">
<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 controlsRowCustom">
<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 controlsRowShift">
<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>
<!-- Bits render here -->
<section class="bitsWrap" aria-label="Bit switches">
<div class="bitsGrid" id="bitsGrid"></div>
</section>
</div>
<!-- RIGHT: fixed toolbox -->
<aside class="toolboxDock" aria-label="Toolbox">
<button id="toolboxToggle" class="toolboxToggle" type="button" aria-expanded="true">
🧰 <span class="toolboxToggleText">Toolbox</span>
</button> </button>
<!-- Fixed/pinned toolbox panel --> <div class="toolboxPanel" id="toolboxPanel">
<aside id="toolboxPanel" class="toolboxFixed" aria-label="Toolbox">
<div class="panelCol">
<div class="card"> <div class="card">
<div class="cardTitle">Mode</div> <div class="cardTitle">Mode</div>
<div class="toggleRow"> <div class="toggleRow">
<div class="toggleLabel" id="lblUnsigned">Unsigned</div> <div class="toggleLabel" id="lblUnsigned">Unsigned</div>
@@ -31,7 +60,7 @@ import "../styles/binary.css";
<span class="slider"></span> <span class="slider"></span>
</label> </label>
<div class="toggleLabel" id="lblTwos">Two&rsquo;s complement</div> <div class="toggleLabel" id="lblTwos">Two’s complement</div>
</div> </div>
<div class="hint" id="modeHint"> <div class="hint" id="modeHint">
@@ -39,28 +68,29 @@ import "../styles/binary.css";
</div> </div>
</div> </div>
<!-- MERGED: Tools + Bit width --> <!-- merged Tools + Bit Width -->
<div class="card"> <div class="card">
<div class="cardTitle">Tools</div> <div class="cardTitle">Tools</div>
<!-- Row 1: ▼ ▲ (left) + Reset (right) --> <!-- row 1: dec/inc centred + reset at right -->
<div class="toolsTopRow"> <div class="toolsRowTop">
<div class="spinGroup" aria-label="Increment and decrement"> <div class="toolsArrowsCentered">
<button class="toolBtn toolSpin toolDown" id="btnDec" type="button" aria-label="Decrement">▼</button> <button class="toolBtn toolBtnDec" id="btnDec" type="button" aria-label="Decrement">▼</button>
<button class="toolBtn toolSpin toolUp" id="btnInc" type="button" aria-label="Increment">▲</button> <button class="toolBtn toolBtnInc" id="btnInc" type="button" aria-label="Increment">▲</button>
</div> </div>
<button class="toolBtn toolReset" id="btnClear" type="button">Reset</button> <button class="toolBtn toolBtnWide" id="btnClear" type="button">Reset</button>
</div> </div>
<!-- Row 2: Bit Width (left) + Random (right) --> <!-- bit width (full width sub-card) -->
<div class="toolsBottomRow"> <div class="bitWidthSubCard">
<div class="bitWidthMini" aria-label="Bit width"> <div class="bitWidthTitle">Bit width</div>
<div class="bitWidthMiniLabel">Bit width</div>
<div class="bitWidthMiniRow"> <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"
@@ -72,54 +102,24 @@ import "../styles/binary.css";
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>
<button class="toolBtn toolRandom" id="btnRandom" type="button">Random</button> <!-- row 3: reset + random same row, below arrows -->
<div class="toolsRowBottom">
<button class="toolBtn toolBtnWide" id="btnRandom" type="button">Random</button>
</div> </div>
<div class="hint">Random runs briefly then stops automatically.</div> <div class="hint">Random runs briefly then stops automatically.</div>
</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>
<!-- JS stays in src/ and is bundled by Astro/Vite -->
<script type="module" src="/src/scripts/binary.js"></script> <script type="module" src="/src/scripts/binary.js"></script>
</body> </body>
</html> </html>

185
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)
// Matches IDs/classes in src/pages/binary.astro // Matches IDs/classes in binary.astro
(() => { (() => {
/* ----------------------------- /* -----------------------------
@@ -28,23 +28,14 @@
const btnBitsDown = document.getElementById("btnBitsDown"); const btnBitsDown = document.getElementById("btnBitsDown");
const toolboxToggle = document.getElementById("toolboxToggle"); const toolboxToggle = document.getElementById("toolboxToggle");
const toolboxPanel = document.getElementById("toolboxPanel");
/* ----------------------------- /* -----------------------------
STATE STATE
----------------------------- */ ----------------------------- */
let bitCount = clampInt(Number(bitsInput?.value ?? 8), 1, 64); let bitCount = clampInt(Number(bitsInput?.value ?? 8), 1, 64);
// bits[i] is bit value 2^i (LSB at i=0)
let bits = new Array(bitCount).fill(false); let bits = new Array(bitCount).fill(false);
// 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
----------------------------- */ ----------------------------- */
@@ -62,7 +53,7 @@
} }
function unsignedMaxExclusive(nBits) { function unsignedMaxExclusive(nBits) {
return pow2Big(nBits); // 2^n return pow2Big(nBits);
} }
function unsignedMaxValue(nBits) { function unsignedMaxValue(nBits) {
@@ -79,9 +70,7 @@
function bitsToUnsignedBigInt() { function bitsToUnsignedBigInt() {
let v = 0n; let v = 0n;
for (let i = 0; i < bitCount; i++) { for (let i = 0; i < bitCount; i++) if (bits[i]) v += pow2Big(i);
if (bits[i]) v += pow2Big(i);
}
return v; return v;
} }
@@ -101,70 +90,79 @@
} }
function signedBigIntToBitsTwos(vSigned) { function signedBigIntToBitsTwos(vSigned) {
const span = pow2Big(bitCount); // 2^n const span = pow2Big(bitCount);
let v = vSigned; let v = ((vSigned % span) + span) % span;
v = ((v % span) + span) % span;
unsignedBigIntToBits(v); unsignedBigIntToBits(v);
} }
function updateModeHint() { function updateModeHint() {
if (!modeHint) return; if (!modeHint) return;
if (isTwosMode()) { modeHint.textContent = isTwosMode()
modeHint.textContent = ? "Tip: In two’s complement, the left-most bit (MSB) represents a negative value."
"Tip: In two’s complement, the left-most bit (MSB) represents a negative value."; : "Tip: In unsigned binary, all bits represent positive values.";
} else {
modeHint.textContent =
"Tip: In unsigned binary, all bits represent positive values.";
}
} }
/* ----------------------------- /* -----------------------------
BIG BINARY DISPLAY WRAP BINARY WRAP (responsive nibbles per row)
- Determines how many nibbles (4 bits) fit per row - Calculates how many 4-bit groups fit in the visible area
- Recalculates on window resize - Re-runs on resize
----------------------------- */ ----------------------------- */
function computeNibblesPerRow() { function measureNibbleWidthPx() {
if (!binaryEl) return; // Measure "0000 " at current binary font settings
const probe = document.createElement("span");
// available width for the binary number = element width probe.style.position = "absolute";
const w = binaryEl.getBoundingClientRect().width; probe.style.visibility = "hidden";
probe.style.whiteSpace = "pre";
// Approximate "nibble width" in pixels: probe.style.font = getComputedStyle(binaryEl).font;
// 4 digits + a space; use font size and letter-spacing to estimate. probe.style.letterSpacing = getComputedStyle(binaryEl).letterSpacing;
// This doesn't need to be perfect, just stable and responsive. probe.textContent = "0000 ";
const style = window.getComputedStyle(binaryEl); document.body.appendChild(probe);
const fontSize = parseFloat(style.fontSize || "40"); // px const w = probe.getBoundingClientRect().width;
const letterSpacing = parseFloat(style.letterSpacing || "0"); probe.remove();
const digitW = fontSize * 0.62 + letterSpacing; // rough digit width return Math.max(1, w);
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() { function nibblesPerRow() {
// Build MSB..LSB and group into nibbles if (!binaryEl) return Math.max(1, Math.ceil(bitCount / 4));
const nibbles = [];
let current = "";
for (let i = bitCount - 1; i >= 0; i--) { const nibbleW = measureNibbleWidthPx();
current += bits[i] ? "1" : "0";
const posFromRight = (bitCount - i); // available width is the left column width (the grid reserves toolbox space already)
if (posFromRight % 4 === 0 || i === 0) { const container = binaryEl.closest(".readout") || binaryEl.parentElement;
// if last group is partial, left-pad inside the group const avail = container?.getBoundingClientRect().width ?? window.innerWidth;
if (current.length < 4) current = current.padStart(4, "0");
nibbles.push(current); // leave a little padding so we don't hit the edge
current = ""; const usable = Math.max(200, avail - 40);
}
const perRow = Math.floor(usable / nibbleW);
return Math.max(1, perRow);
} }
// Now wrap nibbles into lines function formatBinaryWrapped() {
const lines = []; // Build MSB..LSB grouped by nibbles, then wrap by nibblesPerRow()
for (let i = 0; i < nibbles.length; i += nibblesPerRow) { const nibCount = Math.ceil(bitCount / 4);
lines.push(nibbles.slice(i, i + nibblesPerRow).join(" ")); const perRow = nibblesPerRow();
let out = [];
for (let n = 0; n < nibCount; n++) {
// nibble index from MSB side
const msbBitIndex = bitCount - 1 - (n * 4);
let nib = "";
for (let k = 0; k < 4; k++) {
const i = msbBitIndex - k;
if (i < 0) continue;
nib += bits[i] ? "1" : "0";
}
// pad nibble if top group smaller
nib = nib.padStart(4, "0");
out.push(nib);
} }
// wrap into lines
let lines = [];
for (let i = 0; i < out.length; i += perRow) {
lines.push(out.slice(i, i + perRow).join(" "));
}
return lines.join("\n"); return lines.join("\n");
} }
@@ -175,7 +173,6 @@
bitCount = clampInt(count, 1, 64); bitCount = clampInt(count, 1, 64);
if (bitsInput) bitsInput.value = String(bitCount); if (bitsInput) bitsInput.value = String(bitCount);
// 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];
@@ -215,8 +212,6 @@
UI UPDATE UI UPDATE
----------------------------- */ ----------------------------- */
function updateBitLabels() { function updateBitLabels() {
// Unsigned: 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++) {
const label = document.getElementById(`bitLabel-${i}`); const label = document.getElementById(`bitLabel-${i}`);
if (!label) continue; if (!label) continue;
@@ -240,17 +235,8 @@
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;
if (on) { bulb.classList.toggle("on", on);
bulb.style.opacity = "1";
bulb.style.filter = "grayscale(0)";
bulb.style.textShadow = "0 0 14px rgba(255,216,107,.75), 0 0 26px rgba(255,216,107,.45)";
} else {
bulb.style.opacity = "0.45";
bulb.style.filter = "grayscale(1)";
bulb.style.textShadow = "none";
}
} }
} }
@@ -258,16 +244,13 @@
if (!denaryEl || !binaryEl) return; if (!denaryEl || !binaryEl) return;
if (isTwosMode()) { if (isTwosMode()) {
const signed = bitsToSignedBigIntTwos(); denaryEl.textContent = bitsToSignedBigIntTwos().toString();
denaryEl.textContent = signed.toString();
} else { } else {
const unsigned = bitsToUnsignedBigInt(); denaryEl.textContent = bitsToUnsignedBigInt().toString();
denaryEl.textContent = unsigned.toString();
} }
// Ensure nibble wrapping is up-to-date // responsive wrap of binary digits (nibbles per row)
computeNibblesPerRow(); binaryEl.textContent = formatBinaryWrapped();
binaryEl.textContent = formatBinaryGroupedWrapped();
} }
function updateUI() { function updateUI() {
@@ -290,7 +273,6 @@
const charFromRight = padded[padded.length - 1 - i]; const charFromRight = padded[padded.length - 1 - i];
bits[i] = charFromRight === "1"; bits[i] = charFromRight === "1";
} }
updateUI(); updateUI();
return true; return true;
} }
@@ -357,8 +339,7 @@
signedBigIntToBitsTwos(v); signedBigIntToBitsTwos(v);
} else { } else {
const span = unsignedMaxExclusive(bitCount); const span = unsignedMaxExclusive(bitCount);
const v = (bitsToUnsignedBigInt() + 1n) % span; unsignedBigIntToBits((bitsToUnsignedBigInt() + 1n) % span);
unsignedBigIntToBits(v);
} }
updateUI(); updateUI();
} }
@@ -372,8 +353,7 @@
signedBigIntToBitsTwos(v); signedBigIntToBitsTwos(v);
} else { } else {
const span = unsignedMaxExclusive(bitCount); const span = unsignedMaxExclusive(bitCount);
const v = (bitsToUnsignedBigInt() - 1n + span) % span; unsignedBigIntToBits((bitsToUnsignedBigInt() - 1n + span) % span);
unsignedBigIntToBits(v);
} }
updateUI(); updateUI();
} }
@@ -431,22 +411,24 @@
BIT WIDTH BIT WIDTH
----------------------------- */ ----------------------------- */
function setBitWidth(n) { function setBitWidth(n) {
const v = clampInt(n, 1, 64); buildBits(clampInt(n, 1, 64));
buildBits(v);
} }
/* ----------------------------- /* -----------------------------
TOOLBOX TOGGLE TOOLBOX TOGGLE
----------------------------- */ ----------------------------- */
function setToolboxCollapsed(collapsed) { function setToolboxOpen(open) {
document.body.classList.toggle("toolbox-collapsed", collapsed); document.body.classList.toggle("toolbox-open", open);
toolboxToggle?.setAttribute("aria-expanded", String(!collapsed)); document.body.classList.toggle("toolbox-closed", !open);
toolboxToggle?.setAttribute("aria-expanded", open ? "true" : "false");
// reflow binary wrapping when toolbox changes
requestAnimationFrame(updateUI);
} }
/* ----------------------------- /* -----------------------------
EVENTS EVENTS
----------------------------- */ ----------------------------- */
modeToggle?.addEventListener("change", () => updateUI()); 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`);
@@ -457,8 +439,8 @@
btnCustomDenary?.addEventListener("click", () => { btnCustomDenary?.addEventListener("click", () => {
const v = prompt( const v = prompt(
isTwosMode() isTwosMode()
? `Enter denary (${twosMin(bitCount).toString()} to ${twosMax(bitCount).toString()}):` ? `Enter denary (${twosMin(bitCount)} to ${twosMax(bitCount)}):`
: `Enter denary (0 to ${unsignedMaxValue(bitCount).toString()}):` : `Enter denary (0 to ${unsignedMaxValue(bitCount)}):`
); );
if (v === null) return; if (v === null) return;
if (!setFromDenaryInput(v)) alert("Invalid denary for current mode/bit width"); if (!setFromDenaryInput(v)) alert("Invalid denary for current mode/bit width");
@@ -479,22 +461,19 @@
bitsInput?.addEventListener("change", () => setBitWidth(Number(bitsInput.value))); bitsInput?.addEventListener("change", () => setBitWidth(Number(bitsInput.value)));
toolboxToggle?.addEventListener("click", () => { toolboxToggle?.addEventListener("click", () => {
const collapsed = document.body.classList.contains("toolbox-collapsed"); const open = !document.body.classList.contains("toolbox-closed");
setToolboxCollapsed(!collapsed); setToolboxOpen(!open);
// ensure binary re-wraps after layout change
requestAnimationFrame(() => updateReadout());
}); });
// Recompute nibble wrapping on resize
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
// throttled via rAF to avoid spam // re-wrap the binary display live as the window changes
requestAnimationFrame(() => updateReadout()); updateUI();
}); });
/* ----------------------------- /* -----------------------------
INIT INIT
----------------------------- */ ----------------------------- */
updateModeHint(); updateModeHint();
setToolboxCollapsed(false); setToolboxOpen(true);
buildBits(bitCount); buildBits(bitCount);
})(); })();

289
src/styles/binary.css
View File

@@ -3,18 +3,18 @@
--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);
/* Toolbox sizing */ /* Toolbox sizing */
--toolboxW: 320px; /* default width */ --toolbox-w: 320px;
--toolboxGap: 20px; /* gap from right edge */ --toolbox-gap: 26px;
--toolboxTop: 92px; /* below header area */
} }
/* ---------- Fonts ---------- */ /* NUMBERS */
/* Numbers */
@font-face{ @font-face{
font-family: "DSEG7ClassicRegular"; font-family: "DSEG7ClassicRegular";
src: src:
@@ -25,7 +25,7 @@
font-display: swap; font-display: swap;
} }
/* Text */ /* TEXT */
@font-face{ @font-face{
font-family: "SevenSegment"; font-family: "SevenSegment";
src: src:
@@ -45,33 +45,29 @@ body{
font-family: "SevenSegment", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; 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: 1400px;
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;
} }
/* Main layout:
- reserve space for the toolbox when open so it NEVER overlaps
- when closed, the left content re-centres because column disappears
*/
.topGrid{ .topGrid{
display:grid; display:grid;
grid-template-columns: 1fr; grid-template-columns: 1fr var(--toolbox-w);
gap:28px; gap: var(--toolbox-gap);
align-items:start; align-items:start;
} }
body.toolbox-closed .topGrid{
grid-template-columns: 1fr;
gap: 0;
}
/* LEFT */
.readout{ .readout{
text-align:center; text-align:center;
padding: 10px 10px 0; padding: 10px 10px 0;
@@ -86,35 +82,28 @@ body.toolbox-collapsed .wrap{
margin-top: 10px; margin-top: 10px;
} }
/* All numbers */ /* Numbers use DSEG */
.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 */
} }
/* Denary is smaller than it used to be */
.denaryValue{ .denaryValue{
font-size: 52px; /* was ~70 */ font-size: 56px;
line-height: 1.0; line-height: 1.0;
margin: 6px 0 10px; margin: 6px 0 10px;
} }
/* Binary wraps (JS inserts \n), keep spacing readable */
.binaryValue{ .binaryValue{
font-size: 39px; /* was ~52 */ font-size: 44px;
line-height: 1.05; line-height: 1.05;
margin: 6px 0 14px; margin: 6px 0 14px;
white-space: pre-wrap; white-space: pre-line;
word-break: normal; letter-spacing: 0.02em;
overflow-wrap: normal;
letter-spacing: 0.06em; /* widen characters slightly */
} }
/* Buttons */ /* Buttons */
@@ -122,16 +111,18 @@ body.toolbox-collapsed .wrap{
margin-top: 10px; margin-top: 10px;
display:flex; display:flex;
flex-direction:column; flex-direction:column;
gap:10px;
align-items:center; align-items:center;
} }
/* extra spacing between custom and shift rows */
.controlsRow{ .controlsRow{
display:flex; display:flex;
gap: 12px; gap: 12px;
justify-content:center; justify-content:center;
flex-wrap:wrap; flex-wrap:wrap;
} }
.controlsRowCustom{ margin-bottom: 14px; }
.controlsRowShift{ margin-bottom: 0; }
.btn{ .btn{
background: rgba(255,255,255,.06); background: rgba(255,255,255,.06);
@@ -142,8 +133,6 @@ body.toolbox-collapsed .wrap{
font-weight: 700; font-weight: 700;
cursor: pointer; cursor: pointer;
min-width: 170px; min-width: 170px;
font-family:"SevenSegment", system-ui, sans-serif;
letter-spacing: .06em;
} }
.btn:active{ transform: translateY(1px); } .btn:active{ transform: translateY(1px); }
@@ -157,19 +146,20 @@ body.toolbox-collapsed .wrap{
border-top: 1px solid var(--line); border-top: 1px solid var(--line);
} }
/* ---------- Bits grid ---------- */ /* Bits area */
.bitsWrap{ margin-top: 22px; } .bitsWrap{ margin-top: 22px; }
/* auto-fit prevents overlap at large values without shrinking the digits */ /* IMPORTANT: Use auto-fit so columns get wider when toolbox is open,
preventing long bit values from overlapping.
*/
.bitsGrid{ .bitsGrid{
display:grid; display:grid;
gap: 18px; gap: 18px;
justify-content:center; justify-content:center;
padding-top: 18px; 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)); grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
max-width: 100%; max-width: 1100px;
margin: 0 auto;
} }
.bit{ .bit{
@@ -179,34 +169,40 @@ body.toolbox-collapsed .wrap{
gap: 10px; gap: 10px;
padding: 8px 4px; padding: 8px 4px;
text-align:center; text-align:center;
min-width:120px;
} }
/* Bulb: emoji only (no circle) */
.bulb{ .bulb{
/* NO circle/ring. Just the emoji. 25% bigger than prior ~26px -> ~33px */ font-size: 33px; /* ~25% larger */
font-size: 33px;
line-height: 1; line-height: 1;
background:transparent;
border:none;
width:auto;
height:auto;
opacity: .45; opacity: .45;
filter: grayscale(1); filter: grayscale(1);
text-shadow: none; text-shadow: none;
user-select: none; user-select: 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 */
.bitVal{ .bitVal{
font-family:"DSEG7ClassicRegular", ui-monospace, monospace;
font-size: 28px; font-size: 28px;
color: var(--text); color: var(--text);
opacity: .95; opacity: .95;
line-height:1; line-height: 1.05;
min-height:32px; min-height: 34px;
white-space: nowrap; /* stop wrapping into each other */
letter-spacing: 0.02em; /* prevent overlap */
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
/* Shared toggle switch (bit switches + mode) */ /* Switch styling (reused) */
.switch{ .switch{
position: relative; position: relative;
width: 56px; width: 56px;
@@ -247,60 +243,49 @@ body.toolbox-collapsed .wrap{
background: var(--accent); background: var(--accent);
} }
/* ---------- Toolbox (fixed, non-overlapping) ---------- */ /* RIGHT TOOLBOX (fixed to right, but never overlaps because layout reserves space) */
.toolboxToggle{ .toolboxDock{
position: fixed; position: sticky;
top: 18px; top: 18px;
right: var(--toolboxGap); justify-self: end;
z-index: 40; }
display:flex; body.toolbox-closed .toolboxDock{
display: none;
}
.toolboxToggle{
display:inline-flex;
align-items:center; align-items:center;
gap: 10px; gap: 10px;
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;
border-radius: 12px; border-radius: 12px;
padding: 10px 12px; padding: 10px 12px;
cursor: pointer; cursor: pointer;
font-weight: 800;
font-family:"SevenSegment", system-ui, sans-serif; margin-bottom: 12px;
letter-spacing:.06em;
} }
.toolboxIcon{ font-size: 16px; line-height:1; } .toolboxToggleText{
.toolboxText{ font-weight:800; font-size: 14px; } letter-spacing: .08em;
text-transform: uppercase;
.toolboxFixed{ font-size: 12px;
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{ .toolboxPanel{
transform: translateX(calc(100% + var(--toolboxGap)));
opacity: 0;
pointer-events: none;
}
/* cards inside toolbox */
.panelCol{
display:flex; display:flex;
flex-direction:column; flex-direction:column;
gap: 14px; gap: 14px;
} }
/* Cards */
.card{ .card{
background: var(--panel2); background: var(--panel2);
border: 1px solid rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.10);
border-radius: 14px; border-radius: 14px;
padding: 14px; padding: 14px;
backdrop-filter: blur(6px);
} }
.cardTitle{ .cardTitle{
@@ -332,28 +317,22 @@ body.toolbox-collapsed .toolboxFixed{
font-size: 14px; font-size: 14px;
} }
/* ---------- Tools merged layout ---------- */ /* Tools layout */
.toolsTopRow{ .toolsRowTop{
display:grid; display:grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 10px; gap: 10px;
align-items:center; align-items:center;
margin-bottom: 10px; margin-bottom: 12px;
} }
.spinGroup{ .toolsArrowsCentered{
display:grid; display:flex;
grid-template-columns: 1fr 1fr; justify-content:center;
gap: 10px; gap: 10px;
} }
.toolsBottomRow{ /* Buttons */
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;
@@ -362,52 +341,44 @@ body.toolbox-collapsed .toolboxFixed{
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
font-weight: 800; font-weight: 800;
font-family:"SevenSegment", system-ui, sans-serif; font-size: 20px;
letter-spacing:.06em; min-width: 44px;
} }
.toolSpin{ .toolBtnWide{
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%; width: 100%;
font-size: 16px;
} }
.toolRandom{ .toolBtnDec{
background: rgba(255, 80, 80, .16);
border-color: rgba(255, 80, 80, .35);
}
.toolBtnInc{
background: rgba(51,255,122,.18);
border-color: rgba(51,255,122,.45);
}
.bitWidthSubCard{
width: 100%; width: 100%;
/* make random ~5% narrower by padding reduction (without breaking grid) */ background: rgba(255,255,255,.03);
padding-left: 10px; border: 1px solid rgba(255,255,255,.10);
padding-right: 10px; border-radius: 12px;
padding: 12px;
margin-bottom: 12px;
} }
/* bit width mini block */ .bitWidthTitle{
.bitWidthMini{
display:flex;
flex-direction:column;
gap:6px;
}
.bitWidthMiniLabel{
color:var(--muted);
font-size:12px;
font-weight:800;
letter-spacing: .18em; letter-spacing: .18em;
font-weight: 800;
color: var(--muted);
text-transform: uppercase; text-transform: uppercase;
font-size: 12px;
margin: 0 0 10px;
} }
.bitWidthMiniRow{ .bitWidthRow{
display:grid; display:grid;
grid-template-columns: 44px 1fr 44px; grid-template-columns: 44px 1fr 44px;
gap: 10px; gap: 10px;
@@ -424,19 +395,36 @@ body.toolbox-collapsed .toolboxFixed{
cursor:pointer; cursor:pointer;
font-weight:900; font-weight:900;
font-size:18px; font-size:18px;
font-family:"SevenSegment", system-ui, sans-serif;
} }
.bitInput{ .bitInputWrap{
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 8px; padding:10px 12px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
min-width: 0;
}
.bitInputLabel{
color:var(--muted);
font-size:12px;
font-weight:800;
letter-spacing:.18em;
text-transform:uppercase;
}
.bitInput{
width: 72px; /* fits 2 digits comfortably */
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;
} }
@@ -446,15 +434,18 @@ body.toolbox-collapsed .toolboxFixed{
margin:0; margin:0;
} }
/* ---------- Responsive ---------- */ .toolsRowBottom{
display:grid;
grid-template-columns: 1fr;
margin-bottom: 2px;
}
/* Responsive */
@media (max-width: 980px){ @media (max-width: 980px){
.wrap{ .topGrid{ grid-template-columns: 1fr; }
/* On small screens, don’t reserve fixed sidebar space; toolbox floats */ .toolboxDock{ position: static; justify-self: stretch; }
padding-right: 20px; body.toolbox-closed .toolboxDock{ display:none; }
} .bitsGrid{ max-width: 100%; }
.toolboxFixed{
width: min(320px, calc(100vw - 40px));
}
} }
@media (max-width: 520px){ @media (max-width: 520px){