From 023b5ed485a07636cfb1f243ba3dd65639c69325 Mon Sep 17 00:00:00 2001 From: LuckyLaszlo Date: Thu, 17 Nov 2022 12:22:57 +0100 Subject: [PATCH] reafactoring --- src/client/constants.ts | 6 ++++ src/client/initGameClientOnly.ts | 47 ++++++++++++-------------------- src/shared_js/class/Rectangle.ts | 15 ++++++++++ src/shared_js/constants.ts | 15 ++++++++-- src/shared_js/initGame.ts | 30 ++++++-------------- 5 files changed, 61 insertions(+), 52 deletions(-) diff --git a/src/client/constants.ts b/src/client/constants.ts index 914fa4c9..b4aae131 100644 --- a/src/client/constants.ts +++ b/src/client/constants.ts @@ -1 +1,7 @@ + +import {w} from "../shared_js/constants.js" export * from "../shared_js/constants.js" + +export const midLineSize = Math.floor(w/150); +export const scoreSize = Math.floor(w/16); +export const gridSize = Math.floor(w/500); diff --git a/src/client/initGameClientOnly.ts b/src/client/initGameClientOnly.ts index 2751ed52..160210bd 100644 --- a/src/client/initGameClientOnly.ts +++ b/src/client/initGameClientOnly.ts @@ -17,43 +17,32 @@ export let h_grid_d1: Rectangle; function initGameClientOnly(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 midLineSize = Math.floor(w/150); - const scoreSize = Math.floor(w/16); - const gridSize = Math.floor(w/500); - - const wallSize = Math.floor(w/100); - let pos = new VectorInteger; // Scores - pos.assign(w_mid-scoreSize*1.6, scoreSize*1.5); - score1 = new TextNumericValue(ctx, pos, "white", scoreSize); - pos.assign(w_mid+scoreSize*1.1, scoreSize*1.5); - score2 = new TextNumericValue(ctx, pos, "white", scoreSize); + pos.assign(c.w_mid-c.scoreSize*1.6, c.scoreSize*1.5); + score1 = new TextNumericValue(ctx, pos, "white", c.scoreSize); + pos.assign(c.w_mid+c.scoreSize*1.1, c.scoreSize*1.5); + score2 = new TextNumericValue(ctx, pos, "white", c.scoreSize); score1.value = 0; score2.value = 0; // Dotted Midline - pos.assign(w_mid-midLineSize/2, 0+wallSize); - midLine = new Line(ctx, pos, "white", midLineSize, h-wallSize*2, 15); + pos.assign(c.w_mid-c.midLineSize/2, 0+c.wallSize); + midLine = new Line(ctx, pos, "white", c.midLineSize, c.h-c.wallSize*2, 15); // Grid - pos.assign(0, h_mid); - w_grid_mid = new Rectangle(ctx, pos, "darkgreen", w, gridSize); - pos.assign(0, h/4); - w_grid_u1 = new Rectangle(ctx, pos, "darkgreen", w, gridSize); - pos.assign(0, h-h/4); - w_grid_d1 = new Rectangle(ctx, pos, "darkgreen", w, gridSize); - pos.assign(w_mid, 0); - h_grid_mid = new Rectangle(ctx, pos, "darkgreen", gridSize, h); - pos.assign(w/4, 0); - h_grid_u1 = new Rectangle(ctx, pos, "darkgreen", gridSize, h); - pos.assign(w-w/4, 0); - h_grid_d1 = new Rectangle(ctx, pos, "darkgreen", gridSize, h); + pos.assign(0, c.h_mid); + w_grid_mid = new Rectangle(ctx, pos, "darkgreen", c.w, c.gridSize); + pos.assign(0, c.h/4); + w_grid_u1 = new Rectangle(ctx, pos, "darkgreen", c.w, c.gridSize); + pos.assign(0, c.h-c.h/4); + w_grid_d1 = new Rectangle(ctx, pos, "darkgreen", c.w, c.gridSize); + pos.assign(c.w_mid, 0); + h_grid_mid = new Rectangle(ctx, pos, "darkgreen", c.gridSize, c.h); + pos.assign(c.w/4, 0); + h_grid_u1 = new Rectangle(ctx, pos, "darkgreen", c.gridSize, c.h); + pos.assign(c.w-c.w/4, 0); + h_grid_d1 = new Rectangle(ctx, pos, "darkgreen", c.gridSize, c.h); } export {initGameClientOnly} diff --git a/src/shared_js/class/Rectangle.ts b/src/shared_js/class/Rectangle.ts index 2fe93e90..9087c5a7 100644 --- a/src/shared_js/class/Rectangle.ts +++ b/src/shared_js/class/Rectangle.ts @@ -155,3 +155,18 @@ class Line extends Rectangle { } export {Rectangle, MovingRectangle, Player, Ball, Line} + +// How to handle const export in initGame ? +// example for class Rectangle +/* constructor(ctx?: CanvasRenderingContext2D, pos?: VectorInteger, color?: string, width?: number, height?: number) { + if (ctx && pos && color && width && height) + this.init(ctx, pos, color, width, height); +} +// constructor() {} +init(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; +} */ diff --git a/src/shared_js/constants.ts b/src/shared_js/constants.ts index a62a3b02..b8602bcc 100644 --- a/src/shared_js/constants.ts +++ b/src/shared_js/constants.ts @@ -1,4 +1,15 @@ -export const CanvasWidth = 1500; +export const CanvasWidth = 1500; +export const CanvasRatio = 1.66666; /* ratio 5/3 (1.66) */ -export const CanvasRatio = 1.66666; + +export const w = CanvasWidth; +export const h = CanvasWidth / CanvasRatio; +export const w_mid = Math.floor(w/2); +export const h_mid = Math.floor(h/2); +export const pw = Math.floor(w/50); +export const ph = pw*5; +export const ballSize = pw; +export const wallSize = Math.floor(w/100); +export const playerSpeed = Math.floor(w/1.5); // pixel per second +export const ballSpeed = Math.floor(w/1.5); // pixel per second diff --git a/src/shared_js/initGame.ts b/src/shared_js/initGame.ts index c2158c74..9ef5dac1 100644 --- a/src/shared_js/initGame.ts +++ b/src/shared_js/initGame.ts @@ -11,32 +11,20 @@ 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); + wall_top = new Rectangle(ctx, pos, "grey", c.w, c.wallSize); + pos.assign(0, c.h-c.wallSize); + wall_bottom = new Rectangle(ctx, pos, "grey", c.w, c.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(0+c.pw, c.h_mid-c.ph/2); + player1 = new Player(ctx, pos, "white", c.pw, c.ph, c.playerSpeed); + pos.assign(c.w-c.pw-c.pw, c.h_mid-c.ph/2); + player2 = new Player(ctx, pos, "white", c.pw, c.ph, c.playerSpeed); - pos.assign(w_mid-ballSize/2, h_mid-ballSize/2); - ball = new Ball(ctx, pos, "white", ballSize, ballSpeed); + pos.assign(c.w_mid-c.ballSize/2, c.h_mid-c.ballSize/2); + ball = new Ball(ctx, pos, "white", c.ballSize, c.ballSpeed); ball.dir.assign(-0.8, +0.2); }