messages draw on canvas

+ bugfix: vector.assign() Uncaught TypeError

src/client/class/GameComponentsClient.ts

@@ -27,6 +27,7 @@ class GameComponentsClient extends GameComponentsExtensionForClient {
 	midLine: Line;
 	scoreLeft: TextNumericValue;
 	scoreRight: TextNumericValue;
+	text1: TextElem;
 
 	w_grid_mid: RectangleClient;
 	w_grid_u1: RectangleClient;
@@ -45,6 +46,10 @@ class GameComponentsClient extends GameComponentsExtensionForClient {
 		this.scoreRight = new TextNumericValue(pos, c.scoreSize, ctx, "white");
 		this.scoreLeft.value = 0;
 		this.scoreRight.value = 0;
+		
+		// Text
+		pos.assign(0, c.h_mid);
+		this.text1 = new TextElem(pos, Math.floor(c.w/8), ctx, "white");
 	
 		// Dotted Midline
 		pos.assign(c.w_mid-c.midLineSize/2, 0+c.wallSize);

src/client/class/Text.ts

@@ -13,7 +13,8 @@ class TextElem implements Component {
 	constructor(pos: VectorInteger, size: number,
 			ctx: CanvasRenderingContext2D, color: string, font: string = "Bit5x3")
 	{
-		this.pos = Object.assign({}, pos);
+		// this.pos = Object.assign({}, pos); // create bug, Uncaught TypeError: X is not a function
+		this.pos = new VectorInteger(pos.x, pos.y);
 		this.size = size;
 		this.ctx = ctx;
 		this.color = color;

src/client/draw.ts

@@ -12,6 +12,8 @@ function drawLoop()
 
 	drawStatic();
 
+	gc.text1.update();
+
 	drawDynamic();
 }
 

src/client/pong.ts

@@ -19,20 +19,34 @@ export const gc = new GameComponentsClient(pong.ctx);
 
 function matchmaking()
 {
-	console.log("Searching an opponent..."); // PLACEHOLDER, todo draw
+	console.log("Searching an opponent...");
+	gc.text1.clear();
+	gc.text1.pos.assign(c.w/5, c.h_mid);
+	gc.text1.text = "Searching...";
+	gc.text1.update();
 }
 
 function matchmakingComplete()
 {
-	console.log("Match Found !"); // PLACEHOLDER, TODO draw on canvas
+	console.log("Match Found !");
+	gc.text1.clear();
+	gc.text1.pos.assign(c.w/8, c.h_mid);
+	gc.text1.text = "Match Found !";
+	gc.text1.update();
 }
 
 function startGame() {
-	countdown(c.matchStartDelay/1000, resumeGame);
+	gc.text1.pos.assign(c.w_mid, c.h_mid+c.h/4);
+	countdown(c.matchStartDelay/1000, (count: number) => {
+		gc.text1.clear();
+		gc.text1.text = `${count}`;
+		gc.text1.update();
+	}, resumeGame);
 }
 
 function resumeGame()
 {
+	gc.text1.text = "";
 	window.addEventListener('keydown', function (e) {
 		pong.addKey(e.key);
 	});

src/client/utils.ts

@@ -1,14 +1,17 @@
 
 export * from "../shared_js/utils.js"
 
-function countdown(count: number, callback?: () => void)
+function countdown(count: number, callback?: (count: number) => void, endCallback?: () => void)
 {
-	console.log("countdown ", count); // PLACEHOLDER, TODO draw on canvas
+	console.log("countdown ", count);
 	if (count > 0) {
-		setTimeout(countdown, 1000, --count, callback);
+		if (callback) {
+			callback(count);
+		}
+		setTimeout(countdown, 1000, --count, callback, endCallback);
 	}
-	else if (callback) {
-		callback();
+	else if (endCallback) {
+		endCallback();
 	}
 }
 

src/client/ws.ts

@@ -84,17 +84,11 @@ function gameUpdate(data: ev.EventGameUpdate)
 
 	gc.playerLeft.pos.y = data.playerLeft.y;
 	gc.playerRight.pos.y = data.playerRight.y;
-	gc.ball.pos.x = data.ball.x;
-	gc.ball.pos.y = data.ball.y;
+	
+	gc.ball.pos.assign(data.ball.x, data.ball.y);
+	gc.ball.dir.assign(data.ball.dirX, data.ball.dirY);
 	gc.ball.speed = data.ball.speed;
 
-	gc.ball.dir.x = data.ball.dirX;
-	gc.ball.dir.y = data.ball.dirY;
-
-	// ERROR: Uncaught TypeError: gc.ball.pos.assign is not a function
-	// Why ?
-	// gc.ball.pos.assign( data.ball.x, data.ball.y );
-
 	repeatInput(data.lastInputId); // server reconciliation
 }
 
@@ -113,11 +107,15 @@ function scoreUpdate(data: ev.EventScoreUpdate)
 
 function matchEnd(data: ev.EventMatchEnd)
 {
-	console.log("matchEnd");
 	if (data.winner === clientInfo.side) {
-		alert("WIN"); // placeholder TODO draw
+		gc.text1.pos.assign(c.w*0.415, c.h_mid);
+		gc.text1.text = "WIN";
 	}
 	else {
-		alert("LOSE"); // placeholder TODO draw
+		gc.text1.pos.assign(c.w*0.383, c.h_mid);
+		gc.text1.text = "LOSE";
 	}
+	// matchEnded = true;
 }
+
+// export let matchEnded = false;

src/shared_js/class/Rectangle.ts

@@ -7,7 +7,7 @@ class Rectangle implements Component {
 	width: number;
 	height: number;
 	constructor(pos: VectorInteger, width: number, height: number) {
-		this.pos = Object.assign({}, pos);
+		this.pos = new VectorInteger(pos.x, pos.y);
 		this.width = width;
 		this.height = height;
 	}
@@ -49,12 +49,10 @@ class MovingRectangle extends Rectangle implements Moving {
 		this.pos.y += Math.floor(this.dir.y * this.speed * delta);
 	}
 	moveAndCollide(delta: number, colliderArr: Rectangle[]) {
-		let oldPos = Object.assign({}, this.pos);
+		let oldPos = new VectorInteger(this.pos.x, this.pos.y);
 		this.move(delta);
-		if (colliderArr.some(this.collision, this))
-		{
-			this.pos.x = oldPos.x;
-			this.pos.y = oldPos.y;
+		if (colliderArr.some(this.collision, this)) {
+			this.pos = oldPos;
 		}
 	}
 }