the first deploy

.dockerignore

@@ -0,0 +1,43 @@
+# Git
+.git
+.gitignore
+.gitattributes
+
+# Documentation
+README.md
+*.md
+
+# Node modules (will be installed during build)
+node_modules
+**/node_modules
+
+# Build outputs (will be generated during build)
+dist
+**/dist
+
+# Test files
+tests
+**/tests
+*.test.ts
+*.test.js
+
+# Development files
+.vscode
+.idea
+*.log
+*.lock
+
+# Environment files
+.env
+.env.local
+.env.*.local
+
+# Temporary files
+*.tmp
+*.temp
+tmp/
+temp/
+
+# OS files
+.DS_Store
+Thumbs.db

Dockerfile

@@ -0,0 +1,42 @@
+FROM node:20-slim
+
+# Set noninteractive installation
+ENV DEBIAN_FRONTEND=noninteractive
+
+# Install build dependencies
+RUN apt-get update && apt-get install -y \
+    curl \
+    git \
+    && rm -rf /var/lib/apt/lists/*
+
+# Create app directory
+WORKDIR /app
+
+# Copy entire trigo-web project
+COPY trigo-web/ ./
+
+# Install all dependencies (root, app, backend)
+RUN npm install && \
+    cd app && npm install && \
+    cd ../backend && npm install && \
+    cd ..
+
+# Build jison parsers (required for the game)
+RUN npm run build:parsers
+
+# Build frontend (generates dist folder)
+RUN cd app && npm run build
+
+# Build backend TypeScript
+RUN cd backend && npm run build
+
+# Set environment variables for Hugging Face Spaces
+ENV PORT=7860
+ENV HOST=0.0.0.0
+ENV NODE_ENV=production
+
+# Expose port 7860 (required by Hugging Face Spaces)
+EXPOSE 7860
+
+# Start backend server (which will also serve frontend static files)
+CMD ["npm", "run", "start:prod"]

deploy.sh

@@ -0,0 +1,61 @@
+#!/bin/bash
+
+# Trigo Hugging Face Space Deployment Script
+# This script copies the trigo-web project to the HF Space repo and prepares it for deployment
+
+set -e
+
+echo "🚀 Trigo HF Space Deployment Script"
+echo "===================================="
+echo ""
+
+# Define paths
+PROJECT_ROOT="/home/camus/work/trigo"
+TRIGO_WEB="$PROJECT_ROOT/trigo-web"
+HF_SPACE="$PROJECT_ROOT/third_party/trigo-hfspace"
+
+# Check if directories exist
+if [ ! -d "$TRIGO_WEB" ]; then
+    echo "❌ Error: trigo-web directory not found at $TRIGO_WEB"
+    exit 1
+fi
+
+if [ ! -d "$HF_SPACE" ]; then
+    echo "❌ Error: HF Space directory not found at $HF_SPACE"
+    exit 1
+fi
+
+echo "📂 Project directory: $TRIGO_WEB"
+echo "📂 HF Space directory: $HF_SPACE"
+echo ""
+
+# Clean up old trigo-web in HF space if it exists
+if [ -d "$HF_SPACE/trigo-web" ]; then
+    echo "🧹 Cleaning up old trigo-web directory..."
+    rm -rf "$HF_SPACE/trigo-web"
+fi
+
+# Copy trigo-web to HF space
+echo "📦 Copying trigo-web to HF Space repository..."
+cp -r "$TRIGO_WEB" "$HF_SPACE/"
+
+# Remove node_modules and dist folders (will be built in Docker)
+echo "🧹 Removing node_modules and dist folders (will be rebuilt in Docker)..."
+find "$HF_SPACE/trigo-web" -type d -name "node_modules" -exec rm -rf {} + 2>/dev/null || true
+find "$HF_SPACE/trigo-web" -type d -name "dist" -exec rm -rf {} + 2>/dev/null || true
+
+# Remove test files
+echo "🧹 Removing test files..."
+rm -rf "$HF_SPACE/trigo-web/tests" 2>/dev/null || true
+
+echo ""
+echo "✅ Files prepared successfully!"
+echo ""
+echo "📋 Next steps:"
+echo "   1. cd $HF_SPACE"
+echo "   2. git add ."
+echo "   3. git commit -m 'Deploy Trigo game'"
+echo "   4. git push"
+echo ""
+echo "🌐 After pushing, HF will automatically build and deploy your app."
+echo ""

trigo-web/.prettierignore

@@ -0,0 +1,9 @@
+node_modules
+dist
+build
+coverage
+.vscode
+.idea
+*.log
+*.min.js
+*.min.css

trigo-web/.prettierrc

@@ -0,0 +1,17 @@
+{
+  "semi": true,
+  "trailingComma": "none",
+  "singleQuote": false,
+  "printWidth": 100,
+  "tabWidth": 4,
+  "useTabs": true,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "vueIndentScriptAndStyle": true,
+  "quoteProps": "as-needed",
+  "bracketSameLine": false,
+  "jsxSingleQuote": false,
+  "proseWrap": "preserve",
+  "htmlWhitespaceSensitivity": "css"
+}

trigo-web/README.md

@@ -0,0 +1,227 @@
+# Trigo - 3D Go Board Game
+
+A modern web implementation of Go played on a three-dimensional board, built with Vue 3, TypeScript, Node.js, and Three.js.
+
+## Features
+
+- **3D Board**: Play Go on a 5x5x5 three-dimensional board
+- **Multiplayer**: Real-time online gameplay via WebSocket
+- **Single Player**: Play against AI opponents
+- **Game Replay**: Review and analyze completed games
+- **Modern Tech Stack**: Vue 3, TypeScript, Three.js for WebGL rendering
+
+## Project Structure
+
+```
+trigo-web/
+├── app/                # Frontend application (Vue 3)
+│   ├── src/
+│   │   ├── components/ # Vue components
+│   │   ├── views/      # Page views
+│   │   ├── game/       # Game logic and 3D rendering
+│   │   ├── store/      # Pinia state management
+│   │   └── services/   # API and WebSocket services
+│   └── package.json
+├── backend/            # Backend server (Node.js)
+│   ├── src/
+│   │   ├── controllers/
+│   │   ├── services/   # Game logic and room management
+│   │   ├── sockets/    # Socket.io handlers
+│   │   └── server.ts   # Main server entry
+│   └── package.json
+├── inc/                # Shared code between frontend and backend
+│   ├── trigo/          # Core game logic and types
+│   │   ├── types.ts    # TypeScript interfaces
+│   │   ├── gameUtils.ts # Game utility functions (capture, Ko, territory)
+│   │   ├── game.ts     # TrigoGame class - main game state management
+│   │   └── ab0yz.ts    # TGN coordinate encoding
+├── tests/              # Test files
+│   └── game/           # Game logic tests (TrigoGame)
+├── vitest.config.ts    # Vitest test configuration
+├── tsconfig.json       # TypeScript configuration
+└── package.json        # Root package.json with dev scripts
+```
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js (v18+ recommended)
+- npm or yarn
+
+### Installation
+
+1. Clone the repository:
+```bash
+git clone [repository-url]
+cd trigo-web
+```
+
+2. Install all dependencies:
+```bash
+npm run install:all
+```
+
+This will install dependencies for the root, frontend, and backend.
+
+### Development
+
+Run both frontend and backend in development mode:
+
+```bash
+npm run dev
+```
+
+Or run them separately:
+
+```bash
+# Frontend only (runs on http://localhost:5173)
+npm run dev:app
+
+# Backend only (runs on http://localhost:3000)
+npm run dev:backend
+```
+
+### Building for Production
+
+Build both frontend and backend:
+
+```bash
+npm run build
+```
+
+### Testing
+
+The project includes comprehensive unit tests for the game logic (TrigoGame class).
+
+**Run all tests once:**
+```bash
+npm run test:run
+```
+
+**Run tests in watch mode (auto-rerun on file changes):**
+```bash
+npm test
+```
+
+**Run tests with UI dashboard:**
+```bash
+npm run test:ui
+```
+
+**Run specific test file:**
+```bash
+npm exec vitest -- run tests/game/trigoGame.core.test.ts
+```
+
+**Test Coverage:**
+- **109/109 tests passing (100%)**
+- Core functionality (35 tests) - Drop, pass, surrender, reset
+- History management (21 tests) - Undo, redo, jump to step
+- Game rules (18 tests) - Capture, Ko rule, suicide, territory calculation
+- State management (32 tests) - Serialization, callbacks, session storage
+
+**Test Files Location:** `tests/game/`
+- `trigoGame.core.test.ts` - Basic game operations
+- `trigoGame.history.test.ts` - History and navigation
+- `trigoGame.rules.test.ts` - Go game rules implementation
+- `trigoGame.state.test.ts` - State persistence and callbacks
+
+### Code Formatting
+
+Format all code with Prettier:
+
+```bash
+npm run format
+```
+
+Check formatting without making changes:
+
+```bash
+npm run format:check
+```
+
+## Technology Stack
+
+### Frontend
+- **Vue 3** - Progressive JavaScript framework
+- **TypeScript** - Type-safe JavaScript
+- **Three.js** - 3D graphics library for WebGL
+- **Pinia** - State management
+- **Vue Router** - Client-side routing
+- **Socket.io Client** - WebSocket communication
+- **Vite** - Fast build tool
+- **SASS** - CSS preprocessor
+
+### Backend
+- **Node.js** - JavaScript runtime
+- **Express** - Web framework
+- **Socket.io** - Real-time bidirectional communication
+- **TypeScript** - Type-safe JavaScript
+- **UUID** - Unique ID generation
+
+## Game Rules
+
+Trigo extends the traditional Go game into three dimensions:
+
+1. The game is played on a 5x5x5 cubic board
+2. Players take turns placing stones (black and white)
+3. Stones are captured when completely surrounded in 3D space
+4. The goal is to control more territory than your opponent
+
+## API Endpoints
+
+### REST API
+- `GET /health` - Health check
+- `GET /api/rooms` - List active game rooms
+- `GET /api/rooms/:roomId` - Get specific room details
+
+### WebSocket Events
+
+#### Client → Server
+- `joinRoom` - Join or create a game room
+- `leaveRoom` - Leave current room
+- `makeMove` - Make a game move
+- `pass` - Pass turn
+- `resign` - Resign from game
+- `chatMessage` - Send chat message
+
+#### Server → Client
+- `roomJoined` - Successfully joined room
+- `gameUpdate` - Game state update
+- `playerJoined` - Another player joined
+- `playerLeft` - Player left room
+- `chatMessage` - Incoming chat message
+- `gameEnded` - Game finished
+
+## Development Guidelines
+
+### Code Style
+- Uses Prettier for consistent formatting
+- Tab indentation (following prototype style)
+- Double quotes for strings
+- No trailing commas
+- Semicolons always
+
+### Git Workflow
+1. Create feature branch from `main`
+2. Make changes and test locally
+3. Format code with `npm run format`
+4. Commit with descriptive messages
+5. Create pull request
+
+## Based On
+
+This project is a modern reimplementation of the original Trigo prototype found in `third_party/klstrigo/`, updating the technology stack while preserving the core game mechanics and 3D gameplay experience.
+
+## License
+
+MIT License - See LICENSE file for details
+
+## Contributing
+
+Contributions are welcome! Please read the contributing guidelines before submitting pull requests.
+
+## Support
+
+For issues, questions, or suggestions, please open an issue on GitHub.

trigo-web/app/.env

@@ -0,0 +1,3 @@
+VITE_SERVER_URL=http://localhost:3000
+VITE_HOST=0.0.0.0
+VITE_PORT=5173

trigo-web/app/.env.local.example

@@ -0,0 +1,11 @@
+# Local environment variables (not committed to git)
+# Override these values for your local development setup
+
+# Example: To expose the dev server to your network:
+# VITE_HOST=0.0.0.0
+
+# Example: To use a different port:
+# VITE_PORT=3001
+
+# Example: To connect to a different backend:
+# VITE_SERVER_URL=http://192.168.1.100:3000

trigo-web/app/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Environment files
+.env.local
+.env.*.local

trigo-web/app/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Trigo - 3D Go Game</title>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.ts"></script>
+	</body>
+</html>

trigo-web/app/package.json

@@ -0,0 +1,27 @@
+{
+	"name": "trigo-app",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"dev:host": "vite --host",
+		"build": "vue-tsc --noEmit && vite build",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"pinia": "^2.1.6",
+		"socket.io-client": "^4.5.2",
+		"three": "^0.156.1",
+		"vue": "^3.3.4",
+		"vue-router": "^4.2.4"
+	},
+	"devDependencies": {
+		"@types/three": "^0.156.0",
+		"@vitejs/plugin-vue": "^5.2.4",
+		"sass-embedded": "^1.93.2",
+		"typescript": "^5.2.2",
+		"vite": "^5.4.21",
+		"vue-tsc": "^2.2.12"
+	}
+}

trigo-web/app/src/App.vue

@@ -0,0 +1,27 @@
+<template>
+	<div id="app">
+		<router-view />
+	</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss">
+	* {
+		margin: 0;
+		padding: 0;
+		box-sizing: border-box;
+	}
+
+	html,
+	body {
+		height: 100%;
+		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+			sans-serif;
+	}
+
+	#app {
+		height: 100vh;
+		background: #f5f5f5;
+	}
+</style>

trigo-web/app/src/main.ts

@@ -0,0 +1,23 @@
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+
+import App from "./App.vue";
+import router from "./router";
+import { initializeParsers } from "@inc/trigo/parserInit";
+
+
+const app = createApp(App);
+const pinia = createPinia();
+
+app.use(pinia);
+app.use(router);
+
+// Initialize parsers before mounting (required for TGN functionality)
+initializeParsers().then(() => {
+	app.mount("#app");
+}).catch((error) => {
+	console.error("Failed to initialize parsers:", error);
+	// Still mount app even if parser initialization fails
+	// (parser will throw error when TGN features are used)
+	app.mount("#app");
+});

trigo-web/app/src/router/index.ts

@@ -0,0 +1,17 @@
+import { createRouter, createWebHistory } from "vue-router";
+import TrigoView from "@/views/TrigoView.vue";
+
+
+const router = createRouter({
+	history: createWebHistory(import.meta.env.BASE_URL),
+	routes: [
+		{
+			path: "/",
+			name: "home",
+			component: TrigoView
+		}
+	]
+});
+
+
+export default router;

trigo-web/app/src/services/trigoViewport.ts

@@ -0,0 +1,1679 @@
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+import type { BoardShape } from "../../../inc/trigo";
+
+// Color constants
+const COLORS = {
+	// Scene colors
+	SCENE_BACKGROUND: 0x505055,
+	SCENE_CLEAR: 0x505055,
+
+	// Chess frame colors (three-tiered system)
+	FRAME_CREST: 0xff4d4d,      // Red-tinted for edges/corners
+	FRAME_SURFACE: 0xe6b380,    // Orange/yellow-tinted for face edges
+	FRAME_INTERIOR: 0x999999,   // Gray for interior lines
+
+	// intersection point colors
+	POINT_DEFAULT: 0x4a90e2,
+	POINT_HOVERED: 0x00ff00,
+	POINT_HOVERED_DISABLED: 0xff0000,
+	POINT_AXIS_ALIGNED: 0xffaa00,
+	POINT_AIR_PATCH: 0x80e680,  // Semi-transparent green for liberties in inspect mode
+
+	// Stone colors
+	STONE_BLACK: 0x070707,
+	STONE_WHITE: 0xf0f0f0,
+
+	// Stone specular highlights
+	STONE_BLACK_SPECULAR: 0x445577,
+	STONE_WHITE_SPECULAR: 0xeeeedd,
+
+	// Lighting colors
+	AMBIENT_LIGHT: 0xffffff,
+	DIRECTIONAL_LIGHT: 0xffffff,
+	HEMISPHERE_LIGHT_SKY: 0xeefaff,
+	HEMISPHERE_LIGHT_GROUND: 0x20201a,
+} as const;
+
+// Opacity constants
+const OPACITY = {
+	// Chess frame opacities
+	FRAME_CREST: 0.64,
+	FRAME_SURFACE: 0.12,
+	FRAME_INTERIOR: 0.04,
+
+	// Grid and point opacities
+	POINT_DEFAULT: 0.1,
+	POINT_HOVERED: 0.8,
+	POINT_AXIS_ALIGNED: 0.8,
+	POINT_AIR_PATCH: 0.24,  // Semi-transparent for liberty visualization
+	PREVIEW_STONE: 0.5,
+	PREVIEW_JOINT_BLACK: 0.5,
+	PREVIEW_JOINT_WHITE: 0.6,
+	DIMMED: 0.3,
+	DOMAIN_BLACK: 0.3,
+	DOMAIN_WHITE: 0.3,
+} as const;
+
+// Shininess constants for stone materials
+const SHININESS = {
+	STONE_BLACK: 120,
+	STONE_WHITE: 30,
+} as const;
+
+
+// Geometric size constants
+const SIZES = {
+	// Stone and point sizes (relative to grid spacing)
+	STONE_RADIUS: 0.28,
+	INTERSECTION_POINT_RADIUS: 0.16,
+	JOINT_RADIUS: 0.12,
+	JOINT_LENGTH: 0.47,
+	DOMAIN_CUBE_SIZE: 0.6,
+
+	// Sphere detail (number of segments)
+	STONE_SEGMENTS: 32,
+	POINT_SEGMENTS: 8,
+	JOINT_SEGMENTS: 6,
+} as const;
+
+
+// Camera and scene constants
+const CAMERA = {
+	FOV: 70,
+	NEAR: 0.1,
+	FAR: 1000,
+	DISTANCE_MULTIPLIER: 1.1,
+	HEIGHT_RATIO: 0.8,
+} as const;
+
+
+// Lighting intensity constants
+const LIGHTING = {
+	AMBIENT_INTENSITY: 0.2,
+	DIRECTIONAL_MAIN_INTENSITY: 0.8,
+	DIRECTIONAL_FILL_INTENSITY: 0.3,
+	HEMISPHERE_INTENSITY: 0.8,
+} as const;
+
+
+// Fog constants
+const FOG = {
+	NEAR_FACTOR: 0.2,
+	FAR_FACTOR: 0.8,
+	MIN_NEAR: 0.1,
+} as const;
+
+
+// Last stone highlight constants
+const SHINING = {
+	FLICKER_SPEED: 0.0048,
+	EMISSIVE_COLOR: [0.03, 0.32, 0.6],
+	BASE_INTENSITY_WHITE: 0.2,
+	BASE_INTENSITY_BLACK: 0.06,
+	FLICKER_INTENSITY_WHITE: 0.6,
+	FLICKER_INTENSITY_BLACK: 0.1,
+} as const;
+
+
+export interface Stone {
+	position: { x: number; y: number; z: number };
+	color: "black" | "white";
+	mesh?: THREE.Mesh;
+}
+
+export interface ViewportCallbacks {
+	onStoneClick?: (x: number, y: number, z: number) => void;
+	onPositionHover?: (x: number | null, y: number | null, z: number | null) => void;
+	isPositionDroppable?: (x: number, y: number, z: number) => boolean;
+	onInspectGroup?: (groupSize: number, liberties: number) => void;
+}
+
+export class TrigoViewport {
+	private canvas: HTMLCanvasElement;
+	private scene: THREE.Scene;
+	private camera: THREE.PerspectiveCamera;
+	private renderer: THREE.WebGLRenderer;
+	private controls!: OrbitControls;
+	private raycaster: THREE.Raycaster;
+	private mouse: THREE.Vector2;
+
+	private boardShape: BoardShape;
+	private gridSpacing: number = 2;
+	private gridGroup: THREE.Group;
+	private stonesGroup: THREE.Group;
+	private jointsGroup: THREE.Group;
+	private intersectionPoints: THREE.Group;
+	private domainCubesGroup: THREE.Group;
+	private highlightedPoint: THREE.Mesh | null = null;
+	private highlightedAxisPoints: THREE.Mesh[] = [];
+	private previewStone: THREE.Mesh | null = null;
+	private lastPlacedStone: { x: number; y: number; z: number } | null = null;
+	private hoveredPosition: { x: number; y: number; z: number } | null = null;
+
+	private stones: Map<string, Stone> = new Map();
+	private joints: Map<string, { X?: THREE.Mesh; Y?: THREE.Mesh; Z?: THREE.Mesh }> = new Map();
+	private domainCubes: Map<string, THREE.Mesh> = new Map();
+	private callbacks: ViewportCallbacks;
+
+	private animationId: number | null = null;
+	private isDestroyed: boolean = false;
+	private currentPlayerColor: "black" | "white" = "black";
+	private isGameActive: boolean = false;
+	private lastCameraDistance: number = 0;
+
+	// Mouse drag detection
+	private isMouseDown: boolean = false;
+	private mouseDownPosition: { x: number; y: number } | null = null;
+	private hasDragged: boolean = false;
+	private dragThreshold: number = 5; // pixels
+
+	// Inspect mode for analyzing stone groups
+	private inspectMode: boolean = false;
+	private ctrlKeyDown: boolean = false;
+	private highlightedGroup: Set<string> | null = null;
+	private airPatch: Set<string> | null = null;  // Liberty positions for highlighted group
+	private lastMouseEvent: MouseEvent | null = null;
+
+	// Domain visibility for territory display
+	private blackDomainVisible: boolean = false;
+	private whiteDomainVisible: boolean = false;
+	private blackDomain: Set<string> | null = null;
+	private whiteDomain: Set<string> | null = null;
+
+	constructor(canvas: HTMLCanvasElement, boardShape: BoardShape = { x: 5, y: 5, z: 5 }, callbacks: ViewportCallbacks = {}) {
+		this.canvas = canvas;
+		this.boardShape = boardShape;
+		this.callbacks = callbacks;
+
+		// Initialize Three.js components
+		this.scene = new THREE.Scene();
+		this.camera = new THREE.PerspectiveCamera(
+			CAMERA.FOV,
+			canvas.clientWidth / canvas.clientHeight,
+			CAMERA.NEAR,
+			CAMERA.FAR
+		);
+		this.renderer = new THREE.WebGLRenderer({
+			canvas,
+			antialias: true,
+			alpha: true
+		});
+		this.raycaster = new THREE.Raycaster();
+		this.mouse = new THREE.Vector2();
+
+		// Groups for organizing scene objects
+		this.gridGroup = new THREE.Group();
+		this.stonesGroup = new THREE.Group();
+		this.jointsGroup = new THREE.Group();
+		this.intersectionPoints = new THREE.Group();
+		this.domainCubesGroup = new THREE.Group();
+
+		this.initialize();
+	}
+
+	private initialize(): void {
+		// Setup renderer - use getBoundingClientRect for accurate CSS size
+		const rect = this.canvas.getBoundingClientRect();
+		this.renderer.setSize(rect.width, rect.height, false);
+		this.renderer.setPixelRatio(window.devicePixelRatio);
+		this.renderer.setClearColor(COLORS.SCENE_CLEAR, 1);
+
+		// Setup camera - use max dimension for distance calculation
+		const maxDim = Math.max(this.boardShape.x, this.boardShape.y, this.boardShape.z);
+		const distance = maxDim * this.gridSpacing * CAMERA.DISTANCE_MULTIPLIER;
+		this.camera.position.set(distance, distance * CAMERA.HEIGHT_RATIO, distance);
+		this.camera.lookAt(0, 0, 0);
+
+		// Setup controls
+		this.controls = new OrbitControls(this.camera, this.canvas);
+		this.controls.enableDamping = true;
+		this.controls.dampingFactor = 0.05;
+		this.controls.minDistance = 5;
+		this.controls.maxDistance = 100;
+		this.controls.maxPolarAngle = Math.PI / 2 + Math.PI / 4;
+		this.controls.enablePan = false; // Disable camera panning with right mouse button
+
+		// Setup scene
+		this.scene.background = new THREE.Color(COLORS.SCENE_BACKGROUND);
+		this.setupFog();
+		this.setupLighting();
+		this.createGrid();
+		this.createIntersectionPoints();
+		this.createJoints();
+		this.createDomainCubes();
+		this.createPreviewStone();
+
+		// Add groups to scene
+		this.scene.add(this.gridGroup);
+		this.scene.add(this.stonesGroup);
+		this.scene.add(this.jointsGroup);
+		this.scene.add(this.intersectionPoints);
+		this.scene.add(this.domainCubesGroup);
+
+		// Event listeners
+		this.canvas.addEventListener("mousemove", this.onMouseMove.bind(this));
+		this.canvas.addEventListener("mousedown", this.onMouseDown.bind(this));
+		this.canvas.addEventListener("mouseup", this.onMouseUp.bind(this));
+		this.canvas.addEventListener("click", this.onClick.bind(this));
+		window.addEventListener("resize", this.onWindowResize.bind(this));
+		window.addEventListener("keydown", this.onKeyDown.bind(this));
+		window.addEventListener("keyup", this.onKeyUp.bind(this));
+
+		// Start animation loop
+		this.animate();
+	}
+
+	private createPreviewStone(): void {
+		const geometry = new THREE.SphereGeometry(SIZES.STONE_RADIUS * this.gridSpacing, SIZES.STONE_SEGMENTS, SIZES.STONE_SEGMENTS);
+		const material = new THREE.MeshPhongMaterial({
+			color: this.currentPlayerColor === "black" ? COLORS.STONE_BLACK : COLORS.STONE_WHITE,
+			transparent: true,
+			opacity: OPACITY.PREVIEW_STONE,
+			shininess: this.currentPlayerColor === "black" ? SHININESS.STONE_BLACK : SHININESS.STONE_WHITE
+		});
+		this.previewStone = new THREE.Mesh(geometry, material);
+		this.previewStone.visible = false; // Hidden by default
+		this.scene.add(this.previewStone);
+	}
+
+	private updatePreviewStoneColor(): void {
+		if (!this.previewStone) return;
+		const material = this.previewStone.material as THREE.MeshPhongMaterial;
+		material.color.set(this.currentPlayerColor === "black" ? COLORS.STONE_BLACK : COLORS.STONE_WHITE);
+		material.shininess = this.currentPlayerColor === "black" ? SHININESS.STONE_BLACK : SHININESS.STONE_WHITE;
+	}
+
+	private setupFog(): void {
+		// Use scene background color for fog
+		this.scene.fog = new THREE.Fog(COLORS.SCENE_BACKGROUND, 0, 1);
+
+		// Update fog parameters based on current camera position
+		this.updateFog(true);
+	}
+
+	private highlightAxisPoints(gridX: number, gridY: number, gridZ: number): void {
+		// Clear previous axis highlights
+		this.clearAxisHighlights();
+
+		// Highlight points along the same axes
+		this.intersectionPoints.children.forEach((child) => {
+			const point = child as THREE.Mesh;
+			const { gridX: px, gridY: py, gridZ: pz } = point.userData;
+
+			// Check if point is on the same X, Y, or Z axis
+			const alignedXAxis = px === gridX;
+			const alignedYAxis = py === gridY;
+			const alignedZAxis = pz === gridZ;
+			const aligned = Number(alignedXAxis) + Number(alignedYAxis) + Number(alignedZAxis);
+
+			// Highlight if on one axis
+			if (aligned == 2) {
+				const material = point.material as THREE.MeshBasicMaterial;
+				material.color.set(COLORS.POINT_AXIS_ALIGNED);
+				material.opacity = OPACITY.POINT_AXIS_ALIGNED;
+				this.highlightedAxisPoints.push(point);
+			}
+		});
+	}
+
+	private clearAxisHighlights(): void {
+		// Reset all previously highlighted axis points
+		this.highlightedAxisPoints.forEach((point) => {
+			const material = point.material as THREE.MeshBasicMaterial;
+			material.color.set(COLORS.POINT_DEFAULT);
+			material.opacity = OPACITY.POINT_DEFAULT;
+		});
+		this.highlightedAxisPoints = [];
+	}
+
+	private setupLighting(): void {
+		// Ambient light
+		const ambientLight = new THREE.AmbientLight(COLORS.AMBIENT_LIGHT, LIGHTING.AMBIENT_INTENSITY);
+		this.scene.add(ambientLight);
+
+		// Directional light (main)
+		const directionalLight1 = new THREE.DirectionalLight(COLORS.DIRECTIONAL_LIGHT, LIGHTING.DIRECTIONAL_MAIN_INTENSITY);
+		directionalLight1.position.set(10, 20, 10);
+		directionalLight1.castShadow = true;
+		this.scene.add(directionalLight1);
+
+		// Directional light (fill)
+		const directionalLight2 = new THREE.DirectionalLight(COLORS.DIRECTIONAL_LIGHT, LIGHTING.DIRECTIONAL_FILL_INTENSITY);
+		directionalLight2.position.set(-10, -10, -10);
+		this.scene.add(directionalLight2);
+
+		// Hemisphere light for softer ambient
+		const hemisphereLight = new THREE.HemisphereLight(COLORS.HEMISPHERE_LIGHT_SKY, COLORS.HEMISPHERE_LIGHT_GROUND, LIGHTING.HEMISPHERE_INTENSITY);
+		hemisphereLight.position.set(0, 20, 0);
+		this.scene.add(hemisphereLight);
+	}
+
+	private createGrid(): void {
+		const { x: sizeX, y: sizeY, z: sizeZ } = this.boardShape;
+		const spacing = this.gridSpacing;
+		const offsetX = ((sizeX - 1) * spacing) / 2;
+		const offsetY = ((sizeY - 1) * spacing) / 2;
+		const offsetZ = ((sizeZ - 1) * spacing) / 2;
+
+		// Chess frame materials - three-tiered system from prototype
+		// Crest: edges/corners (most visible)
+		const crestMaterial = new THREE.LineBasicMaterial({
+			color: COLORS.FRAME_CREST,
+			opacity: OPACITY.FRAME_CREST,
+			transparent: true
+		});
+
+		// Surface: edges on faces (medium visibility)
+		const surfaceMaterial = new THREE.LineBasicMaterial({
+			color: COLORS.FRAME_SURFACE,
+			opacity: OPACITY.FRAME_SURFACE,
+			transparent: true
+		});
+
+		// Interior: inner lines (least visible)
+		const interiorMaterial = new THREE.LineBasicMaterial({
+			color: COLORS.FRAME_INTERIOR,
+			opacity: OPACITY.FRAME_INTERIOR,
+			transparent: true
+		});
+
+		// Helper function to determine material based on border conditions
+		const getLineMaterial = (border1: boolean, border2: boolean): THREE.LineBasicMaterial => {
+			if (border1 && border2) return crestMaterial;    // Both borders -> crest
+			if (border1 || border2) return surfaceMaterial;  // One border -> surface
+			return interiorMaterial;                          // No borders -> interior
+		};
+
+		// X-axis lines (parallel to X)
+		for (let y = 0; y < sizeY; y++) {
+			for (let z = 0; z < sizeZ; z++) {
+				const border1 = (y === 0) || (y === sizeY - 1);
+				const border2 = (z === 0) || (z === sizeZ - 1);
+				const material = getLineMaterial(border1, border2);
+
+				const points = [];
+				for (let x = 0; x < sizeX; x++) {
+					points.push(
+						new THREE.Vector3(
+							x * spacing - offsetX,
+							y * spacing - offsetY,
+							z * spacing - offsetZ
+						)
+					);
+				}
+				const geometry = new THREE.BufferGeometry().setFromPoints(points);
+				const line = new THREE.Line(geometry, material);
+				this.gridGroup.add(line);
+			}
+		}
+
+		// Y-axis lines (parallel to Y)
+		for (let x = 0; x < sizeX; x++) {
+			for (let z = 0; z < sizeZ; z++) {
+				const border1 = (x === 0) || (x === sizeX - 1);
+				const border2 = (z === 0) || (z === sizeZ - 1);
+				const material = getLineMaterial(border1, border2);
+
+				const points = [];
+				for (let y = 0; y < sizeY; y++) {
+					points.push(
+						new THREE.Vector3(
+							x * spacing - offsetX,
+							y * spacing - offsetY,
+							z * spacing - offsetZ
+						)
+					);
+				}
+				const geometry = new THREE.BufferGeometry().setFromPoints(points);
+				const line = new THREE.Line(geometry, material);
+				this.gridGroup.add(line);
+			}
+		}
+
+		// Z-axis lines (parallel to Z)
+		if (sizeZ >= 3) {
+			for (let x = 0; x < sizeX; x++) {
+				for (let y = 0; y < sizeY; y++) {
+					const border1 = (x === 0) || (x === sizeX - 1);
+					const border2 = (y === 0) || (y === sizeY - 1);
+					const material = getLineMaterial(border1, border2);
+
+					const points = [];
+					for (let z = 0; z < sizeZ; z++) {
+						points.push(
+							new THREE.Vector3(
+								x * spacing - offsetX,
+								y * spacing - offsetY,
+								z * spacing - offsetZ
+							)
+						);
+					}
+					const geometry = new THREE.BufferGeometry().setFromPoints(points);
+					const line = new THREE.Line(geometry, material);
+					this.gridGroup.add(line);
+				}
+			}
+		}
+
+		// Add axes helper for orientation
+		const maxOffset = Math.max(offsetX, offsetY, offsetZ);
+
+		if (sizeZ >= 3) {
+			// Show all three axes for 3D boards
+			const axesHelper = new THREE.AxesHelper(maxOffset * 1.2);
+			this.gridGroup.add(axesHelper);
+		} else {
+			// Show only X and Y axes for 2D boards (hide Z axis)
+			const axisLength = maxOffset * 1.2;
+			const axesMaterial = [
+				new THREE.LineBasicMaterial({ color: 0xff0000 }), // X axis - red
+				new THREE.LineBasicMaterial({ color: 0x00ff00 })  // Y axis - green
+			];
+
+			// X axis
+			const xPoints = [
+				new THREE.Vector3(0, 0, 0),
+				new THREE.Vector3(axisLength, 0, 0)
+			];
+			const xGeometry = new THREE.BufferGeometry().setFromPoints(xPoints);
+			const xLine = new THREE.Line(xGeometry, axesMaterial[0]);
+			this.gridGroup.add(xLine);
+
+			// Y axis
+			const yPoints = [
+				new THREE.Vector3(0, 0, 0),
+				new THREE.Vector3(0, axisLength, 0)
+			];
+			const yGeometry = new THREE.BufferGeometry().setFromPoints(yPoints);
+			const yLine = new THREE.Line(yGeometry, axesMaterial[1]);
+			this.gridGroup.add(yLine);
+		}
+	}
+
+	private createIntersectionPoints(): void {
+		const { x: sizeX, y: sizeY, z: sizeZ } = this.boardShape;
+		const spacing = this.gridSpacing;
+		const offsetX = ((sizeX - 1) * spacing) / 2;
+		const offsetY = ((sizeY - 1) * spacing) / 2;
+		const offsetZ = ((sizeZ - 1) * spacing) / 2;
+
+		// Create small spheres at each grid intersection
+		const pointGeometry = new THREE.SphereGeometry(SIZES.INTERSECTION_POINT_RADIUS, SIZES.POINT_SEGMENTS, SIZES.POINT_SEGMENTS);
+
+		for (let x = 0; x < sizeX; x++) {
+			for (let y = 0; y < sizeY; y++) {
+				for (let z = 0; z < sizeZ; z++) {
+					// Create a unique material for each point so they can be styled independently
+					const pointMaterial = new THREE.MeshBasicMaterial({
+						color: COLORS.POINT_DEFAULT,
+						opacity: OPACITY.POINT_DEFAULT,
+						transparent: true
+					});
+					const point = new THREE.Mesh(pointGeometry, pointMaterial);
+					point.position.set(
+						x * spacing - offsetX,
+						y * spacing - offsetY,
+						z * spacing - offsetZ
+					);
+					point.userData = { gridX: x, gridY: y, gridZ: z };
+					this.intersectionPoints.add(point);
+				}
+			}
+		}
+	}
+
+
+	private createJoints(): void {
+		const { x: sizeX, y: sizeY, z: sizeZ } = this.boardShape;
+		const spacing = this.gridSpacing;
+		const offsetX = ((sizeX - 1) * spacing) / 2;
+		const offsetY = ((sizeY - 1) * spacing) / 2;
+		const offsetZ = ((sizeZ - 1) * spacing) / 2;
+
+		// Joint dimensions from prototype: scale (0.06, 0.47, 0.06)
+		const jointRadius = SIZES.JOINT_RADIUS;
+		const jointLength = SIZES.JOINT_LENGTH * spacing; // Scale by grid spacing
+
+		// Create joints for each grid position
+		for (let x = 0; x < sizeX; x++) {
+			for (let y = 0; y < sizeY; y++) {
+				for (let z = 0; z < sizeZ; z++) {
+					const key = this.getStoneKey(x, y, z);
+					const jointNodes: { X?: THREE.Mesh; Y?: THREE.Mesh; Z?: THREE.Mesh } = {};
+
+					// Create X-axis joint (between current and next X position)
+					if (x < sizeX - 1) {
+						const geometry = new THREE.CylinderGeometry(jointRadius, jointRadius, jointLength, SIZES.JOINT_SEGMENTS);
+						const material = new THREE.MeshPhongMaterial({
+							color: COLORS.STONE_BLACK,
+							shininess: SHININESS.STONE_BLACK,
+							specular: COLORS.STONE_BLACK_SPECULAR
+						});
+						const joint = new THREE.Mesh(geometry, material);
+
+						// Position at midpoint between stones, rotate to align with X-axis
+						joint.position.set(
+							(x + 0.5) * spacing - offsetX,
+							y * spacing - offsetY,
+							z * spacing - offsetZ
+						);
+						joint.rotation.set(0, 0, Math.PI / 2); // Rotate to X-axis
+
+						joint.visible = false; // Hidden by default
+						this.jointsGroup.add(joint);
+						jointNodes.X = joint;
+					}
+
+					// Create Y-axis joint (between current and next Y position)
+					if (y < sizeY - 1) {
+						const geometry = new THREE.CylinderGeometry(jointRadius, jointRadius, jointLength, SIZES.JOINT_SEGMENTS);
+						const material = new THREE.MeshPhongMaterial({
+							color: COLORS.STONE_BLACK,
+							shininess: SHININESS.STONE_BLACK,
+							specular: COLORS.STONE_BLACK_SPECULAR
+						});
+						const joint = new THREE.Mesh(geometry, material);
+
+						// Position at midpoint between stones (Y-axis is already aligned)
+						joint.position.set(
+							x * spacing - offsetX,
+							(y + 0.5) * spacing - offsetY,
+							z * spacing - offsetZ
+						);
+						// No rotation needed for Y-axis (cylinder default orientation)
+
+						joint.visible = false; // Hidden by default
+						this.jointsGroup.add(joint);
+						jointNodes.Y = joint;
+					}
+
+					// Create Z-axis joint (between current and next Z position)
+					if (z < sizeZ - 1) {
+						const geometry = new THREE.CylinderGeometry(jointRadius, jointRadius, jointLength, SIZES.JOINT_SEGMENTS);
+						const material = new THREE.MeshPhongMaterial({
+							color: COLORS.STONE_BLACK,
+							shininess: SHININESS.STONE_BLACK,
+							specular: COLORS.STONE_BLACK_SPECULAR
+						});
+						const joint = new THREE.Mesh(geometry, material);
+
+						// Position at midpoint between stones, rotate to align with Z-axis
+						joint.position.set(
+							x * spacing - offsetX,
+							y * spacing - offsetY,
+							(z + 0.5) * spacing - offsetZ
+						);
+						joint.rotation.set(Math.PI / 2, 0, 0); // Rotate to Z-axis
+
+						joint.visible = false; // Hidden by default
+						this.jointsGroup.add(joint);
+						jointNodes.Z = joint;
+					}
+
+					this.joints.set(key, jointNodes);
+				}
+			}
+		}
+	}
+
+
+	private createDomainCubes(): void {
+		const { x: sizeX, y: sizeY, z: sizeZ } = this.boardShape;
+		const spacing = this.gridSpacing;
+		const offsetX = ((sizeX - 1) * spacing) / 2;
+		const offsetY = ((sizeY - 1) * spacing) / 2;
+		const offsetZ = ((sizeZ - 1) * spacing) / 2;
+
+		// Domain cube size from prototype: scale 0.6
+		const cubeSize = SIZES.DOMAIN_CUBE_SIZE * spacing;
+
+		// Create domain cubes for each grid position
+		for (let x = 0; x < sizeX; x++) {
+			for (let y = 0; y < sizeY; y++) {
+				for (let z = 0; z < sizeZ; z++) {
+					const key = this.getStoneKey(x, y, z);
+
+					// Create cube geometry
+					const geometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
+
+					// Create material (will be updated dynamically based on domain type)
+					const material = new THREE.MeshBasicMaterial({
+						color: COLORS.STONE_BLACK,
+						transparent: true,
+						opacity: OPACITY.DOMAIN_BLACK,
+						depthWrite: false  // Prevent z-fighting with stones
+					});
+
+					const cube = new THREE.Mesh(geometry, material);
+
+					// Position at grid intersection
+					cube.position.set(
+						x * spacing - offsetX,
+						y * spacing - offsetY,
+						z * spacing - offsetZ
+					);
+
+					cube.visible = false; // Hidden by default
+					this.domainCubesGroup.add(cube);
+					this.domainCubes.set(key, cube);
+				}
+			}
+		}
+	}
+
+	private getStoneKey(x: number, y: number, z: number): string {
+		return `${x},${y},${z}`;
+	}
+
+	public addStone(x: number, y: number, z: number, color: "black" | "white"): void {
+		const key = this.getStoneKey(x, y, z);
+		if (this.stones.has(key)) {
+			console.warn(`Stone already exists at (${x}, ${y}, ${z})`);
+			return;
+		}
+
+		// Hide preview stone immediately when adding a new stone
+		this.hidePreviewStone();
+
+		const spacing = this.gridSpacing;
+		const offsetX = ((this.boardShape.x - 1) * spacing) / 2;
+		const offsetY = ((this.boardShape.y - 1) * spacing) / 2;
+		const offsetZ = ((this.boardShape.z - 1) * spacing) / 2;
+
+		// Create stone geometry
+		const geometry = new THREE.SphereGeometry(SIZES.STONE_RADIUS * this.gridSpacing, SIZES.STONE_SEGMENTS, SIZES.STONE_SEGMENTS);
+		const material = new THREE.MeshPhongMaterial({
+			color: color === "black" ? COLORS.STONE_BLACK : COLORS.STONE_WHITE,
+			shininess: color === "black" ? SHININESS.STONE_BLACK : SHININESS.STONE_WHITE,
+			specular: color === "black" ? COLORS.STONE_BLACK_SPECULAR : COLORS.STONE_WHITE_SPECULAR,
+			emissive: 0x000000, // Will be animated for last placed stone
+			emissiveIntensity: 0
+		});
+
+		const stoneMesh = new THREE.Mesh(geometry, material);
+		stoneMesh.position.set(
+			x * spacing - offsetX,
+			y * spacing - offsetY,
+			z * spacing - offsetZ
+		);
+
+		const stone: Stone = {
+			position: { x, y, z },
+			color,
+			mesh: stoneMesh
+		};
+
+		this.stones.set(key, stone);
+		this.stonesGroup.add(stoneMesh);
+
+		// Clear emissive from previous last placed stone
+		if (this.lastPlacedStone) {
+			const prevKey = this.getStoneKey(
+				this.lastPlacedStone.x,
+				this.lastPlacedStone.y,
+				this.lastPlacedStone.z
+			);
+			const prevStone = this.stones.get(prevKey);
+			if (prevStone && prevStone.mesh) {
+				const prevMaterial = prevStone.mesh.material as THREE.MeshPhongMaterial;
+				prevMaterial.emissive.set(0x000000);
+				prevMaterial.emissiveIntensity = 0;
+			}
+		}
+
+		// Track this as the last placed stone
+		this.lastPlacedStone = { x, y, z };
+
+		// Update joints to show connections
+		this.refreshJoints();
+	}
+
+	public removeStone(x: number, y: number, z: number): void {
+		const key = this.getStoneKey(x, y, z);
+		const stone = this.stones.get(key);
+
+		if (stone && stone.mesh) {
+			this.stonesGroup.remove(stone.mesh);
+			stone.mesh.geometry.dispose();
+			if (stone.mesh.material instanceof THREE.Material) {
+				stone.mesh.material.dispose();
+			}
+			this.stones.delete(key);
+
+			// Update joints after removing stone
+			this.refreshJoints();
+		}
+	}
+
+	public clearBoard(): void {
+		// Remove all stones
+		this.stones.forEach((stone) => {
+			if (stone.mesh) {
+				this.stonesGroup.remove(stone.mesh);
+				stone.mesh.geometry.dispose();
+				if (stone.mesh.material instanceof THREE.Material) {
+					stone.mesh.material.dispose();
+				}
+			}
+		});
+		this.stones.clear();
+		this.lastPlacedStone = null;
+
+		// Hide all joints
+		this.refreshJoints();
+	}
+
+	public hasStone(x: number, y: number, z: number): boolean {
+		return this.stones.has(this.getStoneKey(x, y, z));
+	}
+
+
+	private refreshJoints(): void {
+		const { x: sizeX, y: sizeY, z: sizeZ } = this.boardShape;
+
+		for (let x = 0; x < sizeX; x++) {
+			for (let y = 0; y < sizeY; y++) {
+				for (let z = 0; z < sizeZ; z++) {
+					const key = this.getStoneKey(x, y, z);
+					const jointNodes = this.joints.get(key);
+
+					if (!jointNodes) continue;
+
+					const centerStone = this.stones.get(key);
+
+					// X-axis joint: check if current and (x+1) have same color
+					if (jointNodes.X) {
+						if (centerStone && x + 1 < sizeX) {
+							const nextKey = this.getStoneKey(x + 1, y, z);
+							const nextStone = this.stones.get(nextKey);
+
+							if (nextStone && nextStone.color === centerStone.color) {
+								const material = jointNodes.X.material as THREE.MeshPhongMaterial;
+								material.color.set(centerStone.color === "black" ? COLORS.STONE_BLACK : COLORS.STONE_WHITE);
+								material.shininess = centerStone.color === "black" ? SHININESS.STONE_BLACK : SHININESS.STONE_WHITE;
+								material.specular.set(centerStone.color === "black" ? COLORS.STONE_BLACK_SPECULAR : COLORS.STONE_WHITE_SPECULAR);
+								material.opacity = 1.0;
+								material.transparent = false;
+								jointNodes.X.visible = true;
+							} else {
+								jointNodes.X.visible = false;
+							}
+						} else {
+							jointNodes.X.visible = false;
+						}
+					}
+
+					// Y-axis joint: check if current and (y+1) have same color
+					if (jointNodes.Y) {
+						if (centerStone && y + 1 < sizeY) {
+							const nextKey = this.getStoneKey(x, y + 1, z);
+							const nextStone = this.stones.get(nextKey);
+
+							if (nextStone && nextStone.color === centerStone.color) {
+								const material = jointNodes.Y.material as THREE.MeshPhongMaterial;
+								material.color.set(centerStone.color === "black" ? COLORS.STONE_BLACK : COLORS.STONE_WHITE);
+								material.shininess = centerStone.color === "black" ? SHININESS.STONE_BLACK : SHININESS.STONE_WHITE;
+								material.specular.set(centerStone.color === "black" ? COLORS.STONE_BLACK_SPECULAR : COLORS.STONE_WHITE_SPECULAR);
+								material.opacity = 1.0;
+								material.transparent = false;
+								jointNodes.Y.visible = true;
+							} else {
+								jointNodes.Y.visible = false;
+							}
+						} else {
+							jointNodes.Y.visible = false;
+						}
+					}
+
+					// Z-axis joint: check if current and (z+1) have same color
+					if (jointNodes.Z) {
+						if (centerStone && z + 1 < sizeZ) {
+							const nextKey = this.getStoneKey(x, y, z + 1);
+							const nextStone = this.stones.get(nextKey);
+
+							if (nextStone && nextStone.color === centerStone.color) {
+								const material = jointNodes.Z.material as THREE.MeshPhongMaterial;
+								material.color.set(centerStone.color === "black" ? COLORS.STONE_BLACK : COLORS.STONE_WHITE);
+								material.shininess = centerStone.color === "black" ? SHININESS.STONE_BLACK : SHININESS.STONE_WHITE;
+								material.specular.set(centerStone.color === "black" ? COLORS.STONE_BLACK_SPECULAR : COLORS.STONE_WHITE_SPECULAR);
+								material.opacity = 1.0;
+								material.transparent = false;
+								jointNodes.Z.visible = true;
+							} else {
+								jointNodes.Z.visible = false;
+							}
+						} else {
+							jointNodes.Z.visible = false;
+						}
+					}
+
+					// Show preview joints if hovering over this position
+					const isHovered = this.hoveredPosition &&
+						this.hoveredPosition.x === x &&
+						this.hoveredPosition.y === y &&
+						this.hoveredPosition.z === z;
+
+					if (isHovered && this.isGameActive && !centerStone) {
+						// Preview joints connecting to adjacent stones of current player's color
+						const previewColor = this.currentPlayerColor;
+						const previewOpacity = previewColor === "black" ? OPACITY.PREVIEW_JOINT_BLACK : OPACITY.PREVIEW_JOINT_WHITE;
+
+						// Check -X direction (left neighbor)
+						if (x > 0) {
+							const leftKey = this.getStoneKey(x - 1, y, z);
+							const leftStone = this.stones.get(leftKey);
+							if (leftStone && leftStone.color === previewColor) {
+								const leftJointNodes = this.joints.get(leftKey);
+								if (leftJointNodes?.X) {
+									const material = leftJointNodes.X.material as THREE.MeshPhongMaterial;
+									material.color.set(previewColor === "black" ? COLORS.STONE_BLACK : COLORS.STONE_WHITE);
+									material.shininess = previewColor === "black" ? SHININESS.STONE_BLACK : SHININESS.STONE_WHITE;
+									material.specular.set(previewColor === "black" ? COLORS.STONE_BLACK_SPECULAR : COLORS.STONE_WHITE_SPECULAR);
+									material.opacity = previewOpacity;
+									material.transparent = true;
+									leftJointNodes.X.visible = true;
+								}
+							}
+						}
+
+						// Check -Y direction (bottom neighbor)
+						if (y > 0) {
+							const bottomKey = this.getStoneKey(x, y - 1, z);
+							const bottomStone = this.stones.get(bottomKey);
+							if (bottomStone && bottomStone.color === previewColor) {
+								const bottomJointNodes = this.joints.get(bottomKey);
+								if (bottomJointNodes?.Y) {
+									const material = bottomJointNodes.Y.material as THREE.MeshPhongMaterial;
+									material.color.set(previewColor === "black" ? COLORS.STONE_BLACK : COLORS.STONE_WHITE);
+									material.shininess = previewColor === "black" ? SHININESS.STONE_BLACK : SHININESS.STONE_WHITE;
+									material.specular.set(previewColor === "black" ? COLORS.STONE_BLACK_SPECULAR : COLORS.STONE_WHITE_SPECULAR);
+									material.opacity = previewOpacity;
+									material.transparent = true;
+									bottomJointNodes.Y.visible = true;
+								}
+							}
+						}
+
+						// Check -Z direction (back neighbor)
+						if (z > 0) {
+							const backKey = this.getStoneKey(x, y, z - 1);
+							const backStone = this.stones.get(backKey);
+							if (backStone && backStone.color === previewColor) {
+								const backJointNodes = this.joints.get(backKey);
+								if (backJointNodes?.Z) {
+									const material = backJointNodes.Z.material as THREE.MeshPhongMaterial;
+									material.color.set(previewColor === "black" ? COLORS.STONE_BLACK : COLORS.STONE_WHITE);
+									material.shininess = previewColor === "black" ? SHININESS.STONE_BLACK : SHININESS.STONE_WHITE;
+									material.specular.set(previewColor === "black" ? COLORS.STONE_BLACK_SPECULAR : COLORS.STONE_WHITE_SPECULAR);
+									material.opacity = previewOpacity;
+									material.transparent = true;
+									backJointNodes.Z.visible = true;
+								}
+							}
+						}
+
+						// Check +X direction (right neighbor)
+						if (x + 1 < sizeX && jointNodes.X) {
+							const rightKey = this.getStoneKey(x + 1, y, z);
+							const rightStone = this.stones.get(rightKey);
+							if (rightStone && rightStone.color === previewColor) {
+								const material = jointNodes.X.material as THREE.MeshPhongMaterial;
+								material.color.set(previewColor === "black" ? COLORS.STONE_BLACK : COLORS.STONE_WHITE);
+								material.shininess = previewColor === "black" ? SHININESS.STONE_BLACK : SHININESS.STONE_WHITE;
+								material.specular.set(previewColor === "black" ? COLORS.STONE_BLACK_SPECULAR : COLORS.STONE_WHITE_SPECULAR);
+								material.opacity = previewOpacity;
+								material.transparent = true;
+								jointNodes.X.visible = true;
+							}
+						}
+
+						// Check +Y direction (top neighbor)
+						if (y + 1 < sizeY && jointNodes.Y) {
+							const topKey = this.getStoneKey(x, y + 1, z);
+							const topStone = this.stones.get(topKey);
+							if (topStone && topStone.color === previewColor) {
+								const material = jointNodes.Y.material as THREE.MeshPhongMaterial;
+								material.color.set(previewColor === "black" ? COLORS.STONE_BLACK : COLORS.STONE_WHITE);
+								material.shininess = previewColor === "black" ? SHININESS.STONE_BLACK : SHININESS.STONE_WHITE;
+								material.specular.set(previewColor === "black" ? COLORS.STONE_BLACK_SPECULAR : COLORS.STONE_WHITE_SPECULAR);
+								material.opacity = previewOpacity;
+								material.transparent = true;
+								jointNodes.Y.visible = true;
+							}
+						}
+
+						// Check +Z direction (front neighbor)
+						if (z + 1 < sizeZ && jointNodes.Z) {
+							const frontKey = this.getStoneKey(x, y, z + 1);
+							const frontStone = this.stones.get(frontKey);
+							if (frontStone && frontStone.color === previewColor) {
+								const material = jointNodes.Z.material as THREE.MeshPhongMaterial;
+								material.color.set(previewColor === "black" ? COLORS.STONE_BLACK : COLORS.STONE_WHITE);
+								material.shininess = previewColor === "black" ? SHININESS.STONE_BLACK : SHININESS.STONE_WHITE;
+								material.specular.set(previewColor === "black" ? COLORS.STONE_BLACK_SPECULAR : COLORS.STONE_WHITE_SPECULAR);
+								material.opacity = previewOpacity;
+								material.transparent = true;
+								jointNodes.Z.visible = true;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+
+	public setCurrentPlayer(color: "black" | "white"): void {
+		this.currentPlayerColor = color;
+		this.updatePreviewStoneColor();
+	}
+
+	public setGameActive(active: boolean): void {
+		this.isGameActive = active;
+	}
+
+
+	public hidePreviewStone(): void {
+		if (this.previewStone) {
+			this.previewStone.visible = false;
+		}
+		this.hoveredPosition = null;
+		this.refreshJoints();
+	}
+
+
+	public setLastPlacedStone(x: number | null, y: number | null, z: number | null): void {
+		// Clear previous stone's emissive glow
+		if (this.lastPlacedStone) {
+			const prevKey = this.getStoneKey(this.lastPlacedStone.x, this.lastPlacedStone.y, this.lastPlacedStone.z);
+			const prevStone = this.stones.get(prevKey);
+			if (prevStone && prevStone.mesh) {
+				const prevMaterial = prevStone.mesh.material as THREE.MeshPhongMaterial;
+				prevMaterial.emissive.set(0x000000);
+				prevMaterial.emissiveIntensity = 0;
+			}
+		}
+
+		// Set new last placed stone
+		if (x !== null && y !== null && z !== null) {
+			this.lastPlacedStone = { x, y, z };
+		} else {
+			this.lastPlacedStone = null;
+		}
+	}
+
+
+	// Domain visibility methods (for territory display)
+	public setBlackDomainVisible(visible: boolean): void {
+		if (this.blackDomainVisible !== visible) {
+			this.blackDomainVisible = visible;
+			this.refreshDomainVisualization();
+		}
+	}
+
+	public setWhiteDomainVisible(visible: boolean): void {
+		if (this.whiteDomainVisible !== visible) {
+			this.whiteDomainVisible = visible;
+			this.refreshDomainVisualization();
+		}
+	}
+
+	public setDomainData(blackDomain: Set<string> | null, whiteDomain: Set<string> | null): void {
+		this.blackDomain = blackDomain;
+		this.whiteDomain = whiteDomain;
+		this.refreshDomainVisualization();
+	}
+
+	private refreshDomainVisualization(): void {
+		// In inspect mode, air patch takes priority over domain visualization
+		if (this.inspectMode && this.airPatch) {
+			this.updateDomainCubesVisualization(null, null);
+		} else {
+			// Normal mode: show domains based on visibility flags
+			const black = this.blackDomainVisible ? this.blackDomain : null;
+			const white = this.whiteDomainVisible ? this.whiteDomain : null;
+			this.updateDomainCubesVisualization(black, white);
+		}
+	}
+
+	public showDomainCubes(blackDomain: Set<string> | null, whiteDomain: Set<string> | null): void {
+		this.setDomainData(blackDomain, whiteDomain);
+		this.setBlackDomainVisible(true);
+		this.setWhiteDomainVisible(true);
+	}
+
+	public hideDomainCubes(): void {
+		this.setBlackDomainVisible(false);
+		this.setWhiteDomainVisible(false);
+	}
+
+
+	public setBoardShape(shape: BoardShape): void {
+		if (shape.x === this.boardShape.x && shape.y === this.boardShape.y && shape.z === this.boardShape.z) return;
+
+		this.boardShape = shape;
+
+		// Clear existing grid, points, and joints
+		this.gridGroup.clear();
+		this.intersectionPoints.clear();
+		this.jointsGroup.clear();
+		this.joints.clear();
+		this.domainCubesGroup.clear();
+		this.domainCubes.clear();
+		this.clearBoard();
+
+		// Recreate grid, points, and joints
+		this.createGrid();
+		this.createIntersectionPoints();
+		this.createJoints();
+		this.createDomainCubes();
+
+		// Update fog for new board size
+		this.setupFog();
+
+		// Adjust camera position
+		const maxDim = Math.max(shape.x, shape.y, shape.z);
+		const distance = maxDim * this.gridSpacing * CAMERA.DISTANCE_MULTIPLIER;
+		this.camera.position.set(distance, distance * CAMERA.HEIGHT_RATIO, distance);
+		this.camera.lookAt(0, 0, 0);
+	}
+
+	private onMouseDown(event: MouseEvent): void {
+		// Handle middle button (button 1) for inspect mode
+		if (event.button === 1) {
+			event.preventDefault();
+			this.inspectMode = true;
+			this.updateHighlightedGroup(event);
+			this.updateStoneOpacity();
+			return;
+		}
+
+		// Handle left button (button 0)
+		if (event.button === 0) {
+			this.isMouseDown = true;
+			this.mouseDownPosition = { x: event.clientX, y: event.clientY };
+			this.hasDragged = false;
+
+			// Exit inspect mode on left click
+			if (this.inspectMode && !this.ctrlKeyDown) {
+				this.inspectMode = false;
+				this.highlightedGroup = null;
+				this.airPatch = null;
+				this.updateStoneOpacity();
+				// Clear tooltip by calling callback with 0, 0
+				if (this.callbacks.onInspectGroup) {
+					this.callbacks.onInspectGroup(0, 0);
+				}
+			}
+		}
+	}
+
+	private onMouseUp(event: MouseEvent): void {
+		// Handle middle button release
+		if (event.button === 1) {
+			event.preventDefault();
+			if (this.inspectMode && !this.ctrlKeyDown) {
+				this.inspectMode = false;
+				this.highlightedGroup = null;
+				this.airPatch = null;
+				this.updateStoneOpacity();
+				// Clear tooltip by calling callback with 0, 0
+				if (this.callbacks.onInspectGroup) {
+					this.callbacks.onInspectGroup(0, 0);
+				}
+			}
+			return;
+		}
+
+		// Handle left button release
+		if (event.button === 0) {
+			this.isMouseDown = false;
+			this.mouseDownPosition = null;
+			// Note: hasDragged will be reset on next mousedown
+		}
+	}
+
+	private onMouseMove(event: MouseEvent): void {
+		// Store last mouse event for Ctrl key inspection
+		this.lastMouseEvent = event;
+
+		// If Ctrl is held and inspect mode is active, update highlighted group
+		if (this.ctrlKeyDown && this.inspectMode) {
+			this.updateHighlightedGroup(event);
+			this.updateStoneOpacity();
+		}
+
+		// Check if mouse is not hovering over canvas and cleanup
+		if (!this.canvas.matches(':hover')) {
+			// Hide preview stone when mouse is outside canvas
+			if (this.previewStone) {
+				this.previewStone.visible = false;
+			}
+			this.hoveredPosition = null;
+			this.refreshJoints();
+			// Clear highlights when mouse is outside
+			if (this.highlightedPoint) {
+				const material = this.highlightedPoint.material as THREE.MeshBasicMaterial;
+				material.color.set(COLORS.POINT_DEFAULT);
+				material.opacity = OPACITY.POINT_DEFAULT;
+				this.highlightedPoint = null;
+			}
+			this.clearAxisHighlights();
+			return;
+		}
+
+		// Check if we're dragging
+		if (this.isMouseDown && this.mouseDownPosition) {
+			const dx = event.clientX - this.mouseDownPosition.x;
+			const dy = event.clientY - this.mouseDownPosition.y;
+			const distance = Math.sqrt(dx * dx + dy * dy);
+
+			if (distance > this.dragThreshold) {
+				this.hasDragged = true;
+			}
+		}
+
+		// Hide preview stone if dragging
+		if (this.isMouseDown || this.hasDragged) {
+			if (this.previewStone) {
+				this.previewStone.visible = false;
+			}
+			this.hoveredPosition = null;
+			this.refreshJoints();
+			// Clear highlights when dragging
+			if (this.highlightedPoint) {
+				const material = this.highlightedPoint.material as THREE.MeshBasicMaterial;
+				material.color.set(COLORS.POINT_DEFAULT);
+				material.opacity = OPACITY.POINT_DEFAULT;
+				this.highlightedPoint = null;
+			}
+			this.clearAxisHighlights();
+			return; // Don't process hover logic when dragging
+		}
+
+		const rect = this.canvas.getBoundingClientRect();
+		this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+		this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+
+		// Raycast to find intersection points
+		this.raycaster.setFromCamera(this.mouse, this.camera);
+		const intersects = this.raycaster.intersectObjects(this.intersectionPoints.children);
+
+		// Remove previous highlight
+		if (this.highlightedPoint) {
+			(this.highlightedPoint.material as THREE.MeshBasicMaterial).color.set(COLORS.POINT_DEFAULT);
+			(this.highlightedPoint.material as THREE.MeshBasicMaterial).opacity = OPACITY.POINT_DEFAULT;
+			this.highlightedPoint = null;
+		}
+
+		// Clear previous axis highlights
+		this.clearAxisHighlights();
+
+		if (intersects.length > 0) {
+			const intersect = intersects[0];
+			const point = intersect.object as THREE.Mesh;
+			const { gridX, gridY, gridZ } = point.userData;
+
+			// Check if there's already a stone at this position
+			if (!this.hasStone(gridX, gridY, gridZ)) {
+				// Check if position is droppable using game logic validation
+				const isDroppable =
+					this.isGameActive &&
+					(!this.callbacks.isPositionDroppable ||
+						this.callbacks.isPositionDroppable(gridX, gridY, gridZ));
+
+				this.highlightedPoint = point;
+				// Use green for valid/droppable, red for invalid (game inactive or violates rules)
+				const hoverColor = isDroppable ? COLORS.POINT_HOVERED : COLORS.POINT_HOVERED_DISABLED;
+				(point.material as THREE.MeshBasicMaterial).color.set(hoverColor);
+				(point.material as THREE.MeshBasicMaterial).opacity = OPACITY.POINT_HOVERED;
+
+				// Highlight axis-aligned points
+				this.highlightAxisPoints(gridX, gridY, gridZ);
+
+				// Show preview stone only at droppable positions
+				if (this.previewStone && isDroppable) {
+					const spacing = this.gridSpacing;
+					const offsetX = ((this.boardShape.x - 1) * spacing) / 2;
+					const offsetY = ((this.boardShape.y - 1) * spacing) / 2;
+					const offsetZ = ((this.boardShape.z - 1) * spacing) / 2;
+
+					this.previewStone.position.set(
+						gridX * spacing - offsetX,
+						gridY * spacing - offsetY,
+						gridZ * spacing - offsetZ
+					);
+					this.previewStone.visible = true;
+
+					// Update hovered position and refresh joints for preview
+					this.hoveredPosition = { x: gridX, y: gridY, z: gridZ };
+					this.refreshJoints();
+				} else if (this.previewStone) {
+					// Hide preview stone if position is not droppable
+					this.previewStone.visible = false;
+					this.hoveredPosition = null;
+					this.refreshJoints();
+				}
+
+				if (this.callbacks.onPositionHover) {
+					this.callbacks.onPositionHover(gridX, gridY, gridZ);
+				}
+			} else {
+				// Hide preview stone if position is occupied
+				if (this.previewStone) {
+					this.previewStone.visible = false;
+				}
+				this.hoveredPosition = null;
+				this.refreshJoints();
+				if (this.callbacks.onPositionHover) {
+					this.callbacks.onPositionHover(null, null, null);
+				}
+			}
+		} else {
+			// Hide preview stone when not hovering over grid
+			if (this.previewStone) {
+				this.previewStone.visible = false;
+			}
+			this.hoveredPosition = null;
+			this.refreshJoints();
+			if (this.callbacks.onPositionHover) {
+				this.callbacks.onPositionHover(null, null, null);
+			}
+		}
+
+		// Only show pointer cursor when game is active and hovering over valid position
+		const canPlaceStone = intersects.length > 0 && this.isGameActive;
+		this.canvas.style.cursor = canPlaceStone ? "pointer" : "default";
+	}
+
+	private onClick(event: MouseEvent): void {
+		// Don't place stone if we've been dragging
+		if (this.hasDragged) {
+			this.hasDragged = false; // Reset for next interaction
+			return;
+		}
+
+		const rect = this.canvas.getBoundingClientRect();
+		this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+		this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+
+		this.raycaster.setFromCamera(this.mouse, this.camera);
+		const intersects = this.raycaster.intersectObjects(this.intersectionPoints.children);
+
+		if (intersects.length > 0) {
+			const intersect = intersects[0];
+			const point = intersect.object as THREE.Mesh;
+			const { gridX, gridY, gridZ } = point.userData;
+
+			if (!this.hasStone(gridX, gridY, gridZ)) {
+				if (this.callbacks.onStoneClick) {
+					this.callbacks.onStoneClick(gridX, gridY, gridZ);
+				}
+			}
+		}
+	}
+
+	private onWindowResize(): void {
+		if (this.isDestroyed) return;
+
+		// Use getBoundingClientRect to get actual CSS size
+		const rect = this.canvas.getBoundingClientRect();
+		const width = rect.width;
+		const height = rect.height;
+
+		this.camera.aspect = width / height;
+		this.camera.updateProjectionMatrix();
+		// Use false as third parameter to prevent updating canvas style
+		this.renderer.setSize(width, height, false);
+	}
+
+	private animate(): void {
+		if (this.isDestroyed) return;
+
+		this.animationId = requestAnimationFrame(() => this.animate());
+
+		// Update fog based on camera distance
+		this.updateFog();
+
+		// Update last placed stone highlight effect only when mouse is over canvas
+		// Using :hover pseudo-class check for better accuracy
+		if (this.canvas.matches && this.canvas.matches(':hover')) {
+			this.updateLastStoneHighlight();
+		}
+
+		this.controls.update();
+		this.renderer.render(this.scene, this.camera);
+	}
+
+	private updateFog(forceUpdate: boolean = false): void {
+		if (!this.scene.fog) return;
+
+		// Get current camera distance from origin
+		const cameraDistance = this.camera.position.length();
+
+		// Only update if camera distance changed (unless forced)
+		if (!forceUpdate && Math.abs(cameraDistance - this.lastCameraDistance) < 0.01) return;
+
+		this.lastCameraDistance = cameraDistance;
+
+		// Calculate diagonal distance of the board
+		const diagonal = Math.sqrt(this.boardShape.x ** 2 + this.boardShape.y ** 2 + this.boardShape.z ** 2);
+		const boardDiagonal = diagonal * this.gridSpacing;
+
+		// Update fog near and far based on camera distance +/- diagonal
+		const fog = this.scene.fog as THREE.Fog;
+		fog.near = Math.max(FOG.MIN_NEAR, cameraDistance - boardDiagonal * FOG.NEAR_FACTOR);
+		fog.far = cameraDistance + boardDiagonal * FOG.FAR_FACTOR;
+	}
+
+	private updateLastStoneHighlight(): void {
+		if (!this.lastPlacedStone) return;
+
+		// Flicker function similar to prototype: sine wave animation
+		const time = Date.now();
+		const flicker = Math.sin(time * SHINING.FLICKER_SPEED) / 2 + 0.5;
+
+		// Get the last placed stone
+		const key = this.getStoneKey(
+			this.lastPlacedStone.x,
+			this.lastPlacedStone.y,
+			this.lastPlacedStone.z
+		);
+		const stone = this.stones.get(key);
+
+		if (stone && stone.mesh) {
+			const material = stone.mesh.material as THREE.MeshPhongMaterial;
+
+			// Cyan/blue glow color (matching prototype)
+			const emissiveColor = new THREE.Color(...SHINING.EMISSIVE_COLOR);
+
+			// Scale intensity based on stone color (white stones get brighter glow)
+			const baseIntensity = stone.color === "white" ? SHINING.BASE_INTENSITY_WHITE : SHINING.BASE_INTENSITY_BLACK;
+			const flickerIntensity = stone.color === "white" ? SHINING.FLICKER_INTENSITY_WHITE : SHINING.FLICKER_INTENSITY_BLACK;
+			const intensity = flicker * flickerIntensity + baseIntensity;
+
+			material.emissive = emissiveColor;
+			material.emissiveIntensity = intensity;
+		}
+	}
+
+	private updateHighlightedGroup(event: MouseEvent): void {
+		// Find the stone group under the mouse cursor
+		const rect = this.canvas.getBoundingClientRect();
+		const mouse = new THREE.Vector2();
+		mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+		mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+
+		// Raycast to find clicked stone
+		this.raycaster.setFromCamera(mouse, this.camera);
+		const intersects = this.raycaster.intersectObjects(this.stonesGroup.children);
+
+		if (intersects.length > 0) {
+			// Find the position of the clicked stone
+			let clickedPosition: {x: number, y: number, z: number} | null = null;
+
+			for (const [, stone] of this.stones.entries()) {
+				if (stone.mesh === intersects[0].object) {
+					clickedPosition = stone.position;
+					break;
+				}
+			}
+
+			if (clickedPosition) {
+				// Find the connected group using flood fill
+				this.highlightedGroup = this.findConnectedGroup(clickedPosition);
+
+				// Calculate liberties for the group
+				const libertiesResult = this.calculateLiberties(this.highlightedGroup);
+				this.airPatch = libertiesResult.positions;
+
+				// Notify callback with group info
+				if (this.callbacks.onInspectGroup) {
+					this.callbacks.onInspectGroup(this.highlightedGroup.size, libertiesResult.count);
+				}
+			}
+		} else {
+			this.highlightedGroup = null;
+			this.airPatch = null;
+			// Clear inspect info
+			if (this.callbacks.onInspectGroup) {
+				this.callbacks.onInspectGroup(0, 0);
+			}
+		}
+	}
+
+	private findConnectedGroup(startPos: {x: number, y: number, z: number}): Set<string> {
+		const group = new Set<string>();
+		const startKey = this.getStoneKey(startPos.x, startPos.y, startPos.z);
+		const startStone = this.stones.get(startKey);
+
+		if (!startStone) return group;
+
+		const color = startStone.color;
+		const queue: {x: number, y: number, z: number}[] = [startPos];
+		const visited = new Set<string>();
+
+		while (queue.length > 0) {
+			const pos = queue.shift()!;
+			const key = this.getStoneKey(pos.x, pos.y, pos.z);
+
+			if (visited.has(key)) continue;
+			visited.add(key);
+
+			const stone = this.stones.get(key);
+			if (!stone || stone.color !== color) continue;
+
+			group.add(key);
+
+			// Check all 6 neighbors in 3D space
+			const neighbors = [
+				{x: pos.x + 1, y: pos.y, z: pos.z},
+				{x: pos.x - 1, y: pos.y, z: pos.z},
+				{x: pos.x, y: pos.y + 1, z: pos.z},
+				{x: pos.x, y: pos.y - 1, z: pos.z},
+				{x: pos.x, y: pos.y, z: pos.z + 1},
+				{x: pos.x, y: pos.y, z: pos.z - 1}
+			];
+
+			for (const neighbor of neighbors) {
+				// Check if neighbor is within board bounds
+				if (neighbor.x >= 0 && neighbor.x < this.boardShape.x &&
+					neighbor.y >= 0 && neighbor.y < this.boardShape.y &&
+					neighbor.z >= 0 && neighbor.z < this.boardShape.z) {
+					const neighborKey = this.getStoneKey(neighbor.x, neighbor.y, neighbor.z);
+					if (!visited.has(neighborKey)) {
+						queue.push(neighbor);
+					}
+				}
+			}
+		}
+
+		return group;
+	}
+
+	private calculateLiberties(group: Set<string>): { count: number; positions: Set<string> } {
+		const liberties = new Set<string>();
+
+		// For each stone in the group, check its neighbors for empty positions
+		for (const key of group) {
+			const parts = key.split(',').map(Number);
+			const pos = {x: parts[0], y: parts[1], z: parts[2]};
+
+			// Check all 6 neighbors
+			const neighbors = [
+				{x: pos.x + 1, y: pos.y, z: pos.z},
+				{x: pos.x - 1, y: pos.y, z: pos.z},
+				{x: pos.x, y: pos.y + 1, z: pos.z},
+				{x: pos.x, y: pos.y - 1, z: pos.z},
+				{x: pos.x, y: pos.y, z: pos.z + 1},
+				{x: pos.x, y: pos.y, z: pos.z - 1}
+			];
+
+			for (const neighbor of neighbors) {
+				// Check if neighbor is within bounds
+				if (neighbor.x >= 0 && neighbor.x < this.boardShape.x &&
+					neighbor.y >= 0 && neighbor.y < this.boardShape.y &&
+					neighbor.z >= 0 && neighbor.z < this.boardShape.z) {
+					const neighborKey = this.getStoneKey(neighbor.x, neighbor.y, neighbor.z);
+					// If neighbor is empty (not in stones map), it's a liberty
+					if (!this.stones.has(neighborKey)) {
+						liberties.add(neighborKey);
+					}
+				}
+			}
+		}
+
+		return { count: liberties.size, positions: liberties };
+	}
+
+
+	private updateStoneOpacity(): void {
+		// Update opacity of all stones based on inspect mode
+		this.stones.forEach((stone, key) => {
+			if (!stone.mesh) return;
+			const material = stone.mesh.material as THREE.MeshPhongMaterial;
+
+			if (this.inspectMode && this.highlightedGroup) {
+				// Dim stones not in highlighted group
+				if (this.highlightedGroup.has(key)) {
+					material.opacity = 1.0;
+					material.transparent = false;
+				} else {
+					material.opacity = OPACITY.DIMMED;
+					material.transparent = true;
+				}
+			} else {
+				// Normal opacity
+				material.opacity = 1.0;
+				material.transparent = false;
+			}
+		});
+
+		// Update domain cubes first (respects visibility flags and inspect mode)
+		this.refreshDomainVisualization();
+
+		// Update intersection point colors to show air patch (liberties)
+		// This must come after domain cubes so it can check if cubes are visible
+		this.updateAirPatchVisualization();
+	}
+
+
+	private updateAirPatchVisualization(): void {
+		// Reset all intersection points to default color
+		this.intersectionPoints.children.forEach((child) => {
+			const point = child as THREE.Mesh;
+			const material = point.material as THREE.MeshBasicMaterial;
+			const { gridX, gridY, gridZ } = point.userData;
+			const key = this.getStoneKey(gridX, gridY, gridZ);
+
+			// Check if domain cube is visible at this position
+			const domainCube = this.domainCubes.get(key);
+			const hasDomainCube = domainCube && domainCube.visible;
+
+			// Check if this position is a liberty (air patch)
+			if (this.inspectMode && this.airPatch && this.airPatch.has(key)) {
+				if (hasDomainCube) {
+					// Hide intersection point when domain cube is visible
+					point.visible = false;
+				} else {
+					// Show liberty highlight when no domain cube
+					point.visible = true;
+					material.color.set(COLORS.POINT_AIR_PATCH);
+					material.opacity = OPACITY.POINT_AIR_PATCH;
+				}
+			} else if (!this.stones.has(key)) {
+				// Empty position not in air patch - reset to default
+				point.visible = true;
+				material.color.set(COLORS.POINT_DEFAULT);
+				material.opacity = OPACITY.POINT_DEFAULT;
+			}
+		});
+	}
+
+
+	private updateDomainCubesVisualization(blackDomain: Set<string> | null, whiteDomain: Set<string> | null): void {
+		// Update domain cube visibility based on territory and air patch
+		this.domainCubes.forEach((cube, key) => {
+			const material = cube.material as THREE.MeshBasicMaterial;
+
+			// Priority: Air patch > Black domain > White domain > Hidden
+			if (this.inspectMode && this.airPatch && this.airPatch.has(key)) {
+				// Show air patch (liberty) with green color
+				material.color.set(COLORS.POINT_AIR_PATCH);
+				material.opacity = OPACITY.POINT_AIR_PATCH;
+				cube.visible = true;
+			} else if (blackDomain && blackDomain.has(key)) {
+				// Show black territory
+				material.color.set(COLORS.STONE_BLACK);
+				material.opacity = OPACITY.DOMAIN_BLACK;
+				cube.visible = true;
+			} else if (whiteDomain && whiteDomain.has(key)) {
+				// Show white territory
+				material.color.set(COLORS.STONE_WHITE);
+				material.opacity = OPACITY.DOMAIN_WHITE;
+				cube.visible = true;
+			} else {
+				// Hide cube
+				cube.visible = false;
+			}
+		});
+	}
+
+
+	private onKeyDown(event: KeyboardEvent): void {
+		// Ctrl key (17) or Meta key (91/93) for Mac
+		if (event.ctrlKey || event.metaKey) {
+			this.ctrlKeyDown = true;
+			this.inspectMode = true;
+			// Update highlighted group based on last mouse position if available
+			if (this.lastMouseEvent) {
+				this.updateHighlightedGroup(this.lastMouseEvent);
+			}
+			this.updateStoneOpacity();
+		}
+	}
+
+	private onKeyUp(event: KeyboardEvent): void {
+		// Ctrl key release
+		if (!event.ctrlKey && !event.metaKey) {
+			this.ctrlKeyDown = false;
+			if (this.inspectMode) {
+				this.inspectMode = false;
+				this.highlightedGroup = null;
+				this.airPatch = null;
+				this.updateStoneOpacity();
+				// Clear tooltip by calling callback with 0, 0
+				if (this.callbacks.onInspectGroup) {
+					this.callbacks.onInspectGroup(0, 0);
+				}
+			}
+		}
+	}
+
+
+	public destroy(): void {
+		this.isDestroyed = true;
+
+		// Cancel animation
+		if (this.animationId !== null) {
+			cancelAnimationFrame(this.animationId);
+		}
+
+		// Remove event listeners
+		this.canvas.removeEventListener("mousemove", this.onMouseMove.bind(this));
+		this.canvas.removeEventListener("mousedown", this.onMouseDown.bind(this));
+		this.canvas.removeEventListener("mouseup", this.onMouseUp.bind(this));
+		this.canvas.removeEventListener("click", this.onClick.bind(this));
+		window.removeEventListener("resize", this.onWindowResize.bind(this));
+		window.removeEventListener("keydown", this.onKeyDown.bind(this));
+		window.removeEventListener("keyup", this.onKeyUp.bind(this));
+
+		// Dispose of Three.js resources
+		this.clearBoard();
+		this.gridGroup.clear();
+		this.intersectionPoints.clear();
+		this.renderer.dispose();
+		this.controls.dispose();
+	}
+}

trigo-web/app/src/stores/gameStore.ts

@@ -0,0 +1,310 @@
+import { defineStore } from "pinia";
+import { TrigoGameFrontend } from "../utils/TrigoGameFrontend";
+import type {
+	Stone,
+	BoardShape,
+	Player,
+	Move,
+	Position,
+	GameConfig,
+	TerritoryResult
+} from "../../../inc/trigo";
+
+
+/**
+ * Game Store State
+ *
+ * Refactored to use TrigoGameFrontend as the single source of truth
+ */
+export interface GameState {
+	game: TrigoGameFrontend;
+	config: GameConfig;
+}
+
+
+/**
+ * Pinia store for game state management
+ *
+ * Now delegates all game logic to TrigoGameFrontend
+ */
+export const useGameStore = defineStore("game", {
+	state: (): GameState => ({
+		game: new TrigoGameFrontend({ x: 5, y: 5, z: 5 }),
+		config: {
+			boardShape: { x: 5, y: 5, z: 5 },
+			allowUndo: true
+		}
+	}),
+
+
+	getters: {
+		// Board state
+		board: (state): Stone[][][] => state.game.getBoard(),
+		boardShape: (state): BoardShape => state.game.getShape(),
+
+		// Current player
+		currentPlayer: (state): Player => state.game.getCurrentPlayerString(),
+		currentPlayerColor: (state): Player => state.game.getCurrentPlayerString(),
+		opponentPlayer: (state): Player => state.game.getOpponentPlayer(),
+
+		// Move history
+		moveHistory: (state): Move[] => state.game.getMoveHistory(),
+		moveCount: (state): number => state.game.getMoveCount(),
+		currentMoveIndex: (state): number => state.game.getCurrentMoveIndex(),
+		currentMoves: (state): Move[] => {
+			const history = state.game.getMoveHistory();
+			const currentIndex = state.game.getCurrentMoveIndex();
+			return history.slice(0, currentIndex);
+		},
+
+		// Game status
+		gameStatus: (state) => state.game.getStatus(),
+		gameResult: (state) => state.game.getResult(),
+		isGameActive: (state): boolean => state.game.isGameActive(),
+
+		// Captured stones
+		capturedStones: (state): { black: number; white: number } => {
+			const counts = state.game.getCapturedCounts();
+			return {
+				black: counts.white, // Black captured white stones
+				white: counts.black  // White captured black stones
+			};
+		},
+
+		// Pass tracking
+		passCount: (state): number => state.game.getConsecutivePassCount(),
+
+		// Undo/Redo capabilities
+		canUndo: (state): boolean => {
+			return state.config.allowUndo && state.game.canUndo();
+		},
+		canRedo: (state): boolean => {
+			return state.config.allowUndo && state.game.canRedo();
+		},
+
+		// Position checks
+		isValidPosition: (state) => (x: number, y: number, z: number): boolean => {
+			return state.game.isValidPosition(x, y, z);
+		},
+		isEmpty: (state) => (x: number, y: number, z: number): boolean => {
+			return state.game.isEmpty(x, y, z);
+		},
+		getStone: (state) => (x: number, y: number, z: number): Stone => {
+			return state.game.getStoneAt(x, y, z) as Stone;
+		}
+	},
+
+
+	actions: {
+		/**
+		 * Initialize a new game
+		 */
+		initializeGame(boardShape: BoardShape = { x: 5, y: 5, z: 5 }): void {
+			this.game = new TrigoGameFrontend(boardShape);
+			this.config.boardShape = boardShape;
+			this.saveToSessionStorage();
+		},
+
+
+		/**
+		 * Start the game
+		 */
+		startGame(): void {
+			this.game.startGame();
+			this.saveToSessionStorage();
+		},
+
+
+		/**
+		 * Make a move
+		 */
+		makeMove(x: number, y: number, z: number): { success: boolean; capturedPositions?: Position[] } {
+			// Check if game is active
+			if (!this.game.isGameActive()) {
+				console.warn("Game is not active");
+				return { success: false };
+			}
+
+			// Attempt to make the move
+			const success = this.game.makeMove(x, y, z);
+
+			if (success) {
+				// Get captured positions from last step
+				const lastStep = this.game.getLastStep();
+				const capturedPositions = lastStep?.capturedPositions;
+
+				// Save to storage
+				this.saveToSessionStorage();
+
+				return { success: true, capturedPositions };
+			}
+
+			return { success: false };
+		},
+
+
+		/**
+		 * Pass turn
+		 */
+		pass(): boolean {
+			if (!this.game.isGameActive()) {
+				return false;
+			}
+
+			const success = this.game.pass();
+			if (success) {
+				this.saveToSessionStorage();
+			}
+			return success;
+		},
+
+
+		/**
+		 * Resign/surrender
+		 */
+		resign(): boolean {
+			if (!this.game.isGameActive()) {
+				return false;
+			}
+
+			const success = this.game.surrender();
+			if (success) {
+				this.saveToSessionStorage();
+			}
+			return success;
+		},
+
+
+		/**
+		 * Undo last move
+		 */
+		undoMove(): boolean {
+			if (!this.canUndo) {
+				return false;
+			}
+
+			const success = this.game.undoMove();
+			if (success) {
+				this.saveToSessionStorage();
+			}
+			return success;
+		},
+
+
+		/**
+		 * Redo next move
+		 */
+		redoMove(): boolean {
+			if (!this.canRedo) {
+				return false;
+			}
+
+			const success = this.game.redoMove();
+			if (success) {
+				this.saveToSessionStorage();
+			}
+			return success;
+		},
+
+
+		/**
+		 * Jump to specific move in history
+		 */
+		jumpToMove(index: number): boolean {
+			const success = this.game.jumpToMove(index);
+			if (success) {
+				this.saveToSessionStorage();
+			}
+			return success;
+		},
+
+
+		/**
+		 * Reset game to initial state
+		 */
+		resetGame(): void {
+			this.game.reset();
+			this.saveToSessionStorage();
+		},
+
+
+		/**
+		 * Change board shape (only when game is idle)
+		 */
+		setBoardShape(shape: BoardShape): boolean {
+			if (this.game.getStatus() !== "idle") {
+				console.warn("Cannot change board shape while game is active");
+				return false;
+			}
+
+			this.initializeGame(shape);
+			return true;
+		},
+
+
+		/**
+		 * Calculate territory
+		 */
+		computeTerritory(): TerritoryResult {
+			return this.game.computeTerritory();
+		},
+
+
+		/**
+		 * Get neighboring positions (6 directions in 3D)
+		 */
+		getNeighbors(x: number, y: number, z: number): Array<{ x: number; y: number; z: number }> {
+			const neighbors = [
+				{ x: x + 1, y, z },
+				{ x: x - 1, y, z },
+				{ x, y: y + 1, z },
+				{ x, y: y - 1, z },
+				{ x, y, z: z + 1 },
+				{ x, y, z: z - 1 }
+			];
+
+			return neighbors.filter((pos) => this.isValidPosition(pos.x, pos.y, pos.z));
+		},
+
+
+		/**
+		 * Save game state to session storage
+		 */
+		saveToSessionStorage(): void {
+			try {
+				this.game.saveToSessionStorage("trigoGameState");
+			} catch (error) {
+				console.error("Failed to save game state:", error);
+			}
+		},
+
+
+		/**
+		 * Load game state from session storage
+		 */
+		loadFromSessionStorage(): boolean {
+			try {
+				const success = this.game.loadFromSessionStorage("trigoGameState");
+				if (success) {
+					console.log("Game state restored from session storage");
+				}
+				return success;
+			} catch (error) {
+				console.error("Failed to load game state:", error);
+				return false;
+			}
+		},
+
+
+		/**
+		 * Clear saved game state
+		 */
+		clearSessionStorage(): void {
+			try {
+				this.game.clearSessionStorage("trigoGameState");
+			} catch (error) {
+				console.error("Failed to clear session storage:", error);
+			}
+		}
+	}
+});

trigo-web/app/src/utils/TrigoGameFrontend.ts

@@ -0,0 +1,258 @@
+/**
+ * TrigoGameFrontend - Frontend wrapper for TrigoGame
+ *
+ * Provides convenient string-based interfaces for frontend use
+ * Wraps TrigoGame's number-based types with string types
+ */
+
+import {
+	TrigoGame,
+	type BoardShape,
+	type Move,
+	type Player,
+	type TerritoryResult,
+	stoneToPlayer,
+	stepsToMoves,
+	makePosition,
+	type GameStatus,
+	type GameResult
+} from "../../../inc/trigo";
+
+
+/**
+ * TrigoGameFrontend - Extended TrigoGame with frontend-friendly interfaces
+ */
+export class TrigoGameFrontend extends TrigoGame {
+	/**
+	 * Make a move with coordinates (convenience method)
+	 *
+	 * @param x X coordinate
+	 * @param y Y coordinate
+	 * @param z Z coordinate
+	 * @returns true if move was successful
+	 */
+	makeMove(x: number, y: number, z: number): boolean {
+		return this.drop(makePosition(x, y, z));
+	}
+
+
+	/**
+	 * Get current player as string
+	 *
+	 * @returns "black" | "white"
+	 */
+	getCurrentPlayerString(): Player {
+		return stoneToPlayer(this.getCurrentPlayer());
+	}
+
+
+	/**
+	 * Get move history in frontend format
+	 *
+	 * @returns Array of Move objects
+	 */
+	getMoveHistory(): Move[] {
+		return stepsToMoves(this.getHistory());
+	}
+
+
+	/**
+	 * Get stone at position, returns number format for frontend
+	 *
+	 * @param x X coordinate
+	 * @param y Y coordinate
+	 * @param z Z coordinate
+	 * @returns 0 = Empty, 1 = Black, 2 = White
+	 */
+	getStoneAt(x: number, y: number, z: number): number {
+		return this.getStone(makePosition(x, y, z)) as number;
+	}
+
+
+	/**
+	 * Check if position is valid
+	 *
+	 * @param x X coordinate
+	 * @param y Y coordinate
+	 * @param z Z coordinate
+	 * @returns true if position is on the board
+	 */
+	isValidPosition(x: number, y: number, z: number): boolean {
+		const shape = this.getShape();
+		return (
+			x >= 0 &&
+			x < shape.x &&
+			y >= 0 &&
+			y < shape.y &&
+			z >= 0 &&
+			z < shape.z
+		);
+	}
+
+
+	/**
+	 * Check if position is empty
+	 *
+	 * @param x X coordinate
+	 * @param y Y coordinate
+	 * @param z Z coordinate
+	 * @returns true if position is empty
+	 */
+	isEmpty(x: number, y: number, z: number): boolean {
+		if (!this.isValidPosition(x, y, z)) {
+			return false;
+		}
+		return this.getStoneAt(x, y, z) === 0;
+	}
+
+
+	/**
+	 * Check if a move is valid at position
+	 *
+	 * @param x X coordinate
+	 * @param y Y coordinate
+	 * @param z Z coordinate
+	 * @returns Object with valid flag and optional reason
+	 */
+	isValidMoveAt(x: number, y: number, z: number): { valid: boolean; reason?: string } {
+		return this.isValidMove(makePosition(x, y, z));
+	}
+
+
+	/**
+	 * Get opponent player
+	 *
+	 * @returns Opponent player color
+	 */
+	getOpponentPlayer(): Player {
+		const current = this.getCurrentPlayerString();
+		return current === "black" ? "white" : "black";
+	}
+
+
+	/**
+	 * Check if undo is available
+	 *
+	 * @returns true if can undo
+	 */
+	canUndo(): boolean {
+		return this.getCurrentStep() > 0;
+	}
+
+
+	/**
+	 * Undo move (convenience wrapper)
+	 *
+	 * @returns true if undo was successful
+	 */
+	undoMove(): boolean {
+		return this.undo();
+	}
+
+
+	/**
+	 * Redo move (convenience wrapper)
+	 *
+	 * @returns true if redo was successful
+	 */
+	redoMove(): boolean {
+		return this.redo();
+	}
+
+
+	/**
+	 * Jump to specific move in history
+	 *
+	 * @param index Move index (-1 for initial state)
+	 * @returns true if jump was successful
+	 */
+	jumpToMove(index: number): boolean {
+		return this.jumpToStep(index);
+	}
+
+
+	/**
+	 * Get total move count
+	 *
+	 * @returns Number of moves played
+	 */
+	getMoveCount(): number {
+		return this.getCurrentStep();
+	}
+
+
+	/**
+	 * Get current move index
+	 *
+	 * @returns Current step index
+	 */
+	getCurrentMoveIndex(): number {
+		return this.getCurrentStep();
+	}
+
+
+	/**
+	 * Get board shape
+	 *
+	 * @returns Board dimensions
+	 */
+	getBoardShape(): BoardShape {
+		return this.getShape();
+	}
+
+
+	/**
+	 * Initialize game with board shape
+	 *
+	 * @param shape Board dimensions
+	 */
+	initializeGame(shape?: BoardShape): void {
+		if (shape) {
+			// Would need to recreate the game instance with new shape
+			// For now, just reset
+			this.reset();
+		} else {
+			this.reset();
+		}
+	}
+
+
+	/**
+	 * Compute territory (convenience wrapper)
+	 *
+	 * @returns Territory calculation result
+	 */
+	computeTerritory(): TerritoryResult {
+		return this.getTerritory();
+	}
+
+
+	/**
+	 * Get game status
+	 *
+	 * @returns Game status
+	 */
+	getStatus(): GameStatus {
+		return this.getGameStatus();
+	}
+
+
+	/**
+	 * Get game result
+	 *
+	 * @returns Game result if available
+	 */
+	getResult(): GameResult | undefined {
+		return this.getGameResult();
+	}
+
+
+	/**
+	 * Get consecutive pass count
+	 *
+	 * @returns Number of consecutive passes
+	 */
+	getConsecutivePassCount(): number {
+		return this.getPassCount();
+	}
+}

trigo-web/app/src/views/TrigoView.vue

@@ -0,0 +1,1604 @@
+<template>
+	<div class="trigo-view">
+		<div class="view-header">
+			<div class="logo-container" title="K.L. Trigo">
+				<img :src="logoImage" alt="Trigo Logo" class="app-logo" />
+			</div>
+			<div class="view-status">
+				<span class="turn-indicator" :class="{ black: currentPlayer === 'black', white: currentPlayer === 'white' }">
+					{{ currentPlayer === "black" ? "Black" : "White" }}'s Turn
+				</span>
+				<span class="move-count">Move: {{ moveCount }}</span>
+			</div>
+		</div>
+
+		<div class="view-body">
+			<!-- 3D Board Canvas Area (Left) -->
+			<div class="board-container">
+				<div class="viewport-wrapper">
+					<canvas ref="viewportCanvas" class="viewport-canvas"></canvas>
+					<div class="viewport-overlay" v-if="isLoading">
+						<p class="loading-text">Loading 3D Board...</p>
+					</div>
+					<!-- Inspect Mode Tooltip -->
+					<div class="inspect-tooltip" v-if="inspectInfo.visible">
+						<div class="tooltip-content">
+							<span class="tooltip-label">{{ inspectInfo.groupSize }} stone{{ inspectInfo.groupSize > 1 ? 's' : '' }}</span>
+							<span class="tooltip-divider">|</span>
+							<span class="tooltip-label">Liberties: {{ inspectInfo.liberties }}</span>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- Game Controls & Info Panel (Right) -->
+			<div class="controls-panel">
+				<!-- Score Display (Captured/Territory) -->
+				<div class="panel-section score-section" :class="{ 'show-territory': showTerritoryMode }">
+					<h3 class="section-title">{{ showTerritoryMode ? 'Territory' : 'Captured' }}</h3>
+					<div class="score-display">
+						<button class="score-button black" :disabled="!gameStarted">
+							<span class="color-indicator black-stone"></span>
+							<span class="score">{{ showTerritoryMode ? blackScore : capturedStones.black }}</span>
+						</button>
+						<button class="score-button white" :disabled="!gameStarted">
+							<span class="color-indicator white-stone"></span>
+							<span class="score">{{ showTerritoryMode ? whiteScore : capturedStones.white }}</span>
+						</button>
+					</div>
+					<button class="compute-territory" @click="computeTerritory" :disabled="!gameStarted">
+						Compute Territory
+					</button>
+				</div>
+
+				<!-- Move History -->
+				<div class="panel-section routine-section">
+					<h3 class="section-title">
+						Move History
+						<button class="btn-view-tgn" @click="showTGNModal = true" title="View TGN Notation">
+							TGN
+						</button>
+					</h3>
+					<div class="routine-content" ref="moveHistoryContainer">
+						<div class="move-list">
+							<!-- START placeholder -->
+							<div
+								:class="{ active: currentMoveIndex === 0 }"
+								@click="jumpToMove(0)"
+								class="move-row start-row"
+							>
+								<span class="round-number"></span>
+								<span class="move-label open-label">OPEN</span>
+							</div>
+							<!-- Move history items by round -->
+							<div
+								v-for="(round, roundIndex) in moveRounds"
+								:key="roundIndex"
+								class="move-row"
+							>
+								<span class="round-number">{{ roundIndex + 1 }}.</span>
+								<div
+									class="move-cell black-move"
+									:class="{ active: round.blackIndex === currentMoveIndex }"
+									@click="jumpToMove(round.blackIndex)"
+								>
+									<span class="stone-icon black"></span>
+									<span class="move-coords" v-if="!round.black.isPass">{{ formatMoveCoords(round.black) }}</span>
+									<span class="move-label" v-else>pass</span>
+								</div>
+								<div
+									v-if="round.white"
+									class="move-cell white-move"
+									:class="{ active: round.whiteIndex === currentMoveIndex }"
+									@click="jumpToMove(round.whiteIndex)"
+								>
+									<span class="stone-icon white"></span>
+									<span class="move-coords" v-if="!round.white.isPass">{{ formatMoveCoords(round.white) }}</span>
+									<span class="move-label" v-else>pass</span>
+								</div>
+								<div v-else class="move-cell empty"></div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<!-- Game Controls -->
+				<div class="panel-section controls-section">
+					<h3 class="section-title">Controls</h3>
+					<div class="control-buttons">
+						<div class="play-controls">
+							<button class="btn btn-pass" @click="pass" :disabled="!gameStarted">
+								Pass
+							</button>
+							<button class="btn btn-resign" @click="resign" :disabled="!gameStarted">
+								Resign
+							</button>
+						</div>
+						<div class="history-controls">
+							<button
+								class="btn btn-icon btn-prev"
+								@click="previousMove"
+								:disabled="currentMoveIndex <= 0"
+								title="Previous Move"
+							>
+								◀
+							</button>
+							<button
+								class="btn btn-icon btn-next"
+								@click="nextMove"
+								:disabled="currentMoveIndex >= moveHistory.length"
+								title="Next Move"
+							>
+								▶
+							</button>
+						</div>
+					</div>
+				</div>
+
+				<!-- Game Settings -->
+				<div class="panel-section settings-section">
+					<h3 class="section-title">Settings</h3>
+					<div class="settings-content">
+						<div class="setting-item">
+							<label for="board-shape">
+								Board Shape:
+								<span v-if="isBoardShapeDirty" class="dirty-indicator" title="Board shape will change on next game">*</span>
+							</label>
+							<select id="board-shape" v-model="selectedBoardShape">
+								<option value="3*3*3">3×3×3</option>
+								<option value="5*5*5">5×5×5</option>
+								<option value="7*7*7">7×7×7</option>
+								<option value="9*9*1">9×9×1 (2D)</option>
+								<option value="13*13*1">13×13×1 (2D)</option>
+								<option value="19*19*1">19×19×1 (2D)</option>
+								<option value="9*9*2">9×9×2</option>
+							</select>
+						</div>
+						<button class="btn btn-primary btn-new-game" @click="newGame">
+							{{ gameStarted ? "Reset Game" : "Start Game" }}
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- TGN Modal -->
+		<div class="tgn-modal" v-if="showTGNModal" @click.self="showTGNModal = false">
+			<div class="tgn-modal-content">
+				<div class="tgn-modal-header">
+					<h3>Game Notation (TGN)</h3>
+					<div class="tgn-status" :class="tgnValidationClass">
+						{{ tgnValidationMessage }}
+					</div>
+					<button class="btn-close" @click="showTGNModal = false">×</button>
+				</div>
+				<div class="tgn-modal-body">
+					<textarea
+						v-model="editableTGNContent"
+						:class="['tgn-textarea', tgnValidationClass]"
+						@input="onTGNEdit"
+						placeholder="Enter TGN game notation..."
+					></textarea>
+				</div>
+				<div class="tgn-modal-footer">
+					<button class="btn btn-apply" @click="applyTGN" :disabled="!tgnIsValid">
+						Apply TGN
+					</button>
+					<button class="btn btn-copy" @click="copyTGN">Copy to Clipboard</button>
+					<button class="btn btn-close-modal" @click="showTGNModal = false">Close</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch, computed, nextTick } from "vue";
+import { TrigoViewport } from "@/services/trigoViewport";
+import { useGameStore } from "@/stores/gameStore";
+import { storeToRefs } from "pinia";
+import type { BoardShape } from "../../../inc/trigo";
+import { Stone, validateMove, StoneType, validateTGN } from "../../../inc/trigo";
+import { TrigoGameFrontend } from "@/utils/TrigoGameFrontend";
+import { encodeAb0yz } from "../../../inc/trigo/ab0yz";
+import logoImage from "@/assets/logo.png";
+
+// Helper functions for board shape parsing
+const parseBoardShape = (shapeStr: string): BoardShape => {
+	const parts = shapeStr.split(/[^\d]+/).filter(Boolean).map(Number);
+	return { x: parts[0] || 5, y: parts[1] || 5, z: parts[2] || 5 };
+};
+
+const printBoardShape = (shape: BoardShape): string => {
+	return `${shape.x}*${shape.y}*${shape.z}`;
+};
+
+// Format move coordinates using TGN notation
+const formatMoveCoords = (move: { x: number; y: number; z: number }): string => {
+	const shape = boardShape.value;
+	return encodeAb0yz([move.x, move.y, move.z], [shape.x, shape.y, shape.z]);
+};
+
+// Use game store
+const gameStore = useGameStore();
+const {
+	currentPlayer,
+	moveHistory,
+	currentMoveIndex,
+	capturedStones,
+	gameStatus,
+	boardShape,
+	moveCount,
+	isGameActive,
+	passCount
+} = storeToRefs(gameStore);
+
+// Local state
+const hoveredPosition = ref<string | null>(null);
+const blackScore = ref(0);
+const whiteScore = ref(0);
+const isLoading = ref(true);
+const selectedBoardShape = ref<string>(printBoardShape(boardShape.value));
+const showTerritoryMode = ref(false);
+const showTGNModal = ref(false);
+const inspectInfo = ref({
+	visible: false,
+	groupSize: 0,
+	liberties: 0
+});
+
+// TGN Editor state
+const editableTGNContent = ref<string>('');
+const tgnValidationState = ref<'idle' | 'valid' | 'invalid'>('idle');
+const tgnValidationError = ref<string>('');
+let tgnValidationTimeout: ReturnType<typeof setTimeout> | null = null;
+
+// Canvas reference and viewport
+const viewportCanvas = ref<HTMLCanvasElement | null>(null);
+const moveHistoryContainer = ref<HTMLDivElement | null>(null);
+let viewport: TrigoViewport | null = null;
+
+// Computed properties
+const gameStarted = computed(() => isGameActive.value);
+
+// Group moves into rounds (pairs of black and white moves)
+const moveRounds = computed(() => {
+	const rounds: Array<{
+		black: any;
+		white: any | null;
+		blackIndex: number;
+		whiteIndex: number | null;
+	}> = [];
+
+	for (let i = 0; i < moveHistory.value.length; i += 2) {
+		const blackMove = moveHistory.value[i];
+		const whiteMove = moveHistory.value[i + 1] || null;
+
+		rounds.push({
+			black: blackMove,
+			white: whiteMove,
+			blackIndex: i + 1,  // Convert array index to "moves applied" count
+			whiteIndex: whiteMove ? i + 2 : null  // Convert array index to "moves applied" count
+		});
+	}
+
+	return rounds;
+});
+
+// Check if selected board shape differs from current game board shape
+const isBoardShapeDirty = computed(() => {
+	const selectedShape = parseBoardShape(selectedBoardShape.value);
+	const currentShape = boardShape.value;
+	return selectedShape.x !== currentShape.x ||
+	       selectedShape.y !== currentShape.y ||
+	       selectedShape.z !== currentShape.z;
+});
+
+// Generate TGN content
+const tgnContent = computed(() => {
+	return gameStore.game?.toTGN({
+		application: 'Trigo Demo v1.0',
+		date: new Date().toISOString().split('T')[0].replace(/-/g, '.')
+	}) || '';
+});
+
+// TGN validation computed properties
+const tgnIsValid = computed(() => tgnValidationState.value === 'valid');
+
+const tgnValidationClass = computed(() => {
+	if (tgnValidationState.value === 'idle') return 'idle';
+	if (tgnValidationState.value === 'valid') return 'valid';
+	return 'invalid';
+});
+
+const tgnValidationMessage = computed(() => {
+	if (tgnValidationState.value === 'idle') return 'Ready to validate';
+	if (tgnValidationState.value === 'valid') return '✓ Valid TGN';
+	return `✗ ${tgnValidationError.value}`;
+});
+
+// Debounced TGN validation (synchronous)
+const onTGNEdit = () => {
+	// Clear existing timeout
+	if (tgnValidationTimeout) {
+		clearTimeout(tgnValidationTimeout);
+	}
+
+	// Set validation state to idle while waiting for debounce
+	tgnValidationState.value = 'idle';
+
+	// Set new debounce timeout (300ms)
+	tgnValidationTimeout = setTimeout(() => {
+		const result = validateTGN(editableTGNContent.value);
+
+		if (result.valid) {
+			tgnValidationState.value = 'valid';
+			tgnValidationError.value = '';
+		} else {
+			tgnValidationState.value = 'invalid';
+			tgnValidationError.value = result.error || 'Invalid TGN format';
+		}
+	}, 300);
+};
+
+// Apply TGN and update game state (synchronous)
+const applyTGN = () => {
+	if (!tgnIsValid.value) return;
+
+	try {
+		const newGame = TrigoGameFrontend.fromTGN(editableTGNContent.value);
+
+		// Update game store with the new TrigoGameFrontend instance
+		gameStore.game = newGame;
+
+		// Save to session storage
+		gameStore.saveToSessionStorage();
+
+		// Update viewport with new board state
+		// The getters will automatically compute the new values from gameStore.game
+		if (viewport) {
+			viewport.setBoardShape(newGame.getShape());
+			syncViewportWithStore();
+		}
+
+		// Close modal
+		showTGNModal.value = false;
+	} catch (err) {
+		console.error('Failed to apply TGN:', err);
+		tgnValidationState.value = 'invalid';
+		tgnValidationError.value = err instanceof Error ? err.message : 'Failed to apply TGN';
+	}
+};
+
+// Handle stone placement
+const handleStoneClick = (x: number, y: number, z: number) => {
+	if (!gameStarted.value)
+		return;
+
+	// Make move in store
+	const result = gameStore.makeMove(x, y, z);
+
+	if (result.success && viewport) {
+		// Add stone to viewport (store already switched player, so use opponent)
+		const stoneColor = gameStore.opponentPlayer;
+		viewport.addStone(x, y, z, stoneColor);
+
+		// Remove captured stones from viewport
+		if (result.capturedPositions && result.capturedPositions.length > 0) {
+			result.capturedPositions.forEach(pos => {
+				viewport.removeStone(pos.x, pos.y, pos.z);
+			});
+			console.log(`Captured ${result.capturedPositions.length} stone(s)`);
+		}
+
+		// Hide domain visualization and switch back to captured display after move
+		viewport.hideDomainCubes();
+		showTerritoryMode.value = false;
+	}
+};
+
+// Handle position hover
+const handlePositionHover = (x: number | null, y: number | null, z: number | null) => {
+	if (x !== null && y !== null && z !== null) {
+		hoveredPosition.value = `(${x}, ${y}, ${z})`;
+	} else {
+		hoveredPosition.value = null;
+	}
+};
+
+// Check if a position is droppable (validates with game rules)
+const isPositionDroppable = (x: number, y: number, z: number): boolean => {
+	const pos = { x, y, z };
+	const playerColor = currentPlayer.value === "black" ? StoneType.BLACK : StoneType.WHITE;
+
+	const validation = validateMove(
+		pos,
+		playerColor,
+		gameStore.board,
+		boardShape.value,
+		gameStore.lastCapturedPositions
+	);
+
+	return validation.valid;
+};
+
+// Handle inspect mode callback
+const handleInspectGroup = (groupSize: number, liberties: number) => {
+	if (groupSize > 0) {
+		inspectInfo.value = {
+			visible: true,
+			groupSize,
+			liberties
+		};
+	} else {
+		inspectInfo.value = {
+			visible: false,
+			groupSize: 0,
+			liberties: 0
+		};
+	}
+};
+
+
+// Game control methods
+const newGame = () => {
+	// Parse selected board shape
+	const shape = parseBoardShape(selectedBoardShape.value);
+
+	// Initialize game in store
+	gameStore.initializeGame(shape);
+	gameStore.startGame();
+
+	// Update viewport with new board shape
+	if (viewport) {
+		viewport.setBoardShape(shape);
+		viewport.clearBoard();
+		viewport.setGameActive(true);
+
+		// Exit territory mode if active
+		viewport.hideDomainCubes();
+	}
+
+	// Reset scores and territory mode
+	blackScore.value = 0;
+	whiteScore.value = 0;
+	showTerritoryMode.value = false;
+
+	console.log(
+		`Starting new game with board shape ${shape.x}×${shape.y}×${shape.z}`
+	);
+};
+
+const pass = () => {
+	const previousPlayer = currentPlayer.value;
+	const success = gameStore.pass();
+
+	if (success) {
+		// Check if game ended due to double pass
+		//if (gameStore.gameResult?.reason === "double-pass") {
+		//	showGameResult();
+		//} else {
+			console.log(`${previousPlayer} passed (Pass count: ${gameStore.passCount})`);
+		//}
+	}
+};
+
+
+const resign = () => {
+	// Confirm resignation
+	const confirmed = confirm(
+		`Are you sure ${currentPlayer.value} wants to resign?\n\nThis will end the game immediately.`
+	);
+
+	if (!confirmed) return;
+
+	//const success = gameStore.resign();
+
+	//if (success) {
+	//	showGameResult();
+	//}
+};
+
+
+const showGameResult = () => {
+	const result = gameStore.gameResult;
+	if (!result) return;
+
+	// Don't set game as inactive - allow continued analysis
+	// if (viewport) {
+	// 	viewport.setGameActive(false);
+	// }
+
+	let message = "";
+	if (result.reason === "resignation") {
+		message = `${result.winner === "black" ? "Black" : "White"} wins by resignation!\n\nGame continues for analysis.`;
+	} else if (result.reason === "double-pass") {
+		// Calculate final scores for double pass
+		const territory = gameStore.computeTerritory();
+		const blackTotal = territory.black + capturedStones.value.black;
+		const whiteTotal = territory.white + capturedStones.value.white;
+
+		blackScore.value = blackTotal;
+		whiteScore.value = whiteTotal;
+
+		if (blackTotal > whiteTotal) {
+			message = `Black wins by ${blackTotal - whiteTotal} points!\n\nBlack: ${blackTotal} points\nWhite: ${whiteTotal} points\n\nGame continues for analysis.`;
+		} else if (whiteTotal > blackTotal) {
+			message = `White wins by ${whiteTotal - blackTotal} points!\n\nWhite: ${whiteTotal} points\nBlack: ${blackTotal} points\n\nGame continues for analysis.`;
+		} else {
+			message = `Game is a draw!\n\nBoth players: ${blackTotal} points\n\nGame continues for analysis.`;
+		}
+	}
+
+	setTimeout(() => {
+		alert(message);
+	}, 100);
+};
+
+
+const computeTerritory = () => {
+	if (!gameStarted.value) return;
+
+	// Toggle territory mode
+	if (showTerritoryMode.value) {
+		// Exit territory mode
+		if (viewport) {
+			viewport.hideDomainCubes();
+		}
+		showTerritoryMode.value = false;
+		// Reset scores to captured stones count
+		blackScore.value = 0;
+		whiteScore.value = 0;
+		return;
+	}
+
+	// Enter territory mode - Use store's territory calculation
+	const territory = gameStore.computeTerritory();
+	blackScore.value = territory.black + capturedStones.value.black;
+	whiteScore.value = territory.white + capturedStones.value.white;
+
+	// Switch to territory display mode
+	showTerritoryMode.value = true;
+
+	// Convert territory arrays to Sets of position keys for viewport
+	if (viewport) {
+		const blackDomain = new Set<string>();
+		const whiteDomain = new Set<string>();
+
+		// Use the calculated territory positions from the territory result
+		territory.blackTerritory.forEach(pos => {
+			const key = `${pos.x},${pos.y},${pos.z}`;
+			blackDomain.add(key);
+		});
+
+		territory.whiteTerritory.forEach(pos => {
+			const key = `${pos.x},${pos.y},${pos.z}`;
+			whiteDomain.add(key);
+		});
+
+		// Set domain data and show both domains
+		viewport.setDomainData(blackDomain, whiteDomain);
+		viewport.setBlackDomainVisible(true);
+		viewport.setWhiteDomainVisible(true);
+	}
+
+	console.log("Territory computed:", territory);
+};
+
+const previousMove = () => {
+	const success = gameStore.undoMove();
+
+	if (success && viewport) {
+		// Rebuild viewport from current board state
+		syncViewportWithStore();
+	}
+};
+
+const nextMove = () => {
+	const success = gameStore.redoMove();
+
+	if (success && viewport) {
+		// Rebuild viewport from current board state
+		syncViewportWithStore();
+	}
+};
+
+const jumpToMove = (index: number) => {
+	const success = gameStore.jumpToMove(index);
+
+	if (success && viewport) {
+		// Rebuild viewport from current board state
+		syncViewportWithStore();
+
+		// Exit territory mode when navigating move history
+		viewport.hideDomainCubes();
+		showTerritoryMode.value = false;
+		// Reset scores to 0 when exiting territory mode
+		blackScore.value = 0;
+		whiteScore.value = 0;
+	}
+};
+
+// Sync viewport with store's board state
+const syncViewportWithStore = () => {
+	if (!viewport) return;
+
+	// Clear viewport
+	viewport.clearBoard();
+
+	// Read the actual board state from the store (which has captures applied)
+	const board = gameStore.board;
+	const shape = boardShape.value;
+
+	// Add all stones that exist on the board
+	for (let x = 0; x < shape.x; x++) {
+		for (let y = 0; y < shape.y; y++) {
+			for (let z = 0; z < shape.z; z++) {
+				const stone = board[x][y][z];
+				if (stone === Stone.Black) {
+					viewport.addStone(x, y, z, "black");
+				} else if (stone === Stone.White) {
+					viewport.addStone(x, y, z, "white");
+				}
+			}
+		}
+	}
+
+	// Set the last placed stone highlight based on current move index
+	// currentMoveIndex represents the number of moves applied (not array index)
+	// So the last applied move is at array index (currentMoveIndex - 1)
+	if (currentMoveIndex.value > 0 && currentMoveIndex.value <= moveHistory.value.length) {
+		const lastMove = moveHistory.value[currentMoveIndex.value - 1];
+		viewport.setLastPlacedStone(lastMove.x, lastMove.y, lastMove.z);
+	} else {
+		// No moves applied or at START position
+		viewport.setLastPlacedStone(null, null, null);
+	}
+};
+
+// Watch for current player changes to update viewport preview
+watch(currentPlayer, (newPlayer) => {
+	if (viewport) {
+		viewport.setCurrentPlayer(newPlayer);
+	}
+});
+
+// Watch currentMoveIndex to auto-scroll move history to keep current move visible
+watch(currentMoveIndex, () => {
+	// Use nextTick to ensure DOM is updated before scrolling
+	nextTick(() => {
+		if (moveHistoryContainer.value) {
+			// Find the active move element
+			const activeElement = moveHistoryContainer.value.querySelector('.active');
+			if (activeElement) {
+				// Scroll the active element into view smoothly
+				activeElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+			}
+		}
+	});
+});
+
+// Watch TGN modal to populate editable content when opened
+watch(showTGNModal, (isVisible) => {
+	if (isVisible) {
+		// Populate with current game's TGN when modal opens
+		editableTGNContent.value = tgnContent.value;
+		tgnValidationState.value = 'valid'; // Current TGN is always valid
+		tgnValidationError.value = '';
+	}
+});
+
+
+// Lifecycle hooks
+onMounted(() => {
+	console.log("TrigoDemo component mounted");
+
+	// Try to restore game state from session storage
+	const restoredFromStorage = gameStore.loadFromSessionStorage();
+
+	// If not restored from storage, initialize new game
+	if (!restoredFromStorage) {
+		// Parse initial board shape
+		const shape = parseBoardShape(selectedBoardShape.value);
+
+		// Initialize game store
+		gameStore.initializeGame(shape);
+	} else {
+		// Update selected board shape to match restored state
+		selectedBoardShape.value = printBoardShape(boardShape.value);
+		console.log("Restored game state from session storage");
+	}
+
+	// Initialize Three.js viewport with current board shape
+	if (viewportCanvas.value) {
+		viewport = new TrigoViewport(viewportCanvas.value, boardShape.value, {
+			onStoneClick: handleStoneClick,
+			onPositionHover: handlePositionHover,
+			isPositionDroppable: isPositionDroppable,
+			onInspectGroup: handleInspectGroup
+		});
+		console.log("TrigoViewport initialized");
+
+		// Hide loading overlay after viewport is initialized
+		isLoading.value = false;
+
+		// If game was restored, sync viewport with restored board state
+		if (restoredFromStorage) {
+			syncViewportWithStore();
+			viewport.setGameActive(isGameActive.value);
+		}
+	}
+
+	// Start game automatically if not restored or was playing
+	if (!restoredFromStorage || gameStore.gameStatus === "idle") {
+		gameStore.startGame();
+		if (viewport) {
+			viewport.setGameActive(true);
+		}
+	}
+
+	// Add keyboard shortcuts
+	window.addEventListener("keydown", handleKeyPress);
+});
+
+
+onUnmounted(() => {
+	console.log("TrigoDemo component unmounted");
+
+	// Remove keyboard shortcuts
+	window.removeEventListener("keydown", handleKeyPress);
+
+	// Cleanup Three.js resources
+	if (viewport) {
+		viewport.destroy();
+		viewport = null;
+	}
+});
+
+
+// Keyboard shortcuts handler
+const handleKeyPress = (event: KeyboardEvent) => {
+	// Ignore if typing in an input field
+	if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
+		return;
+	}
+
+	switch (event.key.toLowerCase()) {
+		case "p": // Pass
+			if (gameStarted.value) {
+				pass();
+			}
+			break;
+		case "n": // New game
+			newGame();
+			break;
+		case "r": // Resign
+			if (gameStarted.value) {
+				resign();
+			}
+			break;
+		case "arrowleft": // Previous move
+			previousMove();
+			event.preventDefault();
+			break;
+		case "arrowright": // Next move
+			nextMove();
+			event.preventDefault();
+			break;
+		case "t": // Compute territory
+			if (gameStarted.value) {
+				computeTerritory();
+			}
+			break;
+	}
+};
+
+
+// TGN Modal Methods
+const selectAllTGN = (event: Event) => {
+	const textarea = event.target as HTMLTextAreaElement;
+	textarea.select();
+};
+
+const copyTGN = async () => {
+	try {
+		// Try modern clipboard API first
+		if (navigator.clipboard && navigator.clipboard.writeText) {
+			await navigator.clipboard.writeText(tgnContent.value);
+			alert('TGN copied to clipboard!');
+		} else {
+			// Fallback for older browsers or non-secure contexts
+			const textarea = document.createElement('textarea');
+			textarea.value = tgnContent.value;
+			textarea.style.position = 'fixed';
+			textarea.style.opacity = '0';
+			document.body.appendChild(textarea);
+			textarea.select();
+
+			try {
+				document.execCommand('copy');
+				alert('TGN copied to clipboard!');
+			} catch (fallbackErr) {
+				console.error('Fallback copy failed:', fallbackErr);
+				alert('Failed to copy TGN. Please select and copy manually.');
+			} finally {
+				document.body.removeChild(textarea);
+			}
+		}
+	} catch (err) {
+		console.error('Failed to copy TGN:', err);
+		alert('Failed to copy TGN. Please select and copy manually.');
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.trigo-view {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	background-color: #404040;
+	color: #e0e0e0;
+	overflow: hidden;
+
+	.view-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 1rem 2rem;
+		background: linear-gradient(135deg, #505050 0%, #454545 100%);
+		border-bottom: 2px solid #606060;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+		.logo-container {
+			display: flex;
+			align-items: center;
+			gap: 0.75rem;
+
+			.app-logo {
+				width: 40px;
+				height: 40px;
+				object-fit: contain;
+			}
+
+			.app-title {
+				font-size: 1.5rem;
+				font-weight: 700;
+				color: #e94560;
+			}
+		}
+
+		.view-title {
+			font-size: 1.5rem;
+			font-weight: 700;
+			margin: 0;
+			color: #e94560;
+		}
+
+		.view-status {
+			display: flex;
+			gap: 2rem;
+			align-items: center;
+
+			.turn-indicator {
+				padding: 0.5rem 1rem;
+				border-radius: 8px;
+				font-weight: 600;
+				transition: all 0.3s ease;
+
+				&.black {
+					background-color: #2c2c2c;
+					color: #fff;
+					box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
+				}
+
+				&.white {
+					background-color: #f0f0f0;
+					color: #000;
+					box-shadow: 0 0 10px rgba(240, 240, 240, 0.3);
+				}
+			}
+
+			.move-count {
+				font-size: 1rem;
+				color: #a0a0a0;
+			}
+		}
+	}
+
+	.view-body {
+		display: flex;
+		flex: 1;
+		overflow: hidden;
+
+		.board-container {
+			flex: 1;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background-color: #484848;
+			padding: 1rem;
+			position: relative;
+
+			.viewport-wrapper {
+				width: 100%;
+				height: 100%;
+				position: relative;
+				border-radius: 8px;
+				overflow: hidden;
+				box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+
+				.viewport-canvas {
+					width: 100%;
+					height: 100%;
+					display: block;
+					background-color: #50505a;
+				}
+
+				.viewport-overlay {
+					position: absolute;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 100%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					pointer-events: none;
+
+					.loading-text {
+						color: rgba(255, 255, 255, 0.5);
+						font-size: 1.2rem;
+						animation: pulse 2s ease-in-out infinite;
+					}
+				}
+
+			.inspect-tooltip {
+				position: absolute;
+				top: 1rem;
+				left: 1rem;
+				background-color: rgba(255, 241, 176, 0.95);
+				color: #111;
+				padding: 0.5rem 1rem;
+				border-radius: 8px;
+				font-size: 0.9rem;
+				font-weight: 600;
+				pointer-events: none;
+				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+				z-index: 100;
+
+				.tooltip-content {
+					display: flex;
+					align-items: center;
+					gap: 0.5rem;
+
+					.tooltip-label {
+						white-space: nowrap;
+					}
+
+					.tooltip-divider {
+						color: #888;
+					}
+				}
+			}
+			}
+		}
+
+		.controls-panel {
+			width: 320px;
+			background-color: #3a3a3a;
+			border-left: 2px solid #606060;
+			display: flex;
+			flex-direction: column;
+			overflow: hidden;
+			box-shadow: -4px 0 16px rgba(0, 0, 0, 0.3);
+
+			.panel-section {
+				padding: 0.8rem;
+				border-bottom: 1px solid #505050;
+				position: relative;
+
+				.section-title {
+					font-size: 0.7rem;
+					font-weight: 600;
+					color: #f0bcc5;
+					text-transform: uppercase;
+					letter-spacing: 1px;
+					position: absolute;
+					top: 0;
+					left: 0.8rem;
+					opacity: 0;
+					transition: opacity 0.3s ease-in;
+				}
+
+				&:hover .section-title {
+					opacity: 0.6;
+				}
+			}
+
+			.score-section {
+				// Default style (captured mode) - lighter background
+				.score-display {
+					display: flex;
+					gap: 0.5rem;
+					margin-bottom: 1rem;
+
+					.score-button {
+						flex: 1;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						gap: 0.5rem;
+						padding: 1rem;
+						border: 2px solid #505050;
+						border-radius: 8px;
+						background-color: #484848;
+						cursor: default;
+						transition: all 0.3s ease;
+
+						&.black {
+							.color-indicator {
+								background-color: #2c2c2c;
+								border: 2px solid #fff;
+							}
+						}
+
+						&.white {
+							.color-indicator {
+								background-color: #f0f0f0;
+								border: 2px solid #000;
+							}
+						}
+
+						.color-indicator {
+							width: 24px;
+							height: 24px;
+							border-radius: 50%;
+						}
+
+						.score {
+							font-size: 1.5rem;
+							font-weight: 700;
+							color: #e0e0e0;
+						}
+
+						&:disabled {
+							opacity: 0.5;
+						}
+					}
+				}
+
+				.compute-territory {
+					width: 100%;
+					padding: 0.75rem;
+					background-color: #505050;
+					color: #e0e0e0;
+					border: none;
+					border-radius: 8px;
+					font-weight: 600;
+					cursor: pointer;
+					transition: all 0.3s ease;
+
+					&:hover:not(:disabled) {
+						background-color: #606060;
+					}
+
+					&:disabled {
+						opacity: 0.5;
+						cursor: not-allowed;
+					}
+				}
+
+				// Territory mode - darker background with glow
+				&.show-territory {
+					.score-display .score-button {
+						background-color: #3a3a3a;
+						border-color: #606060;
+						box-shadow: 0 0 12px rgba(233, 69, 96, 0.3);
+					}
+				}
+			}
+
+
+
+			.routine-section {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				min-height: 0;
+
+				.routine-content {
+					flex: 1;
+					overflow-y: auto;
+					background-color: #2a2a2a;
+					border-radius: 8px;
+					padding: 0.5rem;
+
+					.move-list {
+						padding: 0;
+						margin: 0;
+
+						.move-row {
+							display: grid;
+							grid-template-columns: 30px 1fr 1fr;
+							gap: 0.25rem;
+							margin-bottom: 0.25rem;
+							align-items: center;
+
+							&.start-row {
+								grid-template-columns: 30px 1fr;
+								padding: 0.5rem;
+								border-radius: 4px;
+								cursor: pointer;
+								transition: all 0.2s ease;
+
+								&:hover {
+									background-color: #484848;
+								}
+
+								&.active {
+									background-color: #505050;
+									border-left: 3px solid #e94560;
+								}
+
+								.open-label {
+									font-weight: 700;
+									color: #e94560;
+									text-transform: uppercase;
+									letter-spacing: 1px;
+								}
+							}
+
+							.round-number {
+								color: #808080;
+								font-size: 0.9em;
+								text-align: right;
+								padding-right: 0.25rem;
+							}
+
+							.move-cell {
+								padding: 0.5rem;
+								border-radius: 4px;
+								cursor: pointer;
+								transition: all 0.2s ease;
+								display: flex;
+								align-items: center;
+								gap: 0.5rem;
+								background-color: #1a1a1a;
+
+								&:hover:not(.empty) {
+									background-color: #484848;
+								}
+
+								&.active {
+									background-color: #505050;
+									border-left: 3px solid #e94560;
+								}
+
+								&.empty {
+									background-color: transparent;
+									cursor: default;
+								}
+
+								.stone-icon {
+									width: 16px;
+									height: 16px;
+									border-radius: 50%;
+									flex-shrink: 0;
+
+									&.black {
+										background-color: #2c2c2c;
+										border: 2px solid #fff;
+									}
+
+									&.white {
+										background-color: #f0f0f0;
+										border: 2px solid #000;
+									}
+								}
+
+								.move-coords {
+									color: #a0a0a0;
+									font-family: monospace;
+									font-size: 0.9em;
+								}
+
+								.move-label {
+									color: #60a5fa;
+									font-weight: 600;
+									font-size: 0.85em;
+									text-transform: lowercase;
+								}
+							}
+						}
+					}
+				}
+			}
+
+			.controls-section {
+				.control-buttons {
+					display: flex;
+					flex-direction: column;
+					gap: 1rem;
+
+					.play-controls,
+					.history-controls {
+						display: flex;
+						gap: 0.5rem;
+					}
+
+					.btn {
+						padding: 0.75rem 1.5rem;
+						border: none;
+						border-radius: 8px;
+						font-weight: 600;
+						cursor: pointer;
+						transition: all 0.3s ease;
+						flex: 1;
+
+						&:disabled {
+							opacity: 0.5;
+							cursor: not-allowed;
+						}
+
+						&.btn-pass {
+							background-color: #2d4059;
+							color: #e0e0e0;
+
+							&:hover:not(:disabled) {
+								background-color: #3d5069;
+							}
+						}
+
+						&.btn-resign {
+							background-color: #c23b22;
+							color: #fff;
+
+							&:hover:not(:disabled) {
+								background-color: #d44b32;
+							}
+						}
+
+						&.btn-icon {
+							background-color: #505050;
+							color: #e0e0e0;
+							padding: 0.75rem;
+							font-size: 1.2rem;
+
+							&:hover:not(:disabled) {
+								background-color: #606060;
+							}
+						}
+					}
+				}
+			}
+
+			.settings-section {
+				.settings-content {
+					display: flex;
+					flex-direction: column;
+					gap: 1rem;
+
+					.setting-item {
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+
+						label {
+							font-weight: 600;
+							color: #a0a0a0;
+							display: flex;
+							align-items: center;
+							gap: 0.3rem;
+
+							.dirty-indicator {
+								color: #e94560;
+								font-size: 1.2rem;
+								font-weight: 700;
+								animation: pulse 2s ease-in-out infinite;
+							}
+						}
+
+						select {
+							padding: 0.5rem;
+							border: 2px solid #505050;
+							border-radius: 8px;
+							background-color: #484848;
+							color: #e0e0e0;
+							cursor: pointer;
+							font-weight: 600;
+
+							&:disabled {
+								opacity: 0.5;
+								cursor: not-allowed;
+							}
+						}
+					}
+
+					.btn-new-game {
+						width: 100%;
+						padding: 0.75rem;
+						background-color: #e94560;
+						color: #fff;
+						border: none;
+						border-radius: 8px;
+						font-weight: 700;
+						cursor: pointer;
+						transition: all 0.3s ease;
+						text-transform: uppercase;
+
+						&:hover {
+							background-color: #f95670;
+							transform: translateY(-2px);
+							box-shadow: 0 4px 12px rgba(233, 69, 96, 0.4);
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+/* TGN Button and Modal Styles */
+.btn-view-tgn {
+	position: absolute;
+	top: 0;
+	right: 0.8rem;
+	padding: 0.25rem 0.5rem;
+	background-color: transparent;
+	color: #a0a0a0;
+	border: 1px solid #505050;
+	border-radius: 4px;
+	font-size: 0.65rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	cursor: pointer;
+	transition: all 0.2s ease;
+	opacity: 0;
+
+	&:hover {
+		background-color: #505050;
+		color: #e0e0e0;
+		border-color: #606060;
+	}
+}
+
+.routine-section:hover .btn-view-tgn {
+	opacity: 1;
+}
+
+.tgn-modal {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	background-color: rgba(0, 0, 0, 0.7);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 1000;
+	backdrop-filter: blur(4px);
+
+	.tgn-modal-content {
+		background-color: #3a3a3a;
+		border-radius: 12px;
+		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+		width: 90%;
+		max-width: 600px;
+		max-height: 80vh;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+
+		.tgn-modal-header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 1rem 1.5rem;
+			background-color: #2a2a2a;
+			border-bottom: 1px solid #505050;
+
+			h3 {
+				margin: 0;
+				font-size: 1.2rem;
+				font-weight: 600;
+				color: #e0e0e0;
+			}
+
+			.tgn-status {
+				font-size: 0.85rem;
+				font-weight: 600;
+				padding: 0.4rem 0.8rem;
+				border-radius: 4px;
+				white-space: nowrap;
+				transition: all 0.3s ease;
+
+				&.idle {
+					background-color: #505050;
+					color: #a0a0a0;
+				}
+
+				&.valid {
+					background-color: rgba(74, 222, 128, 0.15);
+					color: #4ade80;
+					border: 1px solid rgba(74, 222, 128, 0.4);
+				}
+
+				&.invalid {
+					background-color: rgba(239, 68, 68, 0.15);
+					color: #ef4444;
+					border: 1px solid rgba(239, 68, 68, 0.4);
+				}
+			}
+
+			.btn-close {
+				background: none;
+				border: none;
+				color: #a0a0a0;
+				font-size: 1.5rem;
+				cursor: pointer;
+				padding: 0;
+				width: 32px;
+				height: 32px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border-radius: 4px;
+				transition: all 0.2s ease;
+
+				&:hover {
+					background-color: #505050;
+					color: #e0e0e0;
+				}
+			}
+		}
+
+		.tgn-modal-body {
+			flex: 1;
+			padding: 1.5rem;
+			overflow: auto;
+
+			.tgn-textarea {
+				width: 100%;
+				height: 100%;
+				min-height: 300px;
+				background-color: #2a2a2a;
+				color: #e0e0e0;
+				border: 2px solid #505050;
+				border-radius: 8px;
+				padding: 1rem;
+				font-family: 'Courier New', Courier, monospace;
+				font-size: 0.9rem;
+				line-height: 1.6;
+				resize: vertical;
+				cursor: text;
+				transition: border-color 0.3s ease, box-shadow 0.3s ease;
+
+				&:focus {
+					outline: none;
+					border-color: #e94560;
+				}
+
+				&.valid {
+					border-color: #4ade80;
+					box-shadow: 0 0 8px rgba(74, 222, 128, 0.2);
+				}
+
+				&.invalid {
+					border-color: #ef4444;
+					box-shadow: 0 0 8px rgba(239, 68, 68, 0.2);
+				}
+
+				&.idle {
+					border-color: #505050;
+				}
+			}
+		}
+
+		.tgn-modal-footer {
+			display: flex;
+			gap: 0.5rem;
+			padding: 1rem 1.5rem;
+			background-color: #2a2a2a;
+			border-top: 1px solid #505050;
+
+			.btn {
+				flex: 1;
+				padding: 0.75rem;
+				border: none;
+				border-radius: 8px;
+				font-weight: 600;
+				cursor: pointer;
+				transition: all 0.3s ease;
+
+				&:disabled {
+					opacity: 0.5;
+					cursor: not-allowed;
+				}
+
+				&.btn-apply {
+					background-color: #4ade80;
+					color: #000;
+
+					&:hover:not(:disabled) {
+						background-color: #22c55e;
+						transform: translateY(-2px);
+						box-shadow: 0 4px 12px rgba(74, 222, 128, 0.4);
+					}
+				}
+
+				&.btn-copy {
+					background-color: #e94560;
+					color: #fff;
+
+					&:hover {
+						background-color: #f95670;
+						transform: translateY(-2px);
+						box-shadow: 0 4px 12px rgba(233, 69, 96, 0.4);
+					}
+				}
+
+				&.btn-close-modal {
+					background-color: #505050;
+					color: #e0e0e0;
+
+					&:hover {
+						background-color: #606060;
+					}
+				}
+			}
+		}
+	}
+}
+
+@keyframes pulse {
+	0%,
+	100% {
+		opacity: 0.5;
+	}
+	50% {
+		opacity: 1;
+	}
+}
+
+/* Scrollbar styling */
+.controls-panel {
+	&::-webkit-scrollbar {
+		width: 8px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: #2a2a2a;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: #505050;
+		border-radius: 4px;
+
+		&:hover {
+			background: #606060;
+		}
+	}
+}
+
+.routine-content {
+	&::-webkit-scrollbar {
+		width: 6px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: #2a2a2a;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: #505050;
+		border-radius: 3px;
+
+		&:hover {
+			background: #606060;
+		}
+	}
+}
+</style>

trigo-web/app/test_capture.js

@@ -0,0 +1,23 @@
+const { TrigoGame } = require('../../inc/trigo/trigoGame.js');
+const { StoneType } = require('../../inc/trigo/game.js');
+
+const game = new TrigoGame({ x: 5, y: 5, z: 1 });
+game.startGame();
+
+console.log("=== Testing 2D Capture ===");
+game.drop({ x: 2, y: 2, z: 0 }); // Black
+console.log("After move 1, board[3][2][0]:", game.getBoard()[3][2][0]);
+game.drop({ x: 3, y: 2, z: 0 }); // White (target)
+console.log("After move 2, board[3][2][0]:", game.getBoard()[3][2][0]);
+game.drop({ x: 4, y: 2, z: 0 }); // Black
+console.log("After move 3, board[3][2][0]:", game.getBoard()[3][2][0]);
+game.drop({ x: 3, y: 1, z: 0 }); // White elsewhere
+game.drop({ x: 3, y: 3, z: 0 }); // Black
+console.log("After move 5, board[3][2][0]:", game.getBoard()[3][2][0]);
+game.drop({ x: 1, y: 1, z: 0 }); // White elsewhere
+game.drop({ x: 2, y: 1, z: 0 }); // Black - should capture
+
+console.log("\nAfter final move:");
+console.log("board[3][2][0]:", game.getBoard()[3][2][0], "(should be 0/EMPTY if captured)");
+console.log("Last step capturedPositions:", game.getLastStep()?.capturedPositions);
+console.log("Captured counts:", game.getCapturedCounts());

trigo-web/app/vite.config.ts

@@ -0,0 +1,42 @@
+import { defineConfig, loadEnv } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { fileURLToPath, URL } from "node:url";
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+	// Load env file based on `mode` in the current working directory.
+	const env = loadEnv(mode, process.cwd(), "");
+
+	return {
+		plugins: [vue()],
+		// Point to parent project's public directory
+		publicDir: fileURLToPath(new URL("../public", import.meta.url)),
+		resolve: {
+			alias: {
+				"@": fileURLToPath(new URL("./src", import.meta.url)),
+				"@inc": fileURLToPath(new URL("../inc", import.meta.url))
+			}
+		},
+		server: {
+			host: env.VITE_HOST || "localhost",
+			port: parseInt(env.VITE_PORT) || 5173,
+			strictPort: true,
+			open: false
+		},
+		build: {
+			rollupOptions: {
+				external: ["/lib/tgnParser.cjs"]
+			}
+		},
+		css: {
+			preprocessorOptions: {
+				scss: {
+					api: "modern" // Use modern Sass API
+				}
+			}
+		},
+		define: {
+			"process.env": {}
+		}
+	};
+});

trigo-web/backend/.env

@@ -0,0 +1,3 @@
+PORT=3000
+CLIENT_URL=http://localhost:5173
+NODE_ENV=development

trigo-web/backend/package-lock.json

@@ -0,0 +1,1663 @@
+{
+	"name": "trigo-backend",
+	"version": "1.0.0",
+	"lockfileVersion": 3,
+	"requires": true,
+	"packages": {
+		"": {
+			"name": "trigo-backend",
+			"version": "1.0.0",
+			"license": "MIT",
+			"dependencies": {
+				"@types/uuid": "^11.0.0",
+				"cors": "^2.8.5",
+				"dotenv": "^16.6.1",
+				"express": "^4.21.2",
+				"socket.io": "^4.8.1",
+				"uuid": "^13.0.0"
+			},
+			"devDependencies": {
+				"@types/cors": "^2.8.13",
+				"@types/express": "^4.17.17",
+				"@types/node": "^20.5.0",
+				"nodemon": "^3.0.1",
+				"ts-node": "^10.9.1",
+				"typescript": "^5.2.2"
+			}
+		},
+		"node_modules/@cspotcode/source-map-support": {
+			"version": "0.8.1",
+			"resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
+			"integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
+			"dev": true,
+			"dependencies": {
+				"@jridgewell/trace-mapping": "0.3.9"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@jridgewell/resolve-uri": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+			"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+			"dev": true,
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/@jridgewell/sourcemap-codec": {
+			"version": "1.5.5",
+			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+			"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+			"dev": true
+		},
+		"node_modules/@jridgewell/trace-mapping": {
+			"version": "0.3.9",
+			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
+			"integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+			"dev": true,
+			"dependencies": {
+				"@jridgewell/resolve-uri": "^3.0.3",
+				"@jridgewell/sourcemap-codec": "^1.4.10"
+			}
+		},
+		"node_modules/@socket.io/component-emitter": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+			"integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA=="
+		},
+		"node_modules/@tsconfig/node10": {
+			"version": "1.0.11",
+			"resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
+			"integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
+			"dev": true
+		},
+		"node_modules/@tsconfig/node12": {
+			"version": "1.0.11",
+			"resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
+			"integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
+			"dev": true
+		},
+		"node_modules/@tsconfig/node14": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
+			"integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
+			"dev": true
+		},
+		"node_modules/@tsconfig/node16": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
+			"integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
+			"dev": true
+		},
+		"node_modules/@types/body-parser": {
+			"version": "1.19.6",
+			"resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.6.tgz",
+			"integrity": "sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==",
+			"dev": true,
+			"dependencies": {
+				"@types/connect": "*",
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/connect": {
+			"version": "3.4.38",
+			"resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
+			"integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==",
+			"dev": true,
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/cors": {
+			"version": "2.8.19",
+			"resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.19.tgz",
+			"integrity": "sha512-mFNylyeyqN93lfe/9CSxOGREz8cpzAhH+E93xJ4xWQf62V8sQ/24reV2nyzUWM6H6Xji+GGHpkbLe7pVoUEskg==",
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/express": {
+			"version": "4.17.23",
+			"resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.23.tgz",
+			"integrity": "sha512-Crp6WY9aTYP3qPi2wGDo9iUe/rceX01UMhnF1jmwDcKCFM6cx7YhGP/Mpr3y9AASpfHixIG0E6azCcL5OcDHsQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/body-parser": "*",
+				"@types/express-serve-static-core": "^4.17.33",
+				"@types/qs": "*",
+				"@types/serve-static": "*"
+			}
+		},
+		"node_modules/@types/express-serve-static-core": {
+			"version": "4.19.7",
+			"resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.7.tgz",
+			"integrity": "sha512-FvPtiIf1LfhzsaIXhv/PHan/2FeQBbtBDtfX2QfvPxdUelMDEckK08SM6nqo1MIZY3RUlfA+HV8+hFUSio78qg==",
+			"dev": true,
+			"dependencies": {
+				"@types/node": "*",
+				"@types/qs": "*",
+				"@types/range-parser": "*",
+				"@types/send": "*"
+			}
+		},
+		"node_modules/@types/http-errors": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.5.tgz",
+			"integrity": "sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg==",
+			"dev": true
+		},
+		"node_modules/@types/mime": {
+			"version": "1.3.5",
+			"resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
+			"integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==",
+			"dev": true
+		},
+		"node_modules/@types/node": {
+			"version": "20.19.23",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.23.tgz",
+			"integrity": "sha512-yIdlVVVHXpmqRhtyovZAcSy0MiPcYWGkoO4CGe/+jpP0hmNuihm4XhHbADpK++MsiLHP5MVlv+bcgdF99kSiFQ==",
+			"dependencies": {
+				"undici-types": "~6.21.0"
+			}
+		},
+		"node_modules/@types/qs": {
+			"version": "6.14.0",
+			"resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz",
+			"integrity": "sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==",
+			"dev": true
+		},
+		"node_modules/@types/range-parser": {
+			"version": "1.2.7",
+			"resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
+			"integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
+			"dev": true
+		},
+		"node_modules/@types/send": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@types/send/-/send-1.2.0.tgz",
+			"integrity": "sha512-zBF6vZJn1IaMpg3xUF25VK3gd3l8zwE0ZLRX7dsQyQi+jp4E8mMDJNGDYnYse+bQhYwWERTxVwHpi3dMOq7RKQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/serve-static": {
+			"version": "1.15.9",
+			"resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.9.tgz",
+			"integrity": "sha512-dOTIuqpWLyl3BBXU3maNQsS4A3zuuoYRNIvYSxxhebPfXg2mzWQEPne/nlJ37yOse6uGgR386uTpdsx4D0QZWA==",
+			"dev": true,
+			"dependencies": {
+				"@types/http-errors": "*",
+				"@types/node": "*",
+				"@types/send": "<1"
+			}
+		},
+		"node_modules/@types/serve-static/node_modules/@types/send": {
+			"version": "0.17.5",
+			"resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.5.tgz",
+			"integrity": "sha512-z6F2D3cOStZvuk2SaP6YrwkNO65iTZcwA2ZkSABegdkAh/lf+Aa/YQndZVfmEXT5vgAp6zv06VQ3ejSVjAny4w==",
+			"dev": true,
+			"dependencies": {
+				"@types/mime": "^1",
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/uuid": {
+			"version": "11.0.0",
+			"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-11.0.0.tgz",
+			"integrity": "sha512-HVyk8nj2m+jcFRNazzqyVKiZezyhDKrGUA3jlEcg/nZ6Ms+qHwocba1Y/AaVaznJTAM9xpdFSh+ptbNrhOGvZA==",
+			"deprecated": "This is a stub types definition. uuid provides its own type definitions, so you do not need this installed.",
+			"dependencies": {
+				"uuid": "*"
+			}
+		},
+		"node_modules/accepts": {
+			"version": "1.3.8",
+			"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+			"integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+			"dependencies": {
+				"mime-types": "~2.1.34",
+				"negotiator": "0.6.3"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/acorn": {
+			"version": "8.15.0",
+			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+			"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+			"dev": true,
+			"bin": {
+				"acorn": "bin/acorn"
+			},
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
+		"node_modules/acorn-walk": {
+			"version": "8.3.4",
+			"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
+			"integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
+			"dev": true,
+			"dependencies": {
+				"acorn": "^8.11.0"
+			},
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
+		"node_modules/anymatch": {
+			"version": "3.1.3",
+			"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+			"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+			"dev": true,
+			"dependencies": {
+				"normalize-path": "^3.0.0",
+				"picomatch": "^2.0.4"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/arg": {
+			"version": "4.1.3",
+			"resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+			"integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
+			"dev": true
+		},
+		"node_modules/array-flatten": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+			"integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
+		},
+		"node_modules/balanced-match": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+			"dev": true
+		},
+		"node_modules/base64id": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
+			"integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==",
+			"engines": {
+				"node": "^4.5.0 || >= 5.9"
+			}
+		},
+		"node_modules/binary-extensions": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+			"integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/body-parser": {
+			"version": "1.20.3",
+			"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
+			"integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
+			"dependencies": {
+				"bytes": "3.1.2",
+				"content-type": "~1.0.5",
+				"debug": "2.6.9",
+				"depd": "2.0.0",
+				"destroy": "1.2.0",
+				"http-errors": "2.0.0",
+				"iconv-lite": "0.4.24",
+				"on-finished": "2.4.1",
+				"qs": "6.13.0",
+				"raw-body": "2.5.2",
+				"type-is": "~1.6.18",
+				"unpipe": "1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.8",
+				"npm": "1.2.8000 || >= 1.4.16"
+			}
+		},
+		"node_modules/brace-expansion": {
+			"version": "1.1.12",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+			"integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+			"dev": true,
+			"dependencies": {
+				"balanced-match": "^1.0.0",
+				"concat-map": "0.0.1"
+			}
+		},
+		"node_modules/braces": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+			"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+			"dev": true,
+			"dependencies": {
+				"fill-range": "^7.1.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/bytes": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+			"integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/call-bind-apply-helpers": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+			"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+			"dependencies": {
+				"es-errors": "^1.3.0",
+				"function-bind": "^1.1.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/call-bound": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+			"integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+			"dependencies": {
+				"call-bind-apply-helpers": "^1.0.2",
+				"get-intrinsic": "^1.3.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/chokidar": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+			"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+			"dev": true,
+			"dependencies": {
+				"anymatch": "~3.1.2",
+				"braces": "~3.0.2",
+				"glob-parent": "~5.1.2",
+				"is-binary-path": "~2.1.0",
+				"is-glob": "~4.0.1",
+				"normalize-path": "~3.0.0",
+				"readdirp": "~3.6.0"
+			},
+			"engines": {
+				"node": ">= 8.10.0"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			},
+			"optionalDependencies": {
+				"fsevents": "~2.3.2"
+			}
+		},
+		"node_modules/concat-map": {
+			"version": "0.0.1",
+			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+			"dev": true
+		},
+		"node_modules/content-disposition": {
+			"version": "0.5.4",
+			"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+			"integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+			"dependencies": {
+				"safe-buffer": "5.2.1"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/content-type": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+			"integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/cookie": {
+			"version": "0.7.1",
+			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
+			"integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/cookie-signature": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+			"integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
+		},
+		"node_modules/cors": {
+			"version": "2.8.5",
+			"resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+			"integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+			"dependencies": {
+				"object-assign": "^4",
+				"vary": "^1"
+			},
+			"engines": {
+				"node": ">= 0.10"
+			}
+		},
+		"node_modules/create-require": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+			"integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
+			"dev": true
+		},
+		"node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"dependencies": {
+				"ms": "2.0.0"
+			}
+		},
+		"node_modules/depd": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+			"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/destroy": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+			"integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+			"engines": {
+				"node": ">= 0.8",
+				"npm": "1.2.8000 || >= 1.4.16"
+			}
+		},
+		"node_modules/diff": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+			"integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.3.1"
+			}
+		},
+		"node_modules/dotenv": {
+			"version": "16.6.1",
+			"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
+			"integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://dotenvx.com"
+			}
+		},
+		"node_modules/dunder-proto": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+			"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+			"dependencies": {
+				"call-bind-apply-helpers": "^1.0.1",
+				"es-errors": "^1.3.0",
+				"gopd": "^1.2.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/ee-first": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+			"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
+		},
+		"node_modules/encodeurl": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+			"integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/engine.io": {
+			"version": "6.6.4",
+			"resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.6.4.tgz",
+			"integrity": "sha512-ZCkIjSYNDyGn0R6ewHDtXgns/Zre/NT6Agvq1/WobF7JXgFff4SeDroKiCO3fNJreU9YG429Sc81o4w5ok/W5g==",
+			"dependencies": {
+				"@types/cors": "^2.8.12",
+				"@types/node": ">=10.0.0",
+				"accepts": "~1.3.4",
+				"base64id": "2.0.0",
+				"cookie": "~0.7.2",
+				"cors": "~2.8.5",
+				"debug": "~4.3.1",
+				"engine.io-parser": "~5.2.1",
+				"ws": "~8.17.1"
+			},
+			"engines": {
+				"node": ">=10.2.0"
+			}
+		},
+		"node_modules/engine.io-parser": {
+			"version": "5.2.3",
+			"resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+			"integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
+		"node_modules/engine.io/node_modules/cookie": {
+			"version": "0.7.2",
+			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+			"integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/engine.io/node_modules/debug": {
+			"version": "4.3.7",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+			"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+			"dependencies": {
+				"ms": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/engine.io/node_modules/ms": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+		},
+		"node_modules/es-define-property": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+			"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/es-errors": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+			"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/es-object-atoms": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+			"integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+			"dependencies": {
+				"es-errors": "^1.3.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/escape-html": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+			"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+		},
+		"node_modules/etag": {
+			"version": "1.8.1",
+			"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+			"integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/express": {
+			"version": "4.21.2",
+			"resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
+			"integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
+			"dependencies": {
+				"accepts": "~1.3.8",
+				"array-flatten": "1.1.1",
+				"body-parser": "1.20.3",
+				"content-disposition": "0.5.4",
+				"content-type": "~1.0.4",
+				"cookie": "0.7.1",
+				"cookie-signature": "1.0.6",
+				"debug": "2.6.9",
+				"depd": "2.0.0",
+				"encodeurl": "~2.0.0",
+				"escape-html": "~1.0.3",
+				"etag": "~1.8.1",
+				"finalhandler": "1.3.1",
+				"fresh": "0.5.2",
+				"http-errors": "2.0.0",
+				"merge-descriptors": "1.0.3",
+				"methods": "~1.1.2",
+				"on-finished": "2.4.1",
+				"parseurl": "~1.3.3",
+				"path-to-regexp": "0.1.12",
+				"proxy-addr": "~2.0.7",
+				"qs": "6.13.0",
+				"range-parser": "~1.2.1",
+				"safe-buffer": "5.2.1",
+				"send": "0.19.0",
+				"serve-static": "1.16.2",
+				"setprototypeof": "1.2.0",
+				"statuses": "2.0.1",
+				"type-is": "~1.6.18",
+				"utils-merge": "1.0.1",
+				"vary": "~1.1.2"
+			},
+			"engines": {
+				"node": ">= 0.10.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
+		"node_modules/fill-range": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+			"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+			"dev": true,
+			"dependencies": {
+				"to-regex-range": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/finalhandler": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+			"integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
+			"dependencies": {
+				"debug": "2.6.9",
+				"encodeurl": "~2.0.0",
+				"escape-html": "~1.0.3",
+				"on-finished": "2.4.1",
+				"parseurl": "~1.3.3",
+				"statuses": "2.0.1",
+				"unpipe": "~1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/forwarded": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+			"integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/fresh": {
+			"version": "0.5.2",
+			"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+			"integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/fsevents": {
+			"version": "2.3.3",
+			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+			"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+			"dev": true,
+			"hasInstallScript": true,
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+			}
+		},
+		"node_modules/function-bind": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+			"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/get-intrinsic": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+			"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+			"dependencies": {
+				"call-bind-apply-helpers": "^1.0.2",
+				"es-define-property": "^1.0.1",
+				"es-errors": "^1.3.0",
+				"es-object-atoms": "^1.1.1",
+				"function-bind": "^1.1.2",
+				"get-proto": "^1.0.1",
+				"gopd": "^1.2.0",
+				"has-symbols": "^1.1.0",
+				"hasown": "^2.0.2",
+				"math-intrinsics": "^1.1.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/get-proto": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+			"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+			"dependencies": {
+				"dunder-proto": "^1.0.1",
+				"es-object-atoms": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/glob-parent": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+			"dev": true,
+			"dependencies": {
+				"is-glob": "^4.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/gopd": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+			"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/has-flag": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+			"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+			"dev": true,
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/has-symbols": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+			"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/hasown": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+			"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+			"dependencies": {
+				"function-bind": "^1.1.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/http-errors": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+			"integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+			"dependencies": {
+				"depd": "2.0.0",
+				"inherits": "2.0.4",
+				"setprototypeof": "1.2.0",
+				"statuses": "2.0.1",
+				"toidentifier": "1.0.1"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/iconv-lite": {
+			"version": "0.4.24",
+			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+			"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+			"dependencies": {
+				"safer-buffer": ">= 2.1.2 < 3"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/ignore-by-default": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
+			"integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==",
+			"dev": true
+		},
+		"node_modules/inherits": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+		},
+		"node_modules/ipaddr.js": {
+			"version": "1.9.1",
+			"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+			"integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+			"engines": {
+				"node": ">= 0.10"
+			}
+		},
+		"node_modules/is-binary-path": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+			"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+			"dev": true,
+			"dependencies": {
+				"binary-extensions": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/is-extglob": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+			"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-glob": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+			"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+			"dev": true,
+			"dependencies": {
+				"is-extglob": "^2.1.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-number": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+			"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.12.0"
+			}
+		},
+		"node_modules/make-error": {
+			"version": "1.3.6",
+			"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+			"integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+			"dev": true
+		},
+		"node_modules/math-intrinsics": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+			"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/media-typer": {
+			"version": "0.3.0",
+			"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+			"integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/merge-descriptors": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+			"integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/methods": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+			"integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/mime": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+			"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+			"bin": {
+				"mime": "cli.js"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/mime-db": {
+			"version": "1.52.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/mime-types": {
+			"version": "2.1.35",
+			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+			"dependencies": {
+				"mime-db": "1.52.0"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/minimatch": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+			"dev": true,
+			"dependencies": {
+				"brace-expansion": "^1.1.7"
+			},
+			"engines": {
+				"node": "*"
+			}
+		},
+		"node_modules/ms": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+		},
+		"node_modules/negotiator": {
+			"version": "0.6.3",
+			"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+			"integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/nodemon": {
+			"version": "3.1.10",
+			"resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.10.tgz",
+			"integrity": "sha512-WDjw3pJ0/0jMFmyNDp3gvY2YizjLmmOUQo6DEBY+JgdvW/yQ9mEeSw6H5ythl5Ny2ytb7f9C2nIbjSxMNzbJXw==",
+			"dev": true,
+			"dependencies": {
+				"chokidar": "^3.5.2",
+				"debug": "^4",
+				"ignore-by-default": "^1.0.1",
+				"minimatch": "^3.1.2",
+				"pstree.remy": "^1.1.8",
+				"semver": "^7.5.3",
+				"simple-update-notifier": "^2.0.0",
+				"supports-color": "^5.5.0",
+				"touch": "^3.1.0",
+				"undefsafe": "^2.0.5"
+			},
+			"bin": {
+				"nodemon": "bin/nodemon.js"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/nodemon"
+			}
+		},
+		"node_modules/nodemon/node_modules/debug": {
+			"version": "4.4.3",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+			"integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+			"dev": true,
+			"dependencies": {
+				"ms": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/nodemon/node_modules/ms": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+			"dev": true
+		},
+		"node_modules/normalize-path": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+			"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/object-assign": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+			"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/object-inspect": {
+			"version": "1.13.4",
+			"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+			"integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/on-finished": {
+			"version": "2.4.1",
+			"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+			"integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+			"dependencies": {
+				"ee-first": "1.1.1"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/parseurl": {
+			"version": "1.3.3",
+			"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+			"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/path-to-regexp": {
+			"version": "0.1.12",
+			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+			"integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ=="
+		},
+		"node_modules/picomatch": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+			"dev": true,
+			"engines": {
+				"node": ">=8.6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
+			}
+		},
+		"node_modules/proxy-addr": {
+			"version": "2.0.7",
+			"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+			"integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+			"dependencies": {
+				"forwarded": "0.2.0",
+				"ipaddr.js": "1.9.1"
+			},
+			"engines": {
+				"node": ">= 0.10"
+			}
+		},
+		"node_modules/pstree.remy": {
+			"version": "1.1.8",
+			"resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
+			"integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
+			"dev": true
+		},
+		"node_modules/qs": {
+			"version": "6.13.0",
+			"resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+			"integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
+			"dependencies": {
+				"side-channel": "^1.0.6"
+			},
+			"engines": {
+				"node": ">=0.6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/range-parser": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+			"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/raw-body": {
+			"version": "2.5.2",
+			"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+			"integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
+			"dependencies": {
+				"bytes": "3.1.2",
+				"http-errors": "2.0.0",
+				"iconv-lite": "0.4.24",
+				"unpipe": "1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/readdirp": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+			"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+			"dev": true,
+			"dependencies": {
+				"picomatch": "^2.2.1"
+			},
+			"engines": {
+				"node": ">=8.10.0"
+			}
+		},
+		"node_modules/safe-buffer": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+			"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			]
+		},
+		"node_modules/safer-buffer": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+		},
+		"node_modules/semver": {
+			"version": "7.7.3",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+			"integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+			"dev": true,
+			"bin": {
+				"semver": "bin/semver.js"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/send": {
+			"version": "0.19.0",
+			"resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+			"integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
+			"dependencies": {
+				"debug": "2.6.9",
+				"depd": "2.0.0",
+				"destroy": "1.2.0",
+				"encodeurl": "~1.0.2",
+				"escape-html": "~1.0.3",
+				"etag": "~1.8.1",
+				"fresh": "0.5.2",
+				"http-errors": "2.0.0",
+				"mime": "1.6.0",
+				"ms": "2.1.3",
+				"on-finished": "2.4.1",
+				"range-parser": "~1.2.1",
+				"statuses": "2.0.1"
+			},
+			"engines": {
+				"node": ">= 0.8.0"
+			}
+		},
+		"node_modules/send/node_modules/encodeurl": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+			"integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/send/node_modules/ms": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+		},
+		"node_modules/serve-static": {
+			"version": "1.16.2",
+			"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+			"integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
+			"dependencies": {
+				"encodeurl": "~2.0.0",
+				"escape-html": "~1.0.3",
+				"parseurl": "~1.3.3",
+				"send": "0.19.0"
+			},
+			"engines": {
+				"node": ">= 0.8.0"
+			}
+		},
+		"node_modules/setprototypeof": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+			"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
+		},
+		"node_modules/side-channel": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+			"integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+			"dependencies": {
+				"es-errors": "^1.3.0",
+				"object-inspect": "^1.13.3",
+				"side-channel-list": "^1.0.0",
+				"side-channel-map": "^1.0.1",
+				"side-channel-weakmap": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/side-channel-list": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+			"integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+			"dependencies": {
+				"es-errors": "^1.3.0",
+				"object-inspect": "^1.13.3"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/side-channel-map": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+			"integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+			"dependencies": {
+				"call-bound": "^1.0.2",
+				"es-errors": "^1.3.0",
+				"get-intrinsic": "^1.2.5",
+				"object-inspect": "^1.13.3"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/side-channel-weakmap": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+			"integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+			"dependencies": {
+				"call-bound": "^1.0.2",
+				"es-errors": "^1.3.0",
+				"get-intrinsic": "^1.2.5",
+				"object-inspect": "^1.13.3",
+				"side-channel-map": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/simple-update-notifier": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
+			"integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
+			"dev": true,
+			"dependencies": {
+				"semver": "^7.5.3"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/socket.io": {
+			"version": "4.8.1",
+			"resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.8.1.tgz",
+			"integrity": "sha512-oZ7iUCxph8WYRHHcjBEc9unw3adt5CmSNlppj/5Q4k2RIrhl8Z5yY2Xr4j9zj0+wzVZ0bxmYoGSzKJnRl6A4yg==",
+			"dependencies": {
+				"accepts": "~1.3.4",
+				"base64id": "~2.0.0",
+				"cors": "~2.8.5",
+				"debug": "~4.3.2",
+				"engine.io": "~6.6.0",
+				"socket.io-adapter": "~2.5.2",
+				"socket.io-parser": "~4.2.4"
+			},
+			"engines": {
+				"node": ">=10.2.0"
+			}
+		},
+		"node_modules/socket.io-adapter": {
+			"version": "2.5.5",
+			"resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.5.tgz",
+			"integrity": "sha512-eLDQas5dzPgOWCk9GuuJC2lBqItuhKI4uxGgo9aIV7MYbk2h9Q6uULEh8WBzThoI7l+qU9Ast9fVUmkqPP9wYg==",
+			"dependencies": {
+				"debug": "~4.3.4",
+				"ws": "~8.17.1"
+			}
+		},
+		"node_modules/socket.io-adapter/node_modules/debug": {
+			"version": "4.3.7",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+			"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+			"dependencies": {
+				"ms": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/socket.io-adapter/node_modules/ms": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+		},
+		"node_modules/socket.io-parser": {
+			"version": "4.2.4",
+			"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+			"integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+			"dependencies": {
+				"@socket.io/component-emitter": "~3.1.0",
+				"debug": "~4.3.1"
+			},
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
+		"node_modules/socket.io-parser/node_modules/debug": {
+			"version": "4.3.7",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+			"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+			"dependencies": {
+				"ms": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/socket.io-parser/node_modules/ms": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+		},
+		"node_modules/socket.io/node_modules/debug": {
+			"version": "4.3.7",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+			"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+			"dependencies": {
+				"ms": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/socket.io/node_modules/ms": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+		},
+		"node_modules/statuses": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+			"integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/supports-color": {
+			"version": "5.5.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+			"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+			"dev": true,
+			"dependencies": {
+				"has-flag": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/to-regex-range": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+			"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+			"dev": true,
+			"dependencies": {
+				"is-number": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=8.0"
+			}
+		},
+		"node_modules/toidentifier": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+			"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+			"engines": {
+				"node": ">=0.6"
+			}
+		},
+		"node_modules/touch": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/touch/-/touch-3.1.1.tgz",
+			"integrity": "sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==",
+			"dev": true,
+			"bin": {
+				"nodetouch": "bin/nodetouch.js"
+			}
+		},
+		"node_modules/ts-node": {
+			"version": "10.9.2",
+			"resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
+			"integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
+			"dev": true,
+			"dependencies": {
+				"@cspotcode/source-map-support": "^0.8.0",
+				"@tsconfig/node10": "^1.0.7",
+				"@tsconfig/node12": "^1.0.7",
+				"@tsconfig/node14": "^1.0.0",
+				"@tsconfig/node16": "^1.0.2",
+				"acorn": "^8.4.1",
+				"acorn-walk": "^8.1.1",
+				"arg": "^4.1.0",
+				"create-require": "^1.1.0",
+				"diff": "^4.0.1",
+				"make-error": "^1.1.1",
+				"v8-compile-cache-lib": "^3.0.1",
+				"yn": "3.1.1"
+			},
+			"bin": {
+				"ts-node": "dist/bin.js",
+				"ts-node-cwd": "dist/bin-cwd.js",
+				"ts-node-esm": "dist/bin-esm.js",
+				"ts-node-script": "dist/bin-script.js",
+				"ts-node-transpile-only": "dist/bin-transpile.js",
+				"ts-script": "dist/bin-script-deprecated.js"
+			},
+			"peerDependencies": {
+				"@swc/core": ">=1.2.50",
+				"@swc/wasm": ">=1.2.50",
+				"@types/node": "*",
+				"typescript": ">=2.7"
+			},
+			"peerDependenciesMeta": {
+				"@swc/core": {
+					"optional": true
+				},
+				"@swc/wasm": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/type-is": {
+			"version": "1.6.18",
+			"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+			"integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+			"dependencies": {
+				"media-typer": "0.3.0",
+				"mime-types": "~2.1.24"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/typescript": {
+			"version": "5.9.3",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+			"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+			"dev": true,
+			"bin": {
+				"tsc": "bin/tsc",
+				"tsserver": "bin/tsserver"
+			},
+			"engines": {
+				"node": ">=14.17"
+			}
+		},
+		"node_modules/undefsafe": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
+			"integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
+			"dev": true
+		},
+		"node_modules/undici-types": {
+			"version": "6.21.0",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+			"integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="
+		},
+		"node_modules/unpipe": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+			"integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/utils-merge": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+			"integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+			"engines": {
+				"node": ">= 0.4.0"
+			}
+		},
+		"node_modules/uuid": {
+			"version": "13.0.0",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-13.0.0.tgz",
+			"integrity": "sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w==",
+			"funding": [
+				"https://github.com/sponsors/broofa",
+				"https://github.com/sponsors/ctavan"
+			],
+			"bin": {
+				"uuid": "dist-node/bin/uuid"
+			}
+		},
+		"node_modules/v8-compile-cache-lib": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
+			"integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
+			"dev": true
+		},
+		"node_modules/vary": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+			"integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/ws": {
+			"version": "8.17.1",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+			"integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+			"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
+				}
+			}
+		},
+		"node_modules/yn": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
+			"integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		}
+	}
+}

trigo-web/backend/package.json

@@ -0,0 +1,36 @@
+{
+	"name": "trigo-backend",
+	"version": "1.0.0",
+	"description": "Backend server for Trigo game",
+	"main": "dist/server.js",
+	"scripts": {
+		"dev": "nodemon --watch src --exec ts-node src/server.ts",
+		"build": "tsc",
+		"start": "node dist/server.js",
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"keywords": [
+		"game",
+		"go",
+		"websocket",
+		"nodejs"
+	],
+	"author": "",
+	"license": "MIT",
+	"dependencies": {
+		"@types/uuid": "^11.0.0",
+		"cors": "^2.8.5",
+		"dotenv": "^16.6.1",
+		"express": "^4.21.2",
+		"socket.io": "^4.8.1",
+		"uuid": "^13.0.0"
+	},
+	"devDependencies": {
+		"@types/cors": "^2.8.13",
+		"@types/express": "^4.17.17",
+		"@types/node": "^20.5.0",
+		"nodemon": "^3.0.1",
+		"ts-node": "^10.9.1",
+		"typescript": "^5.2.2"
+	}
+}

trigo-web/backend/src/server.ts

@@ -0,0 +1,59 @@
+const express = require("express");
+const { createServer } = require("http");
+const { Server } = require("socket.io");
+const cors = require("cors");
+const dotenv = require("dotenv");
+const path = require("path");
+
+dotenv.config();
+
+const app = express();
+const httpServer = createServer(app);
+const io = new Server(httpServer, {
+	cors: {
+		origin: process.env.CLIENT_URL || "http://localhost:5173",
+		methods: ["GET", "POST"]
+	}
+});
+
+const PORT = process.env.PORT || 3000;
+const HOST = process.env.HOST || "localhost";
+
+// Middleware
+app.use(cors());
+app.use(express.json());
+
+// Serve static files from frontend build (for production)
+if (process.env.NODE_ENV === "production") {
+	const frontendPath = path.join(__dirname, "../../app/dist");
+	app.use(express.static(frontendPath));
+
+	// Serve index.html for all routes (SPA support)
+	app.get("*", (req: any, res: any, next: any) => {
+		if (req.path.startsWith("/health") || req.path.startsWith("/socket.io")) {
+			return next();
+		}
+		res.sendFile(path.join(frontendPath, "index.html"));
+	});
+}
+
+// Health check endpoint
+app.get("/health", (_req: any, res: any) => {
+	res.json({ status: "ok", timestamp: new Date().toISOString() });
+});
+
+// Socket.io connection handling
+io.on("connection", (socket: any) => {
+	console.log(`New client connected: ${socket.id}`);
+
+	socket.on("disconnect", () => {
+		console.log(`Client disconnected: ${socket.id}`);
+	});
+});
+
+// Start server
+httpServer.listen(PORT, HOST, () => {
+	console.log(`Server running on ${HOST}:${PORT}`);
+	console.log(`Health check: http://${HOST}:${PORT}/health`);
+	console.log(`Environment: ${process.env.NODE_ENV || "development"}`);
+});

trigo-web/backend/src/services/gameManager.ts

@@ -0,0 +1,329 @@
+import { v4 as uuidv4 } from "uuid";
+import type { BoardShape, Position } from "../../../inc/trigo";
+import { TrigoGame, StepType, StoneType } from "../../../inc/trigo/game";
+
+export interface Player {
+	id: string;
+	nickname: string;
+	color: "black" | "white";
+	connected: boolean;
+}
+
+export interface GameState {
+	gameStatus: "waiting" | "playing" | "finished";
+	winner: "black" | "white" | null;
+}
+
+export interface GameRoom {
+	id: string;
+	players: { [playerId: string]: Player };
+	game: TrigoGame; // The actual game instance
+	gameState: GameState; // Game status metadata
+	createdAt: Date;
+	startedAt: Date | null;
+}
+
+export class GameManager {
+	private rooms: Map<string, GameRoom> = new Map();
+	private playerRoomMap: Map<string, string> = new Map();
+	private defaultBoardShape: BoardShape = { x: 5, y: 5, z: 5 }; // Default 5x5x5 board
+
+	constructor() {
+		console.log("GameManager initialized");
+	}
+
+	createRoom(playerId: string, nickname: string, boardShape?: BoardShape): GameRoom | null {
+		const roomId = this.generateRoomId();
+		const shape = boardShape || this.defaultBoardShape;
+
+		const room: GameRoom = {
+			id: roomId,
+			players: {
+				[playerId]: {
+					id: playerId,
+					nickname,
+					color: "black",
+					connected: true
+				}
+			},
+			game: new TrigoGame(shape, {
+				onStepAdvance: (_step, history) => {
+					console.log(`Step ${history.length}: Player made move`);
+				},
+				onCapture: (captured) => {
+					console.log(`Captured ${captured.length} stones`);
+				},
+				onWin: (winner) => {
+					console.log(`Game won by ${winner}`);
+				}
+			}),
+			gameState: {
+				gameStatus: "waiting",
+				winner: null
+			},
+			createdAt: new Date(),
+			startedAt: null
+		};
+
+		this.rooms.set(roomId, room);
+		this.playerRoomMap.set(playerId, roomId);
+
+		console.log(`Room ${roomId} created by ${playerId}`);
+		return room;
+	}
+
+	joinRoom(roomId: string, playerId: string, nickname: string): GameRoom | null {
+		const room = this.rooms.get(roomId);
+		if (!room) {
+			return null;
+		}
+
+		const playerCount = Object.keys(room.players).length;
+		if (playerCount >= 2) {
+			return null; // Room is full
+		}
+
+		// Assign white color to the second player
+		room.players[playerId] = {
+			id: playerId,
+			nickname,
+			color: "white",
+			connected: true
+		};
+
+		this.playerRoomMap.set(playerId, roomId);
+
+		// Start the game when second player joins
+		if (playerCount === 1) {
+			room.gameState.gameStatus = "playing";
+			room.startedAt = new Date();
+		}
+
+		return room;
+	}
+
+	leaveRoom(roomId: string, playerId: string): void {
+		const room = this.rooms.get(roomId);
+		if (!room) return;
+
+		if (room.players[playerId]) {
+			room.players[playerId].connected = false;
+		}
+
+		this.playerRoomMap.delete(playerId);
+
+		// Check if room should be deleted
+		const connectedPlayers = Object.values(room.players).filter((p) => p.connected);
+		if (connectedPlayers.length === 0) {
+			this.rooms.delete(roomId);
+			console.log(`Room ${roomId} deleted - no players remaining`);
+		}
+	}
+
+	makeMove(
+		roomId: string,
+		playerId: string,
+		move: { x: number; y: number; z: number }
+	): boolean {
+		const room = this.rooms.get(roomId);
+		if (!room) return false;
+
+		const player = room.players[playerId];
+		if (!player) return false;
+
+		// Check game status
+		if (room.gameState.gameStatus !== "playing") {
+			return false;
+		}
+
+		// Convert player color to Stone type
+		const expectedPlayer = player.color === "black" ? StoneType.BLACK : StoneType.WHITE;
+		const currentPlayer = room.game.getCurrentPlayer();
+
+		// Check if it's the player's turn
+		if (currentPlayer !== expectedPlayer) {
+			return false;
+		}
+
+		// Attempt to make the move using TrigoGame
+		const position: Position = { x: move.x, y: move.y, z: move.z };
+		const success = room.game.drop(position);
+
+		return success;
+	}
+
+	passTurn(roomId: string, playerId: string): boolean {
+		const room = this.rooms.get(roomId);
+		if (!room) return false;
+
+		const player = room.players[playerId];
+		if (!player) return false;
+
+		// Check game status
+		if (room.gameState.gameStatus !== "playing") {
+			return false;
+		}
+
+		// Convert player color to Stone type
+		const expectedPlayer = player.color === "black" ? StoneType.BLACK : StoneType.WHITE;
+		const currentPlayer = room.game.getCurrentPlayer();
+
+		// Check if it's the player's turn
+		if (currentPlayer !== expectedPlayer) {
+			return false;
+		}
+
+		return room.game.pass();
+	}
+
+	resign(roomId: string, playerId: string): boolean {
+		const room = this.rooms.get(roomId);
+		if (!room) return false;
+
+		const player = room.players[playerId];
+		if (!player) return false;
+
+		// Surrender the game
+		room.game.surrender();
+
+		// Update room state
+		room.gameState.gameStatus = "finished";
+		room.gameState.winner = player.color === "black" ? "white" : "black";
+
+		return true;
+	}
+
+	/**
+	 * Undo the last move (悔棋)
+	 */
+	undoMove(roomId: string, playerId: string): boolean {
+		const room = this.rooms.get(roomId);
+		if (!room) return false;
+
+		const player = room.players[playerId];
+		if (!player) return false;
+
+		// Check game status
+		if (room.gameState.gameStatus !== "playing") {
+			return false;
+		}
+
+		return room.game.undo();
+	}
+
+	/**
+	 * Get game board state for a room
+	 */
+	getGameBoard(roomId: string): number[][][] | null {
+		const room = this.rooms.get(roomId);
+		if (!room) return null;
+
+		return room.game.getBoard();
+	}
+
+	/**
+	 * Get game statistics for a room
+	 */
+	getGameStats(roomId: string) {
+		const room = this.rooms.get(roomId);
+		if (!room) return null;
+
+		return room.game.getStats();
+	}
+
+	/**
+	 * Get current player for a room
+	 */
+	getCurrentPlayer(roomId: string): "black" | "white" | null {
+		const room = this.rooms.get(roomId);
+		if (!room) return null;
+
+		const currentStone = room.game.getCurrentPlayer();
+		return currentStone === StoneType.BLACK ? "black" : "white";
+	}
+
+	/**
+	 * Calculate and get territory for a room
+	 */
+	getTerritory(roomId: string) {
+		const room = this.rooms.get(roomId);
+		if (!room) return null;
+
+		return room.game.getTerritory();
+	}
+
+	/**
+	 * End the game and determine winner based on territory
+	 */
+	endGameByTerritory(roomId: string): boolean {
+		const room = this.rooms.get(roomId);
+		if (!room) return false;
+
+		if (room.gameState.gameStatus !== "playing") {
+			return false;
+		}
+
+		// Calculate final territory
+		const territory = room.game.getTerritory();
+
+		// Determine winner
+		if (territory.black > territory.white) {
+			room.gameState.winner = "black";
+		} else if (territory.white > territory.black) {
+			room.gameState.winner = "white";
+		} else {
+			// Draw - could set winner to null or handle differently
+			room.gameState.winner = null;
+		}
+
+		room.gameState.gameStatus = "finished";
+		console.log(`Game ${roomId} ended. Black: ${territory.black}, White: ${territory.white}, Winner: ${room.gameState.winner}`);
+
+		return true;
+	}
+
+	/**
+	 * Check if both players passed consecutively (game should end)
+	 * Returns true if game was ended
+	 */
+	checkConsecutivePasses(roomId: string): boolean {
+		const room = this.rooms.get(roomId);
+		if (!room) return false;
+
+		const history = room.game.getHistory();
+		if (history.length < 2) return false;
+
+		// Get last two moves
+		const lastMove = history[history.length - 1];
+		const secondLastMove = history[history.length - 2];
+
+		// Check if both were passes
+		if (lastMove.type === StepType.PASS && secondLastMove.type === StepType.PASS) {
+			// Two consecutive passes - end the game
+			this.endGameByTerritory(roomId);
+			return true;
+		}
+
+		return false;
+	}
+
+	getRoom(roomId: string): GameRoom | undefined {
+		return this.rooms.get(roomId);
+	}
+
+	getPlayerRoom(playerId: string): GameRoom | undefined {
+		const roomId = this.playerRoomMap.get(playerId);
+		if (!roomId) return undefined;
+		return this.rooms.get(roomId);
+	}
+
+	getActiveRooms(): GameRoom[] {
+		return Array.from(this.rooms.values()).filter(
+			(room) => room.gameState.gameStatus !== "finished"
+		);
+	}
+
+	private generateRoomId(): string {
+		return uuidv4().substring(0, 8).toUpperCase();
+	}
+}

trigo-web/backend/src/sockets/gameSocket.ts

@@ -0,0 +1,155 @@
+import { Server, Socket } from "socket.io";
+import { GameManager } from "../services/gameManager";
+
+export function setupSocketHandlers(io: Server, socket: Socket, gameManager: GameManager) {
+	console.log(`Setting up socket handlers for ${socket.id}`);
+
+	// Join room
+	socket.on("joinRoom", (data: { roomId?: string; nickname: string }) => {
+		const { roomId, nickname } = data;
+
+		// Create or join room
+		const room = roomId ? gameManager.joinRoom(roomId, socket.id, nickname) : gameManager.createRoom(socket.id, nickname);
+
+		if (room) {
+			socket.join(room.id);
+
+			// Get complete game data for frontend
+			const board = gameManager.getGameBoard(room.id);
+			const currentPlayer = gameManager.getCurrentPlayer(room.id);
+			const stats = gameManager.getGameStats(room.id);
+
+			socket.emit("roomJoined", {
+				roomId: room.id,
+				playerId: socket.id,
+				playerColor: room.players[socket.id]?.color,
+				gameState: {
+					board,
+					boardShape: room.game.getShape(),
+					currentPlayer,
+					moveHistory: room.game.getHistory(),
+					currentMoveIndex: room.game.getCurrentStep(),
+					capturedStones: {
+						black: stats?.capturedByBlack || 0,
+						white: stats?.capturedByWhite || 0
+					},
+					gameStatus: room.gameState.gameStatus,
+					winner: room.gameState.winner
+				}
+			});
+
+			// Notify other players
+			socket.to(room.id).emit("playerJoined", {
+				playerId: socket.id,
+				nickname: nickname
+			});
+
+			console.log(`Player ${socket.id} joined room ${room.id}`);
+		} else {
+			socket.emit("error", { message: "Failed to join room" });
+		}
+	});
+
+	// Leave room
+	socket.on("leaveRoom", () => {
+		const room = gameManager.getPlayerRoom(socket.id);
+		if (room) {
+			socket.leave(room.id);
+			gameManager.leaveRoom(room.id, socket.id);
+
+			// Notify others
+			socket.to(room.id).emit("playerLeft", {
+				playerId: socket.id
+			});
+		}
+	});
+
+	// Game moves
+	socket.on("makeMove", (data: { x: number; y: number; z: number }) => {
+		const room = gameManager.getPlayerRoom(socket.id);
+		if (room && gameManager.makeMove(room.id, socket.id, data)) {
+			// Get updated game data
+			const board = gameManager.getGameBoard(room.id);
+			const currentPlayer = gameManager.getCurrentPlayer(room.id);
+			const stats = gameManager.getGameStats(room.id);
+			const lastStep = room.game.getLastStep();
+
+			// Broadcast game update to all players in the room
+			io.to(room.id).emit("gameUpdate", {
+				board,
+				currentPlayer,
+				lastMove: data,
+				capturedStones: {
+					black: stats?.capturedByBlack || 0,
+					white: stats?.capturedByWhite || 0
+				},
+				capturedPositions: lastStep?.capturedPositions,
+				moveHistory: room.game.getHistory(),
+				currentMoveIndex: room.game.getCurrentStep()
+			});
+		} else {
+			socket.emit("error", { message: "Invalid move" });
+		}
+	});
+
+	// Pass turn
+	socket.on("pass", () => {
+		const room = gameManager.getPlayerRoom(socket.id);
+		if (room && gameManager.passTurn(room.id, socket.id)) {
+			const currentPlayer = gameManager.getCurrentPlayer(room.id);
+
+			io.to(room.id).emit("gameUpdate", {
+				currentPlayer,
+				action: "pass",
+				moveHistory: room.game.getHistory(),
+				currentMoveIndex: room.game.getCurrentStep()
+			});
+
+			// Check for consecutive passes (game end)
+			if (gameManager.checkConsecutivePasses(room.id)) {
+				const territory = gameManager.getTerritory(room.id);
+				io.to(room.id).emit("gameEnded", {
+					winner: room.gameState.winner,
+					reason: "double-pass",
+					territory
+				});
+			}
+		}
+	});
+
+	// Resign
+	socket.on("resign", () => {
+		const room = gameManager.getPlayerRoom(socket.id);
+		if (room && gameManager.resign(room.id, socket.id)) {
+			io.to(room.id).emit("gameEnded", {
+				winner: room.gameState.winner,
+				reason: "resignation"
+			});
+		}
+	});
+
+	// Chat messages
+	socket.on("chatMessage", (data: { content: string }) => {
+		const room = gameManager.getPlayerRoom(socket.id);
+		if (room) {
+			const player = room.players[socket.id];
+			io.to(room.id).emit("chatMessage", {
+				author: player?.nickname || "Unknown",
+				content: data.content,
+				playerId: socket.id
+			});
+		}
+	});
+
+	// Handle disconnection
+	socket.on("disconnect", () => {
+		console.log(`Client disconnected: ${socket.id}`);
+		const room = gameManager.getPlayerRoom(socket.id);
+		if (room) {
+			gameManager.leaveRoom(room.id, socket.id);
+			socket.to(room.id).emit("playerDisconnected", {
+				playerId: socket.id
+			});
+		}
+	});
+}

trigo-web/backend/tsconfig.json

@@ -0,0 +1,34 @@
+{
+	"compilerOptions": {
+		"target": "ES2020",
+		"module": "commonjs",
+		"lib": ["ES2020"],
+		"outDir": "./dist",
+		"rootDir": "../",
+		"strict": false,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"forceConsistentCasingInFileNames": true,
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"declaration": true,
+		"declarationMap": true,
+		"sourceMap": true,
+		"types": ["node"],
+		"allowJs": true,
+		"noImplicitAny": false
+	},
+	"include": ["src/**/*", "../inc/**/*"],
+	"exclude": [
+		"node_modules",
+		"dist",
+		"../inc/trigo/parserInit.ts",
+		"../inc/tgn/tgn.jison.cjs"
+	],
+	"ts-node": {
+		"esm": false,
+		"compilerOptions": {
+			"module": "commonjs"
+		}
+	}
+}

trigo-web/inc/tgn/README.md

@@ -0,0 +1,109 @@
+# TGN (Trigo Game Notation) Parser
+
+This directory contains the TGN parser implementation for reading and writing Trigo game notation files.
+
+## Files
+
+- **`tgn.jison`** - Grammar definition for TGN format (similar to PGN for chess)
+- **`tgnParser.ts`** - TypeScript wrapper providing type-safe API for the parser
+- **`tgn.jison.cjs`** - Generated parser (auto-generated, gitignored)
+
+## Building the Parser
+
+The parser is generated from the jison grammar file. To rebuild:
+
+```bash
+npm run build:parsers
+```
+
+Or specifically for TGN:
+
+```bash
+npm run build:parser:tgn
+```
+
+This will generate `tgn.jison.cjs` from `tgn.jison`.
+
+## Usage
+
+Import the parser functions from the game module:
+
+```typescript
+import { TrigoGame, validateTGN, TGNParseError } from '@inc/trigo/game';
+
+// Parse TGN and create game instance
+const tgn = `
+[Event "Test Game"]
+[Board 5x5x5]
+
+1. 000 y00
+2. 0y0 pass
+`;
+
+try {
+  const game = TrigoGame.fromTGN(tgn);
+  console.log('Game loaded successfully!');
+} catch (error) {
+  if (error instanceof TGNParseError) {
+    console.error('Parse error at line', error.line);
+  }
+}
+
+// Validate TGN without parsing
+const result = validateTGN(tgn);
+if (result.valid) {
+  console.log('Valid TGN');
+} else {
+  console.error('Invalid TGN:', result.error);
+}
+```
+
+## TGN Format
+
+TGN format consists of:
+
+1. **Metadata tags** - Key-value pairs in square brackets
+2. **Move sequence** - Numbered rounds with moves in ab0yz coordinate notation
+
+Example:
+
+```tgn
+[Event "World Championship"]
+[Site "Tokyo"]
+[Date "2025.10.31"]
+[Black "Alice"]
+[White "Bob"]
+[Board 5x5x5]
+[Rules "Chinese"]
+
+1. 000 y00
+2. 0y0 yy0
+3. aaa pass
+```
+
+### Coordinate Notation (ab0yz)
+
+- `0` = center position
+- `a`, `b`, `c`, ... = positions from one edge toward center
+- `z`, `y`, `x`, ... = positions from opposite edge toward center
+
+Examples for 5×5×5 board:
+- `000` = center (2,2,2)
+- `aaa` = corner (0,0,0)
+- `zzz` = opposite corner (4,4,4)
+- `y00` = (4,2,2)
+
+For 2D boards (e.g., 19×19×1), only two coordinates are used:
+- `00` = center
+- `aa` = corner
+
+## Development
+
+The parser is built using [Jison](https://github.com/zaach/jison), a JavaScript parser generator similar to Bison/Yacc.
+
+**Note:** Generated files (`*.jison.cjs`, `*.jison.js`) are gitignored and must be built locally or in CI/CD.
+
+## Related Documentation
+
+- [TGN Format Specification](../../docs/tgn-format-spec.md)
+- [Parser Development Guide](../../docs/README.tgn.md)

trigo-web/inc/tgn/tgn.jison

@@ -0,0 +1,224 @@
+/* Trigo Game Notation Parser
+ * Similar as PGN (Portable Game Notation) format
+ */
+
+/* ========== Lexical Grammar ========== */
+%lex
+
+%%
+
+\s+						/* skip whitespace */
+\n						/* skip newlines */
+";"[^\n]*				/* skip line comments */
+"{"[^}]*"}"				/* skip block comments */
+
+/* Brackets */
+"["						return '['
+"]"						return ']'
+
+/* String literals */
+\"([^\\\"]|\\.)*\"		return 'STRING'
+
+/* Tag names - Common PGN tags */
+"Event"					return 'TAG_EVENT'
+"Site"					return 'TAG_SITE'
+"Date"					return 'TAG_DATE'
+"Round"					return 'TAG_ROUND'
+"Black"					return 'TAG_BLACK'
+"White"					return 'TAG_WHITE'
+"Result"				return 'TAG_RESULT'
+
+/* Trigo-specific tags */
+"Board"					return 'TAG_BOARD'
+"Handicap"				return 'TAG_HANDICAP'
+"Rules"					return 'TAG_RULES'
+"TimeControl"			return 'TAG_TIMECONTROL'
+"Annotator"				return 'TAG_ANNOTATOR'
+"Application"			return 'TAG_APPLICATION'
+
+/* Game result symbols */
+"B+"					return 'RESULT_BLACK'
+"W+"					return 'RESULT_WHITE'
+"="						return '='	/* draw */
+"*"						return '*'	/* unknown */
+
+/* Move notation placeholders - will be expanded later */
+[1-9][0-9]*				return 'NUMBER'
+"."						return 'DOT'
+"pass"					return 'PASS'
+"resign"				return 'RESIGN'
+"points"				return 'POINTS'
+"stones"				return 'STONES'
+
+[x](?=[1-9])			return 'TIMES'
+
+/* Coordinates for moves - will be refined */
+[a-z0]+					return 'COORDINATE'
+
+/* Generic tag name for extensibility */
+[A-Z][A-Za-z0-9_]*		return 'TAG_NAME'
+
+/* End of file */
+<<EOF>>					return 'EOF'
+
+/* Catch-all for unexpected characters */
+.						return 'INVALID'
+
+/lex
+
+/* ========== Grammar Rules ========== */
+
+%%
+
+game
+	: tag_section move_section EOF
+		{
+			return {
+				tags: $1,
+				moves: $2,
+				success: true
+			};
+		}
+	| tag_section EOF
+		{
+			return {
+				tags: $1,
+				moves: null,
+				success: true
+			};
+		}
+	| move_section EOF
+		{
+			return {
+				tags: {},
+				moves: $1,
+				success: true
+			};
+		}
+	| EOF
+		{
+			return {
+				tags: {},
+				moves: null,
+				success: true
+			};
+		}
+	;
+
+/* ========== Tag Section (Metadata) ========== */
+
+tag_section
+	: tag_pair								-> $1
+	| tag_section tag_pair					-> Object.assign({}, $1, $2)
+	;
+
+tag_pair
+	: "[" tag_name STRING "]"
+		{
+			const tagName = $2;
+			const tagValue = $3.slice(1, -1); // Remove quotes
+			$$ = { [tagName]: tagValue };
+		}
+	| "[" TAG_RESULT game_result "]"		-> $3
+	| "[" TAG_BOARD board_shape "]"			-> ({[$2]: $3})
+	;
+
+tag_name
+	: TAG_EVENT
+	| TAG_SITE
+	| TAG_DATE
+	| TAG_ROUND
+	| TAG_BLACK
+	| TAG_WHITE
+	| TAG_HANDICAP
+	| TAG_RULES
+	| TAG_TIMECONTROL
+	| TAG_ANNOTATOR
+	| TAG_APPLICATION
+	| TAG_NAME									{ $$ = yytext; }
+	;
+
+/* ========== Movetext Section (Game Body) ========== */
+/* PLACEHOLDER: Will be implemented in future iterations */
+
+move_section
+	: move_sequence
+	//| move_sequence game_termination
+	;
+
+move_sequence
+	: move_sequence_intact						-> $1
+	| move_sequence_truncated					-> $1
+	;
+
+move_sequence_intact
+	: /* empty */								-> []
+	| move_sequence_intact move_round			-> $1.concat([$2])
+	;
+
+move_sequence_truncated
+	: move_sequence_intact move_round_half		-> $1.concat([$2])
+	;
+
+move_round
+	: number DOT move_action move_action		-> ({ round: $1, action_black: $3, action_white: $4 })
+	;
+
+move_round_half
+	: number DOT move_action					-> ({ round: $1, action_black: $3 })
+	;
+
+move_action
+	: PASS										-> ({ type: 'pass' })
+	| RESIGN									-> ({ type: 'resign' })
+	| COORDINATE
+		{
+			// Placeholder: Parse coordinate notation
+			$$ = {
+				type: 'move',
+				position: yytext
+			};
+		}
+	;
+
+game_result
+	: win										-> ({Result: $1})
+	| win conquer								-> ({Result: $1, Conquer: $2})
+	| "="										-> ({Result: "draw"})
+	| "*"										-> ({Result: "unknown"})
+	;
+
+win
+	: RESULT_BLACK								-> "black win"
+	| RESULT_WHITE								-> "white win"
+	;
+
+conquer
+	: number conquer_unit						-> ({n: $1, unit: $2})
+	;
+
+conquer_unit
+	: POINTS
+	| STONES
+	;
+
+board_shape
+	: number									-> [$1]
+	| board_shape TIMES number					-> $1.concat($3)
+	;
+
+number
+	: NUMBER									-> parseInt($1)
+	;
+
+%%
+
+/* ========== Additional JavaScript Code ========== */
+
+// Parser configuration
+parser.yy = {
+	// Helper functions can be added here
+	parseError: function(str, hash) {
+		throw new Error('Parse error: ' + str);
+	}
+};

trigo-web/inc/tgn/tgn.jison.cjs

@@ -0,0 +1,791 @@
+/* parser generated by jison 0.4.18 */
+/*
+  Returns a Parser object of the following structure:
+
+  Parser: {
+    yy: {}
+  }
+
+  Parser.prototype: {
+    yy: {},
+    trace: function(),
+    symbols_: {associative list: name ==> number},
+    terminals_: {associative list: number ==> name},
+    productions_: [...],
+    performAction: function anonymous(yytext, yyleng, yylineno, yy, yystate, $$, _$),
+    table: [...],
+    defaultActions: {...},
+    parseError: function(str, hash),
+    parse: function(input),
+
+    lexer: {
+        EOF: 1,
+        parseError: function(str, hash),
+        setInput: function(input),
+        input: function(),
+        unput: function(str),
+        more: function(),
+        less: function(n),
+        pastInput: function(),
+        upcomingInput: function(),
+        showPosition: function(),
+        test_match: function(regex_match_array, rule_index),
+        next: function(),
+        lex: function(),
+        begin: function(condition),
+        popState: function(),
+        _currentRules: function(),
+        topState: function(),
+        pushState: function(condition),
+
+        options: {
+            ranges: boolean           (optional: true ==> token location info will include a .range[] member)
+            flex: boolean             (optional: true ==> flex-like lexing behaviour where the rules are tested exhaustively to find the longest match)
+            backtrack_lexer: boolean  (optional: true ==> lexer regexes are tested in order and for each matching regex the action code is invoked; the lexer terminates the scan when a token is returned by the action code)
+        },
+
+        performAction: function(yy, yy_, $avoiding_name_collisions, YY_START),
+        rules: [...],
+        conditions: {associative list: name ==> set},
+    }
+  }
+
+
+  token location info (@$, _$, etc.): {
+    first_line: n,
+    last_line: n,
+    first_column: n,
+    last_column: n,
+    range: [start_number, end_number]       (where the numbers are indexes into the input string, regular zero-based)
+  }
+
+
+  the parseError function receives a 'hash' object with these members for lexer and parser errors: {
+    text:        (matched text)
+    token:       (the produced terminal token, if any)
+    line:        (yylineno)
+  }
+  while parser (grammar) errors will also provide these members, i.e. parser errors deliver a superset of attributes: {
+    loc:         (yylloc)
+    expected:    (string describing the set of expected tokens)
+    recoverable: (boolean: TRUE when the parser has a error recovery rule available for this particular error)
+  }
+*/
+var tgn = (function(){
+var o=function(k,v,o,l){for(o=o||{},l=k.length;l--;o[k[l]]=v);return o},$V0=[1,7],$V1=[2,25],$V2=[6,8,49],$V3=[1,32],$V4=[6,49],$V5=[11,49],$V6=[11,48],$V7=[1,51],$V8=[1,52],$V9=[1,53],$Va=[6,36,37,38,49];
+var parser = {trace: function trace () { },
+yy: {},
+symbols_: {"error":2,"game":3,"tag_section":4,"move_section":5,"EOF":6,"tag_pair":7,"[":8,"tag_name":9,"STRING":10,"]":11,"TAG_RESULT":12,"game_result":13,"TAG_BOARD":14,"board_shape":15,"TAG_EVENT":16,"TAG_SITE":17,"TAG_DATE":18,"TAG_ROUND":19,"TAG_BLACK":20,"TAG_WHITE":21,"TAG_HANDICAP":22,"TAG_RULES":23,"TAG_TIMECONTROL":24,"TAG_ANNOTATOR":25,"TAG_APPLICATION":26,"TAG_NAME":27,"move_sequence":28,"move_sequence_intact":29,"move_sequence_truncated":30,"move_round":31,"move_round_half":32,"number":33,"DOT":34,"move_action":35,"PASS":36,"RESIGN":37,"COORDINATE":38,"win":39,"conquer":40,"=":41,"*":42,"RESULT_BLACK":43,"RESULT_WHITE":44,"conquer_unit":45,"POINTS":46,"STONES":47,"TIMES":48,"NUMBER":49,"$accept":0,"$end":1},
+terminals_: {2:"error",6:"EOF",8:"[",10:"STRING",11:"]",12:"TAG_RESULT",14:"TAG_BOARD",16:"TAG_EVENT",17:"TAG_SITE",18:"TAG_DATE",19:"TAG_ROUND",20:"TAG_BLACK",21:"TAG_WHITE",22:"TAG_HANDICAP",23:"TAG_RULES",24:"TAG_TIMECONTROL",25:"TAG_ANNOTATOR",26:"TAG_APPLICATION",27:"TAG_NAME",34:"DOT",36:"PASS",37:"RESIGN",38:"COORDINATE",41:"=",42:"*",43:"RESULT_BLACK",44:"RESULT_WHITE",46:"POINTS",47:"STONES",48:"TIMES",49:"NUMBER"},
+productions_: [0,[3,3],[3,2],[3,2],[3,1],[4,1],[4,2],[7,4],[7,4],[7,4],[9,1],[9,1],[9,1],[9,1],[9,1],[9,1],[9,1],[9,1],[9,1],[9,1],[9,1],[9,1],[5,1],[28,1],[28,1],[29,0],[29,2],[30,2],[31,4],[32,3],[35,1],[35,1],[35,1],[13,1],[13,2],[13,1],[13,1],[39,1],[39,1],[40,2],[45,1],[45,1],[15,1],[15,3],[33,1]],
+performAction: function anonymous(yytext, yyleng, yylineno, yy, yystate /* action[1] */, $$ /* vstack */, _$ /* lstack */) {
+/* this == yyval */
+
+var $0 = $$.length - 1;
+switch (yystate) {
+case 1:
+
+			return {
+				tags: $$[$0-2],
+				moves: $$[$0-1],
+				success: true
+			};
+		
+break;
+case 2:
+
+			return {
+				tags: $$[$0-1],
+				moves: null,
+				success: true
+			};
+		
+break;
+case 3:
+
+			return {
+				tags: {},
+				moves: $$[$0-1],
+				success: true
+			};
+		
+break;
+case 4:
+
+			return {
+				tags: {},
+				moves: null,
+				success: true
+			};
+		
+break;
+case 5: case 23: case 24:
+this.$ = $$[$0];
+break;
+case 6:
+this.$ = Object.assign({}, $$[$0-1], $$[$0]);
+break;
+case 7:
+
+			const tagName = $$[$0-2];
+			const tagValue = $$[$0-1].slice(1, -1); // Remove quotes
+			this.$ = { [tagName]: tagValue };
+		
+break;
+case 8:
+this.$ = $$[$0-1];
+break;
+case 9:
+this.$ = ({[$$[$0-2]]: $$[$0-1]});
+break;
+case 21:
+ this.$ = yytext; 
+break;
+case 25:
+this.$ = [];
+break;
+case 26: case 27:
+this.$ = $$[$0-1].concat([$$[$0]]);
+break;
+case 28:
+this.$ = ({ round: $$[$0-3], action_black: $$[$0-1], action_white: $$[$0] });
+break;
+case 29:
+this.$ = ({ round: $$[$0-2], action_black: $$[$0] });
+break;
+case 30:
+this.$ = ({ type: 'pass' });
+break;
+case 31:
+this.$ = ({ type: 'resign' });
+break;
+case 32:
+
+			// Placeholder: Parse coordinate notation
+			this.$ = {
+				type: 'move',
+				position: yytext
+			};
+		
+break;
+case 33:
+this.$ = ({Result: $$[$0]});
+break;
+case 34:
+this.$ = ({Result: $$[$0-1], Conquer: $$[$0]});
+break;
+case 35:
+this.$ = ({Result: "draw"});
+break;
+case 36:
+this.$ = ({Result: "unknown"});
+break;
+case 37:
+this.$ = "black win";
+break;
+case 38:
+this.$ = "white win";
+break;
+case 39:
+this.$ = ({n: $$[$0-1], unit: $$[$0]});
+break;
+case 42:
+this.$ = [$$[$0]];
+break;
+case 43:
+this.$ = $$[$0-2].concat($$[$0]);
+break;
+case 44:
+this.$ = parseInt($$[$0]);
+break;
+}
+},
+table: [{3:1,4:2,5:3,6:[1,4],7:5,8:$V0,28:6,29:8,30:9,49:$V1},{1:[3]},{5:10,6:[1,11],7:12,8:$V0,28:6,29:8,30:9,49:$V1},{6:[1,13]},{1:[2,4]},o($V2,[2,5]),{6:[2,22]},{9:14,12:[1,15],14:[1,16],16:[1,17],17:[1,18],18:[1,19],19:[1,20],20:[1,21],21:[1,22],22:[1,23],23:[1,24],24:[1,25],25:[1,26],26:[1,27],27:[1,28]},{6:[2,23],31:29,32:30,33:31,49:$V3},{6:[2,24]},{6:[1,33]},{1:[2,2]},o($V2,[2,6]),{1:[2,3]},{10:[1,34]},{13:35,39:36,41:[1,37],42:[1,38],43:[1,39],44:[1,40]},{15:41,33:42,49:$V3},{10:[2,10]},{10:[2,11]},{10:[2,12]},{10:[2,13]},{10:[2,14]},{10:[2,15]},{10:[2,16]},{10:[2,17]},{10:[2,18]},{10:[2,19]},{10:[2,20]},{10:[2,21]},o($V4,[2,26]),{6:[2,27]},{34:[1,43]},o([11,34,46,47,48],[2,44]),{1:[2,1]},{11:[1,44]},{11:[1,45]},{11:[2,33],33:47,40:46,49:$V3},{11:[2,35]},{11:[2,36]},o($V5,[2,37]),o($V5,[2,38]),{11:[1,48],48:[1,49]},o($V6,[2,42]),{35:50,36:$V7,37:$V8,38:$V9},o($V2,[2,7]),o($V2,[2,8]),{11:[2,34]},{45:54,46:[1,55],47:[1,56]},o($V2,[2,9]),{33:57,49:$V3},{6:[2,29],35:58,36:$V7,37:$V8,38:$V9},o($Va,[2,30]),o($Va,[2,31]),o($Va,[2,32]),{11:[2,39]},{11:[2,40]},{11:[2,41]},o($V6,[2,43]),o($V4,[2,28])],
+defaultActions: {4:[2,4],6:[2,22],9:[2,24],11:[2,2],13:[2,3],17:[2,10],18:[2,11],19:[2,12],20:[2,13],21:[2,14],22:[2,15],23:[2,16],24:[2,17],25:[2,18],26:[2,19],27:[2,20],28:[2,21],30:[2,27],33:[2,1],37:[2,35],38:[2,36],46:[2,34],54:[2,39],55:[2,40],56:[2,41]},
+parseError: function parseError (str, hash) {
+    if (hash.recoverable) {
+        this.trace(str);
+    } else {
+        var error = new Error(str);
+        error.hash = hash;
+        throw error;
+    }
+},
+parse: function parse(input) {
+    var self = this, stack = [0], tstack = [], vstack = [null], lstack = [], table = this.table, yytext = '', yylineno = 0, yyleng = 0, recovering = 0, TERROR = 2, EOF = 1;
+    var args = lstack.slice.call(arguments, 1);
+    var lexer = Object.create(this.lexer);
+    var sharedState = { yy: {} };
+    for (var k in this.yy) {
+        if (Object.prototype.hasOwnProperty.call(this.yy, k)) {
+            sharedState.yy[k] = this.yy[k];
+        }
+    }
+    lexer.setInput(input, sharedState.yy);
+    sharedState.yy.lexer = lexer;
+    sharedState.yy.parser = this;
+    if (typeof lexer.yylloc == 'undefined') {
+        lexer.yylloc = {};
+    }
+    var yyloc = lexer.yylloc;
+    lstack.push(yyloc);
+    var ranges = lexer.options && lexer.options.ranges;
+    if (typeof sharedState.yy.parseError === 'function') {
+        this.parseError = sharedState.yy.parseError;
+    } else {
+        this.parseError = Object.getPrototypeOf(this).parseError;
+    }
+    function popStack(n) {
+        stack.length = stack.length - 2 * n;
+        vstack.length = vstack.length - n;
+        lstack.length = lstack.length - n;
+    }
+    _token_stack:
+        var lex = function () {
+            var token;
+            token = lexer.lex() || EOF;
+            if (typeof token !== 'number') {
+                token = self.symbols_[token] || token;
+            }
+            return token;
+        };
+    var symbol, preErrorSymbol, state, action, a, r, yyval = {}, p, len, newState, expected;
+    while (true) {
+        state = stack[stack.length - 1];
+        if (this.defaultActions[state]) {
+            action = this.defaultActions[state];
+        } else {
+            if (symbol === null || typeof symbol == 'undefined') {
+                symbol = lex();
+            }
+            action = table[state] && table[state][symbol];
+        }
+                    if (typeof action === 'undefined' || !action.length || !action[0]) {
+                var errStr = '';
+                expected = [];
+                for (p in table[state]) {
+                    if (this.terminals_[p] && p > TERROR) {
+                        expected.push('\'' + this.terminals_[p] + '\'');
+                    }
+                }
+                if (lexer.showPosition) {
+                    errStr = 'Parse error on line ' + (yylineno + 1) + ':\n' + lexer.showPosition() + '\nExpecting ' + expected.join(', ') + ', got \'' + (this.terminals_[symbol] || symbol) + '\'';
+                } else {
+                    errStr = 'Parse error on line ' + (yylineno + 1) + ': Unexpected ' + (symbol == EOF ? 'end of input' : '\'' + (this.terminals_[symbol] || symbol) + '\'');
+                }
+                this.parseError(errStr, {
+                    text: lexer.match,
+                    token: this.terminals_[symbol] || symbol,
+                    line: lexer.yylineno,
+                    loc: yyloc,
+                    expected: expected
+                });
+            }
+        if (action[0] instanceof Array && action.length > 1) {
+            throw new Error('Parse Error: multiple actions possible at state: ' + state + ', token: ' + symbol);
+        }
+        switch (action[0]) {
+        case 1:
+            stack.push(symbol);
+            vstack.push(lexer.yytext);
+            lstack.push(lexer.yylloc);
+            stack.push(action[1]);
+            symbol = null;
+            if (!preErrorSymbol) {
+                yyleng = lexer.yyleng;
+                yytext = lexer.yytext;
+                yylineno = lexer.yylineno;
+                yyloc = lexer.yylloc;
+                if (recovering > 0) {
+                    recovering--;
+                }
+            } else {
+                symbol = preErrorSymbol;
+                preErrorSymbol = null;
+            }
+            break;
+        case 2:
+            len = this.productions_[action[1]][1];
+            yyval.$ = vstack[vstack.length - len];
+            yyval._$ = {
+                first_line: lstack[lstack.length - (len || 1)].first_line,
+                last_line: lstack[lstack.length - 1].last_line,
+                first_column: lstack[lstack.length - (len || 1)].first_column,
+                last_column: lstack[lstack.length - 1].last_column
+            };
+            if (ranges) {
+                yyval._$.range = [
+                    lstack[lstack.length - (len || 1)].range[0],
+                    lstack[lstack.length - 1].range[1]
+                ];
+            }
+            r = this.performAction.apply(yyval, [
+                yytext,
+                yyleng,
+                yylineno,
+                sharedState.yy,
+                action[1],
+                vstack,
+                lstack
+            ].concat(args));
+            if (typeof r !== 'undefined') {
+                return r;
+            }
+            if (len) {
+                stack = stack.slice(0, -1 * len * 2);
+                vstack = vstack.slice(0, -1 * len);
+                lstack = lstack.slice(0, -1 * len);
+            }
+            stack.push(this.productions_[action[1]][0]);
+            vstack.push(yyval.$);
+            lstack.push(yyval._$);
+            newState = table[stack[stack.length - 2]][stack[stack.length - 1]];
+            stack.push(newState);
+            break;
+        case 3:
+            return true;
+        }
+    }
+    return true;
+}};
+
+
+/* ========== Additional JavaScript Code ========== */
+
+// Parser configuration
+parser.yy = {
+	// Helper functions can be added here
+	parseError: function(str, hash) {
+		throw new Error('Parse error: ' + str);
+	}
+};
+/* generated by jison-lex 0.3.4 */
+var lexer = (function(){
+var lexer = ({
+
+EOF:1,
+
+parseError:function parseError(str, hash) {
+        if (this.yy.parser) {
+            this.yy.parser.parseError(str, hash);
+        } else {
+            throw new Error(str);
+        }
+    },
+
+// resets the lexer, sets new input
+setInput:function (input, yy) {
+        this.yy = yy || this.yy || {};
+        this._input = input;
+        this._more = this._backtrack = this.done = false;
+        this.yylineno = this.yyleng = 0;
+        this.yytext = this.matched = this.match = '';
+        this.conditionStack = ['INITIAL'];
+        this.yylloc = {
+            first_line: 1,
+            first_column: 0,
+            last_line: 1,
+            last_column: 0
+        };
+        if (this.options.ranges) {
+            this.yylloc.range = [0,0];
+        }
+        this.offset = 0;
+        return this;
+    },
+
+// consumes and returns one char from the input
+input:function () {
+        var ch = this._input[0];
+        this.yytext += ch;
+        this.yyleng++;
+        this.offset++;
+        this.match += ch;
+        this.matched += ch;
+        var lines = ch.match(/(?:\r\n?|\n).*/g);
+        if (lines) {
+            this.yylineno++;
+            this.yylloc.last_line++;
+        } else {
+            this.yylloc.last_column++;
+        }
+        if (this.options.ranges) {
+            this.yylloc.range[1]++;
+        }
+
+        this._input = this._input.slice(1);
+        return ch;
+    },
+
+// unshifts one char (or a string) into the input
+unput:function (ch) {
+        var len = ch.length;
+        var lines = ch.split(/(?:\r\n?|\n)/g);
+
+        this._input = ch + this._input;
+        this.yytext = this.yytext.substr(0, this.yytext.length - len);
+        //this.yyleng -= len;
+        this.offset -= len;
+        var oldLines = this.match.split(/(?:\r\n?|\n)/g);
+        this.match = this.match.substr(0, this.match.length - 1);
+        this.matched = this.matched.substr(0, this.matched.length - 1);
+
+        if (lines.length - 1) {
+            this.yylineno -= lines.length - 1;
+        }
+        var r = this.yylloc.range;
+
+        this.yylloc = {
+            first_line: this.yylloc.first_line,
+            last_line: this.yylineno + 1,
+            first_column: this.yylloc.first_column,
+            last_column: lines ?
+                (lines.length === oldLines.length ? this.yylloc.first_column : 0)
+                 + oldLines[oldLines.length - lines.length].length - lines[0].length :
+              this.yylloc.first_column - len
+        };
+
+        if (this.options.ranges) {
+            this.yylloc.range = [r[0], r[0] + this.yyleng - len];
+        }
+        this.yyleng = this.yytext.length;
+        return this;
+    },
+
+// When called from action, caches matched text and appends it on next action
+more:function () {
+        this._more = true;
+        return this;
+    },
+
+// When called from action, signals the lexer that this rule fails to match the input, so the next matching rule (regex) should be tested instead.
+reject:function () {
+        if (this.options.backtrack_lexer) {
+            this._backtrack = true;
+        } else {
+            return this.parseError('Lexical error on line ' + (this.yylineno + 1) + '. You can only invoke reject() in the lexer when the lexer is of the backtracking persuasion (options.backtrack_lexer = true).\n' + this.showPosition(), {
+                text: "",
+                token: null,
+                line: this.yylineno
+            });
+
+        }
+        return this;
+    },
+
+// retain first n characters of the match
+less:function (n) {
+        this.unput(this.match.slice(n));
+    },
+
+// displays already matched input, i.e. for error messages
+pastInput:function () {
+        var past = this.matched.substr(0, this.matched.length - this.match.length);
+        return (past.length > 20 ? '...':'') + past.substr(-20).replace(/\n/g, "");
+    },
+
+// displays upcoming input, i.e. for error messages
+upcomingInput:function () {
+        var next = this.match;
+        if (next.length < 20) {
+            next += this._input.substr(0, 20-next.length);
+        }
+        return (next.substr(0,20) + (next.length > 20 ? '...' : '')).replace(/\n/g, "");
+    },
+
+// displays the character position where the lexing error occurred, i.e. for error messages
+showPosition:function () {
+        var pre = this.pastInput();
+        var c = new Array(pre.length + 1).join("-");
+        return pre + this.upcomingInput() + "\n" + c + "^";
+    },
+
+// test the lexed token: return FALSE when not a match, otherwise return token
+test_match:function(match, indexed_rule) {
+        var token,
+            lines,
+            backup;
+
+        if (this.options.backtrack_lexer) {
+            // save context
+            backup = {
+                yylineno: this.yylineno,
+                yylloc: {
+                    first_line: this.yylloc.first_line,
+                    last_line: this.last_line,
+                    first_column: this.yylloc.first_column,
+                    last_column: this.yylloc.last_column
+                },
+                yytext: this.yytext,
+                match: this.match,
+                matches: this.matches,
+                matched: this.matched,
+                yyleng: this.yyleng,
+                offset: this.offset,
+                _more: this._more,
+                _input: this._input,
+                yy: this.yy,
+                conditionStack: this.conditionStack.slice(0),
+                done: this.done
+            };
+            if (this.options.ranges) {
+                backup.yylloc.range = this.yylloc.range.slice(0);
+            }
+        }
+
+        lines = match[0].match(/(?:\r\n?|\n).*/g);
+        if (lines) {
+            this.yylineno += lines.length;
+        }
+        this.yylloc = {
+            first_line: this.yylloc.last_line,
+            last_line: this.yylineno + 1,
+            first_column: this.yylloc.last_column,
+            last_column: lines ?
+                         lines[lines.length - 1].length - lines[lines.length - 1].match(/\r?\n?/)[0].length :
+                         this.yylloc.last_column + match[0].length
+        };
+        this.yytext += match[0];
+        this.match += match[0];
+        this.matches = match;
+        this.yyleng = this.yytext.length;
+        if (this.options.ranges) {
+            this.yylloc.range = [this.offset, this.offset += this.yyleng];
+        }
+        this._more = false;
+        this._backtrack = false;
+        this._input = this._input.slice(match[0].length);
+        this.matched += match[0];
+        token = this.performAction.call(this, this.yy, this, indexed_rule, this.conditionStack[this.conditionStack.length - 1]);
+        if (this.done && this._input) {
+            this.done = false;
+        }
+        if (token) {
+            return token;
+        } else if (this._backtrack) {
+            // recover context
+            for (var k in backup) {
+                this[k] = backup[k];
+            }
+            return false; // rule action called reject() implying the next rule should be tested instead.
+        }
+        return false;
+    },
+
+// return next match in input
+next:function () {
+        if (this.done) {
+            return this.EOF;
+        }
+        if (!this._input) {
+            this.done = true;
+        }
+
+        var token,
+            match,
+            tempMatch,
+            index;
+        if (!this._more) {
+            this.yytext = '';
+            this.match = '';
+        }
+        var rules = this._currentRules();
+        for (var i = 0; i < rules.length; i++) {
+            tempMatch = this._input.match(this.rules[rules[i]]);
+            if (tempMatch && (!match || tempMatch[0].length > match[0].length)) {
+                match = tempMatch;
+                index = i;
+                if (this.options.backtrack_lexer) {
+                    token = this.test_match(tempMatch, rules[i]);
+                    if (token !== false) {
+                        return token;
+                    } else if (this._backtrack) {
+                        match = false;
+                        continue; // rule action called reject() implying a rule MISmatch.
+                    } else {
+                        // else: this is a lexer rule which consumes input without producing a token (e.g. whitespace)
+                        return false;
+                    }
+                } else if (!this.options.flex) {
+                    break;
+                }
+            }
+        }
+        if (match) {
+            token = this.test_match(match, rules[index]);
+            if (token !== false) {
+                return token;
+            }
+            // else: this is a lexer rule which consumes input without producing a token (e.g. whitespace)
+            return false;
+        }
+        if (this._input === "") {
+            return this.EOF;
+        } else {
+            return this.parseError('Lexical error on line ' + (this.yylineno + 1) + '. Unrecognized text.\n' + this.showPosition(), {
+                text: "",
+                token: null,
+                line: this.yylineno
+            });
+        }
+    },
+
+// return next match that has a token
+lex:function lex () {
+        var r = this.next();
+        if (r) {
+            return r;
+        } else {
+            return this.lex();
+        }
+    },
+
+// activates a new lexer condition state (pushes the new lexer condition state onto the condition stack)
+begin:function begin (condition) {
+        this.conditionStack.push(condition);
+    },
+
+// pop the previously active lexer condition state off the condition stack
+popState:function popState () {
+        var n = this.conditionStack.length - 1;
+        if (n > 0) {
+            return this.conditionStack.pop();
+        } else {
+            return this.conditionStack[0];
+        }
+    },
+
+// produce the lexer rule set which is active for the currently active lexer condition state
+_currentRules:function _currentRules () {
+        if (this.conditionStack.length && this.conditionStack[this.conditionStack.length - 1]) {
+            return this.conditions[this.conditionStack[this.conditionStack.length - 1]].rules;
+        } else {
+            return this.conditions["INITIAL"].rules;
+        }
+    },
+
+// return the currently active lexer condition state; when an index argument is provided it produces the N-th previous condition state, if available
+topState:function topState (n) {
+        n = this.conditionStack.length - 1 - Math.abs(n || 0);
+        if (n >= 0) {
+            return this.conditionStack[n];
+        } else {
+            return "INITIAL";
+        }
+    },
+
+// alias for begin(condition)
+pushState:function pushState (condition) {
+        this.begin(condition);
+    },
+
+// return the number of states currently on the stack
+stateStackSize:function stateStackSize() {
+        return this.conditionStack.length;
+    },
+options: {},
+performAction: function anonymous(yy,yy_,$avoiding_name_collisions,YY_START) {
+var YYSTATE=YY_START;
+switch($avoiding_name_collisions) {
+case 0:/* skip whitespace */
+break;
+case 1:/* skip newlines */
+break;
+case 2:/* skip line comments */
+break;
+case 3:/* skip block comments */
+break;
+case 4:return 8
+break;
+case 5:return 11
+break;
+case 6:return 10
+break;
+case 7:return 16
+break;
+case 8:return 17
+break;
+case 9:return 18
+break;
+case 10:return 19
+break;
+case 11:return 20
+break;
+case 12:return 21
+break;
+case 13:return 12
+break;
+case 14:return 14
+break;
+case 15:return 22
+break;
+case 16:return 23
+break;
+case 17:return 24
+break;
+case 18:return 25
+break;
+case 19:return 26
+break;
+case 20:return 43
+break;
+case 21:return 44
+break;
+case 22:return 41	/* draw */
+break;
+case 23:return 42	/* unknown */
+break;
+case 24:return 49
+break;
+case 25:return 34
+break;
+case 26:return 36
+break;
+case 27:return 37
+break;
+case 28:return 46
+break;
+case 29:return 47
+break;
+case 30:return 48
+break;
+case 31:return 38
+break;
+case 32:return 27
+break;
+case 33:return 6
+break;
+case 34:return 'INVALID'
+break;
+}
+},
+rules: [/^(?:\s+)/,/^(?:\n)/,/^(?:;[^\n]*)/,/^(?:\{[^}]*\})/,/^(?:\[)/,/^(?:\])/,/^(?:"([^\\\"]|\\.)*")/,/^(?:Event\b)/,/^(?:Site\b)/,/^(?:Date\b)/,/^(?:Round\b)/,/^(?:Black\b)/,/^(?:White\b)/,/^(?:Result\b)/,/^(?:Board\b)/,/^(?:Handicap\b)/,/^(?:Rules\b)/,/^(?:TimeControl\b)/,/^(?:Annotator\b)/,/^(?:Application\b)/,/^(?:B\+)/,/^(?:W\+)/,/^(?:=)/,/^(?:\*)/,/^(?:[1-9][0-9]*)/,/^(?:\.)/,/^(?:pass\b)/,/^(?:resign\b)/,/^(?:points\b)/,/^(?:stones\b)/,/^(?:[x](?=[1-9]))/,/^(?:[a-z0]+)/,/^(?:[A-Z][A-Za-z0-9_]*)/,/^(?:$)/,/^(?:.)/],
+conditions: {"INITIAL":{"rules":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34],"inclusive":true}}
+});
+return lexer;
+})();
+parser.lexer = lexer;
+function Parser () {
+  this.yy = {};
+}
+Parser.prototype = parser;parser.Parser = Parser;
+return new Parser;
+})();
+
+
+if (typeof require !== 'undefined' && typeof exports !== 'undefined') {
+exports.parser = tgn;
+exports.Parser = tgn.Parser;
+exports.parse = function () { return tgn.parse.apply(tgn, arguments); };
+exports.main = function commonjsMain (args) {
+    if (!args[1]) {
+        console.log('Usage: '+args[0]+' FILE');
+        process.exit(1);
+    }
+    var source = require('fs').readFileSync(require('path').normalize(args[1]), "utf8");
+    return exports.parser.parse(source);
+};
+if (typeof module !== 'undefined' && require.main === module) {
+  exports.main(process.argv.slice(1));
+}
+}

trigo-web/inc/tgn/tgnParser.ts

@@ -0,0 +1,166 @@
+/**
+ * TGN Parser TypeScript Wrapper
+ *
+ * Wraps the jison-generated parser with TypeScript types
+ *
+ * Based on lotus project architecture:
+ * - Use jison npm package for grammar compilation at build time
+ * - Generate parser to .js file in build phase
+ * - Use synchronous parsing (no async needed)
+ * - Works in both browser and Node.js environments
+ */
+
+/**
+ * Parsed move action - represents a single player's action in a round
+ */
+export interface ParsedMoveAction {
+	type: 'move' | 'pass' | 'resign';
+	position?: string;  // ab0yz coordinate notation
+}
+
+
+/**
+ * Parsed move round - contains both black and white moves
+ */
+export interface ParsedMoveRound {
+	round: number;
+	action_black: ParsedMoveAction;
+	action_white?: ParsedMoveAction;
+}
+
+
+/**
+ * Parsed game result
+ */
+export interface ParsedGameResult {
+	Result: string;  // "black win" | "white win" | "draw" | "unknown"
+	Conquer?: {
+		n: number;
+		unit: string;  // "points" | "stones"
+	};
+}
+
+
+/**
+ * Parsed TGN tags (metadata)
+ */
+export interface ParsedTags {
+	Event?: string;
+	Site?: string;
+	Date?: string;
+	Round?: string;
+	Black?: string;
+	White?: string;
+	Result?: string;
+	Board?: number[];  // [x, y, z] or [x, y]
+	Handicap?: string;
+	Rules?: string;
+	TimeControl?: string;
+	Annotator?: string;
+	Application?: string;
+	[key: string]: string | number[] | ParsedGameResult | undefined;
+}
+
+
+/**
+ * Parser output structure
+ */
+export interface TGNParseResult {
+	tags: ParsedTags;
+	moves: ParsedMoveRound[] | null;
+	success: boolean;
+}
+
+
+/**
+ * Parser error with position information
+ */
+export class TGNParseError extends Error {
+	constructor(
+		message: string,
+		public line?: number,
+		public column?: number,
+		public hash?: any
+	) {
+		super(message);
+		this.name = 'TGNParseError';
+	}
+}
+
+
+// Will be set by initialization code or build process
+let parserModule: any = null;
+
+
+/**
+ * Set the parser module (called by initialization code)
+ * This allows the pre-built parser to be used
+ */
+export function setParserModule(module: any): void {
+	parserModule = module;
+}
+
+
+/**
+ * Get the parser module
+ * Throws error if parser not loaded
+ */
+function getParser() {
+	if (!parserModule) {
+		throw new Error(
+			'TGN parser not loaded. Please ensure the parser has been built.\n' +
+			'Run: npm run build:parsers'
+		);
+	}
+	return parserModule;
+}
+
+
+/**
+ * Parse TGN string and return structured data
+ * Synchronous parsing (no async needed)
+ *
+ * @param tgnString - TGN formatted game notation
+ * @returns Parsed game data with tags and moves
+ * @throws TGNParseError if parsing fails
+ */
+export function parseTGN(tgnString: string): TGNParseResult {
+	const parser = getParser();
+
+	if (!parser.parse) {
+		throw new Error('TGN parser parse method not available');
+	}
+
+	try {
+		const result = parser.parse(tgnString);
+		return result as TGNParseResult;
+	} catch (error: any) {
+		// Wrap jison errors with our custom error type
+		throw new TGNParseError(
+			error.message || 'Unknown parse error',
+			error.hash?.line,
+			error.hash?.loc?.first_column,
+			error.hash
+		);
+	}
+}
+
+
+/**
+ * Validate TGN string without fully parsing
+ * Synchronous validation (no async needed)
+ *
+ * @param tgnString - TGN formatted game notation
+ * @returns Object with valid flag and error message if invalid
+ */
+export function validateTGN(tgnString: string): { valid: boolean; error?: string } {
+	try {
+		parseTGN(tgnString);
+		return { valid: true };
+	} catch (error: any) {
+		return {
+			valid: false,
+			error: error.message || 'Unknown validation error'
+		};
+	}
+}

trigo-web/inc/trigo/ab0yz.ts

@@ -0,0 +1,120 @@
+
+// remove ones at tail
+const compactShape = (shape: number[]): number[] => shape[shape.length - 1] === 1 ? compactShape(shape.slice(0, shape.length - 1)) : shape;
+
+
+/**
+ * Encode a position to TGN coordinate string.
+ *
+ * Coordinate system:
+ * - '0' represents the center position on an axis
+ * - 'a', 'b', 'c', ... from one edge toward center
+ * - 'z', 'y', 'x', ... from opposite edge toward center
+ *
+ * @param pos - Position array [x, y, z, ...] with 0-based indices
+ * @param boardShape - Board dimensions [sizeX, sizeY, sizeZ, ...]
+ * @returns TGN coordinate string (e.g., "000", "aa0", "bzz", "aa", "0")
+ *
+ * @example
+ * encodeAb0yz([2, 2, 2], [5, 5, 5]) // "000" - center of 5x5x5 board
+ * encodeAb0yz([0, 0, 2], [5, 5, 5]) // "aa0" - corner
+ * encodeAb0yz([4, 2, 2], [5, 5, 5]) // "z00"
+ * encodeAb0yz([0, 0, 0], [19, 19, 1]) // "aa" - 2D board (trailing 1 ignored)
+ */
+const encodeAb0yz = (pos: number[], boardShape: number[]): string => {
+	const compactedShape = compactShape(boardShape);
+	const result: string[] = [];
+
+	for (let i = 0; i < compactedShape.length; i++) {
+		const size = compactedShape[i];
+		const center = (size - 1) / 2;
+		const index = pos[i];
+
+		if (index === center) {
+			// Center position
+			result.push('0');
+		} else if (index < center) {
+			// Left side: a, b, c, ...
+			result.push(String.fromCharCode(97 + index)); // 'a' = 97
+		} else {
+			// Right side: z, y, x, ...
+			const offset = size - 1 - index;
+			result.push(String.fromCharCode(122 - offset)); // 'z' = 122
+		}
+	}
+
+	return result.join('');
+};
+
+
+/**
+ * Decode a TGN coordinate string to position array.
+ *
+ * @param code - TGN coordinate string (e.g., "000", "aa0", "bzz", "aa", "0")
+ * @param boardShape - Board dimensions [sizeX, sizeY, sizeZ, ...]
+ * @returns Position array [x, y, z, ...] with 0-based indices
+ *
+ * @example
+ * decodeAb0yz("000", [5, 5, 5]) // [2, 2, 2] - center
+ * decodeAb0yz("aa0", [5, 5, 5]) // [0, 0, 2]
+ * decodeAb0yz("z00", [5, 5, 5]) // [4, 2, 2]
+ * decodeAb0yz("aa", [19, 19, 1]) // [0, 0, 0] - 2D board
+ */
+const decodeAb0yz = (code: string, boardShape: number[]): number[] => {
+	const compactedShape = compactShape(boardShape);
+
+	if (code.length !== compactedShape.length) {
+		throw new Error(`Invalid TGN coordinate: "${code}" (must be ${compactedShape.length} characters for board shape ${boardShape.join('x')})`);
+	}
+
+	const result: number[] = [];
+
+	for (let i = 0; i < compactedShape.length; i++) {
+		const char = code[i];
+		const size = compactedShape[i];
+		const center = (size - 1) / 2;
+
+		if (char === '0') {
+			// Center position
+			console.assert(Number.isInteger(center));
+			result.push(center);
+		} else {
+			const charCode = char.charCodeAt(0);
+
+			if (charCode >= 97 && charCode <= 122) { // 'a' to 'z'
+				// Calculate distance from 'a' and 'z'
+				const distFromA = charCode - 97;
+				const distFromZ = 122 - charCode;
+
+				// Determine if it's left side (closer to 'a') or right side (closer to 'z')
+				if (distFromA < distFromZ) {
+					// Left side: a=0, b=1, c=2, ...
+					const index = distFromA;
+					if (index >= center) {
+						throw new Error(`Invalid TGN coordinate: "${code}" (position ${index} >= center ${center} on axis ${i})`);
+					}
+					result.push(index);
+				} else {
+					// Right side: z=size-1, y=size-2, x=size-3, ...
+					const index = size - 1 - distFromZ;
+					if (index <= center) {
+						throw new Error(`Invalid TGN coordinate: "${code}" (position ${index} <= center ${center} on axis ${i})`);
+					}
+					result.push(index);
+				}
+			} else {
+				throw new Error(`Invalid TGN coordinate: "${code}" (character '${char}' at position ${i} must be '0' or a-z)`);
+			}
+		}
+	}
+
+	// Fill remaining dimensions with 0 if boardShape has trailing 1s
+	while (result.length < boardShape.length) {
+		result.push(0);
+	}
+
+	return result;
+};
+
+
+export { encodeAb0yz, decodeAb0yz };

trigo-web/inc/trigo/game.ts

@@ -0,0 +1,1137 @@
+/**
+ * TrigoGame Class - Main Game State Management
+ *
+ * Modern reimplementation of prototype's trigo.Game
+ * Integrates game state, move history, and game logic in a single class
+ *
+ * Equivalent to: third_party/klstrigo/Source/static/js/trigo.game.js:75-601
+ */
+
+import type { Position, Stone, BoardShape } from "./types";
+import {
+	StoneType,
+	getEnemyColor,
+	validateMove,
+	findCapturedGroups,
+	executeCaptures,
+	calculateTerritory,
+	type TerritoryResult
+} from "./gameUtils";
+import { encodeAb0yz, decodeAb0yz } from "./ab0yz";
+import { parseTGN, validateTGN, TGNParseError } from "../tgn/tgnParser";
+
+
+// Re-export StoneType for convenient access with TrigoGame
+export { StoneType } from "./gameUtils";
+
+
+/**
+ * Step Types - Different types of moves in the game
+ * Equivalent to trigo.Game.StepType in prototype
+ */
+export enum StepType {
+	DROP = 0,      // Place a stone
+	PASS = 1,      // Pass turn
+	SURRENDER = 2, // Resign/surrender
+	UNDO = 3       // Undo last move (called "REPENT" in prototype)
+}
+
+
+/**
+ * Game Status enumeration
+ */
+export type GameStatus = "idle" | "playing" | "paused" | "finished";
+
+
+/**
+ * Game Result information
+ */
+export interface GameResult {
+	winner: "black" | "white" | "draw";
+	reason: "resignation" | "timeout" | "completion" | "double-pass";
+	score?: TerritoryResult;
+}
+
+
+/**
+ * Step - Represents a single move in the game
+ * Equivalent to step objects in prototype's StepHistory
+ */
+export interface Step {
+	type: StepType;
+	position?: Position;       // Only for DROP moves
+	player: Stone;             // Which player made this move
+	capturedPositions?: Position[]; // Stones captured by this move
+	timestamp: number;         // When the move was made
+}
+
+
+/**
+ * Game Callbacks - Event handlers for game state changes
+ * Equivalent to Callbacks in prototype's trigo.Game constructor
+ */
+export interface GameCallbacks {
+	onStepAdvance?: (step: Step, history: Step[]) => void;
+	onStepBack?: (step: Step, history: Step[]) => void;
+	onCapture?: (capturedPositions: Position[]) => void;
+	onWin?: (winner: Stone) => void;
+	onTerritoryChange?: (territory: TerritoryResult) => void;
+}
+
+
+/**
+ * TrigoGame - Main game class managing state, history, and logic
+ *
+ * Equivalent to trigo.Game in prototype (lines 75-395)
+ *
+ * Key features:
+ * - Maintains game board state
+ * - Tracks complete move history
+ * - Implements Go rules (capture, Ko, suicide)
+ * - Supports undo/redo functionality
+ * - Territory calculation
+ */
+export class TrigoGame {
+	// Game configuration
+	private shape: BoardShape;
+	private callbacks: GameCallbacks;
+
+	// Game state
+	private board: Stone[][][];
+	private currentPlayer: Stone;
+	private stepHistory: Step[];
+	private currentStepIndex: number;
+
+	// Game status management
+	private gameStatus: GameStatus;
+	private gameResult?: GameResult;
+	private passCount: number;
+
+	// Last captured stones for Ko rule detection
+	private lastCapturedPositions: Position[] | null = null;
+
+	// Territory cache
+	private territoryDirty: boolean = true;
+	private cachedTerritory: TerritoryResult | null = null;
+
+
+	/**
+	 * Constructor
+	 * Equivalent to trigo.Game constructor (lines 75-85)
+	 */
+	constructor(shape: BoardShape = { x: 5, y: 5, z: 5 }, callbacks: GameCallbacks = {}) {
+		this.shape = shape;
+		this.callbacks = callbacks;
+		this.board = this.createEmptyBoard();
+		this.currentPlayer = StoneType.BLACK;
+		this.stepHistory = [];
+		this.currentStepIndex = 0;
+		this.gameStatus = "idle";
+		this.gameResult = undefined;
+		this.passCount = 0;
+	}
+
+
+	/**
+	 * Create an empty board
+	 */
+	private createEmptyBoard(): Stone[][][] {
+		const board: Stone[][][] = [];
+		for (let x = 0; x < this.shape.x; x++) {
+			board[x] = [];
+			for (let y = 0; y < this.shape.y; y++) {
+				board[x][y] = [];
+				for (let z = 0; z < this.shape.z; z++) {
+					board[x][y][z] = StoneType.EMPTY;
+				}
+			}
+		}
+		return board;
+	}
+
+
+	/**
+	 * Reset the game to initial state
+	 * Equivalent to Game.reset() (lines 153-163)
+	 */
+	reset(): void {
+		this.board = this.createEmptyBoard();
+		this.currentPlayer = StoneType.BLACK;
+		this.stepHistory = [];
+		this.currentStepIndex = 0;
+		this.lastCapturedPositions = null;
+		this.territoryDirty = true;
+		this.cachedTerritory = null;
+		this.gameStatus = "idle";
+		this.gameResult = undefined;
+		this.passCount = 0;
+	}
+
+
+	/**
+	 * Get current board state (read-only)
+	 */
+	getBoard(): Stone[][][] {
+		// Return a deep copy to prevent external modification
+		return this.board.map(plane => plane.map(row => [...row]));
+	}
+
+
+	/**
+	 * Get stone at specific position
+	 * Equivalent to Game.stone() (lines 95-97)
+	 */
+	getStone(pos: Position): Stone {
+		return this.board[pos.x][pos.y][pos.z];
+	}
+
+
+	/**
+	 * Get current player
+	 */
+	getCurrentPlayer(): Stone {
+		return this.currentPlayer;
+	}
+
+
+	/**
+	 * Get current step number
+	 * Equivalent to Game.currentStep() (lines 99-101)
+	 */
+	getCurrentStep(): number {
+		return this.currentStepIndex;
+	}
+
+
+	/**
+	 * Get move history
+	 * Equivalent to Game.routine() (lines 103-105)
+	 */
+	getHistory(): Step[] {
+		return [...this.stepHistory];
+	}
+
+
+	/**
+	 * Get last move
+	 * Equivalent to Game.lastStep() (lines 107-110)
+	 */
+	getLastStep(): Step | null {
+		if (this.currentStepIndex > 0) {
+			return this.stepHistory[this.currentStepIndex - 1];
+		}
+		return null;
+	}
+
+
+	/**
+	 * Get board shape
+	 * Equivalent to Game.shape() (lines 87-89)
+	 */
+	getShape(): BoardShape {
+		return { ...this.shape };
+	}
+
+
+	/**
+	 * Get game status
+	 */
+	getGameStatus(): GameStatus {
+		return this.gameStatus;
+	}
+
+
+	/**
+	 * Set game status
+	 */
+	setGameStatus(status: GameStatus): void {
+		this.gameStatus = status;
+	}
+
+
+	/**
+	 * Get game result
+	 */
+	getGameResult(): GameResult | undefined {
+		return this.gameResult;
+	}
+
+
+	/**
+	 * Get consecutive pass count
+	 */
+	getPassCount(): number {
+		return this.passCount;
+	}
+
+
+	/**
+	 * Recalculate consecutive pass count based on current history
+	 * Counts consecutive PASS steps from the end of current history
+	 */
+	private recalculatePassCount(): void {
+		this.passCount = 0;
+
+		// Count backwards from current position to find consecutive passes
+		for (let i = this.currentStepIndex - 1; i >= 0; i--) {
+			if (this.stepHistory[i].type === StepType.PASS) {
+				this.passCount++;
+			} else {
+				break; // Stop at first non-pass move
+			}
+		}
+	}
+
+
+	/**
+	 * Start the game
+	 */
+	startGame(): void {
+		if (this.gameStatus === "idle") {
+			this.gameStatus = "playing";
+		}
+	}
+
+
+	/**
+	 * Check if game is active
+	 */
+	isGameActive(): boolean {
+		return this.gameStatus === "playing";
+	}
+
+
+	/**
+	 * Check if a move is valid
+	 * Equivalent to Game.isDropable() and Game.isValidStep() (lines 112-151)
+	 */
+	isValidMove(pos: Position, player?: Stone): { valid: boolean; reason?: string } {
+		const playerColor = player || this.currentPlayer;
+		return validateMove(pos, playerColor, this.board, this.shape, this.lastCapturedPositions);
+	}
+
+
+	/**
+	 * Reset pass count (called when a stone is placed)
+	 */
+	private resetPassCount(): void {
+		this.passCount = 0;
+	}
+
+
+	/**
+	 * Place a stone (drop move)
+	 * Equivalent to Game.drop() and Game.appendStone() (lines 181-273)
+	 *
+	 * @returns true if move was successful, false otherwise
+	 */
+	drop(pos: Position): boolean {
+		// Validate the move
+		const validation = this.isValidMove(pos);
+		if (!validation.valid) {
+			console.warn(`Invalid move at (${pos.x}, ${pos.y}, ${pos.z}): ${validation.reason}`);
+			return false;
+		}
+
+		// Find captured groups BEFORE placing the stone
+		const capturedGroups = findCapturedGroups(pos, this.currentPlayer, this.board, this.shape);
+
+		// Place the stone on the board
+		this.board[pos.x][pos.y][pos.z] = this.currentPlayer;
+
+		// Execute captures
+		const capturedPositions = executeCaptures(capturedGroups, this.board);
+
+		// Store captured positions for Ko rule
+		this.lastCapturedPositions = capturedPositions.length > 0 ? capturedPositions : null;
+
+		// Mark territory as dirty
+		this.territoryDirty = true;
+
+		// Reset pass count when a stone is placed
+		this.resetPassCount();
+
+		// Create step record
+		const step: Step = {
+			type: StepType.DROP,
+			position: pos,
+			player: this.currentPlayer,
+			capturedPositions: capturedPositions.length > 0 ? capturedPositions : undefined,
+			timestamp: Date.now()
+		};
+
+		// Advance to next step
+		this.advanceStep(step);
+
+		// Trigger callbacks
+		if (capturedPositions.length > 0 && this.callbacks.onCapture) {
+			this.callbacks.onCapture(capturedPositions);
+		}
+
+		if (this.territoryDirty && this.callbacks.onTerritoryChange) {
+			this.callbacks.onTerritoryChange(this.getTerritory());
+		}
+
+		return true;
+	}
+
+
+	/**
+	 * Pass turn
+	 * Equivalent to PASS step type in prototype
+	 */
+	pass(): boolean {
+		const step: Step = {
+			type: StepType.PASS,
+			player: this.currentPlayer,
+			timestamp: Date.now()
+		};
+
+		this.lastCapturedPositions = null;
+
+		// Increment pass count
+		this.passCount++;
+
+		// Advance step
+		this.advanceStep(step);
+
+		// Check for double pass (game end condition)
+		if (this.passCount >= 2) {
+			// Calculate territory to determine winner
+			const territory = this.getTerritory();
+			const capturedCounts = this.getCapturedCounts();
+			const blackTotal = territory.black + capturedCounts.white; // black's territory + white stones captured
+			const whiteTotal = territory.white + capturedCounts.black; // white's territory + black stones captured
+
+			let winner: "black" | "white" | "draw";
+			if (blackTotal > whiteTotal) {
+				winner = "black";
+			} else if (whiteTotal > blackTotal) {
+				winner = "white";
+			} else {
+				winner = "draw";
+			}
+
+			this.gameResult = {
+				winner,
+				reason: "double-pass",
+				score: territory
+			};
+
+			this.gameStatus = "finished";
+
+			// Trigger win callback
+			if (this.callbacks.onWin) {
+				const winnerStone = winner === "black" ? StoneType.BLACK :
+				                     winner === "white" ? StoneType.WHITE : StoneType.EMPTY;
+				this.callbacks.onWin(winnerStone);
+			}
+		}
+
+		return true;
+	}
+
+
+	/**
+	 * Surrender/resign
+	 * Equivalent to Game.step() with SURRENDER type (lines 176-178)
+	 */
+	surrender(): boolean {
+		const surrenderingPlayer = this.currentPlayer;  // Remember who surrendered
+
+		const step: Step = {
+			type: StepType.SURRENDER,
+			player: this.currentPlayer,
+			timestamp: Date.now()
+		};
+
+		this.advanceStep(step);
+
+		// Set game result - opponent of surrendering player wins
+		const winner = surrenderingPlayer === StoneType.BLACK ? "white" : "black";
+		this.gameResult = {
+			winner,
+			reason: "resignation"
+		};
+		this.gameStatus = "finished";
+
+		// Trigger win callback for the opponent
+		const winnerStone = getEnemyColor(surrenderingPlayer);
+		if (this.callbacks.onWin) {
+			this.callbacks.onWin(winnerStone);
+		}
+
+		return true;
+	}
+
+
+	/**
+	 * Undo last move
+	 * Equivalent to Game.repent() (lines 197-230)
+	 *
+	 * @returns true if undo was successful, false if no moves to undo
+	 */
+	undo(): boolean {
+		if (this.currentStepIndex === 0 || this.stepHistory.length === 0) {
+			return false;
+		}
+
+		const lastStep = this.stepHistory[this.currentStepIndex - 1];
+
+		// Revert the move
+		if (lastStep.type === StepType.DROP && lastStep.position) {
+			// Remove the placed stone
+			this.board[lastStep.position.x][lastStep.position.y][lastStep.position.z] = StoneType.EMPTY;
+
+			// Restore captured stones
+			if (lastStep.capturedPositions) {
+				const enemyColor = getEnemyColor(lastStep.player);
+				for (const pos of lastStep.capturedPositions) {
+					this.board[pos.x][pos.y][pos.z] = enemyColor;
+				}
+			}
+		}
+
+		// Move back in history
+		this.currentStepIndex--;
+		this.currentPlayer = lastStep.player; // Restore player who made that move
+
+		// Recalculate pass count based on new history position
+		this.recalculatePassCount();
+
+		// Update last captured positions for Ko rule
+		// Need to check the step before this one
+		if (this.currentStepIndex > 0) {
+			const previousStep = this.stepHistory[this.currentStepIndex - 1];
+			this.lastCapturedPositions = previousStep.capturedPositions || null;
+		} else {
+			this.lastCapturedPositions = null;
+		}
+
+		// Mark territory as dirty
+		this.territoryDirty = true;
+
+		// Trigger callback
+		if (this.callbacks.onStepBack) {
+			this.callbacks.onStepBack(lastStep, this.stepHistory.slice(0, this.currentStepIndex));
+		}
+
+		return true;
+	}
+
+
+	/**
+	 * Redo next move (after undo)
+	 *
+	 * @returns true if redo was successful, false if no moves to redo
+	 */
+	redo(): boolean {
+		// Check if we can redo (not at the end of history)
+		if (this.currentStepIndex >= this.stepHistory.length) {
+			return false;
+		}
+
+		const nextStep = this.stepHistory[this.currentStepIndex];
+
+		// Re-apply the move
+		if (nextStep.type === StepType.DROP && nextStep.position) {
+			// Place the stone
+			this.board[nextStep.position.x][nextStep.position.y][nextStep.position.z] = nextStep.player;
+
+			// Re-execute captures if there were any
+			if (nextStep.capturedPositions) {
+				for (const pos of nextStep.capturedPositions) {
+					this.board[pos.x][pos.y][pos.z] = StoneType.EMPTY;
+				}
+			}
+
+			// Update last captured positions
+			this.lastCapturedPositions = nextStep.capturedPositions || null;
+		} else if (nextStep.type === StepType.PASS) {
+			this.lastCapturedPositions = null;
+		}
+
+		// Move forward in history
+		this.currentStepIndex++;
+		this.currentPlayer = getEnemyColor(nextStep.player); // Switch to next player
+
+		// Mark territory as dirty
+		this.territoryDirty = true;
+
+		// Trigger callback
+		if (this.callbacks.onStepAdvance) {
+			this.callbacks.onStepAdvance(nextStep, this.stepHistory.slice(0, this.currentStepIndex));
+		}
+
+		return true;
+	}
+
+
+	/**
+	 * Check if redo is available
+	 */
+	canRedo(): boolean {
+		return this.currentStepIndex < this.stepHistory.length;
+	}
+
+
+	/**
+	 * Jump to specific step in history
+	 * Rebuilds board state after applying the first 'index' moves
+	 *
+	 * @param index Number of moves to apply from history (0 for initial state, 1 for after first move, etc.)
+	 * @returns true if jump was successful
+	 */
+	jumpToStep(index: number): boolean {
+		// Validate index: allow 0 (initial state) up to stepHistory.length (all moves applied)
+		if (index < 0 || index > this.stepHistory.length) {
+			return false;
+		}
+
+		// If already at target index, return false (no change made)
+		if (index === this.currentStepIndex) {
+			return false;
+		}
+
+		// Rebuild board from scratch
+		this.board = this.createEmptyBoard();
+		this.lastCapturedPositions = null;
+
+		// Replay all moves up to (but not including) target index
+		// After this loop, we'll have applied 'index' number of moves
+		for (let i = 0; i < index; i++) {
+			const step = this.stepHistory[i];
+
+			if (step.type === StepType.DROP && step.position) {
+				const pos = step.position;
+
+				// Place the stone
+				this.board[pos.x][pos.y][pos.z] = step.player;
+
+				// Re-execute captures
+				if (step.capturedPositions) {
+					for (const capturedPos of step.capturedPositions) {
+						this.board[capturedPos.x][capturedPos.y][capturedPos.z] = StoneType.EMPTY;
+					}
+				}
+			}
+		}
+
+		// Set last captured positions from the last applied move (if any)
+		if (index > 0) {
+			const lastAppliedStep = this.stepHistory[index - 1];
+			if (lastAppliedStep.type === StepType.DROP) {
+				this.lastCapturedPositions = lastAppliedStep.capturedPositions || null;
+			} else if (lastAppliedStep.type === StepType.PASS) {
+				this.lastCapturedPositions = null;
+			}
+		} else {
+			this.lastCapturedPositions = null;
+		}
+
+		// Update current index
+		const oldStepIndex = this.currentStepIndex;
+		this.currentStepIndex = index;
+
+		// Set current player based on number of moves played
+		// currentStepIndex represents the number of moves applied
+		const movesPlayed = index;
+		this.currentPlayer = movesPlayed % 2 === 0 ? StoneType.BLACK : StoneType.WHITE;
+
+		// Recalculate pass count based on new history position
+		this.recalculatePassCount();
+
+		// Mark territory as dirty
+		this.territoryDirty = true;
+
+		// Trigger callback based on direction
+		if (index < oldStepIndex && this.callbacks.onStepBack) {
+			const currentStep = this.stepHistory[index];
+			this.callbacks.onStepBack(currentStep, this.stepHistory.slice(0, index + 1));
+		} else if (index > oldStepIndex && this.callbacks.onStepAdvance) {
+			const currentStep = this.stepHistory[index];
+			this.callbacks.onStepAdvance(currentStep, this.stepHistory.slice(0, index + 1));
+		}
+
+		return true;
+	}
+
+
+	/**
+	 * Advance to next step
+	 * Equivalent to Game.stepAdvance() (lines 279-287)
+	 */
+	private advanceStep(step: Step): void {
+		// If we're not at the end of history, truncate future steps
+		if (this.currentStepIndex < this.stepHistory.length) {
+			this.stepHistory = this.stepHistory.slice(0, this.currentStepIndex);
+		}
+
+		// Add the new step
+		this.stepHistory.push(step);
+		this.currentStepIndex++;
+
+		// Switch player
+		this.currentPlayer = getEnemyColor(this.currentPlayer);
+
+		// Trigger callback
+		if (this.callbacks.onStepAdvance) {
+			this.callbacks.onStepAdvance(step, this.stepHistory);
+		}
+	}
+
+
+	/**
+	 * Get territory calculation
+	 * Equivalent to Game.blackDomain() and Game.whiteDomain() (lines 232-244)
+	 *
+	 * Returns cached result if territory hasn't changed
+	 */
+	getTerritory(): TerritoryResult {
+		if (this.territoryDirty || !this.cachedTerritory) {
+			this.cachedTerritory = calculateTerritory(this.board, this.shape);
+			this.territoryDirty = false;
+		}
+		return this.cachedTerritory;
+	}
+
+
+	/**
+	 * Get captured stone counts up to current position in history
+	 * Only counts captures that have been played (up to currentStepIndex)
+	 */
+	getCapturedCounts(): { black: number; white: number } {
+		const counts = { black: 0, white: 0 };
+
+		// Only count captures up to current step index
+		for (let i = 0; i < this.currentStepIndex; i++) {
+			const step = this.stepHistory[i];
+			if (step.capturedPositions && step.capturedPositions.length > 0) {
+				// Captured stones belong to the enemy of the player who made the move
+				const enemyColor = getEnemyColor(step.player);
+				if (enemyColor === StoneType.BLACK) {
+					counts.black += step.capturedPositions.length;
+				} else if (enemyColor === StoneType.WHITE) {
+					counts.white += step.capturedPositions.length;
+				}
+			}
+		}
+
+		return counts;
+	}
+
+
+	/**
+	 * Serialize game state to JSON
+	 * Equivalent to Game.serialize() (lines 250-252)
+	 */
+	toJSON(): object {
+		return {
+			shape: this.shape,
+			currentPlayer: this.currentPlayer,
+			currentStepIndex: this.currentStepIndex,
+			history: this.stepHistory,
+			board: this.board,
+			gameStatus: this.gameStatus,
+			gameResult: this.gameResult,
+			passCount: this.passCount
+		};
+	}
+
+
+	/**
+	 * Load game state from JSON
+	 */
+	fromJSON(data: any): boolean {
+		try {
+			// Validate required fields
+			if (!data || typeof data !== "object") {
+				return false;
+			}
+
+			if (!data.shape || !data.board || !Array.isArray(data.history)) {
+				return false;
+			}
+
+			this.shape = data.shape;
+			this.currentPlayer = data.currentPlayer;
+			this.currentStepIndex = data.currentStepIndex;
+			this.stepHistory = data.history || [];
+			this.board = data.board;
+			this.gameStatus = data.gameStatus || "idle";
+			this.gameResult = data.gameResult;
+			this.passCount = data.passCount || 0;
+
+			// Recalculate last captured positions
+			if (this.currentStepIndex > 0) {
+				const lastStep = this.stepHistory[this.currentStepIndex - 1];
+				this.lastCapturedPositions = lastStep.capturedPositions || null;
+			} else {
+				this.lastCapturedPositions = null;
+			}
+
+			this.territoryDirty = true;
+			this.cachedTerritory = null;
+
+			return true;
+		} catch (error) {
+			console.error("Failed to load game state:", error);
+			return false;
+		}
+	}
+
+
+	/**
+	 * Get game statistics
+	 */
+	getStats(): {
+		totalMoves: number;
+		blackMoves: number;
+		whiteMoves: number;
+		capturedByBlack: number;
+		capturedByWhite: number;
+		territory: TerritoryResult;
+	} {
+		const captured = this.getCapturedCounts();
+		const territory = this.getTerritory();
+
+		let blackMoves = 0;
+		let whiteMoves = 0;
+
+		for (const step of this.stepHistory.slice(0, this.currentStepIndex)) {
+			if (step.type === StepType.DROP) {
+				if (step.player === StoneType.BLACK) {
+					blackMoves++;
+				} else if (step.player === StoneType.WHITE) {
+					whiteMoves++;
+				}
+			}
+		}
+
+		return {
+			totalMoves: this.currentStepIndex,
+			blackMoves,
+			whiteMoves,
+			capturedByBlack: captured.white, // Black captures white stones
+			capturedByWhite: captured.black, // White captures black stones
+			territory
+		};
+	}
+
+
+	/**
+	 * Save game state to sessionStorage
+	 *
+	 * @param key Storage key (default: "trigoGameState")
+	 * @returns true if save was successful
+	 */
+	saveToSessionStorage(key: string = "trigoGameState"): boolean {
+		// Check if sessionStorage is available (browser environment)
+		if (typeof globalThis !== "undefined" && (globalThis as any).sessionStorage) {
+			try {
+				const gameState = this.toJSON();
+				(globalThis as any).sessionStorage.setItem(key, JSON.stringify(gameState));
+				return true;
+			} catch (error) {
+				console.error("Failed to save game state to sessionStorage:", error);
+				return false;
+			}
+		}
+
+		console.warn("sessionStorage is not available");
+		return false;
+	}
+
+
+	/**
+	 * Load game state from sessionStorage
+	 *
+	 * @param key Storage key (default: "trigoGameState")
+	 * @returns true if load was successful
+	 */
+	loadFromSessionStorage(key: string = "trigoGameState"): boolean {
+		// Check if sessionStorage is available (browser environment)
+		if (typeof globalThis !== "undefined" && (globalThis as any).sessionStorage) {
+			try {
+				const savedState = (globalThis as any).sessionStorage.getItem(key);
+				if (!savedState) {
+					console.log("No saved game state found");
+					return false;
+				}
+
+				const data = JSON.parse(savedState);
+				return this.fromJSON(data);
+			} catch (error) {
+				console.error("Failed to load game state from sessionStorage:", error);
+				return false;
+			}
+		}
+
+		console.warn("sessionStorage is not available");
+		return false;
+	}
+
+
+	/**
+	 * Clear saved game state from sessionStorage
+	 *
+	 * @param key Storage key (default: "trigoGameState")
+	 */
+	clearSessionStorage(key: string = "trigoGameState"): void {
+		// Check if sessionStorage is available (browser environment)
+		if (typeof globalThis !== "undefined" && (globalThis as any).sessionStorage) {
+			try {
+				(globalThis as any).sessionStorage.removeItem(key);
+			} catch (error) {
+				console.error("Failed to clear sessionStorage:", error);
+			}
+		} else {
+			console.warn("sessionStorage is not available");
+		}
+	}
+
+
+	/**
+	 * Export game to TGN (Trigo Game Notation) format
+	 *
+	 * TGN format is similar to PGN (Portable Game Notation) for chess.
+	 * It includes metadata tags and move sequence using ab0yz coordinate notation.
+	 *
+	 * @param metadata Optional metadata for the game (Event, Site, Date, Players, etc.)
+	 * @returns TGN-formatted string
+	 *
+	 * @example
+	 * const tgn = game.toTGN({
+	 *   event: "World Championship",
+	 *   site: "Tokyo",
+	 *   date: "2025.10.31",
+	 *   black: "Alice",
+	 *   white: "Bob"
+	 * });
+	 */
+	toTGN(metadata?: {
+		event?: string;
+		site?: string;
+		date?: string;
+		round?: string;
+		black?: string;
+		white?: string;
+		rules?: string;
+		timeControl?: string;
+		application?: string;
+		[key: string]: string | undefined;
+	}): string {
+		const lines: string[] = [];
+
+		// Add metadata tags
+		if (metadata) {
+			if (metadata.event) lines.push(`[Event "${metadata.event}"]`);
+			if (metadata.site) lines.push(`[Site "${metadata.site}"]`);
+			if (metadata.date) lines.push(`[Date "${metadata.date}"]`);
+			if (metadata.round) lines.push(`[Round "${metadata.round}"]`);
+			if (metadata.black) lines.push(`[Black "${metadata.black}"]`);
+			if (metadata.white) lines.push(`[White "${metadata.white}"]`);
+		}
+
+		// Add result if game is finished
+		if (this.gameStatus === "finished" && this.gameResult) {
+			let resultStr = "";
+			if (this.gameResult.winner === "black") {
+				resultStr = "B+";
+			} else if (this.gameResult.winner === "white") {
+				resultStr = "W+";
+			} else {
+				resultStr = "=";
+			}
+
+			// Add score information if available
+			if (this.gameResult.score) {
+				const { black, white } = this.gameResult.score;
+				const diff = Math.abs(black - white);
+				resultStr += `${diff}points`;
+			} else if (this.gameResult.reason === "resignation") {
+				resultStr += "resign";
+			}
+
+			lines.push(`[Result "${resultStr}"]`);
+		}
+
+		// Add board size (without quotes - parser expects unquoted board shape)
+		const boardStr = this.shape.z === 1
+			? `${this.shape.x}x${this.shape.y}`  // 2D board
+			: `${this.shape.x}x${this.shape.y}x${this.shape.z}`;  // 3D board
+		lines.push(`[Board ${boardStr}]`);
+
+		// Add optional metadata
+		if (metadata) {
+			if (metadata.rules) lines.push(`[Rules "${metadata.rules}"]`);
+			if (metadata.timeControl) lines.push(`[TimeControl "${metadata.timeControl}"]`);
+			if (metadata.application) lines.push(`[Application "${metadata.application}"]`);
+		}
+
+		// Add empty line after metadata
+		lines.push("");
+
+		// Generate move sequence
+		const moves: string[] = [];
+		let moveNumber = 1;
+
+		for (let i = 0; i < this.stepHistory.length; i++) {
+			const step = this.stepHistory[i];
+			let moveStr = "";
+
+			// Add move number at the start of each round (black's move)
+			if (step.player === StoneType.BLACK) {
+				moveStr = `${moveNumber}. `;
+			}
+
+			// Format the move
+			if (step.type === StepType.DROP && step.position) {
+				// Convert position to TGN coordinate
+				const pos = [step.position.x, step.position.y, step.position.z];
+				const boardShape = [this.shape.x, this.shape.y, this.shape.z];
+				const coord = encodeAb0yz(pos, boardShape);
+				moveStr += coord;
+			} else if (step.type === StepType.PASS) {
+				moveStr += "pass";
+			} else if (step.type === StepType.SURRENDER) {
+				moveStr += "resign";
+			}
+
+			moves.push(moveStr);
+
+			// Increment move number after white's move
+			if (step.player === StoneType.WHITE) {
+				moveNumber++;
+			}
+		}
+
+		// Format moves with proper line breaks
+		// Group moves in pairs (black, white) on the same line
+		let currentLine = "";
+		for (let i = 0; i < moves.length; i++) {
+			const move = moves[i];
+
+			if (move.match(/^\d+\./)) {
+				// Start of a new round (black's move)
+				if (currentLine) {
+					lines.push(currentLine);
+				}
+				currentLine = move;
+			} else {
+				// White's move - add to current line
+				currentLine += " " + move;
+			}
+		}
+
+		// Add the last line if it exists
+		if (currentLine) {
+			lines.push(currentLine);
+		}
+
+		// Add empty line at the end
+		lines.push("");
+
+		return lines.join("\n");
+	}
+
+
+	/**
+	 * Import game from TGN (Trigo Game Notation) format
+	 *
+	 * Static factory method that parses a TGN string and creates a new TrigoGame instance
+	 * with the board configuration and moves from the TGN file.
+	 *
+	 * Synchronous operation - requires parser to be loaded via setParserModule()
+	 *
+	 * @param tgnString TGN-formatted game notation string
+	 * @param callbacks Optional game callbacks
+	 * @returns New TrigoGame instance with the imported game state
+	 * @throws TGNParseError if the TGN string is invalid
+	 *
+	 * @example
+	 * const tgnString = `
+	 * [Event "World Championship"]
+	 * [Board "5x5x5"]
+	 * [Black "Alice"]
+	 * [White "Bob"]
+	 *
+	 * 1. 000 y00
+	 * 2. 0y0 pass
+	 * `;
+	 * const game = TrigoGame.fromTGN(tgnString);
+	 */
+	static fromTGN(tgnString: string, callbacks?: GameCallbacks): TrigoGame {
+		// Parse the TGN string (synchronous)
+		const parsed = parseTGN(tgnString);
+
+		// Extract board shape from tags
+		let boardShape: BoardShape;
+		if (parsed.tags.Board && Array.isArray(parsed.tags.Board)) {
+			const shape = parsed.tags.Board;
+			// Ensure we have at least 2 dimensions, default to 1 for z if not 3D
+			boardShape = {
+				x: shape[0] || 5,
+				y: shape[1] || 5,
+				z: shape[2] || 1
+			};
+		} else {
+			// Default to 5x5x5 if no board shape specified
+			boardShape = { x: 5, y: 5, z: 5 };
+		}
+
+		// Create new game instance using 'this' constructor
+		// This allows subclasses to automatically get their own type
+		const game = new this(boardShape, callbacks);
+		game.startGame();
+
+		// Replay all moves from the parsed data
+		if (parsed.moves && parsed.moves.length > 0) {
+			for (const round of parsed.moves) {
+				// Play black's move
+				if (round.action_black) {
+					game._applyParsedMove(round.action_black, boardShape);
+				}
+
+				// Play white's move if it exists
+				if (round.action_white) {
+					game._applyParsedMove(round.action_white, boardShape);
+				}
+			}
+		}
+
+		return game;
+	}
+
+
+	/**
+	 * Apply a parsed move action to the game
+	 * Private helper method for fromTGN
+	 *
+	 * @param action Parsed move action from TGN parser
+	 * @param boardShape Board dimensions for coordinate decoding
+	 */
+	private _applyParsedMove(action: { type: string; position?: string }, boardShape: BoardShape): void {
+		if (action.type === 'pass') {
+			this.pass();
+		} else if (action.type === 'resign') {
+			this.surrender();
+		} else if (action.type === 'move' && action.position) {
+			// Decode ab0yz coordinate to Position
+			const coords = decodeAb0yz(action.position, [boardShape.x, boardShape.y, boardShape.z]);
+			const position: Position = {
+				x: coords[0],
+				y: coords[1],
+				z: coords[2]
+			};
+
+			// Make the move
+			this.drop(position);
+		}
+	}
+}
+
+
+// Re-export parser utilities for convenience
+export { validateTGN, TGNParseError } from "../tgn/tgnParser";
+

trigo-web/inc/trigo/gameUtils.ts

@@ -0,0 +1,600 @@
+/**
+ * Game Logic Service - Core Go Rules Implementation
+ *
+ * Implements capture detection, Ko rule, and territory counting
+ * Ported from prototype trigo.game.js to modern TypeScript
+ */
+
+import type { Position, Stone, BoardShape } from "./types";
+
+export const StoneType = {
+	EMPTY: 0 as Stone,
+	BLACK: 1 as Stone,
+	WHITE: 2 as Stone
+};
+
+
+/**
+ * Get the enemy color of a given stone
+ *
+ * Equivalent to trigo.enemyColor() in prototype
+ */
+export function getEnemyColor(color: Stone): Stone {
+	if (color === StoneType.BLACK) return StoneType.WHITE;
+	if (color === StoneType.WHITE) return StoneType.BLACK;
+	return StoneType.EMPTY;
+}
+
+
+/**
+ * Check if a position is within board bounds
+ */
+export function isInBounds(pos: Position, shape: BoardShape): boolean {
+	return (
+		pos.x >= 0 && pos.x < shape.x &&
+		pos.y >= 0 && pos.y < shape.y &&
+		pos.z >= 0 && pos.z < shape.z
+	);
+}
+
+
+/**
+ * Get all neighboring positions (up to 6 in 3D: ±x, ±y, ±z)
+ *
+ * Equivalent to StoneArray.stoneNeighbors() in prototype
+ */
+export function getNeighbors(pos: Position, shape: BoardShape): Position[] {
+	const neighbors: Position[] = [];
+
+	// Check all 6 directions in 3D space
+	const directions = [
+		{ x: 1, y: 0, z: 0 },
+		{ x: -1, y: 0, z: 0 },
+		{ x: 0, y: 1, z: 0 },
+		{ x: 0, y: -1, z: 0 },
+		{ x: 0, y: 0, z: 1 },
+		{ x: 0, y: 0, z: -1 }
+	];
+
+	for (const dir of directions) {
+		const neighbor: Position = {
+			x: pos.x + dir.x,
+			y: pos.y + dir.y,
+			z: pos.z + dir.z
+		};
+
+		if (isInBounds(neighbor, shape)) {
+			neighbors.push(neighbor);
+		}
+	}
+
+	return neighbors;
+}
+
+
+/**
+ * Compare two positions for equality
+ */
+export function positionsEqual(p1: Position, p2: Position): boolean {
+	return p1.x === p2.x && p1.y === p2.y && p1.z === p2.z;
+}
+
+
+/**
+ * Coordinate Set - manages a set of positions (stones in a group or liberties)
+ */
+export class CoordSet {
+	private positions: Position[] = [];
+
+	has(pos: Position): boolean {
+		return this.positions.some((p) => positionsEqual(p, pos));
+	}
+
+	insert(pos: Position): boolean {
+		if (!this.has(pos)) {
+			this.positions.push(pos);
+			return true;
+		}
+		return false;
+	}
+
+	remove(pos: Position): void {
+		this.positions = this.positions.filter((p) => !positionsEqual(p, pos));
+	}
+
+	size(): number {
+		return this.positions.length;
+	}
+
+	empty(): boolean {
+		return this.positions.length === 0;
+	}
+
+	forEach(callback: (pos: Position, index: number) => void): void {
+		this.positions.forEach(callback);
+	}
+
+	toArray(): Position[] {
+		return [...this.positions];
+	}
+
+	clear(): void {
+		this.positions = [];
+	}
+}
+
+
+/**
+ * Patch - represents a connected group of same-colored stones
+ *
+ * Note: Called "Patch" in the original prototype (trigo.game.js)
+ * Equivalent to trigo.Game.Patch which extends trigo.CoordSet
+ */
+export class Patch {
+	positions: CoordSet = new CoordSet();
+	color: Stone = StoneType.EMPTY;
+
+	constructor(color: Stone = StoneType.EMPTY) {
+		this.color = color;
+	}
+
+	addStone(pos: Position): void {
+		this.positions.insert(pos);
+	}
+
+	size(): number {
+		return this.positions.size();
+	}
+
+	/**
+	 * Get all liberties (empty adjacent positions) for this group
+	 *
+	 * Equivalent to StoneArray.patchAir() in prototype
+	 * Returns a CoordSet of empty positions adjacent to this patch
+	 */
+	getLiberties(board: Stone[][][], shape: BoardShape): CoordSet {
+		const liberties = new CoordSet();
+
+		this.positions.forEach((stonePos) => {
+			const neighbors = getNeighbors(stonePos, shape);
+			for (const neighbor of neighbors) {
+				if (board[neighbor.x][neighbor.y][neighbor.z] === StoneType.EMPTY) {
+					liberties.insert(neighbor);
+				}
+			}
+		});
+
+		return liberties;
+	}
+}
+
+
+/**
+ * Find the connected group of stones at a given position
+ */
+export function findGroup(
+	pos: Position,
+	board: Stone[][][],
+	shape: BoardShape
+): Patch {
+	const color = board[pos.x][pos.y][pos.z];
+	const group = new Patch(color);
+
+	if (color === StoneType.EMPTY) {
+		return group;
+	}
+
+	// Flood fill to find all connected stones of the same color
+	const visited = new CoordSet();
+	const stack: Position[] = [pos];
+
+	while (stack.length > 0) {
+		const current = stack.pop()!;
+
+		if (visited.has(current)) {
+			continue;
+		}
+
+		visited.insert(current);
+
+		if (board[current.x][current.y][current.z] === color) {
+			group.addStone(current);
+
+			const neighbors = getNeighbors(current, shape);
+			for (const neighbor of neighbors) {
+				if (!visited.has(neighbor)) {
+					stack.push(neighbor);
+				}
+			}
+		}
+	}
+
+	return group;
+}
+
+
+/**
+ * Get all neighboring groups (different from current position's color)
+ */
+export function getNeighborGroups(
+	pos: Position,
+	board: Stone[][][],
+	shape: BoardShape,
+	excludeEmpty: boolean = false
+): Patch[] {
+	const neighbors = getNeighbors(pos, shape);
+	const groups: Patch[] = [];
+	const processedPositions = new CoordSet();
+
+	for (const neighbor of neighbors) {
+		if (processedPositions.has(neighbor)) {
+			continue;
+		}
+
+		const stone = board[neighbor.x][neighbor.y][neighbor.z];
+
+		if (excludeEmpty && stone === StoneType.EMPTY) {
+			continue;
+		}
+
+		if (stone !== StoneType.EMPTY) {
+			const group = findGroup(neighbor, board, shape);
+			group.positions.forEach((p) => processedPositions.insert(p));
+			groups.push(group);
+		}
+	}
+
+	return groups;
+}
+
+
+/**
+ * Check if a group would be captured (has no liberties)
+ */
+export function isGroupCaptured(
+	group: Patch,
+	board: Stone[][][],
+	shape: BoardShape
+): boolean {
+	const liberties = group.getLiberties(board, shape);
+	return liberties.size() === 0;
+}
+
+
+/**
+ * Find all groups that would be captured by placing a stone at position
+ *
+ * Equivalent to Game.killedPatches() in prototype
+ *
+ * Note: Prototype checks patchAir <= 1 BEFORE placement.
+ * We create a temp board with stone placed, then check for 0 liberties AFTER.
+ * Both approaches produce the same result.
+ */
+export function findCapturedGroups(
+	pos: Position,
+	playerColor: Stone,
+	board: Stone[][][],
+	shape: BoardShape
+): Patch[] {
+	const enemyColor = getEnemyColor(playerColor);
+	const captured: Patch[] = [];
+
+	// Create a temporary board with the new stone placed
+	const tempBoard = board.map((plane) => plane.map((row) => [...row]));
+	tempBoard[pos.x][pos.y][pos.z] = playerColor;
+
+	// Check all neighboring enemy groups
+	const neighborGroups = getNeighborGroups(pos, tempBoard, shape, true);
+
+	for (const group of neighborGroups) {
+		if (group.color === enemyColor) {
+			if (isGroupCaptured(group, tempBoard, shape)) {
+				captured.push(group);
+			}
+		}
+	}
+
+	return captured;
+}
+
+
+/**
+ * Check if placing a stone at position would result in self-capture (suicide)
+ *
+ * Equivalent to Game.isDeadStone() in prototype
+ *
+ * Exception: Move is allowed if it captures enemy stones first
+ */
+export function isSuicideMove(
+	pos: Position,
+	playerColor: Stone,
+	board: Stone[][][],
+	shape: BoardShape
+): boolean {
+	// Create temporary board with the new stone
+	const tempBoard = board.map((plane) => plane.map((row) => [...row]));
+	tempBoard[pos.x][pos.y][pos.z] = playerColor;
+
+	// If this move captures enemy stones, it's not suicide
+	const capturedGroups = findCapturedGroups(pos, playerColor, board, shape);
+	if (capturedGroups.length > 0) {
+		return false;
+	}
+
+	// Check if the placed stone's group has any liberties
+	const placedGroup = findGroup(pos, tempBoard, shape);
+	const liberties = placedGroup.getLiberties(tempBoard, shape);
+
+	return liberties.size() === 0;
+}
+
+
+/**
+ * Ko Detection - check if move would recreate previous board state
+ *
+ * Equivalent to "rob" check in Game.isDropable() (lines 127-132)
+ * Note: Ko rule is called "rob" (打劫 dǎjié) in the prototype
+ *
+ * Ko rule: Cannot immediately recapture a single stone if it would
+ * return the board to the previous position
+ */
+export function isKoViolation(
+	pos: Position,
+	playerColor: Stone,
+	board: Stone[][][],
+	shape: BoardShape,
+	lastCapturedPositions: Position[] | null
+): boolean {
+	// Ko only applies when:
+	// 1. We would capture exactly one stone
+	// 2. The previous move also captured exactly one stone
+	// 3. We're placing at the position of the previously captured stone
+
+	if (!lastCapturedPositions || lastCapturedPositions.length !== 1) {
+		return false;
+	}
+
+	const capturedGroups = findCapturedGroups(pos, playerColor, board, shape);
+
+	// Check if this move would capture exactly one stone
+	if (capturedGroups.length !== 1 || capturedGroups[0].size() !== 1) {
+		return false;
+	}
+
+	// Check if we're placing at the position that was just captured
+	const previouslyCaptured = lastCapturedPositions[0];
+	if (positionsEqual(pos, previouslyCaptured)) {
+		return true;
+	}
+
+	return false;
+}
+
+
+/**
+ * Execute captures on the board
+ * Returns the positions of captured stones
+ */
+export function executeCaptures(
+	capturedGroups: Patch[],
+	board: Stone[][][]
+): Position[] {
+	const capturedPositions: Position[] = [];
+
+	for (const group of capturedGroups) {
+		group.positions.forEach((pos) => {
+			board[pos.x][pos.y][pos.z] = StoneType.EMPTY;
+			capturedPositions.push(pos);
+		});
+	}
+
+	return capturedPositions;
+}
+
+
+/**
+ * Territory Calculation
+ *
+ * Determines which empty regions belong to which player
+ * An empty region belongs to a player if it's completely surrounded
+ * by that player's stones
+ */
+export interface TerritoryResult {
+	black: number;
+	white: number;
+	neutral: number;
+	blackTerritory: Position[];
+	whiteTerritory: Position[];
+	neutralTerritory: Position[];
+}
+
+
+/**
+ * Find all connected empty positions starting from a position
+ */
+function findEmptyRegion(
+	startPos: Position,
+	board: Stone[][][],
+	shape: BoardShape,
+	visited: CoordSet
+): CoordSet {
+	const region = new CoordSet();
+	const stack: Position[] = [startPos];
+
+	while (stack.length > 0) {
+		const pos = stack.pop()!;
+
+		if (visited.has(pos)) {
+			continue;
+		}
+
+		visited.insert(pos);
+
+		if (board[pos.x][pos.y][pos.z] === StoneType.EMPTY) {
+			region.insert(pos);
+
+			const neighbors = getNeighbors(pos, shape);
+			for (const neighbor of neighbors) {
+				if (!visited.has(neighbor)) {
+					stack.push(neighbor);
+				}
+			}
+		}
+	}
+
+	return region;
+}
+
+
+/**
+ * Determine which player owns an empty region
+ * Returns BLACK, WHITE, or EMPTY (neutral/dame)
+ *
+ * Equivalent to PatchList.spaceDomain() in prototype (lines 561-585)
+ * An empty region belongs to a player if ALL bordering stones are that color
+ */
+function determineRegionOwner(
+	region: CoordSet,
+	board: Stone[][][],
+	shape: BoardShape
+): Stone {
+	let owner: Stone = StoneType.EMPTY;
+	let solved = false;  // Flag to break out when we find mixed colors
+
+	region.forEach((pos) => {
+		if (solved) return;  // Skip if already determined to be neutral
+
+		const neighbors = getNeighbors(pos, shape);
+
+		for (const neighbor of neighbors) {
+			if (solved) break;  // Skip if already determined to be neutral
+
+			const stone = board[neighbor.x][neighbor.y][neighbor.z];
+
+			if (stone !== StoneType.EMPTY) {
+				if (owner === StoneType.EMPTY) {
+					// First colored stone we've found
+					owner = stone;
+				} else if (owner !== stone) {
+					// Found a different colored stone - region is neutral
+					owner = StoneType.EMPTY;
+					solved = true;  // Mark as solved so we stop checking
+				}
+			}
+		}
+	});
+
+	return owner;
+}
+
+
+/**
+ * Calculate territory for both players
+ *
+ * Equivalent to Game.calculateDomainSize() in prototype (lines 305-343)
+ * Uses PatchList.spaceDomain() logic to determine region ownership
+ *
+ * Algorithm:
+ * 1. First pass: Add all stones to their player's territory, collect empty regions
+ * 2. Second pass: Determine ownership of each empty region
+ */
+export function calculateTerritory(
+	board: Stone[][][],
+	shape: BoardShape
+): TerritoryResult {
+	const result: TerritoryResult = {
+		black: 0,
+		white: 0,
+		neutral: 0,
+		blackTerritory: [],
+		whiteTerritory: [],
+		neutralTerritory: []
+	};
+
+	const visited = new CoordSet();
+	const emptyRegions: CoordSet[] = [];
+
+	// FIRST PASS: Count all stones and find all empty regions
+	for (let x = 0; x < shape.x; x++) {
+		for (let y = 0; y < shape.y; y++) {
+			for (let z = 0; z < shape.z; z++) {
+				const pos: Position = { x, y, z };
+				const stone = board[x][y][z];
+
+				if (stone === StoneType.BLACK) {
+					result.black++;
+					result.blackTerritory.push(pos);
+				} else if (stone === StoneType.WHITE) {
+					result.white++;
+					result.whiteTerritory.push(pos);
+				} else if (!visited.has(pos)) {
+					// Found an empty position - explore the region and save it
+					const region = findEmptyRegion(pos, board, shape, visited);
+					emptyRegions.push(region);
+				}
+			}
+		}
+	}
+
+	// SECOND PASS: Determine ownership of each empty region
+	for (const region of emptyRegions) {
+		const owner = determineRegionOwner(region, board, shape);
+		const regionArray = region.toArray();
+
+		if (owner === StoneType.BLACK) {
+			result.black += region.size();
+			result.blackTerritory.push(...regionArray);
+		} else if (owner === StoneType.WHITE) {
+			result.white += region.size();
+			result.whiteTerritory.push(...regionArray);
+		} else {
+			result.neutral += region.size();
+			result.neutralTerritory.push(...regionArray);
+		}
+	}
+
+	return result;
+}
+
+
+/**
+ * Validate if a move is legal
+ *
+ * Equivalent to Game.isDropable() in prototype
+ * Checks: bounds, occupation, Ko rule ("rob"), suicide rule
+ */
+export interface MoveValidation {
+	valid: boolean;
+	reason?: string;
+}
+
+
+export function validateMove(
+	pos: Position,
+	playerColor: Stone,
+	board: Stone[][][],
+	shape: BoardShape,
+	lastCapturedPositions: Position[] | null = null
+): MoveValidation {
+	// Check bounds
+	if (!isInBounds(pos, shape)) {
+		return { valid: false, reason: "Position out of bounds" };
+	}
+
+	// Check if position is empty
+	if (board[pos.x][pos.y][pos.z] !== StoneType.EMPTY) {
+		return { valid: false, reason: "Position already occupied" };
+	}
+
+	// Check for Ko violation
+	if (isKoViolation(pos, playerColor, board, shape, lastCapturedPositions)) {
+		return { valid: false, reason: "Ko rule violation" };
+	}
+
+	// Check for suicide (self-capture)
+	if (isSuicideMove(pos, playerColor, board, shape)) {
+		return { valid: false, reason: "suicide move not allowed" };
+	}
+
+	return { valid: true };
+}

trigo-web/inc/trigo/index.ts

@@ -0,0 +1,5 @@
+
+export * from "./types";
+export * from "./gameUtils";
+export * from "./game";
+export * from "./typeAdapters";

trigo-web/inc/trigo/parserInit.ts

@@ -0,0 +1,135 @@
+/**
+ * Parser Initialization Module
+ *
+ * Loads pre-built parsers from public/lib and injects them into parser wrappers
+ * This allows the same synchronous API to work in both browser and Node.js
+ *
+ * Usage in Node.js tests:
+ * ```
+ * import { initializeParsers } from "@inc/trigo/parserInit"
+ * await initializeParsers()
+ * ```
+ *
+ * Usage in Vue app:
+ * Add to main.ts before using any game functionality
+ */
+
+import { setParserModule } from "../tgn/tgnParser";
+
+
+/**
+ * Check if we're in a browser environment
+ */
+function isBrowser(): boolean {
+	return typeof window !== "undefined" && typeof document !== "undefined";
+}
+
+
+/**
+ * Check if we're in a Node.js environment
+ */
+function isNode(): boolean {
+	return typeof process !== "undefined" && !!(process as any).versions && !!(process as any).versions.node;
+}
+
+
+/**
+ * Initialize all parsers for use in the application
+ * Should be called once at application startup
+ *
+ * In browser: Dynamically imports from /lib/
+ * In Node.js: Loads from project's public/lib directory
+ */
+export async function initializeParsers(): Promise<void> {
+	try {
+		if (isBrowser()) {
+			await initializeParsersForBrowser();
+		} else if (isNode()) {
+			await initializeParsersForNode();
+		} else {
+			throw new Error("Unable to determine runtime environment");
+		}
+	} catch (error) {
+		console.error("❌ Failed to initialize parsers:", error);
+		throw error;
+	}
+}
+
+
+/**
+ * Initialize parsers for browser environment
+ * Loads parsers from /lib/ which is served by Vite in dev and included in build
+ */
+async function initializeParsersForBrowser(): Promise<void> {
+	try {
+		// In browser, fetch the parser from the public directory
+		// Vite serves /public as / so /lib/tgnParser.cjs maps to public/lib/tgnParser.cjs
+		const libPath = "/" + "lib/tgnParser.cjs";
+
+		const response = await fetch(libPath);
+		if (!response.ok) {
+			throw new Error(`Failed to fetch parser: ${response.status} ${response.statusText}`);
+		}
+
+		const code = await response.text();
+
+		// Create a CommonJS module environment
+		// The jison parser checks: if (typeof require !== 'undefined' && typeof exports !== 'undefined')
+		// So we need to make these available as variables in the eval scope
+		const module: any = { exports: {} };
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		const exports = module.exports;
+
+		// We need 'require' to be defined (but can be a dummy)
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		const require = function() { throw new Error("require not available in browser"); };
+
+		// Eval in a scope where module, exports, and require are defined
+		// eslint-disable-next-line no-eval
+		eval(code);
+
+		// The jison parser exports: exports.parser = tgnParser
+		// So module.exports.parser is the actual parser instance
+		const parser = module.exports.parser;
+
+		if (!parser || typeof parser.parse !== 'function') {
+			throw new Error("Parser loaded but parse method not available");
+		}
+
+		setParserModule(parser);
+	} catch (error) {
+		console.error("✗ Failed to load TGN parser:", error);
+		throw error;
+	}
+}
+
+
+/**
+ * Initialize parsers for Node.js environment
+ * Loads parsers from project's public/lib directory
+ */
+async function initializeParsersForNode(): Promise<void> {
+	try {
+		// Import Node.js modules dynamically
+		const pathModule = await import("path");
+		const urlModule = await import("url");
+
+		const path = pathModule.default;
+		const { fileURLToPath, pathToFileURL } = urlModule;
+
+		// Get project root directory
+		const __dirname = path.dirname(fileURLToPath(import.meta.url));
+		const projectRoot = path.resolve(__dirname, "../..");
+		const libPath = path.resolve(projectRoot, "public/lib");
+
+		// Load TGN parser
+		const tgnParserPath = path.resolve(libPath, "tgnParser.cjs");
+		const tgnParserModule = await import(/* @vite-ignore */ pathToFileURL(tgnParserPath).href);
+		const tgnParser = (tgnParserModule as any).parser;
+
+		setParserModule(tgnParser);
+	} catch (error) {
+		console.error("✗ Failed to load TGN parser:", error);
+		throw error;
+	}
+}

trigo-web/inc/trigo/typeAdapters.ts

@@ -0,0 +1,110 @@
+/**
+ * Type Adapters - Convert between frontend string types and TrigoGame number types
+ *
+ * Frontend gameStore uses string types like "black"|"white" for better readability
+ * TrigoGame uses number enum (StoneType) for better performance and compatibility with legacy code
+ *
+ * This module provides conversion functions between these two systems
+ */
+
+import type { Stone, Position, Player, Move } from "./types";
+import { StoneType } from "./game";
+import type { Step } from "./game";
+
+
+/**
+ * Convert Player string to Stone number
+ *
+ * @param player "black" | "white"
+ * @returns StoneType.BLACK | StoneType.WHITE
+ */
+export function playerToStone(player: Player): Stone {
+	return player === "black" ? StoneType.BLACK : StoneType.WHITE;
+}
+
+
+/**
+ * Convert Stone number to Player string
+ *
+ * @param stone StoneType enum value
+ * @returns "black" | "white"
+ */
+export function stoneToPlayer(stone: Stone): Player {
+	if (stone === StoneType.BLACK) {
+		return "black";
+	} else if (stone === StoneType.WHITE) {
+		return "white";
+	}
+	// Default to black if EMPTY or invalid
+	return "black";
+}
+
+
+/**
+ * Convert Step (TrigoGame format) to Move (frontend format)
+ *
+ * @param step Step from TrigoGame history
+ * @returns Move for frontend gameStore
+ */
+export function stepToMove(step: Step): Move {
+	const move: Move = {
+		player: stoneToPlayer(step.player),
+		timestamp: new Date(step.timestamp)
+	};
+
+	// If it's a DROP move, include position
+	if (step.position) {
+		move.x = step.position.x;
+		move.y = step.position.y;
+		move.z = step.position.z;
+	}
+
+	// If it's a PASS move, set flag
+	if (step.type === 1) { // StepType.PASS
+		move.isPass = true;
+	}
+
+	return move;
+}
+
+
+/**
+ * Convert array of Steps to array of Moves
+ *
+ * @param steps Array of Steps from TrigoGame
+ * @returns Array of Moves for frontend
+ */
+export function stepsToMoves(steps: Step[]): Move[] {
+	return steps.map(stepToMove);
+}
+
+
+/**
+ * Convert board (Stone[][][]) to frontend format (number[][][])
+ *
+ * Frontend may prefer explicit number format
+ * 0 = Empty, 1 = Black, 2 = White
+ *
+ * @param board TrigoGame board
+ * @returns Frontend board format
+ */
+export function boardToNumbers(board: Stone[][][]): number[][][] {
+	return board.map(plane =>
+		plane.map(row =>
+			row.map(cell => cell as number)
+		)
+	);
+}
+
+
+/**
+ * Helper: Create Position object from coordinates
+ *
+ * @param x X coordinate
+ * @param y Y coordinate
+ * @param z Z coordinate
+ * @returns Position object
+ */
+export function makePosition(x: number, y: number, z: number): Position {
+	return { x, y, z };
+}

trigo-web/inc/trigo/types.ts

@@ -0,0 +1,48 @@
+export interface Position {
+	x: number;
+	y: number;
+	z: number;
+}
+
+export interface Move {
+	x?: number;
+	y?: number;
+	z?: number;
+	player: "black" | "white";
+	timestamp?: Date;
+	isPass?: boolean;
+}
+
+export interface BoardShape {
+	x: number;
+	y: number;
+	z: number;
+}
+
+export interface GameConfig {
+	boardShape: BoardShape;
+	timeLimit?: number;
+	allowUndo: boolean;
+}
+
+export enum Stone {
+	Empty = 0,
+	Black = 1,
+	White = 2
+}
+
+export type Player = "black" | "white";
+
+export interface GameRecord {
+	id: string;
+	moves: Move[];
+	result?: {
+		winner: Player | "draw";
+		reason: "resignation" | "timeout" | "completion" | "double-pass";
+	};
+	createdAt: Date;
+	players: {
+		black: string;
+		white: string;
+	};
+}

trigo-web/inc/tsconfig.json

@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"target": "ES2020",
+		"module": "ESNext",
+		"lib": ["ES2020", "DOM"],
+		"strict": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"forceConsistentCasingInFileNames": true,
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"noEmit": true
+	},
+	"include": ["**/*.ts", "**/*.d.ts"],
+	"exclude": ["node_modules", "dist"]
+}

trigo-web/package.json

@@ -0,0 +1,52 @@
+{
+	"name": "trigo-web",
+	"version": "1.0.0",
+	"type": "module",
+	"description": "3D Go board game with Vue3 and Node.js",
+	"scripts": {
+		"dev": "concurrently \"npm run dev:backend\" \"npm run dev:app\"",
+		"dev:app": "cd app && npm run dev",
+		"dev:backend": "cd backend && npm run dev",
+		"build": "npm run build:app && npm run build:backend",
+		"build:app": "cd app && npm run build",
+		"build:backend": "cd backend && npm run build",
+		"build:parsers": "npm run build:parser:tgn",
+		"build:parser:tgn": "tsx tools/buildJisonParser.ts",
+		"install:all": "npm install && cd app && npm install && cd ../backend && npm install",
+		"start:prod": "cd backend && npm start",
+		"format": "prettier --write \"**/*.{js,ts,vue,json,md,scss,css}\"",
+		"format:check": "prettier --check \"**/*.{js,ts,vue,json,md,scss,css}\"",
+		"test": "vitest",
+		"test:ui": "vitest --ui",
+		"test:run": "vitest run",
+		"generate:games": "tsx tools/generateRandomGames.ts"
+	},
+	"keywords": [
+		"game",
+		"go",
+		"3d",
+		"vue",
+		"nodejs",
+		"websocket"
+	],
+	"author": "",
+	"license": "MIT",
+	"devDependencies": {
+		"@types/node": "^24.10.0",
+		"@types/yargs": "^17.0.34",
+		"@vitejs/plugin-vue": "^5.2.4",
+		"@vitest/ui": "^4.0.6",
+		"concurrently": "^7.6.0",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-prettier": "^5.5.4",
+		"jison": "^0.4.18",
+		"jsdom": "^27.1.0",
+		"prettier": "^3.6.2",
+		"tsx": "^4.20.6",
+		"typescript": "^5.2.2",
+		"vite": "^5.4.21",
+		"vitest": "^4.0.6",
+		"vue": "^3.3.4",
+		"yargs": "^18.0.0"
+	}
+}

trigo-web/public/lib/tgnParser.cjs

@@ -0,0 +1,791 @@
+/* parser generated by jison 0.4.18 */
+/*
+  Returns a Parser object of the following structure:
+
+  Parser: {
+    yy: {}
+  }
+
+  Parser.prototype: {
+    yy: {},
+    trace: function(),
+    symbols_: {associative list: name ==> number},
+    terminals_: {associative list: number ==> name},
+    productions_: [...],
+    performAction: function anonymous(yytext, yyleng, yylineno, yy, yystate, $$, _$),
+    table: [...],
+    defaultActions: {...},
+    parseError: function(str, hash),
+    parse: function(input),
+
+    lexer: {
+        EOF: 1,
+        parseError: function(str, hash),
+        setInput: function(input),
+        input: function(),
+        unput: function(str),
+        more: function(),
+        less: function(n),
+        pastInput: function(),
+        upcomingInput: function(),
+        showPosition: function(),
+        test_match: function(regex_match_array, rule_index),
+        next: function(),
+        lex: function(),
+        begin: function(condition),
+        popState: function(),
+        _currentRules: function(),
+        topState: function(),
+        pushState: function(condition),
+
+        options: {
+            ranges: boolean           (optional: true ==> token location info will include a .range[] member)
+            flex: boolean             (optional: true ==> flex-like lexing behaviour where the rules are tested exhaustively to find the longest match)
+            backtrack_lexer: boolean  (optional: true ==> lexer regexes are tested in order and for each matching regex the action code is invoked; the lexer terminates the scan when a token is returned by the action code)
+        },
+
+        performAction: function(yy, yy_, $avoiding_name_collisions, YY_START),
+        rules: [...],
+        conditions: {associative list: name ==> set},
+    }
+  }
+
+
+  token location info (@$, _$, etc.): {
+    first_line: n,
+    last_line: n,
+    first_column: n,
+    last_column: n,
+    range: [start_number, end_number]       (where the numbers are indexes into the input string, regular zero-based)
+  }
+
+
+  the parseError function receives a 'hash' object with these members for lexer and parser errors: {
+    text:        (matched text)
+    token:       (the produced terminal token, if any)
+    line:        (yylineno)
+  }
+  while parser (grammar) errors will also provide these members, i.e. parser errors deliver a superset of attributes: {
+    loc:         (yylloc)
+    expected:    (string describing the set of expected tokens)
+    recoverable: (boolean: TRUE when the parser has a error recovery rule available for this particular error)
+  }
+*/
+var tgnParser = (function(){
+var o=function(k,v,o,l){for(o=o||{},l=k.length;l--;o[k[l]]=v);return o},$V0=[1,7],$V1=[2,25],$V2=[6,8,49],$V3=[1,32],$V4=[6,49],$V5=[11,49],$V6=[11,48],$V7=[1,51],$V8=[1,52],$V9=[1,53],$Va=[6,36,37,38,49];
+var parser = {trace: function trace () { },
+yy: {},
+symbols_: {"error":2,"game":3,"tag_section":4,"move_section":5,"EOF":6,"tag_pair":7,"[":8,"tag_name":9,"STRING":10,"]":11,"TAG_RESULT":12,"game_result":13,"TAG_BOARD":14,"board_shape":15,"TAG_EVENT":16,"TAG_SITE":17,"TAG_DATE":18,"TAG_ROUND":19,"TAG_BLACK":20,"TAG_WHITE":21,"TAG_HANDICAP":22,"TAG_RULES":23,"TAG_TIMECONTROL":24,"TAG_ANNOTATOR":25,"TAG_APPLICATION":26,"TAG_NAME":27,"move_sequence":28,"move_sequence_intact":29,"move_sequence_truncated":30,"move_round":31,"move_round_half":32,"number":33,"DOT":34,"move_action":35,"PASS":36,"RESIGN":37,"COORDINATE":38,"win":39,"conquer":40,"=":41,"*":42,"RESULT_BLACK":43,"RESULT_WHITE":44,"conquer_unit":45,"POINTS":46,"STONES":47,"TIMES":48,"NUMBER":49,"$accept":0,"$end":1},
+terminals_: {2:"error",6:"EOF",8:"[",10:"STRING",11:"]",12:"TAG_RESULT",14:"TAG_BOARD",16:"TAG_EVENT",17:"TAG_SITE",18:"TAG_DATE",19:"TAG_ROUND",20:"TAG_BLACK",21:"TAG_WHITE",22:"TAG_HANDICAP",23:"TAG_RULES",24:"TAG_TIMECONTROL",25:"TAG_ANNOTATOR",26:"TAG_APPLICATION",27:"TAG_NAME",34:"DOT",36:"PASS",37:"RESIGN",38:"COORDINATE",41:"=",42:"*",43:"RESULT_BLACK",44:"RESULT_WHITE",46:"POINTS",47:"STONES",48:"TIMES",49:"NUMBER"},
+productions_: [0,[3,3],[3,2],[3,2],[3,1],[4,1],[4,2],[7,4],[7,4],[7,4],[9,1],[9,1],[9,1],[9,1],[9,1],[9,1],[9,1],[9,1],[9,1],[9,1],[9,1],[9,1],[5,1],[28,1],[28,1],[29,0],[29,2],[30,2],[31,4],[32,3],[35,1],[35,1],[35,1],[13,1],[13,2],[13,1],[13,1],[39,1],[39,1],[40,2],[45,1],[45,1],[15,1],[15,3],[33,1]],
+performAction: function anonymous(yytext, yyleng, yylineno, yy, yystate /* action[1] */, $$ /* vstack */, _$ /* lstack */) {
+/* this == yyval */
+
+var $0 = $$.length - 1;
+switch (yystate) {
+case 1:
+
+			return {
+				tags: $$[$0-2],
+				moves: $$[$0-1],
+				success: true
+			};
+		
+break;
+case 2:
+
+			return {
+				tags: $$[$0-1],
+				moves: null,
+				success: true
+			};
+		
+break;
+case 3:
+
+			return {
+				tags: {},
+				moves: $$[$0-1],
+				success: true
+			};
+		
+break;
+case 4:
+
+			return {
+				tags: {},
+				moves: null,
+				success: true
+			};
+		
+break;
+case 5: case 23: case 24:
+this.$ = $$[$0];
+break;
+case 6:
+this.$ = Object.assign({}, $$[$0-1], $$[$0]);
+break;
+case 7:
+
+			const tagName = $$[$0-2];
+			const tagValue = $$[$0-1].slice(1, -1); // Remove quotes
+			this.$ = { [tagName]: tagValue };
+		
+break;
+case 8:
+this.$ = $$[$0-1];
+break;
+case 9:
+this.$ = ({[$$[$0-2]]: $$[$0-1]});
+break;
+case 21:
+ this.$ = yytext; 
+break;
+case 25:
+this.$ = [];
+break;
+case 26: case 27:
+this.$ = $$[$0-1].concat([$$[$0]]);
+break;
+case 28:
+this.$ = ({ round: $$[$0-3], action_black: $$[$0-1], action_white: $$[$0] });
+break;
+case 29:
+this.$ = ({ round: $$[$0-2], action_black: $$[$0] });
+break;
+case 30:
+this.$ = ({ type: 'pass' });
+break;
+case 31:
+this.$ = ({ type: 'resign' });
+break;
+case 32:
+
+			// Placeholder: Parse coordinate notation
+			this.$ = {
+				type: 'move',
+				position: yytext
+			};
+		
+break;
+case 33:
+this.$ = ({Result: $$[$0]});
+break;
+case 34:
+this.$ = ({Result: $$[$0-1], Conquer: $$[$0]});
+break;
+case 35:
+this.$ = ({Result: "draw"});
+break;
+case 36:
+this.$ = ({Result: "unknown"});
+break;
+case 37:
+this.$ = "black win";
+break;
+case 38:
+this.$ = "white win";
+break;
+case 39:
+this.$ = ({n: $$[$0-1], unit: $$[$0]});
+break;
+case 42:
+this.$ = [$$[$0]];
+break;
+case 43:
+this.$ = $$[$0-2].concat($$[$0]);
+break;
+case 44:
+this.$ = parseInt($$[$0]);
+break;
+}
+},
+table: [{3:1,4:2,5:3,6:[1,4],7:5,8:$V0,28:6,29:8,30:9,49:$V1},{1:[3]},{5:10,6:[1,11],7:12,8:$V0,28:6,29:8,30:9,49:$V1},{6:[1,13]},{1:[2,4]},o($V2,[2,5]),{6:[2,22]},{9:14,12:[1,15],14:[1,16],16:[1,17],17:[1,18],18:[1,19],19:[1,20],20:[1,21],21:[1,22],22:[1,23],23:[1,24],24:[1,25],25:[1,26],26:[1,27],27:[1,28]},{6:[2,23],31:29,32:30,33:31,49:$V3},{6:[2,24]},{6:[1,33]},{1:[2,2]},o($V2,[2,6]),{1:[2,3]},{10:[1,34]},{13:35,39:36,41:[1,37],42:[1,38],43:[1,39],44:[1,40]},{15:41,33:42,49:$V3},{10:[2,10]},{10:[2,11]},{10:[2,12]},{10:[2,13]},{10:[2,14]},{10:[2,15]},{10:[2,16]},{10:[2,17]},{10:[2,18]},{10:[2,19]},{10:[2,20]},{10:[2,21]},o($V4,[2,26]),{6:[2,27]},{34:[1,43]},o([11,34,46,47,48],[2,44]),{1:[2,1]},{11:[1,44]},{11:[1,45]},{11:[2,33],33:47,40:46,49:$V3},{11:[2,35]},{11:[2,36]},o($V5,[2,37]),o($V5,[2,38]),{11:[1,48],48:[1,49]},o($V6,[2,42]),{35:50,36:$V7,37:$V8,38:$V9},o($V2,[2,7]),o($V2,[2,8]),{11:[2,34]},{45:54,46:[1,55],47:[1,56]},o($V2,[2,9]),{33:57,49:$V3},{6:[2,29],35:58,36:$V7,37:$V8,38:$V9},o($Va,[2,30]),o($Va,[2,31]),o($Va,[2,32]),{11:[2,39]},{11:[2,40]},{11:[2,41]},o($V6,[2,43]),o($V4,[2,28])],
+defaultActions: {4:[2,4],6:[2,22],9:[2,24],11:[2,2],13:[2,3],17:[2,10],18:[2,11],19:[2,12],20:[2,13],21:[2,14],22:[2,15],23:[2,16],24:[2,17],25:[2,18],26:[2,19],27:[2,20],28:[2,21],30:[2,27],33:[2,1],37:[2,35],38:[2,36],46:[2,34],54:[2,39],55:[2,40],56:[2,41]},
+parseError: function parseError (str, hash) {
+    if (hash.recoverable) {
+        this.trace(str);
+    } else {
+        var error = new Error(str);
+        error.hash = hash;
+        throw error;
+    }
+},
+parse: function parse(input) {
+    var self = this, stack = [0], tstack = [], vstack = [null], lstack = [], table = this.table, yytext = '', yylineno = 0, yyleng = 0, recovering = 0, TERROR = 2, EOF = 1;
+    var args = lstack.slice.call(arguments, 1);
+    var lexer = Object.create(this.lexer);
+    var sharedState = { yy: {} };
+    for (var k in this.yy) {
+        if (Object.prototype.hasOwnProperty.call(this.yy, k)) {
+            sharedState.yy[k] = this.yy[k];
+        }
+    }
+    lexer.setInput(input, sharedState.yy);
+    sharedState.yy.lexer = lexer;
+    sharedState.yy.parser = this;
+    if (typeof lexer.yylloc == 'undefined') {
+        lexer.yylloc = {};
+    }
+    var yyloc = lexer.yylloc;
+    lstack.push(yyloc);
+    var ranges = lexer.options && lexer.options.ranges;
+    if (typeof sharedState.yy.parseError === 'function') {
+        this.parseError = sharedState.yy.parseError;
+    } else {
+        this.parseError = Object.getPrototypeOf(this).parseError;
+    }
+    function popStack(n) {
+        stack.length = stack.length - 2 * n;
+        vstack.length = vstack.length - n;
+        lstack.length = lstack.length - n;
+    }
+    _token_stack:
+        var lex = function () {
+            var token;
+            token = lexer.lex() || EOF;
+            if (typeof token !== 'number') {
+                token = self.symbols_[token] || token;
+            }
+            return token;
+        };
+    var symbol, preErrorSymbol, state, action, a, r, yyval = {}, p, len, newState, expected;
+    while (true) {
+        state = stack[stack.length - 1];
+        if (this.defaultActions[state]) {
+            action = this.defaultActions[state];
+        } else {
+            if (symbol === null || typeof symbol == 'undefined') {
+                symbol = lex();
+            }
+            action = table[state] && table[state][symbol];
+        }
+                    if (typeof action === 'undefined' || !action.length || !action[0]) {
+                var errStr = '';
+                expected = [];
+                for (p in table[state]) {
+                    if (this.terminals_[p] && p > TERROR) {
+                        expected.push('\'' + this.terminals_[p] + '\'');
+                    }
+                }
+                if (lexer.showPosition) {
+                    errStr = 'Parse error on line ' + (yylineno + 1) + ':\n' + lexer.showPosition() + '\nExpecting ' + expected.join(', ') + ', got \'' + (this.terminals_[symbol] || symbol) + '\'';
+                } else {
+                    errStr = 'Parse error on line ' + (yylineno + 1) + ': Unexpected ' + (symbol == EOF ? 'end of input' : '\'' + (this.terminals_[symbol] || symbol) + '\'');
+                }
+                this.parseError(errStr, {
+                    text: lexer.match,
+                    token: this.terminals_[symbol] || symbol,
+                    line: lexer.yylineno,
+                    loc: yyloc,
+                    expected: expected
+                });
+            }
+        if (action[0] instanceof Array && action.length > 1) {
+            throw new Error('Parse Error: multiple actions possible at state: ' + state + ', token: ' + symbol);
+        }
+        switch (action[0]) {
+        case 1:
+            stack.push(symbol);
+            vstack.push(lexer.yytext);
+            lstack.push(lexer.yylloc);
+            stack.push(action[1]);
+            symbol = null;
+            if (!preErrorSymbol) {
+                yyleng = lexer.yyleng;
+                yytext = lexer.yytext;
+                yylineno = lexer.yylineno;
+                yyloc = lexer.yylloc;
+                if (recovering > 0) {
+                    recovering--;
+                }
+            } else {
+                symbol = preErrorSymbol;
+                preErrorSymbol = null;
+            }
+            break;
+        case 2:
+            len = this.productions_[action[1]][1];
+            yyval.$ = vstack[vstack.length - len];
+            yyval._$ = {
+                first_line: lstack[lstack.length - (len || 1)].first_line,
+                last_line: lstack[lstack.length - 1].last_line,
+                first_column: lstack[lstack.length - (len || 1)].first_column,
+                last_column: lstack[lstack.length - 1].last_column
+            };
+            if (ranges) {
+                yyval._$.range = [
+                    lstack[lstack.length - (len || 1)].range[0],
+                    lstack[lstack.length - 1].range[1]
+                ];
+            }
+            r = this.performAction.apply(yyval, [
+                yytext,
+                yyleng,
+                yylineno,
+                sharedState.yy,
+                action[1],
+                vstack,
+                lstack
+            ].concat(args));
+            if (typeof r !== 'undefined') {
+                return r;
+            }
+            if (len) {
+                stack = stack.slice(0, -1 * len * 2);
+                vstack = vstack.slice(0, -1 * len);
+                lstack = lstack.slice(0, -1 * len);
+            }
+            stack.push(this.productions_[action[1]][0]);
+            vstack.push(yyval.$);
+            lstack.push(yyval._$);
+            newState = table[stack[stack.length - 2]][stack[stack.length - 1]];
+            stack.push(newState);
+            break;
+        case 3:
+            return true;
+        }
+    }
+    return true;
+}};
+
+
+/* ========== Additional JavaScript Code ========== */
+
+// Parser configuration
+parser.yy = {
+	// Helper functions can be added here
+	parseError: function(str, hash) {
+		throw new Error('Parse error: ' + str);
+	}
+};
+/* generated by jison-lex 0.3.4 */
+var lexer = (function(){
+var lexer = ({
+
+EOF:1,
+
+parseError:function parseError(str, hash) {
+        if (this.yy.parser) {
+            this.yy.parser.parseError(str, hash);
+        } else {
+            throw new Error(str);
+        }
+    },
+
+// resets the lexer, sets new input
+setInput:function (input, yy) {
+        this.yy = yy || this.yy || {};
+        this._input = input;
+        this._more = this._backtrack = this.done = false;
+        this.yylineno = this.yyleng = 0;
+        this.yytext = this.matched = this.match = '';
+        this.conditionStack = ['INITIAL'];
+        this.yylloc = {
+            first_line: 1,
+            first_column: 0,
+            last_line: 1,
+            last_column: 0
+        };
+        if (this.options.ranges) {
+            this.yylloc.range = [0,0];
+        }
+        this.offset = 0;
+        return this;
+    },
+
+// consumes and returns one char from the input
+input:function () {
+        var ch = this._input[0];
+        this.yytext += ch;
+        this.yyleng++;
+        this.offset++;
+        this.match += ch;
+        this.matched += ch;
+        var lines = ch.match(/(?:\r\n?|\n).*/g);
+        if (lines) {
+            this.yylineno++;
+            this.yylloc.last_line++;
+        } else {
+            this.yylloc.last_column++;
+        }
+        if (this.options.ranges) {
+            this.yylloc.range[1]++;
+        }
+
+        this._input = this._input.slice(1);
+        return ch;
+    },
+
+// unshifts one char (or a string) into the input
+unput:function (ch) {
+        var len = ch.length;
+        var lines = ch.split(/(?:\r\n?|\n)/g);
+
+        this._input = ch + this._input;
+        this.yytext = this.yytext.substr(0, this.yytext.length - len);
+        //this.yyleng -= len;
+        this.offset -= len;
+        var oldLines = this.match.split(/(?:\r\n?|\n)/g);
+        this.match = this.match.substr(0, this.match.length - 1);
+        this.matched = this.matched.substr(0, this.matched.length - 1);
+
+        if (lines.length - 1) {
+            this.yylineno -= lines.length - 1;
+        }
+        var r = this.yylloc.range;
+
+        this.yylloc = {
+            first_line: this.yylloc.first_line,
+            last_line: this.yylineno + 1,
+            first_column: this.yylloc.first_column,
+            last_column: lines ?
+                (lines.length === oldLines.length ? this.yylloc.first_column : 0)
+                 + oldLines[oldLines.length - lines.length].length - lines[0].length :
+              this.yylloc.first_column - len
+        };
+
+        if (this.options.ranges) {
+            this.yylloc.range = [r[0], r[0] + this.yyleng - len];
+        }
+        this.yyleng = this.yytext.length;
+        return this;
+    },
+
+// When called from action, caches matched text and appends it on next action
+more:function () {
+        this._more = true;
+        return this;
+    },
+
+// When called from action, signals the lexer that this rule fails to match the input, so the next matching rule (regex) should be tested instead.
+reject:function () {
+        if (this.options.backtrack_lexer) {
+            this._backtrack = true;
+        } else {
+            return this.parseError('Lexical error on line ' + (this.yylineno + 1) + '. You can only invoke reject() in the lexer when the lexer is of the backtracking persuasion (options.backtrack_lexer = true).\n' + this.showPosition(), {
+                text: "",
+                token: null,
+                line: this.yylineno
+            });
+
+        }
+        return this;
+    },
+
+// retain first n characters of the match
+less:function (n) {
+        this.unput(this.match.slice(n));
+    },
+
+// displays already matched input, i.e. for error messages
+pastInput:function () {
+        var past = this.matched.substr(0, this.matched.length - this.match.length);
+        return (past.length > 20 ? '...':'') + past.substr(-20).replace(/\n/g, "");
+    },
+
+// displays upcoming input, i.e. for error messages
+upcomingInput:function () {
+        var next = this.match;
+        if (next.length < 20) {
+            next += this._input.substr(0, 20-next.length);
+        }
+        return (next.substr(0,20) + (next.length > 20 ? '...' : '')).replace(/\n/g, "");
+    },
+
+// displays the character position where the lexing error occurred, i.e. for error messages
+showPosition:function () {
+        var pre = this.pastInput();
+        var c = new Array(pre.length + 1).join("-");
+        return pre + this.upcomingInput() + "\n" + c + "^";
+    },
+
+// test the lexed token: return FALSE when not a match, otherwise return token
+test_match:function(match, indexed_rule) {
+        var token,
+            lines,
+            backup;
+
+        if (this.options.backtrack_lexer) {
+            // save context
+            backup = {
+                yylineno: this.yylineno,
+                yylloc: {
+                    first_line: this.yylloc.first_line,
+                    last_line: this.last_line,
+                    first_column: this.yylloc.first_column,
+                    last_column: this.yylloc.last_column
+                },
+                yytext: this.yytext,
+                match: this.match,
+                matches: this.matches,
+                matched: this.matched,
+                yyleng: this.yyleng,
+                offset: this.offset,
+                _more: this._more,
+                _input: this._input,
+                yy: this.yy,
+                conditionStack: this.conditionStack.slice(0),
+                done: this.done
+            };
+            if (this.options.ranges) {
+                backup.yylloc.range = this.yylloc.range.slice(0);
+            }
+        }
+
+        lines = match[0].match(/(?:\r\n?|\n).*/g);
+        if (lines) {
+            this.yylineno += lines.length;
+        }
+        this.yylloc = {
+            first_line: this.yylloc.last_line,
+            last_line: this.yylineno + 1,
+            first_column: this.yylloc.last_column,
+            last_column: lines ?
+                         lines[lines.length - 1].length - lines[lines.length - 1].match(/\r?\n?/)[0].length :
+                         this.yylloc.last_column + match[0].length
+        };
+        this.yytext += match[0];
+        this.match += match[0];
+        this.matches = match;
+        this.yyleng = this.yytext.length;
+        if (this.options.ranges) {
+            this.yylloc.range = [this.offset, this.offset += this.yyleng];
+        }
+        this._more = false;
+        this._backtrack = false;
+        this._input = this._input.slice(match[0].length);
+        this.matched += match[0];
+        token = this.performAction.call(this, this.yy, this, indexed_rule, this.conditionStack[this.conditionStack.length - 1]);
+        if (this.done && this._input) {
+            this.done = false;
+        }
+        if (token) {
+            return token;
+        } else if (this._backtrack) {
+            // recover context
+            for (var k in backup) {
+                this[k] = backup[k];
+            }
+            return false; // rule action called reject() implying the next rule should be tested instead.
+        }
+        return false;
+    },
+
+// return next match in input
+next:function () {
+        if (this.done) {
+            return this.EOF;
+        }
+        if (!this._input) {
+            this.done = true;
+        }
+
+        var token,
+            match,
+            tempMatch,
+            index;
+        if (!this._more) {
+            this.yytext = '';
+            this.match = '';
+        }
+        var rules = this._currentRules();
+        for (var i = 0; i < rules.length; i++) {
+            tempMatch = this._input.match(this.rules[rules[i]]);
+            if (tempMatch && (!match || tempMatch[0].length > match[0].length)) {
+                match = tempMatch;
+                index = i;
+                if (this.options.backtrack_lexer) {
+                    token = this.test_match(tempMatch, rules[i]);
+                    if (token !== false) {
+                        return token;
+                    } else if (this._backtrack) {
+                        match = false;
+                        continue; // rule action called reject() implying a rule MISmatch.
+                    } else {
+                        // else: this is a lexer rule which consumes input without producing a token (e.g. whitespace)
+                        return false;
+                    }
+                } else if (!this.options.flex) {
+                    break;
+                }
+            }
+        }
+        if (match) {
+            token = this.test_match(match, rules[index]);
+            if (token !== false) {
+                return token;
+            }
+            // else: this is a lexer rule which consumes input without producing a token (e.g. whitespace)
+            return false;
+        }
+        if (this._input === "") {
+            return this.EOF;
+        } else {
+            return this.parseError('Lexical error on line ' + (this.yylineno + 1) + '. Unrecognized text.\n' + this.showPosition(), {
+                text: "",
+                token: null,
+                line: this.yylineno
+            });
+        }
+    },
+
+// return next match that has a token
+lex:function lex () {
+        var r = this.next();
+        if (r) {
+            return r;
+        } else {
+            return this.lex();
+        }
+    },
+
+// activates a new lexer condition state (pushes the new lexer condition state onto the condition stack)
+begin:function begin (condition) {
+        this.conditionStack.push(condition);
+    },
+
+// pop the previously active lexer condition state off the condition stack
+popState:function popState () {
+        var n = this.conditionStack.length - 1;
+        if (n > 0) {
+            return this.conditionStack.pop();
+        } else {
+            return this.conditionStack[0];
+        }
+    },
+
+// produce the lexer rule set which is active for the currently active lexer condition state
+_currentRules:function _currentRules () {
+        if (this.conditionStack.length && this.conditionStack[this.conditionStack.length - 1]) {
+            return this.conditions[this.conditionStack[this.conditionStack.length - 1]].rules;
+        } else {
+            return this.conditions["INITIAL"].rules;
+        }
+    },
+
+// return the currently active lexer condition state; when an index argument is provided it produces the N-th previous condition state, if available
+topState:function topState (n) {
+        n = this.conditionStack.length - 1 - Math.abs(n || 0);
+        if (n >= 0) {
+            return this.conditionStack[n];
+        } else {
+            return "INITIAL";
+        }
+    },
+
+// alias for begin(condition)
+pushState:function pushState (condition) {
+        this.begin(condition);
+    },
+
+// return the number of states currently on the stack
+stateStackSize:function stateStackSize() {
+        return this.conditionStack.length;
+    },
+options: {},
+performAction: function anonymous(yy,yy_,$avoiding_name_collisions,YY_START) {
+var YYSTATE=YY_START;
+switch($avoiding_name_collisions) {
+case 0:/* skip whitespace */
+break;
+case 1:/* skip newlines */
+break;
+case 2:/* skip line comments */
+break;
+case 3:/* skip block comments */
+break;
+case 4:return 8
+break;
+case 5:return 11
+break;
+case 6:return 10
+break;
+case 7:return 16
+break;
+case 8:return 17
+break;
+case 9:return 18
+break;
+case 10:return 19
+break;
+case 11:return 20
+break;
+case 12:return 21
+break;
+case 13:return 12
+break;
+case 14:return 14
+break;
+case 15:return 22
+break;
+case 16:return 23
+break;
+case 17:return 24
+break;
+case 18:return 25
+break;
+case 19:return 26
+break;
+case 20:return 43
+break;
+case 21:return 44
+break;
+case 22:return 41	/* draw */
+break;
+case 23:return 42	/* unknown */
+break;
+case 24:return 49
+break;
+case 25:return 34
+break;
+case 26:return 36
+break;
+case 27:return 37
+break;
+case 28:return 46
+break;
+case 29:return 47
+break;
+case 30:return 48
+break;
+case 31:return 38
+break;
+case 32:return 27
+break;
+case 33:return 6
+break;
+case 34:return 'INVALID'
+break;
+}
+},
+rules: [/^(?:\s+)/,/^(?:\n)/,/^(?:;[^\n]*)/,/^(?:\{[^}]*\})/,/^(?:\[)/,/^(?:\])/,/^(?:"([^\\\"]|\\.)*")/,/^(?:Event\b)/,/^(?:Site\b)/,/^(?:Date\b)/,/^(?:Round\b)/,/^(?:Black\b)/,/^(?:White\b)/,/^(?:Result\b)/,/^(?:Board\b)/,/^(?:Handicap\b)/,/^(?:Rules\b)/,/^(?:TimeControl\b)/,/^(?:Annotator\b)/,/^(?:Application\b)/,/^(?:B\+)/,/^(?:W\+)/,/^(?:=)/,/^(?:\*)/,/^(?:[1-9][0-9]*)/,/^(?:\.)/,/^(?:pass\b)/,/^(?:resign\b)/,/^(?:points\b)/,/^(?:stones\b)/,/^(?:[x](?=[1-9]))/,/^(?:[a-z0]+)/,/^(?:[A-Z][A-Za-z0-9_]*)/,/^(?:$)/,/^(?:.)/],
+conditions: {"INITIAL":{"rules":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34],"inclusive":true}}
+});
+return lexer;
+})();
+parser.lexer = lexer;
+function Parser () {
+  this.yy = {};
+}
+Parser.prototype = parser;parser.Parser = Parser;
+return new Parser;
+})();
+
+
+if (typeof require !== 'undefined' && typeof exports !== 'undefined') {
+exports.parser = tgnParser;
+exports.Parser = tgnParser.Parser;
+exports.parse = function () { return tgnParser.parse.apply(tgnParser, arguments); };
+exports.main = function commonjsMain (args) {
+    if (!args[1]) {
+        console.log('Usage: '+args[0]+' FILE');
+        process.exit(1);
+    }
+    var source = require('fs').readFileSync(require('path').normalize(args[1]), "utf8");
+    return exports.parser.parse(source);
+};
+if (typeof module !== 'undefined' && require.main === module) {
+  exports.main(process.argv.slice(1));
+}
+}

trigo-web/tools/README.md

@@ -0,0 +1,152 @@
+# Trigo Tools
+
+Development tools for the Trigo project.
+
+## Random Game Generator
+
+Generate random Trigo games in TGN (Trigo Game Notation) format for testing, development, and analysis.
+
+### Usage
+
+```bash
+# Generate 10 games with default settings (play until territory settled)
+npm run generate:games
+
+# Generate 100 games with custom move range
+npm run generate:games -- --count 100 --moves 20-80
+
+# Generate games with exactly 30 moves each
+npm run generate:games -- --moves 30 --count 50
+
+# Generate games on 3x3x3 board (plays until settled)
+npm run generate:games -- --board "3*3*3" --count 50
+
+# Generate 2D games (9x9x1 board)
+npm run generate:games -- --board "9*9*1" --count 20
+
+# Higher pass probability
+npm run generate:games -- --pass-chance 0.3
+
+# Custom output directory
+npm run generate:games -- --output "my_games" --count 50
+```
+
+### Options
+
+| Option | Short | Default | Description |
+|--------|-------|---------|-------------|
+| `--count` | `-c` | 10 | Number of games to generate |
+| `--moves` | `-m` | (settled) | Moves per game as "MIN-MAX" or single number. Default: play until neutral territory = 0 |
+| `--pass-chance` | | 0 | Probability of passing (0.0-1.0) |
+| `--board` | `-b` | "random" | Board size as "X*Y*Z" or "random" |
+| `--output` | `-o` | "output" | Output directory (relative to tools/) |
+| `--help` | `-h` | - | Show help message |
+
+### How It Works
+
+**Default Mode (no --moves specified):**
+1. Creates a new Trigo game with the specified board shape
+2. Plays random valid moves until the board reaches 90% coverage
+3. After 90% coverage, checks territory after each move
+4. Stops when neutral territory reaches 0 (game is fully settled)
+5. Results in complete, finished games with all territory claimed
+
+**Custom Move Mode (--moves specified):**
+1. Creates a new Trigo game with the specified board shape
+2. Randomly selects valid moves for the specified number of moves
+3. Respects Go rules: Ko, suicide prevention, capture
+4. Games may end early on double-pass
+5. Exports each game to TGN format with metadata
+
+### Output Format
+
+Generated files are named using SHA-256 hash of the TGN content: `game_<HASH>.tgn`
+
+This ensures:
+- **Content-based naming**: Same game content = same filename
+- **Duplicate detection**: Identical games won't overwrite each other
+- **Deterministic**: Reproducible filenames independent of generation time
+
+Example output:
+```
+tools/output/
+├── game_a3f5c8d912e4b6f1.tgn
+├── game_7b2d9e1a4c8f3605.tgn
+└── game_9e4b6f1a3f5c8d91.tgn
+```
+
+### TGN Format Example
+
+```tgn
+[Event "Random Generated Game"]
+[Site "Batch Generator"]
+[Date "2025.11.03"]
+[Black "Random Black"]
+[White "Random White"]
+[Board "5x5x5"]
+[Rules "Chinese"]
+[Application "Trigo Random Generator v1.0 (5×5×5)"]
+
+1. 000 y00
+2. 0y0 yy0
+3. aaa zzz
+4. pass 0az
+5. z0z pass
+```
+
+### Performance
+
+- **Small boards (3×3×3)**: ~250 games/second
+- **Standard boards (5×5×5)**: ~75 games/second
+- **Large boards (9×9×1)**: ~33 games/second
+
+Generating 1000 games on a 5×5×5 board takes approximately 13 seconds.
+
+### Use Cases
+
+1. **Testing TGN parser** - Create diverse test files for import functionality
+2. **Performance testing** - Generate large datasets for board rendering tests
+3. **AI training** - Create training data for future AI opponent
+4. **Game analysis** - Study patterns in random gameplay
+5. **Format validation** - Verify TGN export works correctly across scenarios
+
+### Board Sizes
+
+**3D Boards:**
+- `3*3*3` - Tiny cube (27 positions)
+- `5*5*5` - Standard cube (125 positions)
+- `7*7*7` - Large cube (343 positions)
+- `9*9*2` - Wide board (162 positions)
+
+**2D Boards (Traditional Go):**
+- `9*9*1` - Small board (81 positions)
+- `13*13*1` - Medium board (169 positions)
+- `19*19*1` - Standard board (361 positions)
+
+### Implementation Details
+
+**File:** `tools/generateRandomGames.ts`
+
+**Key Functions:**
+- `generateRandomGame()` - Simulates a complete random game
+- `getValidMoves()` - Finds all legal moves for current player
+- `selectRandomMove()` - Randomly picks from valid moves
+- `generateBatch()` - Generates multiple games in parallel
+
+**Safety Features:**
+- Validates all moves using game rules (Ko, suicide, occupation)
+- Handles cases where no valid moves exist (must pass)
+- Respects double-pass game end condition
+- Progress indicator for large batches
+- Error handling and validation
+
+### Dependencies
+
+- **tsx** - TypeScript execution
+- **yargs** - Advanced command-line argument parsing with validation
+- **TrigoGame** - Core game logic from `inc/trigo/game.ts`
+- **Node.js fs/path** - File system operations
+
+---
+
+For more information about TGN format, see `/tests/game/trigoGame.tgn.test.ts`

trigo-web/tools/buildJisonParser.ts

@@ -0,0 +1,74 @@
+/**
+ * Build script for Jison parser generation
+ *
+ * Generates pre-compiled parser to public/lib/ directory for use in browser
+ * Following lotus project architecture:
+ * - Use jison npm package CLI to compile grammar
+ * - Pre-build parsers to static .js files
+ * - Serve from public directory
+ * - Works in both browser and Node.js
+ */
+
+import { execSync } from "child_process";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = path.resolve(__dirname, "..");
+
+
+/**
+ * Build a single parser from grammar file
+ * @param grammarPath - Path to .jison grammar file
+ * @param targetPath - Where to write the compiled parser
+ */
+function buildParser(grammarPath: string, targetPath: string): void {
+	console.log(`Building parser: ${grammarPath} → ${targetPath}`);
+
+	// Ensure output directory exists
+	const targetDir = path.dirname(targetPath);
+	if (!fs.existsSync(targetDir)) {
+		fs.mkdirSync(targetDir, { recursive: true });
+		console.log(`Created directory: ${targetDir}`);
+	}
+
+	// Run jison CLI to generate parser
+	// Using -m commonjs for CommonJS module format (works in Node.js and Vite)
+	// Outputs to .cjs file which will be treated as CommonJS
+	try {
+		execSync(`npx jison "${grammarPath}" -o "${targetPath.replace(".js", ".cjs")}" -m commonjs`, {
+			cwd: projectRoot,
+			stdio: "inherit"
+		});
+		console.log(`✓ Parser written to: ${targetPath.replace(".js", ".cjs")}`);
+	} catch (error) {
+		console.error(`✗ Failed to build parser:`, error);
+		throw error;
+	}
+}
+
+
+/**
+ * Main build function
+ */
+function main(): void {
+	try {
+		console.log("🔨 Building Jison parsers...\n");
+
+		// Build TGN parser to public/lib/
+		const tgnGrammarPath = path.resolve(projectRoot, "inc/tgn/tgn.jison");
+		const tgnOutputPath = path.resolve(projectRoot, "public/lib/tgnParser.js");
+
+		buildParser(tgnGrammarPath, tgnOutputPath);
+
+		console.log("\n✅ Done building parsers!");
+	} catch (error) {
+		console.error("❌ Error building parsers:", error);
+		process.exit(1);
+	}
+}
+
+
+// Run main function
+main();

trigo-web/tools/generateRandomGames.ts

@@ -0,0 +1,465 @@
+#!/usr/bin/env node
+/**
+ * Random Trigo Game Generator
+ *
+ * Generates random Trigo games and exports them as TGN files.
+ * Useful for testing, development, and creating training data.
+ *
+ * Usage:
+ *   npm run generate:games
+ *   npm run generate:games -- --count 100 --min-moves 20 --max-moves 80
+ *   npm run generate:games -- --board "3*3*3" --count 50
+ */
+
+import { TrigoGame, StoneType } from "../inc/trigo/game.js";
+import type { BoardShape, Position } from "../inc/trigo/types.js";
+import { calculateTerritory } from "../inc/trigo/gameUtils.js";
+import * as fs from "fs";
+import * as path from "path";
+import * as crypto from "crypto";
+import { fileURLToPath } from "url";
+import yargs from "yargs";
+import { hideBin } from "yargs/helpers";
+
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+
+type BoardShapeTuple = [number, number, number];
+
+
+const arangeShape = (min: BoardShapeTuple, max: BoardShapeTuple): BoardShapeTuple[] => {
+	// traverse all shapes in the range between min & max (boundary includes)
+	const result: BoardShapeTuple[] = [];
+
+	for (let x = min[0]; x <= max[0]; x++) {
+		for (let y = min[1]; y <= max[1]; y++) {
+			for (let z = min[2]; z <= max[2]; z++) {
+				result.push([x, y, z]);
+			}
+		}
+	}
+
+	return result;
+};
+
+
+const CANDIDATE_BOARD_SHAPES = [
+	...arangeShape([2, 1, 1], [19, 19, 1]),
+	...arangeShape([2, 2, 2], [9, 9, 9]),
+];
+
+
+/**
+ * Generator configuration options
+ */
+interface GeneratorOptions {
+	minMoves: number;
+	maxMoves: number;
+	passChance: number;
+	boardShape?: BoardShape;
+	outputDir: string;
+	moveToEndGame: boolean; // true if using default, false if user-specified
+}
+
+
+/**
+ * Parse board shape string (e.g., "5*5*5" or "9*9*1")
+ * Special value "random" selects randomly from CANDIDATE_BOARD_SHAPES
+ */
+function parseBoardShape(shapeStr: string): BoardShape {
+	// Handle random selection
+	if (shapeStr.toLowerCase() === "random") {
+		const randomIndex = Math.floor(Math.random() * CANDIDATE_BOARD_SHAPES.length);
+		const [x, y, z] = CANDIDATE_BOARD_SHAPES[randomIndex];
+		console.log(`  [Random board selected: ${x}×${y}×${z}]`);
+		return { x, y, z };
+	}
+
+	// Parse explicit board shape
+	const parts = shapeStr.split(/[^0-9]+/).filter(Boolean).map(Number);
+	if (parts.length !== 3) {
+		throw new Error(`Invalid board shape: ${shapeStr}. Expected format: "X*Y*Z" or "random"`);
+	}
+	return { x: parts[0], y: parts[1], z: parts[2] };
+}
+
+
+/**
+ * Get all empty positions on the board
+ */
+function getAllEmptyPositions(game: TrigoGame): Position[] {
+	const board = game.getBoard();
+	const shape = game.getShape();
+	const emptyPositions: Position[] = [];
+
+	for (let x = 0; x < shape.x; x++) {
+		for (let y = 0; y < shape.y; y++) {
+			for (let z = 0; z < shape.z; z++) {
+				if (board[x][y][z] === StoneType.EMPTY) {
+					emptyPositions.push({ x, y, z });
+				}
+			}
+		}
+	}
+
+	return emptyPositions;
+}
+
+
+/**
+ * Get all valid moves for the current player
+ */
+function getValidMoves(game: TrigoGame): Position[] {
+	const emptyPositions = getAllEmptyPositions(game);
+	return emptyPositions.filter((pos) => game.isValidMove(pos).valid);
+}
+
+
+/**
+ * Select a random move from available positions
+ */
+function selectRandomMove(validMoves: Position[]): Position {
+	const randomIndex = Math.floor(Math.random() * validMoves.length);
+	return validMoves[randomIndex];
+}
+
+
+/**
+ * Generate a single random game
+ */
+function generateRandomGame(options: GeneratorOptions): string {
+	// Select board shape (random if undefined)
+	const boardShape = options.boardShape || selectRandomBoardShape();
+
+	const game = new TrigoGame(boardShape);
+	game.startGame();
+
+	const totalPositions = boardShape.x * boardShape.y * boardShape.z;
+	const coverageThreshold = Math.floor(totalPositions * 0.9); // 90% coverage
+
+	let moveCount = 0;
+	let consecutivePasses = 0;
+
+	if (options.moveToEndGame) {
+		// Default mode: Play until neutral territory is zero
+		// Start checking territory after 90% coverage
+		let territoryCheckStarted = false;
+
+		while (game.getGameStatus() === "playing") {
+			// Check if we should start territory checking
+			if (!territoryCheckStarted && moveCount >= coverageThreshold) {
+				territoryCheckStarted = true;
+			}
+
+			// Random chance to pass (if configured)
+			if (options.passChance > 0 && Math.random() < options.passChance) {
+				game.pass();
+				consecutivePasses++;
+				moveCount++;
+
+				// Game ends on double pass
+				if (consecutivePasses >= 2) {
+					break;
+				}
+				continue;
+			}
+
+			// Try to make a move
+			const validMoves = getValidMoves(game);
+
+			if (validMoves.length === 0) {
+				// No valid moves available, must pass
+				game.pass();
+				if (options.passChance <= 0)
+					break;
+
+				consecutivePasses++;
+				moveCount++;
+
+				if (consecutivePasses >= 2)
+					break;
+			} else {
+				// Make a random valid move
+				const move = selectRandomMove(validMoves);
+				const success = game.drop(move);
+
+				if (success) {
+					consecutivePasses = 0;
+					moveCount++;
+
+					// Check territory after 90% coverage
+					if (territoryCheckStarted) {
+						const board = game.getBoard();
+						const territory = calculateTerritory(board, boardShape);
+
+						// Stop if neutral territory is zero (game is settled)
+						if (territory.neutral === 0) {
+							break;
+						}
+					}
+				}
+			}
+		}
+	} else {
+		// User-specified move count: Play for target number of moves
+		const targetMoves =
+			Math.floor(Math.random() * (options.maxMoves - options.minMoves)) + options.minMoves;
+
+		while (moveCount < targetMoves && game.getGameStatus() === "playing") {
+			// Random chance to pass
+			if (Math.random() < options.passChance) {
+				game.pass();
+				consecutivePasses++;
+				moveCount++;
+
+				// Game ends on double pass
+				if (consecutivePasses >= 2) {
+					break;
+				}
+				continue;
+			}
+
+			// Try to make a move
+			const validMoves = getValidMoves(game);
+
+			if (validMoves.length === 0) {
+				// No valid moves available, must pass
+				game.pass();
+				consecutivePasses++;
+				moveCount++;
+
+				if (consecutivePasses >= 2) {
+					break;
+				}
+			} else {
+				// Make a random valid move
+				const move = selectRandomMove(validMoves);
+				const success = game.drop(move);
+
+				if (success) {
+					consecutivePasses = 0;
+					moveCount++;
+				}
+			}
+		}
+	}
+
+	// Generate TGN
+	const tgn = game.toTGN();
+
+	return tgn;
+}
+
+
+/**
+ * Select a random board shape from CANDIDATE_BOARD_SHAPES
+ */
+function selectRandomBoardShape(): BoardShape {
+	const randomIndex = Math.floor(Math.random() * CANDIDATE_BOARD_SHAPES.length);
+	const [x, y, z] = CANDIDATE_BOARD_SHAPES[randomIndex];
+	return { x, y, z };
+}
+
+
+/**
+ * Generate a batch of random games
+ */
+function generateBatch(count: number, options: GeneratorOptions): void {
+	// Create output directory if it doesn't exist
+	const outputPath = path.resolve(__dirname, options.outputDir);
+	if (!fs.existsSync(outputPath)) {
+		fs.mkdirSync(outputPath, { recursive: true });
+		console.log(`Created output directory: ${outputPath}`);
+	}
+
+	console.log(`\nGenerating ${count} random games...`);
+	if (options.boardShape) {
+		console.log(`Board: ${options.boardShape.x}×${options.boardShape.y}×${options.boardShape.z}`);
+	} else {
+		console.log(`Board: Random selection from ${CANDIDATE_BOARD_SHAPES.length} candidates`);
+	}
+
+	if (options.moveToEndGame) {
+		console.log(`Mode: Play until neutral territory = 0 (check after 90% coverage)`);
+	} else {
+		console.log(`Moves: ${options.minMoves}-${options.maxMoves}`);
+	}
+	console.log(`Pass chance: ${(options.passChance * 100).toFixed(0)}%`);
+	console.log(`Output: ${outputPath}\n`);
+
+	const startTime = Date.now();
+
+	process.stdout.write(".".repeat(count));
+	process.stdout.write("\r");
+
+	for (let i = 0; i < count; i++) {
+		try {
+			const tgn = generateRandomGame(options);
+
+			// Generate filename based on content hash
+			const hash = crypto.createHash('sha256').update(tgn).digest('hex');
+			const filename = `game_${hash.substring(0, 16)}.tgn`;
+			const filepath = path.join(outputPath, filename);
+
+			// Write TGN file
+			fs.writeFileSync(filepath, tgn, "utf-8");
+
+			process.stdout.write("+");
+		} catch (error) {
+			console.error(`\nError generating game ${i}:`, error);
+		}
+	}
+
+	const elapsedTime = ((Date.now() - startTime) / 1000).toFixed(2);
+	console.log(`\n\nGeneration complete!`);
+	console.log(`Time: ${elapsedTime}s`);
+	console.log(`Rate: ${(count / parseFloat(elapsedTime)).toFixed(2)} games/second`);
+	console.log(`Output: ${outputPath}`);
+}
+
+
+/**
+ * Parse moves range string (e.g., "10-50" or "20")
+ * Returns [min, max] tuple
+ */
+function parseMovesRange(movesStr: string): [number, number] {
+	// Check if it's a range (e.g., "10-50")
+	if (movesStr.includes("-")) {
+		const parts = movesStr.split("-").map(s => s.trim());
+		if (parts.length !== 2) {
+			throw new Error(`Invalid moves range: ${movesStr}. Expected format: "MIN-MAX" or "N"`);
+		}
+		const min = parseInt(parts[0], 10);
+		const max = parseInt(parts[1], 10);
+
+		if (isNaN(min) || isNaN(max)) {
+			throw new Error(`Invalid moves range: ${movesStr}. Values must be numbers`);
+		}
+		if (min < 0 || max < 0) {
+			throw new Error("moves must be non-negative");
+		}
+		if (max < min) {
+			throw new Error("max moves must be greater than or equal to min moves");
+		}
+
+		return [min, max];
+	}
+
+	// Single number means exact move count (min = max)
+	const moves = parseInt(movesStr, 10);
+	if (isNaN(moves)) {
+		throw new Error(`Invalid moves value: ${movesStr}. Must be a number or range like "10-50"`);
+	}
+	if (moves < 0) {
+		throw new Error("moves must be non-negative");
+	}
+
+	return [moves, moves];
+}
+
+
+/**
+ * Parse command line arguments using yargs
+ */
+function parseArgs(): { count: number; options: GeneratorOptions } {
+	const argv = yargs(hideBin(process.argv))
+		.scriptName("npm run generate:games --")
+		.usage("Usage: $0 [options]")
+		.option("count", {
+			alias: "c",
+			type: "number",
+			default: 10,
+			description: "Number of games to generate",
+			coerce: (value) => {
+				if (value <= 0) {
+					throw new Error("count must be greater than 0");
+				}
+				return value;
+			}
+		})
+		.option("moves", {
+			alias: "m",
+			type: "string",
+			description: "Moves per game as \"MIN-MAX\" or single number (default: play until settled)",
+		})
+		.option("pass-chance", {
+			type: "number",
+			default: 0,
+			description: "Probability of passing (0.0-1.0)",
+			coerce: (value) => {
+				if (value < 0 || value > 1) {
+					throw new Error("pass-chance must be between 0.0 and 1.0");
+				}
+				return value;
+			}
+		})
+		.option("board", {
+			alias: "b",
+			type: "string",
+			default: "random",
+			description: 'Board size as "X*Y*Z" or "random" for random selection',
+		})
+		.option("output", {
+			alias: "o",
+			type: "string",
+			default: "output",
+			description: "Output directory (relative to tools/)"
+		})
+		.example([
+			["$0", "Generate 10 games until territory settled"],
+			["$0 --count 100 --moves 20-80", "Generate 100 games with 20-80 moves"],
+			["$0 --board '5*5*5' --count 50", "Generate 50 games on 5×5×5 board"],
+			["$0 --moves 30 --count 20", "Generate 20 games with exactly 30 moves"],
+			["$0 --pass-chance 0.3 --output test_games", "Generate games with 30% pass chance"]
+		])
+		.help("h")
+		.alias("h", "help")
+		.version(false)
+		.strict()
+		.parseSync();
+
+	// Check if moves was user-specified or default
+	const moveToEndGame = !argv.moves;
+
+	// Parse board shape: undefined for random mode, otherwise parse the string
+	const boardShape = argv.board.toLowerCase() === "random"
+		? undefined
+		: parseBoardShape(argv.board);
+
+	// Parse moves range (use dummy range for default mode, will be ignored)
+	const [minMoves, maxMoves] = moveToEndGame ? [0, 0] : parseMovesRange(argv.moves as string);
+
+	return {
+		count: argv.count,
+		options: {
+			minMoves,
+			maxMoves,
+			passChance: argv["pass-chance"],
+			boardShape,
+			outputDir: argv.output,
+			moveToEndGame
+		}
+	};
+}
+
+
+/**
+ * Main entry point
+ */
+function main(): void {
+	try {
+		console.log("=== Trigo Random Game Generator ===\n");
+
+		const { count, options } = parseArgs();
+		generateBatch(count, options);
+	} catch (error) {
+		console.error("\nError:", error instanceof Error ? error.message : error);
+		process.exit(1);
+	}
+}
+
+
+// Run the generator
+main();

trigo-web/tools/output/.gitignore

@@ -0,0 +1 @@
+*.tgn

trigo-web/tsconfig.json

@@ -0,0 +1,20 @@
+{
+	"compilerOptions": {
+		"target": "ES2020",
+		"module": "ESNext",
+		"lib": ["ES2020", "DOM"],
+		"strict": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"forceConsistentCasingInFileNames": true,
+		"moduleResolution": "bundler",
+		"resolveJsonModule": true,
+		"types": ["vitest/globals", "node"],
+		"baseUrl": ".",
+		"paths": {
+			"@inc/*": ["./inc/*"]
+		}
+	},
+	"include": ["tests/**/*.ts", "inc/**/*.ts", "tools/**/*.ts"],
+	"exclude": ["node_modules", "dist", "app", "backend"]
+}

trigo-web/vitest.config.ts

@@ -0,0 +1,41 @@
+import { defineConfig, Plugin } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
+import { fileURLToPath } from 'node:url'
+
+// Plugin to handle /lib/tgnParser.cjs imports in Node.js environment
+const libParserPlugin: Plugin = {
+  name: 'lib-parser-bypass',
+  enforce: 'pre',
+  transform(code, id) {
+    // Only transform parserInit.ts
+    if (id.includes('parserInit')) {
+      // Replace import calls of /lib/tgnParser.cjs with a marker that won't be analyzed
+      return code.replace(
+        /await import\(.*?\/lib\/tgnParser\.cjs/g,
+        'await import("" + "/lib/tgnParser.cjs'
+      )
+    }
+  }
+}
+
+export default defineConfig({
+  plugins: [libParserPlugin, vue()],
+  test: {
+    globals: true,
+    environment: 'node', // Changed from jsdom to node since we're testing pure logic
+    include: ['tests/game/**/*.test.ts'], // Game logic tests
+  },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./app/src', import.meta.url)),
+      '@inc': fileURLToPath(new URL('./inc', import.meta.url))
+    }
+  },
+  ssr: {
+    external: ['/lib/tgnParser.cjs']
+  }
+})
+
+
+
+