authoritative server OK

+ TODO actual matchmaking

src/shared_js/class/Event.ts

@@ -29,11 +29,28 @@ class EventGameUpdate extends ServerEvent {
 	playerLeft = {y: 0};
 	playerRight = {y: 0};
 	ball = {x: 0, y: 0, speed: 0};
-	constructor() {
+	constructor() { // TODO: constructor that take GameComponentsServer maybe ?
 		super(en.EventTypes.gameUpdate);
 	}
 }
 
+class EventScoreUpdate extends ServerEvent {
+	scoreLeft: number;
+	scoreRight: number;
+	constructor(scoreLeft: number, scoreRight: number) {
+		super(en.EventTypes.scoreUpdate);
+		this.scoreLeft = scoreLeft;
+		this.scoreRight = scoreRight;
+	}
+}
+
+class EventMatchEnd extends ServerEvent {
+	winner: en.PlayerSide;
+	constructor(winner: en.PlayerSide) {
+		super(en.EventTypes.matchEnd);
+	}
+}
+
 
 /* From Client */
 class ClientEvent {
@@ -49,6 +66,7 @@ class ClientAnnounce extends ClientEvent {
 	constructor(role: en.ClientRole, id: string = "") {
 		super(en.EventTypes.clientAnnounce);
 		this.role = role;
+		this.id = id;
 	}
 }
 
@@ -61,6 +79,7 @@ class EventInput extends ClientEvent {
 }
 
 export {
-	ServerEvent, EventAssignId, EventMatchmakingComplete, EventGameUpdate,
+	ServerEvent, EventAssignId, EventMatchmakingComplete,
+	EventGameUpdate, EventScoreUpdate, EventMatchEnd,
 	ClientEvent, ClientAnnounce, EventInput
 }

src/shared_js/class/GameComponents.ts

@@ -1,31 +1,34 @@
-
+/* 
+	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";
 
-
 class GameComponents {
 	wallTop: Rectangle;
 	wallBottom: Rectangle;
 	playerLeft: Racket;
 	playerRight: Racket;
 	ball: Ball;
-	constructor(ctx?: CanvasRenderingContext2D)
+	constructor()
 	{
 		let pos = new VectorInteger;
 
 		pos.assign(0, 0);
-		this.wallTop = new Rectangle(ctx, pos, "grey", c.w, c.wallSize);
+		this.wallTop = new Rectangle(pos, c.w, c.wallSize);
 		pos.assign(0, c.h-c.wallSize);
-		this.wallBottom = new Rectangle(ctx, pos, "grey", c.w, c.wallSize);
+		this.wallBottom = new Rectangle(pos, c.w, c.wallSize);
 	
 		pos.assign(0+c.pw, c.h_mid-c.ph/2);
-		this.playerLeft = new Racket(ctx, pos, "white", c.pw, c.ph, c.playerSpeed);
+		this.playerLeft = new Racket(pos, c.pw, c.ph, c.playerSpeed);
 		pos.assign(c.w-c.pw-c.pw, c.h_mid-c.ph/2);
-		this.playerRight = new Racket(ctx, pos, "white", c.pw, c.ph, c.playerSpeed);
+		this.playerRight = new Racket(pos, c.pw, c.ph, c.playerSpeed);
 	
-		pos.assign(c.w_mid-c.ballSize/2, c.h_mid-c.ballSize/2);
-		this.ball = new Ball(ctx, pos, "white", c.ballSize, c.ballSpeed);
+		// 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.dir.assign(-0.8, +0.2);
 	}
 }

src/shared_js/class/Rectangle.ts

@@ -3,28 +3,14 @@ import {Vector, VectorInteger} from "./Vector.js";
 import {Component, Moving} from "./interface.js";
 
 class Rectangle implements Component {
-	ctx: CanvasRenderingContext2D;
 	pos: VectorInteger;
-	color: string;
 	width: number;
 	height: number;
-	constructor(ctx: CanvasRenderingContext2D, pos: VectorInteger, color: string, width: number, height: number) {
-		this.ctx = ctx;
+	constructor(pos: VectorInteger, width: number, height: number) {
 		this.pos = Object.assign({}, pos);
-		this.color = color;
 		this.width = width;
 		this.height = height;
 	}
-	update() {
-		this.ctx.fillStyle = this.color;
-		this.ctx.fillRect(this.pos.x, this.pos.y, this.width, this.height);
-	}
-	clear(pos?: VectorInteger) {
-		if (pos)
-			this.ctx.clearRect(pos.x, pos.y, this.width, this.height);
-		else
-			this.ctx.clearRect(this.pos.x, this.pos.y, this.width, this.height);
-	}
 	collision(collider: Rectangle): boolean { // Collision WIP. To redo
 		var myleft = this.pos.x;
 		var myright = this.pos.x + (this.width);
@@ -49,8 +35,8 @@ class MovingRectangle extends Rectangle implements Moving {
 	dir: Vector = new Vector(0,0);
 	speed: number;
 	readonly baseSpeed: number;
-	constructor(ctx: CanvasRenderingContext2D, pos: VectorInteger, color: string, width: number, height: number, baseSpeed: number) {
-		super(ctx, pos, color, width, height);
+	constructor(pos: VectorInteger, width: number, height: number, baseSpeed: number) {
+		super(pos, width, height);
 		this.baseSpeed = baseSpeed;
 		this.speed = baseSpeed;
 	}
@@ -69,23 +55,18 @@ class MovingRectangle extends Rectangle implements Moving {
 			this.pos.x = oldPos.x;
 			this.pos.y = oldPos.y;
 		}
-		else
-		{
-			this.clear(oldPos);
-			this.update();
-		}
 	}
 }
 
 class Racket extends MovingRectangle {
-	constructor(ctx: CanvasRenderingContext2D, pos: VectorInteger, color: string, width: number, height: number, baseSpeed: number) {
-		super(ctx, pos, color, width, height, baseSpeed);
+	constructor(pos: VectorInteger, width: number, height: number, baseSpeed: number) {
+		super(pos, width, height, baseSpeed);
 	}
 }
 
 class Ball extends MovingRectangle {
-	constructor(ctx: CanvasRenderingContext2D, pos: VectorInteger, color: string, size: number, baseSpeed: number) {
-		super(ctx, pos, color, size, size, baseSpeed);
+	constructor(pos: VectorInteger, size: number, baseSpeed: number) {
+		super(pos, size, size, baseSpeed);
 	}
 	bounce(collider?: Rectangle) {
 		/* Could be more generic, but testing only Racket is enough,
@@ -98,7 +79,6 @@ class Ball extends MovingRectangle {
 		}
 	}
 	moveAndBounce(delta: number, colliderArr: Rectangle[]) {
-		let oldPos = Object.assign({}, this.pos);
 		this.move(delta);
 		let i = colliderArr.findIndex(this.collision, this);
 		if (i != -1)
@@ -106,8 +86,6 @@ class Ball extends MovingRectangle {
 			this.bounce(colliderArr[i]);
 			this.move(delta);
 		}
-		this.clear(oldPos);
-		this.update();
 	}
 	private _bounceWall() { // Should be enough for Wall
 		this.dir.y = this.dir.y * -1;
@@ -119,54 +97,4 @@ class Ball extends MovingRectangle {
 	}
 }
 
-class Line extends Rectangle {
-	gapeCount: number = 0;
-	segmentCount: number;
-	segmentWidth: number;
-	segmentHeight: number;
-	constructor(ctx: CanvasRenderingContext2D, pos: VectorInteger, color: string, width: number, height: number, gapeCount?: number) {
-		super(ctx, pos, color, width, height);
-		if (gapeCount)
-			this.gapeCount = gapeCount;
-		this.segmentCount = this.gapeCount * 2 + 1;
-
-		this.segmentWidth = this.width;
-		this.segmentHeight = this.height / this.segmentCount;
-
-		// for Horizontal Line
-		// this.segmentWidth = this.width / this.segmentCount;
-		// this.segmentHeight = this.height;
-	}
-	update() {
-		this.ctx.fillStyle = this.color;
-		let pos: VectorInteger = new VectorInteger;
-		let i = 0;
-		while (i < this.segmentCount)
-		{
-			// for Horizontal Line
-			// pos.y = this.pos.y;
-			// pos.x = this.pos.x + this.segmentWidth * i;
-			pos.x = this.pos.x;
-			pos.y = this.pos.y + this.segmentHeight * i;
-			this.ctx.fillRect(pos.x, pos.y, this.segmentWidth, this.segmentHeight);
-			i += 2;
-		}
-	}	
-}
-
-export {Rectangle, MovingRectangle, Racket, Ball, Line}
-
-// How to handle const export in initGame ?
-// example for class Rectangle
-/* constructor(ctx?: CanvasRenderingContext2D, pos?: VectorInteger, color?: string, width?: number, height?: number) {
-	if (ctx && pos && color && width && height)
-		this.init(ctx, pos, color, width, height);
-}
-// constructor() {}
-init(ctx: CanvasRenderingContext2D, pos: VectorInteger, color: string, width: number, height: number) {
-	this.ctx = ctx;
-	this.pos = Object.assign({}, pos);
-	this.color = color;
-	this.width = width;
-	this.height = height;
-} */
+export {Rectangle, MovingRectangle, Racket, Ball}

src/shared_js/class/interface.ts

@@ -3,10 +3,13 @@ import {Vector, VectorInteger} from "./Vector.js";
 
 interface Component {
 	pos: VectorInteger;
-	color: string;
+}
+
+interface GraphicComponent extends Component {
 	ctx: CanvasRenderingContext2D;
-	update(): void;
-	clear(): void;
+	color: string;
+	update: () => void;
+	clear: (pos?: VectorInteger) => void;
 }
 
 interface Moving {
@@ -15,4 +18,4 @@ interface Moving {
 	move(delta: number): void;
 }
 
-export {Component, Moving}
+export {Component, GraphicComponent, Moving}

src/shared_js/constants.ts

@@ -13,3 +13,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 ballSpeed = Math.floor(w/1.5); // pixel per second
+
+export	const matchStartDelay = 3000; // millisecond
+export	const newRoundDelay = 1500; // millisecond

src/shared_js/enums.ts

@@ -2,13 +2,15 @@
 enum EventTypes {
 	// Class Implemented
 	gameUpdate = 1,
+	scoreUpdate,
+	matchEnd,
 	assignId,
 	matchmakingComplete,
 
 	// Generic
 	matchmakingInProgress,
+	matchStart,
 	matchNewRound, // unused
-	matchStart, // unused
 	matchPause, // unused
 	matchResume, // unused