feat(binary): add full binary simulator with unsigned and two’s complement modes

- Introduce new Binary Simulator page with adjustable bit width (4–16 bits)
- Support unsigned and two’s complement representations with live conversion
- Add left/right shift operations and custom binary/denary input
- Implement accessible bulb-and-switch UI with MD3-inspired styling
- Add seven-segment display font assets for realistic number output
- Establish shared base layout, styles, and tooling for future simulators

Signed-off-by: Alexander Lyall <alex@adcm.uk>
This commit is contained in:
2025-12-14 16:57:31 +00:00
parent 7a694bf400
commit 50829688e3
113 changed files with 6769 additions and 6663 deletions

View File

@@ -0,0 +1,72 @@
// 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();
});