Fix map, chat, states

Author: andersfischernielsen

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

@@ -32,17 +32,54 @@
 		generateTileNumber,
 		generateThiefTile
 	} from '$lib/SpriteGenerators';
-	import { compareWorlds, getClosestPoint, getTwoClosestPoints } from './mapUtils';
+	import { getClosestPoint, getTwoClosestPoints } from './mapUtils';
 	import * as honeycombGrid from 'honeycomb-grid';
 	import type { Grid as HoneycombGrid } from 'honeycomb-grid';
 	const { defineHex, Grid, Orientation } = honeycombGrid;
 
 	let container: HTMLDivElement | undefined;
+	let parentElement: HTMLElement | null = null;
 
 	const hexSize = 200;
 	const tileHeight = 348;
 	const tileWidth = 400;
 	const lineWidth = 14;
+	const tilePath = '/img/tilesets/';
+	const tileStyle = 'realistic';
+	const assetsToLoad = [
+		// Tiles
+		`${tilePath}${tileStyle}/clay.png`,
+		`${tilePath}${tileStyle}/desert.png`,
+		`${tilePath}${tileStyle}/grain.png`,
+		`${tilePath}${tileStyle}/wood.png`,
+		`${tilePath}${tileStyle}/stone.png`,
+		`${tilePath}${tileStyle}/wool.png`,
+		`${tilePath}${tileStyle}/ocean.png`,
+		// Pieces
+		'/img/pieces/house.png',
+		'/img/pieces/city.png',
+		'/img/pieces/thief.png',
+		// Special
+		`${tilePath}shared/scorch-with-thief.png`,
+		// Harbors
+		`${tilePath}${tileStyle}/woodharbor.png`,
+		`${tilePath}${tileStyle}/woolharbor.png`,
+		`${tilePath}${tileStyle}/grainharbor.png`,
+		`${tilePath}${tileStyle}/clayharbor.png`,
+		`${tilePath}${tileStyle}/stoneharbor.png`,
+		`${tilePath}${tileStyle}/threetooneharbor.png`,
+		// Numbers
+		'/img/numbers/2.png',
+		'/img/numbers/3.png',
+		'/img/numbers/4.png',
+		'/img/numbers/5.png',
+		'/img/numbers/6.png',
+		'/img/numbers/8.png',
+		'/img/numbers/9.png',
+		'/img/numbers/10.png',
+		'/img/numbers/11.png',
+		'/img/numbers/12.png'
+	];
 
 	let app: Application | undefined;
 	let worldContainer: Container | undefined;
@@ -78,13 +115,16 @@
 
 	// Store event handlers for cleanup
 	let wheelHandler: ((event: WheelEvent) => void) | undefined;
+	let assetsLoaded = false;
+	let latestWorld: World | undefined;
+	let loadingPromise: Promise<void> | undefined;
 
 	const currentPlayer: Player | undefined = $derived(
 		gameState.world?.players.find((player: Player) => player.name === gameState.playerName)
 	);
 
 	$effect(() => {
-		drawMap(gameState.world);
+		updateMap(gameState.world);
 	});
 
 	$effect(() => {
@@ -114,8 +154,12 @@
 			return;
 		}
 
-		height = container.clientHeight / (window.devicePixelRatio || 1);
-		width = container.clientWidth / (window.devicePixelRatio || 1);
+		const target = parentElement ?? container;
+		const ratio = window.devicePixelRatio || 1;
+		height = target.clientHeight / ratio;
+		width = target.clientWidth / ratio;
+		container.style.width = `${target.clientWidth}px`;
+		container.style.height = `${target.clientHeight}px`;
 		app.renderer.resize(width, height);
 	};
 
@@ -317,7 +361,7 @@
 		});
 	};
 
-	const drawMap = (newWorld: World | undefined) => {
+	const drawMap = (newWorld: World) => {
 		if (!newWorld) {
 			return;
 		}
@@ -380,58 +424,53 @@
 		pieceGraphics.addChild(pieceContainer);
 	};
 
+	const updateMap = (newWorld: World | undefined) => {
+		if (!newWorld) {
+			return;
+		}
+
+		latestWorld = newWorld;
+		if (!assetsLoaded) {
+			void ensureAssetsLoaded();
+			return;
+		}
+
+		drawMap(newWorld);
+	};
+
+	const ensureAssetsLoaded = async () => {
+		if (assetsLoaded) {
+			return;
+		}
+
+		if (!loadingPromise) {
+			loadingPromise = Assets.load(assetsToLoad)
+				.then(() => {
+					assetsLoaded = true;
+					if (latestWorld) {
+						drawMap(latestWorld);
+					}
+				})
+				.catch((error) => {
+					console.error('Failed to load assets:', error);
+				});
+		}
+
+		await loadingPromise;
+	};
+
 	const setupCanvas = async () => {
 		if (!container) return;
 
-		height = container.clientHeight / (window.devicePixelRatio || 1);
-		width = container.clientWidth / (window.devicePixelRatio || 1);
-
-		// Preload all assets for PixiJS v8
-		const tilePath = '/img/tilesets/';
-		const tileStyle = 'realistic';
-		const assetsToLoad = [
-			// Tiles
-			`${tilePath}${tileStyle}/clay.png`,
-			`${tilePath}${tileStyle}/desert.png`,
-			`${tilePath}${tileStyle}/grain.png`,
-			`${tilePath}${tileStyle}/wood.png`,
-			`${tilePath}${tileStyle}/stone.png`,
-			`${tilePath}${tileStyle}/wool.png`,
-			`${tilePath}${tileStyle}/ocean.png`,
-			// Pieces
-			'/img/pieces/house.png',
-			'/img/pieces/city.png',
-			'/img/pieces/thief.png',
-			// Special
-			`${tilePath}shared/scorch-with-thief.png`,
-			// Harbors
-			`${tilePath}${tileStyle}/woodharbor.png`,
-			`${tilePath}${tileStyle}/woolharbor.png`,
-			`${tilePath}${tileStyle}/grainharbor.png`,
-			`${tilePath}${tileStyle}/clayharbor.png`,
-			`${tilePath}${tileStyle}/stoneharbor.png`,
-			`${tilePath}${tileStyle}/threetooneharbor.png`,
-			// Numbers
-			'/img/numbers/2.png',
-			'/img/numbers/3.png',
-			'/img/numbers/4.png',
-			'/img/numbers/5.png',
-			'/img/numbers/6.png',
-			'/img/numbers/8.png',
-			'/img/numbers/9.png',
-			'/img/numbers/10.png',
-			'/img/numbers/11.png',
-			'/img/numbers/12.png'
-		];
-
-		// Load all assets
-		try {
-			console.log('Loading assets...');
-			await Assets.load(assetsToLoad);
-			console.log('Assets loaded successfully');
-		} catch (error) {
-			console.error('Failed to load assets:', error);
-		}
+		parentElement = container.parentElement;
+		const target = parentElement ?? container;
+		const ratio = window.devicePixelRatio || 1;
+		height = target.clientHeight / ratio;
+		width = target.clientWidth / ratio;
+		container.style.width = `${target.clientWidth}px`;
+		container.style.height = `${target.clientHeight}px`;
+
+		await ensureAssetsLoaded();
 
 		const appInstance = new Application();
 
@@ -583,4 +622,4 @@
 	});
 </script>
 
-<div bind:this={container} class="h-full w-full bg-[#03518b]"></div>
+<div bind:this={container} class="h-full w-full flex-1 bg-[#03518b]"></div>

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

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { Player } from '../../../../islanders-shared/lib/Player';
+	import { getPlayerColorAsHex } from '$lib/stores/game.svelte';
+
+	interface PlayerInformation {
+		player?: Player;
+		isActive?: boolean;
+		subtitle?: string;
+		size?: 'sm' | 'md';
+		className?: string;
+	}
+
+	const props = $props<PlayerInformation>();
+
+	const defaultColor = '#94a3b8';
+
+	const playerName = $derived(props.player?.name ?? '—');
+	const points = $derived(props.player?.points ?? 0);
+	const color = $derived(
+		props.player && playerName ? (getPlayerColorAsHex(playerName) ?? defaultColor) : defaultColor
+	);
+	const size = $derived(props.size ?? 'md');
+	const subtitle = $derived(props.subtitle ?? (props.isActive ? 'Current turn' : undefined));
+</script>
+
+<div
+	class={`flex items-center gap-3 leading-tight ${
+		size === 'sm' ? 'text-sm' : 'text-base'
+	} ${props.isActive ? 'text-white' : 'text-white/90'} ${props.className ?? ''}`.trim()}
+>
+	<span class="h-10 w-2 rounded-full" style={`background-color: ${color}`}></span>
+	<div class="flex flex-col">
+		<span class={`font-semibold ${size === 'sm' ? 'text-base' : 'text-lg'}`}>{playerName}</span>
+		<span class="text-xs opacity-80">Points: {points}</span>
+		{#if subtitle}
+			<span class="text-[0.65rem] tracking-wide text-white/70 uppercase">{subtitle}</span>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,117 @@
+import { writable } from 'svelte/store';
+import type { ChatMessage } from '../../../../islanders-shared/lib/Shared';
+import { SocketActions } from '../../../../islanders-shared/lib/Shared';
+import { connect, getSocket } from './socket';
+import { gameState } from './game.svelte';
+
+// Shape of a client-side chat entry (can extend later for system events)
+export interface ChatEntry extends ChatMessage {
+	id: string; // unique client id
+	ts: number; // timestamp (ms)
+	pending?: boolean; // optimistic flag until echoed back
+	self?: boolean; // whether authored by local player
+}
+
+interface ChatState {
+	messages: ChatEntry[];
+	initialized: boolean;
+	error?: string;
+}
+
+const createInitial = (): ChatState => ({
+	messages: [],
+	initialized: false
+});
+
+const { subscribe, update, set } = writable<ChatState>(createInitial());
+let listenersBound = false;
+
+const MAX_MESSAGES = 250;
+
+export const chatStore = { subscribe };
+
+const appendMessage = (msg: ChatEntry) => {
+	update((state) => {
+		const next = [...state.messages, msg];
+		// Keep within bound
+		if (next.length > MAX_MESSAGES) next.splice(0, next.length - MAX_MESSAGES);
+		return { ...state, messages: next };
+	});
+};
+
+// We augment outgoing chat messages with a clientId so we can reconcile the echo from server.
+// The server ignores extra fields, so this is safe.
+type OutgoingChatMessage = ChatMessage & { clientId?: string };
+
+export const bindChat = () => {
+	const socket = connect(); // ensures connection (will reuse existing)
+	if (listenersBound) return socket;
+
+	socket.on(SocketActions.chat, (incoming: ChatMessage & { clientId?: string }) => {
+		update((state) => {
+			// Try to find optimistic entry by clientId first
+			let idx = -1;
+			if (incoming.clientId) {
+				idx = state.messages.findIndex((m) => m.id === incoming.clientId);
+			}
+			// Fallback: match first pending with same user+text
+			if (idx === -1) {
+				idx = state.messages.findIndex(
+					(m) => m.pending && m.text === incoming.text && m.user === incoming.user
+				);
+			}
+
+			if (idx !== -1) {
+				const copy = [...state.messages];
+				copy[idx] = { ...copy[idx], pending: false, ts: copy[idx].ts }; // keep original timestamp
+				return { ...state, messages: copy };
+			}
+
+			// Otherwise append as a new (non-duplicate) message
+			const entry = {
+				id: crypto.randomUUID(),
+				ts: Date.now(),
+				text: incoming.text,
+				user: incoming.user,
+				self: incoming.user === gameState.playerName,
+				pending: false
+			} as ChatEntry;
+			const next = [...state.messages, entry];
+			if (next.length > MAX_MESSAGES) next.splice(0, next.length - MAX_MESSAGES);
+			return { ...state, messages: next };
+		});
+	});
+
+	socket.on('connect_error', (err: Error) => {
+		update((s) => ({ ...s, error: err.message }));
+	});
+
+	listenersBound = true;
+	update((s) => ({ ...s, initialized: true }));
+	return socket;
+};
+
+export const sendChat = (text: string) => {
+	const trimmed = text.trim();
+	if (!trimmed) return;
+	const playerName = gameState.playerName || 'Unknown';
+	const socket = getSocket();
+	if (!socket || !socket.connected) {
+		update((s) => ({ ...s, error: 'Not connected' }));
+		return;
+	}
+	const clientId = crypto.randomUUID();
+	const optimistic: ChatEntry = {
+		id: clientId,
+		ts: Date.now(),
+		text: trimmed,
+		user: playerName,
+		pending: true,
+		self: true
+	};
+	appendMessage(optimistic);
+	const outgoing: OutgoingChatMessage = { text: trimmed, user: playerName, clientId };
+	socket.emit(SocketActions.chat, outgoing as ChatMessage);
+};
+
+export const clearChat = () => set(createInitial());