added vasco missed commit

volumes/front/src/components/Pong/Game.ts

@@ -13,6 +13,7 @@ export class Game {
 	ball: Ball;
 	players: Player[];
 	my_paddle: Paddle;
+	id: string;
 
 	constructor(canvas: HTMLCanvasElement, context: CanvasRenderingContext2D) {
 		this.canvas = canvas;
@@ -34,6 +35,7 @@ export class Game {
 		);
 		this.players = [new Player(paddle1), new Player(paddle2)];
 		this.my_paddle = this.players[data.yourPaddleIndex].paddle;
+		this.id = data.gameId;
 	}
 
 	start(socket: WebSocket) {

volumes/front/src/components/Pong/Pong.svelte

@@ -2,12 +2,14 @@
 	import { GAME_EVENTS } from './constants';
 	import { Game } from './Game';
 	import { formatWebsocketData } from './utils';
-  import { onMount } from 'svelte'
 
 	const FPS = 144;
 	const SERVER_URL = 'ws://localhost:3001';
 
+	let connected: boolean = false;
 	let socket: WebSocket;
+	let username: string = 'John';
+	let otherUsername: string = 'Garfield';
 
 	//Get canvas and its context
 	window.onload = () => {
@@ -19,6 +21,7 @@
 			}
 		}
 	};
+
 	function setupSocket(canvas: HTMLCanvasElement, context: CanvasRenderingContext2D) {
 		socket = new WebSocket(SERVER_URL);
 		const game = new Game(canvas, context);
@@ -32,25 +35,62 @@
 			} else if (event == GAME_EVENTS.GAME_TICK) {
 				game.update(data);
 			} else if (event == GAME_EVENTS.GET_GAME_INFO) {
+				if (data && data.gameId != game.id) {
 					game.setInfo(data);
 					setInterval(() => {
 						game.draw();
 					}, 1000 / FPS);
-				console.log('Game loaded!');
+					console.log('Game updated!');
+				}
 			} else {
 				console.log('Unknown event from server: ' + event);
 			}
 		};
 		socket.onopen = () => {
-			console.log('Connected to game server!');
-			socket.send(formatWebsocketData(GAME_EVENTS.GET_GAME_INFO));
+			connected = true;
+		};
+		socket.onclose = () => {
+			connected = false;
+			setupSocket(canvas, context);
 		};
 	}
+
+	function updateGameInfo() {
+		socket.send(formatWebsocketData(GAME_EVENTS.GET_GAME_INFO));
+	}
+
+	function connectToServer() {
+		socket.send(formatWebsocketData(GAME_EVENTS.REGISTER_PLAYER, { playerName: username }));
+		setInterval(() => {
+			updateGameInfo();
+		}, 1000);
+	}
 </script>
 
 <div>
-	<button on:click={() => socket.send(formatWebsocketData(GAME_EVENTS.START_GAME))}>Start game</button>
+	{#if connected}
+		Your name:
+		<input bind:value={username} />
+		<br />
+		<button on:click={connectToServer}> Connect </button>
+		<br />
+		Other player name:
+		<input bind:value={otherUsername} />
+		<br />
+		<button
+			on:click={() => {
+				socket.send(formatWebsocketData(GAME_EVENTS.CREATE_GAME, { playerNames: [username, otherUsername] }));
+				updateGameInfo();
+			}}
+		>
+			Create game vs {otherUsername}
+		</button>
+		<br />
+		<button on:click={() => socket.send(formatWebsocketData(GAME_EVENTS.READY))}>Ready</button>
 		<br />
 		<br />
+	{:else}
+		Connecting to game server...
+	{/if}
 	<canvas id="pong_canvas" />
 </div>

volumes/front/src/components/Pong/constants.ts

@@ -2,13 +2,17 @@ import { Point } from './utils';
 
 export const GAME_EVENTS = {
 	START_GAME: 'START_GAME',
+	READY: 'READY',
 	GAME_TICK: 'GAME_TICK',
 	PLAYER_MOVE: 'PLAYER_MOVE',
-	GET_GAME_INFO: 'GET_GAME_INFO'
+	GET_GAME_INFO: 'GET_GAME_INFO',
+	CREATE_GAME: 'CREATE_GAME',
+	REGISTER_PLAYER: 'REGISTER_PLAYER'
 };
 
 export interface GameInfo extends GameInfoConstants {
 	yourPaddleIndex: number;
+	gameId: string;
 }
 export interface GameInfoConstants {
 	mapSize: Point;
@@ -30,3 +34,4 @@ export interface GameUpdate {
 	ballPosition: Point;
 	scores: number[];
 }
+