From af3d885f123b8e2778664ae1b4fcfa61d9df14d6 Mon Sep 17 00:00:00 2001
From: LuckyLaszlo <luke.perrey.dev@gmail.com>
Date: Sat, 22 Oct 2022 09:47:25 +0200
Subject: [PATCH] newRound() and Game Over + Bit Font for score + improved API
 for move and collision + miscs

---
 memo.txt         |  12 ++
 src/Bit5x3.woff  | Bin 0 -> 3124 bytes
 src/Bit5x3.woff2 | Bin 0 -> 2012 bytes
 src/pong.html    |   8 ++
 src/pong.ts      | 367 +++++++++++++++++++++++++++++++++--------------
 5 files changed, 281 insertions(+), 106 deletions(-)
 create mode 100644 memo.txt
 create mode 100644 src/Bit5x3.woff
 create mode 100644 src/Bit5x3.woff2

diff --git a/memo.txt b/memo.txt
new file mode 100644
index 00000000..a190449c
--- /dev/null
+++ b/memo.txt
@@ -0,0 +1,12 @@
+- ball speed up
+- on newRound()
+	- speed reset
+- ball direction based on player hit location
+
+---
+
+- node.js server for http access (and javascipt modules files split)
+
+---
+
+- gamesocket with node.js
diff --git a/src/Bit5x3.woff b/src/Bit5x3.woff
new file mode 100644
index 0000000000000000000000000000000000000000..72c8b2934a6ab203b58e8fe6f4d7134924143c89
GIT binary patch
literal 3124
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
Lz@`}kCGr0P>KTfy

literal 0
HcmV?d00001

diff --git a/src/Bit5x3.woff2 b/src/Bit5x3.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..27d538bf85567b90aa23deb22a234ee8c6c5b80d
GIT binary patch
literal 2012
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

literal 0
HcmV?d00001

diff --git a/src/pong.html b/src/pong.html
index 14a78226..4f641946 100644
--- a/src/pong.html
+++ b/src/pong.html
@@ -3,6 +3,14 @@
 <head>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 	<style>
+		@font-face {
+			font-family: 'Bit5x3';
+			src: url('Bit5x3.woff2') format('woff2'),
+				url('Bit5x3.woff') format('woff');
+			font-weight: normal;
+			font-style: normal;
+			font-display: swap;
+		}
 		body {
 			margin: 0;
 			background-color: #222425;
diff --git a/src/pong.ts b/src/pong.ts
index b843f5fa..dea8dd34 100644
--- a/src/pong.ts
+++ b/src/pong.ts
@@ -3,6 +3,7 @@
 // @ts-check
 
 let gridDisplay = false;
+let ballInPlay = true;
 
 let pong: gameArea;
 
@@ -11,8 +12,8 @@ let wall_bottom: Rectangle;
 let player1: Player;
 let player2: Player;
 let ball: Ball;
-let score1: TextElem;
-let score2: TextElem;
+let score1: TextNumericValue;
+let score2: TextNumericValue;
 let midLine: Line;
 
 let w_grid_mid: Rectangle;
@@ -29,46 +30,64 @@ function startGame()
 // Const
 	const	w = pong.canvas.width;
 	const	h = pong.canvas.height;
-	const	w_mid = w/2;
-	const	h_mid = h/2;
-	const	pw = w/50;
+	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	ball_size = pw; // const ball_size = w/50;
-	const	score_size = w/16;
-	const	midLineSize = w/150;
-	const	wall_size = w/100;
-	const	grid_size = w/500;
-	const	playerSpeed = w/75;
-	const	ballSpeed = w/75;
+	const	ballSize = pw;
+	const	scoreSize = Math.floor(w/16);
+	const	midLineSize = Math.floor(w/150);
+	const	wallSize = Math.floor(w/100);
+	const	gridSize = Math.floor(w/500);
+	const	playerSpeed = Math.floor(w/75);
+	const	ballSpeed = Math.floor(w/75);
 
+	let pos = new VectorInteger();
 // Component
-	wall_top = new Rectangle({x: 0, y: 0}, "grey", w, wall_size);
-	wall_bottom = new Rectangle({x: 0, y: h-wall_size}, "grey", w, wall_size);
-
-	player1 = new Player({x: 0+pw, y: h_mid-ph/2}, "white", pw, ph);
-	player2 = new Player({x: w-pw-pw, y: h_mid-ph/2}, "white", pw, ph);
+	pos.x = 0; pos.y = 0;
+	wall_top = new Rectangle(pos, "grey", w, wallSize);
+	pos.x = 0; pos.y = h-wallSize;
+	wall_bottom = new Rectangle(pos, "grey", w, wallSize);
+	
+	pos.x = 0+pw; pos.y = h_mid-ph/2;
+	player1 = new Player(pos, "white", pw, ph);
+	pos.x = w-pw-pw; pos.y = h_mid-ph/2;
+	player2 = new Player(pos, "white", pw, ph);
 	player1.speed = playerSpeed;
 	player2.speed = playerSpeed;
-
-	ball = new Ball({x: w_mid-ball_size/2, y: h_mid-ball_size/2}, "white", ball_size);
+	
+	pos.x = w_mid-ballSize/2; pos.y = h_mid-ballSize/2;
+	ball = new Ball(pos, "white", ballSize);
 	ball.speed = ballSpeed;
 	ball.dir.x = -0.8;
 	ball.dir.y = +0.2;
+	
+	pos.x = w_mid-w/8; pos.y = w/12;
+	score1 = new TextNumericValue(pos, "white", scoreSize);
+	pos.x = w_mid+w/8-scoreSize/2; pos.y = w/12;
+	score2 = new TextNumericValue(pos, "white", scoreSize);
+	score1.value = 0;
+	score2.value = 0;
+	
+	pos.x = w_mid-midLineSize/2; pos.y = 0+wallSize;
+	midLine = new Line(pos, "white", midLineSize, h-wallSize*2, 15);
+	
+	// Grid
+	pos.x = 0; pos.y = h_mid;
+	w_grid_mid = new Rectangle(pos, "darkgreen", w, gridSize);
+	pos.x = 0; pos.y = h/4;
+	w_grid_u1 = new Rectangle(pos, "darkgreen", w, gridSize);
+	pos.x = 0; pos.y = h-h/4;
+	w_grid_d1 = new Rectangle(pos, "darkgreen", w, gridSize);
+	pos.x = w_mid; pos.y = 0;
+	h_grid_mid = new Rectangle(pos, "darkgreen", gridSize, h);
+	pos.x = w/4; pos.y = 0;
+	h_grid_u1 = new Rectangle(pos, "darkgreen", gridSize, h);
+	pos.x = w-w/4; pos.y = 0;
+	h_grid_d1 = new Rectangle(pos, "darkgreen", gridSize, h);
 
-	score1 = new TextElem({x: w_mid-w/8, y: w/12}, "white", score_size+"px");
-	score1.text = "0";
-	score2 = new TextElem({x: w_mid+w/8-score_size/2, y: w/12}, "white", score_size+"px");
-	score2.text = "0";
-
-	midLine = new Line({x: w_mid-midLineSize/2, y: 0+wall_size}, "white", midLineSize, h-wall_size*2, 15);
-
-// Grid
-	w_grid_mid = new Rectangle({x: 0, y: h_mid}, "darkgreen", w, grid_size);
-	w_grid_u1 = new Rectangle({x: 0, y: h/4}, "darkgreen", w, grid_size);
-	w_grid_d1 = new Rectangle({x: 0, y: h-h/4}, "darkgreen", w, grid_size);
-	h_grid_mid = new Rectangle({x: w_mid, y: 0}, "darkgreen", grid_size, h);
-	h_grid_u1 = new Rectangle({x: w/4, y: 0}, "darkgreen", grid_size, h);
-	h_grid_d1 = new Rectangle({x: w-w/4, y: 0}, "darkgreen", grid_size, h);
+	score1.update(); // first Text draw init the custom font (graphic leftover ortherwise) (a better solution ?)
+	drawInit();
 
 	pong.start();
 }
@@ -110,7 +129,6 @@ class gameArea {
 			pong.keys.splice(i, 1);
 	}
 	clear() {
-		// @ts-ignore
 		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
 	}
 	stop() {
@@ -118,48 +136,84 @@ class gameArea {
 	}
 }
 
-// Bad drawLine, TODO make a drawLine with fillRect()
-// function drawLine(start, end, color, pattern)
-// {
-// 	let ctx = pong.ctx;
-// 	ctx.beginPath();
-// 	ctx.setLineDash(pattern);
-// 	ctx.moveTo(start[0], start[1]);
-// 	ctx.lineTo(end[0], end[1]);
-// 	ctx.strokeStyle = color;
-// 	ctx.stroke();
-// }
-
 function gameLoop()
 {
+	/*
+		// I try to clear only what need to be update.
+		// Will revert to clear() all if not satisfactory.
+		pong.clear();
+	*/
 	handleInput();
 
-	ball.move();
-	if (ball.collision(wall_top) || ball.collision(wall_bottom))
-		ball.bounce();
-	else if (ball.collision(player1))
-		ball.bounce(player1);
-	else if (ball.collision(player2))
-		ball.bounce(player2);
-
+	if (ballInPlay)
+	{
+		ball.moveAndBounce([wall_top, wall_bottom, player1, player2]);
+		if (ball.pos.x > pong.canvas.width) {
+			ballInPlay = false;
+			score1.clear();
+			++score1.value;
+			setTimeout(newRound, 1000);
+		}
+		else if (ball.pos.x < 0 - ball.width) {
+			ballInPlay = false;
+			score2.clear();
+			++score2.value;
+			setTimeout(newRound, 1000);
+		}
+	}
+	
 	draw();
 }
 
+function newRound()
+{
+	// https://fr.wikipedia.org/wiki/Tennis_de_table#Nombre_de_manches
+	if (score1.value >= 11
+	|| score2.value >= 11)
+	{
+		if (Math.abs(score1.value - score2.value) >= 2)
+		{
+			if (score1.value > score2.value) {
+				alert("Player 1 WIN");
+			}
+			else {
+				alert("Player 2 WIN");
+			}
+			return;
+		}
+	}
+	ballInPlay = true;
+	ball.pos.x = pong.canvas.width/2;
+	ball.pos.y = pong.canvas.height/4 + Math.floor(random() * pong.canvas.height/2);
+}
+
+function random(min: number = 0, max: number = 1) {
+	return Math.random() * (max - min) + min;
+}
+
 function draw()
 {
-	pong.clear();
-
-	if (gridDisplay)
+	if (gridDisplay) {
 		drawGrid();
+	}
+	midLine.update();
+	score1.update();
+	score2.update();
+}
 
+function drawStatic()
+{
 	wall_top.update();
 	wall_bottom.update();
 	midLine.update();
+}
+
+function drawInit()
+{
+	pong.clear();
+	drawStatic();
 	player1.update();
 	player2.update();
-	ball.update();
-	score1.update();
-	score2.update();
 }
 
 function drawGrid()
@@ -181,6 +235,11 @@ function handleInput()
 
 	if (keys.indexOf("g") != -1)
 	{
+		if (gridDisplay)
+		{
+			pong.clear();
+			drawStatic();
+		}
 		gridDisplay = !gridDisplay;
 		pong.deleteKey("g");
 	}
@@ -190,28 +249,22 @@ function handleInput()
 function playerMove(keys: string[])
 {
 	player1.dir.y = 0;
-	if (keys.indexOf("w") != -1)
-		{ player1.dir.y += -1; }
-	if (keys.indexOf("s") != -1)
-		{ player1.dir.y += 1; }
-	player1.move();
-	if (player1.collision(wall_top) || player1.collision(wall_bottom))
-	{
-		player1.dir.y = player1.dir.y * -1;
-		player1.move();
+	if (keys.indexOf("w") != -1) {
+		player1.dir.y += -1;
 	}
+	if (keys.indexOf("s") != -1) {
+		player1.dir.y += 1;
+	}
+	player1.moveAndCollide([wall_top, wall_bottom]);
 
 	player2.dir.y = 0;
-	if (keys.indexOf("ArrowUp".toLowerCase()) != -1)
-		{ player2.dir.y += -1; }
-	if (keys.indexOf("ArrowDown".toLowerCase()) != -1)
-		{ player2.dir.y += 1; }
-	player2.move();
-	if (player2.collision(wall_top) || player2.collision(wall_bottom))
-	{
-		player2.dir.y = player2.dir.y * -1;
-		player2.move();
+	if (keys.indexOf("ArrowUp".toLowerCase()) != -1) {
+		player2.dir.y += -1;
 	}
+	if (keys.indexOf("ArrowDown".toLowerCase()) != -1) {
+		player2.dir.y += 1;
+	}
+	player2.moveAndCollide([wall_top, wall_bottom]);
 }
 
 
@@ -219,27 +272,66 @@ function playerMove(keys: string[])
 /////////////////////////////////////////////////////////////////////////////
 // class.js
 
-type Vector = {
+// type Vector = {
+// 	x: number;
+// 	y: number;
+// }
+
+class Vector {
 	x: number;
 	y: number;
+	constructor(x: number = 0, y: number = 0) {
+		this.x = x;
+		this.y = y;
+	}
 }
 
+class VectorInteger extends Vector {
+	// PLACEHOLDER
+	// VectorInteger with set/get dont work (No draw on the screen). Why ?
+}
+
+/* 
+class VectorInteger {
+	// private _x: number = 0;
+	// private _y: number = 0;
+	// constructor(x: number = 0, y: number = 0) {
+	// 	this._x = x;
+	// 	this._y = y;
+	// }
+	// get x(): number {
+	// 	return this._x;
+	// }
+	// set x(v: number) {
+	// 	// this._x = Math.floor(v);
+	// 	this._x = v;
+	// }
+	// get y(): number {
+	// 	return this._y;
+	// }
+	// set y(v: number) {
+	// 	// this._y = Math.floor(v);
+	// 	this._y = v;
+	// }
+}
+*/
 
 interface Component {
-	pos: Vector;
+	pos: VectorInteger;
 	color: string;
-	// ctx: CanvasRenderingContext2D;
+	// ctx: CanvasRenderingContext2D; // TODO: reference in place of global 'pong.ctx' call
 	update(): void;
+	clear(): void;
 }
 
 
 class Rectangle implements Component {
-	pos: Vector;
+	pos: VectorInteger;
 	color: string;
 	width: number;
 	height: number;
-	constructor(pos: Vector, color: string, width: number, height: number) {
-		this.pos = pos;
+	constructor(pos: VectorInteger, color: string, width: number, height: number) {
+		this.pos = Object.assign({}, pos);
 		this.color = color;
 		this.width = width;
 		this.height = height;
@@ -249,6 +341,13 @@ class Rectangle implements Component {
 		ctx.fillStyle = this.color;
 		ctx.fillRect(this.pos.x, this.pos.y, this.width, this.height);
 	}
+	clear(pos?: VectorInteger) {
+		let ctx = pong.ctx;
+		if (pos)
+			ctx.clearRect(pos.x, pos.y, this.width, this.height);
+		else
+			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);
@@ -277,35 +376,65 @@ interface Moving {
 }
 
 
-class Player extends Rectangle implements Moving {
+class MovingRectangle extends Rectangle implements Moving {
 	dir: Vector = {x: 0.0, y: 0.0};
 	speed: number = 1;
-	constructor(pos: Vector, color: string, width: number, height: number) {
+	constructor(pos: VectorInteger, color: string, width: number, height: number) {
 		super(pos, color, width, height);
 	}
 	move() {
 		this.pos.x += this.dir.x * this.speed;
 		this.pos.y += this.dir.y * this.speed;
 	}
+	moveAndCollide(colliderArr: Rectangle[]) {
+		let oldPos = Object.assign({}, this.pos);
+		this.move();
+		if (colliderArr.some(this.collision, this))
+		{
+			this.pos.x = oldPos.x;
+			this.pos.y = oldPos.y;
+		}
+		else
+		{
+			this.clear(oldPos);
+			this.update();
+		}
+	}
 }
 
 
-class Ball extends Rectangle implements Moving {
-	dir: Vector = {x: 0.0, y: 0.0};
-	speed: number = 1;
-	constructor(pos: Vector, color: string, size: number) {
+class Player extends MovingRectangle {
+	constructor(pos: VectorInteger, color: string, width: number, height: number) {
+		super(pos, color, width, height);
+	}
+}
+
+
+class Ball extends MovingRectangle {
+	constructor(pos: VectorInteger, color: string, size: number) {
 		super(pos, color, size, size);
 	}
-	move() {
-		this.pos.x += this.dir.x * this.speed;
-		this.pos.y += this.dir.y * this.speed;
-	}
 	bounce(collider?: Rectangle) {
-		if (collider instanceof Player)
+		/* Could be more generic, but testing only player is enough,
+		because in Pong collider can only be Player or Wall. */
+		if (collider instanceof Player) {
 			this._bouncePlayer(collider);
-		else // Could be more generic, but it's OK, because in Pong collider can only be Player or Wall.
+		}
+		else {
 			this._bounceWall();
-
+		}
+	}
+	moveAndBounce(colliderArr: Rectangle[]) {
+		let oldPos = Object.assign({}, this.pos);
+		this.move();
+		let i = colliderArr.findIndex(this.collision, this);
+		if (i != -1)
+		{
+			this.bounce(colliderArr[i]);
+			this.move();
+		}
+		this.clear(oldPos);
+		this.update();
 	}
 	private _bounceWall() { // Should be enough for Wall
 		ball.dir.y = ball.dir.y * -1;
@@ -318,24 +447,50 @@ class Ball extends Rectangle implements Moving {
 
 // conflict with Text
 class TextElem implements Component {
-	pos: Vector;
+	pos: VectorInteger;
 	color: string;
-	size: string;
-	font: string = "Consolas";
+	size: number;
+	font: string;
 	text: string = "";
-	constructor(pos: Vector, color: string, size: string, font?: string) {
-		this.pos = pos;
+	constructor(pos: VectorInteger, color: string, size: number, font: string = "Bit5x3") {
+		this.pos = Object.assign({}, pos);
 		this.color = color;
 		this.size = size;
-		if (font)
-			this.font = font;
+		this.font = font;
 	}
 	update() {
 		let ctx = pong.ctx;
-		ctx.font = this.size + " " + this.font;
+		ctx.font = this.size + "px" + " " + this.font;
 		ctx.fillStyle = this.color;
 		ctx.fillText(this.text, this.pos.x, this.pos.y);
 	}
+	clear() {
+		// clear no very accurate for Text 
+		// https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics
+		let ctx = pong.ctx;
+		let textMetric = ctx.measureText(this.text);
+		// console.log("textMetric.width = "+textMetric.width);
+		// console.log("size = "+this.size);
+		// console.log("x = "+this.pos.x);
+		// console.log("y = "+this.pos.y);
+		ctx.clearRect(this.pos.x - 1, this.pos.y-this.size + 1, textMetric.width, this.size);
+		// +1 and -1 because float imprecision (and Math.floor() with VectorInteger dont work for the moment)
+		// (or maybe its textMetric imprecision ?)
+	}
+}
+
+class TextNumericValue extends TextElem {
+	private _value: number = 0;
+	constructor(pos: VectorInteger, color: string, size: number, font?: string) {
+		super(pos, color, size, font);
+	}
+	get value() {
+		return this._value;
+	}
+	set value(v: number) {
+		this._value = v;
+		this.text = v.toString();
+	}
 }
 
 
@@ -344,7 +499,7 @@ class Line extends Rectangle {
 	segmentCount: number;
 	segmentWidth: number;
 	segmentHeight: number;
-	constructor(pos: Vector, color: string, width: number, height: number, gapeCount?: number) {
+	constructor(pos: VectorInteger, color: string, width: number, height: number, gapeCount?: number) {
 		super(pos, color, width, height);
 		if (gapeCount)
 			this.gapeCount = gapeCount;