Reword intro

Author: healeycodes

components/visuals/bitboards/bitboard-visualizer.tsx

@@ -130,8 +130,7 @@ export default function BitboardVisualizer({ codeLines, steps, stepDelay = 2000
         }
 
         .visualizer-content {
-          display: flex;
-          flex-direction: column;
+          display: block;
         }
 
         .code-line.highlighted {
@@ -160,10 +159,7 @@ export default function BitboardVisualizer({ codeLines, steps, stepDelay = 2000
 
         .square {
           position: relative;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
+          display: block;
           border: 1px solid #e5e7eb;
         }
 
@@ -182,9 +178,7 @@ export default function BitboardVisualizer({ codeLines, steps, stepDelay = 2000
         .bit-overlay {
           position: absolute;
           inset: 0;
-          display: flex;
-          align-items: center;
-          justify-content: center;
+          display: block;
           transition: opacity 0.5s;
           background-color: rgba(59, 130, 246, 0.5);
           opacity: 0;
@@ -213,9 +207,7 @@ export default function BitboardVisualizer({ codeLines, steps, stepDelay = 2000
         .bitboard-info {
           margin-top: 0.25rem;
           margin-bottom: 0.25rem;
-          display: flex;
-          flex-direction: column;
-          gap: 0.25rem;
+          display: block;
           font-family: "IBM Plex Mono", monospace;
           font-size: 0.875rem;
           width: 100%;
@@ -228,6 +220,7 @@ export default function BitboardVisualizer({ codeLines, steps, stepDelay = 2000
           padding: 0.5rem;
           background-color: #f9fafb;
           border-radius: 0.25rem;
+          margin-bottom: 0.25rem;
         }
 
         .info-item.binary {

posts/visualizing-chess-bitboards.md

@@ -5,13 +5,11 @@ tags: ["javascript"]
 description: "Brief introduction to chess bitboards and move generation with animations."
 ---
 
-Bitboards are an efficient way to store game state in (usually) 64-bit integers. There are 64 positions on a chess board so we can use each bit as an on/off switch.
+When simulating board games on a computer, one of the challenges is keeping track of the game pieces. Bitboards are an efficient way to store game state in (usually) 64-bit integers. There are 64 positions on a chess board so we can use each bit as an on/off switch.
 
-I want to describe a board where `f5` is occupied. We can use `67108864`.
+Let's say I want to describe a board where `f5` is occupied. For that, we can use the number `67108864`. In decimal notation, it doesn't seem much like a chessboard. In hex, we can see that there's some structure: `0x0000000004000000`.
 
-This number doesn't really scream that `f5` is occupied though.
-
-I'll show it represented as a binary number with 64 digits.
+For me, it starts to make more sense when representated as a binary number with 64 digits.
 
 ```text
 0 0 0 0 0 0 0 0  I've added a line break
@@ -24,8 +22,6 @@ I'll show it represented as a binary number with 64 digits.
 0 0 0 0 0 0 0 0
 ```
 
-In my examples, I'll use hex representation. In this case that would be `0x0000000004000000`.
-
 We can't pack an _entire_ game's state into a number (e.g. piece color, piece type, castling rights) so we use groups of numbers.
 
 We can use _bitwise_ operations on these numbers to manipulate individual bits using operators like `AND`, `OR`, `XOR`, `NOT`, and bit shifts. These operations are fast (they're directly executed by the CPU in a single clock cycle with no need for complex computation or memory access).
@@ -60,7 +56,7 @@ Two numbers will probably stick out; `7` and `9`. If you picture that long row o
 
 <div className="bitboards" id="whitePawnAttacks"></div>
 
-Without bitboards, a program has to perform many more (magnitudes more!) instructions. The equivalent code, without bitwise operations, would look something like this.
+Without bitboards, a program has to perform many more (magnitudes more!) instructions. The equivalent code, without bitwise operations, would look something like this:
 
 ```js
 attacks = [];