refactoring

+ wip input to server

src/shared_js/class/Rectangle.ts

@@ -0,0 +1,157 @@
+
+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;
+		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);
+		var mytop = this.pos.y;
+		var mybottom = this.pos.y + (this.height);
+		var otherleft = collider.pos.x;
+		var otherright = collider.pos.x + (collider.width);
+		var othertop = collider.pos.y;
+		var otherbottom = collider.pos.y + (collider.height);
+		if ((mybottom < othertop)
+		|| (mytop > otherbottom)
+		|| (myright < otherleft)
+		|| (myleft > otherright)) {
+			return false;
+		}
+		else
+			return true;
+	}
+}
+
+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);
+		this.baseSpeed = baseSpeed;
+		this.speed = baseSpeed;
+	}
+	move(delta: number) { // Math.floor WIP until VectorInteger debug
+		// console.log("delta: "+ delta);
+		// console.log("speed: "+ this.speed);
+		// console.log("speed*delta: "+ this.speed * delta);
+		this.pos.x += Math.floor(this.dir.x * this.speed * delta);
+		this.pos.y += Math.floor(this.dir.y * this.speed * delta);
+	}
+	moveAndCollide(delta: number, colliderArr: Rectangle[]) {
+		let oldPos = Object.assign({}, this.pos);
+		this.move(delta);
+		if (colliderArr.some(this.collision, this))
+		{
+			this.pos.x = oldPos.x;
+			this.pos.y = oldPos.y;
+		}
+		else
+		{
+			this.clear(oldPos);
+			this.update();
+		}
+	}
+}
+
+class Player extends MovingRectangle {
+	constructor(ctx: CanvasRenderingContext2D, pos: VectorInteger, color: string, width: number, height: number, baseSpeed: number) {
+		super(ctx, pos, color, 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);
+	}
+	bounce(collider?: Rectangle) {
+		/* 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 {
+			this._bounceWall();
+		}
+	}
+	moveAndBounce(delta: number, colliderArr: Rectangle[]) {
+		let oldPos = Object.assign({}, this.pos);
+		this.move(delta);
+		let i = colliderArr.findIndex(this.collision, this);
+		if (i != -1)
+		{
+			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;
+	}
+	private _bouncePlayer(collider: Player) { // WIP
+		// Bounce for Player need to be more complexe than this
+		this.speed += this.baseSpeed/20;
+		this.dir.x = this.dir.x * -1;
+	}
+}
+
+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, Player, Ball, Line}