Tic Tac Toe

Demo

AI player driven by minimax algorithm with beta pruning
- In short, the minimax algorithm determines the best action to take by going through all possible moves while assuming that the opponent will also take the best moves, and beta pruning is an optimization technique in which the algorithm skips routes that won't return a value any better than what it already had found.

Rust
- I wanted to try out Rust but also be able to showcase my work on the web. The wasm-pack crate can convert Rust code into WebAssembly which browsers can run
lit
- I wanted to explore custom elements, and lit has facilities to abstract away the tediousness of making them

The game state is represented by uint32 bitmask. This is especially useful for the AI implementation since it's a cheap input to work with, considering that it has to compute a fair amount of potential game states. It's also more convenient to pass simple data types from WASM to JS (currently), otherwise you'd have to use a separate library to handle passing around complex objects.
In total, it required 3 separate projects:
- Game logic (Rust)
  - Provides the methods to transform state, retrieve state
  - Provides the documentation for the structure of the state
    - Users are responsible for parsing the state and presenting it however they want
- WASM wrapper (Rust)
  - Outputs the wasm module and the glue code, generated by the wasm-pack toolchain
  - The glue code contains the API available to JS, as well as internal code that facilitates communication between JS and the wasm module
- Custom element using lit (JS)
  - Serves as the presentation layer
  - Displays the state received from the wrapper and sends input events to it
This is admittedly a convoluted stack and I could have implemented everything in JS, but I wanted to learn about Rust, WebAssembly, and Custom Elements, while aiming to use them all in one project at the end.