authoritative server OK

+ TODO actual matchmaking
2022-11-21 19:46:25 +01:00
parent 48665cfe30
commit add08c216f
20 changed files with 485 additions and 240 deletions
--- a/src/client/class/RectangleClient.ts
+++ b/src/client/class/RectangleClient.ts
@@ -0,0 +1,131 @@
+
+import {Vector, VectorInteger} from "../../shared_js/class/Vector.js";
+import {Component, GraphicComponent, Moving} from "../../shared_js/class/interface.js";
+import { Rectangle, MovingRectangle, Racket, Ball } from "../../shared_js/class/Rectangle.js";
+
+function updateRectangle(this: RectangleClient) {
+	this.ctx.fillStyle = this.color;
+	this.ctx.fillRect(this.pos.x, this.pos.y, this.width, this.height);
+}
+
+function clearRectangle(this: RectangleClient, 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);
+}
+
+class RectangleClient extends Rectangle implements GraphicComponent {
+	ctx: CanvasRenderingContext2D;
+	color: string;
+	update: () => void;
+	clear: (pos?: VectorInteger) => void;
+	constructor(pos: VectorInteger, width: number, height: number,
+			ctx: CanvasRenderingContext2D, color: string)
+	{
+		super(pos, width, height);
+		this.ctx = ctx;
+		this.color = color;
+		this.update = updateRectangle;
+		this.clear = clearRectangle;
+	}
+	// 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);
+	// }
+}
+
+class MovingRectangleClient extends MovingRectangle implements GraphicComponent {
+	ctx: CanvasRenderingContext2D;
+	color: string;
+	update: () => void;
+	clear: (pos?: VectorInteger) => void;
+	constructor(pos: VectorInteger, width: number, height: number, baseSpeed: number,
+			ctx: CanvasRenderingContext2D, color: string)
+	{
+		super(pos, width, height, baseSpeed);
+		this.ctx = ctx;
+		this.color = color;
+		this.update = updateRectangle;
+		this.clear = clearRectangle;
+	}
+}
+
+class RacketClient extends Racket implements GraphicComponent {
+	ctx: CanvasRenderingContext2D;
+	color: string;
+	update: () => void;
+	clear: (pos?: VectorInteger) => void;
+	constructor(pos: VectorInteger, width: number, height: number, baseSpeed: number,
+			ctx: CanvasRenderingContext2D, color: string)
+	{
+		super(pos, width, height, baseSpeed);
+		this.ctx = ctx;
+		this.color = color;
+		this.update = updateRectangle;
+		this.clear = clearRectangle;
+	}
+}
+
+class BallClient extends Ball implements GraphicComponent {
+	ctx: CanvasRenderingContext2D;
+	color: string;
+	update: () => void;
+	clear: (pos?: VectorInteger) => void;
+	constructor(pos: VectorInteger, size: number, baseSpeed: number,
+		ctx: CanvasRenderingContext2D, color: string)
+	{
+		super(pos, size, baseSpeed);
+		this.ctx = ctx;
+		this.color = color;
+		this.update = updateRectangle;
+		this.clear = clearRectangle;
+	}
+}
+
+function updateLine(this: Line) {
+	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;
+	}
+}
+
+class Line extends RectangleClient {
+	gapeCount: number = 0;
+	segmentCount: number;
+	segmentWidth: number;
+	segmentHeight: number;
+	constructor(pos: VectorInteger, width: number, height: number,
+			ctx: CanvasRenderingContext2D, color: string, gapeCount?: number)
+	{
+		super(pos, width, height, ctx, color);
+		this.update = updateLine;
+		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;
+	}
+}
+
+export {RectangleClient, MovingRectangleClient, RacketClient, BallClient, Line}