From 3f6d7c3afcf9f603303ba392040c54d07d9708dc Mon Sep 17 00:00:00 2001
From: LuckyLaszlo <luke.perrey.dev@gmail.com>
Date: Thu, 20 Oct 2022 05:00:14 +0200
Subject: [PATCH] added midLine (net)

---
 src/pong.ts | 83 ++++++++++++++++++++++++++++++++---------------------
 1 file changed, 50 insertions(+), 33 deletions(-)

diff --git a/src/pong.ts b/src/pong.ts
index 5f0bfd70..b843f5fa 100644
--- a/src/pong.ts
+++ b/src/pong.ts
@@ -13,6 +13,7 @@ let player2: Player;
 let ball: Ball;
 let score1: TextElem;
 let score2: TextElem;
+let midLine: Line;
 
 let w_grid_mid: Rectangle;
 let w_grid_u1: Rectangle;
@@ -25,16 +26,18 @@ function startGame()
 {
 	pong = new gameArea();
 	
-	// Const
-	let	w = pong.canvas.width;
-	let	h = pong.canvas.height;
-	let	w_mid = w/2;
-	let	h_mid = h/2;
+// 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	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;
 
@@ -42,8 +45,8 @@ function startGame()
 	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+w/50, y: h_mid-ph/2}, "white", pw, ph);
-	player2 = new Player({x: w-w/50-pw, y: h_mid-ph/2}, "white", pw, ph);
+	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);
 	player1.speed = playerSpeed;
 	player2.speed = playerSpeed;
 
@@ -57,17 +60,15 @@ function startGame()
 	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
-	const grid_size = w/500;
 	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);
-	
-// dashed line TODO
-	// midLine = new component(grid_size, h, "white", w_mid, 0);
 
 	pong.start();
 }
@@ -150,11 +151,10 @@ function draw()
 
 	if (gridDisplay)
 		drawGrid();
-	
-	// drawLine([w_mid, 0], [w_mid, h], "white", [10, 10]); // bad
-	
+
 	wall_top.update();
 	wall_bottom.update();
+	midLine.update();
 	player1.update();
 	player2.update();
 	ball.update();
@@ -338,22 +338,39 @@ class TextElem implements Component {
 	}
 }
 
-// class line {
-// 	width: number;
-// 	height: number;
-// 	color: string;
-// 	x: number;
-// 	y: number;
-// 	constructor(width: number, height: number, color: string, x: number, y: number) {
-// 		this.width = width;
-// 		this.height = height;
-// 		this.color = color;
-// 		this.x = x;
-// 		this.y = y;
-// 	}
-// 	update() {
-// 		let ctx = pong.ctx;
-// 		ctx.fillStyle = this.color;
-// 		ctx.fillRect(this.x, this.y, this.width, this.height);
-// 	}
-// }
+
+class Line extends Rectangle {
+	gapeCount: number = 0;
+	segmentCount: number;
+	segmentWidth: number;
+	segmentHeight: number;
+	constructor(pos: Vector, color: string, width: number, height: number, gapeCount?: number) {
+		super(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() {
+		let ctx = pong.ctx;
+		ctx.fillStyle = this.color;
+		let pos: Vector = {x: 0, y: 0};
+		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;
+			ctx.fillRect(pos.x, pos.y, this.segmentWidth, this.segmentHeight);
+			i += 2;
+		}
+	}	
+}