feat: add room selector dropdown for VS People mode

trigo-web/app/src/components/RoomSelector.vue

@@ -0,0 +1,302 @@
+<template>
+	<div class="room-selector" ref="selectorRef">
+		<div class="dropdown-container" @click="toggleDropdown" :class="{ disabled }">
+			<div class="selected-room">
+				<span v-if="currentRoom" class="room-display">
+					{{ currentRoom }}
+				</span>
+				<span v-else class="placeholder">Select room...</span>
+			</div>
+			<span class="dropdown-arrow">{{ isOpen ? '▲' : '▼' }}</span>
+		</div>
+
+		<div v-if="isOpen" class="dropdown-menu">
+			<!-- Create New Room Option -->
+			<div class="dropdown-item create-room" @click="handleCreate">
+				<span class="item-icon">➕</span>
+				<span class="item-text">Create New Room</span>
+			</div>
+
+			<div class="dropdown-divider" v-if="rooms.length > 0"></div>
+
+			<!-- Room List -->
+			<div class="room-list">
+				<div v-if="loading" class="loading-state">
+					Loading rooms...
+				</div>
+				<div v-else-if="rooms.length === 0" class="empty-state">
+					No active rooms
+				</div>
+				<div
+					v-else
+					v-for="room in sortedRooms"
+					:key="room.id"
+					class="dropdown-item room-item"
+					:class="{
+						'is-current': room.id === currentRoom,
+						'is-full': room.isFull
+					}"
+					@click="handleSelect(room)"
+				>
+					<span class="room-id">{{ room.id }}</span>
+					<span class="player-count" :class="playerCountClass(room)">
+						{{ room.playerCount }}/2
+					</span>
+					<span class="room-status-badge" :class="room.status">
+						{{ formatStatus(room) }}
+					</span>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from "vue";
+
+export interface RoomSummary {
+	id: string;
+	playerCount: number;
+	maxPlayers: number;
+	status: "waiting" | "playing" | "finished";
+	isFull: boolean;
+	createdAt: string;
+}
+
+const props = defineProps<{
+	currentRoom: string | null;
+	rooms: RoomSummary[];
+	loading?: boolean;
+	disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+	create: [];
+	select: [roomId: string];
+}>();
+
+const isOpen = ref(false);
+const selectorRef = ref<HTMLElement | null>(null);
+
+const sortedRooms = computed(() => {
+	// Sort: current room first, then by player count (waiting rooms first), then by creation time
+	return [...props.rooms].sort((a, b) => {
+		// Current room always first
+		if (a.id === props.currentRoom) return -1;
+		if (b.id === props.currentRoom) return 1;
+		// Waiting rooms before playing
+		if (a.status === "waiting" && b.status !== "waiting") return -1;
+		if (a.status !== "waiting" && b.status === "waiting") return 1;
+		// By player count (less players first - more likely to join)
+		if (a.playerCount !== b.playerCount) return a.playerCount - b.playerCount;
+		// By creation time (newer first)
+		return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+	});
+});
+
+const toggleDropdown = () => {
+	if (props.disabled) return;
+	isOpen.value = !isOpen.value;
+};
+
+const handleCreate = () => {
+	isOpen.value = false;
+	emit("create");
+};
+
+const handleSelect = (room: RoomSummary) => {
+	if (room.isFull && room.id !== props.currentRoom) return;
+	isOpen.value = false;
+	emit("select", room.id);
+};
+
+const playerCountClass = (room: RoomSummary) => {
+	if (room.playerCount === 0) return "empty";
+	if (room.playerCount === 1) return "partial";
+	return "full";
+};
+
+const formatStatus = (room: RoomSummary) => {
+	if (room.isFull) return "Full";
+	if (room.status === "waiting") return "Waiting";
+	if (room.status === "playing") return "Playing";
+	return room.status;
+};
+
+// Close dropdown when clicking outside
+const handleClickOutside = (event: MouseEvent) => {
+	if (selectorRef.value && !selectorRef.value.contains(event.target as Node)) {
+		isOpen.value = false;
+	}
+};
+
+onMounted(() => {
+	document.addEventListener("click", handleClickOutside);
+});
+
+onUnmounted(() => {
+	document.removeEventListener("click", handleClickOutside);
+});
+</script>
+
+
+<style scoped lang="scss">
+.room-selector {
+	position: relative;
+	display: inline-block;
+}
+
+.dropdown-container {
+	background: rgba(0, 0, 0, 0.3);
+	border: 1px solid rgba(255, 255, 255, 0.3);
+	border-radius: 4px;
+	padding: 0.4rem 0.6rem;
+	min-width: 140px;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.5rem;
+	transition: background 0.2s;
+
+	&:hover:not(.disabled) {
+		background: rgba(0, 0, 0, 0.4);
+	}
+
+	&.disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+}
+
+.selected-room {
+	font-size: 0.9rem;
+	color: #fff;
+}
+
+.placeholder {
+	color: rgba(255, 255, 255, 0.5);
+}
+
+.dropdown-arrow {
+	font-size: 0.7rem;
+	color: rgba(255, 255, 255, 0.7);
+}
+
+.dropdown-menu {
+	position: absolute;
+	top: calc(100% + 4px);
+	left: 0;
+	min-width: 220px;
+	background: #3a3a3a;
+	border: 1px solid #505050;
+	border-radius: 4px;
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+	z-index: 100;
+	max-height: 300px;
+	overflow-y: auto;
+}
+
+.dropdown-item {
+	padding: 0.6rem 0.75rem;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	transition: background 0.15s;
+
+	&:hover:not(.is-full) {
+		background: #4a4a4a;
+	}
+
+	&.is-full:not(.is-current) {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	&.is-current {
+		background: #505050;
+		border-left: 3px solid #e94560;
+		padding-left: calc(0.75rem - 3px);
+	}
+}
+
+.create-room {
+	color: #4ade80;
+	border-bottom: 1px solid #505050;
+
+	.item-icon {
+		font-size: 0.9rem;
+	}
+
+	.item-text {
+		font-size: 0.9rem;
+	}
+}
+
+.dropdown-divider {
+	height: 1px;
+	background: #505050;
+	margin: 0;
+}
+
+.room-list {
+	max-height: 240px;
+	overflow-y: auto;
+}
+
+.loading-state,
+.empty-state {
+	padding: 1rem;
+	text-align: center;
+	color: rgba(255, 255, 255, 0.5);
+	font-size: 0.85rem;
+}
+
+.room-item {
+	.room-id {
+		font-family: monospace;
+		font-size: 0.85rem;
+		color: #fff;
+		flex: 1;
+	}
+
+	.player-count {
+		font-family: monospace;
+		font-size: 0.8rem;
+		padding: 0.1rem 0.3rem;
+		border-radius: 3px;
+
+		&.empty {
+			color: #4ade80;
+		}
+
+		&.partial {
+			color: #fbbf24;
+		}
+
+		&.full {
+			color: #ef4444;
+		}
+	}
+
+	.room-status-badge {
+		font-size: 0.75rem;
+		padding: 0.15rem 0.4rem;
+		border-radius: 3px;
+		min-width: 50px;
+		text-align: center;
+
+		&.waiting {
+			background: rgba(74, 222, 128, 0.15);
+			color: #4ade80;
+		}
+
+		&.playing {
+			background: rgba(251, 191, 36, 0.15);
+			color: #fbbf24;
+		}
+	}
+}
+</style>

trigo-web/app/src/composables/useSocket.ts

@@ -159,6 +159,47 @@ export function useSocket() {
 	};
 
 
+	// Room list management
+
+	// List available rooms
+	const listRooms = (callback: (response: any) => void): void => {
+		const socket = getSocket();
+		socket.emit("listRooms", callback);
+	};
+
+	// Room list event listeners
+	const onRoomCreated = (handler: (data: any) => void): void => {
+		const socket = getSocket();
+		socket.on("roomCreated", handler);
+	};
+
+	const onRoomUpdated = (handler: (data: any) => void): void => {
+		const socket = getSocket();
+		socket.on("roomUpdated", handler);
+	};
+
+	const onRoomDeleted = (handler: (data: { roomId: string }) => void): void => {
+		const socket = getSocket();
+		socket.on("roomDeleted", handler);
+	};
+
+	// Room list event cleanup
+	const offRoomCreated = (handler?: any): void => {
+		const socket = getSocket();
+		socket.off("roomCreated", handler);
+	};
+
+	const offRoomUpdated = (handler?: any): void => {
+		const socket = getSocket();
+		socket.off("roomUpdated", handler);
+	};
+
+	const offRoomDeleted = (handler?: any): void => {
+		const socket = getSocket();
+		socket.off("roomDeleted", handler);
+	};
+
+
 	// Event listeners
 	const onPlayerJoined = (handler: (data: { playerId: string; nickname: string }) => void): void => {
 		const socket = getSocket();
@@ -268,6 +309,7 @@ export function useSocket() {
 		joinRoom,
 		leaveRoom,
 		changeNickname,
+		listRooms,
 		// Game actions
 		makeMove,
 		pass,
@@ -285,6 +327,9 @@ export function useSocket() {
 		onGameReset,
 		onPlayerDisconnected,
 		onError,
+		onRoomCreated,
+		onRoomUpdated,
+		onRoomDeleted,
 		// Event cleanup
 		offPlayerJoined,
 		offPlayerLeft,
@@ -294,7 +339,10 @@ export function useSocket() {
 		offGameEnded,
 		offGameReset,
 		offPlayerDisconnected,
-		offError
+		offError,
+		offRoomCreated,
+		offRoomUpdated,
+		offRoomDeleted
 	};
 }
 

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

@@ -124,6 +124,15 @@
 			</div>
 
 			<div class="header-controls" v-else-if="gameMode === 'vs-people'">
+				<room-selector
+					:current-room="playerStore.roomId"
+					:rooms="roomList"
+					:loading="isLoadingRooms"
+					:disabled="gameStarted && playerStore.hasOpponent"
+					@create="handleCreateRoom"
+					@select="handleRoomSelect"
+				/>
+
 				<select
 					v-model="preferredColor"
 					class="color-preference-select"
@@ -339,6 +348,7 @@
 	import { useSocket } from "@/composables/useSocket";
 	import { useRoomHash } from "@/composables/useRoomHash";
 	import InlineNicknameEditor from "@/components/InlineNicknameEditor.vue";
+	import RoomSelector, { type RoomSummary } from "@/components/RoomSelector.vue";
 	import { storeToRefs } from "pinia";
 	import type { BoardShape } from "../../../inc/trigo";
 	import { Stone, validateMove, StoneType, validateTGN } from "../../../inc/trigo";
@@ -375,6 +385,10 @@
 	const { getRoomIdFromHash, updateHash, clearHash, isValidRoomId } = useRoomHash();
 	const isJoiningRoom = ref(false);
 
+	// Room list state (for VS People mode room selector)
+	const roomList = ref<RoomSummary[]>([]);
+	const isLoadingRooms = ref(false);
+
 	// Helper functions for board shape parsing
 	const parseBoardShape = (shapeStr: string): BoardShape => {
 		const parts = shapeStr
@@ -1079,6 +1093,73 @@
 	}
 
 
+	/**
+	 * Room list management for room selector dropdown
+	 */
+	function fetchRoomList() {
+		isLoadingRooms.value = true;
+		socketApi.listRooms((response: any) => {
+			isLoadingRooms.value = false;
+			if (response.success) {
+				roomList.value = response.rooms;
+			}
+		});
+	}
+
+	function setupRoomListeners() {
+		socketApi.onRoomCreated((data: RoomSummary) => {
+			// Add new room to list if not already present
+			if (!roomList.value.find(r => r.id === data.id)) {
+				roomList.value.push(data);
+			}
+		});
+
+		socketApi.onRoomUpdated((data: RoomSummary) => {
+			const index = roomList.value.findIndex(r => r.id === data.id);
+			if (index >= 0) {
+				roomList.value[index] = data;
+			} else {
+				roomList.value.push(data);
+			}
+		});
+
+		socketApi.onRoomDeleted((data: { roomId: string }) => {
+			roomList.value = roomList.value.filter(r => r.id !== data.roomId);
+		});
+	}
+
+	function cleanupRoomListeners() {
+		socketApi.offRoomCreated();
+		socketApi.offRoomUpdated();
+		socketApi.offRoomDeleted();
+	}
+
+	// Room selector event handlers
+	async function handleRoomSelect(roomId: string) {
+		if (playerStore.roomId === roomId) return; // Already in this room
+
+		// Leave current room if any
+		if (playerStore.roomId) {
+			socketApi.leaveRoom();
+			playerStore.leaveRoom();
+		}
+
+		// Join selected room
+		await joinRoomByHash(roomId);
+	}
+
+	async function handleCreateRoom() {
+		// Leave current room if any
+		if (playerStore.roomId) {
+			socketApi.leaveRoom();
+			playerStore.leaveRoom();
+		}
+
+		clearHash();
+		await createAndJoinRoom();
+	}
+
+
 	/**
 	 * Initialize multiplayer room based on URL hash
 	 * - No hash: create new room
@@ -1498,6 +1579,9 @@
 				console.error("[TrigoView] Socket error:", data.message);
 			});
 
+			// Setup room list listeners for room selector
+			setupRoomListeners();
+
 			// Set player ID when socket connects
 			if (socketApi.socket.id) {
 				playerStore.setPlayerId(socketApi.socket.id);
@@ -1515,6 +1599,9 @@
 					playerStore.setPlayerId(socketApi.socket.id);
 				}
 
+				// Fetch room list for room selector
+				fetchRoomList();
+
 				// Initialize room based on URL hash (only if not already in a room)
 				if (!playerStore.roomId && !isJoiningRoom.value) {
 					console.log("[TrigoView] Initializing room after socket connection");
@@ -1536,6 +1623,7 @@
 			// If socket is already connected, initialize room immediately
 			if (socketApi.socket.connected) {
 				console.log("[TrigoView] Socket already connected, initializing room");
+				fetchRoomList();
 				initializeMultiplayerRoom();
 			}
 		}
@@ -1582,6 +1670,7 @@
 			socketApi.offGameEnded();
 			socketApi.offGameReset();
 			socketApi.offError();
+			cleanupRoomListeners();
 
 			// Remove hashchange listener
 			window.removeEventListener("hashchange", handleHashChange);

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

@@ -1,9 +1,32 @@
 import { Server, Socket } from "socket.io";
 import { GameManager } from "../services/gameManager";
 
+// Helper to get room summary for room list
+function getRoomSummary(room: any) {
+	const connectedPlayers = Object.values(room.players).filter((p: any) => p.connected);
+	return {
+		id: room.id,
+		playerCount: connectedPlayers.length,
+		maxPlayers: 2,
+		status: room.gameState.gameStatus,
+		isFull: connectedPlayers.length >= 2,
+		createdAt: room.createdAt.toISOString()
+	};
+}
+
 export function setupSocketHandlers(io: Server, socket: Socket, gameManager: GameManager) {
 	console.log(`Setting up socket handlers for ${socket.id}`);
 
+	// List available rooms
+	socket.on("listRooms", (callback?: (response: any) => void) => {
+		const rooms = gameManager.getActiveRooms();
+		const roomList = rooms.map(room => getRoomSummary(room));
+
+		if (callback) {
+			callback({ success: true, rooms: roomList });
+		}
+	});
+
 	// Join room
 	socket.on(
 		"joinRoom",
@@ -115,6 +138,16 @@ export function setupSocketHandlers(io: Server, socket: Socket, gameManager: Gam
 						nickname: nickname
 					});
 
+					// Broadcast room update to all sockets (for room list)
+					const roomSummary = getRoomSummary(room);
+					if (roomId) {
+						// Joined existing room
+						io.emit("roomUpdated", roomSummary);
+					} else {
+						// Created new room
+						io.emit("roomCreated", roomSummary);
+					}
+
 					console.log(
 						`Player ${socket.id} ${roomId ? "joined" : "created"} room ${room.id}`
 					);
@@ -145,13 +178,22 @@ export function setupSocketHandlers(io: Server, socket: Socket, gameManager: Gam
 	socket.on("leaveRoom", () => {
 		const room = gameManager.getPlayerRoom(socket.id);
 		if (room) {
+			const roomId = room.id;
 			socket.leave(room.id);
 			gameManager.leaveRoom(room.id, socket.id);
 
-			// Notify others
-			socket.to(room.id).emit("playerLeft", {
+			// Notify others in room
+			socket.to(roomId).emit("playerLeft", {
 				playerId: socket.id
 			});
+
+			// Broadcast room update or deletion to all sockets
+			const updatedRoom = gameManager.getRoom(roomId);
+			if (updatedRoom) {
+				io.emit("roomUpdated", getRoomSummary(updatedRoom));
+			} else {
+				io.emit("roomDeleted", { roomId });
+			}
 		}
 	});
 
@@ -424,10 +466,19 @@ export function setupSocketHandlers(io: Server, socket: Socket, gameManager: Gam
 		console.log(`Client disconnected: ${socket.id}`);
 		const room = gameManager.getPlayerRoom(socket.id);
 		if (room) {
+			const roomId = room.id;
 			gameManager.leaveRoom(room.id, socket.id);
 			socket.to(room.id).emit("playerDisconnected", {
 				playerId: socket.id
 			});
+
+			// Broadcast room update or deletion to all sockets
+			const updatedRoom = gameManager.getRoom(roomId);
+			if (updatedRoom) {
+				io.emit("roomUpdated", getRoomSummary(updatedRoom));
+			} else {
+				io.emit("roomDeleted", { roomId });
+			}
 		}
 	});
 }