You've already forked computing-box
feat(v2-alpha): refactor binary simulator and introduce shared site layout
- Rewrite binary simulator with unified unsigned and two’s complement logic - Support dynamic bit widths from 4 to 64 with LSB-preserving resizing - Replace legacy unsigned-only scripts with a single maintainable implementation - Extract binary styles into dedicated CSS and add global site styling - Introduce shared header, footer, and base layout components - Migrate Binary page to BaseLayout and modular assets Signed-off-by: Alexander Lyall <alex@adcm.uk>
This commit is contained in:
321
public/js/binary.js
Normal file
321
public/js/binary.js
Normal file
@@ -0,0 +1,321 @@
|
||||
// Binary simulator: unsigned + two's complement, 4–64 bits.
|
||||
// Key fixes:
|
||||
// - CSS moved to /public so dynamically-created switches & bulbs are styled.
|
||||
// - Bits grid wraps into rows of 8 (CSS).
|
||||
// - Binary readout wraps every 8 bits (JS -> adds \n).
|
||||
|
||||
const bitsGrid = document.getElementById("bitsGrid");
|
||||
const denaryEl = document.getElementById("denaryNumber");
|
||||
const binaryEl = document.getElementById("binaryNumber");
|
||||
|
||||
const modeToggle = document.getElementById("modeToggle");
|
||||
const modeHint = document.getElementById("modeHint");
|
||||
|
||||
const bitsInput = document.getElementById("bitsInput");
|
||||
const btnUp = document.getElementById("btnBitsUp");
|
||||
const btnDown = document.getElementById("btnBitsDown");
|
||||
|
||||
const btnShiftL = document.getElementById("btnShiftLeft");
|
||||
const btnShiftR = document.getElementById("btnShiftRight");
|
||||
const btnCustBin = document.getElementById("btnCustomBinary");
|
||||
const btnCustDen = document.getElementById("btnCustomDenary");
|
||||
|
||||
let bitCount = clampInt(Number(bitsInput.value || 8), 4, 64);
|
||||
bitsInput.value = String(bitCount);
|
||||
|
||||
let isTwos = false;
|
||||
|
||||
// bits[0] = MSB, bits[bitCount-1] = LSB
|
||||
let bits = new Array(bitCount).fill(false);
|
||||
|
||||
/* -----------------------------
|
||||
Helpers
|
||||
----------------------------- */
|
||||
function clampInt(n, min, max){
|
||||
n = Number(n);
|
||||
if (!Number.isFinite(n)) return min;
|
||||
n = Math.floor(n);
|
||||
return Math.max(min, Math.min(max, n));
|
||||
}
|
||||
|
||||
function maxUnsigned(nBits){
|
||||
// nBits up to 64 -> use BigInt for correctness
|
||||
return (1n << BigInt(nBits)) - 1n;
|
||||
}
|
||||
|
||||
function rangeTwos(nBits){
|
||||
const min = -(1n << BigInt(nBits - 1));
|
||||
const max = (1n << BigInt(nBits - 1)) - 1n;
|
||||
return { min, max };
|
||||
}
|
||||
|
||||
function bitsToBigIntUnsigned(){
|
||||
let v = 0n;
|
||||
for (let i = 0; i < bitCount; i++){
|
||||
v = (v << 1n) + (bits[i] ? 1n : 0n);
|
||||
}
|
||||
return v;
|
||||
}
|
||||
|
||||
function bitsToBigIntTwos(){
|
||||
// Interpret current bit pattern as signed two's complement.
|
||||
const unsigned = bitsToBigIntUnsigned();
|
||||
const signBit = bits[0] ? 1n : 0n;
|
||||
|
||||
if (signBit === 0n) return unsigned; // positive
|
||||
|
||||
// negative: unsigned - 2^n
|
||||
const mod = 1n << BigInt(bitCount);
|
||||
return unsigned - mod;
|
||||
}
|
||||
|
||||
function bigIntToBitsUnsigned(v){
|
||||
// v assumed 0..2^n-1
|
||||
const out = new Array(bitCount).fill(false);
|
||||
let x = BigInt(v);
|
||||
for (let i = bitCount - 1; i >= 0; i--){
|
||||
out[i] = (x & 1n) === 1n;
|
||||
x >>= 1n;
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function bigIntToBitsTwos(v){
|
||||
// v assumed in signed range; convert to 0..2^n-1 representation
|
||||
const mod = 1n << BigInt(bitCount);
|
||||
let x = BigInt(v);
|
||||
if (x < 0n) x = mod + x;
|
||||
return bigIntToBitsUnsigned(x);
|
||||
}
|
||||
|
||||
function formatBinaryForReadout(){
|
||||
// Wrap every 8 bits into a new line; keep spaces between groups.
|
||||
const raw = bits.map(b => (b ? "1" : "0")).join("");
|
||||
const groupsOf8 = raw.match(/.{1,8}/g) || [raw];
|
||||
return groupsOf8.join("\n");
|
||||
}
|
||||
|
||||
/* -----------------------------
|
||||
UI build
|
||||
----------------------------- */
|
||||
function buildBitsGrid(){
|
||||
bitsGrid.innerHTML = "";
|
||||
|
||||
for (let i = 0; i < bitCount; i++){
|
||||
const weightUnsigned = 1n << BigInt(bitCount - 1 - i);
|
||||
const isMSB = i === 0;
|
||||
|
||||
const bitEl = document.createElement("div");
|
||||
bitEl.className = "bit";
|
||||
|
||||
const bulb = document.createElement("div");
|
||||
bulb.className = "bulb";
|
||||
bulb.id = `bulb-${i}`;
|
||||
bulb.setAttribute("aria-hidden", "true");
|
||||
|
||||
const val = document.createElement("div");
|
||||
val.className = "bitVal";
|
||||
// if in two's complement, show MSB as negative label visually
|
||||
if (isTwos && isMSB) val.classList.add("msbNeg");
|
||||
val.textContent = weightUnsigned.toString(); // show magnitude only ( "-" is via CSS )
|
||||
|
||||
const label = document.createElement("label");
|
||||
label.className = "switch";
|
||||
label.setAttribute("aria-label", `Toggle bit ${i + 1}`);
|
||||
|
||||
const input = document.createElement("input");
|
||||
input.type = "checkbox";
|
||||
input.dataset.index = String(i);
|
||||
|
||||
const slider = document.createElement("span");
|
||||
slider.className = "slider";
|
||||
|
||||
label.appendChild(input);
|
||||
label.appendChild(slider);
|
||||
|
||||
bitEl.appendChild(bulb);
|
||||
bitEl.appendChild(val);
|
||||
bitEl.appendChild(label);
|
||||
|
||||
bitsGrid.appendChild(bitEl);
|
||||
}
|
||||
|
||||
// Hook listeners after build
|
||||
bitsGrid.querySelectorAll('input[type="checkbox"][data-index]').forEach(input => {
|
||||
input.addEventListener("change", () => {
|
||||
const idx = Number(input.dataset.index);
|
||||
bits[idx] = input.checked;
|
||||
updateAll();
|
||||
});
|
||||
});
|
||||
|
||||
syncInputsToBits();
|
||||
updateAll();
|
||||
}
|
||||
|
||||
function syncInputsToBits(){
|
||||
bitsGrid.querySelectorAll('input[type="checkbox"][data-index]').forEach(input => {
|
||||
const idx = Number(input.dataset.index);
|
||||
input.checked = !!bits[idx];
|
||||
});
|
||||
}
|
||||
|
||||
function syncBulbsToBits(){
|
||||
for (let i = 0; i < bitCount; i++){
|
||||
const bulb = document.getElementById(`bulb-${i}`);
|
||||
if (bulb) bulb.classList.toggle("on", !!bits[i]);
|
||||
}
|
||||
}
|
||||
|
||||
function updateModeHint(){
|
||||
modeHint.textContent = isTwos
|
||||
? "Tip: In two’s complement, the left-most bit (MSB) represents a negative value."
|
||||
: "Tip: In unsigned binary, all bits represent positive values.";
|
||||
}
|
||||
|
||||
function updateAll(){
|
||||
const denary = isTwos ? bitsToBigIntTwos() : bitsToBigIntUnsigned();
|
||||
denaryEl.textContent = denary.toString();
|
||||
binaryEl.textContent = formatBinaryForReadout();
|
||||
syncBulbsToBits();
|
||||
}
|
||||
|
||||
/* -----------------------------
|
||||
Bit-count changes (preserve LSBs)
|
||||
----------------------------- */
|
||||
function setBitCount(newCount){
|
||||
newCount = clampInt(newCount, 4, 64);
|
||||
if (newCount === bitCount) return;
|
||||
|
||||
// preserve LSB-aligned pattern:
|
||||
// take from the right end of old bits, pad on the left with zeros.
|
||||
const old = bits.slice();
|
||||
const newBits = new Array(newCount).fill(false);
|
||||
|
||||
const take = Math.min(bitCount, newCount);
|
||||
for (let i = 0; i < take; i++){
|
||||
// copy from LSB side
|
||||
newBits[newCount - 1 - i] = old[bitCount - 1 - i];
|
||||
}
|
||||
|
||||
bitCount = newCount;
|
||||
bits = newBits;
|
||||
bitsInput.value = String(bitCount);
|
||||
|
||||
buildBitsGrid(); // rebuild with correct styling + rows
|
||||
}
|
||||
|
||||
/* -----------------------------
|
||||
Custom input
|
||||
----------------------------- */
|
||||
function requestBinary(){
|
||||
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 input. Use only 0 and 1.");
|
||||
return;
|
||||
}
|
||||
|
||||
const padded = clean.slice(-bitCount).padStart(bitCount, "0");
|
||||
bits = [...padded].map(ch => ch === "1");
|
||||
syncInputsToBits();
|
||||
updateAll();
|
||||
}
|
||||
|
||||
function requestDenary(){
|
||||
const promptText = isTwos
|
||||
? `Enter a denary number (${rangeTwos(bitCount).min} to ${rangeTwos(bitCount).max}):`
|
||||
: `Enter a denary number (0 to ${maxUnsigned(bitCount)}):`;
|
||||
|
||||
const raw = prompt(promptText);
|
||||
if (raw === null) return;
|
||||
|
||||
// allow leading +/- and digits
|
||||
if (!/^[+-]?\d+$/.test(raw.trim())){
|
||||
alert("Invalid input. Enter a whole number.");
|
||||
return;
|
||||
}
|
||||
|
||||
const n = BigInt(raw.trim());
|
||||
|
||||
if (isTwos){
|
||||
const { min, max } = rangeTwos(bitCount);
|
||||
if (n < min || n > max){
|
||||
alert(`Out of range. Enter between ${min} and ${max}.`);
|
||||
return;
|
||||
}
|
||||
bits = bigIntToBitsTwos(n);
|
||||
} else {
|
||||
const maxU = maxUnsigned(bitCount);
|
||||
if (n < 0n || n > maxU){
|
||||
alert(`Out of range. Enter between 0 and ${maxU}.`);
|
||||
return;
|
||||
}
|
||||
bits = bigIntToBitsUnsigned(n);
|
||||
}
|
||||
|
||||
syncInputsToBits();
|
||||
updateAll();
|
||||
}
|
||||
|
||||
/* -----------------------------
|
||||
Shifts
|
||||
----------------------------- */
|
||||
function shiftLeft(){
|
||||
bits.shift();
|
||||
bits.push(false);
|
||||
syncInputsToBits();
|
||||
updateAll();
|
||||
}
|
||||
|
||||
function shiftRight(){
|
||||
if (isTwos){
|
||||
// arithmetic shift right (preserve sign bit)
|
||||
const sign = bits[0];
|
||||
bits.pop();
|
||||
bits.unshift(sign);
|
||||
} else {
|
||||
// logical shift right
|
||||
bits.pop();
|
||||
bits.unshift(false);
|
||||
}
|
||||
syncInputsToBits();
|
||||
updateAll();
|
||||
}
|
||||
|
||||
/* -----------------------------
|
||||
Mode toggle
|
||||
----------------------------- */
|
||||
function setModeTwos(on){
|
||||
isTwos = !!on;
|
||||
updateModeHint();
|
||||
|
||||
// rebuild so MSB label shows "-" via CSS class
|
||||
// (and keeps the same bit pattern)
|
||||
buildBitsGrid();
|
||||
}
|
||||
|
||||
/* -----------------------------
|
||||
Wire up UI controls
|
||||
----------------------------- */
|
||||
modeToggle.addEventListener("change", () => setModeTwos(modeToggle.checked));
|
||||
|
||||
btnUp.addEventListener("click", () => setBitCount(bitCount + 1));
|
||||
btnDown.addEventListener("click", () => setBitCount(bitCount - 1));
|
||||
|
||||
bitsInput.addEventListener("change", () => setBitCount(Number(bitsInput.value)));
|
||||
|
||||
btnShiftL.addEventListener("click", shiftLeft);
|
||||
btnShiftR.addEventListener("click", shiftRight);
|
||||
|
||||
btnCustBin.addEventListener("click", requestBinary);
|
||||
btnCustDen.addEventListener("click", requestDenary);
|
||||
|
||||
/* -----------------------------
|
||||
Init
|
||||
----------------------------- */
|
||||
updateModeHint();
|
||||
buildBitsGrid();
|
||||
updateAll();
|
||||
@@ -1,115 +0,0 @@
|
||||
// Browser-only script. Safe because it's loaded via <script> (not server-imported).
|
||||
|
||||
const BIT_COUNT = 8; // unsigned page = 8 bits
|
||||
const bitValues = [128, 64, 32, 16, 8, 4, 2, 1];
|
||||
|
||||
const elDenary = document.getElementById("denaryNumber");
|
||||
const elBinary = document.getElementById("binaryNumber");
|
||||
const elSwitches = document.getElementById("bitSwitches");
|
||||
|
||||
const btnCustomDenary = document.getElementById("btnCustomDenary");
|
||||
const btnCustomBinary = document.getElementById("btnCustomBinary");
|
||||
const btnReset = document.getElementById("btnReset");
|
||||
|
||||
let bits = new Array(BIT_COUNT).fill(false);
|
||||
|
||||
function renderSwitches() {
|
||||
elSwitches.innerHTML = "";
|
||||
|
||||
bitValues.forEach((value, index) => {
|
||||
const id = `bit-${value}`;
|
||||
|
||||
const wrapper = document.createElement("div");
|
||||
wrapper.className = "switch-col";
|
||||
|
||||
const labelTop = document.createElement("div");
|
||||
labelTop.className = "bit-label";
|
||||
labelTop.textContent = value;
|
||||
|
||||
const label = document.createElement("label");
|
||||
label.className = "rocker";
|
||||
label.setAttribute("for", id);
|
||||
|
||||
const input = document.createElement("input");
|
||||
input.type = "checkbox";
|
||||
input.id = id;
|
||||
input.checked = bits[index];
|
||||
|
||||
input.addEventListener("change", () => {
|
||||
bits[index] = input.checked;
|
||||
updateNumbers();
|
||||
});
|
||||
|
||||
const span = document.createElement("span");
|
||||
span.className = "rocker-body";
|
||||
span.setAttribute("aria-hidden", "true");
|
||||
|
||||
label.appendChild(input);
|
||||
label.appendChild(span);
|
||||
|
||||
wrapper.appendChild(labelTop);
|
||||
wrapper.appendChild(label);
|
||||
|
||||
elSwitches.appendChild(wrapper);
|
||||
});
|
||||
}
|
||||
|
||||
function updateNumbers() {
|
||||
const binary = bits.map(b => (b ? "1" : "0")).join("");
|
||||
const denary = bits.reduce((acc, b, i) => acc + (b ? bitValues[i] : 0), 0);
|
||||
|
||||
elBinary.textContent = binary;
|
||||
elDenary.textContent = denary.toString();
|
||||
}
|
||||
|
||||
function resetAll() {
|
||||
bits = new Array(BIT_COUNT).fill(false);
|
||||
renderSwitches();
|
||||
updateNumbers();
|
||||
}
|
||||
|
||||
function requestCustomDenary() {
|
||||
let input = prompt(`Enter a denary number (0 to 255):`);
|
||||
if (input === null) return;
|
||||
|
||||
const n = Number.parseInt(input, 10);
|
||||
if (Number.isNaN(n) || n < 0 || n > 255) {
|
||||
alert("Invalid input. Enter a number from 0 to 255.");
|
||||
return;
|
||||
}
|
||||
|
||||
let remaining = n;
|
||||
bits = bitValues.map(v => {
|
||||
if (remaining >= v) {
|
||||
remaining -= v;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
renderSwitches();
|
||||
updateNumbers();
|
||||
}
|
||||
|
||||
function requestCustomBinary() {
|
||||
let input = prompt(`Enter an ${BIT_COUNT}-bit binary number (e.g. 01010101):`);
|
||||
if (input === null) return;
|
||||
|
||||
input = input.trim();
|
||||
const re = new RegExp(`^[01]{${BIT_COUNT}}$`);
|
||||
if (!re.test(input)) {
|
||||
alert(`Invalid input. Enter exactly ${BIT_COUNT} digits using only 0 or 1.`);
|
||||
return;
|
||||
}
|
||||
|
||||
bits = input.split("").map(c => c === "1");
|
||||
renderSwitches();
|
||||
updateNumbers();
|
||||
}
|
||||
|
||||
btnCustomDenary?.addEventListener("click", requestCustomDenary);
|
||||
btnCustomBinary?.addEventListener("click", requestCustomBinary);
|
||||
btnReset?.addEventListener("click", resetAll);
|
||||
|
||||
renderSwitches();
|
||||
updateNumbers();
|
||||
@@ -1,72 +0,0 @@
|
||||
// public/js/tools/unsigned-binary.js
|
||||
// Lightweight: no frameworks. Works on weak devices.
|
||||
const BIT_COUNT = 8;
|
||||
const MAX_DENARY = 255;
|
||||
let bits = new Array(BIT_COUNT).fill(false);
|
||||
function bitsToBinaryString(){
|
||||
return bits.map(b => (b ? "1" : "0")).join("");
|
||||
}
|
||||
function bitsToDenary(){
|
||||
// MSB on the left: 128..1
|
||||
const weights = [128,64,32,16,8,4,2,1];
|
||||
return bits.reduce((acc, b, i) => acc + (b ? weights[i] : 0), 0);
|
||||
}
|
||||
function render(){
|
||||
const grid = document.getElementById("bitGrid");
|
||||
grid.innerHTML = "";
|
||||
const weights = [128,64,32,16,8,4,2,1];
|
||||
bits.forEach((on, i) => {
|
||||
const btn = document.createElement("button");
|
||||
btn.type = "button";
|
||||
btn.className = "btn";
|
||||
btn.style.width = "100%";
|
||||
btn.style.justifyContent = "space-between";
|
||||
btn.setAttribute("aria-pressed", on ? "true" : "false");
|
||||
btn.innerHTML = `<span>${weights[i]}</span><b>${on ? "1" : "0"}</b>`;
|
||||
btn.addEventListener("click", () => {
|
||||
bits[i] = !bits[i];
|
||||
update();
|
||||
});
|
||||
grid.appendChild(btn);
|
||||
});
|
||||
}
|
||||
function update(){
|
||||
document.getElementById("binaryNumber").innerText = bitsToBinaryString();
|
||||
document.getElementById("denaryNumber").innerText = bitsToDenary();
|
||||
render();
|
||||
}
|
||||
function requestBinary(){
|
||||
let v;
|
||||
do{
|
||||
v = prompt("Enter an 8-bit binary value (8 digits, only 0 or 1):", bitsToBinaryString());
|
||||
if(v === null) return;
|
||||
v = v.trim();
|
||||
}while(!/^[01]{8}$/.test(v));
|
||||
bits = v.split("").map(ch => ch === "1");
|
||||
update();
|
||||
}
|
||||
function requestDenary(){
|
||||
let v;
|
||||
do{
|
||||
v = prompt("Enter a denary value (0 to 255):", String(bitsToDenary()));
|
||||
if(v === null) return;
|
||||
v = Number(v);
|
||||
}while(!Number.isInteger(v) || v < 0 || v > MAX_DENARY);
|
||||
// set bits from MSB to LSB
|
||||
const weights = [128,64,32,16,8,4,2,1];
|
||||
bits = weights.map(w => {
|
||||
if(v >= w){ v -= w; return true; }
|
||||
return false;
|
||||
});
|
||||
update();
|
||||
}
|
||||
function reset(){
|
||||
bits = new Array(BIT_COUNT).fill(false);
|
||||
update();
|
||||
}
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.getElementById("btnCustomBinary")?.addEventListener("click", requestBinary);
|
||||
document.getElementById("btnCustomDenary")?.addEventListener("click", requestDenary);
|
||||
document.getElementById("btnReset")?.addEventListener("click", reset);
|
||||
update();
|
||||
});
|
||||
Reference in New Issue
Block a user