# Tic Tac Toe

<a href="/demos/game_tictactoe.html">Play Demo</a>

A classic two-player Tic Tac Toe built entirely with SimVX UI widgets.
Demonstrates buttons, grids, labels, signals, and game state management
without any custom draw code.

## What You Will Learn

- **UI widgets** -- Build interfaces with `Button`, `Label`, `GridContainer`, `VBoxContainer`
- **Signal connections** -- Wire button presses to game logic with `btn.pressed.connect()`
- **GridContainer** -- Automatic grid layout for the 3x3 board
- **Dynamic UI updates** -- Change button text, colours, and label content at runtime
- **Game reset** -- Clear and reinitialise UI state

## Controls

Click any empty cell to place X or O. Click "New Game" to reset.

## How It Works

`TicTacToeGame` builds the UI in `ready()`:

1. A `VBoxContainer` holds the title, status label, game grid, and reset button
2. A `GridContainer` with `columns=3` contains 9 `Button` widgets for the cells
3. Each button's `pressed` signal connects to `make_move(row, col)` using a lambda
4. `make_move()` places the current player's mark, updates the button's text and
   colour, then calls `_check_winner()` to scan rows, columns, and diagonals
5. A win or draw updates the status label and emits the `game_over` signal

## Source Code

```{literalinclude} ../../packages/graphics/examples/game_tictactoe/game.py
:language: python
:linenos:
```