common files for board games

Updated match data callback to interpret { game_over: true, winner: -1 } as a draw.

Added winner = "draw" UI state for display and disabling board interactions.

Updated status text in Board component to show “Draw!” when applicable.

Adjusted winner highlighting logic to avoid highlighting any symbol during draw.

Ensured ongoing games always set winner = null for consistent behavior.

.dockerignore

@@ -0,0 +1,40 @@
+# Node modules
+node_modules
+**/node_modules
+
+# Logs
+*.log
+logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Build outputs
+build
+dist
+out
+.next
+.cache
+.parcel-cache
+
+# Environment files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# IDE / Editor folders
+.vscode
+.idea
+*.sublime-workspace
+*.sublime-project
+
+# Temporary files
+*.swp
+*.bak
+*.tmp

.drone.yml

@@ -0,0 +1,146 @@
+---
+kind: pipeline
+type: docker
+name: default
+
+platform:
+  os: linux
+  arch: arm64
+
+workspace:
+  path: /drone/src
+
+volumes:
+  - name: dockersock
+    host:
+      path: /var/run/docker.sock
+
+steps:
+  - name: fetch-tags
+    image: docker:24
+    volumes:
+      - name: dockersock
+        path: /var/run/docker.sock
+    commands:
+      - apk add --no-cache git
+      - git fetch --tags
+      - |
+        # Get latest Git tag and trim newline
+        LATEST_TAG=$(git describe --tags --abbrev=0 2>/dev/null | tr -d '\n')
+        echo "Latest Git tag fetched: $LATEST_TAG"
+
+        # Save to file for downstream steps
+        echo "$LATEST_TAG" > /drone/src/LATEST_TAG.txt
+
+        # Read back for verification
+        IMAGE_TAG=$(cat /drone/src/LATEST_TAG.txt | tr -d '\n')
+        echo "Image tag read from file: $IMAGE_TAG"
+
+        # Validate
+        if [ -z "$IMAGE_TAG" ]; then
+          echo "❌ No git tags found! Cannot continue."
+          exit 1
+        fi
+
+  - name: check-remote-image
+    image: docker:24
+    volumes:
+      - name: dockersock
+        path: /var/run/docker.sock
+    commands:
+      - IMAGE_TAG=$(cat /drone/src/LATEST_TAG.txt | tr -d '\n')
+
+      - echo "Checking if lila-games/tic-tac-toe-ui:$IMAGE_TAG exists on remote Docker..."
+      - echo "Existing Docker tags for lila-games/tic-tac-toe-ui:"
+      - docker images --format "{{.Repository}}:{{.Tag}}" | grep "^lila-games/tic-tac-toe-ui" || echo "(none)"
+      - |
+        if docker image inspect lila-games/tic-tac-toe-ui:$IMAGE_TAG > /dev/null 2>&1; then
+          echo "✅ Docker image lila-games/tic-tac-toe-ui:$IMAGE_TAG already exists — skipping build"
+          exit 78
+        else
+          echo "⚙️ Docker image lila-games/tic-tac-toe-ui:$IMAGE_TAG not found — proceeding to build..."
+        fi
+
+  - name: build-image
+    image: docker:24
+    environment:
+      WS_HOST:
+        from_secret: WS_HOST
+      WS_PORT:
+        from_secret: WS_PORT
+      WS_SKEY:
+        from_secret: WS_SKEY
+      WS_SSL:
+        from_secret: WS_SSL
+    volumes:
+      - name: dockersock
+        path: /var/run/docker.sock
+    commands:
+      - IMAGE_TAG=$(cat /drone/src/LATEST_TAG.txt | tr -d '\n')
+
+      - echo "🔨 Building Docker image lila-games/tic-tac-toe-ui:$IMAGE_TAG ..."
+      - |
+        docker build --network=host \
+        --build-arg VITE_WS_HOST="$WS_HOST" \
+        --build-arg VITE_WS_PORT="$WS_PORT" \
+        --build-arg VITE_WS_SKEY="$WS_SKEY" \
+        --build-arg VITE_WS_SSL="$WS_SSL" \
+        -t lila-games/tic-tac-toe-ui:$IMAGE_TAG \
+        -t lila-games/tic-tac-toe-ui:latest \
+        /drone/src
+
+  - name: push-image
+    image: docker:24
+    environment:
+      REGISTRY_HOST:
+        from_secret: REGISTRY_HOST
+      REGISTRY_USER:
+        from_secret: REGISTRY_USER
+      REGISTRY_PASS:
+        from_secret: REGISTRY_PASS
+    volumes:
+      - name: dockersock
+        path: /var/run/docker.sock
+    commands:
+      - IMAGE_TAG=$(cat /drone/src/LATEST_TAG.txt | tr -d '\n')
+
+      - echo "🔑 Logging into registry $REGISTRY_HOST ..."
+      - echo "$REGISTRY_PASS" | docker login $REGISTRY_HOST -u "$REGISTRY_USER" --password-stdin
+      - echo "🏷️ Tagging images with registry prefix..."
+      - docker tag lila-games/tic-tac-toe-ui:$IMAGE_TAG $REGISTRY_HOST/lila-games/tic-tac-toe-ui:$IMAGE_TAG
+      - docker tag lila-games/tic-tac-toe-ui:$IMAGE_TAG $REGISTRY_HOST/lila-games/tic-tac-toe-ui:latest
+      - echo "📤 Pushing lila-games/tic-tac-toe-ui:$IMAGE_TAG ..."
+      - docker push $REGISTRY_HOST/lila-games/tic-tac-toe-ui:$IMAGE_TAG
+      - echo "📤 Pushing lila-games/tic-tac-toe-ui:latest ..."
+      - docker push $REGISTRY_HOST/lila-games/tic-tac-toe-ui:latest
+
+  - name: stop-old
+    image: docker:24
+    volumes:
+      - name: dockersock
+        path: /var/run/docker.sock
+    commands:
+      - echo "🛑 Stopping old container..."
+      - docker rm -f tic-tac-toe-ui || true
+
+  - name: run-container
+    image: docker:24
+    volumes:
+      - name: dockersock
+        path: /var/run/docker.sock
+    commands:
+      - IMAGE_TAG=$(cat /drone/src/LATEST_TAG.txt | tr -d '\n')
+
+      - echo "🚀 Starting container lila-games/tic-tac-toe-ui:$IMAGE_TAG ..."
+      - |
+        docker run -d \
+          --name tic-tac-toe-ui \
+          -p 3003:3000 \
+          -e NODE_ENV=production \
+          --restart always \
+          lila-games/tic-tac-toe-ui:$IMAGE_TAG
+
+# Trigger rules
+trigger:
+  event:
+    - tag

Dockerfile

@@ -0,0 +1,42 @@
+# Stage 1: Build
+FROM node:20-alpine AS builder
+
+# Set working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json (or yarn.lock)
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy the rest of the app
+COPY . .
+
+# Build arguments
+ARG VITE_WS_HOST
+ARG VITE_WS_PORT
+ARG VITE_WS_SKEY
+ARG VITE_WS_SSL
+
+# Export them as actual environment variables (Vite needs ENV)
+ENV VITE_WS_HOST=${VITE_WS_HOST}
+ENV VITE_WS_PORT=${VITE_WS_PORT}
+ENV VITE_WS_SSL=${VITE_WS_SSL}
+
+# Build
+RUN npm run build
+
+# Stage 2: Static file server (BusyBox)
+FROM busybox:latest
+
+WORKDIR /app
+
+# Copy only build frontend files
+COPY --from=builder /app/dist /app
+
+# Expose port
+EXPOSE 3000
+
+# Default command
+CMD ["busybox", "httpd", "-f", "-p", "3000"]

README.md

@@ -1,41 +1,225 @@
-# Material UI - React Router example in TypeScript
+# tic-tac-toe-ui — Multiplayer Game Client (React + TypeScript + Vite)
 
-## How to use
+A fully functional multiplayer Tic-Tac-Toe game client built using **React + TypeScript**, powered by **Nakama WebSocket real-time networking**, and delivered as a tiny **production-optimized Vite build** (served via BusyBox/Docker).
 
-Download the example [or clone the repo](https://github.com/mui/material-ui):
+This UI communicates with the authoritative backend (`tic-tac-toe`) to deliver a secure, synced, cheat-proof multiplayer experience.
 
-<!-- #target-branch-reference -->
+---
 
-```bash
-curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-react-router-ts
-cd material-ui-react-router-ts
+## 🎮 Overview
+
+This repository contains the front-end implementation of the Tic-Tac-Toe multiplayer platform.
+
+The client supports:
+
+* Device-based authentication
+* Full matchmaking lifecycle
+* Real-time gameplay with WebSockets
+* Authoritative state rendering
+* Leaderboard browsing
+* Game result screens
+* A Vite-powered environment system for dynamic host/SSL selection
+
+This UI is production-ready and deployable to any server or container environment.
+
+---
+
+## ⭐ Features
+
+* **React + TypeScript UI**
+* **WebSocket real-time gameplay** using Nakama JS
+* **Matchmaking flow:** queue → ticket → match → gameplay
+* **Authoritative state updates** (OpCode 2)
+* **Secure device authentication** (device UUID → session)
+* **Leaderboard view** over Nakama's leaderboard API
+* **Production Docker image:** Node → Vite → BusyBox
+* **Environment-based configuration** for host/SSL
+
+---
+
+## 🧩 Architecture
+
+### Frontend System Diagram
+
+```mermaid
+flowchart LR
+    User[Browser] --> UI[React + TS + Vite]
+    UI -->|WebSocket| Nakama
+    UI -->|HTTP| Nakama
+    UI --> Leaderboard[Leaderboard API]
+    UI --> Matchmaking[Matchmaker API]
 ```
 
-Install it and run:
+---
 
-```bash
-npm install
-npm run dev
+## 🛠 Tech Stack
+
+* **React 18** (TypeScript)
+* **Vite.js** (build system)
+* **Nakama JavaScript Client**
+* **Plain CSS** for styling
+* **WebSockets (SSL / non-SSL selectable)**
+* **Docker (multi-stage build)**
+
+---
+
+
+## 🔧 Environment Variables (Vite)
+
+These are injected at build time:
+
+```
+VITE_WS_HOST=nakama.aetoskia.com
+VITE_WS_PORT=443
+VITE_WS_SKEY=secret
+VITE_WS_SSL=true
 ```
 
-or:
+Meaning:
 
-<!-- #target-branch-reference -->
+* **VITE_WS_HOST** → Nakama host (domain or IP)
+* **VITE_WS_PORT** → Port for WebSocket/API
+* **VITE_WS_SKEY** → Nakama server key
+* **VITE_WS_SSL** → `true` for wss://, `false` for ws://
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-react-router-ts)
+---
 
-[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-react-router-ts)
+## 🔌 Runtime Flow
 
-## The idea behind the example
+### Authentication
 
-<!-- #host-reference -->
+* UI generates a device UUID
+* Calls `client.authenticateDevice()`
+* Stores session in React state
 
-This example demonstrates how you can use Material UI with [React Router](https://reactrouter.com/) in [TypeScript](https://github.com/Microsoft/TypeScript).
-It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI.
+### Matchmaking
 
-## What's next?
+1. User selects mode (classic / blitz)
+2. joins the matchmaking queue
+3. Waits for matchmaker ticket
+4. Auto-joins the match when assigned
 
-<!-- #host-reference -->
+### Gameplay
 
-You now have a working example project.
-You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section.
+* User sends moves via OpCode **1**
+* Server validates + broadcasts authoritative board via OpCode **2**
+* UI re-renders board state from server packets
+
+### End of Game
+
+* Player sees win/lose/draw
+* Can return to home or matchmaking
+
+---
+
+## 🎨 Styling
+
+Styling uses **plain CSS** via a single `styles.css` file.
+Simple, responsive layout using Flexbox.
+
+---
+
+## 🐳 Docker (Production Build)
+
+### Dockerfile Overview
+
+```
+# Stage 1: Build
+FROM node:20-alpine AS builder
+
+# Set working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json (or yarn.lock)
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy the rest of the app
+COPY . .
+
+# Build arguments
+ARG VITE_WS_HOST
+ARG VITE_WS_PORT
+ARG VITE_WS_SKEY
+ARG VITE_WS_SSL
+
+# Export them as actual environment variables (Vite needs ENV)
+ENV VITE_WS_HOST=${VITE_WS_HOST}
+ENV VITE_WS_PORT=${VITE_WS_PORT}
+ENV VITE_WS_SSL=${VITE_WS_SSL}
+
+# Build
+RUN npm run build
+
+# Stage 2: Static file server (BusyBox)
+FROM busybox:latest
+
+WORKDIR /app
+
+# Copy only build frontend files
+COPY --from=builder /app/dist /app
+
+# Expose port
+EXPOSE 3000
+
+# Default command
+CMD ["busybox", "httpd", "-f", "-p", "3000"]
+```
+
+Produces an extremely lightweight production image.
+
+---
+
+## 🧪 Testing
+
+Manual testing validated:
+
+* Full matchmaking loop
+* Game state sync
+* Invalid move handling (server rejections)
+* Disconnect behaviour
+* Leaderboard retrieval
+
+Pending:
+
+* Stress tests
+* Mobile responsiveness
+* Reconnect logic
+
+---
+
+## 📈 Deployment
+
+### Supported:
+
+* Docker on any Linux host
+* Raspberry Pi (ARM)
+* Google Cloud Run / Compute Engine
+* Traefik reverse proxy via `games.aetoskia.com`
+
+### Example Deployment via Docker
+
+```
+docker run -d \
+  -p 3003:3003 \
+  --restart always \
+  tic-tac-toe-ui:latest
+```
+
+Traefik HTTPS routes:
+
+* **games.aetoskia.com** → UI
+
+---
+
+## 🗺️ Roadmap
+
+* Rematch flow
+* Reconnect/resume after refresh
+* Improved animations
+* Mobile UI redesign
+* Centralized error handling
+
+---

index.html

@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
     />
-    <title>Blog - Aetoskia</title>
+    <title>TicTacToe - Aetoskia</title>
   </head>
   <body>
     <div id="root"></div>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "tictactoe-vite",
-  "version": "1.0.0",
+  "version": "v0.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "tictactoe-vite",
-      "version": "1.0.0",
+      "version": "v0.2.0",
       "dependencies": {
         "@emotion/react": "latest",
         "@emotion/styled": "latest",
@@ -14,6 +14,7 @@
         "@mui/icons-material": "latest",
         "@mui/material": "latest",
         "axios": "latest",
+        "framer-motion": "latest",
         "markdown-to-jsx": "latest",
         "marked": "latest",
         "react": "latest",
@@ -2064,6 +2065,33 @@
         "node": ">= 6"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.23.24",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz",
+      "integrity": "sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.23",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -3263,6 +3291,21 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.23.23",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
+      "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -3761,6 +3804,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/unified": {
       "version": "11.0.5",
       "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tictactoe-vite",
-  "version": "v0.1.0",
+  "version": "v1.1.0",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -19,7 +19,8 @@
     "remark-gfm": "latest",
     "marked": "latest",
     "axios": "latest",
-    "@heroiclabs/nakama-js": "^2.8.0"
+    "@heroiclabs/nakama-js": "^2.8.0",
+    "framer-motion": "latest"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "latest",

src/tictactoe/Board.tsx

@@ -1,48 +1,271 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useNakama } from "./providers/NakamaProvider";
+import getHaiku from "./utils/haikus";
+
+export interface PlayerModel {
+  user_id: string;
+  username: string;
+  index: number;
+  metadata: Record<string, string>; // e.g. { symbol: "X" }
+}
 
 interface BoardProps {
   board: string[][];
   turn: number;
   winner: string | null;
+  gameOver: boolean | null;
+  players: PlayerModel[];
+  myUserId: string | null;
   onCellClick: (row: number, col: number) => void;
 }
 
-export default function Board({ board, turn, winner, onCellClick }: BoardProps) {
+export default function Board({
+  board,
+  turn,
+  winner,
+  gameOver,
+  players,
+  myUserId,
+  onCellClick,
+}: BoardProps) {
+  const myIndex = players.findIndex(p => p.user_id === myUserId);
+  const gameReady = players.length === 2;
+  const {
+    matchId
+  } = useNakama();
+
+  const mySymbol =
+    myIndex !== null && players[myIndex]
+      ? players[myIndex].metadata?.symbol ?? null
+      : null;
+
+  const opponentSymbol =
+    myIndex !== null && players.length === 2
+      ? players[1 - myIndex].metadata?.symbol ?? null
+      : null;
+
+  const isMyTurn = gameReady && myIndex !== -1 && turn === myIndex;
+
+  // -------------------------------
+  // STATUS
+  // -------------------------------
+  let status;
+  if (!gameReady) {
+    status = "Waiting for opponent...";
+  } else if (winner) {
+    status = `Winner: ${winner}`;
+  } else if (gameOver) {
+    status = `Draw!!!`;
+  } else if (myIndex === -1) {
+    status = "Spectating";
+  } else {
+    status = isMyTurn ? "Your turn" : "Opponent's turn";
+  }
+
+  const [haiku, setHaiku] = useState(getHaiku());
+  const [haikuIndex, setHaikuIndex] = useState(0);
+  const nextLineIn = 3600;
+  const allLinesStay = 2400;
+  const allLinesFade = 1200;
+
+  useEffect(() => {
+    const totalTime = haiku.length * nextLineIn + allLinesStay + allLinesFade;
+
+    const timer = setTimeout(() => {
+      const next = getHaiku();
+      setHaiku(next);
+      setHaikuIndex((i) => i + 1);
+    }, totalTime);
+
+    return () => clearTimeout(timer);
+  }, [haikuIndex]);
+
   return (
-    <div>
-      {winner ? (
-        <h2>Winner: {winner}</h2>
-      ) : (
-        <h2>Turn: Player {turn === 0 ? "X" : "O"}</h2>
+    <>
+      {matchId && (
+        <motion.div
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.35 }}
+        >
+          <motion.h2
+            key={status}
+            initial={{ opacity: 0, y: -6 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.25 }}
+            style={{ marginBottom: 8 }}
+          >
+            {status}
+          </motion.h2>
+
+          {gameReady && mySymbol && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 0.75 }}
+              style={{ marginBottom: 8, fontSize: 14 }}
+            >
+              You: <strong>{mySymbol}</strong> — Opponent:{" "}
+              <strong>{opponentSymbol}</strong>
+            </motion.div>
           )}
 
-      <div
+          {/* -------------------------
+              BOARD
+          -------------------------- */}
+          <motion.div
+            layout
             style={{
               display: "grid",
               gridTemplateColumns: "repeat(3, 80px)",
               gap: "10px",
-          marginTop: "20px",
+              marginTop: "6px",
             }}
           >
             {board.map((row, rIdx) =>
-          row.map((cell, cIdx) => (
-            <button
-              key={`${rIdx}-${cIdx}`}
+              row.map((cell, cIdx) => {
+                const disabled =
+                  !!cell ||
+                  !!winner ||
+                  !gameReady ||
+                  myIndex === -1 ||
+                  !isMyTurn;
+
+                return (
+                  <motion.button
+                    key={`${rIdx}-${cIdx}-${cell}`} // rerender when cell changes
+                    layout
+                    whileHover={
+                      !disabled
+                        ? {
+                            scale: 1.1,
+                            boxShadow: "0px 0px 10px rgba(255,255,255,0.4)",
+                          }
+                        : {}
+                    }
+                    whileTap={!disabled ? { scale: 0.85 } : {}}
+                    onClick={() => !disabled && onCellClick(rIdx, cIdx)}
                     style={{
                       width: "80px",
                       height: "80px",
                       fontSize: "2rem",
-                cursor: cell || winner ? "not-allowed" : "pointer",
+                      borderRadius: "10px",
+                      border: "2px solid #333",
+                      background: "#111",
+                      color: "white",
+                      cursor: disabled ? "not-allowed" : "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
                     }}
-              onClick={() => {
-                if (!cell && !winner) onCellClick(rIdx, cIdx);
+                  >
+                    <AnimatePresence>
+                      {cell && (
+                        <motion.span
+                          key="symbol"
+                          initial={{ scale: 0.3, opacity: 0 }}
+                          animate={{ scale: 1, opacity: 1 }}
+                          exit={{ scale: 0.3, opacity: 0 }}
+                          transition={{ type: "spring", stiffness: 200, damping: 12 }}
+                          style={{
+                            color:
+                              winner === cell
+                                ? "#f1c40f" // highlight winning symbol
+                                : "white",
+                            textShadow:
+                              winner === cell
+                                ? "0 0 12px rgba(241,196,15,0.8)"
+                                : "none",
                           }}
                         >
                           {cell}
-            </button>
-          ))
+                        </motion.span>
                       )}
-      </div>
-    </div>
+                    </AnimatePresence>
+                  </motion.button>
                 );
+              })
+            )}
+          </motion.div>
+
+          {!winner && (
+            <div
+              style={{
+                minHeight: "90px",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+                marginTop: "14px",
+                position: "relative",
+              }}
+            >
+              <AnimatePresence mode="wait">
+                <motion.div
+                  key={haikuIndex}
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  transition={{
+                    duration: 2.4,
+                    ease: "easeInOut",
+                  }}
+                  style={{
+                    textAlign: "center",
+                    lineHeight: "1.35",
+                  }}
+                >
+                  {haiku.map((line, i) => (
+                    <motion.div
+                      key={i}
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      transition={{
+                        delay: i * (nextLineIn / 1000),
+                        duration: nextLineIn / 1000,
+                        ease: "easeOut",
+                      }}
+                      style={{
+                        fontSize: "18px",
+                        color: "#f1c40f",
+                        fontWeight: 700,
+                        whiteSpace: "nowrap",
+                      }}
+                    >
+                      {line}
+                    </motion.div>
+                  ))}
+                </motion.div>
+              </AnimatePresence>
+            </div>
+          )}
+
+          {/* Winner pulse animation */}
+          {winner && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{
+                opacity: 1,
+                scale: [1, 1.06, 1],
+              }}
+              transition={{
+                repeat: Infinity,
+                duration: 1.4,
+                ease: "easeInOut",
+              }}
+              style={{
+                color: "#f1c40f",
+                fontSize: "20px",
+                marginTop: "14px",
+                fontWeight: 700,
+                textAlign: "center",
+              }}
+            >
+              🎉 {winner} Wins! 🎉
+            </motion.div>
+          )}
+        </motion.div>
+      )}
+    </>
+  )
 }

src/tictactoe/Leaderboard.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { useRef, useEffect, useState } from "react";
+import {
+  ApiLeaderboardRecordList,
+// @ts-ignore
+} from "@heroiclabs/nakama-js/dist/api.gen"
+import { useNakama } from "./providers/NakamaProvider";
+
+export default function Leaderboard({
+  intervalMs = 10000,
+}: {
+  intervalMs?: number;
+}) {
+  const {
+    getLeaderboardTop
+  } = useNakama()
+  const [records, setRecords] = useState<ApiLeaderboardRecordList>([]);
+  const timerRef = useRef<number | null>(null);
+  useEffect(() => {
+    let mounted = true;
+
+    async function load() {
+      try {
+        const data = await getLeaderboardTop();
+        if (mounted) setRecords(data);
+      } catch (err) {
+        console.error("Leaderboard fetch failed:", err);
+      }
+    }
+
+    // First load immediately
+    load();
+
+    // Start interval polling
+    timerRef.current = window.setInterval(load, intervalMs);
+
+    return () => {
+      mounted = false;
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [getLeaderboardTop, intervalMs]);
+
+  // @ts-ignore
+  return (
+    <div className="leaderboard">
+      <h2 className="leaderboard-title">🏆 Leaderboard – Wins</h2>
+
+      {records?.records?.length === 0 && (
+        <div className="leaderboard-empty">No entries yet.</div>
+      )}
+
+      {records?.records?.map((
+        r: {
+          owner_id: number,
+          username: string,
+          score: number
+        },
+        i: number
+      ) => (
+        <div className="leaderboard-row" key={r.owner_id + i}>
+          <div className="leaderboard-rank">{i + 1}</div>
+          <div className="leaderboard-name">{r.username || r.owner_id}</div>
+          <div className="leaderboard-score">{r.score}</div>
+        </div>
+      ))}
+    </div>
+  );
+}

src/tictactoe/MatchList.tsx

@@ -0,0 +1,55 @@
+import { Match } from "@heroiclabs/nakama-js";
+
+interface MatchListProps {
+  matches: Match[];
+}
+
+export default function MatchList({ matches }: MatchListProps) {
+  if (!matches.length) return <p>No open matches</p>;
+
+  return (
+    <div style={{ marginTop: "20px" }}>
+      <h3>Open Matches</h3>
+
+      <table
+        style={{
+          width: "100%",
+          borderCollapse: "collapse",
+          marginTop: "10px",
+        }}
+      >
+        <thead>
+          <tr>
+            <th style={th}>Sr No.</th>
+            <th style={th}>Match ID</th>
+            <th style={th}>Label</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {matches
+            .filter(m => m.size ?? 0 > 0)
+            .map((m, index) => (
+            <tr key={m.match_id}>
+              <td style={td}>{index + 1}</td>
+              <td style={td}>{m.match_id}</td>
+              <td style={td}>{m.label ?? "-"}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+const th: React.CSSProperties = {
+  textAlign: "left",
+  padding: "8px",
+  background: "#f2f2f2",
+  borderBottom: "1px solid #ccc",
+};
+
+const td: React.CSSProperties = {
+  padding: "8px",
+  borderBottom: "1px solid #eee",
+};

src/tictactoe/Player.tsx

@@ -0,0 +1,285 @@
+import React, { useEffect, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import Leaderboard from "./Leaderboard";
+import { useNakama } from "./providers/NakamaProvider";
+
+export default function Player({
+  onMatchDataCallback,
+}: {
+  onMatchDataCallback: (msg: any) => void;
+}) {
+  const {
+    session,
+    matchId,
+    loginOrRegister,
+    logout,
+    onMatchData,
+    joinMatchmaker,
+  } = useNakama();
+
+  const [username, setUsername] = useState(
+    localStorage.getItem("username") ?? ""
+  );
+  const [selectedMode, setSelectedMode] = useState("classic");
+  const [isQueueing, setIsQueueing] = useState(false);
+  const isRegistered = localStorage.getItem("registered") === "yes";
+
+  // ------------------------------------------
+  // CONNECT
+  // ------------------------------------------
+  async function handleConnect() {
+    await loginOrRegister(username);
+
+    // Match data listener
+    onMatchData(onMatchDataCallback);
+  }
+
+  // ------------------------------------------
+  // MATCHMAKING
+  // ------------------------------------------
+  async function startQueue(selectedMode: string) {
+    setIsQueueing(true);
+
+    try {
+      const ticket = await joinMatchmaker({
+        game: 'tictactoe',
+        mode: selectedMode,
+      });
+      console.log("Queued:", ticket);
+    } catch (err) {
+      console.error("Matchmaking failed:", err);
+      setIsQueueing(false);
+    }
+  }
+
+  function cancelQueue() {
+    setIsQueueing(false);
+    // Nakama matchmaker tickets auto-expire by default in your setup.
+    // If you later add manual ticket cancel RPC, call it here.
+  }
+
+  useEffect(() => {
+    handleConnect();
+  }, []);
+
+  return (
+    <div style={{ marginBottom: "20px" }}>
+      <AnimatePresence mode="wait">
+        {/* ---------------- LOGIN SCREEN ---------------- */}
+        {!session && (
+          <motion.div
+            key="login"
+            initial={{ opacity: 0, y: 20, scale: 0.97 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: -20, scale: 0.97 }}
+            transition={{ duration: 0.4, ease: "easeOut" }}
+            style={{
+              background: "#111",
+              padding: "24px",
+              borderRadius: "16px",
+              width: "280px",
+              margin: "0 auto",
+              color: "white",
+              boxShadow:
+                "0 4px 16px rgba(0,0,0,0.4), inset 0 0 20px rgba(255,255,255,0.03)",
+              textAlign: "center",
+            }}
+          >
+            <h2 style={{ marginBottom: "16px" }}>Welcome!</h2>
+
+            <input
+              placeholder="Enter username"
+              value={username}
+              disabled={isRegistered}
+              onChange={(e) => setUsername(e.target.value)}
+              style={{
+                padding: "10px",
+                width: "100%",
+                borderRadius: "12px",
+                background: "#222",
+                color: "white",
+                border: "1px solid #333",
+                marginBottom: "12px",
+                fontSize: "14px",
+              }}
+            />
+
+            <motion.button
+              whileTap={{ scale: 0.95 }}
+              onClick={handleConnect}
+              disabled={username.length === 0}
+              style={{
+                width: "100%",
+                padding: "10px",
+                borderRadius: "12px",
+                background: username.length ? "#2ecc71" : "#444",
+                border: "none",
+                cursor: username.length ? "pointer" : "not-allowed",
+                color: "white",
+                fontWeight: 600,
+                fontSize: "14px",
+              }}
+            >
+              Connect
+            </motion.button>
+          </motion.div>
+        )}
+
+        {/* ---------------- LOBBY SCREEN ---------------- */}
+        {session && !matchId && (
+          <motion.div
+            key="lobby"
+            initial={{ opacity: 0, y: 40 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -40 }}
+            transition={{ duration: 0.45, ease: "easeOut" }}
+            style={{
+              padding: "20px",
+              background: "#0f0f0f",
+              borderRadius: "20px",
+              color: "white",
+              textAlign: "center",
+            }}
+          >
+            <h2 style={{ marginBottom: "10px" }}>
+              Hello, <span style={{ color: "#2ecc71" }}>{session.username}</span>
+            </h2>
+
+            <label style={{ display: "block", marginTop: "10px", opacity: 0.7 }}>
+              Select Game Mode
+            </label>
+
+            <select
+              value={selectedMode}
+              disabled={isQueueing}
+              onChange={(e) => setSelectedMode(e.target.value)}
+              style={{
+                padding: "8px",
+                margin: "10px 0 16px",
+                width: "60%",
+                borderRadius: "10px",
+                background: "#222",
+                color: "white",
+                border: "1px solid #333",
+              }}
+            >
+              <option value="classic">Classic</option>
+              <option value="blitz">Blitz</option>
+            </select>
+
+            {!isQueueing && (
+              <motion.button
+                whileTap={{ scale: 0.95 }}
+                onClick={() => startQueue(selectedMode)}
+                style={{
+                  padding: "10px 20px",
+                  borderRadius: "12px",
+                  background: "#3498db",
+                  color: "white",
+                  border: "none",
+                  marginRight: "10px",
+                  cursor: "pointer",
+                  fontWeight: 600,
+                }}
+              >
+                Join Matchmaking
+              </motion.button>
+            )}
+
+            {/* Queueing animation */}
+            {isQueueing && (
+              <motion.div
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ duration: 0.3 }}
+                style={{
+                  marginTop: "10px",
+                  marginBottom: "10px",
+                  padding: "12px 16px",
+                  borderRadius: "12px",
+                  background: "#222",
+                  color: "white",
+                  display: "inline-block",
+                  fontSize: "14px",
+                  border: "1px solid #333",
+                }}
+              >
+                <div style={{ marginBottom: "6px", fontWeight: 600 }}>
+                  Finding an opponent…
+                </div>
+
+                {/* Animated pulsing dots */}
+                <motion.div
+                  animate={{ opacity: [0.3, 1, 0.3] }}
+                  transition={{ duration: 1.2, repeat: Infinity }}
+                  style={{ letterSpacing: "2px", fontSize: "18px" }}
+                >
+                  ● ● ●
+                </motion.div>
+
+                {/* Cancel button */}
+                <button
+                  onClick={cancelQueue}
+                  style={{
+                    marginTop: "10px",
+                    padding: "6px 12px",
+                    borderRadius: "8px",
+                    background: "#e74c3c",
+                    color: "white",
+                    border: "none",
+                    cursor: "pointer",
+                    fontSize: "12px",
+                    fontWeight: 600,
+                  }}
+                >
+                  Cancel
+                </button>
+              </motion.div>
+            )}
+
+            <div style={{ marginTop: "24px" }}>
+              <Leaderboard />
+            </div>
+
+            <motion.button
+              whileTap={{ scale: 0.95 }}
+              onClick={logout}
+              style={{
+                padding: "10px 20px",
+                borderRadius: "12px",
+                background: "#e74c3c",
+                color: "white",
+                border: "none",
+                cursor: "pointer",
+                fontWeight: 600,
+              }}
+            >
+              Logout
+            </motion.button>
+
+          </motion.div>
+        )}
+
+        {/* ---------------- MATCH SCREEN ---------------- */}
+        {session && matchId && (
+          <motion.div
+            key="match"
+            initial={{ opacity: 0, scale: 0.9, y: 30 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.9, y: -20 }}
+            transition={{ duration: 0.35, ease: "easeOut" }}
+            style={{
+              padding: "20px",
+              color: "white",
+              textAlign: "center",
+            }}
+          >
+            <h2 style={{ marginBottom: "10px" }}>
+              Go, <span style={{ color: "#2ecc71" }}>{session.username}</span>
+            </h2>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

src/tictactoe/TicTacToe.tsx

@@ -1,9 +1,11 @@
-import { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
+import { motion } from "framer-motion";
 import { useNakama } from "./providers/NakamaProvider";
 import Board from "./Board";
+import Player from "./Player";
+import { PlayerModel } from "./Board";
 
 export default function TicTacToe() {
-  const [username, setUsername] = useState("");
   const [board, setBoard] = useState<string[][]>([
     ["", "", ""],
     ["", "", ""],
@@ -11,46 +13,47 @@ export default function TicTacToe() {
   ]);
   const [turn, setTurn] = useState<number>(0);
   const [winner, setWinner] = useState<string | null>(null);
+  const [gameOver, setGameOver] = useState<boolean | null>(null);
+  const [players, setPlayers] = useState<PlayerModel[]>([]);
 
-  const {
-    loginOrRegister,
-    joinMatchmaker,
-    onMatchData,
-    sendMatchData,
-    matchId,
-  } = useNakama();
-
-  useEffect(() => {
-    onMatchData((msg) => {
-      console.log("[Match Data]", msg);
-
-      if (msg.opCode === 2) {
-        setBoard(msg.data.board);
-        setTurn(msg.data.turn);
-        setWinner(msg.data.winner || null);
-      }
-    });
-  }, [onMatchData]);
+  const { sendMatchData, onMatchData, matchId, session } = useNakama();
 
   // ------------------------------------------
-  // CONNECT
+  // MATCH DATA CALLBACK (from Player component)
   // ------------------------------------------
-  async function connect() {
-    await loginOrRegister(username);
-
-    // Match data listener
-    onMatchData((msg) => {
+  function onMatchDataCallback(msg: { opCode: number; data: any }) {
     console.log("[Match Data]", msg);
 
     if (msg.opCode === 2) {
       const state = msg.data;
+      console.log("Match state:", state);
 
-        setBoard(state.board);
+      setBoard(state.board.grid);
       setTurn(state.turn);
-        setWinner(state.winner || null);
+      setGameOver(state.game_over);
+      if (state.winner >= 0) {
+        setWinner(state.players[state.winner].username);
+      // } else if (state.game_over) {
+      //   // Game ended but winner = -1 → draw
+      //   setWinner("draw");
+      } else {
+        // Ongoing game, no winner
+        setWinner(null);
       }
-    });
+      setPlayers(state.players || []);
     }
+  }
+
+  useEffect(() => {
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, []);
+
+  useEffect(() => {
+    onMatchData(onMatchDataCallback);
+  }, [onMatchData]);
 
   // ------------------------------------------
   // SEND A MOVE
@@ -58,41 +61,71 @@ export default function TicTacToe() {
   function handleCellClick(row: number, col: number) {
     if (!matchId) return;
 
-    sendMatchData(matchId, 1, { row, col }); // OpMove=1
-  }
-
-  // ------------------------------------------
-  // MATCHMAKING
-  // ------------------------------------------
-  async function startQueue() {
-    const ticket = await joinMatchmaker("classic");
-    console.log("Queued:", ticket);
+    sendMatchData(matchId, 1, {data: {row, col}});
   }
 
   return (
-    <div>
-      <h1>Tic Tac Toe Multiplayer</h1>
+    <div
+      style={{
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        background: "#060606",
+        color: "white",
+        overflow: "hidden",
+      }}
+    >
+      {/* ---------------- HEADER (always fixed at top) ---------------- */}
+      <header
+        style={{
+          padding: "16px 20px",
+          background: "rgba(255,255,255,0.04)",
+          borderBottom: "1px solid rgba(255,255,255,0.08)",
+          backdropFilter: "blur(6px)",
+          textAlign: "center",
+          fontSize: "26px",
+          fontWeight: 700,
+          letterSpacing: "1px",
+        }}
+      >
+        Tic Tac Toe
+      </header>
 
-      {!matchId && (
-        <>
-          <input
-            placeholder="username"
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-          />
-          <button onClick={connect}>Connect</button>
-          <button onClick={startQueue}>Join Matchmaking</button>
-        </>
-      )}
+      {/* ---------------- MAIN CONTENT (scrolls) ---------------- */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        style={{
+          flex: 1,
+          overflowY: "auto",
+          padding: "20px",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+        }}
+      >
+        <Player onMatchDataCallback={onMatchDataCallback} />
 
-      {matchId && (
+        <div
+          style={{
+            padding: "20px",
+            background: "rgba(255,255,255,0.03)",
+            borderRadius: "20px",
+            boxShadow: "0 6px 20px rgba(0,0,0,0.4)",
+            minWidth: "300px",
+          }}
+        >
           <Board
             board={board}
             turn={turn}
             winner={winner}
+            gameOver={gameOver}
+            players={players}
+            myUserId={session?.user_id ?? null}
             onCellClick={handleCellClick}
           />
-      )}
+        </div>
+      </motion.div>
     </div>
   );
 }

src/tictactoe/providers/NakamaProvider.tsx

@@ -3,10 +3,16 @@ import {
   Session,
   Socket,
   MatchmakerTicket,
-  Match,
   MatchData,
   MatchmakerMatched,
 } from "@heroiclabs/nakama-js";
+
+import {
+  ApiMatch,
+  ApiLeaderboardRecordList,
+// @ts-ignore
+} from "@heroiclabs/nakama-js/dist/api.gen"
+
 import React, { createContext, useContext, useState } from "react";
 
 function getOrCreateDeviceId(): string {
@@ -19,6 +25,11 @@ function getOrCreateDeviceId(): string {
   return id;
 }
 
+type GameMetadata = {
+  game: string;
+  mode: string;
+};
+
 export interface NakamaContextType {
   client: Client;
   socket: Socket | null;
@@ -26,50 +37,130 @@ export interface NakamaContextType {
   matchId: string | null;
 
   loginOrRegister(username: string): Promise<void>;
-  joinMatchmaker(mode: string): Promise<string>;
+  logout(): Promise<void>;
+  joinMatchmaker(gameMetadata: GameMetadata): Promise<string>;
   joinMatch(matchId: string): Promise<void>;
 
   sendMatchData(matchId: string, op: number, data: object): void;
 
   onMatchData(cb: (msg: any) => void): void;
+  getLeaderboardTop(): Promise<ApiLeaderboardRecordList>;
+  listOpenMatches(): Promise<ApiMatch[]>;
 }
 
 export const NakamaContext = createContext<NakamaContextType>(null!);
 
 export function NakamaProvider({ children }: { children: React.ReactNode }) {
+  console.log(
+    "[Nakama] Initializing...",
+      // import.meta.env.VITE_WS_SKEY,
+      import.meta.env.VITE_WS_HOST,
+      import.meta.env.VITE_WS_PORT,
+      import.meta.env.VITE_WS_SSL === "true"
+  );
   const [client] = useState(
-    () => new Client("defaultkey", "127.0.0.1", "7350")
+    () => new Client(
+      import.meta.env.VITE_WS_SKEY,
+      import.meta.env.VITE_WS_HOST,
+      import.meta.env.VITE_WS_PORT,
+      import.meta.env.VITE_WS_SSL === "true"
+    )
   );
 
+  const gameMetadataRef = React.useRef<GameMetadata | null>(null);
   const [session, setSession] = useState<Session | null>(null);
   const [socket, setSocket] = useState<Socket | null>(null);
   const [matchId, setMatchId] = useState<string | null>(null);
+  const socketRef = React.useRef<Socket | null>(null);
+
+  async function autoLogin() {
+    const deviceId = getOrCreateDeviceId();
+
+    try {
+      return await client.authenticateDevice(
+        deviceId,
+        false
+      );
+    } catch (e) {
+      // fallback: treat as new user
+      localStorage.removeItem("registered");
+      throw e;
+    }
+  }
+
+  async function registerWithUsername(username: string) {
+    const deviceId = getOrCreateDeviceId();
+
+    // create + set username
+    const session = await client.authenticateDevice(
+      deviceId,
+      true,
+      username
+    );
+
+    // mark an account as registered
+    localStorage.setItem("registered", "yes");
+    localStorage.setItem("username", username);
+
+    return session;
+  }
+
+  async function getSession(username?: string) {
+    const isRegistered = localStorage.getItem("registered") === "yes";
+    if (!username && !isRegistered) {
+      throw new Error("No username provided and not registered");
+    }
+
+    let newSession;
+    if (!isRegistered) {
+      newSession = await registerWithUsername(username ?? "");
+    } else {
+      newSession = await autoLogin();
+    }
+
+    return newSession;
+  }
 
   // ----------------------------------------------------
   // LOGIN
   // ----------------------------------------------------
-  async function loginOrRegister(username: string) {
-    const deviceId = getOrCreateDeviceId();
-
+  async function loginOrRegister(username?: string) {
     // authenticate user
-    const newSession = await client.authenticateDevice(deviceId, true, username);
+    const newSession = await getSession(username);
     setSession(newSession);
 
-    // create socket (new Nakama 3.x signature)
-    const s = client.createSocket(undefined, undefined); // no SSL on localhost
+    const s = client.createSocket(
+      import.meta.env.VITE_WS_SSL === "true",
+      undefined
+    );
     await s.connect(newSession, true);
     setSocket(s);
+    socketRef.current = s;
 
     console.log("[Nakama] WebSocket connected");
 
     // MATCHMAKER MATCHED CALLBACK
     s.onmatchmakermatched = async (matched: MatchmakerMatched) => {
+      // 1) If match_id is empty → server rejected the group.
+      if (!matched.match_id) {
+        console.warn("[Nakama] Match rejected by server. Auto-requeueing...");
+
+        if (gameMetadataRef.current) {
+          try {
+            await joinMatchmaker(gameMetadataRef.current);
+          } catch (e) {
+            console.error("[Nakama] Requeue failed:", e);
+          }
+        }
+
+        return;
+      }
+
+      // 2) Valid match: continue as usual.
       console.log("[Nakama] MATCHED:", matched);
-
-      setMatchId(matched.match_id);
-
       try {
         await s.joinMatch(matched.match_id);
+        setMatchId(matched.match_id);
         console.log("[Nakama] Auto-joined match:", matched.match_id);
       } catch (err) {
         console.error("[Nakama] Failed to join match:", err);
@@ -77,20 +168,51 @@ export function NakamaProvider({ children }: { children: React.ReactNode }) {
     };
   }
 
+  async function logout() {
+    try {
+      // 1) Disconnect socket if present
+      if (socketRef.current) {
+        socketRef.current.disconnect(true);
+        console.log("[Nakama] WebSocket disconnected");
+      }
+    } catch (err) {
+      console.warn("[Nakama] Error while disconnecting socket:", err);
+    }
+
+    // 2) Clear state
+    setSocket(null);
+    socketRef.current = null;
+    setSession(null);
+
+    console.log("[Nakama] Clean logout completed");
+  }
+
   // ----------------------------------------------------
   // MATCHMAKING
   // ----------------------------------------------------
-  async function joinMatchmaker(mode: string) {
+  async function joinMatchmaker(gameMetadata: GameMetadata) {
+    const socket = socketRef.current;
+    const game = gameMetadata.game;
+    const mode = gameMetadata.mode;
     if (!socket) throw new Error("socket missing");
 
-    console.log(`[Nakama] Matchmaking... with +mode:"${mode}"`);
+    if (!game || game.trim() === "") {
+      throw new Error("Matchmaking requires a game name");
+    }
+
+    if (!mode || mode.trim() === "") {
+      throw new Error("Matchmaking requires a mode");
+    }
+    console.log(`[Nakama] Matchmaking... game="${game}" mode="${mode}"`);
     const ticket: MatchmakerTicket = await socket.addMatchmaker(
       `*`, // query
       2, // min count
       2, // max count
-      { mode } // stringProperties
+      { game, mode }
     );
 
+    gameMetadataRef.current = { game, mode };
+
     return ticket.ticket;
   }
 
@@ -109,6 +231,7 @@ export function NakamaProvider({ children }: { children: React.ReactNode }) {
   // ----------------------------------------------------
   function sendMatchData(matchId: string, op: number, data: object) {
     if (!socket) return;
+    console.log("[Nakama] Sending match state:", matchId, op, data);
     socket.sendMatchState(matchId, op, JSON.stringify(data));
   }
 
@@ -128,6 +251,29 @@ export function NakamaProvider({ children }: { children: React.ReactNode }) {
     };
   }
 
+  async function getLeaderboardTop(): Promise<ApiLeaderboardRecordList> {
+    if (!session) return [];
+
+    return await client.listLeaderboardRecords(
+      session,
+      "tictactoe",
+      [],
+      10 // top 10
+    );
+  }
+  async function listOpenMatches(): Promise<ApiMatch[]> {
+    if (!session) {
+      console.warn("[Nakama] listOpenMatches called before login");
+      return [];
+    }
+
+    const result = await client.listMatches(session, 10);
+
+    console.log("[Nakama] Open matches:", result.matches);
+
+    return result.matches ?? [];
+  }
+
   return (
     <NakamaContext.Provider
       value={{
@@ -136,10 +282,13 @@ export function NakamaProvider({ children }: { children: React.ReactNode }) {
         socket,
         matchId,
         loginOrRegister,
+        logout,
         joinMatchmaker,
         joinMatch,
         sendMatchData,
         onMatchData,
+        getLeaderboardTop,
+        listOpenMatches,
       }}
     >
       {children}

src/tictactoe/styles.css

@@ -1,14 +1,15 @@
 body {
   font-family: sans-serif;
-  background: #f4f4f4;
+  background: #eaeef3;
   display: flex;
   justify-content: center;
-  padding-top: 50px;
   margin: 0;
+  color: #222;
 }
 
 .game-container {
   text-align: center;
+  padding: 20px;
 }
 
 .board {
@@ -22,32 +23,111 @@ body {
 
 .square {
   background: white;
-  border: 2px solid #333;
-  font-size: 2rem;
+  border-radius: 10px;
+  border: 2px solid #444;
+  font-size: 2.2rem;
   font-weight: bold;
   cursor: pointer;
   height: 100px;
   width: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 0.15s ease;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
 }
 
 .square:hover {
-  background: #eee;
+  background: #f1f1f1;
+  transform: scale(1.04);
 }
 
 .status {
-  font-size: 1.4rem;
-  margin-bottom: 10px;
+  font-size: 1.6rem;
+  margin-bottom: 15px;
+  font-weight: bold;
+  color: #222;
 }
 
 .reset-btn {
-  padding: 10px 20px;
-  background: #333;
+  padding: 12px 26px;
+  background: #3558d8;
   color: white;
   border: none;
   cursor: pointer;
   font-size: 1rem;
+  border-radius: 8px;
+  transition: 0.2s ease;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
 }
 
 .reset-btn:hover {
-  background: #555;
+  background: #2449c7;
+  transform: translateY(-2px);
 }
+
+.leaderboard {
+  width: 300px;
+  margin: 25px auto;
+  padding: 15px 20px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+  font-family: sans-serif;
+}
+
+/* Leaderboard title */
+.leaderboard-title {
+  margin: 0 0 15px 0;
+  font-size: 1.4rem;
+  font-weight: 700;
+  text-align: center;
+  color: #222;
+}
+
+/* Each row */
+.leaderboard-row {
+  display: flex;
+  align-items: center;
+  padding: 10px 8px;
+  background: #f7f9fc;
+  border-radius: 8px;
+  margin-bottom: 8px;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
+}
+
+/* Empty state */
+.leaderboard-empty {
+  padding: 12px 0;
+  text-align: center;
+  color: #777;
+  font-size: 1rem;
+}
+
+/* Rank number */
+.leaderboard-rank {
+  width: 28px;
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: #3558d8;
+}
+
+/* Username */
+.leaderboard-name {
+  flex: 1;
+  margin-left: 10px;
+  font-weight: 500;
+  color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Score value */
+.leaderboard-score {
+  width: 40px;
+  text-align: right;
+  font-weight: 700;
+  color: #111;
+}
+

src/tictactoe/utils/haikus.ts

@@ -0,0 +1,91 @@
+export const HAIKUS: string[][] = [
+  // HAIKU STORY SET 1 — The Only Winning Move Is No Move
+  [
+    "Silence fills the board.",
+    "Two minds waiting, both flawless.",
+    "Equilibrium.",
+  ],
+  [
+    "Perfect strategies",
+    "Cancel out in quiet draws.",
+    "Stillness holds the key.",
+  ],
+  [
+    "Victory fades out,",
+    "When both players see the truth:",
+    "No move is the winning move.",
+  ],
+
+  // // HAIKU STORY SET 2 — AI & Game Theory
+  // [
+  //   "Grids bend under thought.",
+  //   "Algorithms watch patterns.",
+  //   "The future decides.",
+  // ],
+  // [
+  //   "Zeroes read the board.",
+  //   "Minimax breathes in the dark.",
+  //   "Loss is calculated.",
+  // ],
+  // [
+  //   "Two perfect AIs",
+  //   "Stare across a tiny world.",
+  //   "Neither one can win.",
+  // ],
+  //
+  // // HAIKU STORY SET 3 — Players Becoming Machines
+  // [
+  //   "Hands learn old rhythms.",
+  //   "Humans imitate the code.",
+  //   "We evolve to think.",
+  // ],
+  // [
+  //   "Soft neon whispers,",
+  //   "The grid calls for your next move.",
+  //   "Time waits for no one.",
+  // ],
+  // [
+  //   "Your choices echo.",
+  //   "Small decisions shape the board.",
+  //   "You shape the story.",
+  // ],
+  //
+  // // HAIKU STORY SET 4 — Solving the Game
+  // [
+  //   "Every path explored,",
+  //   "Every outcome known too well.",
+  //   "Beauty in the bones.",
+  // ],
+  // [
+  //   "Corners dream of acts,",
+  //   "Center knows its destiny.",
+  //   "Balance is the law.",
+  // ],
+  // [
+  //   "Three lines cross in fate.",
+  //   "Nine spaces hold nine futures.",
+  //   "All end in a draw.",
+  // ],
+  //
+  // // HAIKU STORY SET 5 — Existential Tic-Tac-Toe
+  // [
+  //   "The board is a mirror.",
+  //   "It reflects your quiet mind.",
+  //   "Win by understanding.",
+  // ],
+  // [
+  //   "Nothing left to prove.",
+  //   "The shape of thought is perfect.",
+  //   "The game simply is.",
+  // ],
+  // [
+  //   "A small universe,",
+  //   "Filled with silent decisions.",
+  //   "Meaning in the moves.",
+  // ],
+];
+
+export default function getHaiku() {
+  const idx = Math.floor(Math.random() * HAIKUS.length);
+  return HAIKUS[idx];
+}

src/vite-env.d.ts

@@ -1,7 +1,10 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-  readonly VITE_WS_BASE_URL: string;
+  readonly VITE_WS_HOST: string;
+  readonly VITE_WS_PORT: string;
+  readonly VITE_WS_SKEY: string;
+  readonly VITE_WS_SSL: string;
 }
 
 interface ImportMeta {