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

Fixed Changes:

Browse Source 
- The bit value when in two's compliment mode is not right, it should be on the same line, not wrapped
- The random button should glow when the random function is running, it shouldn't be solid green all the time
- The reset button, can you make the background of it red when hovered over too? I want it to pulse red on the background as well
- Make the title of this page (in head) "Binary Simulator"
- Reinstate the BaseLayout layout which we created previously
- The shifts for Two's Compliment do not work. An Arithmetic Right Shift would keep the value of the most significant bit.

Signed-off-by: Alexander Lyall <alex@adcm.uk>
This commit is contained in:
Alexander Lyall
2025-12-16 19:35:39 +00:00
parent 8bf8b44938
commit ae91944cb4
3 changed files with 247 additions and 392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/pages/binary.astro
View File

@@ -1,39 +1,37 @@
--- ---
/* import BaseLayout from "../layouts/BaseLayout.astro";
Binary | Computing:Box
- Toolbox is fixed to the right, and can be collapsed without disappearing.
- Main content reserves space when toolbox is open, and recentres when hidden.
*/
import "../styles/binary.css"; import "../styles/binary.css";
--- ---
<!doctype html> <BaseLayout title="Binary Simulator">
<html lang="en"> <button id="toolboxToggle" class="toolboxToggle" type="button" aria-expanded="true">
<head> <span class="toolboxIcon" aria-hidden="true">🧰</span>
<meta charset="utf-8" /> <span class="toolboxLabel">TOOLBOX</span>
<meta name="viewport" content="width=device-width,initial-scale=1" /> </button>
<title>Binary | Computing:Box</title>
</head>
<body> <main class="wrap">
<!-- Always-visible toggle button (never hides) --> <section class="topGrid">
<button <!-- LEFT -->
id="toolboxToggle" <div>
class="toolboxToggle" <div class="readout">
type="button" <div class="label">Denary</div>
aria-expanded="true" <div id="denaryNumber" class="num denaryValue">0</div>
aria-controls="toolboxPanel"
title="Toggle toolbox"
>
<span class="toolboxToggleIcon" aria-hidden="true">🧰</span>
<span class="toolboxToggleText">TOOLBOX</span>
</button>
<!-- Fixed right-side toolbox --> <div class="label">Binary</div>
<aside id="toolboxPanel" class="toolbox" aria-label="Toolbox"> <div id="binaryNumber" class="num binaryValue">0000 0000</div>
<div class="toolboxInner"> </div>
<!-- SETTINGS (renamed from Mode) -->
<section class="card"> <div class="divider"></div>
<section class="bitsWrap" aria-label="Bit switches">
<div class="bitsGrid" id="bitsGrid"></div>
</section>
</div>
<!-- RIGHT TOOLBOX -->
<aside id="toolbox" class="panelCol" aria-label="Toolbox">
<!-- SETTINGS -->
<div class="card">
<div class="cardTitle">Settings</div> <div class="cardTitle">Settings</div>
<div class="toggleRow"> <div class="toggleRow">
@@ -49,10 +47,8 @@ import "../styles/binary.css";
Tip: In unsigned binary, all bits represent positive values. Tip: In unsigned binary, all bits represent positive values.
</div> </div>
<!-- Bit width moved into Settings -->
<div class="subCard"> <div class="subCard">
<div class="subCardTitle">Bit width</div> <div class="subTitle">Bit width</div>
<div class="bitWidthRow"> <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>
@@ -74,58 +70,43 @@ import "../styles/binary.css";
<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>
</section> </div>
<!-- CUSTOM (Custom Binary / Denary + Random) --> <!-- CUSTOM -->
<section class="card"> <div class="card">
<div class="cardTitle">Custom</div> <div class="cardTitle">Custom</div>
<div class="customGrid"> <div class="twoBtnRow">
<button class="btn btnAccent btnSmall" id="btnCustomBinary" type="button">Custom Binary</button> <button class="btn btnAccent" id="btnCustomBinary" type="button">Custom Binary</button>
<button class="btn btnAccent btnSmall" id="btnCustomDenary" type="button">Custom Denary</button> <button class="btn btnAccent" id="btnCustomDenary" type="button">Custom Denary</button>
<button class="btn btnAccent btnSmall btnRandom" id="btnRandom" type="button">Random</button>
</div> </div>
<div class="hint">Random runs briefly then stops automatically.</div> <button class="toolBtn toolWide toolRandom" id="btnRandom" type="button">
</section> Random
</button>
<!-- TOOLS (inc/dec centred, shift buttons, reset full width bottom row) --> <div class="hint">Random runs briefly then stops automatically.</div>
<section class="card"> </div>
<!-- TOOLS -->
<div class="card">
<div class="cardTitle">Tools</div> <div class="cardTitle">Tools</div>
<div class="toolsTopRow"> <div class="toolsTopRow">
<button class="toolBtn toolSpin toolDec" id="btnDec" type="button" aria-label="Decrement">▼</button> <button class="toolBtn toolArrow toolDown" id="btnDec" type="button" aria-label="Decrement">▼</button>
<button class="toolBtn toolSpin toolInc" id="btnInc" type="button" aria-label="Increment">▲</button> <button class="toolBtn toolArrow toolUp" id="btnInc" type="button" aria-label="Increment">▲</button>
</div> </div>
<div class="toolsShiftRow"> <div class="twoBtnRow">
<button class="btn btnSmall" id="btnShiftLeft" type="button">Left Shift</button> <button class="btn" id="btnShiftLeft" type="button">Left Shift</button>
<button class="btn btnSmall" id="btnShiftRight" type="button">Right Shift</button> <button class="btn" id="btnShiftRight" type="button">Right Shift</button>
</div> </div>
<button class="toolBtn toolReset" id="btnClear" type="button">RESET</button> <button class="toolBtn toolWide toolReset" id="btnClear" type="button">Reset</button>
</section> </div>
</div> </aside>
</aside> </section>
</main>
<!-- Main content --> <script type="module" src="/src/scripts/binary.js"></script>
<main class="wrap"> </BaseLayout>
<section 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="divider"></div>
</section>
<section class="bitsWrap" aria-label="Bit switches">
<div class="bitsGrid" id="bitsGrid"></div>
</section>
</main>
<script type="module" src="/src/scripts/binary.js"></script>
</body>
</html>

127
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 Simulator logic (Unsigned + Two's Complement)
// Matches IDs/classes in your current binary.astro HTML. // Matches IDs/classes in binary.astro
(() => { (() => {
/* ----------------------------- /* -----------------------------
@@ -13,10 +13,11 @@
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");
const btnShiftLeft = document.getElementById("btnShiftLeft"); const btnShiftLeft = document.getElementById("btnShiftLeft");
const btnShiftRight = document.getElementById("btnShiftRight"); const btnShiftRight = document.getElementById("btnShiftRight");
@@ -28,7 +29,7 @@
const btnBitsUp = document.getElementById("btnBitsUp"); const btnBitsUp = document.getElementById("btnBitsUp");
const btnBitsDown = document.getElementById("btnBitsDown"); const btnBitsDown = document.getElementById("btnBitsDown");
// Toolbox toggle const toolbox = document.getElementById("toolbox");
const toolboxToggle = document.getElementById("toolboxToggle"); const toolboxToggle = document.getElementById("toolboxToggle");
/* ----------------------------- /* -----------------------------
@@ -94,22 +95,18 @@
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;
return u - pow2Big(bitCount); // negative: u - 2^n
// negative: u - 2^n
return u - pow2Big(bitCount);
} }
function signedBigIntToBitsTwos(vSigned) { function signedBigIntToBitsTwos(vSigned) {
const span = pow2Big(bitCount); // 2^n const span = pow2Big(bitCount); // 2^n
let v = vSigned; // convert to unsigned representative: v mod 2^n
const v = ((vSigned % span) + span) % span;
// Convert to unsigned representative: v mod 2^n
v = ((v % span) + span) % span;
unsignedBigIntToBits(v); unsignedBigIntToBits(v);
} }
function formatBinaryGrouped() { function formatBinaryGrouped() {
// MSB..LSB with a space every 4 bits // MSB..LSB with space every 4 bits
let s = ""; let s = "";
for (let i = bitCount - 1; i >= 0; i--) { for (let i = bitCount - 1; i >= 0; i--) {
s += bits[i] ? "1" : "0"; s += bits[i] ? "1" : "0";
@@ -122,11 +119,9 @@
function updateModeHint() { function updateModeHint() {
if (!modeHint) return; if (!modeHint) return;
if (isTwosMode()) { if (isTwosMode()) {
modeHint.textContent = 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.";
} else { } else {
modeHint.textContent = modeHint.textContent = "Tip: In unsigned binary, all bits represent positive values.";
"Tip: In unsigned binary, all bits represent positive values.";
} }
} }
@@ -137,7 +132,7 @@
bitCount = clampInt(count, 1, 64); bitCount = clampInt(count, 1, 64);
if (bitsInput) bitsInput.value = String(bitCount); if (bitsInput) bitsInput.value = String(bitCount);
// resize bits array, 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];
@@ -150,7 +145,7 @@
bitEl.className = "bit"; bitEl.className = "bit";
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>
<label class="switch" aria-label="Toggle bit ${i}"> <label class="switch" aria-label="Toggle bit ${i}">
<input type="checkbox" data-index="${i}"> <input type="checkbox" data-index="${i}">
@@ -161,8 +156,8 @@
bitsGrid.appendChild(bitEl); bitsGrid.appendChild(bitEl);
} }
// Hook switches // Hook switches (only the bit switches, not the mode toggle)
bitsGrid.querySelectorAll('input[type="checkbox"]').forEach((input) => { bitsGrid.querySelectorAll('input[type="checkbox"][data-index]').forEach((input) => {
input.addEventListener("change", () => { input.addEventListener("change", () => {
const i = Number(input.dataset.index); const i = Number(input.dataset.index);
bits[i] = input.checked; bits[i] = input.checked;
@@ -190,7 +185,7 @@
} }
function syncSwitchesToBits() { function syncSwitchesToBits() {
bitsGrid.querySelectorAll('input[type="checkbox"]').forEach((input) => { bitsGrid.querySelectorAll('input[type="checkbox"][data-index]').forEach((input) => {
const i = Number(input.dataset.index); const i = Number(input.dataset.index);
input.checked = !!bits[i]; input.checked = !!bits[i];
}); });
@@ -200,18 +195,7 @@
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;
bulb.classList.toggle("on", bits[i] === true);
const on = bits[i] === true;
if (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";
}
} }
} }
@@ -223,7 +207,6 @@
} else { } else {
denaryEl.textContent = bitsToUnsignedBigInt().toString(); denaryEl.textContent = bitsToUnsignedBigInt().toString();
} }
binaryEl.textContent = formatBinaryGrouped(); binaryEl.textContent = formatBinaryGrouped();
} }
@@ -236,26 +219,21 @@
} }
/* ----------------------------- /* -----------------------------
SET FROM BINARY STRING SET FROM INPUTS
----------------------------- */ ----------------------------- */
function setFromBinaryString(binStr) { function setFromBinaryString(binStr) {
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;
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++) {
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;
} }
/* -----------------------------
SET FROM DENARY INPUT
----------------------------- */
function setFromDenaryInput(vStr) { function setFromDenaryInput(vStr) {
const raw = String(vStr ?? "").trim(); const raw = String(vStr ?? "").trim();
if (!raw) return false; if (!raw) return false;
@@ -287,14 +265,21 @@
SHIFTS SHIFTS
----------------------------- */ ----------------------------- */
function shiftLeft() { function shiftLeft() {
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() {
for (let i = 0; i < bitCount - 1; i++) bits[i] = bits[i + 1]; // ✅ Arithmetic Right Shift in two's complement: preserve MSB (sign bit)
bits[bitCount - 1] = false; const preserveMSB = isTwosMode() ? bits[bitCount - 1] : false;
for (let i = 0; i < bitCount - 1; i++) {
bits[i] = bits[i + 1];
}
bits[bitCount - 1] = preserveMSB;
updateUI(); updateUI();
} }
@@ -311,7 +296,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; if (v > max) v = min; // wrap
signedBigIntToBitsTwos(v); signedBigIntToBitsTwos(v);
} else { } else {
const span = unsignedMaxExclusive(bitCount); const span = unsignedMaxExclusive(bitCount);
@@ -326,7 +311,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; if (v < min) v = max; // wrap
signedBigIntToBitsTwos(v); signedBigIntToBitsTwos(v);
} else { } else {
const span = unsignedMaxExclusive(bitCount); const span = unsignedMaxExclusive(bitCount);
@@ -337,7 +322,7 @@
} }
/* ----------------------------- /* -----------------------------
RANDOM (BigInt-safe) RANDOM (crypto, BigInt-safe)
----------------------------- */ ----------------------------- */
function cryptoRandomBigInt(maxExclusive) { function cryptoRandomBigInt(maxExclusive) {
if (maxExclusive <= 0n) return 0n; if (maxExclusive <= 0n) return 0n;
@@ -361,19 +346,23 @@
function setRandomOnce() { function setRandomOnce() {
const span = unsignedMaxExclusive(bitCount); // 2^n const span = unsignedMaxExclusive(bitCount); // 2^n
const u = cryptoRandomBigInt(span); const u = cryptoRandomBigInt(span); // 0..2^n-1
unsignedBigIntToBits(u); unsignedBigIntToBits(u);
updateUI(); updateUI();
} }
function stopRandomPulse() {
btnRandom?.classList.remove("running");
}
function runRandomBriefly() { function runRandomBriefly() {
// stop any existing run first
if (randomTimer) { if (randomTimer) {
clearInterval(randomTimer); clearInterval(randomTimer);
randomTimer = null; randomTimer = null;
} }
// pulse while running btnRandom?.classList.add("running");
btnRandom?.classList.add("is-running");
const start = Date.now(); const start = Date.now();
const durationMs = 900; const durationMs = 900;
@@ -384,44 +373,37 @@
if (Date.now() - start >= durationMs) { if (Date.now() - start >= durationMs) {
clearInterval(randomTimer); clearInterval(randomTimer);
randomTimer = null; randomTimer = null;
btnRandom?.classList.remove("is-running"); stopRandomPulse();
} }
}, tickMs); }, tickMs);
} }
/* ----------------------------- /* -----------------------------
BIT WIDTH CONTROLS BIT WIDTH
----------------------------- */ ----------------------------- */
function setBitWidth(n) { function setBitWidth(n) {
buildBits(clampInt(n, 1, 64)); const v = clampInt(n, 1, 64);
buildBits(v);
} }
/* ----------------------------- /* -----------------------------
TOOLBOX TOGGLE (never disappears) TOOLBOX TOGGLE
----------------------------- */ ----------------------------- */
function setToolboxHidden(hidden) { function setToolboxHidden(hidden) {
document.body.classList.toggle("toolbox-hidden", hidden); if (!toolbox) return;
if (toolboxToggle) toolboxToggle.setAttribute("aria-expanded", String(!hidden)); toolbox.style.display = hidden ? "none" : "";
try { localStorage.setItem("computingbox.toolboxHidden", hidden ? "1" : "0"); } catch {} toolboxToggle?.setAttribute("aria-expanded", hidden ? "false" : "true");
} }
function initToolboxState() { toolboxToggle?.addEventListener("click", () => {
let hidden = false; const hidden = toolbox?.style.display === "none";
try { hidden = localStorage.getItem("computingbox.toolboxHidden") === "1"; } catch {} setToolboxHidden(!hidden);
setToolboxHidden(hidden); });
}
/* ----------------------------- /* -----------------------------
EVENTS EVENTS
----------------------------- */ ----------------------------- */
toolboxToggle?.addEventListener("click", () => { modeToggle?.addEventListener("change", () => updateUI());
const hidden = document.body.classList.contains("toolbox-hidden");
setToolboxHidden(!hidden);
});
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`);
@@ -446,19 +428,18 @@
btnDec?.addEventListener("click", decrement); btnDec?.addEventListener("click", decrement);
btnClear?.addEventListener("click", clearAll); btnClear?.addEventListener("click", clearAll);
btnRandom?.addEventListener("click", runRandomBriefly); btnRandom?.addEventListener("click", runRandomBriefly);
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));
});
/* ----------------------------- /* -----------------------------
INIT INIT
----------------------------- */ ----------------------------- */
initToolboxState();
updateModeHint(); updateModeHint();
buildBits(bitCount); buildBits(bitCount);
setToolboxHidden(false);
})(); })();

383
src/styles/binary.css
View File

@@ -6,9 +6,6 @@
--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-width: 320px; /* adjust if needed */
--toolbox-gap: 28px;
} }
@font-face{ @font-face{
@@ -22,7 +19,7 @@
} }
@font-face{ @font-face{
font-family: "SevenSegment"; font-family: "Seven-Segment";
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");
@@ -31,98 +28,26 @@
font-display: swap; font-display: swap;
} }
html, body{
height: 100%;
}
body{ body{
margin:0; margin:0;
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; font-family: "Seven-Segment", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
} }
/* ---------------------------------
Toolbox toggle (always visible)
---------------------------------- */
.toolboxToggle{
position: fixed;
top: 18px;
right: 18px;
z-index: 9999;
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-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.toolboxToggleIcon{
display:inline-block;
transform: translateY(1px);
}
.toolboxToggleText{
font-size: 12px;
}
/* ---------------------------------
Fixed toolbox panel
---------------------------------- */
.toolbox{
position: fixed;
top: 74px; /* leaves room for the toggle button */
right: 18px;
width: var(--toolbox-width);
z-index: 9998;
}
.toolboxInner{
display:flex;
flex-direction:column;
gap: 14px;
}
/* When hidden, toolbox slides out but toggle stays */
body.toolbox-hidden .toolbox{
transform: translateX(calc(var(--toolbox-width) + 40px));
opacity: 0;
pointer-events: none;
transition: transform .22s ease, opacity .18s ease;
}
.toolbox{
transition: transform .22s ease, opacity .18s ease;
}
/* ---------------------------------
Main wrap: reserve space for toolbox
---------------------------------- */
.wrap{ .wrap{
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 32px 20px 60px; padding: 32px 20px 60px;
/* Reserve space so toolbox never overlaps bits */
padding-right: calc(var(--toolbox-width) + var(--toolbox-gap) + 20px);
transition: padding-right .22s ease;
} }
body.toolbox-hidden .wrap{ .topGrid{
padding-right: 20px; display:grid;
grid-template-columns: 1fr 340px;
gap: 28px;
align-items:start;
} }
/* ---------------------------------
Readout
---------------------------------- */
.readout{ .readout{
text-align:center; text-align:center;
padding: 10px 10px 0; padding: 10px 10px 0;
@@ -144,27 +69,19 @@ body.toolbox-hidden .wrap{
text-shadow: 0 0 18px var(--accent-dim); text-shadow: 0 0 18px var(--accent-dim);
} }
/* (You previously wanted these 25% smaller than earlier large sizes) */
.denaryValue{ .denaryValue{
font-size: 52px; font-size: 52px; /* smaller than earlier */
line-height: 1.0; line-height: 1.0;
margin: 6px 0 10px; margin: 6px 0 10px;
} }
.binaryValue{ .binaryValue{
font-size: 40px; font-size: 40px; /* smaller than earlier */
letter-spacing: .14em; /* +1-2px feel */ letter-spacing: .14em;
line-height: 1.08; line-height: 1.05;
margin: 6px 0 14px; margin: 6px 0 14px;
/* Allow wrapping at spaces between nibbles */
white-space: pre-wrap; white-space: pre-wrap;
word-break: normal; word-break: break-word;
overflow-wrap: anywhere;
/* Prevent absurd-wide overflow; respects toolbox space */
max-width: calc(100vw - var(--toolbox-width) - 120px);
display:inline-block;
} }
.divider{ .divider{
@@ -172,9 +89,39 @@ body.toolbox-hidden .wrap{
border-top: 1px solid var(--line); border-top: 1px solid var(--line);
} }
/* --------------------------------- /* TOOLBOX BUTTON (must never disappear) */
Cards & common controls .toolboxToggle{
---------------------------------- */ position: fixed;
top: 16px;
right: 16px;
z-index: 9999;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 12px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
color: #fff;
cursor: pointer;
font-weight: 800;
}
.toolboxLabel{
letter-spacing: .12em;
}
.toolboxIcon{
filter: saturate(1.1);
}
/* Toolbox column */
.panelCol{
display:flex;
flex-direction:column;
gap: 14px;
position: sticky;
top: 16px;
}
.card{ .card{
background: var(--panel2); background: var(--panel2);
border: 1px solid rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.10);
@@ -184,7 +131,7 @@ body.toolbox-hidden .wrap{
.cardTitle{ .cardTitle{
letter-spacing: .18em; letter-spacing: .18em;
font-weight: 900; font-weight: 800;
color: var(--muted); color: var(--muted);
text-transform: uppercase; text-transform: uppercase;
font-size: 12px; font-size: 12px;
@@ -194,38 +141,10 @@ body.toolbox-hidden .wrap{
.hint{ .hint{
color: var(--muted); color: var(--muted);
font-size: 12px; font-size: 12px;
margin-top: 10px; margin-top: 8px;
line-height: 1.35; line-height: 1.35;
} }
.btn{
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
color: #fff;
padding: 12px 14px;
border-radius: 12px;
font-weight: 800;
cursor: pointer;
min-width: 0;
font-family: "SevenSegment", system-ui, sans-serif;
letter-spacing: .12em;
text-transform: uppercase;
}
.btn:active{ transform: translateY(1px); }
.btnAccent{
background: rgba(51,255,122,.18);
border-color: rgba(51,255,122,.45);
}
.btnSmall{
padding: 10px 10px;
font-size: 12px;
}
/* ---------------------------------
Settings toggle
---------------------------------- */
.toggleRow{ .toggleRow{
display:flex; display:flex;
align-items:center; align-items:center;
@@ -235,10 +154,11 @@ body.toolbox-hidden .wrap{
.toggleLabel{ .toggleLabel{
color: var(--text); color: var(--text);
font-weight: 800; font-weight: 700;
font-size: 14px; font-size: 14px;
} }
/* Switch */
.switch{ .switch{
position: relative; position: relative;
width: 56px; width: 56px;
@@ -279,33 +199,52 @@ body.toolbox-hidden .wrap{
background: var(--accent); background: var(--accent);
} }
/* --------------------------------- /* Buttons */
Settings: Bit width subcard full width .btn{
---------------------------------- */ background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
color: #fff;
padding: 12px 14px;
border-radius: 12px;
font-weight: 800;
cursor: pointer;
}
.btn:active{ transform: translateY(1px); }
.btnAccent{
background: rgba(51,255,122,.18);
border-color: rgba(51,255,122,.45);
}
.twoBtnRow{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
/* Sub card */
.subCard{ .subCard{
margin-top: 12px; margin-top: 12px;
background: rgba(255,255,255,.03); background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.08);
border-radius: 12px; border-radius: 12px;
padding: 12px; padding: 12px;
} }
.subTitle{
.subCardTitle{ font-size: 12px;
letter-spacing: .18em;
font-weight: 900; font-weight: 900;
color: var(--muted); color: var(--muted);
text-transform: uppercase; text-transform: uppercase;
font-size: 11px; letter-spacing: .18em;
margin: 0 0 10px; margin-bottom: 10px;
} }
/* Bit width control */
.bitWidthRow{ .bitWidthRow{
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;
@@ -316,9 +255,7 @@ body.toolbox-hidden .wrap{
cursor:pointer; cursor:pointer;
font-weight:900; font-weight:900;
font-size:18px; font-size:18px;
font-family: "SevenSegment", system-ui, sans-serif;
} }
.bitInputWrap{ .bitInputWrap{
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);
@@ -328,8 +265,8 @@ body.toolbox-hidden .wrap{
align-items:center; align-items:center;
justify-content:space-between; justify-content:space-between;
gap:12px; gap:12px;
min-width: 140px; /* ensures 2 digits fits comfortably */
} }
.bitInputLabel{ .bitInputLabel{
color:var(--muted); color:var(--muted);
font-size:12px; font-size:12px;
@@ -337,9 +274,8 @@ body.toolbox-hidden .wrap{
letter-spacing:.18em; letter-spacing:.18em;
text-transform:uppercase; text-transform:uppercase;
} }
.bitInput{ .bitInput{
width: 90px; /* fits 2 digits comfortably */ width:60px;
text-align:right; text-align:right;
background:transparent; background:transparent;
border:none; border:none;
@@ -354,35 +290,10 @@ body.toolbox-hidden .wrap{
margin:0; margin:0;
} }
/* --------------------------------- /* Tools layout */
Custom card (includes Random)
---------------------------------- */
.customGrid{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.customGrid .btnRandom{
grid-column: 1 / -1;
}
/* Random running pulse (green) */
@keyframes pulseGreen{
0% { box-shadow: 0 0 0 rgba(51,255,122,0.0); }
50% { box-shadow: 0 0 18px rgba(51,255,122,0.55), 0 0 34px rgba(51,255,122,0.25); }
100% { box-shadow: 0 0 0 rgba(51,255,122,0.0); }
}
.btnRandom.is-running{
animation: pulseGreen .8s ease-in-out infinite;
}
/* ---------------------------------
Tools card
---------------------------------- */
.toolsTopRow{ .toolsTopRow{
display:flex; display:flex;
justify-content:center; /* centred to the card */ justify-content:center;
gap: 10px; gap: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
@@ -395,56 +306,52 @@ body.toolbox-hidden .wrap{
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
font-weight: 900; font-weight: 900;
font-family: "SevenSegment", system-ui, sans-serif; letter-spacing: .08em;
letter-spacing: .12em;
text-transform: uppercase;
} }
.toolSpin{ .toolWide{
width: 64px; /* narrower */ width: 100%;
margin-top: 10px;
}
.toolArrow{
width: 72px;
font-size: 22px; font-size: 22px;
} }
.toolDec{ .toolDown{
background: rgba(255, 60, 60, .22); background: rgba(255,0,0,.16);
border-color: rgba(255, 60, 60, .40); border-color: rgba(255,0,0,.30);
}
.toolUp{
background: rgba(51,255,122,.16);
border-color: rgba(51,255,122,.30);
} }
.toolInc{ /* Random pulses only while running (class added via JS) */
background: rgba(51,255,122,.18); @keyframes pulseGreen {
border-color: rgba(51,255,122,.45); 0% { box-shadow: 0 0 0 rgba(51,255,122,0); }
50% { box-shadow: 0 0 18px rgba(51,255,122,.45); }
100% { box-shadow: 0 0 0 rgba(51,255,122,0); }
}
.toolRandom.running{
animation: pulseGreen .9s ease-in-out infinite;
border-color: rgba(51,255,122,.55);
} }
.toolsShiftRow{ /* Reset pulses red on hover INCLUDING background */
display:grid; @keyframes pulseRed {
grid-template-columns: 1fr 1fr; 0% { box-shadow: 0 0 0 rgba(255,0,0,0); background: rgba(255,0,0,.08); }
gap: 10px; 50% { box-shadow: 0 0 18px rgba(255,0,0,.35); background: rgba(255,0,0,.22); }
margin-bottom: 10px; 100% { box-shadow: 0 0 0 rgba(255,0,0,0); background: rgba(255,0,0,.08); }
}
.toolReset{
width: 100%;
height: 54px;
font-size: 14px;
}
/* Reset hover pulse (red) */
@keyframes pulseRed{
0% { box-shadow: 0 0 0 rgba(255,60,60,0.0); }
50% { box-shadow: 0 0 18px rgba(255,60,60,0.55), 0 0 34px rgba(255,60,60,0.25); }
100% { box-shadow: 0 0 0 rgba(255,60,60,0.0); }
} }
.toolReset:hover{ .toolReset:hover{
animation: pulseRed .75s ease-in-out infinite; animation: pulseRed .85s ease-in-out infinite;
border-color: rgba(255, 60, 60, .55); border-color: rgba(255,0,0,.40);
} }
/* --------------------------------- /* Bits */
Bits grid .bitsWrap{ margin-top: 22px; }
---------------------------------- */
.bitsWrap{
margin-top: 22px;
}
.bitsGrid{ .bitsGrid{
display:grid; display:grid;
@@ -454,7 +361,6 @@ body.toolbox-hidden .wrap{
padding-top: 18px; padding-top: 18px;
} }
/* Each bit tile */
.bit{ .bit{
display:flex; display:flex;
flex-direction:column; flex-direction:column;
@@ -464,60 +370,47 @@ body.toolbox-hidden .wrap{
text-align:center; text-align:center;
} }
/* Bulb emoji only (no circle), +25% larger */ /* Bulb (25% bigger) */
.bulb{ .bulb{
width:auto; width: 42px;
height:auto; height: 42px;
border:none;
background:transparent;
border-radius:0;
box-shadow:none;
display:flex; display:flex;
align-items:center; align-items:center;
justify-content:center; justify-content:center;
font-size: 26px;
font-size: 33px; /* ~25% up from ~26px */
line-height: 1; line-height: 1;
opacity: .45; opacity: .55;
background: transparent;
border: none;
}
.bulb::before{
content:"💡";
filter: grayscale(1); filter: grayscale(1);
} }
.bulb.on{
opacity: 1;
text-shadow: 0 0 14px rgba(255,216,107,.75), 0 0 26px rgba(255,216,107,.45);
}
.bulb.on::before{
filter: grayscale(0);
}
/* Weight label */ /* Bit values MUST NOT WRAP */
.bitVal{ .bitVal{
font-family:"DSEG7ClassicRegular", ui-monospace, monospace; font-family:"DSEG7ClassicRegular", ui-monospace, monospace;
font-size: 28px; /* keep readable */ font-size: 28px;
color: var(--text); color: var(--text);
opacity: .95; opacity: .95;
line-height: 1.05; line-height: 1;
min-height: 32px; min-height: 32px;
white-space: nowrap; /* IMPORTANT FIX */
/* prevent overlap: allow wrapping + constrain */
max-width: 90px;
white-space: normal;
overflow-wrap: anywhere;
text-align:center;
} }
/* Responsive */ /* Responsive */
@media (max-width: 980px){ @media (max-width: 980px){
.wrap{ max-width: 980px; } .topGrid{ grid-template-columns: 1fr; }
.bitsGrid{ grid-template-columns: repeat(6, minmax(90px, 1fr)); } .panelCol{ position: static; }
} }
@media (max-width: 720px){
.wrap{
padding-right: 20px; /* on small screens, don’t reserve fixed space */
}
.toolbox{
right: 10px;
width: min(var(--toolbox-width), calc(100vw - 20px));
}
.binaryValue{
max-width: calc(100vw - 40px);
}
}
@media (max-width: 520px){ @media (max-width: 520px){
.bitsGrid{ grid-template-columns: repeat(4, minmax(90px, 1fr)); } .bitsGrid{ grid-template-columns: repeat(4, minmax(90px, 1fr)); }
} }