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

Update to increment/decrement buttons and rearrangement of buttons.

Browse Source 
Page now broken...

Signed-off-by: Alexander Lyall <alex@adcm.uk>
This commit is contained in:
Alexander Lyall
2025-12-16 13:04:21 +00:00
parent ac585701a3
commit 8d701a7704
3 changed files with 555 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/pages/binary.astro
View File

@@ -1,29 +1,36 @@
--- ---
import BaseLayout from "../layouts/BaseLayout.astro";
import "../styles/binary.css"; import "../styles/binary.css";
// ✅ Correct Astro v5 way: bundle script from src/ and get its final URL
import binaryScriptUrl from "../scripts/binary.js?url";
--- ---
<BaseLayout title="Binary | Computing:Box"> <!doctype html>
<section class="binary-wrap"> <html lang="en">
<div class="topGrid"> <head>
<!-- LEFT: readout + main buttons --> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Binary | Computing:Box</title>
</head>
<body>
<!-- Your site header/footer should already be handled by your layout.
If you *don’t* have a layout, tell me and I’ll wire it in properly. -->
<main class="wrap">
<section class="topGrid">
<!-- LEFT: readout + buttons -->
<div> <div>
<div class="readout"> <div class="readout">
<div class="label">Denary</div> <div class="label">Denary</div>
<div id="denaryNumber" class="num denary">0</div> <div id="denaryNumber" class="num denaryValue">0</div>
<div class="label">Binary</div> <div class="label">Binary</div>
<pre id="binaryNumber" class="num binary" aria-label="Binary value">0</pre> <div id="binaryNumber" class="num binaryValue">0000 0000</div>
<!-- ORANGE: custom + shifts on separate lines --> <div class="controlsStack">
<div class="controls controls--twoRows">
<div class="controlsRow"> <div class="controlsRow">
<button class="btn btn--green" id="btnCustomBinary" type="button">Custom Binary</button> <button class="btn btnAccent" id="btnCustomBinary" type="button">Custom Binary</button>
<button class="btn btn--green" id="btnCustomDenary" type="button">Custom Denary</button> <button class="btn btnAccent" id="btnCustomDenary" type="button">Custom Denary</button>
</div> </div>
<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>
@@ -34,10 +41,12 @@ import binaryScriptUrl from "../scripts/binary.js?url";
<div class="divider"></div> <div class="divider"></div>
<!-- Bits render here --> <!-- Bits render here -->
<section class="bits" id="bitsGrid" aria-label="Bit switches"></section> <section class="bitsWrap" aria-label="Bit switches">
<div class="bitsGrid" id="bitsGrid"></div>
</section>
</div> </div>
<!-- RIGHT: red buttons go above/below this panel (not in the middle) --> <!-- RIGHT: mode + tools + bit width -->
<aside class="panelCol"> <aside class="panelCol">
<div class="card"> <div class="card">
<div class="cardTitle">Mode</div> <div class="cardTitle">Mode</div>
@@ -50,7 +59,7 @@ import binaryScriptUrl from "../scripts/binary.js?url";
<span class="slider"></span> <span class="slider"></span>
</label> </label>
<div class="toggleLabel" id="lblTwos">Two&apos;s complement</div> <div class="toggleLabel" id="lblTwos">Two&rsquo;s complement</div>
</div> </div>
<div class="hint" id="modeHint"> <div class="hint" id="modeHint">
@@ -58,18 +67,22 @@ import binaryScriptUrl from "../scripts/binary.js?url";
</div> </div>
</div> </div>
<!-- RED: extra buttons ABOVE bit width -->
<div class="card"> <div class="card">
<div class="cardTitle">Tools</div> <div class="cardTitle">Tools</div>
<div class="toolsGrid">
<button class="btn" id="btnClear" type="button">Clear</button> <!-- Spinner row: HORIZONTAL buttons, arrows only -->
<button class="btn btn--spin" id="btnMinus1" type="button">−1</button> <div class="toolRow">
<button class="btn btn--spin" id="btnPlus1" type="button">+1</button> <button class="toolBtn toolSpin" id="btnDec" type="button" aria-label="Decrement">▼</button>
<button class="btn" id="btnAutoRandom" type="button">Auto Random</button> <button class="toolBtn toolSpin" id="btnInc" type="button" aria-label="Increment">▲</button>
</div> </div>
<div class="hint">
Auto Random runs briefly then stops automatically. <!-- Reset + Random on SAME LINE -->
<div class="toolRow2">
<button class="toolBtn" id="btnClear" type="button">Reset</button>
<button class="toolBtn" id="btnRandom" type="button">Random</button>
</div> </div>
<div class="hint">Random runs briefly then stops automatically.</div>
</div> </div>
<div class="card"> <div class="card">
@@ -99,8 +112,10 @@ import binaryScriptUrl from "../scripts/binary.js?url";
<div class="hint">Minimum 1 bit, maximum 64 bits.</div> <div class="hint">Minimum 1 bit, maximum 64 bits.</div>
</div> </div>
</aside> </aside>
</div>
<script type="module" src={binaryScriptUrl}></script>
</section> </section>
</BaseLayout> </main>
<!-- IMPORTANT: This is the correct Astro/Vite way to reference a JS file in src/ -->
<script type="module" src={new URL("../scripts/binary.js", import.meta.url)}></script>
</body>
</html>

566
src/scripts/binary.js
View File

@@ -1,347 +1,353 @@
const bitsGrid = document.getElementById("bitsGrid"); // src/scripts/binary.js
const denaryEl = document.getElementById("denaryNumber");
const binaryEl = document.getElementById("binaryNumber");
const modeToggle = document.getElementById("modeToggle"); document.addEventListener("DOMContentLoaded", () => {
const modeHint = document.getElementById("modeHint"); const bitsGrid = document.getElementById("bitsGrid");
const denaryEl = document.getElementById("denaryNumber");
const binaryEl = document.getElementById("binaryNumber");
const bitsInput = document.getElementById("bitsInput"); const modeToggle = document.getElementById("modeToggle");
const btnBitsUp = document.getElementById("btnBitsUp"); const modeHint = document.getElementById("modeHint");
const btnBitsDown = document.getElementById("btnBitsDown");
const btnShiftLeft = document.getElementById("btnShiftLeft"); const bitsInput = document.getElementById("bitsInput");
const btnShiftRight = document.getElementById("btnShiftRight"); const btnBitsUp = document.getElementById("btnBitsUp");
const btnCustomBinary = document.getElementById("btnCustomBinary"); const btnBitsDown = document.getElementById("btnBitsDown");
const btnCustomDenary = document.getElementById("btnCustomDenary");
const btnClear = document.getElementById("btnClear"); const btnCustomBinary = document.getElementById("btnCustomBinary");
const btnMinus1 = document.getElementById("btnMinus1"); const btnCustomDenary = document.getElementById("btnCustomDenary");
const btnPlus1 = document.getElementById("btnPlus1"); const btnShiftLeft = document.getElementById("btnShiftLeft");
const btnAutoRandom = document.getElementById("btnAutoRandom"); const btnShiftRight = document.getElementById("btnShiftRight");
let bitCount = clampInt(Number(bitsInput?.value ?? 8), 1, 64); const btnClear = document.getElementById("btnClear");
let isTwos = Boolean(modeToggle?.checked); const btnRandom = document.getElementById("btnRandom");
const btnInc = document.getElementById("btnInc");
const btnDec = document.getElementById("btnDec");
let bits = new Array(bitCount).fill(false); // MSB at index 0 let bitCount = clampInt(Number(bitsInput.value || 8), 1, 64);
let autoTimer = null; let isTwos = false;
function clampInt(n, min, max){ // Bits stored MSB -> LSB (index 0 is MSB)
let bits = new Array(bitCount).fill(false);
// Random timer
let randomTimer = null;
function clampInt(n, min, max) {
n = Number(n); n = Number(n);
if (!Number.isFinite(n)) return min; if (!Number.isFinite(n)) return min;
n = Math.trunc(n); n = Math.floor(n);
return Math.max(min, Math.min(max, n)); return Math.max(min, Math.min(max, n));
}
/* ----------------------------
Label values (MSB..LSB)
Unsigned: [2^(n-1) ... 1]
Two's: [-2^(n-1), 2^(n-2) ... 1]
----------------------------- */
function getLabelValues(){
const vals = [];
for (let i = 0; i < bitCount; i++){
const pow = bitCount - 1 - i;
let v = 2 ** pow;
if (isTwos && i === 0) v = -v; // ✅ MSB label becomes negative
vals.push(v);
} }
return vals;
}
function buildBits(){ function pow2(exp) {
// wrap every 8 bits // exp can be up to 63; JS Number is fine for display and basic use here
bitsGrid.style.setProperty("--cols", String(Math.min(8, bitCount))); return 2 ** exp;
}
function buildBits(count) {
bitsGrid.innerHTML = ""; bitsGrid.innerHTML = "";
const labelValues = getLabelValues(); bits = new Array(count).fill(false);
bitCount = count;
// Grid wrap at 8 bits per row; also center for small counts
if (count < 8) {
bitsGrid.classList.add("bitsFew");
bitsGrid.style.setProperty("--cols", String(count));
} else {
bitsGrid.classList.remove("bitsFew");
bitsGrid.style.removeProperty("--cols");
}
for (let i = 0; i < count; i++) {
const isMSB = i === 0;
const valueUnsigned = pow2(count - 1 - i); // MSB is 2^(n-1)
for (let i = 0; i < bitCount; i++){
const bit = document.createElement("div"); const bit = document.createElement("div");
bit.className = "bit"; bit.className = "bit";
bit.innerHTML = ` bit.innerHTML = `
<div class="bulb" id="bulb-${i}" aria-hidden="true">💡</div> <div class="bulb" id="bulb-${i}" aria-hidden="true"></div>
<div class="bitVal num" id="label-${i}">${labelValues[i]}</div> <div class="bitVal" id="label-${i}">${valueUnsigned}</div>
<label class="switch" aria-label="Toggle bit"> <label class="switch" aria-label="Toggle bit ${i}">
<input type="checkbox" data-index="${i}"> <input type="checkbox" data-index="${i}">
<span class="slider"></span> <span class="slider"></span>
</label> </label>
`; `;
bitsGrid.appendChild(bit); bitsGrid.appendChild(bit);
} }
// hook switches hookSwitches();
updateModeLabels();
updateReadout();
}
function hookSwitches() {
bitsGrid.querySelectorAll('input[type="checkbox"][data-index]').forEach((input) => { bitsGrid.querySelectorAll('input[type="checkbox"][data-index]').forEach((input) => {
input.addEventListener("change", () => { input.addEventListener("change", () => {
const idx = Number(input.dataset.index); const i = Number(input.dataset.index);
bits[idx] = input.checked; bits[i] = input.checked;
updateUI(); updateReadout();
}); });
}); });
updateUI();
}
function setLabels(){
const labelValues = getLabelValues();
for (let i = 0; i < bitCount; i++){
const el = document.getElementById(`label-${i}`);
if (el) el.textContent = String(labelValues[i]);
} }
}
function bitsToUnsigned(){ function updateModeLabels() {
let n = 0; isTwos = Boolean(modeToggle.checked);
for (let i = 0; i < bitCount; i++){
if (!bits[i]) continue;
const pow = bitCount - 1 - i;
n += 2 ** pow;
}
return n;
}
function bitsToTwos(){ modeHint.textContent = isTwos
// Two's complement interpretation ? "Tip: In two’s complement, the left-most bit (MSB) represents a negative value."
// value = -MSB*2^(n-1) + sum(other set bits) : "Tip: In unsigned binary, all bits represent positive values.";
let n = 0;
for (let i = 0; i < bitCount; i++){
if (!bits[i]) continue;
const pow = bitCount - 1 - i;
const v = 2 ** pow;
if (i === 0) n -= v;
else n += v;
}
return n;
}
function getCurrentValue(){ // Update the labels so the MSB shows negative weight in two's complement
return isTwos ? bitsToTwos() : bitsToUnsigned(); for (let i = 0; i < bitCount; i++) {
} const label = document.getElementById(`label-${i}`);
if (!label) continue;
function setFromUnsignedValue(n){ const unsignedWeight = pow2(bitCount - 1 - i);
// clamp to range of bitCount
const max = (2 ** bitCount) - 1;
n = clampInt(n, 0, max);
for (let i = 0; i < bitCount; i++){ if (isTwos && i === 0) {
const pow = bitCount - 1 - i; // MSB weight is negative
const v = 2 ** pow; label.textContent = `-${unsignedWeight}`;
if (n >= v){
bits[i] = true;
n -= v;
} else { } else {
bits[i] = false; label.textContent = `${unsignedWeight}`;
} }
} }
syncSwitchesAndBulbs();
updateUI(false);
}
function setFromTwosValue(n){
// represent in two's complement with bitCount bits:
// allowed range: [-2^(n-1), 2^(n-1)-1]
const min = -(2 ** (bitCount - 1));
const max = (2 ** (bitCount - 1)) - 1;
n = clampInt(n, min, max);
// Convert to unsigned representation modulo 2^bitCount
const mod = 2 ** bitCount;
let u = ((n % mod) + mod) % mod;
// then set bits from unsigned u
for (let i = 0; i < bitCount; i++){
const pow = bitCount - 1 - i;
const v = 2 ** pow;
if (u >= v){
bits[i] = true;
u -= v;
} else {
bits[i] = false;
} }
function formatBinaryString(raw) {
// group every 4 for readability (keeps your "0000 0000" look)
return raw.replace(/(.{4})/g, "$1 ").trim();
} }
syncSwitchesAndBulbs();
updateUI(false);
}
function formatBinary(groupsOf = 4){ function computeUnsignedValue() {
const raw = bits.map(b => (b ? "1" : "0")).join(""); let value = 0;
// group for readability (keeps your “wrap every 8 bits” layout for switches; for (let i = 0; i < bitCount; i++) {
// this just formats the readout) if (!bits[i]) continue;
let out = ""; value += pow2(bitCount - 1 - i);
for (let i = 0; i < raw.length; i++){ }
out += raw[i]; return value;
const isLast = i === raw.length - 1;
if (!isLast && (i + 1) % groupsOf === 0) out += " ";
} }
return out.trim();
}
function syncSwitchesAndBulbs(){ function computeTwosValue() {
// ✅ Bulbs always update (unsigned OR two's) // If MSB is 0 -> same as unsigned
bitsGrid.querySelectorAll('input[type="checkbox"][data-index]').forEach((input) => { const msb = bits[0] ? 1 : 0;
const idx = Number(input.dataset.index); let value = computeUnsignedValue();
input.checked = Boolean(bits[idx]); if (msb === 1) {
}); // subtract 2^n to get signed negative value
value -= pow2(bitCount);
}
return value;
}
for (let i = 0; i < bitCount; i++){ function updateReadout() {
// Binary string (MSB->LSB)
const rawBinary = bits.map((b) => (b ? "1" : "0")).join("");
binaryEl.textContent = formatBinaryString(rawBinary);
// Denary value based on mode
const denary = isTwos ? computeTwosValue() : computeUnsignedValue();
denaryEl.textContent = String(denary);
// Bulbs MUST update in BOTH modes (this was your reported bug)
for (let i = 0; i < bitCount; i++) {
const bulb = document.getElementById(`bulb-${i}`); const bulb = document.getElementById(`bulb-${i}`);
if (bulb) bulb.classList.toggle("on", Boolean(bits[i])); if (!bulb) continue;
bulb.classList.toggle("on", bits[i]);
} }
}
function updateUI(sync = true){
if (sync) syncSwitchesAndBulbs();
// labels update when mode changes
setLabels();
// readouts
const value = getCurrentValue();
denaryEl.textContent = String(value);
binaryEl.textContent = formatBinary(4);
// hint
if (isTwos){
modeHint.textContent = "Tip: In two’s complement, the left-most bit (MSB) represents a negative value.";
} else {
modeHint.textContent = "Tip: In unsigned binary, all bits represent positive values.";
} }
}
/* ---------------------------- function syncInputs() {
Controls bitsGrid.querySelectorAll('input[type="checkbox"][data-index]').forEach((input) => {
----------------------------- */ const i = Number(input.dataset.index);
btnShiftLeft?.addEventListener("click", () => { input.checked = Boolean(bits[i]);
// shift left: drop MSB, append 0 to LSB });
updateReadout();
}
function setAllBits(off = true) {
bits = bits.map(() => !off);
syncInputs();
}
function shiftLeft() {
// left shift: drop MSB, append 0 at LSB
bits.shift(); bits.shift();
bits.push(false); bits.push(false);
updateUI(); syncInputs();
}); }
btnShiftRight?.addEventListener("click", () => { function shiftRight() {
// shift right: drop LSB, insert 0 at MSB // right shift: drop LSB, prepend 0 at MSB
bits.pop(); bits.pop();
bits.unshift(false); bits.unshift(false);
updateUI(); syncInputs();
});
btnClear?.addEventListener("click", () => {
bits = new Array(bitCount).fill(false);
updateUI();
});
btnMinus1?.addEventListener("click", () => {
const v = getCurrentValue();
if (isTwos) setFromTwosValue(v - 1);
else setFromUnsignedValue(v - 1);
});
btnPlus1?.addEventListener("click", () => {
const v = getCurrentValue();
if (isTwos) setFromTwosValue(v + 1);
else setFromUnsignedValue(v + 1);
});
btnAutoRandom?.addEventListener("click", () => {
// stop if already running
if (autoTimer){
clearInterval(autoTimer);
autoTimer = null;
btnAutoRandom.textContent = "Auto Random";
return;
} }
btnAutoRandom.textContent = "Stop Random"; function setFromBinary(input) {
const clean = String(input).replace(/\s+/g, "");
// run briefly then stop automatically if (!/^[01]+$/.test(clean)) return false;
const start = Date.now();
const durationMs = 2200; // auto stop
autoTimer = setInterval(() => {
const now = Date.now();
if (now - start > durationMs){
clearInterval(autoTimer);
autoTimer = null;
btnAutoRandom.textContent = "Auto Random";
return;
}
// random within correct range for current mode
if (isTwos){
const min = -(2 ** (bitCount - 1));
const max = (2 ** (bitCount - 1)) - 1;
const n = Math.floor(Math.random() * (max - min + 1)) + min;
setFromTwosValue(n);
} else {
const max = (2 ** bitCount) - 1;
const n = Math.floor(Math.random() * (max + 1));
setFromUnsignedValue(n);
}
}, 90);
});
btnCustomBinary?.addEventListener("click", () => {
const v = prompt(`Enter a ${bitCount}-bit binary number (0/1):`);
if (v === null) return;
const clean = v.replace(/\s+/g, "");
if (!/^[01]+$/.test(clean)){
alert("Invalid binary. Use only 0 and 1.");
return;
}
const padded = clean.slice(-bitCount).padStart(bitCount, "0"); const padded = clean.slice(-bitCount).padStart(bitCount, "0");
bits = [...padded].map(ch => ch === "1"); bits = [...padded].map((ch) => ch === "1");
updateUI(); syncInputs();
}); return true;
}
btnCustomDenary?.addEventListener("click", () => { function setFromDenary(input) {
const v = prompt(isTwos let n = Number(input);
? `Enter a denary number (${-(2 ** (bitCount - 1))} to ${(2 ** (bitCount - 1)) - 1}):` if (!Number.isInteger(n)) return false;
: `Enter a denary number (0 to ${(2 ** bitCount) - 1}):`
);
if (v === null) return;
const n = Number(v); // For unsigned mode: allow 0..(2^n - 1)
if (!Number.isFinite(n) || !Number.isInteger(n)){ // For two's mode: allow -(2^(n-1))..(2^(n-1)-1)
alert("Invalid denary. Enter a whole number."); const maxUnsigned = pow2(bitCount) - 1;
const minTwos = -pow2(bitCount - 1);
const maxTwos = pow2(bitCount - 1) - 1;
if (!isTwos) {
if (n < 0 || n > maxUnsigned) return false;
// build bits from unsigned n
bits = new Array(bitCount).fill(false);
for (let i = 0; i < bitCount; i++) {
const weight = pow2(bitCount - 1 - i);
if (n >= weight) {
bits[i] = true;
n -= weight;
}
}
syncInputs();
return true;
}
// Two's complement: convert signed integer to n-bit representation
if (n < minTwos || n > maxTwos) return false;
let u = n;
if (u < 0) u = pow2(bitCount) + u; // wrap into unsigned range
const bin = u.toString(2).padStart(bitCount, "0");
bits = [...bin].map((ch) => ch === "1");
syncInputs();
return true;
}
function increment() {
// increment the underlying value in current mode, wrap appropriately
if (!isTwos) {
const max = pow2(bitCount) - 1;
let v = computeUnsignedValue();
v = (v + 1) % (max + 1);
setFromDenary(v);
return; return;
} }
if (isTwos) setFromTwosValue(n); const min = -pow2(bitCount - 1);
else setFromUnsignedValue(n); const max = pow2(bitCount - 1) - 1;
}); let v = computeTwosValue();
v = v + 1;
if (v > max) v = min; // wrap
setFromDenary(v);
}
/* ---------------------------- function decrement() {
Mode + Bit width if (!isTwos) {
----------------------------- */ const max = pow2(bitCount) - 1;
modeToggle?.addEventListener("change", () => { let v = computeUnsignedValue();
isTwos = Boolean(modeToggle.checked); v = v - 1;
// keep the same underlying bit pattern; just reinterpret and relabel if (v < 0) v = max;
updateUI(false); setFromDenary(v);
}); return;
}
btnBitsUp?.addEventListener("click", () => { const min = -pow2(bitCount - 1);
bitCount = clampInt(bitCount + 1, 1, 64); const max = pow2(bitCount - 1) - 1;
bitsInput.value = String(bitCount); let v = computeTwosValue();
bits = new Array(bitCount).fill(false); v = v - 1;
buildBits(); if (v < min) v = max;
}); setFromDenary(v);
}
btnBitsDown?.addEventListener("click", () => { function startAutoRandom() {
bitCount = clampInt(bitCount - 1, 1, 64); stopAutoRandom();
bitsInput.value = String(bitCount);
bits = new Array(bitCount).fill(false);
buildBits();
});
bitsInput?.addEventListener("change", () => { const durationMs = 1200; // runs briefly then stops
bitCount = clampInt(Number(bitsInput.value), 1, 64); const tickMs = 90;
bitsInput.value = String(bitCount);
bits = new Array(bitCount).fill(false);
buildBits();
});
/* ---------------------------- const start = Date.now();
Init randomTimer = window.setInterval(() => {
----------------------------- */ // pick a random representable number depending on mode
buildBits(); let target;
if (!isTwos) {
target = Math.floor(Math.random() * (pow2(bitCount)));
} else {
const min = -pow2(bitCount - 1);
const max = pow2(bitCount - 1) - 1;
target = min + Math.floor(Math.random() * (max - min + 1));
}
setFromDenary(target);
if (Date.now() - start >= durationMs) stopAutoRandom();
}, tickMs);
}
function stopAutoRandom() {
if (randomTimer !== null) {
window.clearInterval(randomTimer);
randomTimer = null;
}
}
// MODE toggle
modeToggle.addEventListener("change", () => {
updateModeLabels();
updateReadout();
});
// Bit width
btnBitsUp.addEventListener("click", () => {
const next = clampInt(bitCount + 1, 1, 64);
bitsInput.value = String(next);
buildBits(next);
});
btnBitsDown.addEventListener("click", () => {
const next = clampInt(bitCount - 1, 1, 64);
bitsInput.value = String(next);
buildBits(next);
});
bitsInput.addEventListener("change", () => {
const next = clampInt(bitsInput.value, 1, 64);
bitsInput.value = String(next);
buildBits(next);
});
// Buttons
btnShiftLeft.addEventListener("click", shiftLeft);
btnShiftRight.addEventListener("click", shiftRight);
btnCustomBinary.addEventListener("click", () => {
const val = prompt(`Enter a ${bitCount}-bit binary number:`);
if (val === null) return;
if (!setFromBinary(val)) alert("Invalid binary input (use only 0 and 1).");
});
btnCustomDenary.addEventListener("click", () => {
const modeRange = isTwos
? `(${ -pow2(bitCount - 1) } to ${ pow2(bitCount - 1) - 1 })`
: `(0 to ${ pow2(bitCount) - 1 })`;
const val = prompt(`Enter a denary number ${modeRange}:`);
if (val === null) return;
if (!setFromDenary(val)) alert("Invalid denary input for the current mode/bit width.");
});
btnClear.addEventListener("click", () => setAllBits(true));
btnRandom.addEventListener("click", startAutoRandom);
btnInc.addEventListener("click", increment);
btnDec.addEventListener("click", decrement);
// INIT
modeToggle.checked = false;
updateModeLabels();
buildBits(bitCount);
});

234
src/styles/binary.css
View File

@@ -1,4 +1,14 @@
/* DSEG7ClassicRegular font */ :root{
--bg: #1f2027;
--panel: #22242d;
--panel2: rgba(255,255,255,.04);
--text: #e8e8ee;
--muted: #a9acb8;
--accent: #33ff7a;
--accent-dim: rgba(51,255,122,.15);
--line: rgba(255,255,255,.12);
}
@font-face{ @font-face{
font-family: "DSEG7ClassicRegular"; font-family: "DSEG7ClassicRegular";
src: src:
@@ -9,8 +19,17 @@
font-display: swap; font-display: swap;
} }
.binary-wrap{ body{
padding-top: 6px; margin:0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background: var(--bg);
color: var(--text);
}
.wrap{
max-width: 1200px;
margin: 0 auto;
padding: 32px 20px 60px;
} }
.topGrid{ .topGrid{
@@ -28,10 +47,10 @@
.label{ .label{
letter-spacing: .18em; letter-spacing: .18em;
font-weight: 800; font-weight: 700;
color: var(--muted); color: var(--muted);
text-transform: uppercase; text-transform: uppercase;
font-size: 13px; font-size: 14px;
margin-top: 10px; margin-top: 10px;
} }
@@ -42,41 +61,33 @@
text-shadow: 0 0 18px var(--accent-dim); text-shadow: 0 0 18px var(--accent-dim);
} }
.denary{ .denaryValue{
font-size: 72px; /* smaller */ font-size: 70px; /* smaller than before */
line-height: 1.0; line-height: 1.0;
margin: 6px 0 10px; margin: 6px 0 10px;
} }
.binary{ .binaryValue{
font-size: 46px; /* smaller */ font-size: 52px; /* smaller than before */
letter-spacing: .12em; letter-spacing: .12em;
line-height: 1.15; line-height: 1.0;
margin: 6px 0 14px; margin: 6px 0 14px;
white-space: pre-wrap; white-space: pre; /* keep spaces */
word-break: break-word;
display:inline-block;
text-align:center;
} }
.controls{ .controlsStack{
margin-top: 8px; margin-top: 10px;
display:flex; display:flex;
justify-content:center; flex-direction:column;
gap: 12px;
flex-wrap: wrap;
}
.controls--twoRows{
flex-direction: column;
gap: 10px; gap: 10px;
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{
@@ -85,29 +96,19 @@
color: #fff; color: #fff;
padding: 12px 14px; padding: 12px 14px;
border-radius: 12px; border-radius: 12px;
font-weight: 800; font-weight: 700;
cursor: pointer; cursor: pointer;
min-width: 160px; min-width: 170px;
} }
.btn:active{ transform: translateY(1px); } .btn:active{ transform: translateY(1px); }
.btn--green{ .btnAccent{
background: rgba(51,255,122,.16); background: rgba(51,255,122,.18);
border-color: rgba(51,255,122,.45); border-color: rgba(51,255,122,.45);
} }
.btn--green:hover{
background: rgba(51,255,122,.22);
}
.btn--spin{
min-width: 120px;
font-size: 18px; /* bigger */
}
.divider{ .divider{
margin-top: 22px; margin-top: 26px;
border-top: 1px solid var(--line); border-top: 1px solid var(--line);
} }
@@ -118,15 +119,15 @@
} }
.card{ .card{
background: var(--panel); background: var(--panel2);
border: 1px solid var(--panel-border); border: 1px solid rgba(255,255,255,.10);
border-radius: 14px; border-radius: 14px;
padding: 14px; padding: 14px;
} }
.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;
@@ -149,16 +150,17 @@
.toggleLabel{ .toggleLabel{
color: var(--text); color: var(--text);
font-weight: 800; font-weight: 700;
font-size: 14px; font-size: 14px;
} }
/* Shared toggle switch (mode + bit switches) */
.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;
@@ -170,19 +172,19 @@
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);
@@ -193,19 +195,47 @@
background: var(--accent); background: var(--accent);
} }
.bitWidthRow{ /* Tools card layout */
.toolRow{
display:grid; display:grid;
grid-template-columns:44px 1fr 44px; grid-template-columns: 1fr 1fr;
gap:10px; gap: 10px;
align-items:center; margin-bottom: 10px;
} }
.toolRow2{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.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;
}
.toolSpin{
font-size: 22px; /* bigger spin feature */
}
/* Bit width control */
.bitWidthRow{
display:grid;
grid-template-columns: 44px 1fr 44px;
gap: 10px;
align-items:center;
}
.miniBtn{ .miniBtn{
height:44px; height:44px;
width:44px; width:44px;
border-radius:12px; 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; cursor:pointer;
font-weight:900; font-weight:900;
@@ -213,8 +243,8 @@
} }
.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);
border-radius:12px; border-radius:12px;
padding:10px 12px; padding:10px 12px;
display:flex; display:flex;
@@ -222,22 +252,20 @@
justify-content:space-between; justify-content:space-between;
gap:12px; gap:12px;
} }
.bitInputLabel{ .bitInputLabel{
color: var(--muted); color:var(--muted);
font-size:12px; font-size:12px;
font-weight:900; font-weight:800;
letter-spacing:.18em; letter-spacing:.18em;
text-transform:uppercase; text-transform:uppercase;
} }
.bitInput{ .bitInput{
width:86px; width:86px;
text-align:right; text-align:right;
background: transparent; background:transparent;
border: none; border:none;
outline: none; outline:none;
color: var(--accent); color:var(--accent);
font-family:"DSEG7ClassicRegular", ui-monospace, monospace; font-family:"DSEG7ClassicRegular", ui-monospace, monospace;
font-size:28px; font-size:28px;
} }
@@ -247,17 +275,17 @@
margin:0; margin:0;
} }
/* Bits: wrap every 8 */ /* Bits area (wrap every 8 bits, centered) */
.bits{ .bitsWrap{
--cols: 8; margin-top: 22px;
margin-top: 26px; }
padding-top: 18px;
.bitsGrid{
display:grid; display:grid;
grid-template-columns: repeat(var(--cols), 90px);
justify-content: center; /* centres when < 8 too */
gap: 18px; gap: 18px;
align-items:end; justify-content:center;
text-align:center; grid-template-columns: repeat(8, minmax(90px, 1fr)); /* wraps at 8 */
padding-top: 18px;
} }
.bit{ .bit{
@@ -266,32 +294,60 @@
align-items:center; align-items:center;
gap: 10px; gap: 10px;
padding: 8px 4px; padding: 8px 4px;
text-align:center;
} }
/* Bulb emoji bigger */ /* “Bulb like 💡” but consistent + bigger */
.bulb{ .bulb{
font-size: 26px; /* bigger */ width: 34px; /* bigger */
height: 34px; /* bigger */
border-radius: 50%;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.12);
box-shadow: none;
display:flex;
align-items:center;
justify-content:center;
font-size: 20px;
line-height: 1; line-height: 1;
opacity: .55;
}
.bulb::before{
content: "💡";
filter: grayscale(1); filter: grayscale(1);
opacity: .35;
transform: translateY(2px);
} }
.bulb.on{ .bulb.on{
filter: grayscale(0);
opacity: 1; opacity: 1;
text-shadow: 0 0 16px rgba(255,216,107,.55); background: rgba(255,216,107,.18);
border-color: rgba(255,216,107,.55);
box-shadow: 0 0 18px rgba(255,216,107,.45);
}
.bulb.on::before{
filter: grayscale(0);
} }
/* Bit value (MSB becomes negative in two’s mode via JS label text) */
.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;
min-height: 34px; min-height: 32px;
}
/* Make sure small bit counts still look centered/nice */
.bitsGrid.bitsFew{
grid-template-columns: repeat(var(--cols, 4), minmax(90px, 1fr));
} }
@media (max-width: 980px){ @media (max-width: 980px){
.topGrid{ grid-template-columns: 1fr; } .topGrid{ grid-template-columns: 1fr; }
.denary{ font-size: 62px; } .denaryValue{ font-size: 62px; }
.binary{ font-size: 40px; } .binaryValue{ font-size: 46px; }
}
@media (max-width: 520px){
.btn{ min-width: 150px; }
.bitsGrid{ grid-template-columns: repeat(4, minmax(90px, 1fr)); }
} }