feat: implement competitive clicker MVP with Colyseus.js

- Add real-time multiplayer game server with Colyseus
- Implement unique player naming system with auto-increment
- Create lobby system with automatic matchmaking
- Build 10-minute competitive clicking game rooms (max 2 players)
- Add admin dashboard for game management (pause/resume/restart/kick)
- Implement Vue 3 client with professional UI
- Add WebSocket communication with state synchronization
- Include TypeScript throughout with proper typing
- Create REST API for admin operations
- Add reconnection support and error handling

.gitignore

@@ -0,0 +1,48 @@
+# Dependencies
+node_modules/
+*/node_modules/
+
+# Build outputs
+dist/
+build/
+*/dist/
+*/build/
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Cache directories
+.cache/
+.parcel-cache/
+*.tsbuildinfo
+
+# Editor directories and files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Temporary files
+*.tmp
+*.temp

QUICKSTART.md

@@ -0,0 +1,85 @@
+# Quick Start Guide
+
+## 🚀 Running the Project
+
+The project is now ready to run! Both server and client are configured and running.
+
+### Current Status:
+- ✅ **Server**: Running on http://localhost:3000
+- ✅ **Client**: Running on http://localhost:5173
+- ✅ **WebSocket**: ws://localhost:3000
+- ✅ **Admin Monitor**: http://localhost:3000/colyseus
+- ✅ **Admin Dashboard**: http://localhost:5173/dashboard
+
+## 📝 How to Use
+
+### For Players:
+1. Open http://localhost:5173 in your browser
+2. Enter your desired username
+3. Click "Quick Play" to join a game
+4. Click as fast as you can when the game starts!
+5. Games last 10 minutes, winner is the one with most clicks
+
+### For Admins:
+1. Open http://localhost:5173/dashboard to access the admin panel
+2. Monitor all active games and players
+3. Control games: pause, resume, restart, or kick players
+4. View real-time statistics
+
+## 🛠️ Development Commands
+
+If you need to restart the services:
+
+```bash
+# Kill existing processes
+pkill -f "ts-node"
+pkill -f "vite"
+
+# Start server (from server directory)
+cd server
+npx ts-node src/index.ts
+
+# Start client (from client directory - in another terminal)
+cd client
+npm run dev
+```
+
+## 🎮 Game Flow
+
+1. **Lobby**: Players join and set their names
+2. **Matchmaking**: Automatic pairing when 2 players are ready
+3. **Battle**: 10-minute clicking competition
+4. **Results**: Winner announced, new game starts automatically
+
+## 📊 Monitoring
+
+- **Colyseus Monitor**: http://localhost:3000/colyseus - Built-in room monitoring
+- **Admin Dashboard**: http://localhost:5173/dashboard - Custom admin interface
+- **API Health**: http://localhost:3000/health - Server health check
+
+## 🔍 Troubleshooting
+
+If you encounter issues:
+
+1. Check server is running: `curl http://localhost:3000/health`
+2. Check client is accessible: Open http://localhost:5173
+3. Check console for WebSocket connection errors
+4. Ensure ports 3000 and 5173 are not in use by other applications
+
+## 🎯 Next Steps
+
+The MVP is complete with:
+- ✅ Real-time multiplayer gameplay
+- ✅ Automatic matchmaking
+- ✅ Unique player naming system
+- ✅ Admin controls
+- ✅ Professional UI with animations
+- ✅ WebSocket communication
+- ✅ TypeScript throughout
+
+You can now:
+- Test the game with multiple browser tabs
+- Customize the UI styles
+- Add sound effects
+- Implement additional game modes
+- Deploy to production

README.md

@@ -0,0 +1,100 @@
+# Snatch Game - Competitive Clicker
+
+A real-time multiplayer competitive clicker game built with Colyseus.js and Vue 3.
+
+## Features
+
+- 🎮 Real-time multiplayer gameplay
+- 🏆 10-minute competitive clicking battles
+- 👥 2 players per room with automatic matchmaking
+- 🎯 Unique player naming system with auto-increment
+- 🎛️ Admin dashboard for game management
+- 📊 Real-time statistics and monitoring
+- 🔄 Automatic reconnection support
+- ⏸️ Pause/Resume/Restart game controls
+
+## Tech Stack
+
+- **Backend**: Colyseus.js, Express, TypeScript
+- **Frontend**: Vue 3, Vite, TypeScript
+- **Real-time**: WebSockets
+- **Styling**: Custom CSS
+
+## Installation
+
+```bash
+# Install all dependencies
+npm run install:all
+```
+
+## Development
+
+```bash
+# Start both server and client in development mode
+npm run dev
+```
+
+This will start:
+- Server on http://localhost:3000
+- Client on http://localhost:5173
+
+## URLs
+
+- **Game**: http://localhost:5173
+- **Admin Dashboard**: http://localhost:5173/dashboard
+- **Colyseus Monitor**: http://localhost:3000/colyseus
+- **API Endpoints**: http://localhost:3000/api
+
+## Project Structure
+
+```
+snatchgame/
+├── server/                 # Backend Colyseus server
+│   ├── src/
+│   │   ├── rooms/         # Game and Lobby rooms
+│   │   ├── schemas/       # State schemas
+│   │   ├── utils/         # Utilities (name manager)
+│   │   ├── adminApi.ts    # Admin REST API
+│   │   └── index.ts       # Server entry point
+│   └── package.json
+│
+├── client/                 # Frontend Vue application
+│   ├── src/
+│   │   ├── views/         # Vue components (Lobby, Game, Dashboard)
+│   │   ├── services/      # Colyseus client service
+│   │   ├── router/        # Vue Router
+│   │   └── main.ts        # App entry point
+│   └── package.json
+│
+└── shared/                 # Shared types between client and server
+    └── types.ts
+```
+
+## Game Rules
+
+1. Players enter the lobby and choose a username
+2. Click "Quick Play" to join or create a game room
+3. Game starts when 2 players join a room
+4. Players have 10 minutes to click as fast as possible
+5. The player with the most clicks wins
+6. Games automatically restart after finishing
+
+## Admin Dashboard
+
+The admin dashboard provides:
+- View all active rooms and their status
+- Pause/Resume games in progress
+- Restart games
+- Kick players from rooms
+- View real-time statistics
+- Monitor server performance
+
+## API Endpoints
+
+- `GET /api/rooms` - List all active rooms
+- `GET /api/rooms/:roomId/stats` - Get room statistics
+- `POST /api/rooms/:roomId/pause` - Pause a game
+- `POST /api/rooms/:roomId/resume` - Resume a game
+- `POST /api/rooms/:roomId/restart` - Restart a game
+- `POST /api/rooms/:roomId/kick/:playerId` - Kick a player
+- `GET /api/stats` - Get global server statistics

client/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Snatch Game - Competitive Clicker</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

client/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "snatchgame-client",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "latest",
+    "vue-router": "latest",
+    "colyseus.js": "latest"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "latest",
+    "@vue/tsconfig": "latest",
+    "typescript": "latest",
+    "vite": "latest",
+    "vue-tsc": "latest"
+  }
+}

client/src/App.vue

@@ -0,0 +1,24 @@
+<template>
+  <router-view />
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#app {
+  min-height: 100vh;
+}
+</style>

client/src/main.ts

@@ -0,0 +1,9 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+
+const app = createApp(App);
+
+app.use(router);
+
+app.mount('#app');

client/src/router/index.ts

@@ -0,0 +1,27 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import Lobby from '../views/Lobby.vue';
+import Game from '../views/Game.vue';
+import Dashboard from '../views/Dashboard.vue';
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'Lobby',
+      component: Lobby
+    },
+    {
+      path: '/game',
+      name: 'Game',
+      component: Game
+    },
+    {
+      path: '/dashboard',
+      name: 'Dashboard',
+      component: Dashboard
+    }
+  ]
+});
+
+export default router;

client/src/services/colyseus.ts

@@ -0,0 +1,193 @@
+import { Client, Room } from "colyseus.js";
+import { ref, Ref } from "vue";
+
+export interface PlayerData {
+  sessionId: string;
+  name: string;
+  clicks: number;
+  connected?: boolean;
+}
+
+export interface LobbyPlayer {
+  sessionId: string;
+  name: string;
+  inGame: boolean;
+}
+
+export interface AvailableRoom {
+  roomId: string;
+  playerCount: number;
+  status: string;
+}
+
+class ColyseusService {
+  private client: Client;
+  private currentRoom: Room | null = null;
+  
+  public lobbyRoom: Ref<Room | null> = ref(null);
+  public gameRoom: Ref<Room | null> = ref(null);
+  public playerName: Ref<string> = ref("");
+  public sessionId: Ref<string> = ref("");
+
+  constructor() {
+    this.client = new Client("ws://localhost:3000");
+  }
+
+  async joinLobby(): Promise<Room> {
+    try {
+      const room = await this.client.joinOrCreate("lobby");
+      this.lobbyRoom.value = room;
+      this.currentRoom = room;
+
+      room.onMessage("welcome", (data) => {
+        this.sessionId.value = data.sessionId;
+        this.playerName.value = data.assignedName;
+      });
+
+      room.onMessage("nameUpdated", (data) => {
+        this.playerName.value = data.name;
+      });
+
+      return room;
+    } catch (error) {
+      console.error("Failed to join lobby:", error);
+      throw error;
+    }
+  }
+
+  async setPlayerName(name: string): Promise<void> {
+    if (this.lobbyRoom.value) {
+      this.lobbyRoom.value.send("setName", name);
+    }
+  }
+
+  async quickPlay(): Promise<void> {
+    if (this.lobbyRoom.value) {
+      return new Promise((resolve, reject) => {
+        const room = this.lobbyRoom.value!;
+        
+        room.onMessage("roomReservation", async (reservation) => {
+          try {
+            await this.joinGameByReservation(reservation);
+            resolve();
+          } catch (error) {
+            reject(error);
+          }
+        });
+
+        room.onMessage("error", (error) => {
+          reject(new Error(error.message));
+        });
+
+        room.send("quickPlay");
+      });
+    }
+  }
+
+  async joinGameRoom(roomId: string): Promise<void> {
+    if (this.lobbyRoom.value) {
+      return new Promise((resolve, reject) => {
+        const room = this.lobbyRoom.value!;
+        
+        room.onMessage("roomReservation", async (reservation) => {
+          try {
+            await this.joinGameByReservation(reservation);
+            resolve();
+          } catch (error) {
+            reject(error);
+          }
+        });
+
+        room.onMessage("error", (error) => {
+          reject(new Error(error.message));
+        });
+
+        room.send("joinRoom", roomId);
+      });
+    }
+  }
+
+  private async joinGameByReservation(reservation: any): Promise<void> {
+    try {
+      const room = await this.client.consumeSeatReservation(reservation);
+      this.gameRoom.value = room;
+      this.currentRoom = room;
+
+      room.onMessage("playerInfo", (data) => {
+        this.sessionId.value = data.sessionId;
+        this.playerName.value = data.name;
+      });
+
+      if (this.lobbyRoom.value) {
+        this.lobbyRoom.value.leave();
+        this.lobbyRoom.value = null;
+      }
+    } catch (error) {
+      console.error("Failed to join game room:", error);
+      throw error;
+    }
+  }
+
+  sendClick(): void {
+    if (this.gameRoom.value) {
+      this.gameRoom.value.send("click");
+    }
+  }
+
+  leaveCurrentRoom(): void {
+    if (this.currentRoom) {
+      this.currentRoom.leave();
+      this.currentRoom = null;
+      this.gameRoom.value = null;
+      this.lobbyRoom.value = null;
+    }
+  }
+
+  async fetchRooms(): Promise<any[]> {
+    try {
+      const response = await fetch("http://localhost:3000/api/rooms");
+      return await response.json();
+    } catch (error) {
+      console.error("Failed to fetch rooms:", error);
+      return [];
+    }
+  }
+
+  async fetchRoomStats(roomId: string): Promise<any> {
+    try {
+      const response = await fetch(`http://localhost:3000/api/rooms/${roomId}/stats`);
+      return await response.json();
+    } catch (error) {
+      console.error("Failed to fetch room stats:", error);
+      return null;
+    }
+  }
+
+  async pauseRoom(roomId: string): Promise<void> {
+    await fetch(`http://localhost:3000/api/rooms/${roomId}/pause`, { method: "POST" });
+  }
+
+  async resumeRoom(roomId: string): Promise<void> {
+    await fetch(`http://localhost:3000/api/rooms/${roomId}/resume`, { method: "POST" });
+  }
+
+  async restartRoom(roomId: string): Promise<void> {
+    await fetch(`http://localhost:3000/api/rooms/${roomId}/restart`, { method: "POST" });
+  }
+
+  async kickPlayer(roomId: string, playerId: string): Promise<void> {
+    await fetch(`http://localhost:3000/api/rooms/${roomId}/kick/${playerId}`, { method: "POST" });
+  }
+
+  async fetchGlobalStats(): Promise<any> {
+    try {
+      const response = await fetch("http://localhost:3000/api/stats");
+      return await response.json();
+    } catch (error) {
+      console.error("Failed to fetch global stats:", error);
+      return null;
+    }
+  }
+}
+
+export const colyseusService = new ColyseusService();

client/src/views/Dashboard.vue

@@ -0,0 +1,540 @@
+<template>
+  <div class="dashboard">
+    <div class="dashboard-header">
+      <h1>🎛️ Admin Dashboard</h1>
+      <div class="stats-summary">
+        <div class="stat-card">
+          <span class="stat-label">Total CCU</span>
+          <span class="stat-value">{{ globalStats?.globalCCU || 0 }}</span>
+        </div>
+        <div class="stat-card">
+          <span class="stat-label">Active Rooms</span>
+          <span class="stat-value">{{ rooms.length }}</span>
+        </div>
+        <div class="stat-card">
+          <span class="stat-label">Total Players</span>
+          <span class="stat-value">{{ totalPlayers }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="dashboard-content">
+      <div class="rooms-section">
+        <h2>Active Game Rooms</h2>
+        <div v-if="rooms.length === 0" class="no-rooms">
+          No active game rooms
+        </div>
+        <div v-else class="rooms-grid">
+          <div v-for="room in gameRooms" :key="room.roomId" class="room-card">
+            <div class="room-header">
+              <span class="room-id">Room {{ room.roomId.slice(0, 8) }}</span>
+              <span class="room-status" :class="`status-${room.metadata?.gameStatus || 'waiting'}`">
+                {{ room.metadata?.gameStatus || 'waiting' }}
+              </span>
+            </div>
+            
+            <div class="room-details">
+              <div class="detail-row">
+                <span class="detail-label">Players:</span>
+                <span class="detail-value">{{ room.clients }}/{{ room.maxClients }}</span>
+              </div>
+              <div class="detail-row">
+                <span class="detail-label">Created:</span>
+                <span class="detail-value">{{ formatTime(room.createdAt) }}</span>
+              </div>
+            </div>
+
+            <div class="room-actions">
+              <button 
+                v-if="room.metadata?.gameStatus === 'playing'"
+                @click="pauseRoom(room.roomId)"
+                class="btn btn-action btn-pause"
+              >
+                ⏸️ Pause
+              </button>
+              <button 
+                v-if="room.metadata?.gameStatus === 'paused'"
+                @click="resumeRoom(room.roomId)"
+                class="btn btn-action btn-resume"
+              >
+                ▶️ Resume
+              </button>
+              <button 
+                @click="restartRoom(room.roomId)"
+                class="btn btn-action btn-restart"
+              >
+                🔄 Restart
+              </button>
+              <button 
+                @click="viewRoomDetails(room.roomId)"
+                class="btn btn-action btn-view"
+              >
+                📊 Details
+              </button>
+            </div>
+
+            <div v-if="roomDetails[room.roomId]" class="room-stats">
+              <h4>Room Statistics</h4>
+              <div v-if="roomDetails[room.roomId].players" class="players-list">
+                <div v-for="player in roomDetails[room.roomId].players" 
+                     :key="player.sessionId"
+                     class="player-row">
+                  <span class="player-name">{{ player.name }}</span>
+                  <span class="player-clicks">{{ player.clicks }} clicks</span>
+                  <button 
+                    @click="kickPlayer(room.roomId, player.sessionId)"
+                    class="btn btn-kick"
+                  >
+                    Kick
+                  </button>
+                </div>
+              </div>
+              <div class="stats-info">
+                <div class="stat-item">
+                  <span>Time Remaining:</span>
+                  <span>{{ formatSeconds(roomDetails[room.roomId].timeRemaining) }}</span>
+                </div>
+                <div v-if="roomDetails[room.roomId].winner" class="stat-item">
+                  <span>Winner:</span>
+                  <span class="winner-name">{{ roomDetails[room.roomId].winner }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="lobby-section">
+        <h2>Lobby Rooms</h2>
+        <div v-if="lobbyRooms.length === 0" class="no-rooms">
+          No active lobby rooms
+        </div>
+        <div v-else class="lobby-grid">
+          <div v-for="room in lobbyRooms" :key="room.roomId" class="lobby-card">
+            <div class="lobby-header">
+              <span class="room-type">🏠 Lobby</span>
+              <span class="room-clients">{{ room.clients }} players</span>
+            </div>
+            <div class="room-id-small">{{ room.roomId.slice(0, 8) }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="dashboard-footer">
+      <button @click="refreshData" class="btn btn-refresh">
+        🔄 Refresh Data
+      </button>
+      <button @click="goToLobby" class="btn btn-lobby">
+        🎮 Go to Lobby
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { colyseusService } from '../services/colyseus';
+
+const router = useRouter();
+const rooms = ref<any[]>([]);
+const roomDetails = ref<{ [key: string]: any }>({});
+const globalStats = ref<any>(null);
+const refreshInterval = ref<NodeJS.Timeout>();
+
+const gameRooms = computed(() => rooms.value.filter(r => r.name === 'game'));
+const lobbyRooms = computed(() => rooms.value.filter(r => r.name === 'lobby'));
+const totalPlayers = computed(() => rooms.value.reduce((sum, room) => sum + room.clients, 0));
+
+onMounted(() => {
+  fetchData();
+  refreshInterval.value = setInterval(fetchData, 3000);
+});
+
+onUnmounted(() => {
+  if (refreshInterval.value) {
+    clearInterval(refreshInterval.value);
+  }
+});
+
+async function fetchData() {
+  try {
+    const [roomsData, statsData] = await Promise.all([
+      colyseusService.fetchRooms(),
+      colyseusService.fetchGlobalStats()
+    ]);
+    
+    rooms.value = roomsData;
+    globalStats.value = statsData;
+  } catch (error) {
+    console.error('Failed to fetch dashboard data:', error);
+  }
+}
+
+async function viewRoomDetails(roomId: string) {
+  try {
+    const stats = await colyseusService.fetchRoomStats(roomId);
+    roomDetails.value[roomId] = stats;
+  } catch (error) {
+    console.error('Failed to fetch room details:', error);
+  }
+}
+
+async function pauseRoom(roomId: string) {
+  try {
+    await colyseusService.pauseRoom(roomId);
+    await fetchData();
+  } catch (error) {
+    console.error('Failed to pause room:', error);
+  }
+}
+
+async function resumeRoom(roomId: string) {
+  try {
+    await colyseusService.resumeRoom(roomId);
+    await fetchData();
+  } catch (error) {
+    console.error('Failed to resume room:', error);
+  }
+}
+
+async function restartRoom(roomId: string) {
+  try {
+    await colyseusService.restartRoom(roomId);
+    await fetchData();
+  } catch (error) {
+    console.error('Failed to restart room:', error);
+  }
+}
+
+async function kickPlayer(roomId: string, playerId: string) {
+  try {
+    await colyseusService.kickPlayer(roomId, playerId);
+    await viewRoomDetails(roomId);
+  } catch (error) {
+    console.error('Failed to kick player:', error);
+  }
+}
+
+function formatTime(timestamp: number): string {
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString();
+}
+
+function formatSeconds(seconds: number): string {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, '0')}`;
+}
+
+function refreshData() {
+  fetchData();
+}
+
+function goToLobby() {
+  router.push('/');
+}
+</script>
+
+<style scoped>
+.dashboard {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  padding: 20px;
+}
+
+.dashboard-header {
+  max-width: 1400px;
+  margin: 0 auto 40px;
+}
+
+.dashboard-header h1 {
+  font-size: 2.5rem;
+  margin-bottom: 30px;
+}
+
+.stats-summary {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+}
+
+.stat-card {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 20px;
+  border-radius: 15px;
+  backdrop-filter: blur(10px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.stat-label {
+  font-size: 14px;
+  opacity: 0.8;
+  margin-bottom: 10px;
+}
+
+.stat-value {
+  font-size: 36px;
+  font-weight: bold;
+}
+
+.dashboard-content {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.rooms-section,
+.lobby-section {
+  margin-bottom: 40px;
+}
+
+.rooms-section h2,
+.lobby-section h2 {
+  font-size: 1.8rem;
+  margin-bottom: 20px;
+}
+
+.no-rooms {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 40px;
+  border-radius: 15px;
+  text-align: center;
+  opacity: 0.7;
+}
+
+.rooms-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+  gap: 20px;
+}
+
+.room-card {
+  background: white;
+  color: #333;
+  border-radius: 15px;
+  padding: 20px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+}
+
+.room-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+  border-bottom: 2px solid #f0f0f0;
+}
+
+.room-id {
+  font-weight: bold;
+  font-family: monospace;
+}
+
+.room-status {
+  padding: 5px 15px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.status-waiting {
+  background: #e8f5e9;
+  color: #4caf50;
+}
+
+.status-playing {
+  background: #e3f2fd;
+  color: #2196f3;
+}
+
+.status-paused {
+  background: #fff3e0;
+  color: #ff9800;
+}
+
+.status-finished {
+  background: #f3e5f5;
+  color: #9c27b0;
+}
+
+.room-details {
+  margin-bottom: 20px;
+}
+
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 5px 0;
+}
+
+.detail-label {
+  color: #666;
+}
+
+.detail-value {
+  font-weight: 600;
+}
+
+.room-actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.btn {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.btn-action {
+  flex: 1;
+  min-width: 80px;
+}
+
+.btn-pause {
+  background: #ff9800;
+  color: white;
+}
+
+.btn-resume {
+  background: #4caf50;
+  color: white;
+}
+
+.btn-restart {
+  background: #2196f3;
+  color: white;
+}
+
+.btn-view {
+  background: #9c27b0;
+  color: white;
+}
+
+.btn-kick {
+  background: #f44336;
+  color: white;
+  padding: 4px 12px;
+}
+
+.btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+.room-stats {
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 2px solid #f0f0f0;
+}
+
+.room-stats h4 {
+  margin-bottom: 15px;
+  color: #666;
+}
+
+.players-list {
+  margin-bottom: 15px;
+}
+
+.player-row {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  margin-bottom: 8px;
+}
+
+.player-name {
+  flex: 1;
+  font-weight: 600;
+}
+
+.player-clicks {
+  margin-right: 15px;
+  color: #666;
+}
+
+.stats-info {
+  background: #f8f9fa;
+  padding: 15px;
+  border-radius: 8px;
+}
+
+.stat-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 5px 0;
+}
+
+.winner-name {
+  color: #4caf50;
+  font-weight: bold;
+}
+
+.lobby-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 15px;
+}
+
+.lobby-card {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 20px;
+  border-radius: 15px;
+  backdrop-filter: blur(10px);
+}
+
+.lobby-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.room-type {
+  font-size: 18px;
+}
+
+.room-clients {
+  opacity: 0.8;
+}
+
+.room-id-small {
+  font-family: monospace;
+  opacity: 0.6;
+  font-size: 12px;
+}
+
+.dashboard-footer {
+  max-width: 1400px;
+  margin: 40px auto 0;
+  display: flex;
+  gap: 20px;
+  justify-content: center;
+}
+
+.btn-refresh,
+.btn-lobby {
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  padding: 12px 30px;
+  backdrop-filter: blur(10px);
+}
+
+.btn-refresh:hover,
+.btn-lobby:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+</style>

client/src/views/Game.vue

@@ -0,0 +1,494 @@
+<template>
+  <div class="game">
+    <div class="game-container">
+      <div class="game-header">
+        <div class="timer-section">
+          <div class="timer" :class="{ 'timer-warning': timeRemaining < 60 }">
+            <span class="timer-icon">⏱️</span>
+            <span class="timer-text">{{ formatTime(timeRemaining) }}</span>
+          </div>
+          <div class="game-status" :class="`status-${gameStatus}`">
+            {{ gameStatus }}
+          </div>
+        </div>
+      </div>
+
+      <div class="players-section">
+        <div v-for="player in players" :key="player.sessionId" class="player-card" 
+             :class="{ 'current-player': player.sessionId === sessionId }">
+          <div class="player-name">{{ player.name }}</div>
+          <div class="player-clicks">
+            <span class="clicks-number">{{ player.clicks }}</span>
+            <span class="clicks-label">clicks</span>
+          </div>
+          <div v-if="!player.connected" class="disconnected-badge">Disconnected</div>
+        </div>
+      </div>
+
+      <div v-if="gameStatus === 'playing'" class="click-area" @click="handleClick">
+        <div class="click-button" :class="{ 'clicked': isClicking }">
+          <span class="click-icon">👆</span>
+          <span class="click-text">CLICK!</span>
+        </div>
+        <div class="click-hint">Click as fast as you can!</div>
+      </div>
+
+      <div v-else-if="gameStatus === 'waiting'" class="waiting-area">
+        <div class="waiting-message">
+          <div class="spinner"></div>
+          <h2>Waiting for opponent...</h2>
+          <p>Game will start when another player joins</p>
+        </div>
+      </div>
+
+      <div v-else-if="gameStatus === 'paused'" class="paused-area">
+        <div class="paused-message">
+          <span class="pause-icon">⏸️</span>
+          <h2>Game Paused</h2>
+          <p>Waiting for players to reconnect...</p>
+        </div>
+      </div>
+
+      <div v-else-if="gameStatus === 'finished'" class="finished-area">
+        <div class="finished-message">
+          <h2 class="winner-title">🏆 Game Over!</h2>
+          <div v-if="winner" class="winner-name">
+            Winner: <span>{{ winner }}</span>
+          </div>
+          <div class="final-scores">
+            <div v-for="player in players" :key="player.sessionId" class="final-score">
+              <span class="score-name">{{ player.name }}:</span>
+              <span class="score-clicks">{{ player.clicks }} clicks</span>
+            </div>
+          </div>
+          <p class="restart-hint">New game starting soon...</p>
+        </div>
+      </div>
+
+      <div class="game-footer">
+        <button @click="leaveGame" class="btn btn-leave">Leave Game</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { colyseusService } from '../services/colyseus';
+import { getStateCallbacks } from 'colyseus.js';
+
+const router = useRouter();
+const players = ref<any[]>([]);
+const gameStatus = ref('waiting');
+const timeRemaining = ref(600);
+const winner = ref('');
+const isClicking = ref(false);
+
+const sessionId = computed(() => colyseusService.sessionId.value);
+
+let clickTimeout: NodeJS.Timeout;
+
+onMounted(() => {
+  const room = colyseusService.gameRoom.value;
+  
+  if (!room) {
+    router.push('/');
+    return;
+  }
+
+  const $ = getStateCallbacks(room);
+
+  $(room.state).listen("gameStatus", (value: string) => {
+    gameStatus.value = value;
+  });
+
+  $(room.state).listen("timeRemaining", (value: number) => {
+    timeRemaining.value = value;
+  });
+
+  $(room.state).listen("winner", (value: string) => {
+    winner.value = value;
+  });
+
+  $(room.state).players.onAdd((player: any) => {
+    players.value.push({
+      sessionId: player.sessionId,
+      name: player.name,
+      clicks: player.clicks,
+      connected: player.connected
+    });
+
+    $(player).listen("clicks", (value: number) => {
+      const p = players.value.find(p => p.sessionId === player.sessionId);
+      if (p) p.clicks = value;
+    });
+
+    $(player).listen("connected", (value: boolean) => {
+      const p = players.value.find(p => p.sessionId === player.sessionId);
+      if (p) p.connected = value;
+    });
+  });
+
+  $(room.state).players.onRemove((player: any) => {
+    const index = players.value.findIndex(p => p.sessionId === player.sessionId);
+    if (index !== -1) {
+      players.value.splice(index, 1);
+    }
+  });
+
+  room.onMessage("gameStart", () => {
+    console.log("Game started!");
+  });
+
+  room.onMessage("gameEnd", (data) => {
+    console.log("Game ended!", data);
+  });
+
+  room.onMessage("gamePaused", () => {
+    console.log("Game paused");
+  });
+
+  room.onMessage("gameRestart", () => {
+    console.log("Game restarting");
+    players.value.forEach(p => p.clicks = 0);
+  });
+});
+
+onUnmounted(() => {
+  if (clickTimeout) {
+    clearTimeout(clickTimeout);
+  }
+});
+
+function handleClick() {
+  if (gameStatus.value !== 'playing') return;
+  
+  colyseusService.sendClick();
+  
+  isClicking.value = true;
+  clearTimeout(clickTimeout);
+  clickTimeout = setTimeout(() => {
+    isClicking.value = false;
+  }, 100);
+}
+
+function formatTime(seconds: number): string {
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return `${mins}:${secs.toString().padStart(2, '0')}`;
+}
+
+function leaveGame() {
+  colyseusService.leaveCurrentRoom();
+  router.push('/');
+}
+</script>
+
+<style scoped>
+.game {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.game-container {
+  background: white;
+  border-radius: 20px;
+  padding: 40px;
+  max-width: 900px;
+  width: 100%;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.game-header {
+  margin-bottom: 30px;
+}
+
+.timer-section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+}
+
+.timer {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 15px 30px;
+  background: #f8f9fa;
+  border-radius: 50px;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.timer-warning {
+  background: #ffebee;
+  color: #c62828;
+  animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+}
+
+.timer-icon {
+  font-size: 28px;
+}
+
+.game-status {
+  padding: 8px 20px;
+  border-radius: 20px;
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 14px;
+}
+
+.status-waiting {
+  background: #e8f5e9;
+  color: #4caf50;
+}
+
+.status-playing {
+  background: #e3f2fd;
+  color: #2196f3;
+}
+
+.status-paused {
+  background: #fff3e0;
+  color: #ff9800;
+}
+
+.status-finished {
+  background: #f3e5f5;
+  color: #9c27b0;
+}
+
+.players-section {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+  margin-bottom: 40px;
+}
+
+.player-card {
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 15px;
+  text-align: center;
+  position: relative;
+  border: 3px solid transparent;
+  transition: all 0.3s;
+}
+
+.player-card.current-player {
+  border-color: #667eea;
+  background: linear-gradient(145deg, #f5f7ff, #fff);
+}
+
+.player-name {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.player-clicks {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.clicks-number {
+  font-size: 36px;
+  font-weight: bold;
+  color: #667eea;
+}
+
+.clicks-label {
+  color: #666;
+  font-size: 14px;
+}
+
+.disconnected-badge {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: #ff5252;
+  color: white;
+  padding: 4px 8px;
+  border-radius: 10px;
+  font-size: 12px;
+}
+
+.click-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 60px 0;
+}
+
+.click-button {
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.1s;
+  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
+  user-select: none;
+}
+
+.click-button:hover {
+  transform: scale(1.05);
+}
+
+.click-button:active,
+.click-button.clicked {
+  transform: scale(0.95);
+  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
+}
+
+.click-icon {
+  font-size: 60px;
+  margin-bottom: 10px;
+}
+
+.click-text {
+  color: white;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.click-hint {
+  margin-top: 20px;
+  color: #666;
+  font-size: 16px;
+}
+
+.waiting-area,
+.paused-area,
+.finished-area {
+  padding: 60px 20px;
+  text-align: center;
+}
+
+.waiting-message,
+.paused-message,
+.finished-message {
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.spinner {
+  width: 60px;
+  height: 60px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #667eea;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin: 0 auto 20px;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.pause-icon {
+  font-size: 60px;
+  display: block;
+  margin-bottom: 20px;
+}
+
+.winner-title {
+  font-size: 36px;
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.winner-name {
+  font-size: 24px;
+  margin-bottom: 30px;
+}
+
+.winner-name span {
+  color: #667eea;
+  font-weight: bold;
+}
+
+.final-scores {
+  background: #f8f9fa;
+  padding: 20px;
+  border-radius: 10px;
+  margin-bottom: 20px;
+}
+
+.final-score {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.final-score:last-child {
+  border-bottom: none;
+}
+
+.score-name {
+  font-weight: 600;
+  color: #333;
+}
+
+.score-clicks {
+  color: #667eea;
+  font-weight: bold;
+}
+
+.restart-hint {
+  color: #666;
+  font-style: italic;
+}
+
+.game-footer {
+  margin-top: 40px;
+  text-align: center;
+}
+
+.btn-leave {
+  background: #ef5350;
+  color: white;
+  padding: 12px 30px;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.btn-leave:hover {
+  background: #e53935;
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(239, 83, 80, 0.3);
+}
+
+h2 {
+  color: #333;
+  margin-bottom: 10px;
+}
+
+p {
+  color: #666;
+  font-size: 16px;
+}
+</style>

client/src/views/Lobby.vue

@@ -0,0 +1,405 @@
+<template>
+  <div class="lobby">
+    <div class="lobby-container">
+      <h1 class="title">🎮 Snatch Game</h1>
+      <div class="subtitle">Competitive Clicker Battle</div>
+
+      <div class="player-section">
+        <div class="name-input-group">
+          <input
+            v-model="inputName"
+            @keyup.enter="updateName"
+            type="text"
+            placeholder="Enter your name"
+            class="name-input"
+            maxlength="20"
+          />
+          <button @click="updateName" class="btn btn-secondary">Set Name</button>
+        </div>
+        <div class="current-name">
+          Playing as: <span class="player-name">{{ playerName || 'guest' }}</span>
+        </div>
+      </div>
+
+      <div class="main-actions">
+        <button @click="handleQuickPlay" class="btn btn-primary btn-large" :disabled="isJoining">
+          <span v-if="!isJoining">⚡ Quick Play</span>
+          <span v-else>Finding match...</span>
+        </button>
+      </div>
+
+      <div class="rooms-section">
+        <h2>Available Rooms</h2>
+        <div v-if="availableRooms.length === 0" class="no-rooms">
+          No rooms available. Click Quick Play to start a new game!
+        </div>
+        <div v-else class="rooms-list">
+          <div
+            v-for="room in availableRooms"
+            :key="room.roomId"
+            class="room-card"
+            @click="joinRoom(room.roomId)"
+          >
+            <div class="room-info">
+              <span class="room-id">Room #{{ room.roomId.slice(0, 6) }}</span>
+              <span class="room-players">{{ room.playerCount }}/2 players</span>
+            </div>
+            <span class="room-status" :class="`status-${room.status}`">
+              {{ room.status }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="online-players">
+        <h3>Online Players</h3>
+        <div class="players-grid">
+          <div
+            v-for="player in onlinePlayers"
+            :key="player.sessionId"
+            class="player-tag"
+            :class="{ 'in-game': player.inGame }"
+          >
+            {{ player.name }}
+            <span v-if="player.inGame" class="status-dot">🎮</span>
+          </div>
+        </div>
+        <div class="player-count">Total: {{ totalPlayers }} players online</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { colyseusService } from '../services/colyseus';
+import { getStateCallbacks } from 'colyseus.js';
+
+const router = useRouter();
+const inputName = ref('');
+const isJoining = ref(false);
+const availableRooms = ref<any[]>([]);
+const onlinePlayers = ref<any[]>([]);
+const totalPlayers = ref(0);
+
+const playerName = computed(() => colyseusService.playerName.value);
+
+onMounted(async () => {
+  try {
+    const room = await colyseusService.joinLobby();
+    const $ = getStateCallbacks(room);
+    
+    $(room.state).listen("availableRooms", (value: any) => {
+      availableRooms.value = value || [];
+    });
+
+    $(room.state).listen("totalPlayers", (value: number) => {
+      totalPlayers.value = value;
+    });
+
+    $(room.state).players.onAdd((player: any) => {
+      const exists = onlinePlayers.value.find(p => p.sessionId === player.sessionId);
+      if (!exists) {
+        onlinePlayers.value.push({
+          sessionId: player.sessionId,
+          name: player.name,
+          inGame: player.inGame
+        });
+      }
+
+      $(player).listen("name", (value: string) => {
+        const p = onlinePlayers.value.find(p => p.sessionId === player.sessionId);
+        if (p) p.name = value;
+      });
+
+      $(player).listen("inGame", (value: boolean) => {
+        const p = onlinePlayers.value.find(p => p.sessionId === player.sessionId);
+        if (p) p.inGame = value;
+      });
+    });
+
+    $(room.state).players.onRemove((player: any) => {
+      const index = onlinePlayers.value.findIndex(p => p.sessionId === player.sessionId);
+      if (index !== -1) {
+        onlinePlayers.value.splice(index, 1);
+      }
+    });
+  } catch (error) {
+    console.error('Failed to join lobby:', error);
+  }
+});
+
+onUnmounted(() => {
+  colyseusService.leaveCurrentRoom();
+});
+
+async function updateName() {
+  if (inputName.value.trim()) {
+    await colyseusService.setPlayerName(inputName.value.trim());
+    inputName.value = '';
+  }
+}
+
+async function handleQuickPlay() {
+  isJoining.value = true;
+  try {
+    await colyseusService.quickPlay();
+    router.push('/game');
+  } catch (error) {
+    console.error('Failed to join game:', error);
+    isJoining.value = false;
+  }
+}
+
+async function joinRoom(roomId: string) {
+  isJoining.value = true;
+  try {
+    await colyseusService.joinGameRoom(roomId);
+    router.push('/game');
+  } catch (error) {
+    console.error('Failed to join room:', error);
+    isJoining.value = false;
+  }
+}
+</script>
+
+<style scoped>
+.lobby {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.lobby-container {
+  background: white;
+  border-radius: 20px;
+  padding: 40px;
+  max-width: 800px;
+  width: 100%;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.title {
+  font-size: 3rem;
+  text-align: center;
+  margin: 0;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.subtitle {
+  text-align: center;
+  color: #666;
+  margin-top: 10px;
+  font-size: 1.2rem;
+}
+
+.player-section {
+  margin: 30px 0;
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 10px;
+}
+
+.name-input-group {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+
+.name-input {
+  flex: 1;
+  padding: 12px;
+  border: 2px solid #e0e0e0;
+  border-radius: 8px;
+  font-size: 16px;
+  transition: border-color 0.3s;
+}
+
+.name-input:focus {
+  outline: none;
+  border-color: #667eea;
+}
+
+.current-name {
+  text-align: center;
+  color: #666;
+  font-size: 1.1rem;
+}
+
+.player-name {
+  color: #667eea;
+  font-weight: bold;
+}
+
+.btn {
+  padding: 12px 24px;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
+}
+
+.btn-secondary {
+  background: #667eea;
+  color: white;
+}
+
+.btn-secondary:hover {
+  background: #5a67d8;
+}
+
+.btn-large {
+  padding: 18px 36px;
+  font-size: 20px;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.main-actions {
+  text-align: center;
+  margin: 40px 0;
+}
+
+.rooms-section {
+  margin: 40px 0;
+}
+
+.rooms-section h2 {
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.no-rooms {
+  text-align: center;
+  padding: 30px;
+  background: #f8f9fa;
+  border-radius: 10px;
+  color: #666;
+}
+
+.rooms-list {
+  display: grid;
+  gap: 15px;
+}
+
+.room-card {
+  padding: 15px 20px;
+  background: #f8f9fa;
+  border-radius: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  border: 2px solid transparent;
+}
+
+.room-card:hover {
+  border-color: #667eea;
+  transform: translateX(5px);
+}
+
+.room-info {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+}
+
+.room-id {
+  font-weight: bold;
+  color: #333;
+}
+
+.room-players {
+  color: #666;
+}
+
+.room-status {
+  padding: 5px 15px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.status-waiting {
+  background: #e8f5e9;
+  color: #4caf50;
+}
+
+.status-playing {
+  background: #fff3e0;
+  color: #ff9800;
+}
+
+.status-finished {
+  background: #f3e5f5;
+  color: #9c27b0;
+}
+
+.online-players {
+  margin-top: 40px;
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 10px;
+}
+
+.online-players h3 {
+  color: #333;
+  margin-bottom: 15px;
+}
+
+.players-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+
+.player-tag {
+  padding: 6px 12px;
+  background: white;
+  border-radius: 20px;
+  font-size: 14px;
+  border: 2px solid #e0e0e0;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.player-tag.in-game {
+  border-color: #667eea;
+  background: #f5f7ff;
+}
+
+.status-dot {
+  font-size: 12px;
+}
+
+.player-count {
+  text-align: center;
+  color: #666;
+  font-size: 14px;
+}
+</style>

client/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

client/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

client/tsconfig.node.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

client/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3000',
+        changeOrigin: true
+      }
+    }
+  }
+})

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "snatchgame",
+  "version": "1.0.0",
+  "description": "Competitive clicker game with Colyseus.js",
+  "scripts": {
+    "install:all": "npm run install:server && npm run install:client",
+    "install:server": "cd server && npm install",
+    "install:client": "cd client && npm install",
+    "dev": "npm run dev:server & npm run dev:client",
+    "dev:server": "cd server && npm run dev",
+    "dev:client": "cd client && npm run dev",
+    "build": "npm run build:server && npm run build:client",
+    "build:server": "cd server && npm run build",
+    "build:client": "cd client && npm run build"
+  },
+  "author": "",
+  "license": "MIT"
+}

server/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "snatchgame-server",
+  "version": "1.0.0",
+  "description": "Competitive clicker game server",
+  "main": "dist/index.js",
+  "scripts": {
+    "dev": "npx ts-node-dev --respawn --transpile-only src/index.ts",
+    "build": "tsc",
+    "start": "node dist/index.js"
+  },
+  "dependencies": {
+    "@colyseus/monitor": "latest",
+    "@colyseus/schema": "latest",
+    "colyseus": "latest",
+    "cors": "latest",
+    "express": "latest"
+  },
+  "devDependencies": {
+    "@types/cors": "latest",
+    "@types/express": "latest",
+    "@types/node": "latest",
+    "ts-node-dev": "^2.0.0",
+    "typescript": "latest"
+  }
+}

server/src/adminApi.ts

@@ -0,0 +1,129 @@
+import { Request, Response, Router } from "express";
+import { matchMaker } from "colyseus";
+import { GameRoom } from "./rooms/GameRoom";
+
+const adminRouter = Router();
+
+adminRouter.get("/rooms", async (req: Request, res: Response) => {
+  try {
+    const rooms = await matchMaker.query({});
+    const roomStats = rooms.map(room => ({
+      roomId: room.roomId,
+      name: room.name,
+      clients: room.clients,
+      maxClients: room.maxClients,
+      metadata: room.metadata,
+      locked: room.locked,
+      private: room.private,
+      createdAt: room.createdAt
+    }));
+    
+    res.json(roomStats);
+  } catch (error) {
+    console.error("[AdminAPI] Error fetching rooms:", error);
+    res.status(500).json({ error: "Failed to fetch rooms" });
+  }
+});
+
+adminRouter.get("/rooms/:roomId/stats", async (req: Request, res: Response) => {
+  try {
+    const { roomId } = req.params;
+    const roomData = await matchMaker.remoteRoomCall(roomId, "getState");
+    
+    res.json(roomData);
+  } catch (error) {
+    console.error(`[AdminAPI] Error fetching room ${req.params.roomId} stats:`, error);
+    res.status(500).json({ error: "Failed to fetch room stats" });
+  }
+});
+
+adminRouter.post("/rooms/:roomId/pause", async (req: Request, res: Response) => {
+  try {
+    const { roomId } = req.params;
+    const rooms = await matchMaker.query({ roomId });
+    
+    if (rooms.length === 0) {
+      return res.status(404).json({ error: "Room not found" });
+    }
+
+    await matchMaker.remoteRoomCall(roomId, "broadcast", ["admin:pause"]);
+    
+    res.json({ success: true, message: "Room paused" });
+  } catch (error) {
+    console.error(`[AdminAPI] Error pausing room ${req.params.roomId}:`, error);
+    res.status(500).json({ error: "Failed to pause room" });
+  }
+});
+
+adminRouter.post("/rooms/:roomId/resume", async (req: Request, res: Response) => {
+  try {
+    const { roomId } = req.params;
+    const rooms = await matchMaker.query({ roomId });
+    
+    if (rooms.length === 0) {
+      return res.status(404).json({ error: "Room not found" });
+    }
+
+    await matchMaker.remoteRoomCall(roomId, "broadcast", ["admin:resume"]);
+    
+    res.json({ success: true, message: "Room resumed" });
+  } catch (error) {
+    console.error(`[AdminAPI] Error resuming room ${req.params.roomId}:`, error);
+    res.status(500).json({ error: "Failed to resume room" });
+  }
+});
+
+adminRouter.post("/rooms/:roomId/restart", async (req: Request, res: Response) => {
+  try {
+    const { roomId } = req.params;
+    const rooms = await matchMaker.query({ roomId });
+    
+    if (rooms.length === 0) {
+      return res.status(404).json({ error: "Room not found" });
+    }
+
+    await matchMaker.remoteRoomCall(roomId, "broadcast", ["admin:restart"]);
+    
+    res.json({ success: true, message: "Room restarted" });
+  } catch (error) {
+    console.error(`[AdminAPI] Error restarting room ${req.params.roomId}:`, error);
+    res.status(500).json({ error: "Failed to restart room" });
+  }
+});
+
+adminRouter.post("/rooms/:roomId/kick/:playerId", async (req: Request, res: Response) => {
+  try {
+    const { roomId, playerId } = req.params;
+    const rooms = await matchMaker.query({ roomId });
+    
+    if (rooms.length === 0) {
+      return res.status(404).json({ error: "Room not found" });
+    }
+
+    await matchMaker.remoteRoomCall(roomId, "broadcast", ["admin:kick", playerId]);
+    
+    res.json({ success: true, message: `Player ${playerId} kicked` });
+  } catch (error) {
+    console.error(`[AdminAPI] Error kicking player from room ${req.params.roomId}:`, error);
+    res.status(500).json({ error: "Failed to kick player" });
+  }
+});
+
+adminRouter.get("/stats", async (req: Request, res: Response) => {
+  try {
+    const stats = await matchMaker.stats.fetchAll();
+    const globalCCU = await matchMaker.stats.getGlobalCCU();
+    
+    res.json({
+      processes: stats,
+      globalCCU,
+      localCCU: matchMaker.stats.local.ccu,
+      localRoomCount: matchMaker.stats.local.roomCount
+    });
+  } catch (error) {
+    console.error("[AdminAPI] Error fetching stats:", error);
+    res.status(500).json({ error: "Failed to fetch stats" });
+  }
+});
+
+export { adminRouter };

server/src/index.ts

@@ -0,0 +1,42 @@
+import { Server } from "colyseus";
+import { createServer } from "http";
+import express from "express";
+import cors from "cors";
+import { monitor } from "@colyseus/monitor";
+
+import { GameRoom } from "./rooms/GameRoom";
+import { LobbyRoom } from "./rooms/LobbyRoom";
+import { adminRouter } from "./adminApi";
+
+const port = Number(process.env.PORT) || 3000;
+const app = express();
+
+app.use(cors());
+app.use(express.json());
+
+const server = createServer(app);
+const gameServer = new Server({
+  server,
+});
+
+gameServer.define("lobby", LobbyRoom)
+  .filterBy(["maxClients"]);
+
+gameServer.define("game", GameRoom)
+  .filterBy(["maxClients"])
+  .enableRealtimeListing();
+
+app.use("/api", adminRouter);
+
+app.use("/colyseus", monitor());
+
+app.get("/health", (req, res) => {
+  res.json({ status: "healthy", uptime: process.uptime() });
+});
+
+gameServer.listen(port);
+
+console.log(`🎮 Snatch Game Server is running on port ${port}`);
+console.log(`📊 Monitor: http://localhost:${port}/colyseus`);
+console.log(`🌐 WebSocket: ws://localhost:${port}`);
+console.log(`🔧 Admin API: http://localhost:${port}/api`);

server/src/rooms/GameRoom.ts

@@ -0,0 +1,200 @@
+import { Room, Client } from "colyseus";
+import { GameState } from "./schemas/GameState";
+import { GameStatus } from "../../../shared/types";
+import { NameManager } from "../utils/nameManager";
+
+export class GameRoom extends Room<GameState> {
+  maxClients = 2;
+  private gameInterval?: NodeJS.Timeout;
+  private readonly TICK_RATE = 1000; // Update every second
+
+  onCreate(options: any) {
+    this.setState(new GameState());
+    this.state.roomId = this.roomId;
+
+    this.onMessage("click", (client) => {
+      this.handleClick(client);
+    });
+
+    this.onMessage("admin:pause", () => {
+      this.state.pauseGame();
+    });
+
+    this.onMessage("admin:resume", () => {
+      this.state.resumeGame();
+    });
+
+    this.onMessage("admin:restart", () => {
+      this.handleRestart();
+    });
+
+    this.onMessage("admin:kick", (client, playerId: string) => {
+      this.handleKick(playerId);
+    });
+  }
+
+  onJoin(client: Client, options: any) {
+    console.log(`[GameRoom] ${client.sessionId} joined room ${this.roomId}`);
+
+    const playerName = options.playerName || "player";
+    const uniqueName = NameManager.getInstance().generateUniquePlayerName(playerName, client.sessionId);
+    
+    this.state.addPlayer(client.sessionId, uniqueName);
+
+    client.send("playerInfo", {
+      sessionId: client.sessionId,
+      name: uniqueName,
+      roomId: this.roomId
+    });
+
+    if (this.state.players.size === 2 && this.state.gameStatus === GameStatus.WAITING) {
+      this.startGame();
+    }
+  }
+
+  onLeave(client: Client, consented: boolean) {
+    console.log(`[GameRoom] ${client.sessionId} left room ${this.roomId}`);
+    
+    const player = this.state.players.get(client.sessionId);
+    if (player) {
+      player.connected = false;
+      NameManager.getInstance().releasePlayerName(client.sessionId);
+    }
+
+    if (this.state.gameStatus === GameStatus.PLAYING) {
+      if (this.getConnectedPlayersCount() < 2) {
+        this.pauseGame();
+      }
+    }
+
+    this.allowReconnection(client, 30);
+  }
+
+  async onReconnect(client: Client) {
+    console.log(`[GameRoom] ${client.sessionId} reconnected to room ${this.roomId}`);
+    
+    const player = this.state.players.get(client.sessionId);
+    if (player) {
+      player.connected = true;
+    }
+
+    if (this.state.gameStatus === GameStatus.PAUSED && this.getConnectedPlayersCount() === 2) {
+      this.state.resumeGame();
+    }
+  }
+
+  onDispose() {
+    console.log(`[GameRoom] Room ${this.roomId} disposing...`);
+    
+    if (this.gameInterval) {
+      clearInterval(this.gameInterval);
+    }
+
+    this.state.players.forEach(player => {
+      NameManager.getInstance().releasePlayerName(player.sessionId);
+    });
+  }
+
+  private startGame() {
+    console.log(`[GameRoom] Starting game in room ${this.roomId}`);
+    
+    this.state.startGame();
+    this.broadcast("gameStart");
+
+    this.gameInterval = setInterval(() => {
+      this.state.updateTimer(this.TICK_RATE / 1000);
+      
+      if (this.state.gameStatus === GameStatus.FINISHED) {
+        this.endGame();
+      }
+    }, this.TICK_RATE);
+  }
+
+  private pauseGame() {
+    console.log(`[GameRoom] Pausing game in room ${this.roomId}`);
+    this.state.pauseGame();
+    this.broadcast("gamePaused");
+  }
+
+  private endGame() {
+    console.log(`[GameRoom] Game ended in room ${this.roomId}. Winner: ${this.state.winner}`);
+    
+    if (this.gameInterval) {
+      clearInterval(this.gameInterval);
+      this.gameInterval = undefined;
+    }
+
+    this.broadcast("gameEnd", {
+      winner: this.state.winner,
+      players: Array.from(this.state.players.values()).map(p => ({
+        name: p.name,
+        clicks: p.clicks
+      }))
+    });
+
+    setTimeout(() => {
+      this.state.restartGame();
+      if (this.state.players.size === 2) {
+        this.startGame();
+      }
+    }, 5000);
+  }
+
+  private handleClick(client: Client) {
+    if (this.state.gameStatus !== GameStatus.PLAYING) {
+      return;
+    }
+
+    const player = this.state.players.get(client.sessionId);
+    if (player && player.connected) {
+      player.incrementClicks();
+    }
+  }
+
+  private handleRestart() {
+    console.log(`[GameRoom] Admin restart in room ${this.roomId}`);
+    
+    if (this.gameInterval) {
+      clearInterval(this.gameInterval);
+      this.gameInterval = undefined;
+    }
+
+    this.state.restartGame();
+    this.broadcast("gameRestart");
+
+    if (this.state.players.size === 2) {
+      setTimeout(() => this.startGame(), 2000);
+    }
+  }
+
+  private handleKick(playerId: string) {
+    console.log(`[GameRoom] Admin kick player ${playerId} from room ${this.roomId}`);
+    
+    const client = this.clients.find(c => c.sessionId === playerId);
+    if (client) {
+      client.leave(1000);
+    }
+  }
+
+  private getConnectedPlayersCount(): number {
+    let count = 0;
+    this.state.players.forEach(player => {
+      if (player.connected) count++;
+    });
+    return count;
+  }
+
+  getState() {
+    return {
+      roomId: this.roomId,
+      players: Array.from(this.state.players.values()).map(p => ({
+        sessionId: p.sessionId,
+        name: p.name,
+        clicks: p.clicks
+      })),
+      gameStatus: this.state.gameStatus,
+      timeRemaining: this.state.timeRemaining,
+      winner: this.state.winner
+    };
+  }
+}

server/src/rooms/LobbyRoom.ts

@@ -0,0 +1,157 @@
+import { Room, Client, matchMaker } from "colyseus";
+import { LobbyState, AvailableRoom } from "./schemas/LobbyState";
+import { NameManager } from "../utils/nameManager";
+
+export class LobbyRoom extends Room<LobbyState> {
+  private updateInterval?: NodeJS.Timeout;
+
+  onCreate(options: any) {
+    this.setState(new LobbyState());
+    this.setPrivate(false);
+
+    this.onMessage("setName", (client, playerName: string) => {
+      this.handleSetName(client, playerName);
+    });
+
+    this.onMessage("quickPlay", (client) => {
+      this.handleQuickPlay(client);
+    });
+
+    this.onMessage("joinRoom", (client, roomId: string) => {
+      this.handleJoinRoom(client, roomId);
+    });
+
+    this.updateInterval = setInterval(() => {
+      this.updateAvailableRooms();
+    }, 2000);
+  }
+
+  onJoin(client: Client, options: any) {
+    console.log(`[LobbyRoom] ${client.sessionId} joined lobby`);
+    
+    const defaultName = `guest`;
+    const uniqueName = NameManager.getInstance().generateUniquePlayerName(defaultName, client.sessionId);
+    
+    this.state.addPlayer(client.sessionId, uniqueName);
+
+    client.send("welcome", {
+      sessionId: client.sessionId,
+      assignedName: uniqueName
+    });
+
+    this.updateAvailableRooms();
+  }
+
+  onLeave(client: Client, consented: boolean) {
+    console.log(`[LobbyRoom] ${client.sessionId} left lobby`);
+    
+    const player = this.state.players.get(client.sessionId);
+    if (player) {
+      NameManager.getInstance().releasePlayerName(client.sessionId);
+    }
+    
+    this.state.removePlayer(client.sessionId);
+  }
+
+  onDispose() {
+    console.log("[LobbyRoom] Disposing lobby room");
+    
+    if (this.updateInterval) {
+      clearInterval(this.updateInterval);
+    }
+
+    this.state.players.forEach(player => {
+      NameManager.getInstance().releasePlayerName(player.sessionId);
+    });
+  }
+
+  private handleSetName(client: Client, playerName: string) {
+    const currentPlayer = this.state.players.get(client.sessionId);
+    if (!currentPlayer) return;
+
+    NameManager.getInstance().releasePlayerName(client.sessionId);
+    
+    const uniqueName = NameManager.getInstance().generateUniquePlayerName(playerName, client.sessionId);
+    
+    currentPlayer.name = uniqueName;
+
+    client.send("nameUpdated", {
+      name: uniqueName
+    });
+  }
+
+  private async handleQuickPlay(client: Client) {
+    const player = this.state.players.get(client.sessionId);
+    if (!player || player.inGame) return;
+
+    try {
+      const reservation = await matchMaker.joinOrCreate("game", {
+        playerName: player.name
+      });
+
+      this.state.setPlayerInGame(client.sessionId, true);
+
+      client.send("roomReservation", {
+        sessionId: reservation.sessionId,
+        room: reservation.room
+      });
+
+      setTimeout(() => {
+        client.leave();
+      }, 1000);
+
+    } catch (error) {
+      console.error("[LobbyRoom] Error in quick play:", error);
+      client.send("error", {
+        message: "Could not find or create a game room"
+      });
+    }
+  }
+
+  private async handleJoinRoom(client: Client, roomId: string) {
+    const player = this.state.players.get(client.sessionId);
+    if (!player || player.inGame) return;
+
+    try {
+      const reservation = await matchMaker.joinById(roomId, {
+        playerName: player.name
+      });
+
+      this.state.setPlayerInGame(client.sessionId, true);
+
+      client.send("roomReservation", {
+        sessionId: reservation.sessionId,
+        room: reservation.room
+      });
+
+      setTimeout(() => {
+        client.leave();
+      }, 1000);
+
+    } catch (error) {
+      console.error("[LobbyRoom] Error joining room:", error);
+      client.send("error", {
+        message: "Could not join the selected room"
+      });
+    }
+  }
+
+  private async updateAvailableRooms() {
+    try {
+      const rooms = await matchMaker.query({ name: "game" });
+      
+      const availableRooms = rooms
+        .filter(room => !room.locked && room.clients < 2)
+        .map(room => new AvailableRoom(
+          room.roomId,
+          room.clients,
+          room.metadata?.gameStatus || "waiting"
+        ));
+
+      this.state.updateAvailableRooms(availableRooms);
+
+    } catch (error) {
+      console.error("[LobbyRoom] Error updating available rooms:", error);
+    }
+  }
+}

server/src/rooms/schemas/GameState.ts

@@ -0,0 +1,86 @@
+import { Schema, type, MapSchema } from "@colyseus/schema";
+import { Player } from "./Player";
+import { GameStatus } from "../../../../shared/types";
+
+export class GameState extends Schema {
+  @type({ map: Player }) players = new MapSchema<Player>();
+  @type("string") gameStatus: GameStatus = GameStatus.WAITING;
+  @type("number") timeRemaining: number = 600; // 10 minutes in seconds
+  @type("string") winner: string = "";
+  @type("number") startTime: number = 0;
+  @type("string") roomId: string = "";
+
+  constructor() {
+    super();
+  }
+
+  addPlayer(sessionId: string, name: string): Player {
+    const player = new Player(sessionId, name);
+    this.players.set(sessionId, player);
+    return player;
+  }
+
+  removePlayer(sessionId: string): void {
+    this.players.delete(sessionId);
+  }
+
+  startGame(): void {
+    this.gameStatus = GameStatus.PLAYING;
+    this.startTime = Date.now();
+    this.timeRemaining = 600;
+    this.resetAllPlayers();
+  }
+
+  pauseGame(): void {
+    if (this.gameStatus === GameStatus.PLAYING) {
+      this.gameStatus = GameStatus.PAUSED;
+    }
+  }
+
+  resumeGame(): void {
+    if (this.gameStatus === GameStatus.PAUSED) {
+      this.gameStatus = GameStatus.PLAYING;
+    }
+  }
+
+  finishGame(): void {
+    this.gameStatus = GameStatus.FINISHED;
+    this.determineWinner();
+  }
+
+  restartGame(): void {
+    this.gameStatus = GameStatus.WAITING;
+    this.timeRemaining = 600;
+    this.winner = "";
+    this.startTime = 0;
+    this.resetAllPlayers();
+  }
+
+  private resetAllPlayers(): void {
+    this.players.forEach(player => player.reset());
+  }
+
+  private determineWinner(): void {
+    let maxClicks = -1;
+    let winner = "";
+
+    this.players.forEach(player => {
+      if (player.clicks > maxClicks) {
+        maxClicks = player.clicks;
+        winner = player.name;
+      }
+    });
+
+    this.winner = winner;
+  }
+
+  updateTimer(deltaTime: number): void {
+    if (this.gameStatus === GameStatus.PLAYING && this.timeRemaining > 0) {
+      this.timeRemaining -= deltaTime;
+      if (this.timeRemaining <= 0) {
+        this.timeRemaining = 0;
+        this.finishGame();
+      }
+    }
+  }
+}

server/src/rooms/schemas/LobbyState.ts

@@ -0,0 +1,61 @@
+import { Schema, type, MapSchema, ArraySchema } from "@colyseus/schema";
+
+export class LobbyPlayer extends Schema {
+  @type("string") sessionId: string = "";
+  @type("string") name: string = "";
+  @type("boolean") inGame: boolean = false;
+
+  constructor(sessionId: string, name: string) {
+    super();
+    this.sessionId = sessionId;
+    this.name = name;
+    this.inGame = false;
+  }
+}
+
+export class AvailableRoom extends Schema {
+  @type("string") roomId: string = "";
+  @type("number") playerCount: number = 0;
+  @type("string") status: string = "";
+
+  constructor(roomId: string, playerCount: number, status: string) {
+    super();
+    this.roomId = roomId;
+    this.playerCount = playerCount;
+    this.status = status;
+  }
+}
+
+export class LobbyState extends Schema {
+  @type({ map: LobbyPlayer }) players = new MapSchema<LobbyPlayer>();
+  @type([AvailableRoom]) availableRooms = new ArraySchema<AvailableRoom>();
+  @type("number") totalPlayers: number = 0;
+
+  constructor() {
+    super();
+  }
+
+  addPlayer(sessionId: string, name: string): LobbyPlayer {
+    const player = new LobbyPlayer(sessionId, name);
+    this.players.set(sessionId, player);
+    this.totalPlayers = this.players.size;
+    return player;
+  }
+
+  removePlayer(sessionId: string): void {
+    this.players.delete(sessionId);
+    this.totalPlayers = this.players.size;
+  }
+
+  updateAvailableRooms(rooms: AvailableRoom[]): void {
+    this.availableRooms.clear();
+    rooms.forEach(room => this.availableRooms.push(room));
+  }
+
+  setPlayerInGame(sessionId: string, inGame: boolean): void {
+    const player = this.players.get(sessionId);
+    if (player) {
+      player.inGame = inGame;
+    }
+  }
+}

server/src/rooms/schemas/Player.ts

@@ -0,0 +1,24 @@
+import { Schema, type } from "@colyseus/schema";
+
+export class Player extends Schema {
+  @type("string") sessionId: string = "";
+  @type("string") name: string = "";
+  @type("number") clicks: number = 0;
+  @type("boolean") connected: boolean = true;
+
+  constructor(sessionId: string, name: string) {
+    super();
+    this.sessionId = sessionId;
+    this.name = name;
+    this.clicks = 0;
+    this.connected = true;
+  }
+
+  incrementClicks(): void {
+    this.clicks++;
+  }
+
+  reset(): void {
+    this.clicks = 0;
+  }
+}

server/src/utils/nameManager.ts

@@ -0,0 +1,46 @@
+export class NameManager {
+  private static instance: NameManager;
+  private nameCounters: Map<string, number> = new Map();
+  private sessionToName: Map<string, string> = new Map();
+
+  private constructor() {}
+
+  static getInstance(): NameManager {
+    if (!NameManager.instance) {
+      NameManager.instance = new NameManager();
+    }
+    return NameManager.instance;
+  }
+
+  generateUniquePlayerName(baseName: string, sessionId: string): string {
+    const normalizedName = baseName.trim().toLowerCase();
+    
+    if (!normalizedName) {
+      return this.generateUniquePlayerName('player', sessionId);
+    }
+
+    const currentCounter = this.nameCounters.get(normalizedName) || 0;
+    const newCounter = currentCounter + 1;
+    this.nameCounters.set(normalizedName, newCounter);
+
+    const uniqueName = newCounter === 1 ? normalizedName : `${normalizedName}-${newCounter}`;
+    this.sessionToName.set(sessionId, uniqueName);
+
+    return uniqueName;
+  }
+
+  releasePlayerName(sessionId: string): void {
+    const name = this.sessionToName.get(sessionId);
+    if (name) {
+      this.sessionToName.delete(sessionId);
+    }
+  }
+
+  getPlayerName(sessionId: string): string | undefined {
+    return this.sessionToName.get(sessionId);
+  }
+
+  getAllActivePlayers(): string[] {
+    return Array.from(this.sessionToName.values());
+  }
+}

server/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "commonjs",
+    "lib": ["ES2020"],
+    "outDir": "./dist",
+    "rootDir": "../",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "resolveJsonModule": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true
+  },
+  "include": ["src/**/*", "../shared/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

shared/types.ts

@@ -0,0 +1,27 @@
+export interface PlayerInfo {
+  sessionId: string;
+  name: string;
+  clicks: number;
+}
+
+export interface RoomStats {
+  roomId: string;
+  players: PlayerInfo[];
+  gameStatus: GameStatus;
+  timeRemaining: number;
+  winner?: string;
+  createdAt: number;
+}
+
+export enum GameStatus {
+  WAITING = 'waiting',
+  PLAYING = 'playing',
+  PAUSED = 'paused',
+  FINISHED = 'finished'
+}
+
+export interface AdminAction {
+  action: 'pause' | 'restart' | 'kick';
+  roomId: string;
+  playerId?: string;
+}