Case Study: Logic & State (Modern Tic-Tac-Toe)

📝 The Engineering Challenge

A deep-dive into deterministic state machines and recursive algorithms. This project serves as a technical benchmark for coordinating the Document Object Model (DOM) with the HTML5 Canvas API to create a seamless, reactive interface.

🕹️ System Architecture

Module	Engineering Focus
Recursive AI	Implementation of the Minimax Algorithm to create an unbeatable state-tree.
Hybrid Rendering	Coordinating a dynamic <canvas> vector overlay with a rigid <table> data structure.
Persistence Layer	Session-based state retention via localStorage API.

✨ Key Technical Breakthroughs

1. The Minimax State Machine (Hard Mode)

The "Hard" difficulty is powered by a recursive Minimax algorithm. It evaluates every possible future board state, assigning heuristic values to outcomes. This ensures the system is mathematically unbeatable, demonstrating a mastery of Recursive Logic.

2. The Vector Overlay Handshake

To solve the "Win-Line" problem, I engineered a coordinate-mapping system. The JavaScript calculates the bounding box of the DOM table cells and translates those coordinates to the Canvas 2D context. This represents a "Weaver" approach: bridging two different rendering engines to work as one.

3. Kinetic Feedback Loop

Win conditions trigger a 10px-step animation loop (requestAnimationFrame). This provides the user with a "High-Fidelity" visual confirmation of the game's conclusion, moving beyond static "Game Over" alerts.

⚙️ How to Initialize the Rig

1. Open modern-tic-tac-toe.html.
2. Select Difficulty: Hard to engage the Minimax Engine.
3. Observe the localStorage updates in the DevTools Application tab as scores persist across refreshes.

---

Engineering Attribution: Code & Logic by David Villers. A study in state-driven UI.