From ae91944cb4e51c3d03542c13fd56d908efc5735f Mon Sep 17 00:00:00 2001 From: Alexander Lyall Date: Tue, 16 Dec 2025 19:35:39 +0000 Subject: [PATCH] Fixed Changes: - The bit value when in two's compliment mode is not right, it should be on the same line, not wrapped - The random button should glow when the random function is running, it shouldn't be solid green all the time - The reset button, can you make the background of it red when hovered over too? I want it to pulse red on the background as well - Make the title of this page (in head) "Binary Simulator" - Reinstate the BaseLayout layout which we created previously - The shifts for Two's Compliment do not work. An Arithmetic Right Shift would keep the value of the most significant bit. Signed-off-by: Alexander Lyall --- src/pages/binary.astro | 129 ++++++-------- src/scripts/binary.js | 127 ++++++-------- src/styles/binary.css | 383 +++++++++++++++-------------------------- 3 files changed, 247 insertions(+), 392 deletions(-) diff --git a/src/pages/binary.astro b/src/pages/binary.astro index e9614aa..e585a28 100644 --- a/src/pages/binary.astro +++ b/src/pages/binary.astro @@ -1,39 +1,37 @@ --- -/* - Binary | Computing:Box - - Toolbox is fixed to the right, and can be collapsed without disappearing. - - Main content reserves space when toolbox is open, and recentres when hidden. -*/ +import BaseLayout from "../layouts/BaseLayout.astro"; import "../styles/binary.css"; --- - - - - - - Binary | Computing:Box - + + - - - +
+
+ +
+
+
Denary
+
0
- -
+ + +
+ - -
+ +
Custom
-
- - - - +
+ +
-
Random runs briefly then stops automatically.
-
+ - -
+
Random runs briefly then stops automatically.
+ + + +
Tools
- - + +
-
- - +
+ +
- -
- - + + + + +
- -
-
-
Denary
-
0
- -
Binary
-
0000 0000
- -
-
- -
-
-
-
- - - - + + diff --git a/src/scripts/binary.js b/src/scripts/binary.js index 5d7af61..197efa9 100644 --- a/src/scripts/binary.js +++ b/src/scripts/binary.js @@ -1,6 +1,6 @@ // src/scripts/binary.js -// Computing:Box — Binary page logic (Unsigned + Two's Complement) -// Matches IDs/classes in your current binary.astro HTML. +// Computing:Box — Binary Simulator logic (Unsigned + Two's Complement) +// Matches IDs/classes in binary.astro (() => { /* ----------------------------- @@ -13,10 +13,11 @@ const modeToggle = document.getElementById("modeToggle"); const modeHint = document.getElementById("modeHint"); + const lblUnsigned = document.getElementById("lblUnsigned"); + const lblTwos = document.getElementById("lblTwos"); const btnCustomBinary = document.getElementById("btnCustomBinary"); const btnCustomDenary = document.getElementById("btnCustomDenary"); - const btnShiftLeft = document.getElementById("btnShiftLeft"); const btnShiftRight = document.getElementById("btnShiftRight"); @@ -28,7 +29,7 @@ const btnBitsUp = document.getElementById("btnBitsUp"); const btnBitsDown = document.getElementById("btnBitsDown"); - // Toolbox toggle + const toolbox = document.getElementById("toolbox"); const toolboxToggle = document.getElementById("toolboxToggle"); /* ----------------------------- @@ -94,22 +95,18 @@ const u = bitsToUnsignedBigInt(); const signBit = bits[bitCount - 1] === true; if (!signBit) return u; - - // negative: u - 2^n - return u - pow2Big(bitCount); + return u - pow2Big(bitCount); // negative: u - 2^n } function signedBigIntToBitsTwos(vSigned) { const span = pow2Big(bitCount); // 2^n - let v = vSigned; - - // Convert to unsigned representative: v mod 2^n - v = ((v % span) + span) % span; + // convert to unsigned representative: v mod 2^n + const v = ((vSigned % span) + span) % span; unsignedBigIntToBits(v); } function formatBinaryGrouped() { - // MSB..LSB with a space every 4 bits + // MSB..LSB with space every 4 bits let s = ""; for (let i = bitCount - 1; i >= 0; i--) { s += bits[i] ? "1" : "0"; @@ -122,11 +119,9 @@ function updateModeHint() { if (!modeHint) return; if (isTwosMode()) { - modeHint.textContent = - "Tip: In two’s complement, the left-most bit (MSB) represents a negative value."; + 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."; + modeHint.textContent = "Tip: In unsigned binary, all bits represent positive values."; } } @@ -137,7 +132,7 @@ bitCount = clampInt(count, 1, 64); if (bitsInput) bitsInput.value = String(bitCount); - // resize bits array, preserve existing LSBs where possible + // preserve existing LSBs where possible const oldBits = bits.slice(); bits = new Array(bitCount).fill(false); for (let i = 0; i < Math.min(oldBits.length, bitCount); i++) bits[i] = oldBits[i]; @@ -150,7 +145,7 @@ bitEl.className = "bit"; bitEl.innerHTML = ` - +