This Connect Four bug passes every test — until a player finds it

Win detection for Connect Four in TypeScript — from the last move only, not by scanning the board. And the bug that almost every flat-array implementation ships at least once: three discs at the right edge of a row plus one at the left edge of the next row, and index arithmetic calls it "four in a row". This is episode 2 of a series about how to make engineering decisions, using one game as the example. No React yet — the whole rules engine is still plain TypeScript with tests. What you'll learn • Why "did this disc win?" is a smaller question than "is there a winner?" — 4 lines through 1 cell instead of 168 checks • The wrap-around trap on flat boards, why it passes every test you'd naturally write, and the bounds check that makes it impossible • Walking an axis in (row, col) space instead of index deltas • Five in a row: which four cells to highlight, and why it's the ones hugging the disc that just landed • Test helpers that encode a contract (expectWinLine) and refuse a lying fixture (play) • "Only the last move counts" — a contract, not a bug, and the test that protects it Code + decision records: https://github.com/Hesam-Dearboy/conn... The test file from this episode: https://github.com/Hesam-Dearboy/conn... Play the finished game: https://connect-four-phi-five.vercel.... 1 (the board, no React):    • I wrote zero React for the first 39 minute...   Chapters 00:00 Previously: the board with no UI 01:25 168 checks vs one cell 04:45 Typing winner.ts 10:37 Five in a row — which four? 18:30 Test helpers: expectWinLine and play 26:35 Green, still no pixels 26:42 Next: stop using booleans for UI state Question for you: findWinner only looks at the last move, and I call that a contract, not a bug. What would have to go wrong somewhere else in the code for a win to be missed? Answer in episode 3. Next episode: Stop using booleans for UI state — one reducer, one status field, a timer that pauses and resumes. Stack: React 19, TypeScript, Vite, Vitest, CSS Modules. Design by Frontend Mentor. Music: Miss You Love - patino from the YouTube Audio Library. #typescript #react #webdevelopment #frontend #softwarearchitecture #connectfour #unittesting #frontendmentor