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

feat(v2-alpha): refactor binary simulator and introduce shared site layout

Browse Source 
- 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:
Alexander Lyall
2025-12-14 19:46:23 +00:00
parent 460126dccc
commit d4765b3788
12 changed files with 1102 additions and 823 deletions
Download Patch File Download Diff File Expand all files Collapse all files

293
public/css/binary.css Normal file
View File

@@ -0,0 +1,293 @@
:root{
--bg: #1f2027;
--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);
}
/* DSEG font (you already have these in public/fonts/) */
@font-face{
font-family: "DSEG7ClassicRegular";
src:
url("/fonts/DSEG7Classic-Regular.woff") format("woff"),
url("/fonts/DSEG7Classic-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
.wrap{
max-width: 1200px;
margin: 0 auto;
padding: 32px 20px 60px;
}
.topGrid{
display:grid;
grid-template-columns: 1fr 340px;
gap: 28px;
align-items:start;
}
.readout{
background: transparent;
text-align:center;
padding: 10px 10px 0;
}
.label{
letter-spacing: .18em;
font-weight: 800;
color: var(--muted);
text-transform: uppercase;
font-size: 14px;
margin-top: 10px;
}
.num{
font-family: "DSEG7ClassicRegular", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-weight: 400;
color: var(--accent);
text-shadow: 0 0 18px var(--accent-dim);
}
.denary{
font-size: 84px;
line-height: 1.0;
margin: 6px 0 16px;
}
.binary{
font-size: 62px;
letter-spacing: .12em;
line-height: 1.0;
margin: 6px 0 18px;
}
.controls{
margin-top: 10px;
display:flex;
gap: 12px;
justify-content:center;
flex-wrap:wrap;
}
.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: 160px;
}
.btn:active{ transform: translateY(1px); }
.divider{
margin-top: 26px;
border-top: 1px solid var(--line);
}
/* Right panels */
.panelCol{
display:flex;
flex-direction:column;
gap: 14px;
}
.card{
background: var(--panel2);
border: 1px solid rgba(255,255,255,.10);
border-radius: 14px;
padding: 14px;
}
.cardTitle{
letter-spacing: .18em;
font-weight: 900;
color: var(--muted);
text-transform: uppercase;
font-size: 12px;
margin: 0 0 10px;
}
.hint{
color: var(--muted);
font-size: 12px;
margin-top: 8px;
line-height: 1.35;
}
.toggleRow{
display:flex;
align-items:center;
justify-content:space-between;
gap: 10px;
}
.toggleLabel{
color: var(--text);
font-weight: 800;
font-size: 14px;
}
/* Switch (re-used for mode + bits) */
.switch{
position: relative;
width: 56px;
height: 34px;
display:inline-block;
flex: 0 0 auto;
}
.switch input{
opacity:0;
width:0;
height:0;
}
.slider{
position:absolute;
inset:0;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.14);
border-radius: 999px;
transition: .18s ease;
}
.slider::before{
content:"";
position:absolute;
height: 28px;
width: 28px;
left: 3px;
top: 2px;
background: rgba(255,255,255,.92);
border-radius: 50%;
transition: .18s ease;
}
.switch input:checked + .slider{
background: rgba(51,255,122,.20);
border-color: rgba(51,255,122,.55);
}
.switch input:checked + .slider::before{
transform: translateX(22px);
background: var(--accent);
}
/* Bit width controls */
.bitWidthRow{
display:grid;
grid-template-columns: 44px 1fr 44px;
gap: 10px;
align-items:center;
}
.miniBtn{
height: 44px;
width: 44px;
border-radius: 12px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
color: #fff;
cursor:pointer;
font-weight: 900;
font-size: 18px;
}
.bitInputWrap{
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
border-radius: 12px;
padding: 10px 12px;
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
}
.bitInputLabel{
color: var(--muted);
font-size: 12px;
font-weight: 900;
letter-spacing: .18em;
text-transform: uppercase;
}
.bitInput{
width: 86px;
text-align:right;
background: transparent;
border: none;
outline: none;
color: var(--accent);
font-family: "DSEG7ClassicRegular", ui-monospace, monospace;
font-size: 28px;
}
.bitInput::-webkit-outer-spin-button,
.bitInput::-webkit-inner-spin-button{
-webkit-appearance:none;
margin:0;
}
/* ✅ Bits grid: wraps every 8 bits, NO horizontal scroll bar */
.bits{
margin-top: 26px;
padding-top: 22px;
display:grid;
grid-template-columns: repeat(8, minmax(90px, 1fr));
gap: 18px;
align-items:end;
text-align:center;
/* make absolutely sure we don't create a horizontal scrollbar */
overflow-x: hidden;
}
/* Bit tile */
.bit{
display:flex;
flex-direction:column;
align-items:center;
gap: 10px;
padding: 8px 4px;
}
.bulb{
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.12);
box-shadow: none;
margin-bottom: 4px;
}
.bulb.on{
background: #ffd86b;
border-color: rgba(255,216,107,.7);
box-shadow: 0 0 18px rgba(255,216,107,.6);
}
.bitVal{
font-family: "DSEG7ClassicRegular", ui-monospace, monospace;
font-size: 30px;
color: var(--text);
opacity: .95;
line-height: 1;
min-height: 34px;
}
/* Responsive */
@media (max-width: 980px){
.topGrid{ grid-template-columns: 1fr; }
.denary{ font-size: 72px; }
.binary{ font-size: 52px; }
.bits{ grid-template-columns: repeat(4, minmax(90px, 1fr)); }
}
@media (max-width: 520px){
.denary{ font-size: 62px; }
.binary{ font-size: 44px; }
.btn{ min-width: 140px; }
}

321
public/js/binary.js Normal file
View 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();

115
public/js/binary/unsigned-binary.js
View File

@@ -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();

72
public/js/tools/unsigned-binary.js
View File

@@ -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();
});

301
public/scripts/binary.js Normal file
View File

@@ -0,0 +1,301 @@
/* Binary simulator for Computing:Box
- Wrap bits every 8 (CSS handles layout)
- Bit width 4..64
- Unsigned + Two’s complement toggle (WORKING)
- Bulbs + toggle switches for each bit
*/
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 btnBitsUp = document.getElementById("btnBitsUp");
const btnBitsDown = document.getElementById("btnBitsDown");
const btnShiftLeft = document.getElementById("btnShiftLeft");
const btnShiftRight = document.getElementById("btnShiftRight");
const btnCustomBinary = document.getElementById("btnCustomBinary");
const btnCustomDenary = document.getElementById("btnCustomDenary");
let bitCount = clampInt(Number(bitsInput?.value ?? 8), 4, 64);
let isTwos = false;
// bits[0] is MSB, bits[bitCount-1] is LSB
let bits = new Array(bitCount).fill(false);
function clampInt(n, min, max) {
n = Number(n);
if (!Number.isInteger(n)) n = min;
return Math.max(min, Math.min(max, n));
}
function pow2(exp) {
// safe up to 2^63 in JS integer precision? (JS uses float) but our usage is display/control, ok.
return 2 ** exp;
}
/* -----------------------------
Build UI (bulbs + switches)
----------------------------- */
function buildBits(count) {
bitCount = clampInt(count, 4, 64);
bits = resizeBits(bits, bitCount);
bitsGrid.innerHTML = "";
for (let i = 0; i < bitCount; i++) {
const exp = bitCount - 1 - i; // MSB has highest exponent
const value = pow2(exp);
const bit = document.createElement("div");
bit.className = "bit";
bit.innerHTML = `
<div class="bulb" id="bulb-${i}" aria-hidden="true"></div>
<div class="bitVal">${value}</div>
<label class="switch" aria-label="Toggle bit ${value}">
<input type="checkbox" data-index="${i}">
<span class="slider"></span>
</label>
`;
bitsGrid.appendChild(bit);
}
hookSwitches();
syncUI();
}
function resizeBits(oldBits, newCount) {
// keep LSB end stable when changing bit width:
// align old bits to the right (LSB)
const out = new Array(newCount).fill(false);
const copy = Math.min(oldBits.length, newCount);
for (let k = 0; k < copy; k++) {
// copy from end (LSB)
out[newCount - 1 - k] = oldBits[oldBits.length - 1 - k];
}
return out;
}
function hookSwitches() {
bitsGrid.querySelectorAll('input[type="checkbox"][data-index]').forEach((input) => {
input.addEventListener("change", () => {
const i = Number(input.dataset.index);
bits[i] = input.checked;
updateReadout();
updateBulb(i);
});
});
}
/* -----------------------------
Mode toggle (Unsigned <-> Two’s)
----------------------------- */
function setModeTwos(on) {
isTwos = !!on;
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.";
// Just re-calc denary using current bit pattern
updateReadout();
}
modeToggle?.addEventListener("change", () => setModeTwos(modeToggle.checked));
/* -----------------------------
Calculations
----------------------------- */
function getUnsignedValue() {
let n = 0;
for (let i = 0; i < bitCount; i++) {
if (!bits[i]) continue;
const exp = bitCount - 1 - i;
n += pow2(exp);
}
return n;
}
function getTwosValue() {
// MSB has negative weight
let n = 0;
for (let i = 0; i < bitCount; i++) {
if (!bits[i]) continue;
const exp = bitCount - 1 - i;
if (i === 0) n -= pow2(exp); // MSB
else n += pow2(exp);
}
return n;
}
function getDenary() {
return isTwos ? getTwosValue() : getUnsignedValue();
}
function getBinaryString() {
return bits.map(b => (b ? "1" : "0")).join("");
}
/* -----------------------------
UI updates
----------------------------- */
function updateBulb(i) {
const bulb = document.getElementById(`bulb-${i}`);
if (bulb) bulb.classList.toggle("on", bits[i]);
}
function updateReadout() {
denaryEl.textContent = String(getDenary());
binaryEl.textContent = getBinaryString();
}
function syncUI() {
bitsGrid.querySelectorAll('input[type="checkbox"][data-index]').forEach((input) => {
const i = Number(input.dataset.index);
input.checked = !!bits[i];
updateBulb(i);
});
updateReadout();
}
/* -----------------------------
Set from Binary / Denary
----------------------------- */
function setFromBinary(bin) {
const clean = String(bin).replace(/\s+/g, "");
if (!/^[01]+$/.test(clean)) return false;
const padded = clean.slice(-bitCount).padStart(bitCount, "0");
bits = [...padded].map(ch => ch === "1");
syncUI();
return true;
}
function setFromDenary(n) {
if (!Number.isInteger(n)) return false;
if (!isTwos) {
const min = 0;
const max = pow2(bitCount) - 1;
if (n < min || n > max) return false;
// unsigned fill from MSB->LSB
let remaining = n;
bits = bits.map((_, i) => {
const exp = bitCount - 1 - i;
const value = pow2(exp);
if (remaining >= value) {
remaining -= value;
return true;
}
return false;
});
syncUI();
return true;
}
// Two's complement bounds
const min = -pow2(bitCount - 1);
const max = pow2(bitCount - 1) - 1;
if (n < min || n > max) return false;
// Convert to raw unsigned representation:
// if negative, represent as 2^bitCount + n
let raw = n;
if (raw < 0) raw = pow2(bitCount) + raw;
let remaining = raw;
bits = bits.map((_, i) => {
const exp = bitCount - 1 - i;
const value = pow2(exp);
if (remaining >= value) {
remaining -= value;
return true;
}
return false;
});
syncUI();
return true;
}
/* -----------------------------
Shifts
----------------------------- */
function shiftLeft() {
// drop MSB, append 0 at LSB
bits.shift();
bits.push(false);
syncUI();
}
function shiftRight() {
// unsigned: logical shift right (prepend 0)
// twos: arithmetic shift right (prepend old MSB)
const msb = bits[0];
bits.pop();
bits.unshift(isTwos ? msb : false);
syncUI();
}
/* -----------------------------
Bit width controls
----------------------------- */
function applyBitCount(next) {
const v = clampInt(next, 4, 64);
bitsInput.value = String(v);
buildBits(v);
}
btnBitsUp?.addEventListener("click", () => applyBitCount(bitCount + 1));
btnBitsDown?.addEventListener("click", () => applyBitCount(bitCount - 1));
bitsInput?.addEventListener("change", () => {
applyBitCount(Number(bitsInput.value));
});
/* -----------------------------
Buttons
----------------------------- */
btnShiftLeft?.addEventListener("click", shiftLeft);
btnShiftRight?.addEventListener("click", shiftRight);
btnCustomBinary?.addEventListener("click", () => {
const v = prompt(`Enter a ${bitCount}-bit binary number:`);
if (v === null) return;
if (!setFromBinary(v)) alert("Invalid input. Use only 0 and 1.");
});
btnCustomDenary?.addEventListener("click", () => {
const min = isTwos ? -pow2(bitCount - 1) : 0;
const max = isTwos ? (pow2(bitCount - 1) - 1) : (pow2(bitCount) - 1);
const v = prompt(`Enter a denary number (${min} to ${max}):`);
if (v === null) return;
const n = Number(v);
if (!Number.isInteger(n) || !setFromDenary(n)) {
alert(`Invalid input. Enter an integer from ${min} to ${max}.`);
}
});
/* -----------------------------
INIT
----------------------------- */
function init() {
// default mode: unsigned
setModeTwos(false);
modeToggle.checked = false;
// build initial bits
applyBitCount(bitCount);
}
init();

75
public/styles/global.css Normal file
View File

@@ -0,0 +1,75 @@
:root{
--bg: #1f2027;
--panel: rgba(255,255,255,.04);
--text: #e8e8ee;
--muted: #a9acb8;
--line: rgba(255,255,255,.12);
}
*{ box-sizing:border-box; }
body{
margin:0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background: var(--bg);
color: var(--text);
}
.site-header{
border-bottom: 1px solid var(--line);
background: rgba(0,0,0,.12);
backdrop-filter: blur(6px);
}
.site-header__inner{
max-width: 1200px;
margin: 0 auto;
padding: 14px 20px;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
}
.brand{
text-decoration:none;
color: var(--text);
font-weight: 900;
letter-spacing: .02em;
}
.nav{
display:flex;
gap: 14px;
flex-wrap:wrap;
}
.nav a{
color: var(--muted);
text-decoration:none;
font-weight: 700;
font-size: 14px;
}
.nav a:hover{ color: var(--text); }
.site-main{
min-height: calc(100vh - 120px);
}
.site-footer{
border-top: 1px solid var(--line);
margin-top: 28px;
background: rgba(0,0,0,.10);
}
.site-footer__inner{
max-width: 1200px;
margin: 0 auto;
padding: 18px 20px;
display:flex;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
}
.muted{ color: var(--muted); font-size: 13px; }

6
src/components/SiteFooter.astro Normal file
View File

@@ -0,0 +1,6 @@
<footer class="site-footer">
<div class="site-footer__inner">
<div class="muted">© {new Date().getFullYear()} Computing:Box</div>
<div class="muted">Powered by ADCM Networks</div>
</div>
</footer>

15
src/components/SiteHeader.astro Normal file
View File

@@ -0,0 +1,15 @@
<header class="site-header">
<div class="site-header__inner">
<a class="brand" href="/">
<span class="brand__name">Computing:Box</span>
</a>
<nav class="nav">
<a href="/about/">About</a>
<a href="/binary/">Binary</a>
<a href="/hexadecimal/">Hexadecimal</a>
<a href="/hex-colours/">Hex Colours</a>
<a href="/logic-gates/">Logic Gates</a>
</nav>
</div>
</header>

15
src/layouts/BaseLayout.astro
View File

@@ -1,5 +1,7 @@
---
// src/layouts/BaseLayout.astro
import SiteHeader from "../components/SiteHeader.astro";
import SiteFooter from "../components/SiteFooter.astro";
const { title = "Computing:Box" } = Astro.props;
---
<!doctype html>
@@ -8,10 +10,17 @@ const { title = "Computing:Box" } = Astro.props;
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>{title}</title>
<link rel="stylesheet" href="/styles.css" />
<link rel="stylesheet" href="/fonts/DSEG7Classic-Regular.css">
<!-- Global site styles -->
<link rel="stylesheet" href="/styles/global.css" />
</head>
<body>
<SiteHeader />
<main class="site-main">
<slot />
</main>
<SiteFooter />
</body>
</html>

634
src/pages/binary.astro
View File

@@ -1,306 +1,21 @@
---
/**
* src/pages/binary.astro
* Single-file binary simulator (Unsigned + Two's complement)
* Bit width: 4..64
*
* Requires:
* public/fonts/DSEG7Classic-Regular.woff
* public/fonts/DSEG7Classic-Regular.ttf
*/
import BaseLayout from "../layouts/BaseLayout.astro";
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Binary | Computing:Box</title>
<BaseLayout title="Binary | Computing:Box">
<!-- Page-specific CSS -->
<link rel="stylesheet" href="/styles/binary.css" />
<style>
:root{
--bg: #1f2027;
--panel: #22242d;
--panel2:#262833;
--text: #e8e8ee;
--muted: #a9acb8;
--accent: #33ff7a;
--accent-dim: rgba(51,255,122,.15);
--line: rgba(255,255,255,.12);
}
@font-face{
font-family: "DSEG7ClassicRegular";
src:
url("/fonts/DSEG7Classic-Regular.woff") format("woff"),
url("/fonts/DSEG7Classic-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
body{
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;
}
/* Layout: readout left, settings panel right (like your screenshot) */
.layout{
display:grid;
grid-template-columns: 1fr 360px;
gap: 22px;
align-items:start;
}
.readout{
text-align:center;
padding: 10px 10px 0;
}
.label{
letter-spacing: .18em;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
font-size: 16px;
margin-top: 8px;
}
.num{
font-family: "DSEG7ClassicRegular", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-weight: 400;
color: var(--accent);
text-shadow: 0 0 18px var(--accent-dim);
}
.value{
font-size: 70px;
line-height: 1.0;
margin: 6px 0 16px;
}
.binary{
font-size: 54px;
letter-spacing: .12em;
word-break: break-all;
}
/* Buttons under readout (as requested) */
.controls{
margin-top: 16px;
display:flex;
gap: 12px;
justify-content:center;
flex-wrap:wrap;
}
.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: 700;
cursor: pointer;
min-width: 160px;
}
.btn:active{ transform: translateY(1px); }
/* Settings panel cards */
.panel{
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
border-radius: 14px;
padding: 16px 16px 14px;
margin-bottom: 14px;
}
.panelTitle{
font-size: 12px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--muted);
font-weight: 800;
margin-bottom: 10px;
}
.panelRow{
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
}
.hint{
color: var(--muted);
font-size: 12px;
margin-top: 10px;
line-height: 1.35;
}
/* Reusable toggle switch (for MODE and for each BIT) */
.switch{
position: relative;
width: 56px;
height: 34px;
display:inline-block;
flex: 0 0 auto;
}
.switch input{
opacity:0;
width:0;
height:0;
}
.slider{
position:absolute;
inset:0;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.14);
border-radius: 999px;
transition: .18s ease;
}
.slider::before{
content:"";
position:absolute;
height: 28px;
width: 28px;
left: 3px;
top: 2px;
background: rgba(255,255,255,.92);
border-radius: 50%;
transition: .18s ease;
}
.switch input:checked + .slider{
background: rgba(51,255,122,.20);
border-color: rgba(51,255,122,.55);
}
.switch input:checked + .slider::before{
transform: translateX(22px);
background: var(--accent);
}
/* Bit width controls */
.bwControls{
display:grid;
grid-template-columns: 44px 1fr 44px;
gap: 10px;
align-items:center;
margin-top: 8px;
}
.bwBtn{
width: 44px;
height: 44px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
color: #fff;
font-weight: 900;
cursor: pointer;
}
.bwBtn:active{ transform: translateY(1px); }
.bwInput{
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.12);
border-radius: 12px;
padding: 10px 12px;
}
.bwLabel{
color: var(--muted);
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 800;
}
.bwField{
width: 100px;
text-align:right;
background: transparent;
border: none;
outline: none;
color: var(--accent);
font-family: "DSEG7ClassicRegular", ui-monospace, monospace;
font-size: 26px;
padding: 0;
}
.bwField::-webkit-outer-spin-button,
.bwField::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bwField[type=number] { -moz-appearance: textfield; }
/* Bits grid */
.bits{
margin-top: 34px;
padding-top: 26px;
border-top: 1px solid var(--line);
display:grid;
gap: 18px;
align-items:end;
text-align:center;
}
.bit{
display:flex;
flex-direction:column;
align-items:center;
gap: 10px;
padding: 8px 4px;
}
.bitVal{
font-size: 34px;
color: var(--text);
opacity: .95;
}
/* Bulb (must come back!) */
.bulb{
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.12);
box-shadow: none;
margin-bottom: 6px;
}
.bulb.on{
background: #ffd86b;
border-color: rgba(255,216,107,.7);
box-shadow: 0 0 18px rgba(255,216,107,.6);
}
/* Responsive */
@media (max-width: 1000px){
.layout{ grid-template-columns: 1fr; }
.value{ font-size: 60px; }
.binary{ font-size: 44px; }
}
@media (max-width: 900px){
.value{ font-size: 54px; }
.binary{ font-size: 36px; }
.btn{ min-width: 140px; }
}
</style>
</head>
<body>
<main class="wrap">
<section class="layout">
<!-- LEFT: readout + buttons -->
<section class="topGrid">
<!-- LEFT: readout + buttons + bits -->
<div>
<div class="readout">
<div class="label">Denary</div>
<div id="denaryNumber" class="value num">0</div>
<div id="denaryNumber" class="num denary">0</div>
<div class="label">Binary</div>
<div id="binaryNumber" class="value binary num">00000000</div>
<div id="binaryNumber" class="num binary">00000000</div>
<div class="controls">
<button class="btn" id="btnCustomBinary" type="button">Custom Binary</button>
@@ -310,333 +25,64 @@
</div>
</div>
<!-- Bits grid (built by JS so bit-width 4..64 works) -->
<section id="bitsGrid" class="bits" aria-label="Bit switches"></section>
<div class="divider"></div>
<!-- Bits render here (JS builds bulbs + switches) -->
<section class="bits" id="bitsGrid" aria-label="Bit switches"></section>
</div>
<!-- RIGHT: settings panel -->
<aside>
<div class="panel">
<div class="panelTitle">Mode</div>
<div class="panelRow">
<span style="font-weight:800;">Unsigned</span>
<!-- RIGHT: mode + bit width -->
<aside class="panelCol">
<div class="card">
<div class="cardTitle">Mode</div>
<!-- MODE TOGGLE uses SAME switch style -->
<label class="switch" aria-label="Toggle Two's complement mode">
<div class="toggleRow">
<div class="toggleLabel" id="lblUnsigned">Unsigned</div>
<!-- SAME SWITCH STYLE as bit switches -->
<label class="switch" aria-label="Toggle mode">
<input id="modeToggle" type="checkbox" />
<span class="slider"></span>
</label>
<span style="font-weight:800;">Two’s complement</span>
<div class="toggleLabel" id="lblTwos">Two’s complement</div>
</div>
<div class="hint">
Tip: In two’s complement, the left-most bit (MSB) represents a negative value.
<div class="hint" id="modeHint">
Tip: In unsigned binary, all bits represent positive values.
</div>
</div>
<div class="panel">
<div class="panelTitle">Bit width</div>
<div class="card">
<div class="cardTitle">Bit width</div>
<div class="bwControls">
<button class="bwBtn" id="btnBitsDown" type="button" aria-label="Decrease bits">−</button>
<div class="bitWidthRow">
<button class="miniBtn" id="btnBitsDown" type="button" aria-label="Decrease bits">−</button>
<div class="bwInput">
<div class="bwLabel">Bits</div>
<div class="bitInputWrap">
<div class="bitInputLabel">Bits</div>
<input
id="bitsField"
class="bwField"
id="bitsInput"
class="bitInput"
type="number"
inputmode="numeric"
min="4"
max="64"
step="1"
value="8"
inputmode="numeric"
aria-label="Number of bits"
/>
</div>
<button class="bwBtn" id="btnBitsUp" type="button" aria-label="Increase bits">+</button>
<button class="miniBtn" id="btnBitsUp" type="button" aria-label="Increase bits">+</button>
</div>
<div class="hint">
Minimum 4 bits, maximum 64 bits.
</div>
<div class="hint">Minimum 4 bits, maximum 64 bits. Display wraps every 8 bits.</div>
</div>
</aside>
</section>
</main>
<script type="module">
// ---------- State ----------
let bitsCount = 8; // 4..64
let isTwos = false; // false = unsigned
let bitStates = []; // MSB -> LSB booleans
// ---------- Helpers ----------
function clamp(n, min, max){ return Math.min(max, Math.max(min, n)); }
function pow2(n){
// for up to 64 bits, Number is still OK for *visual simulator*.
// if you later want exact 64-bit maths, swap to BigInt end-to-end.
return 2 ** n;
}
function getPlaceValues(){
// MSB -> LSB
// Unsigned: [2^(n-1), ..., 1]
// Two's: [-2^(n-1), 2^(n-2), ..., 1]
const vals = [];
for (let i = 0; i < bitsCount; i++){
const power = bitsCount - 1 - i;
if (isTwos && i === 0){
vals.push(-pow2(power));
} else {
vals.push(pow2(power));
}
}
return vals;
}
function binaryString(){
return bitStates.map(b => (b ? "1" : "0")).join("");
}
function denaryValue(){
const values = getPlaceValues();
let sum = 0;
for (let i = 0; i < bitsCount; i++){
if (bitStates[i]) sum += values[i];
}
return sum;
}
function rangeForMode(){
if (!isTwos){
return { min: 0, max: pow2(bitsCount) - 1 };
}
return { min: -pow2(bitsCount - 1), max: pow2(bitsCount - 1) - 1 };
}
function updateReadout(){
document.getElementById("binaryNumber").innerText = binaryString();
document.getElementById("denaryNumber").innerText = String(denaryValue());
// bulb on/off updates:
for (let i = 0; i < bitsCount; i++){
const bulb = document.getElementById(`bulb-${i}`);
if (bulb) bulb.classList.toggle("on", !!bitStates[i]);
}
}
// ---------- DOM build for bits grid ----------
function setBitsGridColumns(){
const grid = document.getElementById("bitsGrid");
// make it adapt (up to 16 per row max, then wraps)
const cols = clamp(bitsCount, 4, 16);
grid.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
}
function buildBitsGrid(){
const grid = document.getElementById("bitsGrid");
grid.innerHTML = "";
setBitsGridColumns();
const values = getPlaceValues();
for (let i = 0; i < bitsCount; i++){
const v = values[i];
const bit = document.createElement("div");
bit.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 num";
// show absolute label for MSB in twos? No — show the actual negative value (clear to students).
val.textContent = String(v);
// IMPORTANT: bit switch must be the SAME style as MODE switch
const label = document.createElement("label");
label.className = "switch";
label.setAttribute("aria-label", `Toggle bit ${v}`);
const input = document.createElement("input");
input.type = "checkbox";
input.dataset.index = String(i);
input.checked = !!bitStates[i];
const slider = document.createElement("span");
slider.className = "slider";
input.addEventListener("change", () => {
bitStates[i] = input.checked;
updateReadout();
});
label.appendChild(input);
label.appendChild(slider);
bit.appendChild(bulb);
bit.appendChild(val);
bit.appendChild(label);
grid.appendChild(bit);
}
updateReadout();
}
// ---------- Set state from binary / denary ----------
function setFromBinary(bin){
const clean = String(bin).replace(/\s+/g, "");
if (!/^[01]+$/.test(clean)) return false;
const padded = clean.slice(-bitsCount).padStart(bitsCount, "0");
bitStates = [...padded].map(ch => ch === "1");
// update toggles without rebuilding
for (let i = 0; i < bitsCount; i++){
const toggle = document.querySelector(`input[type="checkbox"][data-index="${i}"]`);
if (toggle) toggle.checked = bitStates[i];
}
updateReadout();
return true;
}
function setFromDenary(n){
const num = Number(n);
if (!Number.isInteger(num)) return false;
const { min, max } = rangeForMode();
if (num < min || num > max) return false;
// convert to bit pattern
let unsignedVal;
if (!isTwos){
unsignedVal = num;
} else {
// two's complement representation
unsignedVal = num < 0 ? (pow2(bitsCount) + num) : num;
}
// build MSB->LSB bits from unsignedVal
const newBits = [];
for (let i = 0; i < bitsCount; i++){
const power = bitsCount - 1 - i;
const bit = Math.floor(unsignedVal / pow2(power)) % 2;
newBits.push(bit === 1);
}
bitStates = newBits;
for (let i = 0; i < bitsCount; i++){
const toggle = document.querySelector(`input[type="checkbox"][data-index="${i}"]`);
if (toggle) toggle.checked = bitStates[i];
}
updateReadout();
return true;
}
// ---------- Shifts ----------
function shiftLeft(){
// logical left shift: drop MSB, add 0 at LSB
bitStates = bitStates.slice(1).concat(false);
buildBitsGrid(); // rebuild keeps labels correct if mode changed (also updates bulbs)
}
function shiftRight(){
if (!isTwos){
// logical right shift
bitStates = [false].concat(bitStates.slice(0, -1));
} else {
// arithmetic right shift (preserve MSB)
const msb = bitStates[0];
bitStates = [msb].concat(bitStates.slice(0, -1));
}
buildBitsGrid();
}
// ---------- Bit width ----------
function applyBitsCount(next){
const wanted = clamp(Number(next) || 8, 4, 64);
if (wanted === bitsCount) return;
// keep the right-most (LSB) bits when resizing (feels natural)
const old = binaryString();
bitsCount = wanted;
// rebuild state from old binary, keeping LSBs
const padded = old.slice(-bitsCount).padStart(bitsCount, "0");
bitStates = [...padded].map(ch => ch === "1");
document.getElementById("bitsField").value = String(bitsCount);
buildBitsGrid();
}
// ---------- Mode toggle ----------
function applyMode(nextIsTwos){
const prevDenary = denaryValue(); // keep the *value* if possible
isTwos = !!nextIsTwos;
// Try to keep the denary value, but clamp if it becomes invalid in the new mode
const { min, max } = rangeForMode();
const kept = clamp(prevDenary, min, max);
setFromDenary(kept);
buildBitsGrid();
}
// ---------- Wire up UI ----------
function wireUI(){
document.getElementById("btnShiftLeft").addEventListener("click", shiftLeft);
document.getElementById("btnShiftRight").addEventListener("click", shiftRight);
document.getElementById("btnCustomBinary").addEventListener("click", () => {
const val = prompt(`Enter a binary number (up to ${bitsCount} bits):`);
if (val === null) return;
if (!setFromBinary(val)) alert("Invalid input. Use only 0 and 1.");
});
document.getElementById("btnCustomDenary").addEventListener("click", () => {
const { min, max } = rangeForMode();
const val = prompt(`Enter a denary number (${min} to ${max}):`);
if (val === null) return;
if (!setFromDenary(val)) alert(`Invalid input. Enter an integer from ${min} to ${max}.`);
});
// Mode toggle
const modeToggle = document.getElementById("modeToggle");
modeToggle.addEventListener("change", () => applyMode(modeToggle.checked));
// Bit width +/- and manual entry
document.getElementById("btnBitsDown").addEventListener("click", () => applyBitsCount(bitsCount - 1));
document.getElementById("btnBitsUp").addEventListener("click", () => applyBitsCount(bitsCount + 1));
const bitsField = document.getElementById("bitsField");
bitsField.addEventListener("change", () => applyBitsCount(bitsField.value));
bitsField.addEventListener("blur", () => applyBitsCount(bitsField.value));
bitsField.addEventListener("keydown", (e) => {
if (e.key === "Enter") applyBitsCount(bitsField.value);
});
}
// ---------- Init ----------
function init(){
// default: 8-bit unsigned
bitsCount = 8;
isTwos = false;
bitStates = Array(bitsCount).fill(false);
document.getElementById("modeToggle").checked = false;
document.getElementById("bitsField").value = String(bitsCount);
wireUI();
buildBitsGrid();
}
init();
</script>
</body>
</html>
<!-- Page-specific JS -->
<script type="module" src="/scripts/binary.js"></script>
</BaseLayout>

2
src/styles/base.css
View File

@@ -1,4 +1,4 @@
/* src/styles/base.css */
src/styles/base.css
@import "./md3-tokens.css";
html, body{ height:100%; }
body{

2
src/styles/md3-tokens.css
View File

@@ -1,4 +1,4 @@
/* src/styles/md3-tokens.css */
src/styles/md3-tokens.css
/* MD3-inspired tokens tuned for education: high readability, clear contrast, calm surfaces */
:root{
/* Typography */