refactoring

+ wip input to server

src/shared_js/class/Event.ts

@@ -0,0 +1,37 @@
+
+/* Server */
+enum EventTypes {
+	gameUpdate = 1,
+	start,
+	pause,
+	resume
+}
+
+interface EventData {
+	type: EventTypes;
+}
+
+class EventGameUpdate implements EventData {
+	type: EventTypes = EventTypes.gameUpdate;
+	player1 = {y: 0};
+	player2 = {y: 0};
+	ball = {x: 0, y: 0, speed: 0};
+}
+
+/* Client */
+enum InputEnum {
+	up = 1,
+	down
+}
+
+class EventInput {
+	input: InputEnum;
+	constructor(input: InputEnum = 0) {
+		this.input = input;
+	}
+}
+
+export {
+	EventTypes, EventData, EventGameUpdate,
+	InputEnum, EventInput
+}

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}

src/shared_js/class/Vector.ts

@@ -0,0 +1,45 @@
+
+class Vector {
+	x: number;
+	y: number;
+	constructor(x: number = 0, y: number = 0) {
+		this.x = x;
+		this.y = y;
+	}
+	assign(x: number, y: number) {
+		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;
+	// }
+}
+*/
+
+export {Vector, VectorInteger}

src/shared_js/class/interface.ts

@@ -0,0 +1,18 @@
+
+import {Vector, VectorInteger} from "./Vector.js";
+
+interface Component {
+	pos: VectorInteger;
+	color: string;
+	ctx: CanvasRenderingContext2D;
+	update(): void;
+	clear(): void;
+}
+
+interface Moving {
+	dir: Vector;
+	speed: number; // pixel per second
+	move(delta: number): void;
+}
+
+export {Component, Moving}

src/shared_js/constants.ts

@@ -0,0 +1,4 @@
+
+export const CanvasWidth = 1500;
+/* ratio 5/3 (1.66) */
+export const CanvasRatio = 1.66666; 

src/shared_js/initGame.ts

@@ -0,0 +1,43 @@
+
+import * as c from "./constants.js"
+import {Vector, VectorInteger} from "./class/Vector.js";
+import {Rectangle, MovingRectangle, Player, Ball, Line} from "./class/Rectangle.js";
+
+export let wall_top: Rectangle;
+export let wall_bottom: Rectangle;
+export let player1: Player;
+export let player2: Player;
+export let ball: Ball;
+
+function initGame(ctx: CanvasRenderingContext2D)
+{
+	// Const (could maybe be in constants.ts ?)
+	const	w = c.CanvasWidth;
+	const	h = c.CanvasWidth / c.CanvasRatio;
+	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	ballSize = pw;
+	const	wallSize = Math.floor(w/100);
+	const	playerSpeed = Math.floor(w/1.5); // pixel per second
+	const	ballSpeed = Math.floor(w/1.5); // pixel per second
+
+	let pos = new VectorInteger;
+	// Component
+	pos.assign(0, 0);
+	wall_top = new Rectangle(ctx, pos, "grey", w, wallSize);
+	pos.assign(0, h-wallSize);
+	wall_bottom = new Rectangle(ctx, pos, "grey", w, wallSize);
+
+	pos.assign(0+pw, h_mid-ph/2);
+	player1 = new Player(ctx, pos, "white", pw, ph, playerSpeed);
+	pos.assign(w-pw-pw, h_mid-ph/2);
+	player2 = new Player(ctx, pos, "white", pw, ph, playerSpeed);
+
+	pos.assign(w_mid-ballSize/2, h_mid-ballSize/2);
+	ball = new Ball(ctx, pos, "white", ballSize, ballSpeed);
+	ball.dir.assign(-0.8, +0.2);
+}
+
+export {initGame}

src/shared_js/utils.ts

@@ -0,0 +1,10 @@
+
+function random(min: number = 0, max: number = 1) {
+	return Math.random() * (max - min) + min;
+}
+
+function sleep (ms: number) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export {random, sleep}