Refactor stores

Author: andersfischernielsen

islanders-client/src/lib/components/Map.svelte

@@ -1,15 +1,9 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { Application, Container, Graphics, Point, Assets, FederatedPointerEvent } from 'pixi.js';
-	import { gameState, bindToWorld, sendAction } from '$lib/stores/game.svelte.ts';
-	import {
-		uiState,
-		setIsBuilding,
-		setIsMovingThief,
-		setIsPlayingKnight,
-		setIsStealingFromPlayers
-	} from '$lib/stores/ui.svelte.ts';
-	import type { BuildingType } from '$lib/stores/ui.svelte.ts';
+	import { gameStore } from '$lib/stores/game.svelte.ts';
+	import { uiStore } from '$lib/stores/ui.svelte';
+	import type { BuildingType } from '$lib/stores/ui.svelte';
 	import {
 		type World,
 		type Player,
@@ -41,7 +35,7 @@
 	let parentElement: HTMLElement | null = null;
 
 	const currentPlayer: Player | undefined = $derived(
-		gameState.world?.players.find((player: Player) => player.name === gameState.playerName)
+		gameStore.world?.players.find((player: Player) => player.name === gameStore.playerName)
 	);
 
 	const hexSize = 200;
@@ -120,14 +114,14 @@
 	let loadingPromise: Promise<void> | undefined;
 
 	$effect(() => {
-		updateMap(gameState.world);
+		updateMap(gameStore.world);
 	});
 
 	$effect(() => {
-		isBuilding = uiState.isBuilding;
-		isMovingThief = uiState.isMovingThief;
-		isPlayingKnight = uiState.isPlayingKnight;
-		isPlayingRoadBuilding = uiState.isPlayingRoadBuilding;
+		isBuilding = uiStore.isBuilding;
+		isMovingThief = uiStore.isMovingThief;
+		isPlayingKnight = uiStore.isPlayingKnight;
+		isPlayingRoadBuilding = uiStore.isPlayingRoadBuilding;
 	});
 
 	const toWorld = (screenPoint: { x: number; y: number }): { x: number; y: number } => {
@@ -169,7 +163,7 @@
 		cursorGraphics.clear();
 		cursorGraphics.removeChildren();
 		try {
-			await sendAction(action);
+			await gameStore.sendAction(action);
 		} catch (error) {
 			console.warn('Failed to send action', error);
 		}
@@ -182,8 +176,8 @@
 		const hexToFind = grid.pointToHex(inWorld);
 		const moveThiefAction = new MoveThiefAction(currentPlayer.name, hexToFind);
 		dispatchActionClearCursor(moveThiefAction);
-		setIsMovingThief(false);
-		setIsStealingFromPlayers(true);
+		uiStore.setMovingThief(false);
+		uiStore.setStealingFromPlayers(true);
 	};
 
 	const handleIsPlayingKnightClick = (event: FederatedPointerEvent) => {
@@ -193,12 +187,12 @@
 		const hexToFind = grid.pointToHex(inWorld);
 		const moveThiefAction = new MoveThiefDevCardAction(currentPlayer.name, hexToFind);
 		dispatchActionClearCursor(moveThiefAction);
-		setIsPlayingKnight(false);
-		setIsStealingFromPlayers(true);
+		uiStore.setPlayingKnight(false);
+		uiStore.setStealingFromPlayers(true);
 	};
 
 	const handleBuildClick = (event: FederatedPointerEvent) => {
-		if (!worldContainer || !currentPlayer || !gameState.world || !grid) return;
+		if (!worldContainer || !currentPlayer || !gameStore.world || !grid) return;
 
 		const inWorld = toWorld(event.global);
 		const closestPoints = getTwoClosestPoints(grid, inWorld);
@@ -210,26 +204,26 @@
 
 		if (isBuilding === 'House') {
 			const action =
-				gameState.world.gameState === 'Started'
+				gameStore.world.gameState === 'Started'
 					? new BuildHouseAction(currentPlayer.name, coord)
 					: new BuildHouseInitialAction(currentPlayer.name, coord);
 
 			dispatchActionClearCursor(action);
-			setIsBuilding('None');
+			uiStore.setBuilding('None');
 		}
 		if (isBuilding === 'City') {
 			dispatchActionClearCursor(new BuildCityAction(currentPlayer.name, coord));
-			setIsBuilding('None');
+			uiStore.setBuilding('None');
 		}
 		if (isBuilding === 'Road' && closestPoints[1].index !== -1) {
 			const coord2 = getMatrixCoordCorner(hexToFind, closestPoints[1].index);
 			const action =
-				gameState.world.gameState === 'Started'
+				gameStore.world.gameState === 'Started'
 					? new BuildRoadAction(currentPlayer.name, coord, coord2)
 					: new BuildRoadInitialAction(currentPlayer.name, coord, coord2);
 
 			dispatchActionClearCursor(action);
-			setIsBuilding('None');
+			uiStore.setBuilding('None');
 		}
 	};
 
@@ -599,7 +593,7 @@
 
 	onMount(() => {
 		try {
-			void bindToWorld();
+			void gameStore.bindToWorld();
 		} catch (error) {
 			console.warn('Unable to bind to world socket', error);
 		}

islanders-client/src/lib/components/PlayerSummary.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Player } from '../../../../islanders-shared/lib/Player';
-	import { getPlayerColorAsHex } from '$lib/stores/game.svelte';
+	import { gameStore } from '$lib/stores/game.svelte';
 
 	interface PlayerInformation {
 		player?: Player;
@@ -15,7 +15,9 @@
 	const playerName = $derived(player?.name ?? '—');
 	const points = $derived(player?.points ?? 0);
 	const color = $derived(
-		player && playerName ? (getPlayerColorAsHex(playerName) ?? defaultColor) : defaultColor
+		player && playerName
+			? (gameStore.getPlayerColorAsHex(playerName) ?? defaultColor)
+			: defaultColor
 	);
 </script>
 

islanders-client/src/lib/stores/chat.svelte.ts

@@ -0,0 +1,133 @@
+import { browser } from '$app/environment';
+import { socketManager } from './socket.svelte';
+import { env } from '$env/dynamic/public';
+import { gameStore } from './game.svelte';
+import { SocketActions, type ChatMessage } from '../../../../islanders-shared/lib/Shared';
+
+export interface ChatEntry extends ChatMessage {
+	id: string;
+	ts: number;
+	pending?: boolean;
+	self?: boolean;
+}
+
+const MAX_MESSAGES = 250;
+
+class ChatStore {
+	messages = $state<ChatEntry[]>([]);
+	initialized = $state(false);
+	error = $state<string | undefined>(undefined);
+
+	private listenersBound = false;
+	private lastChatPath: string | undefined;
+
+	private ensureInit(gameId?: string) {
+		if (!browser) return;
+		this.bindChat(gameId);
+	}
+
+	private bindChat(gameId?: string) {
+		const resolved = gameId ?? gameStore.gameId;
+		const host = env.PUBLIC_SERVER ?? 'http://localhost:3002';
+		const path = resolved ? `${host}/${resolved}` : undefined;
+
+		if (this.listenersBound && path === this.lastChatPath) {
+			return socketManager.getSocket();
+		}
+
+		const socket = socketManager.connect(path);
+		this.lastChatPath = path;
+
+		socket.on(SocketActions.chat, (incoming: ChatMessage & { clientId?: string }) => {
+			const existing = this.messages;
+			let idx = -1;
+			if (incoming.clientId) {
+				idx = existing.findIndex((m) => m.id === incoming.clientId);
+			}
+			if (idx === -1) {
+				idx = existing.findIndex(
+					(m) => m.pending && m.text === incoming.text && m.user === incoming.user
+				);
+			}
+			if (idx !== -1) {
+				const copy = [...existing];
+				copy[idx] = {
+					...copy[idx],
+					pending: false,
+					ts: copy[idx].ts
+				};
+				this.messages = copy;
+			} else {
+				const entry: ChatEntry = {
+					id: crypto.randomUUID(),
+					ts: Date.now(),
+					text: incoming.text,
+					user: incoming.user,
+					self: incoming.user === gameStore.playerName,
+					pending: false
+				};
+				const next = [...existing, entry];
+				if (next.length > MAX_MESSAGES) {
+					next.splice(0, next.length - MAX_MESSAGES);
+				}
+				this.messages = next;
+			}
+		});
+
+		socket.on('connect_error', (err: Error) => {
+			this.error = err.message;
+		});
+
+		this.listenersBound = true;
+		this.initialized = true;
+
+		return socket;
+	}
+
+	sendMessage(text: string) {
+		const trimmed = text.trim();
+		if (!trimmed) return;
+
+		const socket = socketManager.getSocket();
+		if (!socket || !socket.connected) {
+			this.error = 'Not connected';
+			return;
+		}
+		const playerName = gameStore.playerName ?? 'Unknown';
+		const clientId = crypto.randomUUID();
+
+		const optimistic: ChatEntry = {
+			id: clientId,
+			ts: Date.now(),
+			text: trimmed,
+			user: playerName,
+			pending: true,
+			self: true
+		};
+		{
+			const existing = this.messages;
+			const next = [...existing, optimistic];
+			if (next.length > MAX_MESSAGES) {
+				next.splice(0, next.length - MAX_MESSAGES);
+			}
+			this.messages = next;
+		}
+
+		const outgoing = { text: trimmed, user: playerName, clientId } as ChatMessage;
+		socket.emit(SocketActions.chat, outgoing);
+	}
+
+	clear() {
+		this.messages = [];
+		this.initialized = false;
+		this.error = undefined;
+		this.listenersBound = false;
+		this.lastChatPath = undefined;
+	}
+
+	init(gameId?: string) {
+		this.ensureInit(gameId);
+	}
+}
+
+export const chatStore = new ChatStore();