find a way to sharing init

+ vector.normalized()
+ misc

src/client/class/GameComponents.ts

@@ -1,33 +0,0 @@
-
-import * as c from "../constants.js"
-import { VectorInteger } from "../../shared_js/class/Vector.js";
-import { RectangleClient, RacketClient, BallClient } from "./RectangleClient.js";
-
-class GameComponentsForClient {
-	wallTop: RectangleClient;
-	wallBottom: RectangleClient;
-	playerLeft: RacketClient;
-	playerRight: RacketClient;
-	ball: BallClient;
-	constructor(ctx: CanvasRenderingContext2D)
-	{
-		let pos = new VectorInteger;
-
-		pos.assign(0, 0);
-		this.wallTop = new RectangleClient(pos, c.w, c.wallSize, ctx, "grey");
-		pos.assign(0, c.h-c.wallSize);
-		this.wallBottom = new RectangleClient(pos, c.w, c.wallSize, ctx, "grey");
-	
-		pos.assign(0+c.pw, c.h_mid-c.ph/2);
-		this.playerLeft = new RacketClient(pos, c.pw, c.ph, c.playerSpeed, ctx, "white");
-		pos.assign(c.w-c.pw-c.pw, c.h_mid-c.ph/2);
-		this.playerRight = new RacketClient(pos, c.pw, c.ph, c.playerSpeed, ctx, "white");
-	
-		// pos.assign(c.w_mid-c.ballSize/2, c.h_mid-c.ballSize/2); // center the ball
-		pos.assign(-c.ballSize, -c.ballSize); // ball out =)
-		this.ball = new BallClient(pos, c.ballSize, c.ballSpeed, ctx, "white");
-		this.ball.dir.assign(-0.8, +0.2);
-	}
-}
-
-export {GameComponentsForClient}

src/client/class/GameComponentsClient.ts

@@ -2,10 +2,28 @@
 import * as c from "../constants.js"
 import { Vector, VectorInteger } from "../../shared_js/class/Vector.js";
 import { TextElem, TextNumericValue } from "./Text.js";
-import { RectangleClient, Line } from "./RectangleClient.js";
+import { RectangleClient, RacketClient, BallClient, Line } from "./RectangleClient.js";
-import { GameComponentsForClient } from "./GameComponents.js";
+import { GameComponents } from "../../shared_js/class/GameComponents.js";
 
-class GameComponentsClient extends GameComponentsForClient {
+class GameComponentsExtensionForClient extends GameComponents {
+	wallTop: RectangleClient;
+	wallBottom: RectangleClient;
+	playerLeft: RacketClient;
+	playerRight: RacketClient;
+	ball: BallClient;
+	constructor(ctx: CanvasRenderingContext2D)
+	{
+		super();
+		this.wallTop = new RectangleClient(this.wallTop.pos, this.wallTop.width, this.wallTop.height, ctx, "grey");
+		this.wallBottom = new RectangleClient(this.wallBottom.pos, this.wallBottom.width, this.wallBottom.height, ctx, "grey");
+		this.playerLeft = new RacketClient(this.playerLeft.pos, this.playerLeft.width, this.playerLeft.height, this.playerLeft.baseSpeed, ctx, "white");
+		this.playerRight = new RacketClient(this.playerRight.pos, this.playerRight.width, this.playerRight.height, this.playerRight.baseSpeed, ctx, "white");
+		this.ball = new BallClient(this.ball.pos, this.ball.width, this.ball.baseSpeed, this.ball.speedIncrease, ctx, "white");
+	}
+}
+
+
+class GameComponentsClient extends GameComponentsExtensionForClient {
 	midLine: Line;
 	scoreLeft: TextNumericValue;
 	scoreRight: TextNumericValue;

src/client/class/RectangleClient.ts

@@ -80,10 +80,10 @@ class BallClient extends Ball implements GraphicComponent {
 	color: string;
 	update: () => void;
 	clear: (pos?: VectorInteger) => void;
-	constructor(pos: VectorInteger, size: number, baseSpeed: number,
+	constructor(pos: VectorInteger, size: number, baseSpeed: number, speedIncrease: number,
 		ctx: CanvasRenderingContext2D, color: string)
 	{
-		super(pos, size, baseSpeed);
+		super(pos, size, baseSpeed, speedIncrease);
 		this.ctx = ctx;
 		this.color = color;
 		this.update = updateRectangle;

src/client/draw.ts

@@ -6,12 +6,12 @@ function drawLoop()
 {
 	pong.clear();
 	
-	drawStatic();
-
 	if (gridDisplay) {
 		drawGrid();
 	}
 
+	drawStatic();
+
 	drawDynamic();
 }
 

src/server/class/GameComponentsServer.ts

@@ -2,18 +2,12 @@
 import * as c from "../constants.js"
 import { GameComponents } from "../../shared_js/class/GameComponents.js";
 
-// DONT WORK AS EXPECTED. I might try again later. 
-// Empty object replacement to the web-API (web-API useless on server-side)
-// class CanvasRenderingContext2D {}
-// const mockCTX = new CanvasRenderingContext2D();
-
 class GameComponentsServer extends GameComponents {
 	scoreLeft: number = 0;
 	scoreRight: number = 0;
 	ballInPlay: boolean = false;
 	constructor()
 	{
-		// super(mockCTX);
 		super();
 	}
 }

src/server/constants.ts

@@ -2,4 +2,4 @@
 export * from "../shared_js/constants.js"
 
 export	const gameLoopIntervalMS = 15; // millisecond
-export	const clientsUpdateIntervalMS = 100; // millisecond
+export	const clientsUpdateIntervalMS = 42; // millisecond

src/shared_js/class/GameComponents.ts

@@ -1,7 +1,4 @@
-/* 
+
-	No more shared. Dont know how to implemente this.
-	For the moment, this code is only used by the server.
-*/
 import * as c from "../constants.js"
 import { VectorInteger } from "./Vector.js";
 import { Rectangle, Racket, Ball } from "./Rectangle.js";
@@ -22,13 +19,12 @@ class GameComponents {
 		this.wallBottom = new Rectangle(pos, c.w, c.wallSize);
 	
 		pos.assign(0+c.pw, c.h_mid-c.ph/2);
-		this.playerLeft = new Racket(pos, c.pw, c.ph, c.playerSpeed);
+		this.playerLeft = new Racket(pos, c.pw, c.ph, c.racketSpeed);
 		pos.assign(c.w-c.pw-c.pw, c.h_mid-c.ph/2);
-		this.playerRight = new Racket(pos, c.pw, c.ph, c.playerSpeed);
+		this.playerRight = new Racket(pos, c.pw, c.ph, c.racketSpeed);
 	
-		// pos.assign(c.w_mid-c.ballSize/2, c.h_mid-c.ballSize/2); // center the ball
 		pos.assign(-c.ballSize, -c.ballSize); // ball out =)
-		this.ball = new Ball(pos, c.ballSize, c.ballSpeed);
+		this.ball = new Ball(pos, c.ballSize, c.ballSpeed, c.ballSpeedIncrease);
 		this.ball.dir.assign(-0.8, +0.2);
 	}
 }

src/shared_js/class/Rectangle.ts

@@ -66,8 +66,10 @@ class Racket extends MovingRectangle {
 }
 
 class Ball extends MovingRectangle {
-	constructor(pos: VectorInteger, size: number, baseSpeed: number) {
+	readonly speedIncrease: number;
+	constructor(pos: VectorInteger, size: number, baseSpeed: number, speedIncrease: number) {
 		super(pos, size, size, baseSpeed);
+		this.speedIncrease = speedIncrease;
 	}
 	bounce(collider?: Rectangle) {
 		this._bounceAlgo(collider);
@@ -98,7 +100,7 @@ class Ball extends MovingRectangle {
 		this._bounceRacketAlgo(racket);
 	}
 	protected _bounceRacketAlgo(racket: Racket) {
-		this.speed += this.baseSpeed/20;
+		this.speed += this.speedIncrease;
 
 		let x = this.dir.x * -1;
 
@@ -109,7 +111,7 @@ class Ball extends MovingRectangle {
 		const racketMid = racket.pos.y + racketHalf;
 
 		let impact = ballMid - racketMid;
-		const horizontalMargin = racketHalf * 0.10;
+		const horizontalMargin = racketHalf * 0.15;
 		if (impact < horizontalMargin && impact > -horizontalMargin) {
 			impact = 0;
 		}
@@ -122,12 +124,10 @@ class Ball extends MovingRectangle {
 
 		let y = impact / (racketHalf - horizontalMargin) * angleFactor;
 
-		this.dir.assign(x, y);
-		/*
 		// Normalize Vector (for consistency in speed independent of direction)
-		const normalizationFactor = Math.abs(y) + Math.abs(x);
+		this.dir.assign(x, y);
-		this.dir.assign(x/normalizationFactor, y/normalizationFactor);
+		this.dir = this.dir.normalized();
-		*/
+		// console.log(`x: ${this.dir.x}, y: ${this.dir.y}`);
 	}
 }
 

src/shared_js/class/Vector.ts

@@ -10,6 +10,10 @@ class Vector {
 		this.x = x;
 		this.y = y;
 	}
+	normalized() : Vector {
+		const normalizationFactor = Math.abs(this.x) + Math.abs(this.y);
+		return new Vector(this.x/normalizationFactor, this.y/normalizationFactor);
+	}
 }
 
 class VectorInteger extends Vector {

src/shared_js/constants.ts

@@ -11,8 +11,9 @@ export	const pw = Math.floor(w/60);
 export	const ph = pw*6;
 export	const ballSize = pw;
 export	const wallSize = Math.floor(w/100);
-export	const playerSpeed = Math.floor(w/1.5); // pixel per second
+export	const racketSpeed = Math.floor(w/1.5); // pixel per second
 export	const ballSpeed = Math.floor(w/2); // pixel per second
+export	const ballSpeedIncrease = ballSpeed/20; // pixel per second
 
 export	const matchStartDelay = 3000; // millisecond
 export	const newRoundDelay = 1500; // millisecond