Multiplayer mode: server, room tokens, docker setup, and client UI

2026-09-27 07:45:11 +03:00
1 parent 176d7cc300
commit 434c81d0b6
@@ -0,0 +1,2 @@
 node_modules/
 server/data/
@@ -0,0 +1,13 @@
 FROM node:20-alpine
 WORKDIR /app/server
 ENV PORT=8080
 COPY server/package.json server/pnpm-lock.yaml ./
 RUN corepack pnpm@9 install --prod
 COPY server/*.js ./
 COPY public/ /app/public
 EXPOSE 8080
 CMD ["node", "server.js"]
@@ -0,0 +1,53 @@
 # Tic Tac Toe
 A tic-tac-toe game with two modes: **CPU** (play against a minimax AI) and **Online** (real-time 2-player over WebSocket).
 ## Stack
 - Frontend: vanilla JS + CSS (no build step)
 - Backend: Node.js + Express (serves static files) + `ws` (WebSocket) + `sql.js` (SQLite, in-memory)
 ## Project layout
 ```
 public/            frontend (index.html, app.js, game.js, multiplayer.js, style.css)
 server/            backend (server.js, db.js, package.json, pnpm-lock.yaml)
 docs/              design docs
 Dockerfile         production image
 docker-compose.yml
 ```
 ## Run locally
 The backend lives in `server/` (the frontend has no build step).
 ```bash
 # install backend deps (pnpm)
 cd server && pnpm install
 # start (default port 8080)
 node server/server.js
 # or with an explicit port
 PORT=8080 node server/server.js
 ```
 Then open <http://localhost:8080/>.
 > The server reads `PORT` (default `8080`) and optional `BASE_PATH` (default empty).
 ## Run with Docker
 ```bash
 docker compose up --build
 ```
 or build and run the image directly:
 ```bash
 docker build -t tictactoe .
 docker run -p 8080:8080 tictactoe
 ```
 Then open <http://localhost:8080/>.
 ## Notes
 - `server/data/` holds the SQLite file and is git-ignored.
 - Online games persist to SQLite; a host who reloads can re-enter via the saved token.
@@ -0,0 +1,10 @@
 services:
  ttt:
    build: .
    ports:
      - "8080:8080"
    environment:
      - BASE_PATH=/game
    volumes:
      - ./server/data:/app/server/data
    restart: unless-stopped
@@ -0,0 +1,563 @@
 # Tic-Tac-Toe — Online Multiplayer (Player vs Player) — Implementation Plan
 Adds a **player-vs-player online mode** to the existing tic-tac-toe app. Two human
 players connect over the internet, are matched through a shareable invite link, and
 take turns on a shared board that stays in sync in real time. All existing game rules
 (3×3 board, X moves first, win/draw detection, scoring, win-line, confetti) apply
 unchanged.
 This plan is written to be followed step-by-step by a junior developer. Each step says
 **what** to build, **why**, and **how to verify it**. Follow the steps in order.
 ---
 ## 1. Goals & Non-Goals
 ### Goals (MVP)
 - A **menu screen** where the player chooses: **Play vs CPU** (existing mode) or
  **New Online Game** (new mode).
 - **Host flow**: clicking *New Online Game* creates a game on the server and returns a
  **shareable link** containing a **token**. The host copies/sends that link by any
  channel (chat, email, etc.).
 - **Joiner flow**: the second player opens the link in a browser. The app reads the
  token from the URL and connects to the **same game session** the host created.
 - Once both players are connected, the game starts. **Host is X (moves first)**,
  **joiner is O**. Players alternate turns by tapping the board.
 - **Real-time sync**: every move made by one player appears on the other player's
  board immediately (sub-second).
 - All normal rules apply: 8 winning lines, draw detection, win-line draw, confetti,
  per-match scoring, "Play Again" for a new round.
 - State is persisted in **SQLite** so invite tokens remain valid across server
  restarts.
 - Runnable locally with one command; deployable as a **Docker** container.
 ### Non-Goals (kept simple on purpose)
 - No accounts, login, or player names. Players are anonymous "Player 1 / Player 2".
 - No reconnection/resume after a dropped connection (a dropped player is notified;
  the match is marked ended). Rejoining is possible for the joiner via the token link,
  but not a first-class feature.
 - No matchmaking/lobby, no rooms list, no chat, no spectators.
 - No fairness randomization of who is X (host is always X for simplicity).
 - No HTTPS/TLS termination in the app itself (put a reverse proxy / Caddy in front for
  public internet use).
 - No Postgres yet — SQLite now, Postgres later (see §12).
 ---
 ## 2. Tech Stack & Why
 | Layer | Choice | Why |
 |-------|--------|-----|
 | Backend runtime | **Node.js 20** | Already installed; the user proposed Node. |
 | HTTP server | **Express 5** | Minimal, well-known; serves the static frontend + a tiny REST API. |
 | Real-time | **ws** (WebSocket) | Bidirectional, low-latency, the standard for real-time sync. Far simpler than WebRTC for a turn-based game. |
 | Database | **SQLite via `sql.js`** (WASM) | Real SQLite with **zero native compilation**. The native `better-sqlite3` build segfaults in this environment (ABI/glibc mismatch); `sql.js` is the same SQLite engine compiled to WebAssembly — no build step, no native deps, and it stores a real `.db` file. Migrates to Postgres later (§12). |
 | Frontend | **Vanilla HTML/CSS/JS** (existing) | Kept as-is per requirements; no framework, no build step. |
 | Package manager | **pnpm** (via corepack) | `npm` is not on PATH in this environment; `corepack pnpm` works and is fast. |
 | Deploy | **Docker** (`node:20-alpine`) | One-container deploy; SQLite file persists on a volume. |
 > **Why not Spring Boot?** A JVM/Spring stack is heavyweight for this MVP: long
 > build times, large images, and far more boilerplate for a 2-player turn-based game.
 > Node + Express + ws + SQLite is the leanest stack that meets every requirement.
 ### Dependencies (server only)
 - `express` — HTTP + static serving + REST API
 - `ws` — WebSocket server
 - `sql.js` — SQLite (WASM)
 No frontend dependencies. No build step for the frontend.
 ---
 ## 3. Project Structure (after this feature)
 ```
 game1/
 ├── public/                    # Frontend (served by the Node server)
 │   ├── index.html             # Page: menu + waiting + game screens
 │   ├── style.css              # All styling (existing + menu/waiting styles)
 │   ├── app.js                 # NEW: screens, board, shared rendering, menu, routing
 │   ├── game.js                # CPU mode engine (refactored from the original)
 │   └── multiplayer.js         # NEW: online mode engine (WebSocket client)
 ├── server/
 │   ├── package.json           # express, ws, sql.js
 │   ├── server.js              # HTTP server, REST API, WebSocket server, game loop
 │   ├── db.js                  # SQLite wrapper (schema, queries, persistence)
 │   └── data/                  # games.db lives here (gitignored)
 ├── docs/
 │   ├── PLAN.md                # Original (CPU mode) plan
 │   ├── MULTIPLAYER_PLAN.md    # THIS document
 │   ├── mockup.svg             # Original UI mockup
 │   ├── menu-mockup.svg        # NEW: menu screen design
 │   ├── waiting-mockup.svg     # NEW: "waiting for opponent" + invite link
 │   └── game-mockup.svg        # NEW: multiplayer game screen design
 ├── Dockerfile
 ├── docker-compose.yml
 └── .gitignore
 ```
 ---
 ## 4. High-Level Flow
 ```
                          ┌─────────────────────────────┐
                          │        Node server          │
                          │  (Express + ws + SQLite)    │
                          └─────────────────────────────┘
                                   ▲                ▲
              HTTP POST /api/games │                │  WebSocket (real-time)
                                   │                │
        ┌──────────────┐           │                │        ┌──────────────┐
        │  HOST        │───────────┘                │        │  JOINER      │
        │  (Player 1,  │  creates game, gets        │        │  (Player 2,  │
        │   is X)      │  token + link, waits       │        │   is O)      │
        └──────────────┘                           │        └──────────────┘
              sends link ──────────────────────────► opens link, token in URL,
                                                     connects, joins game
 ```
 1. **Host** opens the app → sees the **menu**.
 2. Host clicks **New Online Game** → `POST /api/games` → server creates a game row
   (id, token, status=`waiting`) and returns `{ id, token, link }`.
 3. Host's app opens a **WebSocket** to the server, registers as the **host** of that
   game, and shows the **waiting screen** with the invite link + a **Copy** button and
   "Waiting for opponent…".
 4. **Joiner** opens the link (`…/?token=abc123`). The app detects the `token` query
   param, opens a **WebSocket**, and sends `{ type:'join', token }`.
 5. Server validates the token, links the two connections, sets status=`playing`, and
   broadcasts **start** to both. Host = X (turn), joiner = O.
 6. Players tap cells. Each tap → client sends `{ type:'move', cell }` → server
   validates (right turn, empty cell, game active) → updates board → **broadcasts**
   `{ type:'move', cell, mark }` to **both** clients → both render the mark.
 7. When a line is completed or the board fills, server sets status=`ended`,
   broadcasts `{ type:'end', winner, line }` → both show the result overlay.
 8. **Play Again** (either player) → server resets the board (X first), status=`playing`,
   broadcasts `{ type:'new-round' }` → both clear the board.
 ---
 ## 5. Data Model (SQLite)
 One table. The board and turn are stored as JSON/scalars so a game can be restored
 after a server restart.
 ```sql
 CREATE TABLE IF NOT EXISTS games (
  id         TEXT PRIMARY KEY,             -- UUID v4
  token      TEXT UNIQUE NOT NULL,         -- invite token (16 random hex chars)
  status     TEXT NOT NULL DEFAULT 'waiting',  -- 'waiting' | 'playing' | 'ended'
  board      TEXT NOT NULL DEFAULT 'null', -- JSON array of 9: null | 'X' | 'O'
  turn       TEXT NOT NULL DEFAULT 'X',    -- whose turn: 'X' | 'O'
  created_at TEXT NOT NULL,                -- ISO-8601 timestamp
  updated_at TEXT NOT NULL                 -- ISO-8601 timestamp
 );
 ```
 - **id**: `crypto.randomUUID()` (built into Node 20).
 - **token**: 16 random hex chars from `crypto.randomBytes(8).toString('hex')`.
  Short enough to type/share, unique enough for an MVP. (For production, use 32+ chars
  or a signed token.)
 - **board**: JSON string of the 9-cell array, e.g. `["X",null,"O",...]`.
 - The in-memory `games` Map (see §7) holds the **live** WebSocket connections and is
  the source of truth during play. The DB is the durable record and the source of
  truth for **token validation**.
 ---
 ## 6. REST API
 Base URL: the host serving the app (e.g. `http://localhost:3000`).
 ### `POST /api/games` — create a game (host)
 - **Request**: no body (or `{}`).
 - **Response 201**:
  ```json
  { "id": "uuid", "token": "abc123def456", "link": "http://<host>:3000/?token=abc123def456" }
  ```
 - The server inserts a `games` row with `status='waiting'`, `board='null'`, `turn='X'`.
 - `link` is built from the request origin: `new URL(req.originalUrl).origin + '/?token=' + token`.
  (The single-page app reads `?token=` to enter joiner mode — see §8.)
 ### `GET /api/health` — liveness probe (for Docker)
 - **Response 200**: `{ "ok": true }`.
 > That's the entire REST surface. All gameplay happens over the WebSocket.
 ---
 ## 7. WebSocket Protocol
 Endpoint: `ws://<host>:3000/ws`
 The server keeps an in-memory map:
 ```js
 // gameId -> {
 //   id, token, board: Array(9), turn: 'X'|'O', status: 'waiting'|'playing'|'ended',
 //   players: { X: ws|null, O: ws|null }   // live socket per seat
 // }
 ```
 ### Client → Server messages
 | type | payload | meaning |
 |------|---------|---------|
 | `host` | `{ gameId }` | Host registers as seat **X** for `gameId`. |
 | `join` | `{ token }` | Joiner requests seat **O** for the game with that token. |
 | `move` | `{ cell }` | Player places a mark in `cell` (0–8). |
 | `new-round` | `{}` | Request a fresh round (after the game ended). |
 | `leave` | `{}` | Player intentionally leaves. |
 ### Server → Client messages
 | type | payload | meaning |
 |------|---------|---------|
 | `joined` | `{ you, board, turn }` | Sent to the **joiner** on successful join (and to host as `opponent-joined`). |
 | `opponent-joined` | `{ you }` | Sent to the **host** when the joiner connects; game becomes `playing`. |
 | `start` | `{ you, board, turn }` | Both clients: game is live. `you` is `'X'` or `'O'`. |
 | `move` | `{ cell, mark }` | Broadcast to **both**: a mark was placed. |
 | `end` | `{ winner, line }` | Broadcast to both: `winner` is `'X'`/`'O'`/`'draw'`, `line` is `[i,j,k]` or `null`. |
 | `new-round` | `{ board, turn }` | Broadcast to both: board cleared, X to move. |
 | `opponent-left` | `{}` | The other player disconnected/left. |
 | `error` | `{ message }` | A request was invalid (bad token, wrong turn, occupied cell, etc.). |
 ### Move validation (server-side — the source of truth)
 A `move` is accepted only if **all** are true:
 1. Game `status === 'playing'`.
 2. The sender's seat mark equals `game.turn` (it's their turn).
 3. `board[cell] === null` (cell empty).
 4. `cell` is an integer 0–8.
 If any check fails, send `{ type:'error', message }` to the sender and **do not**
 change state. This prevents race conditions from double-taps or stale clients.
 On a valid move:
 1. `board[cell] = turnMark`.
 2. `turn = (turn === 'X') ? 'O' : 'X'`.
 3. Persist to DB (board + turn + status).
 4. Check for a winner/draw (same 8 lines as the frontend).
 5. Broadcast `{ type:'move', cell, mark }` to both.
 6. If the game ended: set `status='ended'`, persist, broadcast
   `{ type:'end', winner, line }`.
 ### Turn order
 - **Host = X** (always moves first), **joiner = O**. `turn` starts at `'X'` and
  alternates. This matches the existing CPU game where X moves first.
 ### New round
 - On `new-round` (accepted only when `status === 'ended'`): reset `board` to all
  `null`, `turn='X'`, `status='playing'`, persist, broadcast `{ type:'new-round' }`.
  Either player may trigger it; the first request wins, a second is ignored (already
  reset).
 ### Disconnection
 - On a socket `close`/`leave`: remove that socket from `game.players[seat]`.
 - If the game was `playing`, notify the other player `{ type:'opponent-left' }` and set
  `status='ended'` (the match can't continue without both players). Persist.
 - The remaining client shows "Opponent left" and disables the board.
 ---
 ## 8. Frontend Architecture
 The frontend is three JS files + HTML + CSS, no framework, no build step.
 ### `index.html` — screens
 The page contains three top-level **screens** (only one visible at a time):
 1. **`#screen-menu`** — the landing screen:
   - Title "Tic-Tac-Toe"
   - Button **Play vs CPU** (ghost)
   - Button **New Online Game** (primary)
 2. **`#screen-waiting`** — shown to the **host** after creating a game:
   - Title "Share this link with your opponent"
   - A read-only **link box** showing the invite link
   - **Copy Link** button (uses `navigator.clipboard`, with a `prompt()` fallback)
   - Pulsing status "Waiting for opponent…"
   - **Back to Menu** button
 3. **`#screen-game`** — the actual game (shared by CPU and online modes):
   - Scoreboard (You / Opponent / Draws) — labels adapt per mode
   - Status bar ("Your turn" / "Opponent's turn" / result)
   - 3×3 board + win-line SVG
   - Buttons: **New Game** / **Play Again** (primary), **Reset Scores** (ghost),
     **Back to Menu** (ghost)
   - Result overlay (win/loss/draw) + confetti layer + toast
 > The game screen's DOM (board, cells, scoreboard, status, overlay) is **shared**
 > between CPU and online modes. The JS modules drive it.
 ### `app.js` — shared logic + routing (NEW)
 Responsibilities:
 - **Routing on load**: read `new URLSearchParams(location.search).get('token')`.
  - If a `token` is present → **joiner flow**: call
    `Multiplayer.init({ asJoiner: true, token })` and show the game screen (in a
    "connecting" state).
  - Otherwise → show **`#screen-menu`**.
 - **Screen management**: `showScreen('menu' | 'waiting' | 'game')` toggles
  `display` on the three screens.
 - **Board building**: create the 9 `<button class="cell">` cells **once** and own the
  cell `click` handler. The handler delegates to the active mode:
  ```js
  function onCellTap(i) {
    if (activeMode === 'cpu')    CpuGame.handleMove(i);
    if (activeMode === 'online') Multiplayer.handleMove(i);
  }
  ```
 - **Shared rendering** (used by both modes): `renderMark(i, mark)`,
  `renderStatus(text, mode)`, `drawWinLine(line)`, `clearWinLine()`,
  `showOverlay(title, winner)`, `hideOverlay()`, `burstConfetti()`,
  `renderScores(changed)`, `clearBoard()` (reset all cells to empty), `resetScores()`.
 - **Mode lifecycle**:
  - `startCpuMode()`: show game screen, `activeMode='cpu'`, `CpuGame.init()`.
  - `startOnlineHost({ id, token, link })`: show waiting screen, `activeMode='online'`,
    `Multiplayer.init({ asHost: true, id, token, link })`.
  - `backToMenu()`: destroy the active mode (`CpuGame.destroy()` /
    `Multiplayer.destroy()`), `activeMode=null`, show menu.
 - **Scoreboard labels**: in CPU mode "You (X) / CPU (O)"; in online mode
  "You (X) / Opponent (O)" for the host, "Opponent (X) / You (O)" for the joiner.
 ### `game.js` — CPU engine (refactored)
 The original monolith is refactored into a module exposing a global `CpuGame`:
 - `CpuGame.init()` — set state (`board`, `turn='X'`, `gameOver=false`), load scores
  from `localStorage`, render. **Does not auto-run on page load** (the menu comes
  first). Must be idempotent: `clearBoard()` before building state.
 - `CpuGame.handleMove(i)` — the local player's X move: validate (not game over,
  `turn==='X'`, cell empty), place X via `App.renderMark`, check winner; if not over,
  set `turn='O'`, show "CPU is thinking…", schedule `cpuMove` after 600 ms.
 - `CpuGame.cpuMove()` — pick a random empty cell, place O via `App.renderMark`, check
  end; else `turn='X'`, "Your turn".
 - `CpuGame.newRound()` — clear board, `turn='X'`, `gameOver=false`, hide overlay.
 - `CpuGame.resetScores()` — zero scores, persist, render.
 - `CpuGame.destroy()` — clear the CPU timer, reset state.
 - All rendering goes through `App.*` (shared). The win-detection (`checkWinner`,
  `WIN_LINES`) lives here and is reused by the online mode via `App` (see below).
 > **Win detection is shared.** `checkWinner(board)` and `WIN_LINES` are defined once
 > (in `game.js`) and exposed as `App.checkWinner` / `App.WIN_LINES` so `multiplayer.js`
 > can use the exact same logic for local prediction/animation. The **server** has its
 > own identical copy (it must, since it's the source of truth).
 ### `multiplayer.js` — online engine (NEW)
 A module exposing a global `Multiplayer`:
 - `Multiplayer.init({ asHost, asJoiner, id, token, link })`:
  - Store config. Open `new WebSocket('ws(s)://' + location.host + '/ws')`.
  - On `open`:
    - Host → send `{ type:'host', gameId: id }`.
    - Joiner → send `{ type:'join', token }`.
  - Message handlers (see table below) update local state and call `App.*` to render.
  - Track `myMark` (`'X'` for host, `'O'` for joiner) and `myTurn` (derived from
    `game.turn === myMark`).
 - `Multiplayer.handleMove(i)`:
  - Local guard: game active, `myTurn`, cell empty. (The server re-validates.)
  - **Optimistic** local render for snappy feel, then send `{ type:'move', cell:i }`.
    (The authoritative `move` broadcast from the server re-renders both sides
    idempotently — `renderMark` overwrites, so no conflict.)
 - `Multiplayer.newRound()`: send `{ type:'new-round' }`.
 - `Multiplayer.destroy()`: send `{ type:'leave' }`, close the socket, reset state.
 - **Waiting screen** (host only): show the link + Copy button + "Waiting for
  opponent…". When `opponent-joined`/`start` arrives, switch to the game screen.
 - **Message handlers**:
  | msg | action |
  |-----|--------|
  | `joined` / `start` | set `myMark`, board, turn; render board; show game screen; status "Your turn"/"Opponent's turn". |
  | `opponent-joined` | (host) game is live; show game screen. |
  | `move` | `App.renderMark(cell, mark)`; update local board; if `cell` is mine, it's now opponent's turn; re-render status. |
  | `end` | update score, `App.drawWinLine(line)` if line, show overlay (confetti if I won), status text. |
  | `new-round` | `App.clearBoard()`; reset local board/turn; status "Your turn"/"Opponent's turn". |
  | `opponent-left` | show "Opponent left" overlay/toast; disable board. |
  | `error` | toast the message. |
  | socket `close` | toast "Connection lost"; show back-to-menu. |
 - **Scoring in online mode**: track wins/losses/draws **for the match** (not
  `localStorage`) — reset when the match ends. Display in the scoreboard. (Persisting
  online scores to `localStorage` is a possible later enhancement; keep it in-memory
  for the MVP.)
 ### `style.css` — additions
 - Styles for `#screen-menu` (two big buttons, centered), `#screen-waiting` (link box,
  copy button, pulsing "waiting" text), and the "Back to Menu" ghost button.
 - Reuse the existing glassmorphism theme tokens (`.btn`, `.chip`, `.cell`, overlay,
  confetti, toast) — the game screen is unchanged visually.
 - A `.link-box` (read-only, selectable text, monospace-ish, with a copy affordance).
 - `.waiting-pulse` reuses the existing `status-pulse` keyframes.
 ---
 ## 9. Step-by-Step Implementation (for a junior dev)
 > Work top-down. After each step, run the **Verify** item before moving on.
 ### Step 0 — Bootstrap the server
 - Create `server/package.json`:
  ```json
  {
    "name": "ttt-server",
    "private": true,
    "type": "commonjs",
    "scripts": { "start": "node server.js" },
    "dependencies": {
      "express": "^5.2.1",
      "ws": "^8.21.3",
      "sql.js": "^1.14.2"
    }
  }
  ```
 - Install: `cd server && corepack pnpm@9 install` (or `pnpm install` if pnpm is on PATH).
 - **Verify**: `node -e "require('express');require('ws');require('sql.js');console.log('ok')"`
  prints `ok` (add `process.exit(0)` if the process lingers).
 ### Step 1 — `server/db.js` (SQLite wrapper)
 - Use `sql.js`. On startup: load `data/games.db` if it exists, else create a new DB and
  run the `CREATE TABLE games (...)` schema (§5).
 - Provide helpers:
  - `createGame({ id, token })` → insert row (`status='waiting'`, `board='null'`,
    `turn='X'`, timestamps).
  - `getGameByToken(token)` → row or `null`.
  - `getGameById(id)` → row or `null`.
  - `updateGame(id, { status, board, turn })` → `UPDATE`.
  - `persist()` → `db.export()` → write bytes to `data/games.db`.
 - Persist after every mutation (cheap for a tiny DB).
 - **Verify**: a tiny script that creates a game, reads it back by token, updates it,
  re-loads the file, and confirms the row survived.
 ### Step 2 — `server/server.js` (HTTP + WS + game loop)
 - Express app:
  - `app.use(express.static(path.join(__dirname, '../public')))`.
  - `app.post('/api/games', ...)` → create game via `db.createGame`, return
    `{ id, token, link }` (201). Build `link` from `req` origin.
  - `app.get('/api/health', ...)` → `{ ok: true }`.
  - SPA fallback: `app.get('*', ...)` → serve `public/index.html` (so `/?token=…`
    loads the app).
 - WebSocket server (`ws`):
  - Attach to the HTTP server on path `/ws`.
  - Maintain the `games` Map (§7). On `host`/`join` messages, resolve the game (from
    memory or DB), attach the socket to the seat, and when both seats are filled set
    `status='playing'` and broadcast `start`.
  - Implement move validation (§7), new-round, disconnection handling.
 - **Verify** (with two browser tabs or `wscat`):
  - Tab A: create game (via the UI or `curl -X POST localhost:3000/api/games`), see the
    link.
  - Tab B: open the link, both tabs show "start", play a few moves — both boards update
    in real time. Test a win (win-line draws on both), a draw, and "Play Again".
 ### Step 3 — Frontend restructure
 - Move `index.html`, `style.css`, `game.js` into `public/` (already done via `git mv`).
 - Rewrite `index.html` to contain the three screens (§8) with only `#screen-menu`
  visible initially. Keep the existing board/scoreboard/overlay markup inside
  `#screen-game`. Add `<script>` tags for `app.js`, `game.js`, `multiplayer.js`
  (order: `game.js`, `multiplayer.js`, then `app.js` so `App` is defined last and can
  reference the others — or use `defer` and call `App.init()` on `DOMContentLoaded`).
 - **Verify**: opening the app shows the menu with two buttons; no console errors.
 ### Step 4 — `public/app.js` (shared + routing)
 - Implement screen management, board building, shared rendering (move the rendering
  functions out of `game.js` into `app.js`), cell-click delegation, mode lifecycle,
  and token-based routing (§8).
 - **Verify**: "Play vs CPU" starts the existing CPU game exactly as before (win, draw,
  confetti, scores persist). "Back to Menu" returns to the menu and re-entering CPU
  mode works cleanly (no duplicate cells).
 ### Step 5 — `public/game.js` (CPU refactor)
 - Refactor the original into the `CpuGame` module (§8): remove the auto `init()` call,
  expose `init/handleMove/cpuMove/newRound/resetScores/destroy`, and route all
  rendering through `App.*`.
 - **Verify**: CPU mode is unchanged in behavior (see Step 4 verify).
 ### Step 6 — `public/multiplayer.js` (online engine)
 - Implement `Multiplayer` (§8): WebSocket connect, host/join handshake, message
  handlers, optimistic move, waiting screen, scoring, disconnection handling.
 - **Verify** (two tabs / two browsers):
  - Host: New Online Game → link appears → copy.
  - Joiner: open link → both show the board → host is X, joiner is O.
  - Alternate moves; both boards stay in sync in real time.
  - Win → win-line + confetti on the winner's side, "You Win"/"Opponent wins" on each.
  - Draw → "It's a Draw" on both.
  - Play Again → both boards clear, X (host) to move.
  - Close one tab → the other shows "Opponent left".
 ### Step 7 — Styling
 - Add menu/waiting/back-button styles (§8). Match the existing glassmorphism theme.
 - **Verify**: at 360 px width, no overflow; buttons are big touch targets; the link box
  is tappable to select/copy.
 ### Step 8 — Docker
 - `Dockerfile` (multi-stage or single-stage on `node:20-alpine`):
  - `WORKDIR /app/server`
  - Copy `server/package.json` + `server/package-lock` (pnpm-lock.yaml), install deps.
  - Copy `server/*.js`.
  - Copy `../public` to `/app/public`.
  - `EXPOSE 3000`, `CMD ["node","server.js"]`.
  - For `sql.js`, the WASM file is in `node_modules/sql.js/dist` — it's loaded from
    `node_modules`, so copying `node_modules` (or installing in the image) is required.
 - `docker-compose.yml`: one service, `build: .`, `ports: ["3000:3000"]`, a volume for
  `./server/data:/app/server/data` (SQLite persistence), `restart: unless-stopped`.
 - **Verify**: `docker compose up --build` → open `http://localhost:3000` → full
  multiplayer flow works. Restart the container → an existing invite token still
  resolves (DB persisted on the volume).
 ### Step 9 — Final test pass
 - Full end-to-end on a mid-range phone + desktop: create, share, join, play, win,
  draw, play again, disconnect, reload.
 - Check the 360 px viewport, fast taps (no double placement — the server rejects
  out-of-turn/occupied moves), and connection loss.
 ---
 ## 10. Security & Robustness Notes (MVP-aware)
 - **Server is the source of truth.** The client's optimistic render is cosmetic; the
  server validates every move (§7). A tampered client cannot cheat.
 - **Tokens** are 16 hex chars (64 bits) — fine for an MVP. For public internet use,
  lengthen them and/or add a TTL (expire `waiting` games after e.g. 10 min) and an
  `expires_at` column.
 - **No auth** by design (anonymous 2-player game). Don't expose personal data.
 - **Rate limiting / abuse**: out of scope for the MVP; add in front of a reverse proxy
  for public use.
 - **HTTPS**: terminate TLS at a reverse proxy (Caddy/nginx) for internet play; the
  app itself serves plain HTTP for LAN/dev.
 - **CORS**: same-origin (the server serves the frontend), so no CORS config needed.
 ---
 ## 11. Testing Checklist
 - [ ] Menu shows two options; no console errors.
 - [ ] CPU mode unchanged (win/draw/confetti/scores/back-to-menu).
 - [ ] New Online Game returns a valid link; Copy works.
 - [ ] Joiner opens link → connects to the host's game (host = X, joiner = O).
 - [ ] Moves sync in real time on both boards.
 - [ ] Out-of-turn / occupied / double-tap moves are rejected by the server.
 - [ ] Win → win-line + confetti on winner, correct status on both.
 - [ ] Draw → "It's a Draw" on both.
 - [ ] Play Again resets both boards, X (host) to move.
 - [ ] Disconnect → the other player is notified; match ends.
 - [ ] Server restart → an existing token still resolves (SQLite persisted).
 - [ ] 360 px viewport: no overflow, big touch targets, no zoom on tap.
 - [ ] Docker container starts and serves the full flow.
 ---
 ## 12. Future Work (post-MVP)
 - **Postgres**: swap the `db.js` wrapper's storage from `sql.js` to `pg`/`postgres`.
  The schema (§5) and query helpers stay the same shape; only the driver changes. The
  in-memory `games` Map and WebSocket layer are unaffected.
 - Reconnection/resume (client re-attaches to a `playing` game by token/id).
 - Fair X/O randomization per round; player names; match history/leaderboard in the DB.
 - Token TTL + cleanup job; matchmaking beyond a single invite link.
 - HTTPS/TLS, rate limiting, and a reverse proxy for public internet deployment.
 ---
 ## 13. How to Run (local, no Docker)
 ```bash
 # 1. Install server deps (once)
 cd server && corepack pnpm@9 install && cd ..
 # 2. Start the server (serves the frontend + API + WebSocket on :3000)
 node server/server.js
 #    → http://localhost:3000
 # 3. Play:
 #    - Open http://localhost:3000 in two browser tabs (or two browsers / a phone on
 #      the same network using http://<machine-ip>:3000).
 #    - Tab A: New Online Game → copy the link.
 #    - Tab B: open the link → play together.
 ```
@@ -0,0 +1,92 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="420" height="780" viewBox="0 0 420 780" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif">
  <defs>
    <linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#0d0f24"/>
      <stop offset="1" stop-color="#1c1140"/>
    </linearGradient>
    <linearGradient id="titleGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#22d3ee"/>
      <stop offset="1" stop-color="#f472b6"/>
    </linearGradient>
    <linearGradient id="btnGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#22d3ee"/>
      <stop offset="1" stop-color="#f472b6"/>
    </linearGradient>
    <filter id="blob" x="-80%" y="-80%" width="260%" height="260%">
      <feGaussianBlur stdDeviation="55"/>
    </filter>
    <filter id="glow" x="-60%" y="-60%" width="220%" height="220%">
      <feGaussianBlur stdDeviation="5" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  <rect width="420" height="780" fill="url(#bgGrad)"/>
  <circle cx="70" cy="170" r="130" fill="#22d3ee" opacity="0.22" filter="url(#blob)"/>
  <circle cx="350" cy="580" r="150" fill="#f472b6" opacity="0.18" filter="url(#blob)"/>
  <!-- title -->
  <text x="210" y="66" text-anchor="middle" font-size="30" font-weight="700" fill="url(#titleGrad)">Tic-Tac-Toe</text>
  <text x="210" y="88" text-anchor="middle" font-size="12" fill="#ffffff" opacity="0.45">Online · You are X</text>
  <!-- scoreboard -->
  <g>
    <rect x="18" y="104" width="120" height="64" rx="16" fill="#ffffff" fill-opacity="0.06" stroke="#ffffff" stroke-opacity="0.14"/>
    <text x="78" y="128" text-anchor="middle" font-size="11" letter-spacing="1.5" fill="#ffffff" opacity="0.55">YOU (X)</text>
    <text x="78" y="156" text-anchor="middle" font-size="22" font-weight="700" fill="#22d3ee">1</text>
    <rect x="150" y="104" width="120" height="64" rx="16" fill="#ffffff" fill-opacity="0.06" stroke="#ffffff" stroke-opacity="0.14"/>
    <text x="210" y="128" text-anchor="middle" font-size="11" letter-spacing="1.5" fill="#ffffff" opacity="0.55">FRIEND (O)</text>
    <text x="210" y="156" text-anchor="middle" font-size="22" font-weight="700" fill="#f472b6">0</text>
    <rect x="282" y="104" width="120" height="64" rx="16" fill="#ffffff" fill-opacity="0.06" stroke="#ffffff" stroke-opacity="0.14"/>
    <text x="342" y="128" text-anchor="middle" font-size="11" letter-spacing="1.5" fill="#ffffff" opacity="0.55">DRAWS</text>
    <text x="342" y="156" text-anchor="middle" font-size="22" font-weight="700" fill="#ffffff">0</text>
  </g>
  <!-- status -->
  <text x="210" y="200" text-anchor="middle" font-size="14" fill="#22d3ee" opacity="0.9">Your turn</text>
  <!-- board panel -->
  <rect x="40" y="220" width="340" height="340" rx="24" fill="#ffffff" fill-opacity="0.05" stroke="#ffffff" stroke-opacity="0.12"/>
  <!-- cells -->
  <g fill="#ffffff" fill-opacity="0.06" stroke="#ffffff" stroke-opacity="0.10">
    <rect x="54" y="234" width="96" height="96" rx="16"/>
    <rect x="162" y="234" width="96" height="96" rx="16"/>
    <rect x="270" y="234" width="96" height="96" rx="16"/>
    <rect x="54" y="342" width="96" height="96" rx="16"/>
    <rect x="162" y="342" width="96" height="96" rx="16"/>
    <rect x="270" y="342" width="96" height="96" rx="16"/>
    <rect x="54" y="450" width="96" height="96" rx="16"/>
    <rect x="162" y="450" width="96" height="96" rx="16"/>
    <rect x="270" y="450" width="96" height="96" rx="16"/>
  </g>
  <!-- marks -->
  <g filter="url(#glow)" stroke="#22d3ee" stroke-width="7" stroke-linecap="round">
    <line x1="80" y1="260" x2="124" y2="304"/>
    <line x1="124" y1="260" x2="80" y2="304"/>
  </g>
  <circle cx="210" cy="282" r="24" fill="none" stroke="#f472b6" stroke-width="7" filter="url(#glow)"/>
  <circle cx="102" cy="390" r="24" fill="none" stroke="#f472b6" stroke-width="7" filter="url(#glow)"/>
  <g filter="url(#glow)" stroke="#22d3ee" stroke-width="7" stroke-linecap="round">
    <line x1="188" y1="368" x2="232" y2="412"/>
    <line x1="232" y1="368" x2="188" y2="412"/>
  </g>
  <g filter="url(#glow)" stroke="#22d3ee" stroke-width="7" stroke-linecap="round">
    <line x1="296" y1="368" x2="340" y2="412"/>
    <line x1="340" y1="368" x2="296" y2="412"/>
  </g>
  <circle cx="210" cy="498" r="24" fill="none" stroke="#f472b6" stroke-width="7" filter="url(#glow)"/>
  <!-- buttons -->
  <rect x="60" y="600" width="300" height="54" rx="27" fill="url(#btnGrad)"/>
  <text x="210" y="633" text-anchor="middle" font-size="16" font-weight="700" fill="#0d1025">Play Again</text>
  <rect x="60" y="668" width="300" height="48" rx="24" fill="#ffffff" fill-opacity="0.05" stroke="#ffffff" stroke-opacity="0.18"/>
  <text x="210" y="697" text-anchor="middle" font-size="14" fill="#ffffff" opacity="0.7">Back to Menu</text>
 </svg>
@@ -0,0 +1,63 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="420" height="780" viewBox="0 0 420 780" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif">
  <defs>
    <linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#0d0f24"/>
      <stop offset="1" stop-color="#1c1140"/>
    </linearGradient>
    <linearGradient id="titleGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#22d3ee"/>
      <stop offset="1" stop-color="#f472b6"/>
    </linearGradient>
    <linearGradient id="btnGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#22d3ee"/>
      <stop offset="1" stop-color="#f472b6"/>
    </linearGradient>
    <filter id="blob" x="-80%" y="-80%" width="260%" height="260%">
      <feGaussianBlur stdDeviation="55"/>
    </filter>
    <filter id="glow" x="-60%" y="-60%" width="220%" height="220%">
      <feGaussianBlur stdDeviation="5" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  <!-- background -->
  <rect width="420" height="780" fill="url(#bgGrad)"/>
  <circle cx="70" cy="170" r="130" fill="#22d3ee" opacity="0.22" filter="url(#blob)"/>
  <circle cx="350" cy="580" r="150" fill="#f472b6" opacity="0.18" filter="url(#blob)"/>
  <!-- title -->
  <text x="210" y="150" text-anchor="middle" font-size="34" font-weight="800" fill="url(#titleGrad)">Tic-Tac-Toe</text>
  <text x="210" y="184" text-anchor="middle" font-size="14" fill="#ffffff" opacity="0.5">Choose how to play</text>
  <!-- decorative mini board hint -->
  <g opacity="0.5">
    <rect x="150" y="230" width="120" height="120" rx="18" fill="#ffffff" fill-opacity="0.05" stroke="#ffffff" stroke-opacity="0.12"/>
    <g stroke="#ffffff" stroke-opacity="0.18" stroke-width="2">
      <line x1="190" y1="240" x2="190" y2="340"/>
      <line x1="230" y1="240" x2="230" y2="340"/>
      <line x1="160" y1="270" x2="340" y2="270" transform="translate(-10,0)"/>
      <line x1="160" y1="310" x2="340" y2="310" transform="translate(-10,0)"/>
    </g>
    <g filter="url(#glow)" stroke="#22d3ee" stroke-width="5" stroke-linecap="round">
      <line x1="168" y1="252" x2="186" y2="270"/>
      <line x1="186" y1="252" x2="168" y2="270"/>
    </g>
    <circle cx="272" cy="322" r="12" fill="none" stroke="#f472b6" stroke-width="5" filter="url(#glow)"/>
  </g>
  <!-- buttons -->
  <!-- primary: New Online Game -->
  <rect x="60" y="470" width="300" height="58" rx="29" fill="url(#btnGrad)"/>
  <text x="210" y="505" text-anchor="middle" font-size="17" font-weight="700" fill="#0d1025">New Online Game</text>
  <!-- ghost: Play vs CPU -->
  <rect x="60" y="548" width="300" height="54" rx="27" fill="#ffffff" fill-opacity="0.05" stroke="#ffffff" stroke-opacity="0.18"/>
  <text x="210" y="580" text-anchor="middle" font-size="16" font-weight="600" fill="#ffffff" opacity="0.75">Play vs CPU</text>
  <!-- hint -->
  <text x="210" y="648" text-anchor="middle" font-size="12" fill="#ffffff" opacity="0.4">Online: share a link and play a friend</text>
 </svg>
@@ -0,0 +1,51 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="420" height="780" viewBox="0 0 420 780" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif">
  <defs>
    <linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#0d0f24"/>
      <stop offset="1" stop-color="#1c1140"/>
    </linearGradient>
    <linearGradient id="titleGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#22d3ee"/>
      <stop offset="1" stop-color="#f472b6"/>
    </linearGradient>
    <filter id="blob" x="-80%" y="-80%" width="260%" height="260%">
      <feGaussianBlur stdDeviation="55"/>
    </filter>
    <filter id="glow" x="-60%" y="-60%" width="220%" height="220%">
      <feGaussianBlur stdDeviation="5" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  <rect width="420" height="780" fill="url(#bgGrad)"/>
  <circle cx="70" cy="170" r="130" fill="#22d3ee" opacity="0.22" filter="url(#blob)"/>
  <circle cx="350" cy="580" r="150" fill="#f472b6" opacity="0.18" filter="url(#blob)"/>
  <!-- header -->
  <text x="210" y="120" text-anchor="middle" font-size="28" font-weight="800" fill="url(#titleGrad)">Invite a friend</text>
  <text x="210" y="152" text-anchor="middle" font-size="14" fill="#ffffff" opacity="0.5">Share this link to start playing</text>
  <!-- link card -->
  <rect x="50" y="200" width="320" height="70" rx="16" fill="#ffffff" fill-opacity="0.06" stroke="#ffffff" stroke-opacity="0.16"/>
  <text x="210" y="232" text-anchor="middle" font-size="14" fill="#22d3ee" font-family="monospace">https://game1.app/?token=a3f9c21b7e4d08f5</text>
  <text x="210" y="254" text-anchor="middle" font-size="11" fill="#ffffff" opacity="0.4">Your invite link</text>
  <!-- copy button -->
  <rect x="110" y="300" width="200" height="50" rx="25" fill="url(#titleGrad)"/>
  <text x="210" y="331" text-anchor="middle" font-size="15" font-weight="700" fill="#0d1025">Copy link</text>
  <!-- waiting indicator -->
  <g>
    <circle cx="185" cy="430" r="8" fill="#22d3ee" filter="url(#glow)" opacity="0.9"/>
    <circle cx="210" cy="430" r="8" fill="#22d3ee" filter="url(#glow)" opacity="0.55"/>
    <circle cx="235" cy="430" r="8" fill="#22d3ee" filter="url(#glow)" opacity="0.3"/>
  </g>
  <text x="210" y="472" text-anchor="middle" font-size="15" fill="#ffffff" opacity="0.65">Waiting for opponent to join...</text>
  <!-- back button -->
  <rect x="130" y="640" width="160" height="48" rx="24" fill="#ffffff" fill-opacity="0.05" stroke="#ffffff" stroke-opacity="0.18"/>
  <text x="210" y="670" text-anchor="middle" font-size="14" font-weight="600" fill="#ffffff" opacity="0.7">Back to menu</text>
 </svg>
@@ -1,315 +0,0 @@
 'use strict';
 /* ---------- 1. DOM refs ---------- */
 const boardEl = document.getElementById('board');
 const statusEl = document.getElementById('status');
 const statusTextEl = document.getElementById('status-text');
 const overlayEl = document.getElementById('overlay');
 const overlayTitleEl = document.getElementById('overlay-title');
 const winLineEl = document.getElementById('win-line-el');
 const confettiLayer = document.getElementById('confetti-layer');
 const toastEl = document.getElementById('toast');
 const scoreEls = {
  you: document.getElementById('score-you'),
  cpu: document.getElementById('score-cpu'),
  draws: document.getElementById('score-draws'),
 };
 const cells = [];
 /* ---------- state ---------- */
 const state = {
  board: Array(9).fill(null),
  turn: 'X',
  gameOver: false,
  scores: { you: 0, cpu: 0, draws: 0 },
 };
 let cpuTimer = 0;
 let toastTimer = 0;
 const WIN_LINES = [
  [0, 1, 2], [3, 4, 5], [6, 7, 8],
  [0, 3, 6], [1, 4, 7], [2, 5, 8],
  [0, 4, 8], [2, 4, 6],
 ];
 const SCORES_KEY = 'ttt-scores';
 const CPU_DELAY = 600;
 const X_SVG =
  '<svg viewBox="0 0 100 100" class="mark mark-x" aria-hidden="true">' +
  '<line x1="24" y1="24" x2="76" y2="76"></line>' +
  '<line x1="76" y1="24" x2="24" y2="76"></line>' +
  '</svg>';
 const O_SVG =
  '<svg viewBox="0 0 100 100" class="mark mark-o" aria-hidden="true">' +
  '<circle cx="50" cy="50" r="30"></circle>' +
  '</svg>';
 /* ---------- 2. Win detection ---------- */
 function checkWinner(board) {
  for (const line of WIN_LINES) {
    const [a, b, c] = line;
    if (board[a] && board[a] === board[b] && board[a] === board[c]) {
      return { winner: board[a], line };
    }
  }
  if (board.every((v) => v !== null)) return { winner: 'draw' };
  return null;
 }
 /* ---------- 3. Player move ---------- */
 function onCellTap(i) {
  if (state.gameOver || state.turn !== 'X' || state.board[i]) return;
  placeMark(i, 'X');
  const result = checkWinner(state.board);
  if (result) {
    endRound(result);
    return;
  }
  state.turn = 'O';
  renderStatus('CPU is thinking…', 'thinking');
  cpuTimer = setTimeout(cpuMove, CPU_DELAY);
 }
 /* ---------- 4. CPU move ---------- */
 function cpuMove() {
  if (state.gameOver) return;
  const empty = [];
  state.board.forEach((v, i) => {
    if (v === null) empty.push(i);
  });
  if (!empty.length) return;
  const i = empty[Math.floor(Math.random() * empty.length)];
  placeMark(i, 'O');
  const result = checkWinner(state.board);
  if (result) {
    endRound(result);
    return;
  }
  state.turn = 'X';
  renderStatus('Your turn', 'normal');
 }
 function placeMark(i, mark) {
  state.board[i] = mark;
  renderMark(i, mark);
 }
 /* ---------- 5. Render ---------- */
 function renderMark(i, mark) {
  const cell = cells[i];
  cell.classList.remove('empty');
  cell.classList.add(mark === 'X' ? 'has-x' : 'has-o');
  cell.setAttribute('aria-label', mark === 'X' ? 'X' : 'O');
  cell.innerHTML = mark === 'X' ? X_SVG : O_SVG;
 }
 function renderStatus(text, mode) {
  mode = mode || 'normal';
  statusEl.classList.toggle('thinking', mode === 'thinking');
  if (statusTextEl.textContent === text) return;
  statusEl.classList.add('fading');
  setTimeout(() => {
    statusTextEl.textContent = text;
    statusEl.classList.remove('fading');
  }, 150);
 }
 function renderScores(changed) {
  for (const k of ['you', 'cpu', 'draws']) {
    scoreEls[k].textContent = state.scores[k];
    if (k === changed) {
      scoreEls[k].classList.remove('pop');
      void scoreEls[k].offsetWidth;
      scoreEls[k].classList.add('pop');
    }
  }
 }
 function cellCenter(i, boardRect) {
  const r = cells[i].getBoundingClientRect();
  return {
    x: r.left + r.width / 2 - boardRect.left,
    y: r.top + r.height / 2 - boardRect.top,
  };
 }
 function drawWinLine(line) {
  const boardRect = boardEl.getBoundingClientRect();
  const p1 = cellCenter(line[0], boardRect);
  const p2 = cellCenter(line[2], boardRect);
  const dx = p2.x - p1.x;
  const dy = p2.y - p1.y;
  const len = Math.hypot(dx, dy) || 1;
  const ext = 16;
  const ux = dx / len;
  const uy = dy / len;
  const x1 = p1.x - ux * ext;
  const y1 = p1.y - uy * ext;
  const x2 = p2.x + ux * ext;
  const y2 = p2.y + uy * ext;
  winLineEl.setAttribute('x1', x1);
  winLineEl.setAttribute('y1', y1);
  winLineEl.setAttribute('x2', x2);
  winLineEl.setAttribute('y2', y2);
  const total = Math.hypot(x2 - x1, y2 - y1);
  winLineEl.style.transition = 'none';
  winLineEl.style.strokeDasharray = total;
  winLineEl.style.strokeDashoffset = total;
  winLineEl.style.opacity = '1';
  void winLineEl.getBoundingClientRect();
  winLineEl.style.transition = 'stroke-dashoffset 400ms ease';
  winLineEl.style.strokeDashoffset = '0';
 }
 function clearWinLine() {
  winLineEl.style.transition = 'none';
  winLineEl.style.opacity = '0';
  winLineEl.style.strokeDashoffset = winLineEl.style.strokeDasharray;
 }
 /* ---------- 6. Round end ---------- */
 function endRound(result) {
  state.gameOver = true;
  let title;
  let key;
  if (result.winner === 'X') {
    key = 'you';
    title = 'You Win! 🎉';
    renderStatus('You win! 🎉', 'normal');
  } else if (result.winner === 'O') {
    key = 'cpu';
    title = 'CPU Wins';
    renderStatus('CPU wins', 'normal');
    boardEl.classList.add('shake');
  } else {
    key = 'draws';
    title = "It's a Draw";
    renderStatus("It's a draw", 'normal');
    boardEl.classList.add('pulse');
  }
  state.scores[key]++;
  persistScores();
  renderScores(key);
  if (result.line) drawWinLine(result.line);
  setTimeout(() => {
    overlayTitleEl.textContent = title;
    overlayEl.classList.add('show');
    if (result.winner === 'X') burstConfetti();
  }, result.winner === 'draw' ? 400 : 600);
 }
 /* ---------- 7. Confetti ---------- */
 const CONFETTI_COLORS = ['#22d3ee', '#f472b6', '#a78bfa', '#fbbf24', '#34d399', '#ffffff'];
 function burstConfetti() {
  const pieces = [];
  for (let i = 0; i < 40; i++) {
    const el = document.createElement('div');
    el.className = 'confetti';
    const size = 6 + Math.random() * 8;
    el.style.width = size + 'px';
    el.style.height = size * 1.4 + 'px';
    el.style.left = Math.random() * 100 + 'vw';
    el.style.background = CONFETTI_COLORS[Math.floor(Math.random() * CONFETTI_COLORS.length)];
    el.style.setProperty('--drift', (Math.random() * 160 - 80) + 'px');
    el.style.setProperty('--spin', (360 + Math.random() * 720) + 'deg');
    el.style.animationDuration = 1.3 + Math.random() * 0.5 + 's';
    el.style.animationDelay = Math.random() * 0.25 + 's';
    confettiLayer.appendChild(el);
    pieces.push(el);
  }
  setTimeout(() => pieces.forEach((p) => p.remove()), 2200);
 }
 /* ---------- 8. Reset ---------- */
 function newRound() {
  clearTimeout(cpuTimer);
  state.board = Array(9).fill(null);
  state.turn = 'X';
  state.gameOver = false;
  cells.forEach((cell) => {
    cell.innerHTML = '';
    cell.classList.add('empty');
    cell.classList.remove('has-x', 'has-o');
    cell.setAttribute('aria-label', 'Empty cell');
  });
  clearWinLine();
  boardEl.classList.remove('shake', 'pulse');
  overlayEl.classList.remove('show');
  confettiLayer.innerHTML = '';
  renderStatus('Your turn', 'normal');
 }
 function resetScores() {
  state.scores = { you: 0, cpu: 0, draws: 0 };
  persistScores();
  renderScores();
  showToast('Scores reset');
 }
 function persistScores() {
  try {
    localStorage.setItem(SCORES_KEY, JSON.stringify(state.scores));
  } catch (e) {
    /* storage unavailable */
  }
 }
 function loadScores() {
  try {
    const raw = localStorage.getItem(SCORES_KEY);
    if (raw) {
      const s = JSON.parse(raw);
      state.scores = {
        you: Number(s.you) || 0,
        cpu: Number(s.cpu) || 0,
        draws: Number(s.draws) || 0,
      };
    }
  } catch (e) {
    /* corrupted storage — keep defaults */
  }
 }
 function showToast(msg) {
  toastEl.textContent = msg;
  toastEl.classList.add('show');
  clearTimeout(toastTimer);
  toastTimer = setTimeout(() => toastEl.classList.remove('show'), 1600);
 }
 /* ---------- 9. Init ---------- */
 function buildBoard() {
  for (let i = 0; i < 9; i++) {
    const cell = document.createElement('button');
    cell.type = 'button';
    cell.className = 'cell empty';
    cell.dataset.index = String(i);
    cell.setAttribute('aria-label', 'Empty cell');
    cell.addEventListener('click', () => onCellTap(i));
    boardEl.appendChild(cell);
    cells.push(cell);
  }
 }
 function init() {
  buildBoard();
  loadScores();
  renderScores();
  document.getElementById('btn-new').addEventListener('click', newRound);
  document.getElementById('btn-reset').addEventListener('click', resetScores);
  document.getElementById('btn-again').addEventListener('click', newRound);
  renderStatus('Your turn', 'normal');
 }
 init();
@@ -1,67 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="theme-color" content="#0d0f24">
  <title>Tic-Tac-Toe</title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <div class="bg-blob blob-cyan" aria-hidden="true"></div>
  <div class="bg-blob blob-magenta" aria-hidden="true"></div>
  <main class="app">
    <h1 class="title">Tic-Tac-Toe</h1>
    <div class="scoreboard">
      <div class="chip" id="chip-you">
        <span class="chip-label">You (X)</span>
        <span class="chip-value chip-x" id="score-you">0</span>
      </div>
      <div class="chip" id="chip-cpu">
        <span class="chip-label">CPU (O)</span>
        <span class="chip-value chip-o" id="score-cpu">0</span>
      </div>
      <div class="chip" id="chip-draws">
        <span class="chip-label">Draws</span>
        <span class="chip-value" id="score-draws">0</span>
      </div>
    </div>
    <div class="status" id="status">
      <span class="status-text" id="status-text">Your turn</span>
    </div>
    <div class="board-wrap">
      <div class="board" id="board" aria-label="Tic-tac-toe board"></div>
      <svg class="win-line" id="win-line" aria-hidden="true">
        <defs>
          <linearGradient id="win-grad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stop-color="#22d3ee"></stop>
            <stop offset="1" stop-color="#f472b6"></stop>
          </linearGradient>
        </defs>
        <line id="win-line-el" stroke="url(#win-grad)" stroke-width="6" stroke-linecap="round" opacity="0"></line>
      </svg>
    </div>
    <div class="buttons">
      <button class="btn primary" id="btn-new" type="button">New Game</button>
      <button class="btn ghost" id="btn-reset" type="button">Reset Scores</button>
    </div>
  </main>
  <div class="overlay" id="overlay" aria-hidden="true">
    <div class="modal" role="dialog" aria-modal="true">
      <div class="modal-title" id="overlay-title">You Win! 🎉</div>
      <button class="btn primary" id="btn-again" type="button">Play Again</button>
    </div>
  </div>
  <div id="confetti-layer" aria-hidden="true"></div>
  <div class="toast" id="toast" aria-live="polite"></div>
  <script src="game.js"></script>
 </body>
 </html>
@@ -0,0 +1,305 @@
 'use strict';
 const BASE = location.pathname === '/' ? '' : location.pathname.replace(/\/$/, '');
 const App = (() => {
  const boardEl = document.getElementById('board');
  const statusEl = document.getElementById('status');
  const statusTextEl = document.getElementById('status-text');
  const overlayEl = document.getElementById('overlay');
  const overlayTitleEl = document.getElementById('overlay-title');
  const winLineEl = document.getElementById('win-line-el');
  const confettiLayer = document.getElementById('confetti-layer');
  const toastEl = document.getElementById('toast');
  const scoreEls = {
    you: document.getElementById('score-you'),
    opponent: document.getElementById('score-opponent'),
    draws: document.getElementById('score-draws'),
  };
  const labelYou = document.getElementById('label-you');
  const labelOpponent = document.getElementById('label-opponent');
  const cells = [];
  let toastTimer = 0;
  let activeMode = null;
  const WIN_LINES = [
    [0, 1, 2], [3, 4, 5], [6, 7, 8],
    [0, 3, 6], [1, 4, 7], [2, 5, 8],
    [0, 4, 8], [2, 4, 6],
  ];
  const X_SVG =
    '<svg viewBox="0 0 100 100" class="mark mark-x" aria-hidden="true">' +
    '<line x1="24" y1="24" x2="76" y2="76"></line>' +
    '<line x1="76" y1="24" x2="24" y2="76"></line>' +
    '</svg>';
  const O_SVG =
    '<svg viewBox="0 0 100 100" class="mark mark-o" aria-hidden="true">' +
    '<circle cx="50" cy="50" r="30"></circle>' +
    '</svg>';
  function checkWinner(board) {
    for (const line of WIN_LINES) {
      const [a, b, c] = line;
      if (board[a] && board[a] === board[b] && board[a] === board[c]) {
        return { winner: board[a], line };
      }
    }
    if (board.every((v) => v !== null)) return { winner: 'draw' };
    return null;
  }
  function showScreen(name) {
    document.getElementById('screen-menu').style.display = name === 'menu' ? '' : 'none';
    document.getElementById('screen-waiting').style.display = name === 'waiting' ? '' : 'none';
    document.getElementById('screen-game').style.display = name === 'game' ? '' : 'none';
  }
  function buildBoard() {
    boardEl.innerHTML = '';
    cells.length = 0;
    for (let i = 0; i < 9; i++) {
      const cell = document.createElement('button');
      cell.type = 'button';
      cell.className = 'cell empty';
      cell.dataset.index = String(i);
      cell.setAttribute('aria-label', 'Empty cell');
      cell.addEventListener('click', () => onCellTap(i));
      boardEl.appendChild(cell);
      cells.push(cell);
    }
  }
  function onCellTap(i) {
    if (activeMode === 'cpu') CpuGame.handleMove(i);
    if (activeMode === 'online') Multiplayer.handleMove(i);
  }
  function renderMark(i, mark) {
    const cell = cells[i];
    cell.classList.remove('empty');
    cell.classList.add(mark === 'X' ? 'has-x' : 'has-o');
    cell.setAttribute('aria-label', mark === 'X' ? 'X' : 'O');
    cell.innerHTML = mark === 'X' ? X_SVG : O_SVG;
  }
  function renderStatus(text, mode) {
    mode = mode || 'normal';
    statusEl.classList.toggle('thinking', mode === 'thinking');
    if (statusTextEl.textContent === text) return;
    statusEl.classList.add('fading');
    setTimeout(() => {
      statusTextEl.textContent = text;
      statusEl.classList.remove('fading');
    }, 150);
  }
  function renderScores(scores) {
    scoreEls.you.textContent = scores.you || 0;
    scoreEls.opponent.textContent = scores.opponent || 0;
    scoreEls.draws.textContent = scores.draws || 0;
  }
  function cellCenter(i, boardRect) {
    const r = cells[i].getBoundingClientRect();
    return {
      x: r.left + r.width / 2 - boardRect.left,
      y: r.top + r.height / 2 - boardRect.top,
    };
  }
  function drawWinLine(line) {
    const boardRect = boardEl.getBoundingClientRect();
    const p1 = cellCenter(line[0], boardRect);
    const p2 = cellCenter(line[2], boardRect);
    const dx = p2.x - p1.x;
    const dy = p2.y - p1.y;
    const len = Math.hypot(dx, dy) || 1;
    const ext = 16;
    const ux = dx / len;
    const uy = dy / len;
    const x1 = p1.x - ux * ext;
    const y1 = p1.y - uy * ext;
    const x2 = p2.x + ux * ext;
    const y2 = p2.y + uy * ext;
    winLineEl.setAttribute('x1', x1);
    winLineEl.setAttribute('y1', y1);
    winLineEl.setAttribute('x2', x2);
    winLineEl.setAttribute('y2', y2);
    const total = Math.hypot(x2 - x1, y2 - y1);
    winLineEl.style.transition = 'none';
    winLineEl.style.strokeDasharray = total;
    winLineEl.style.strokeDashoffset = total;
    winLineEl.style.opacity = '1';
    void winLineEl.getBoundingClientRect();
    winLineEl.style.transition = 'stroke-dashoffset 400ms ease';
    winLineEl.style.strokeDashoffset = '0';
  }
  function clearWinLine() {
    winLineEl.style.transition = 'none';
    winLineEl.style.opacity = '0';
    winLineEl.style.strokeDashoffset = winLineEl.style.strokeDasharray;
  }
  function showOverlay(title) {
    overlayTitleEl.textContent = title;
    overlayEl.classList.add('show');
  }
  function hideOverlay() {
    overlayEl.classList.remove('show');
  }
  const CONFETTI_COLORS = ['#22d3ee', '#f472b6', '#a78bfa', '#fbbf24', '#34d399', '#ffffff'];
  function burstConfetti() {
    const pieces = [];
    for (let i = 0; i < 40; i++) {
      const el = document.createElement('div');
      el.className = 'confetti';
      const size = 6 + Math.random() * 8;
      el.style.width = size + 'px';
      el.style.height = size * 1.4 + 'px';
      el.style.left = Math.random() * 100 + 'vw';
      el.style.background = CONFETTI_COLORS[Math.floor(Math.random() * CONFETTI_COLORS.length)];
      el.style.setProperty('--drift', (Math.random() * 160 - 80) + 'px');
      el.style.setProperty('--spin', (360 + Math.random() * 720) + 'deg');
      el.style.animationDuration = 1.3 + Math.random() * 0.5 + 's';
      el.style.animationDelay = Math.random() * 0.25 + 's';
      confettiLayer.appendChild(el);
      pieces.push(el);
    }
    setTimeout(() => pieces.forEach((p) => p.remove()), 2200);
  }
  function clearBoard() {
    cells.forEach((cell) => {
      cell.innerHTML = '';
      cell.classList.add('empty');
      cell.classList.remove('has-x', 'has-o');
      cell.setAttribute('aria-label', 'Empty cell');
    });
    clearWinLine();
    boardEl.classList.remove('shake', 'pulse');
    hideOverlay();
    confettiLayer.innerHTML = '';
  }
  function showToast(msg) {
    toastEl.textContent = msg;
    toastEl.classList.add('show');
    clearTimeout(toastTimer);
    toastTimer = setTimeout(() => toastEl.classList.remove('show'), 1600);
  }
  function setScoreboardLabels(youLabel, oppLabel) {
    labelYou.textContent = youLabel;
    labelOpponent.textContent = oppLabel;
  }
  function startCpuMode() {
    activeMode = 'cpu';
    showScreen('game');
    setScoreboardLabels('You (X)', 'CPU (O)');
    CpuGame.init();
  }
  function startOnlineHost({ id, token, link }) {
    activeMode = 'online';
    showScreen('waiting');
    document.getElementById('link-text').textContent = link;
    Multiplayer.init({ asHost: true, id, token, link });
  }
  function startOnlineJoiner(token) {
    activeMode = 'online';
    showScreen('game');
    setScoreboardLabels('Opponent (X)', 'You (O)');
    renderStatus('Connecting…', 'thinking');
    Multiplayer.init({ asJoiner: true, token });
  }
  function backToMenu() {
    if (activeMode === 'cpu') CpuGame.destroy();
    if (activeMode === 'online') Multiplayer.destroy();
    activeMode = null;
    clearBoard();
    hideOverlay();
    showScreen('menu');
  }
  function init() {
    buildBoard();
    document.getElementById('btn-cpu').addEventListener('click', startCpuMode);
    document.getElementById('btn-online').addEventListener('click', async () => {
      try {
        const res = await fetch(BASE + '/api/games', { method: 'POST' });
        if (!res.ok) throw new Error('Server returned ' + res.status);
        const data = await res.json();
        startOnlineHost(data);
      } catch (e) {
        showToast('Error: ' + e.message);
        console.error('Create game failed:', e);
      }
    });
    document.getElementById('btn-copy').addEventListener('click', async () => {
      const link = document.getElementById('link-text').textContent;
      try {
        await navigator.clipboard.writeText(link);
        showToast('Link copied!');
      } catch (e) {
        prompt('Copy this link:', link);
      }
    });
    document.getElementById('btn-back-menu-waiting').addEventListener('click', backToMenu);
    document.getElementById('btn-new-game').addEventListener('click', () => {
      if (activeMode === 'cpu') CpuGame.newRound();
      if (activeMode === 'online') Multiplayer.newRound();
    });
    document.getElementById('btn-again-overlay').addEventListener('click', () => {
      if (activeMode === 'cpu') CpuGame.newRound();
      if (activeMode === 'online') Multiplayer.newRound();
    });
    document.getElementById('btn-reset').addEventListener('click', () => {
      if (activeMode === 'cpu') CpuGame.resetScores();
    });
    const token = new URLSearchParams(location.search).get('token');
    if (token) {
      startOnlineJoiner(token);
    } else {
      showScreen('menu');
    }
  }
  return {
    init,
    showScreen,
    renderMark,
    renderStatus,
    renderScores,
    drawWinLine,
    clearWinLine,
    showOverlay,
    hideOverlay,
    burstConfetti,
    clearBoard,
    showToast,
    setScoreboardLabels,
    checkWinner,
    WIN_LINES,
    get activeMode() { return activeMode; },
  };
 })();
 App.init();
@@ -0,0 +1,131 @@
 'use strict';
 const CpuGame = (() => {
  const SCORES_KEY = 'ttt-scores';
  const CPU_DELAY = 600;
  const state = {
    board: Array(9).fill(null),
    turn: 'X',
    gameOver: false,
    scores: { you: 0, opponent: 0, draws: 0 },
  };
  let cpuTimer = 0;
  function persistScores() {
    try {
      localStorage.setItem(SCORES_KEY, JSON.stringify(state.scores));
    } catch (e) { /* storage unavailable */ }
  }
  function loadScores() {
    try {
      const raw = localStorage.getItem(SCORES_KEY);
      if (raw) {
        const s = JSON.parse(raw);
        state.scores = {
          you: Number(s.you) || 0,
          opponent: Number(s.cpu || s.opponent) || 0,
          draws: Number(s.draws) || 0,
        };
      }
    } catch (e) { /* corrupted storage */ }
  }
  function handleMove(i) {
    if (state.gameOver || state.turn !== 'X' || state.board[i]) return;
    state.board[i] = 'X';
    App.renderMark(i, 'X');
    const result = App.checkWinner(state.board);
    if (result) {
      endRound(result);
      return;
    }
    state.turn = 'O';
    App.renderStatus('CPU is thinking…', 'thinking');
    cpuTimer = setTimeout(cpuMove, CPU_DELAY);
  }
  function cpuMove() {
    if (state.gameOver) return;
    const empty = [];
    state.board.forEach((v, i) => { if (v === null) empty.push(i); });
    if (!empty.length) return;
    const i = empty[Math.floor(Math.random() * empty.length)];
    state.board[i] = 'O';
    App.renderMark(i, 'O');
    const result = App.checkWinner(state.board);
    if (result) {
      endRound(result);
      return;
    }
    state.turn = 'X';
    App.renderStatus('Your turn', 'normal');
  }
  function endRound(result) {
    state.gameOver = true;
    let title;
    let key;
    if (result.winner === 'X') {
      key = 'you';
      title = 'You Win!';
      App.renderStatus('You win!', 'normal');
    } else if (result.winner === 'O') {
      key = 'opponent';
      title = 'CPU Wins';
      App.renderStatus('CPU wins', 'normal');
      document.getElementById('board').classList.add('shake');
    } else {
      key = 'draws';
      title = "It's a Draw";
      App.renderStatus("It's a draw", 'normal');
      document.getElementById('board').classList.add('pulse');
    }
    state.scores[key]++;
    persistScores();
    App.renderScores(state.scores);
    if (result.line) App.drawWinLine(result.line);
    setTimeout(() => {
      App.showOverlay(title);
      if (result.winner === 'X') App.burstConfetti();
    }, result.winner === 'draw' ? 400 : 600);
  }
  function newRound() {
    clearTimeout(cpuTimer);
    state.board = Array(9).fill(null);
    state.turn = 'X';
    state.gameOver = false;
    App.clearBoard();
    App.renderStatus('Your turn', 'normal');
  }
  function resetScores() {
    state.scores = { you: 0, opponent: 0, draws: 0 };
    persistScores();
    App.renderScores(state.scores);
    App.showToast('Scores reset');
  }
  function destroy() {
    clearTimeout(cpuTimer);
  }
  function init() {
    clearTimeout(cpuTimer);
    App.clearBoard();
    state.board = Array(9).fill(null);
    state.turn = 'X';
    state.gameOver = false;
    loadScores();
    App.renderScores(state.scores);
    App.renderStatus('Your turn', 'normal');
  }
  return { init, handleMove, newRound, resetScores, destroy };
 })();
@@ -0,0 +1,92 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="theme-color" content="#0d0f24">
  <title>Tic-Tac-Toe</title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <div class="bg-blob blob-cyan" aria-hidden="true"></div>
  <div class="bg-blob blob-magenta" aria-hidden="true"></div>
  <main class="app">
    <section id="screen-menu" class="screen">
      <h1 class="title">Tic-Tac-Toe</h1>
      <div class="menu-buttons">
        <button class="btn ghost" id="btn-cpu" type="button">Play vs CPU</button>
        <button class="btn primary" id="btn-online" type="button">New Online Game</button>
      </div>
    </section>
    <section id="screen-waiting" class="screen" style="display:none">
      <h1 class="title">Share this link</h1>
      <p class="waiting-subtitle">Send this link to your opponent</p>
      <div class="link-box" id="link-box">
        <span id="link-text"></span>
      </div>
      <button class="btn primary" id="btn-copy" type="button">Copy Link</button>
      <div class="status waiting-pulse" id="waiting-status">
        <span class="status-text">Waiting for opponent…</span>
      </div>
      <button class="btn ghost" id="btn-back-menu-waiting" type="button">Back to Menu</button>
    </section>
    <section id="screen-game" class="screen" style="display:none">
      <div class="scoreboard">
        <div class="chip" id="chip-you">
          <span class="chip-label" id="label-you">You (X)</span>
          <span class="chip-value chip-x" id="score-you">0</span>
        </div>
        <div class="chip" id="chip-opponent">
          <span class="chip-label" id="label-opponent">CPU (O)</span>
          <span class="chip-value chip-o" id="score-opponent">0</span>
        </div>
        <div class="chip" id="chip-draws">
          <span class="chip-label">Draws</span>
          <span class="chip-value" id="score-draws">0</span>
        </div>
      </div>
      <div class="status" id="status">
        <span class="status-text" id="status-text">Your turn</span>
      </div>
      <div class="board-wrap">
        <div class="board" id="board" aria-label="Tic-tac-toe board"></div>
        <svg class="win-line" id="win-line" aria-hidden="true">
          <defs>
            <linearGradient id="win-grad" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0" stop-color="#22d3ee"></stop>
              <stop offset="1" stop-color="#f472b6"></stop>
            </linearGradient>
          </defs>
          <line id="win-line-el" stroke="url(#win-grad)" stroke-width="6" stroke-linecap="round" opacity="0"></line>
        </svg>
      </div>
        <div class="buttons">
          <button class="btn" id="btn-reset" type="button">Reset Scores</button>
          <button class="btn primary" id="btn-new-game" type="button">New Game</button>
        </div>
    </section>
  </main>
  <div class="overlay" id="overlay" aria-hidden="true">
    <div class="modal" role="dialog" aria-modal="true">
      <div class="modal-title" id="overlay-title">You Win!</div>
      <button class="btn primary" id="btn-again-overlay" type="button">Play Again</button>
    </div>
  </div>
  <div id="confetti-layer" aria-hidden="true"></div>
  <div class="toast" id="toast" aria-live="polite"></div>
  <script src="game.js"></script>
  <script src="multiplayer.js"></script>
  <script src="app.js"></script>
 </body>
 </html>
@@ -0,0 +1,163 @@
 'use strict';
 const Multiplayer = (() => {
  let ws = null;
  let asHost = false;
  let gameId = null;
  let myMark = null;
  let myTurn = false;
  let board = Array(9).fill(null);
  let gameOver = false;
  let scores = { you: 0, opponent: 0, draws: 0 };
  function connect(url) {
    return new Promise((resolve, reject) => {
      ws = new WebSocket(url);
      ws.onopen = () => {
        if (asHost) {
          ws.send(JSON.stringify({ type: 'host', id: gameId }));
        } else {
          ws.send(JSON.stringify({ type: 'join', token: gameId }));
        }
        resolve();
      };
      ws.onerror = (e) => {
        App.showToast('Connection failed');
        reject(e);
      };
      ws.onclose = () => {
        if (!gameOver) {
          App.renderStatus('Connection lost', 'normal');
        }
      };
      ws.onmessage = (event) => {
        const msg = JSON.parse(event.data);
        handleMessage(msg);
      };
    });
  }
  function handleMessage(msg) {
    switch (msg.type) {
      case 'joined':
        myMark = msg.mark;
        myTurn = msg.mark === 'X';
        App.setScoreboardLabels(
          myMark === 'X' ? 'You (X)' : 'Opponent (X)',
          myMark === 'O' ? 'You (O)' : 'Opponent (O)'
        );
        App.renderStatus(myTurn ? 'Your turn' : 'Waiting for opponent…', myTurn ? 'normal' : 'thinking');
        break;
      case 'opponent-joined':
        App.showScreen('game');
        App.setScoreboardLabels(
          myMark === 'X' ? 'You (X)' : 'Opponent (X)',
          myMark === 'O' ? 'You (O)' : 'Opponent (O)'
        );
        App.renderStatus('Your turn', 'normal');
        myTurn = true;
        break;
      case 'start':
        board = Array(9).fill(null);
        gameOver = false;
        myMark = msg.mark;
        myTurn = msg.first === myMark;
        App.setScoreboardLabels(
          myMark === 'X' ? 'You (X)' : 'Opponent (X)',
          myMark === 'O' ? 'You (O)' : 'Opponent (O)'
        );
        App.clearBoard();
        App.renderStatus(myTurn ? 'Your turn' : 'Waiting for opponent…', myTurn ? 'normal' : 'thinking');
        break;
      case 'move': {
        board[msg.index] = msg.mark;
        App.renderMark(msg.index, msg.mark);
        if (!gameOver && msg.mark !== myMark) {
          myTurn = !myTurn;
          App.renderStatus(myTurn ? 'Your turn' : 'Opponent is thinking…', myTurn ? 'normal' : 'thinking');
        }
        break;
      }
      case 'end':
        gameOver = true;
        if (msg.winner === 'draw') {
          scores.draws++;
          App.renderStatus("It's a draw", 'normal');
          document.getElementById('board').classList.add('pulse');
        } else {
          const iWon = msg.winner === myMark;
          scores[iWon ? 'you' : 'opponent']++;
          App.renderStatus(iWon ? 'You win!' : 'Opponent wins', 'normal');
          if (!iWon) document.getElementById('board').classList.add('shake');
        }
        App.renderScores(scores);
        if (msg.line) App.drawWinLine(msg.line);
        setTimeout(() => {
          const title = msg.winner === 'draw' ? "It's a Draw" : (msg.winner === myMark ? 'You Win!' : 'Opponent Wins');
          App.showOverlay(title);
          if (msg.winner === myMark) App.burstConfetti();
        }, 600);
        break;
      case 'new-round':
        board = Array(9).fill(null);
        gameOver = false;
        myTurn = msg.first === myMark;
        App.hideOverlay();
        App.clearBoard();
        App.renderStatus(myTurn ? 'Your turn' : 'Waiting for opponent…', myTurn ? 'normal' : 'thinking');
        break;
    case 'opponent-left':
      gameOver = true;
      App.renderStatus('Opponent left', 'error');
      break;
      case 'error':
        App.showToast(msg.message || 'Error');
        break;
    }
  }
  function handleMove(i) {
    if (gameOver || !myTurn || board[i] || myMark === null) return;
    board[i] = myMark;
    App.renderMark(i, myMark);
    ws.send(JSON.stringify({ type: 'move', index: i }));
    myTurn = false;
    App.renderStatus('Waiting for opponent…', 'thinking');
  }
  function newRound() {
    ws.send(JSON.stringify({ type: 'new-round' }));
  }
  function destroy() {
    if (ws) {
      ws.close();
      ws = null;
    }
    myMark = null;
    myTurn = false;
    board = Array(9).fill(null);
    gameOver = false;
    scores = { you: 0, opponent: 0, draws: 0 };
  }
  function init(opts) {
    asHost = opts.asHost;
    gameId = opts.asHost ? opts.id : opts.token;
    const base = location.pathname === '/' ? '' : location.pathname.replace(/\/$/, '');
    const wsUrl = (location.protocol === 'https:' ? 'wss://' : 'ws://') + location.host + base + '/ws';
    connect(wsUrl).catch((err) => {
      console.error('Connection failed:', err);
      App.renderStatus('Connection failed', 'error');
    });
  }
  return { init, handleMove, newRound, destroy };
 })();
@@ -429,3 +429,47 @@ body {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
 }
 /* ---------- screens ---------- */
 .screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  flex: 1;
 }
 .menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 280px;
 }
 .waiting-subtitle {
  font-size: 14px;
  color: var(--muted);
 }
 .link-box {
  width: 100%;
  max-width: 320px;
  padding: 14px 18px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 13px;
  font-family: monospace;
  word-break: break-all;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
 }
 .waiting-pulse {
  animation: status-pulse 1200ms ease-in-out infinite;
 }
@@ -0,0 +1,85 @@
 'use strict';
 const fs = require('fs');
 const path = require('path');
 const initSqlJs = require('sql.js');
 const DATA_DIR = path.join(__dirname, 'data');
 const DB_PATH = path.join(DATA_DIR, 'games.db');
 let db = null;
 async function init() {
  if (!fs.existsSync(DATA_DIR)) {
    fs.mkdirSync(DATA_DIR, { recursive: true });
  }
  const SQL = await initSqlJs();
  if (fs.existsSync(DB_PATH)) {
    const buf = fs.readFileSync(DB_PATH);
    db = new SQL.Database(buf);
  } else {
    db = new SQL.Database();
    db.run(`CREATE TABLE IF NOT EXISTS games (
      id         TEXT PRIMARY KEY,
      token      TEXT UNIQUE NOT NULL,
      status     TEXT NOT NULL DEFAULT 'waiting',
      board      TEXT NOT NULL DEFAULT 'null',
      turn       TEXT NOT NULL DEFAULT 'X',
      created_at TEXT NOT NULL,
      updated_at TEXT NOT NULL
    )`);
    persist();
  }
 }
 function createGame({ id, token }) {
  const now = new Date().toISOString();
  db.run(
    `INSERT INTO games (id, token, status, board, turn, created_at, updated_at)
     VALUES (?, ?, 'waiting', 'null', 'X', ?, ?)`,
    [id, token, now, now]
  );
  persist();
 }
 function getGameByToken(token) {
  const stmt = db.prepare(`SELECT * FROM games WHERE token = ?`);
  stmt.bind([token]);
  if (stmt.step()) {
    const row = stmt.getAsObject();
    stmt.free();
    return row;
  }
  stmt.free();
  return null;
 }
 function getGameById(id) {
  const stmt = db.prepare(`SELECT * FROM games WHERE id = ?`);
  stmt.bind([id]);
  if (stmt.step()) {
    const row = stmt.getAsObject();
    stmt.free();
    return row;
  }
  stmt.free();
  return null;
 }
 function updateGame(id, { status, board, turn }) {
  const now = new Date().toISOString();
  db.run(
    `UPDATE games SET status = ?, board = ?, turn = ?, updated_at = ? WHERE id = ?`,
    [status, board, turn, now, id]
  );
  persist();
 }
 function persist() {
  const data = db.export();
  fs.writeFileSync(DB_PATH, Buffer.from(data));
 }
 module.exports = { init, createGame, getGameByToken, getGameById, updateGame, persist };
@@ -0,0 +1,11 @@
 {
  "name": "ttt-server",
  "private": true,
  "type": "commonjs",
  "scripts": { "start": "node server.js" },
  "dependencies": {
    "express": "^5.2.1",
    "ws": "^8.21.3",
    "sql.js": "^1.14.2"
  }
 }
@@ -0,0 +1,597 @@
 lockfileVersion: '9.0'
 settings:
  autoInstallPeers: true
  excludeLinksFromLockfile: false
 importers:
  .:
    dependencies:
      express:
        specifier: ^5.2.1
        version: 5.2.1
      sql.js:
        specifier: ^1.14.2
        version: 1.14.2
      ws:
        specifier: ^8.21.3
        version: 8.21.3
 packages:
  accepts@2.0.0:
    resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
    engines: {node: '>= 0.6'}
  body-parser@2.3.0:
    resolution: {integrity: sha512-2cGmJupaNgg+QUwVLAucDuWuoMZ6EX9iHDRswZ5lsNYEmwPaRknMPCLZz07yTzVq/83p4o/wzbDZbBrTvGGTIw==}
    engines: {node: '>=18'}
  bytes@3.1.2:
    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
    engines: {node: '>= 0.8'}
  call-bind-apply-helpers@1.0.2:
    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
    engines: {node: '>= 0.4'}
  call-bound@1.0.4:
    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
    engines: {node: '>= 0.4'}
  content-disposition@1.1.0:
    resolution: {integrity: sha512-5jRCH9Z/+DRP7rkvY83B+yGIGX96OYdJmzngqnw2SBSxqCFPd0w2km3s5iawpGX8krnwSGmF0FW5Nhr0Hfai3g==}
    engines: {node: '>=18'}
  content-type@1.0.5:
    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
    engines: {node: '>= 0.6'}
  content-type@2.1.0:
    resolution: {integrity: sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==}
    engines: {node: '>=18'}
  cookie-signature@1.2.2:
    resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
    engines: {node: '>=6.6.0'}
  cookie@0.7.2:
    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
    engines: {node: '>= 0.6'}
  debug@4.4.3:
    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
    engines: {node: '>=6.0'}
    peerDependencies:
      supports-color: '*'
    peerDependenciesMeta:
      supports-color:
        optional: true
  depd@2.0.0:
    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
    engines: {node: '>= 0.8'}
  dunder-proto@1.0.1:
    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
    engines: {node: '>= 0.4'}
  ee-first@1.1.1:
    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
  encodeurl@2.0.0:
    resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
    engines: {node: '>= 0.8'}
  es-define-property@1.0.1:
    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
    engines: {node: '>= 0.4'}
  es-errors@1.3.0:
    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
    engines: {node: '>= 0.4'}
  es-object-atoms@1.1.2:
    resolution: {integrity: sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==}
    engines: {node: '>= 0.4'}
  escape-html@1.0.3:
    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
  etag@1.8.1:
    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
    engines: {node: '>= 0.6'}
  express@5.2.1:
    resolution: {integrity: sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==}
    engines: {node: '>= 18'}
  finalhandler@2.1.1:
    resolution: {integrity: sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==}
    engines: {node: '>= 18.0.0'}
  forwarded@0.2.0:
    resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
    engines: {node: '>= 0.6'}
  fresh@2.0.0:
    resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
    engines: {node: '>= 0.8'}
  function-bind@1.1.2:
    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
  get-intrinsic@1.3.0:
    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
    engines: {node: '>= 0.4'}
  get-proto@1.0.1:
    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
    engines: {node: '>= 0.4'}
  gopd@1.2.0:
    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
    engines: {node: '>= 0.4'}
  has-symbols@1.1.0:
    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
    engines: {node: '>= 0.4'}
  hasown@2.0.4:
    resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
    engines: {node: '>= 0.4'}
  http-errors@2.0.1:
    resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
    engines: {node: '>= 0.8'}
  iconv-lite@0.7.3:
    resolution: {integrity: sha512-IKXpvIzjnC9XTAUbVBcMfGS0EPaIXtW6v+zr+RRp+hqULEpo0owZax6wyRwPOJbWbzjYspQwusTsfVr0ifh4uQ==}
    engines: {node: '>=0.10.0'}
  inherits@2.0.4:
    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
  ipaddr.js@1.9.1:
    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
    engines: {node: '>= 0.10'}
  is-promise@4.0.0:
    resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
  math-intrinsics@1.1.0:
    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
    engines: {node: '>= 0.4'}
  media-typer@1.1.1:
    resolution: {integrity: sha512-yz3xRaG20c6/BOzvYoDaGtPmGscs7YivItZEEqe6GbwNfHuxu9YNmvnEkMzKldAGY4/80pRcQRZSEnhquk9XuQ==}
    engines: {node: '>= 0.8'}
  merge-descriptors@2.0.0:
    resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
    engines: {node: '>=18'}
  mime-db@1.54.0:
    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
    engines: {node: '>= 0.6'}
  mime-types@3.0.2:
    resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==}
    engines: {node: '>=18'}
  ms@2.1.3:
    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
  negotiator@1.1.0:
    resolution: {integrity: sha512-NMPBRMJgiQHjbd8phG3Vebdx4kZ1H121rbl5IkMqeOsahptB9BKo/d7oJ3zTXqTgagn2bWlNSXkh0QUGM31RYg==}
    engines: {node: '>=18'}
  object-inspect@1.13.4:
    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
    engines: {node: '>= 0.4'}
  on-finished@2.4.1:
    resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
    engines: {node: '>= 0.8'}
  once@1.4.0:
    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
  parseurl@1.3.3:
    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
    engines: {node: '>= 0.8'}
  path-to-regexp@8.4.2:
    resolution: {integrity: sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==}
  proxy-addr@2.0.8:
    resolution: {integrity: sha512-5nnx0yGyVUcY6t9RnWcARWtwT9F1D8O9rt08htPvnd49W1IgZtmLkhu9WfMzQj1cFxjHIO6connUNVW5k7AVyQ==}
    engines: {node: '>= 0.10'}
  qs@6.16.0:
    resolution: {integrity: sha512-h6fhOIaRrID2CbEY2fqs+7t+UXZo+MLAnU5gRIq85uFtdiUPCdsApMlHhXogKVM4HM2DVbIjGNTTYH2OcmP1vA==}
    engines: {node: '>=0.6'}
  range-parser@1.3.0:
    resolution: {integrity: sha512-hek2mFQpPuI4E1BBKrSto+BU3e3x4xuarsbiwr3+lf7p44juvFMV0XFWQAP3xUyqXA4RrXLIoaSUGbSt056ZMw==}
    engines: {node: '>= 0.6'}
  raw-body@3.0.2:
    resolution: {integrity: sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==}
    engines: {node: '>= 0.10'}
  router@2.2.0:
    resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
    engines: {node: '>= 18'}
  safer-buffer@2.1.2:
    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
  send@1.2.1:
    resolution: {integrity: sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==}
    engines: {node: '>= 18'}
  serve-static@2.2.1:
    resolution: {integrity: sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==}
    engines: {node: '>= 18'}
  setprototypeof@1.2.0:
    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
  side-channel-list@1.0.1:
    resolution: {integrity: sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==}
    engines: {node: '>= 0.4'}
  side-channel-map@1.0.1:
    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
    engines: {node: '>= 0.4'}
  side-channel-weakmap@1.0.2:
    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
    engines: {node: '>= 0.4'}
  side-channel@1.1.1:
    resolution: {integrity: sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==}
    engines: {node: '>= 0.4'}
  sql.js@1.14.2:
    resolution: {integrity: sha512-3ZGPovObMFrdw79zrUHbfdE/DLIsy8jdNdssmMSQuRAymedU6q84asPt0kgiqrdMYlPegDItiIMfmIXzZnYFcw==}
  statuses@2.0.2:
    resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
    engines: {node: '>= 0.8'}
  toidentifier@1.0.1:
    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
    engines: {node: '>=0.6'}
  type-is@2.1.0:
    resolution: {integrity: sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==}
    engines: {node: '>= 18'}
  unpipe@1.0.0:
    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
    engines: {node: '>= 0.8'}
  vary@1.1.2:
    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
    engines: {node: '>= 0.8'}
  wrappy@1.0.2:
    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
  ws@8.21.3:
    resolution: {integrity: sha512-201TZ/kPWxoPr/OKWjquZR1SWKXcvxdH+e1xrx89b3YbmzLMFCLfnaG1HFIgWzJOEWZ7MvpK++odZufgYR50Rw==}
    engines: {node: '>=10.0.0'}
    peerDependencies:
      bufferutil: ^4.0.1
      utf-8-validate: '>=5.0.2'
    peerDependenciesMeta:
      bufferutil:
        optional: true
      utf-8-validate:
        optional: true
 snapshots:
  accepts@2.0.0:
    dependencies:
      mime-types: 3.0.2
      negotiator: 1.1.0
  body-parser@2.3.0:
    dependencies:
      bytes: 3.1.2
      content-type: 2.1.0
      debug: 4.4.3
      http-errors: 2.0.1
      iconv-lite: 0.7.3
      on-finished: 2.4.1
      qs: 6.16.0
      raw-body: 3.0.2
      type-is: 2.1.0
    transitivePeerDependencies:
      - supports-color
  bytes@3.1.2: {}
  call-bind-apply-helpers@1.0.2:
    dependencies:
      es-errors: 1.3.0
      function-bind: 1.1.2
  call-bound@1.0.4:
    dependencies:
      call-bind-apply-helpers: 1.0.2
      get-intrinsic: 1.3.0
  content-disposition@1.1.0: {}
  content-type@1.0.5: {}
  content-type@2.1.0: {}
  cookie-signature@1.2.2: {}
  cookie@0.7.2: {}
  debug@4.4.3:
    dependencies:
      ms: 2.1.3
  depd@2.0.0: {}
  dunder-proto@1.0.1:
    dependencies:
      call-bind-apply-helpers: 1.0.2
      es-errors: 1.3.0
      gopd: 1.2.0
  ee-first@1.1.1: {}
  encodeurl@2.0.0: {}
  es-define-property@1.0.1: {}
  es-errors@1.3.0: {}
  es-object-atoms@1.1.2:
    dependencies:
      es-errors: 1.3.0
  escape-html@1.0.3: {}
  etag@1.8.1: {}
  express@5.2.1:
    dependencies:
      accepts: 2.0.0
      body-parser: 2.3.0
      content-disposition: 1.1.0
      content-type: 1.0.5
      cookie: 0.7.2
      cookie-signature: 1.2.2
      debug: 4.4.3
      depd: 2.0.0
      encodeurl: 2.0.0
      escape-html: 1.0.3
      etag: 1.8.1
      finalhandler: 2.1.1
      fresh: 2.0.0
      http-errors: 2.0.1
      merge-descriptors: 2.0.0
      mime-types: 3.0.2
      on-finished: 2.4.1
      once: 1.4.0
      parseurl: 1.3.3
      proxy-addr: 2.0.8
      qs: 6.16.0
      range-parser: 1.3.0
      router: 2.2.0
      send: 1.2.1
      serve-static: 2.2.1
      statuses: 2.0.2
      type-is: 2.1.0
      vary: 1.1.2
    transitivePeerDependencies:
      - supports-color
  finalhandler@2.1.1:
    dependencies:
      debug: 4.4.3
      encodeurl: 2.0.0
      escape-html: 1.0.3
      on-finished: 2.4.1
      parseurl: 1.3.3
      statuses: 2.0.2
    transitivePeerDependencies:
      - supports-color
  forwarded@0.2.0: {}
  fresh@2.0.0: {}
  function-bind@1.1.2: {}
  get-intrinsic@1.3.0:
    dependencies:
      call-bind-apply-helpers: 1.0.2
      es-define-property: 1.0.1
      es-errors: 1.3.0
      es-object-atoms: 1.1.2
      function-bind: 1.1.2
      get-proto: 1.0.1
      gopd: 1.2.0
      has-symbols: 1.1.0
      hasown: 2.0.4
      math-intrinsics: 1.1.0
  get-proto@1.0.1:
    dependencies:
      dunder-proto: 1.0.1
      es-object-atoms: 1.1.2
  gopd@1.2.0: {}
  has-symbols@1.1.0: {}
  hasown@2.0.4:
    dependencies:
      function-bind: 1.1.2
  http-errors@2.0.1:
    dependencies:
      depd: 2.0.0
      inherits: 2.0.4
      setprototypeof: 1.2.0
      statuses: 2.0.2
      toidentifier: 1.0.1
  iconv-lite@0.7.3:
    dependencies:
      safer-buffer: 2.1.2
  inherits@2.0.4: {}
  ipaddr.js@1.9.1: {}
  is-promise@4.0.0: {}
  math-intrinsics@1.1.0: {}
  media-typer@1.1.1: {}
  merge-descriptors@2.0.0: {}
  mime-db@1.54.0: {}
  mime-types@3.0.2:
    dependencies:
      mime-db: 1.54.0
  ms@2.1.3: {}
  negotiator@1.1.0:
    dependencies:
      content-type: 2.1.0
  object-inspect@1.13.4: {}
  on-finished@2.4.1:
    dependencies:
      ee-first: 1.1.1
  once@1.4.0:
    dependencies:
      wrappy: 1.0.2
  parseurl@1.3.3: {}
  path-to-regexp@8.4.2: {}
  proxy-addr@2.0.8:
    dependencies:
      forwarded: 0.2.0
      ipaddr.js: 1.9.1
  qs@6.16.0:
    dependencies:
      es-define-property: 1.0.1
      side-channel: 1.1.1
  range-parser@1.3.0: {}
  raw-body@3.0.2:
    dependencies:
      bytes: 3.1.2
      http-errors: 2.0.1
      iconv-lite: 0.7.3
      unpipe: 1.0.0
  router@2.2.0:
    dependencies:
      debug: 4.4.3
      depd: 2.0.0
      is-promise: 4.0.0
      parseurl: 1.3.3
      path-to-regexp: 8.4.2
    transitivePeerDependencies:
      - supports-color
  safer-buffer@2.1.2: {}
  send@1.2.1:
    dependencies:
      debug: 4.4.3
      encodeurl: 2.0.0
      escape-html: 1.0.3
      etag: 1.8.1
      fresh: 2.0.0
      http-errors: 2.0.1
      mime-types: 3.0.2
      ms: 2.1.3
      on-finished: 2.4.1
      range-parser: 1.3.0
      statuses: 2.0.2
    transitivePeerDependencies:
      - supports-color
  serve-static@2.2.1:
    dependencies:
      encodeurl: 2.0.0
      escape-html: 1.0.3
      parseurl: 1.3.3
      send: 1.2.1
    transitivePeerDependencies:
      - supports-color
  setprototypeof@1.2.0: {}
  side-channel-list@1.0.1:
    dependencies:
      es-errors: 1.3.0
      object-inspect: 1.13.4
  side-channel-map@1.0.1:
    dependencies:
      call-bound: 1.0.4
      es-errors: 1.3.0
      get-intrinsic: 1.3.0
      object-inspect: 1.13.4
  side-channel-weakmap@1.0.2:
    dependencies:
      call-bound: 1.0.4
      es-errors: 1.3.0
      get-intrinsic: 1.3.0
      object-inspect: 1.13.4
      side-channel-map: 1.0.1
  side-channel@1.1.1:
    dependencies:
      es-errors: 1.3.0
      object-inspect: 1.13.4
      side-channel-list: 1.0.1
      side-channel-map: 1.0.1
      side-channel-weakmap: 1.0.2
  sql.js@1.14.2: {}
  statuses@2.0.2: {}
  toidentifier@1.0.1: {}
  type-is@2.1.0:
    dependencies:
      content-type: 2.1.0
      media-typer: 1.1.1
      mime-types: 3.0.2
  unpipe@1.0.0: {}
  vary@1.1.2: {}
  wrappy@1.0.2: {}
  ws@8.21.3: {}
@@ -0,0 +1,288 @@
 'use strict';
 const path = require('path');
 const http = require('http');
 const crypto = require('crypto');
 const express = require('express');
 const WebSocket = require('ws');
 const db = require('./db');
 const PORT = process.env.PORT || 8080;
 const BASE_PATH = process.env.BASE_PATH || '';
 const WIN_LINES = [
  [0, 1, 2], [3, 4, 5], [6, 7, 8],
  [0, 3, 6], [1, 4, 7], [2, 5, 8],
  [0, 4, 8], [2, 4, 6],
 ];
 function checkWinner(board) {
  for (const line of WIN_LINES) {
    const [a, b, c] = line;
    if (board[a] && board[a] === board[b] && board[a] === board[c]) {
      return { winner: board[a], line };
    }
  }
  if (board.every((v) => v !== null)) return { winner: 'draw' };
  return null;
 }
 const app = express();
 const server = http.createServer(app);
 const wss = new WebSocket.Server({ server, path: '/ws' });
 const games = new Map();
 app.use(express.static(path.join(__dirname, '../public')));
 app.post('/api/games', (req, res) => {
  const id = crypto.randomUUID();
  const token = crypto.randomBytes(8).toString('hex');
  db.createGame({ id, token });
  const link = `${req.get('origin') || req.protocol + '://' + req.get('host')}${BASE_PATH}/?token=${token}`;
  res.status(201).json({ id, token, link });
 });
 app.get('/api/health', (req, res) => {
  res.json({ ok: true });
 });
 app.use((req, res, next) => {
  if (req.method === 'GET' && !req.path.startsWith('/api/')) {
    res.sendFile(path.join(__dirname, '../public', 'index.html'));
  } else {
    next();
  }
 });
 function send(ws, obj) {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify(obj));
  }
 }
 function broadcast(game, obj) {
  for (const seat of ['X', 'O']) {
    const p = game.players[seat];
    if (p) send(p, obj);
  }
 }
 wss.on('connection', (ws) => {
  ws.on('message', (raw) => {
    let msg;
    try {
      msg = JSON.parse(raw.toString());
    } catch (e) {
      return;
    }
    switch (msg.type) {
      case 'host':
        handleHost(ws, msg);
        break;
      case 'join':
        handleJoin(ws, msg);
        break;
      case 'move':
        handleMove(ws, msg);
        break;
      case 'new-round':
        handleNewRound(ws, msg);
        break;
      case 'leave':
        handleLeave(ws);
        break;
    }
  });
  ws.on('close', () => {
    handleDisconnect(ws);
  });
 });
 function handleHost(ws, msg) {
  const row = db.getGameById(msg.id);
  if (!row) {
    send(ws, { type: 'error', message: 'Game not found' });
    return;
  }
  let game = games.get(row.id);
  if (!game) {
    const board = row.board === 'null' ? Array(9).fill(null) : JSON.parse(row.board);
    game = {
      id: row.id,
      token: row.token,
      board,
      turn: row.turn,
      status: row.status,
      players: { X: null, O: null },
    };
    games.set(game.id, game);
  }
  game.players.X = ws;
  ws._gameId = game.id;
  ws._seat = 'X';
  if (game.status === 'waiting') {
    send(ws, { type: 'joined', mark: 'X', board: game.board, turn: game.turn });
  } else if (game.status === 'playing' && game.players.O) {
    send(ws, { type: 'start', mark: 'X', first: 'X', board: game.board, turn: game.turn });
  }
 }
 function handleJoin(ws, msg) {
  const row = db.getGameByToken(msg.token);
  if (!row) {
    send(ws, { type: 'error', message: 'Invalid or expired link' });
    return;
  }
  let game = games.get(row.id);
  if (!game) {
    const board = row.board === 'null' ? Array(9).fill(null) : JSON.parse(row.board);
    game = {
      id: row.id,
      token: row.token,
      board,
      turn: row.turn,
      status: row.status,
      players: { X: null, O: ws },
    };
    games.set(game.id, game);
  }
  if (game.status === 'ended') {
    send(ws, { type: 'error', message: 'Game already ended' });
    return;
  }
  if (game.players.O) {
    send(ws, { type: 'error', message: 'Game already full' });
    return;
  }
  game.players.O = ws;
  ws._gameId = game.id;
  ws._seat = 'O';
  if (game.players.X) {
    game.status = 'playing';
    db.updateGame(game.id, { status: 'playing', board: JSON.stringify(game.board), turn: game.turn });
    send(game.players.X, { type: 'opponent-joined', you: 'X' });
    send(ws, { type: 'start', mark: 'O', first: 'X', board: game.board, turn: game.turn });
  } else {
    send(ws, { type: 'joined', mark: 'O', board: game.board, turn: game.turn });
  }
 }
 function handleMove(ws, msg) {
  const game = games.get(ws._gameId);
  if (!game) {
    send(ws, { type: 'error', message: 'Game not found' });
    return;
  }
  if (game.status !== 'playing') {
    send(ws, { type: 'error', message: 'Game is not in progress' });
    return;
  }
  const seat = ws._seat;
  if (game.turn !== seat) {
    send(ws, { type: 'error', message: 'Not your turn' });
    return;
  }
  const cell = msg.index;
  if (!Number.isInteger(cell) || cell < 0 || cell > 8) {
    send(ws, { type: 'error', message: 'Invalid cell' });
    return;
  }
  if (game.board[cell] !== null) {
    send(ws, { type: 'error', message: 'Cell already occupied' });
    return;
  }
  game.board[cell] = seat;
  game.turn = seat === 'X' ? 'O' : 'X';
  db.updateGame(game.id, { status: game.status, board: JSON.stringify(game.board), turn: game.turn });
  const result = checkWinner(game.board);
  broadcast(game, { type: 'move', index: cell, mark: seat });
  if (result) {
    game.status = 'ended';
    db.updateGame(game.id, { status: 'ended', board: JSON.stringify(game.board), turn: game.turn });
    broadcast(game, { type: 'end', winner: result.winner, line: result.line || null });
  }
 }
 function handleNewRound(ws, msg) {
  const game = games.get(ws._gameId);
  if (!game) {
    send(ws, { type: 'error', message: 'Game not found' });
    return;
  }
  if (game.status !== 'ended') {
    send(ws, { type: 'error', message: 'Game has not ended' });
    return;
  }
  game.board = Array(9).fill(null);
  game.turn = 'X';
  game.status = 'playing';
  db.updateGame(game.id, { status: 'playing', board: JSON.stringify(game.board), turn: game.turn });
  broadcast(game, { type: 'new-round', first: 'X', board: game.board, turn: game.turn });
 }
 function handleLeave(ws) {
  handleDisconnect(ws);
 }
 function handleDisconnect(ws) {
  const gameId = ws._gameId;
  if (!gameId) return;
  const game = games.get(gameId);
  if (!game) return;
  const seat = ws._seat;
  if (game.players[seat] === ws) {
    game.players[seat] = null;
  }
  if (game.status === 'playing') {
    game.status = 'ended';
    db.updateGame(game.id, { status: 'ended', board: JSON.stringify(game.board), turn: game.turn });
    const otherSeat = seat === 'X' ? 'O' : 'X';
    const other = game.players[otherSeat];
    if (other) {
      send(other, { type: 'opponent-left' });
    }
  } else if (game.status === 'waiting' && seat === 'X') {
    game.status = 'ended';
    db.updateGame(game.id, { status: 'ended', board: JSON.stringify(game.board), turn: game.turn });
  }
  if (!game.players.X && !game.players.O) {
    games.delete(game.id);
  }
 }
 db.init().then(() => {
  server.listen(PORT, '0.0.0.0', () => {
    console.log(`Server running on port ${PORT}`);
  });
 }).catch((err) => {
  console.error('Failed to initialize database:', err);
  process.exit(1);
 });