115 lines
3.9 KiB
TypeScript
115 lines
3.9 KiB
TypeScript
|
|
import * as c from "../constants.js"
|
|
import * as en from "../../shared_js/enums.js"
|
|
import { Vector, VectorInteger } from "../../shared_js/class/Vector.js";
|
|
import { TextElem, TextNumericValue } from "./Text.js";
|
|
import { RectangleClient, MovingRectangleClient, RacketClient, BallClient, Line } from "./RectangleClient.js";
|
|
import { GameComponents } from "../../shared_js/class/GameComponents.js";
|
|
import { MovingRectangle } from "../../shared_js/class/Rectangle.js";
|
|
|
|
class GameComponentsExtensionForClient extends GameComponents {
|
|
wallTop: RectangleClient | MovingRectangleClient;
|
|
wallBottom: RectangleClient | MovingRectangleClient;
|
|
playerLeft: RacketClient;
|
|
playerRight: RacketClient;
|
|
ballsArr: BallClient[];
|
|
constructor(options: en.MatchOptions, ctx: CanvasRenderingContext2D)
|
|
{
|
|
super(options);
|
|
|
|
// Rackets
|
|
const basePL = this.playerLeft;
|
|
const basePR = this.playerRight;
|
|
this.playerLeft = new RacketClient(
|
|
basePL.pos, basePL.width, basePL.height, basePL.baseSpeed,
|
|
ctx, "white");
|
|
this.playerRight = new RacketClient(
|
|
basePR.pos, basePR.width, basePR.height, basePR.baseSpeed,
|
|
ctx, "white");
|
|
|
|
// Balls
|
|
const newBallsArr: BallClient[] = [];
|
|
this.ballsArr.forEach((ball) => {
|
|
newBallsArr.push(new BallClient(ball.pos, ball.width, ball.baseSpeed, ball.speedIncrease,
|
|
ctx, "white")
|
|
);
|
|
});
|
|
this.ballsArr = newBallsArr;
|
|
|
|
// Walls
|
|
if (options & en.MatchOptions.movingWalls)
|
|
{
|
|
const baseWT = <MovingRectangle>this.wallTop;
|
|
const baseWB = <MovingRectangle>this.wallBottom;
|
|
|
|
this.wallTop = new MovingRectangleClient(baseWT.pos, baseWT.width, baseWT.height, baseWT.baseSpeed,
|
|
ctx, "grey");
|
|
(<MovingRectangleClient>this.wallTop).dir.assign(baseWT.dir.x, baseWT.dir.y);
|
|
|
|
this.wallBottom = new MovingRectangleClient(baseWB.pos, baseWB.width, baseWB.height, baseWB.baseSpeed,
|
|
ctx, "grey");
|
|
(<MovingRectangleClient>this.wallBottom).dir.assign(baseWB.dir.x, baseWB.dir.y);
|
|
}
|
|
else
|
|
{
|
|
const baseWT = this.wallTop;
|
|
const baseWB = this.wallBottom;
|
|
this.wallTop = new RectangleClient(baseWT.pos, baseWT.width, baseWT.height,
|
|
ctx, "grey");
|
|
this.wallBottom = new RectangleClient(baseWB.pos, baseWB.width, baseWB.height,
|
|
ctx, "grey");
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
class GameComponentsClient extends GameComponentsExtensionForClient {
|
|
midLine: Line;
|
|
scoreLeft: TextNumericValue;
|
|
scoreRight: TextNumericValue;
|
|
text1: TextElem;
|
|
|
|
w_grid_mid: RectangleClient;
|
|
w_grid_u1: RectangleClient;
|
|
w_grid_d1: RectangleClient;
|
|
h_grid_mid: RectangleClient;
|
|
h_grid_u1: RectangleClient;
|
|
h_grid_d1: RectangleClient;
|
|
constructor(options: en.MatchOptions, ctx: CanvasRenderingContext2D)
|
|
{
|
|
super(options, ctx);
|
|
let pos = new VectorInteger;
|
|
// Scores
|
|
pos.assign(c.w_mid-c.scoreSize*1.6, c.scoreSize*1.5);
|
|
this.scoreLeft = new TextNumericValue(pos, c.scoreSize, ctx, "white");
|
|
pos.assign(c.w_mid+c.scoreSize*1.1, c.scoreSize*1.5);
|
|
this.scoreRight = new TextNumericValue(pos, c.scoreSize, ctx, "white");
|
|
this.scoreLeft.value = 0;
|
|
this.scoreRight.value = 0;
|
|
|
|
// Text
|
|
pos.assign(0, c.h_mid);
|
|
this.text1 = new TextElem(pos, Math.floor(c.w/8), ctx, "white");
|
|
|
|
// Dotted Midline
|
|
pos.assign(c.w_mid-c.midLineSize/2, 0+c.wallSize);
|
|
this.midLine = new Line(pos, c.midLineSize, c.h-c.wallSize*2, ctx, "white", 15);
|
|
|
|
// Grid
|
|
pos.assign(0, c.h_mid);
|
|
this.w_grid_mid = new RectangleClient(pos, c.w, c.gridSize, ctx, "darkgreen");
|
|
pos.assign(0, c.h/4);
|
|
this.w_grid_u1 = new RectangleClient(pos, c.w, c.gridSize, ctx, "darkgreen");
|
|
pos.assign(0, c.h-c.h/4);
|
|
this.w_grid_d1 = new RectangleClient(pos, c.w, c.gridSize, ctx, "darkgreen");
|
|
pos.assign(c.w_mid, 0);
|
|
this.h_grid_mid = new RectangleClient(pos, c.gridSize, c.h, ctx, "darkgreen");
|
|
pos.assign(c.w/4, 0);
|
|
this.h_grid_u1 = new RectangleClient(pos, c.gridSize, c.h, ctx, "darkgreen");
|
|
pos.assign(c.w-c.w/4, 0);
|
|
this.h_grid_d1 = new RectangleClient(pos, c.gridSize, c.h, ctx, "darkgreen");
|
|
}
|
|
}
|
|
|
|
export {GameComponentsClient}
|