refactoring

+ wip input to server

make.sh

@@ -9,3 +9,9 @@ cp ./src/client/*.js ./www/js/
 
 mkdir -p www/js/class
 cp ./src/client/class/*.js ./www/js/class/
+
+mkdir -p www/shared_js/
+cp ./src/shared_js/*.js ./www/shared_js/
+
+mkdir -p www/shared_js/class
+cp ./src/shared_js/class/*.js ./www/shared_js/class/

src/client/class/GameArea.ts

@@ -1,4 +1,6 @@
 
+import * as c from ".././constants.js"
+
 class GameArea {
 	keys: string[];
 	interval: number = 0;
@@ -8,10 +10,8 @@ class GameArea {
 		this.keys = [];
 		this.canvas = document.createElement("canvas");
 		this.ctx = this.canvas.getContext("2d") as CanvasRenderingContext2D;
-		/* ratio 5/3 (1.66) */
+		this.canvas.width = c.CanvasWidth;
-		const ratio = 1.66666;
+		this.canvas.height = c.CanvasWidth / c.CanvasRatio;
-		this.canvas.width = 1500;
-		this.canvas.height = this.canvas.width / ratio;
 		let container = document.getElementById("canvas-container");
 		if (container)
 			container.insertBefore(this.canvas, container.childNodes[0]);

src/client/class/Text.ts

@@ -1,6 +1,6 @@
 
-import {Vector, VectorInteger} from "./Vector.js";
+import {Vector, VectorInteger} from "../../shared_js/class/Vector.js";
-import {Component, Moving} from "./interface.js";
+import {Component, Moving} from "../../shared_js/class/interface.js";
 
 // conflict with Text
 class TextElem implements Component {

src/client/constants.ts

@@ -0,0 +1 @@
+export * from "../shared_js/constants.js"

src/client/draw.ts

@@ -1,4 +1,4 @@
-import * as g from "./pong.js"
+import * as g from "./global.js"
 import {gridDisplay} from "./handleInput.js";
 
 function draw()

src/client/gameLoop.ts

@@ -1,6 +1,6 @@
-import * as g from "./pong.js"
+import * as g from "./global.js"
 import * as d from "./draw.js";
-import {random} from "./utils.js";
+import {random} from "../shared_js/utils.js";
 import {handleInput} from "./handleInput.js";
 
 let ballInPlay = false;

src/client/global.ts

@@ -0,0 +1,3 @@
+export * from "../shared_js/initGame.js"
+export * from "./initGameClientOnly.js"
+export {pong} from "./pong.js"

src/client/handleInput.ts

@@ -1,5 +1,7 @@
-import * as g from "./pong.js"
+import * as g from "./global.js"
 import * as d from "./draw.js";
+import { socket } from "./ws.js";
+import {InputEnum, EventInput} from "../shared_js/class/Event.js"
 
 let gridDisplay = false;
 
@@ -26,10 +28,10 @@ function playerMove(delta: number, keys: string[])
 {
 	g.player1.dir.y = 0;
 	if (keys.indexOf("w") != -1) {
-		g.player1.dir.y += -1;
+		socket.send(JSON.stringify(new EventInput(InputEnum.up)));
 	}
 	if (keys.indexOf("s") != -1) {
-		g.player1.dir.y += 1;
+		socket.send(JSON.stringify(new EventInput(InputEnum.down)));
 	}
 	g.player1.moveAndCollide(delta, [g.wall_top, g.wall_bottom]);
 

src/client/initGameClientOnly.ts

@@ -0,0 +1,59 @@
+
+import * as c from "./constants.js"
+import {Vector, VectorInteger} from "../shared_js/class/Vector.js";
+import {Rectangle, MovingRectangle, Player, Ball, Line} from "../shared_js/class/Rectangle.js";
+import {TextElem, TextNumericValue} from "./class/Text.js";
+
+export let midLine: Line;
+export let score1: TextNumericValue;
+export let score2: TextNumericValue;
+
+export let w_grid_mid: Rectangle;
+export let w_grid_u1: Rectangle;
+export let w_grid_d1: Rectangle;
+export let h_grid_mid: Rectangle;
+export let h_grid_u1: Rectangle;
+export let h_grid_d1: Rectangle;
+
+function initGameClientOnly(ctx: CanvasRenderingContext2D)
+{
+	// Const (could maybe be in constants.ts ?)
+	const	w = c.CanvasWidth;
+	const	h = c.CanvasWidth / c.CanvasRatio;
+	const	w_mid = Math.floor(w/2);
+	const	h_mid = Math.floor(h/2);
+	const	midLineSize = Math.floor(w/150);
+	const	scoreSize = Math.floor(w/16); 
+	const	gridSize = Math.floor(w/500);
+	
+	const	wallSize = Math.floor(w/100);
+
+	let pos = new VectorInteger;
+	// Scores
+	pos.assign(w_mid-scoreSize*1.6, scoreSize*1.5);
+	score1 = new TextNumericValue(ctx, pos, "white", scoreSize);
+	pos.assign(w_mid+scoreSize*1.1, scoreSize*1.5);
+	score2 = new TextNumericValue(ctx, pos, "white", scoreSize);
+	score1.value = 0;
+	score2.value = 0;
+
+	// Dotted Midline
+	pos.assign(w_mid-midLineSize/2, 0+wallSize);
+	midLine = new Line(ctx, pos, "white", midLineSize, h-wallSize*2, 15);
+
+	// Grid
+	pos.assign(0, h_mid);
+	w_grid_mid = new Rectangle(ctx, pos, "darkgreen", w, gridSize);
+	pos.assign(0, h/4);
+	w_grid_u1 = new Rectangle(ctx, pos, "darkgreen", w, gridSize);
+	pos.assign(0, h-h/4);
+	w_grid_d1 = new Rectangle(ctx, pos, "darkgreen", w, gridSize);
+	pos.assign(w_mid, 0);
+	h_grid_mid = new Rectangle(ctx, pos, "darkgreen", gridSize, h);
+	pos.assign(w/4, 0);
+	h_grid_u1 = new Rectangle(ctx, pos, "darkgreen", gridSize, h);
+	pos.assign(w-w/4, 0);
+	h_grid_d1 = new Rectangle(ctx, pos, "darkgreen", gridSize, h);
+}
+
+export {initGameClientOnly}

src/client/pong.ts

@@ -1,13 +1,12 @@
 
 import {GameArea} from "./class/GameArea.js";
-import {Vector, VectorInteger} from "./class/Vector.js";
-import {Rectangle, MovingRectangle, Player, Ball, Line} from "./class/Rectangle.js";
-import {TextElem, TextNumericValue} from "./class/Text.js";
 import * as d from "./draw.js";
 import {gameLoop, newRound} from "./gameLoop.js"
-import {random} from "./utils.js";
+// import {random} from "../shared_js/utils.js";
-import {socket} from "./ws.js";
+// import {socket} from "./ws.js";
-
+// import * as c from "./constants.js"
+import {initGame} from "../shared_js/initGame.js";
+import {initGameClientOnly} from "./initGameClientOnly.js";
 
 /* Keys
 	Player 1: W/S
@@ -15,29 +14,12 @@ import {socket} from "./ws.js";
 	Grid On-Off: G
 */
 
-export let pong: GameArea;
+export const pong = new GameArea();
-
-export let wall_top: Rectangle;
-export let wall_bottom: Rectangle;
-export let player1: Player;
-export let player2: Player;
-export let ball: Ball;
-export let score1: TextNumericValue;
-export let score2: TextNumericValue;
-export let midLine: Line;
-
-export let w_grid_mid: Rectangle;
-export let w_grid_u1: Rectangle;
-export let w_grid_d1: Rectangle;
-export let h_grid_mid: Rectangle;
-export let h_grid_u1: Rectangle;
-export let h_grid_d1: Rectangle;
 
 function init()
 {
-	initGame();
+	initGame(pong.ctx);
-	initGameClientOnly();
+	initGameClientOnly(pong.ctx);
-	console.log("socket state %i", socket.readyState);
 }
 
 function startGame()
@@ -54,76 +36,6 @@ function startGame()
 	setTimeout(newRound, 1000);
 }
 
-function initGameClientOnly()
-{
-	let pos = new VectorInteger;
-
-	// Const
-	const	w = pong.canvas.width;
-	const	h = pong.canvas.height;
-	const	w_mid = Math.floor(w/2);
-	const	h_mid = Math.floor(h/2);
-	const	gridSize = Math.floor(w/500);
-
-	// Grid
-	pos.assign(0, h_mid);
-	w_grid_mid = new Rectangle(pong.ctx, pos, "darkgreen", w, gridSize);
-	pos.assign(0, h/4);
-	w_grid_u1 = new Rectangle(pong.ctx, pos, "darkgreen", w, gridSize);
-	pos.assign(0, h-h/4);
-	w_grid_d1 = new Rectangle(pong.ctx, pos, "darkgreen", w, gridSize);
-	pos.assign(w_mid, 0);
-	h_grid_mid = new Rectangle(pong.ctx, pos, "darkgreen", gridSize, h);
-	pos.assign(w/4, 0);
-	h_grid_u1 = new Rectangle(pong.ctx, pos, "darkgreen", gridSize, h);
-	pos.assign(w-w/4, 0);
-	h_grid_d1 = new Rectangle(pong.ctx, pos, "darkgreen", gridSize, h);
-}
-
-function initGame()
-{
-	pong = new GameArea();
-	// Const
-	const	w = pong.canvas.width;
-	const	h = pong.canvas.height;
-	const	w_mid = Math.floor(w/2);
-	const	h_mid = Math.floor(h/2);
-	const	pw = Math.floor(w/50);
-	const	ph = pw*5;
-	const	ballSize = pw;
-	const	scoreSize = Math.floor(w/16);
-	const	midLineSize = Math.floor(w/150);
-	const	wallSize = Math.floor(w/100);
-	const	playerSpeed = Math.floor(w/1.5); // pixel per second
-	const	ballSpeed = Math.floor(w/1.5); // pixel per second
-
-	let pos = new VectorInteger;
-	// Component
-	pos.assign(0, 0);
-	wall_top = new Rectangle(pong.ctx, pos, "grey", w, wallSize);
-	pos.assign(0, h-wallSize);
-	wall_bottom = new Rectangle(pong.ctx, pos, "grey", w, wallSize);
-
-	pos.assign(0+pw, h_mid-ph/2);
-	player1 = new Player(pong.ctx, pos, "white", pw, ph, playerSpeed);
-	pos.assign(w-pw-pw, h_mid-ph/2);
-	player2 = new Player(pong.ctx, pos, "white", pw, ph, playerSpeed);
-
-	pos.assign(w_mid-ballSize/2, h_mid-ballSize/2);
-	ball = new Ball(pong.ctx, pos, "white", ballSize, ballSpeed);
-	ball.dir.assign(-0.8, +0.2);
-
-	pos.assign(w_mid-scoreSize*1.6, scoreSize*1.5);
-	score1 = new TextNumericValue(pong.ctx, pos, "white", scoreSize);
-	pos.assign(w_mid+scoreSize*1.1, scoreSize*1.5);
-	score2 = new TextNumericValue(pong.ctx, pos, "white", scoreSize);
-	score1.value = 0;
-	score2.value = 0;
-
-	pos.assign(w_mid-midLineSize/2, 0+wallSize);
-	midLine = new Line(pong.ctx, pos, "white", midLineSize, h-wallSize*2, 15);
-}
-
 /////////////////////////////////////////////////////////////////////////////
 /////////////////////////////////////////////////////////////////////////////
 

src/client/ws.ts

@@ -1,29 +1,12 @@
 
-import * as g from "./pong.js"
+import * as g from "./global.js" // temp
 import {startGame} from "./pong.js";
+import {EventTypes, EventData, EventGameUpdate} from "../shared_js/class/Event.js"
 
 const wsPort = 8042;
 const wsUrl = "ws://" + document.location.hostname + ":" + wsPort + "/pong";
 const socket = new WebSocket(wsUrl, "json");
 
-enum EventTypes {
-	gameUpdate = 1,
-	start,
-	pause,
-	resume
-}
-
-interface EventData {
-	type: EventTypes;
-}
-
-class EventGameUpdate implements EventData {
-	type: EventTypes = EventTypes.gameUpdate;
-	player1 = {y: 0};
-	player2 = {y: 0};
-	ball = {x: 0, y: 0, speed: 0};
-}
-
 socket.addEventListener("message", logListener);
 socket.addEventListener("message", matchmakingListener);
 

src/server/server.ts

@@ -5,13 +5,23 @@ import fs from "fs";
 import path from "path";
 import { WebSocketServer, WebSocket } from "ws";
 import { v4 as uuidv4 } from 'uuid';
-import { random } from "../client/utils.js";
+import { random } from "../shared_js/utils.js";
+
+import {EventTypes, EventData, EventGameUpdate} from "../shared_js/class/Event.js"
+import {Rectangle, MovingRectangle, Player, Ball, Line} from "../shared_js/class/Rectangle.js";
+import { Vector } from "../shared_js/class/Vector.js";
+
 
 const hostname = "localhost";
 const port = 8080;
 const wsPort = 8042; // pas indispensable d'avoir un autre port si le WebSocket est limité à certaines routes
 const root = "../../www/";
 
+class CanvasRenderingContext2D {} // Empty object replacement to the web-API (web-API useless on server-side)
+const mockCtx = new CanvasRenderingContext2D;
+	// @ts-ignore
+const player1 = new Player(mockCtx, new Vector(), "white", 1, 1, 1);
+
 const server = http.createServer((req, res) => {
 	// var q = new URL(req.url, `http://${req.getHeaders().host}`)
 	// @ts-ignore
@@ -63,16 +73,22 @@ wsServer.on("connection", (socket, request) => {
 		console.log("client %s alive at %i", client.id, Date.now());
 	});
 
-	socket.on("message", function message(data) {
+	socket.on("message", function log(data) {
 		console.log("received: %s", data);
 	});
 	
-	socket.send(JSON.stringify({type: 2})); // start
+	socket.on("message", clientInputListener);
+	socket.send(JSON.stringify({type: EventTypes.start}));
 	// socket.send("connection success, bravo client " + id);
 	// socket.send("start");
 	// socket.send("json/20");
 });
 
+function clientInputListener(data: string)
+{
+	return;
+}
+
 function deleteClient(client: Client)
 {
 	var i = clientsArr.indexOf(client);
@@ -97,7 +113,7 @@ const pingInterval = setInterval( () => {
 const gameUpdateInterval = setInterval( () => {
 	clientsArr.forEach( (client) => {
 		const update = {
-			type: 1,
+			type: EventTypes.gameUpdate,
 			player1: {y: random(50, 650)},
 			player2: {y: random(50, 650)},
 			ball: {x: 0, y: 0, speed: 0}

src/shared_js/class/Event.ts

@@ -0,0 +1,37 @@
+
+/* Server */
+enum EventTypes {
+	gameUpdate = 1,
+	start,
+	pause,
+	resume
+}
+
+interface EventData {
+	type: EventTypes;
+}
+
+class EventGameUpdate implements EventData {
+	type: EventTypes = EventTypes.gameUpdate;
+	player1 = {y: 0};
+	player2 = {y: 0};
+	ball = {x: 0, y: 0, speed: 0};
+}
+
+/* Client */
+enum InputEnum {
+	up = 1,
+	down
+}
+
+class EventInput {
+	input: InputEnum;
+	constructor(input: InputEnum = 0) {
+		this.input = input;
+	}
+}
+
+export {
+	EventTypes, EventData, EventGameUpdate,
+	InputEnum, EventInput
+}

src/shared_js/constants.ts

@@ -0,0 +1,4 @@
+
+export const CanvasWidth = 1500;
+/* ratio 5/3 (1.66) */
+export const CanvasRatio = 1.66666; 

src/shared_js/initGame.ts

@@ -0,0 +1,43 @@
+
+import * as c from "./constants.js"
+import {Vector, VectorInteger} from "./class/Vector.js";
+import {Rectangle, MovingRectangle, Player, Ball, Line} from "./class/Rectangle.js";
+
+export let wall_top: Rectangle;
+export let wall_bottom: Rectangle;
+export let player1: Player;
+export let player2: Player;
+export let ball: Ball;
+
+function initGame(ctx: CanvasRenderingContext2D)
+{
+	// Const (could maybe be in constants.ts ?)
+	const	w = c.CanvasWidth;
+	const	h = c.CanvasWidth / c.CanvasRatio;
+	const	w_mid = Math.floor(w/2);
+	const	h_mid = Math.floor(h/2);
+	const	pw = Math.floor(w/50);
+	const	ph = pw*5;
+	const	ballSize = pw;
+	const	wallSize = Math.floor(w/100);
+	const	playerSpeed = Math.floor(w/1.5); // pixel per second
+	const	ballSpeed = Math.floor(w/1.5); // pixel per second
+
+	let pos = new VectorInteger;
+	// Component
+	pos.assign(0, 0);
+	wall_top = new Rectangle(ctx, pos, "grey", w, wallSize);
+	pos.assign(0, h-wallSize);
+	wall_bottom = new Rectangle(ctx, pos, "grey", w, wallSize);
+
+	pos.assign(0+pw, h_mid-ph/2);
+	player1 = new Player(ctx, pos, "white", pw, ph, playerSpeed);
+	pos.assign(w-pw-pw, h_mid-ph/2);
+	player2 = new Player(ctx, pos, "white", pw, ph, playerSpeed);
+
+	pos.assign(w_mid-ballSize/2, h_mid-ballSize/2);
+	ball = new Ball(ctx, pos, "white", ballSize, ballSpeed);
+	ball.dir.assign(-0.8, +0.2);
+}
+
+export {initGame}