title: Tic Tac Toe page: tictactoe

Tic Tac Toe

A complete game built with HTML attributes. Zero JavaScript.

This game uses session state for the board, compute variables for win detection, and partial re-rendering to update the board after each move. Every click triggers a server round-trip — no client-side game logic at all.

How It Works

Board State

9 session variables (session.c0session.c8) store X, O, or empty.

w-set="session.c0='X'; session.turn='O'; session.moves+=1"

Win Detection

Computed variables concatenate rows, columns, and diagonals. A simple == "XXX" check finds the winner.

compute.row0 = "#session.c0##session.c1##session.c2#"

Partial Re-Render

After each move, w-get fetches the board partial from the server with updated state.

w-get="/partials/ttt-board" w-target="#game" w-swap="innerHTML"

Game Over via CSS

CSS :has() detects win/draw elements and disables remaining buttons automatically.

.ttt-status:has(.ttt-win) ~ .ttt-board button { pointer-events: none }

Source Code

The entire game is two files:

Page site/demo/apps/tictactoe.html — layout, explanation, game container
Partial site/partials/ttt-board.html — board grid, win detection, game logic