diff --git a/src/components/Pong/Pong.svelte b/src/components/Pong/Pong.svelte
index 43b2dbe..66337bf 100644
--- a/src/components/Pong/Pong.svelte
+++ b/src/components/Pong/Pong.svelte
@@ -6,28 +6,22 @@
const FPS = 144;
const SERVER_URL = 'ws://localhost:3001';
- const socket: WebSocket = new WebSocket(SERVER_URL);
- socket.onopen = () => {
- console.log('Connected to game server!');
- socket.send(formatWebsocketData(GAME_EVENTS.GET_GAME_INFO));
- };
- let canvas: HTMLCanvasElement;
- let context: CanvasRenderingContext2D;
+ let socket: WebSocket;
//Get canvas and its context
window.onload = () => {
- canvas = document.getElementById('pong_canvas') as HTMLCanvasElement;
+ const canvas: HTMLCanvasElement = document.getElementById('pong_canvas') as HTMLCanvasElement;
if (canvas) {
- context = canvas.getContext('2d') as CanvasRenderingContext2D;
+ const context: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
if (context) {
- setupGame();
+ setupSocket(canvas, context);
}
}
};
- function setupGame() {
+ function setupSocket(canvas: HTMLCanvasElement, context: CanvasRenderingContext2D) {
+ socket = new WebSocket(SERVER_URL);
const game = new Game(canvas, context);
-
socket.onmessage = function (e) {
const event_json = JSON.parse(e.data);
const event = event_json.event;
@@ -44,21 +38,18 @@
}, 1000 / FPS);
console.log('Game loaded!');
} else {
- console.log('Received unknown event from server:');
- console.log(event_json);
+ console.log('Unknown event from server: ' + event);
}
};
+ socket.onopen = () => {
+ console.log('Connected to game server!');
+ socket.send(formatWebsocketData(GAME_EVENTS.GET_GAME_INFO));
+ };
}
-
+
diff --git a/src/components/Pong/pong.ts b/src/components/Pong/pong.ts
deleted file mode 100644
index bec771c..0000000
--- a/src/components/Pong/pong.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { GAME_EVENTS } from './constants';
-import { Game } from './Game';
-import { formatWebsocketData, Point } from './utils';
-
-const FPS = 144;
-
-const socket: WebSocket = new WebSocket('ws://localhost:3001');
-socket.onopen = () => {
- console.log('Connected to game server!');
- socket.send(formatWebsocketData(GAME_EVENTS.GET_GAME_INFO));
-};
-let canvas: HTMLCanvasElement;
-let context: CanvasRenderingContext2D;
-
-//Get canvas and its context
-window.onload = () => {
- document.getElementById('start_game_button').addEventListener('click', () => {
- socket.send(formatWebsocketData(GAME_EVENTS.START_GAME));
- });
- canvas = document.getElementById('pong_canvas') as HTMLCanvasElement;
- if (canvas) {
- context = canvas.getContext('2d') as CanvasRenderingContext2D;
- if (context) {
- setupGame();
- }
- }
-};
-
-function setupGame() {
- const game = new Game(canvas, context);
-
- socket.onmessage = function (e) {
- const event_json = JSON.parse(e.data);
- const event = event_json.event;
- const data = event_json.data;
-
- if (event == GAME_EVENTS.START_GAME) {
- game.start(socket);
- } else if (event == GAME_EVENTS.GAME_TICK) {
- game.update(data);
- } else if (event == GAME_EVENTS.GET_GAME_INFO) {
- game.setInfo(data);
- setInterval(() => {
- game.draw();
- }, 1000 / FPS);
- console.log('Game loaded!');
- } else {
- console.log('Received unknown event from server:');
- console.log(event_json);
- }
- };
-}