This game uses session state for the board, a computed variable with the contains operator 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.c0 – session.c8) store X, O, or empty.

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

Win Detection

One computed variable concatenates all 8 lines. The contains operator checks for "XXX" or "OOO".

<if cond='#lines# contains "XXX"'>

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"

Reusable Component

Each cell is a <what-ttt-cell> component, keeping the board to 9 clean one-liners.

<what-ttt-cell id="0" val="#session.c0#" turn="#session.turn#"/>

Source Code

The entire game is three files — 80 lines of board logic:

Page site/playground/tictactoe.html — layout, explanation, game container

Partial site/partials/ttt-board.html — board grid, win detection (80 lines)