From 6fb1470dbb5e1a3e6e37f46313c300cf2c3b3f8a Mon Sep 17 00:00:00 2001 From: LuckyLaszlo Date: Thu, 17 Nov 2022 11:12:32 +0100 Subject: [PATCH] refactoring + wip input to server --- make.sh | 6 ++ src/client/class/GameArea.ts | 8 +- src/client/class/Text.ts | 4 +- src/client/constants.ts | 1 + src/client/draw.ts | 2 +- src/client/gameLoop.ts | 4 +- src/client/global.ts | 3 + src/client/handleInput.ts | 8 +- src/client/initGameClientOnly.ts | 59 +++++++++++ src/client/pong.ts | 104 ++----------------- src/client/ws.ts | 21 +--- src/server/server.ts | 24 ++++- src/shared_js/class/Event.ts | 37 +++++++ src/{client => shared_js}/class/Rectangle.ts | 0 src/{client => shared_js}/class/Vector.ts | 0 src/{client => shared_js}/class/interface.ts | 0 src/shared_js/constants.ts | 4 + src/shared_js/initGame.ts | 43 ++++++++ src/{client => shared_js}/utils.ts | 0 19 files changed, 197 insertions(+), 131 deletions(-) create mode 100644 src/client/constants.ts create mode 100644 src/client/global.ts create mode 100644 src/client/initGameClientOnly.ts create mode 100644 src/shared_js/class/Event.ts rename src/{client => shared_js}/class/Rectangle.ts (100%) rename src/{client => shared_js}/class/Vector.ts (100%) rename src/{client => shared_js}/class/interface.ts (100%) create mode 100644 src/shared_js/constants.ts create mode 100644 src/shared_js/initGame.ts rename src/{client => shared_js}/utils.ts (100%) diff --git a/make.sh b/make.sh index 5a4999f6..71ec2fb2 100644 --- a/make.sh +++ b/make.sh @@ -9,3 +9,9 @@ cp ./src/client/*.js ./www/js/ mkdir -p www/js/class cp ./src/client/class/*.js ./www/js/class/ + +mkdir -p www/shared_js/ +cp ./src/shared_js/*.js ./www/shared_js/ + +mkdir -p www/shared_js/class +cp ./src/shared_js/class/*.js ./www/shared_js/class/ diff --git a/src/client/class/GameArea.ts b/src/client/class/GameArea.ts index 8a1e6ce4..6831e8d6 100644 --- a/src/client/class/GameArea.ts +++ b/src/client/class/GameArea.ts @@ -1,4 +1,6 @@ +import * as c from ".././constants.js" + class GameArea { keys: string[]; interval: number = 0; @@ -8,10 +10,8 @@ class GameArea { this.keys = []; this.canvas = document.createElement("canvas"); this.ctx = this.canvas.getContext("2d") as CanvasRenderingContext2D; - /* ratio 5/3 (1.66) */ - const ratio = 1.66666; - this.canvas.width = 1500; - this.canvas.height = this.canvas.width / ratio; + this.canvas.width = c.CanvasWidth; + this.canvas.height = c.CanvasWidth / c.CanvasRatio; let container = document.getElementById("canvas-container"); if (container) container.insertBefore(this.canvas, container.childNodes[0]); diff --git a/src/client/class/Text.ts b/src/client/class/Text.ts index 4c7e675a..a3588ac3 100644 --- a/src/client/class/Text.ts +++ b/src/client/class/Text.ts @@ -1,6 +1,6 @@ -import {Vector, VectorInteger} from "./Vector.js"; -import {Component, Moving} from "./interface.js"; +import {Vector, VectorInteger} from "../../shared_js/class/Vector.js"; +import {Component, Moving} from "../../shared_js/class/interface.js"; // conflict with Text class TextElem implements Component { diff --git a/src/client/constants.ts b/src/client/constants.ts new file mode 100644 index 00000000..914fa4c9 --- /dev/null +++ b/src/client/constants.ts @@ -0,0 +1 @@ +export * from "../shared_js/constants.js" diff --git a/src/client/draw.ts b/src/client/draw.ts index 5cacdfa5..65f2447d 100644 --- a/src/client/draw.ts +++ b/src/client/draw.ts @@ -1,4 +1,4 @@ -import * as g from "./pong.js" +import * as g from "./global.js" import {gridDisplay} from "./handleInput.js"; function draw() diff --git a/src/client/gameLoop.ts b/src/client/gameLoop.ts index e61c65dd..ae008272 100644 --- a/src/client/gameLoop.ts +++ b/src/client/gameLoop.ts @@ -1,6 +1,6 @@ -import * as g from "./pong.js" +import * as g from "./global.js" import * as d from "./draw.js"; -import {random} from "./utils.js"; +import {random} from "../shared_js/utils.js"; import {handleInput} from "./handleInput.js"; let ballInPlay = false; diff --git a/src/client/global.ts b/src/client/global.ts new file mode 100644 index 00000000..2141d189 --- /dev/null +++ b/src/client/global.ts @@ -0,0 +1,3 @@ +export * from "../shared_js/initGame.js" +export * from "./initGameClientOnly.js" +export {pong} from "./pong.js" diff --git a/src/client/handleInput.ts b/src/client/handleInput.ts index c6896f95..e67f0cfa 100644 --- a/src/client/handleInput.ts +++ b/src/client/handleInput.ts @@ -1,5 +1,7 @@ -import * as g from "./pong.js" +import * as g from "./global.js" import * as d from "./draw.js"; +import { socket } from "./ws.js"; +import {InputEnum, EventInput} from "../shared_js/class/Event.js" let gridDisplay = false; @@ -26,10 +28,10 @@ function playerMove(delta: number, keys: string[]) { g.player1.dir.y = 0; if (keys.indexOf("w") != -1) { - g.player1.dir.y += -1; + socket.send(JSON.stringify(new EventInput(InputEnum.up))); } if (keys.indexOf("s") != -1) { - g.player1.dir.y += 1; + socket.send(JSON.stringify(new EventInput(InputEnum.down))); } g.player1.moveAndCollide(delta, [g.wall_top, g.wall_bottom]); diff --git a/src/client/initGameClientOnly.ts b/src/client/initGameClientOnly.ts new file mode 100644 index 00000000..2751ed52 --- /dev/null +++ b/src/client/initGameClientOnly.ts @@ -0,0 +1,59 @@ + +import * as c from "./constants.js" +import {Vector, VectorInteger} from "../shared_js/class/Vector.js"; +import {Rectangle, MovingRectangle, Player, Ball, Line} from "../shared_js/class/Rectangle.js"; +import {TextElem, TextNumericValue} from "./class/Text.js"; + +export let midLine: Line; +export let score1: TextNumericValue; +export let score2: TextNumericValue; + +export let w_grid_mid: Rectangle; +export let w_grid_u1: Rectangle; +export let w_grid_d1: Rectangle; +export let h_grid_mid: Rectangle; +export let h_grid_u1: Rectangle; +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); + 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); + + // 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); +} + +export {initGameClientOnly} diff --git a/src/client/pong.ts b/src/client/pong.ts index 4bbb2e7d..986d1522 100644 --- a/src/client/pong.ts +++ b/src/client/pong.ts @@ -1,13 +1,12 @@ import {GameArea} from "./class/GameArea.js"; -import {Vector, VectorInteger} from "./class/Vector.js"; -import {Rectangle, MovingRectangle, Player, Ball, Line} from "./class/Rectangle.js"; -import {TextElem, TextNumericValue} from "./class/Text.js"; import * as d from "./draw.js"; import {gameLoop, newRound} from "./gameLoop.js" -import {random} from "./utils.js"; -import {socket} from "./ws.js"; - +// import {random} from "../shared_js/utils.js"; +// import {socket} from "./ws.js"; +// import * as c from "./constants.js" +import {initGame} from "../shared_js/initGame.js"; +import {initGameClientOnly} from "./initGameClientOnly.js"; /* Keys Player 1: W/S @@ -15,29 +14,12 @@ import {socket} from "./ws.js"; Grid On-Off: G */ -export let pong: GameArea; - -export let wall_top: Rectangle; -export let wall_bottom: Rectangle; -export let player1: Player; -export let player2: Player; -export let ball: Ball; -export let score1: TextNumericValue; -export let score2: TextNumericValue; -export let midLine: Line; - -export let w_grid_mid: Rectangle; -export let w_grid_u1: Rectangle; -export let w_grid_d1: Rectangle; -export let h_grid_mid: Rectangle; -export let h_grid_u1: Rectangle; -export let h_grid_d1: Rectangle; +export const pong = new GameArea(); function init() { - initGame(); - initGameClientOnly(); - console.log("socket state %i", socket.readyState); + initGame(pong.ctx); + initGameClientOnly(pong.ctx); } function startGame() @@ -54,76 +36,6 @@ function startGame() setTimeout(newRound, 1000); } -function initGameClientOnly() -{ - let pos = new VectorInteger; - - // Const - const w = pong.canvas.width; - const h = pong.canvas.height; - const w_mid = Math.floor(w/2); - const h_mid = Math.floor(h/2); - const gridSize = Math.floor(w/500); - - // Grid - pos.assign(0, h_mid); - w_grid_mid = new Rectangle(pong.ctx, pos, "darkgreen", w, gridSize); - pos.assign(0, h/4); - w_grid_u1 = new Rectangle(pong.ctx, pos, "darkgreen", w, gridSize); - pos.assign(0, h-h/4); - w_grid_d1 = new Rectangle(pong.ctx, pos, "darkgreen", w, gridSize); - pos.assign(w_mid, 0); - h_grid_mid = new Rectangle(pong.ctx, pos, "darkgreen", gridSize, h); - pos.assign(w/4, 0); - h_grid_u1 = new Rectangle(pong.ctx, pos, "darkgreen", gridSize, h); - pos.assign(w-w/4, 0); - h_grid_d1 = new Rectangle(pong.ctx, pos, "darkgreen", gridSize, h); -} - -function initGame() -{ - pong = new GameArea(); - // Const - const w = pong.canvas.width; - const h = pong.canvas.height; - 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 scoreSize = Math.floor(w/16); - const midLineSize = Math.floor(w/150); - 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(pong.ctx, pos, "grey", w, wallSize); - pos.assign(0, h-wallSize); - wall_bottom = new Rectangle(pong.ctx, pos, "grey", w, wallSize); - - pos.assign(0+pw, h_mid-ph/2); - player1 = new Player(pong.ctx, pos, "white", pw, ph, playerSpeed); - pos.assign(w-pw-pw, h_mid-ph/2); - player2 = new Player(pong.ctx, pos, "white", pw, ph, playerSpeed); - - pos.assign(w_mid-ballSize/2, h_mid-ballSize/2); - ball = new Ball(pong.ctx, pos, "white", ballSize, ballSpeed); - ball.dir.assign(-0.8, +0.2); - - pos.assign(w_mid-scoreSize*1.6, scoreSize*1.5); - score1 = new TextNumericValue(pong.ctx, pos, "white", scoreSize); - pos.assign(w_mid+scoreSize*1.1, scoreSize*1.5); - score2 = new TextNumericValue(pong.ctx, pos, "white", scoreSize); - score1.value = 0; - score2.value = 0; - - pos.assign(w_mid-midLineSize/2, 0+wallSize); - midLine = new Line(pong.ctx, pos, "white", midLineSize, h-wallSize*2, 15); -} - ///////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////// diff --git a/src/client/ws.ts b/src/client/ws.ts index 71f53ef4..51fdb61a 100644 --- a/src/client/ws.ts +++ b/src/client/ws.ts @@ -1,29 +1,12 @@ -import * as g from "./pong.js" +import * as g from "./global.js" // temp import {startGame} from "./pong.js"; +import {EventTypes, EventData, EventGameUpdate} from "../shared_js/class/Event.js" const wsPort = 8042; const wsUrl = "ws://" + document.location.hostname + ":" + wsPort + "/pong"; const socket = new WebSocket(wsUrl, "json"); -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}; -} - socket.addEventListener("message", logListener); socket.addEventListener("message", matchmakingListener); diff --git a/src/server/server.ts b/src/server/server.ts index bb8585e5..d3494696 100644 --- a/src/server/server.ts +++ b/src/server/server.ts @@ -5,13 +5,23 @@ import fs from "fs"; import path from "path"; import { WebSocketServer, WebSocket } from "ws"; import { v4 as uuidv4 } from 'uuid'; -import { random } from "../client/utils.js"; +import { random } from "../shared_js/utils.js"; + +import {EventTypes, EventData, EventGameUpdate} from "../shared_js/class/Event.js" +import {Rectangle, MovingRectangle, Player, Ball, Line} from "../shared_js/class/Rectangle.js"; +import { Vector } from "../shared_js/class/Vector.js"; + const hostname = "localhost"; const port = 8080; const wsPort = 8042; // pas indispensable d'avoir un autre port si le WebSocket est limité à certaines routes const root = "../../www/"; +class CanvasRenderingContext2D {} // Empty object replacement to the web-API (web-API useless on server-side) +const mockCtx = new CanvasRenderingContext2D; + // @ts-ignore +const player1 = new Player(mockCtx, new Vector(), "white", 1, 1, 1); + const server = http.createServer((req, res) => { // var q = new URL(req.url, `http://${req.getHeaders().host}`) // @ts-ignore @@ -63,16 +73,22 @@ wsServer.on("connection", (socket, request) => { console.log("client %s alive at %i", client.id, Date.now()); }); - socket.on("message", function message(data) { + socket.on("message", function log(data) { console.log("received: %s", data); }); - socket.send(JSON.stringify({type: 2})); // start + socket.on("message", clientInputListener); + socket.send(JSON.stringify({type: EventTypes.start})); // socket.send("connection success, bravo client " + id); // socket.send("start"); // socket.send("json/20"); }); +function clientInputListener(data: string) +{ + return; +} + function deleteClient(client: Client) { var i = clientsArr.indexOf(client); @@ -97,7 +113,7 @@ const pingInterval = setInterval( () => { const gameUpdateInterval = setInterval( () => { clientsArr.forEach( (client) => { const update = { - type: 1, + type: EventTypes.gameUpdate, player1: {y: random(50, 650)}, player2: {y: random(50, 650)}, ball: {x: 0, y: 0, speed: 0} diff --git a/src/shared_js/class/Event.ts b/src/shared_js/class/Event.ts new file mode 100644 index 00000000..2096ae7a --- /dev/null +++ b/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 +} diff --git a/src/client/class/Rectangle.ts b/src/shared_js/class/Rectangle.ts similarity index 100% rename from src/client/class/Rectangle.ts rename to src/shared_js/class/Rectangle.ts diff --git a/src/client/class/Vector.ts b/src/shared_js/class/Vector.ts similarity index 100% rename from src/client/class/Vector.ts rename to src/shared_js/class/Vector.ts diff --git a/src/client/class/interface.ts b/src/shared_js/class/interface.ts similarity index 100% rename from src/client/class/interface.ts rename to src/shared_js/class/interface.ts diff --git a/src/shared_js/constants.ts b/src/shared_js/constants.ts new file mode 100644 index 00000000..a62a3b02 --- /dev/null +++ b/src/shared_js/constants.ts @@ -0,0 +1,4 @@ + +export const CanvasWidth = 1500; +/* ratio 5/3 (1.66) */ +export const CanvasRatio = 1.66666; diff --git a/src/shared_js/initGame.ts b/src/shared_js/initGame.ts new file mode 100644 index 00000000..c2158c74 --- /dev/null +++ b/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} diff --git a/src/client/utils.ts b/src/shared_js/utils.ts similarity index 100% rename from src/client/utils.ts rename to src/shared_js/utils.ts