42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactoring

Browse Source 
+ wip input to server
This commit is contained in:
LuckyLaszlo
2022-11-17 11:12:32 +01:00
parent a873b23d0f
commit 6fb1470dbb
19 changed files with 197 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
make.sh
View File

@@ -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/

8
src/client/class/GameArea.ts
View File

@@ -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]);

4
src/client/class/Text.ts
View File

@@ -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 {

1
src/client/constants.ts Normal file
View File

@@ -0,0 +1 @@
export * from "../shared_js/constants.js"

2
src/client/draw.ts
View File

@@ -1,4 +1,4 @@
import * as g from "./pong.js"
import * as g from "./global.js"
import {gridDisplay} from "./handleInput.js";
function draw()

4
src/client/gameLoop.ts
View File

@@ -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;

3
src/client/global.ts Normal file
View File

@@ -0,0 +1,3 @@
export * from "../shared_js/initGame.js"
export * from "./initGameClientOnly.js"
export {pong} from "./pong.js"

8
src/client/handleInput.ts
View File

@@ -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]);

59
src/client/initGameClientOnly.ts Normal file
View File

@@ -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}

104
src/client/pong.ts
View File

@@ -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);
}
/////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////

21
src/client/ws.ts
View File

@@ -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);

24
src/server/server.ts
View File

@@ -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}

37
src/shared_js/class/Event.ts Normal file
View File

@@ -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
}

0
src/client/class/Rectangle.ts → src/shared_js/class/Rectangle.ts
View File

0
src/client/class/Vector.ts → src/shared_js/class/Vector.ts
View File

0
src/client/class/interface.ts → src/shared_js/class/interface.ts
View File

4
src/shared_js/constants.ts Normal file
View File

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

43
src/shared_js/initGame.ts Normal file
View File

@@ -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}

0
src/client/utils.ts → src/shared_js/utils.ts
View File