Wip fetch() from gameServer to nestServer

+ miscs (html, css, svelte warning, ...)
This commit is contained in:
LuckyLaszlo
2022-12-17 17:22:42 +01:00
parent c2242c481b
commit 42f2d76f30
22 changed files with 243 additions and 110 deletions

View File

@@ -17,6 +17,8 @@ export class Client {
} }
export class ClientPlayer extends Client { export class ClientPlayer extends Client {
token: string;
username: string;
matchOptions: en.MatchOptions = 0; matchOptions: en.MatchOptions = 0;
inputBuffer: ev.EventInput = new ev.EventInput(); inputBuffer: ev.EventInput = new ev.EventInput();
lastInputId: number = 0; lastInputId: number = 0;

View File

@@ -24,15 +24,18 @@ export class GameSession {
spectatorsUpdateInterval: NodeJS.Timer | number = 0; spectatorsUpdateInterval: NodeJS.Timer | number = 0;
components: GameComponentsServer; components: GameComponentsServer;
matchOptions: en.MatchOptions; matchOptions: en.MatchOptions;
isPrivateMatch: boolean; // WIP: could be used to separate leaderboards for example.
matchEnded: boolean = false; matchEnded: boolean = false;
lastStateSnapshot: ev.EventGameUpdate;
actual_time: number; actual_time: number;
last_time: number; last_time: number;
delta_time: number; delta_time: number;
constructor(id: string, matchOptions: en.MatchOptions) { constructor(id: string, matchOptions: en.MatchOptions, isPrivateMatch: boolean = false) {
this.id = id; this.id = id;
this.matchOptions = matchOptions; this.matchOptions = matchOptions;
this.isPrivateMatch = isPrivateMatch;
this.components = new GameComponentsServer(this.matchOptions); this.components = new GameComponentsServer(this.matchOptions);
} }
start() { start() {
@@ -51,6 +54,7 @@ export class GameSession {
}); });
s.actual_time = Date.now(); s.actual_time = Date.now();
s.lastStateSnapshot = s._gameStateSnapshot();
s.gameLoopInterval = setInterval(s._gameLoop, c.serverGameLoopIntervalMS, s); s.gameLoopInterval = setInterval(s._gameLoop, c.serverGameLoopIntervalMS, s);
s.playersUpdateInterval = setInterval(s._playersUpdate, c.playersUpdateIntervalMS, s); s.playersUpdateInterval = setInterval(s._playersUpdate, c.playersUpdateIntervalMS, s);
s.spectatorsUpdateInterval = setInterval(s._spectatorsUpdate, c.spectatorsUpdateIntervalMS, s); s.spectatorsUpdateInterval = setInterval(s._spectatorsUpdate, c.spectatorsUpdateIntervalMS, s);
@@ -139,16 +143,16 @@ export class GameSession {
}); });
} }
private _playersUpdate(s: GameSession) { private _playersUpdate(s: GameSession) {
const gameState: ev.EventGameUpdate = s._gameStateSnapshot(); s.lastStateSnapshot = s._gameStateSnapshot();
s.playersMap.forEach( (client) => { s.playersMap.forEach( (client) => {
gameState.lastInputId = client.lastInputId; s.lastStateSnapshot.lastInputId = client.lastInputId;
client.socket.send(JSON.stringify(gameState)); client.socket.send(JSON.stringify(s.lastStateSnapshot));
}); });
} }
private _spectatorsUpdate(s: GameSession) { private _spectatorsUpdate(s: GameSession) {
const gameState = s._gameStateSnapshot(); s.lastStateSnapshot.lastInputId = 0;
s.spectatorsMap.forEach( (client) => { s.spectatorsMap.forEach( (client) => {
client.socket.send(JSON.stringify(gameState)); client.socket.send(JSON.stringify(s.lastStateSnapshot));
}); });
} }
private _gameStateSnapshot() : ev.EventGameUpdate { private _gameStateSnapshot() : ev.EventGameUpdate {
@@ -182,7 +186,12 @@ export class GameSession {
{ {
if (Math.abs(gc.scoreLeft - gc.scoreRight) >= 2) if (Math.abs(gc.scoreLeft - gc.scoreRight) >= 2)
{ {
s._matchEnd(s); if (gc.scoreLeft > gc.scoreRight) {
s._matchEnd(en.PlayerSide.left);
}
else {
s._matchEnd(en.PlayerSide.right);
}
return; return;
} }
} }
@@ -197,45 +206,54 @@ export class GameSession {
this.matchEnded = true; this.matchEnded = true;
if (this.playersMap.size != 0) if (this.playersMap.size != 0)
{ {
console.log("Forfeit Ending");
const gc = this.components; const gc = this.components;
const luckyWinner: ClientPlayer = this.playersMap.values().next().value; const luckyWinner: ClientPlayer = this.playersMap.values().next().value;
let eventEnd: ev.EventMatchEnd;
if (luckyWinner.racket === gc.playerLeft) { if (luckyWinner.racket === gc.playerLeft) {
eventEnd = new ev.EventMatchEnd(en.PlayerSide.left, true); this._matchEnd(en.PlayerSide.left, true);
console.log("Player Left WIN (by forfeit)");
} }
else { else {
eventEnd = new ev.EventMatchEnd(en.PlayerSide.right, true); this._matchEnd(en.PlayerSide.right, true);
console.log("Player Right WIN (by forfeit)");
} }
luckyWinner.socket.send(JSON.stringify(eventEnd));
this.spectatorsMap.forEach( (client) => {
client.socket.send(JSON.stringify(eventEnd));
});
} }
return true; return true;
} }
return false; return false;
} }
private _matchEnd(s: GameSession) { private async _matchEnd(winner: en.PlayerSide, forfeit_flag: boolean = false)
s.matchEnded = true; {
const gc = s.components; this.matchEnded = true;
let eventEnd: ev.EventMatchEnd; let eventEnd: ev.EventMatchEnd;
if (gc.scoreLeft > gc.scoreRight) { eventEnd = new ev.EventMatchEnd(winner, forfeit_flag);
eventEnd = new ev.EventMatchEnd(en.PlayerSide.left); this.playersMap.forEach( (client) => {
client.socket.send(JSON.stringify(eventEnd));
});
this.spectatorsMap.forEach( (client) => {
client.socket.send(JSON.stringify(eventEnd));
});
/* // WIP nest , send match result
const gc = this.components;
await fetch(c.addressBackEnd + "/game/matchEnd",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
id: this.id,
scoreLeft: gc.scoreLeft,
scoreRight: gc.scoreRight,
isPrivateMatch: this.isPrivateMatch,
})
}); */
// logs
if (winner === en.PlayerSide.left) {
console.log("Player Left WIN"); console.log("Player Left WIN");
} }
else { else {
eventEnd = new ev.EventMatchEnd(en.PlayerSide.right);
console.log("Player Right WIN"); console.log("Player Right WIN");
} }
s.playersMap.forEach( (client) => {
client.socket.send(JSON.stringify(eventEnd));
});
s.spectatorsMap.forEach( (client) => {
client.socket.send(JSON.stringify(eventEnd));
});
} }
} }

View File

@@ -8,3 +8,5 @@ export const fixedDeltaTime = serverGameLoopIntervalMS/1000; // second
// 33.333ms == 1000/30 // 33.333ms == 1000/30
export const playersUpdateIntervalMS = 1000/30; // millisecond export const playersUpdateIntervalMS = 1000/30; // millisecond
export const spectatorsUpdateIntervalMS = 1000/30; // millisecond export const spectatorsUpdateIntervalMS = 1000/30; // millisecond
export const addressBackEnd = "http://backend_dev:3000";

View File

@@ -10,16 +10,17 @@ import { v4 as uuidv4 } from 'uuid';
import * as en from "../shared_js/enums.js" import * as en from "../shared_js/enums.js"
import * as ev from "../shared_js/class/Event.js" import * as ev from "../shared_js/class/Event.js"
import * as c from "./constants.js"
import { Client, ClientPlayer, ClientSpectator } from "./class/Client.js" import { Client, ClientPlayer, ClientSpectator } from "./class/Client.js"
import { GameSession } from "./class/GameSession.js" import { GameSession } from "./class/GameSession.js"
import { shortId } from "./utils.js"; import { shortId } from "./utils.js";
import { gameSessionIdPLACEHOLDER } from "./constants.js"; import { gameSessionIdPLACEHOLDER } from "./constants.js";
// pas indispensable d'avoir un autre port si le WebSocket est relié à un serveur http préexistant ?
const wsPort = 8042; const wsPort = 8042;
export const wsServer = new WebSocketServer<WebSocket>({host: "0.0.0.0", port: wsPort, path: "/pong"}); export const wsServer = new WebSocketServer<WebSocket>({host: "0.0.0.0", port: wsPort, path: "/pong"});
const clientsMap: Map<string, Client> = new Map; // socket.id/Client const clientsMap: Map<string, Client> = new Map; // socket.id/Client
const matchmakingPlayersMap: Map<string, ClientPlayer> = new Map; // socket.id/ClientPlayer (duplicates with clientsMap) const matchmakingPlayersMap: Map<string, ClientPlayer> = new Map; // socket.id/ClientPlayer (duplicates with clientsMap) // TODO: rename in matchmakingMap
const privateMatchmakingMap: Map<string, ClientPlayer> = new Map; // socket.id/ClientPlayer (duplicates with clientsMap)
const gameSessionsMap: Map<string, GameSession> = new Map; // GameSession.id(url)/GameSession const gameSessionsMap: Map<string, GameSession> = new Map; // GameSession.id(url)/GameSession
wsServer.on("connection", connectionListener); wsServer.on("connection", connectionListener);
@@ -54,7 +55,7 @@ function connectionListener(socket: WebSocket, request: IncomingMessage)
} }
function clientAnnounceListener(this: WebSocket, data: string) async function clientAnnounceListener(this: WebSocket, data: string)
{ {
try { try {
const msg : ev.ClientAnnounce = JSON.parse(data); const msg : ev.ClientAnnounce = JSON.parse(data);
@@ -65,11 +66,44 @@ function clientAnnounceListener(this: WebSocket, data: string)
if (msg.role === en.ClientRole.player) if (msg.role === en.ClientRole.player)
{ {
const announce: ev.ClientAnnouncePlayer = <ev.ClientAnnouncePlayer>msg; const announce: ev.ClientAnnouncePlayer = <ev.ClientAnnouncePlayer>msg;
/* // WIP nest, fetch token validation
const response = await fetch(c.addressBackEnd + "/game/validateToken",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
token: announce.token,
username: announce.username,
})
});
switch (response.status)
{
case 200:
case 204:
break;
case 403:
default:
// send message to client ? or just gtfo ?
clientTerminate(clientsMap.get(this.id));
return;
} */
const player = clientsMap.get(this.id) as ClientPlayer; const player = clientsMap.get(this.id) as ClientPlayer;
player.matchOptions = announce.matchOptions; player.matchOptions = announce.matchOptions;
player.token = announce.token;
player.username = announce.username;
this.send(JSON.stringify( new ev.EventAssignId(this.id) )); this.send(JSON.stringify( new ev.EventAssignId(this.id) ));
this.send(JSON.stringify( new ev.ServerEvent(en.EventTypes.matchmakingInProgress) )); this.send(JSON.stringify( new ev.ServerEvent(en.EventTypes.matchmakingInProgress) ));
matchmaking(player); if (announce.privateMatch) {
privateMatchmaking(player);
}
else {
publicMatchmaking(player);
}
} }
else if (msg.role === en.ClientRole.spectator) else if (msg.role === en.ClientRole.spectator)
{ {
@@ -77,6 +111,7 @@ function clientAnnounceListener(this: WebSocket, data: string)
const gameSession = gameSessionsMap.get(announce.gameSessionId); const gameSession = gameSessionsMap.get(announce.gameSessionId);
if (!gameSession) { if (!gameSession) {
// WIP: send "invalid game session" // WIP: send "invalid game session"
clientTerminate(clientsMap.get(this.id));
return; return;
} }
const spectator = clientsMap.get(this.id) as ClientSpectator; const spectator = clientsMap.get(this.id) as ClientSpectator;
@@ -97,12 +132,12 @@ function clientAnnounceListener(this: WebSocket, data: string)
} }
function matchmaking(player: ClientPlayer) function publicMatchmaking(player: ClientPlayer)
{ {
const minPlayersNumber = 2; const minPlayersNumber = 2;
const maxPlayersNumber = 2; const maxPlayersNumber = 2;
const matchOptions = player.matchOptions;
matchmakingPlayersMap.set(player.id, player); matchmakingPlayersMap.set(player.id, player);
const matchOptions = player.matchOptions;
const compatiblePlayers: ClientPlayer[] = []; const compatiblePlayers: ClientPlayer[] = [];
for (const [id, client] of matchmakingPlayersMap) for (const [id, client] of matchmakingPlayersMap)
@@ -116,17 +151,52 @@ function matchmaking(player: ClientPlayer)
} }
} }
if (compatiblePlayers.length < minPlayersNumber) { if (compatiblePlayers.length >= minPlayersNumber) {
return; compatiblePlayers.forEach((client) => {
matchmakingPlayersMap.delete(client.id);
});
createGameSession(compatiblePlayers, matchOptions);
}
}
function privateMatchmaking(player: ClientPlayer)
{
const minPlayersNumber = 2;
const maxPlayersNumber = 2;
privateMatchmakingMap.set(player.id, player);
const matchOptions = player.matchOptions;
const token = player.token;
const compatiblePlayers: ClientPlayer[] = [];
for (const [id, client] of privateMatchmakingMap)
{
if (client.token === token)
{
compatiblePlayers.push(client);
if (compatiblePlayers.length === maxPlayersNumber) {
break;
}
}
} }
if (compatiblePlayers.length >= minPlayersNumber) {
compatiblePlayers.forEach((client) => {
privateMatchmakingMap.delete(client.id);
});
createGameSession(compatiblePlayers, matchOptions);
}
}
async function createGameSession(playersArr: ClientPlayer[], matchOptions: en.MatchOptions)
{
// const id = gameSessionIdPLACEHOLDER; // Force ID, TESTING SPECTATOR // const id = gameSessionIdPLACEHOLDER; // Force ID, TESTING SPECTATOR
const id = uuidv4(); const id = uuidv4();
const gameSession = new GameSession(id, matchOptions); const gameSession = new GameSession(id, matchOptions);
gameSessionsMap.set(id, gameSession); gameSessionsMap.set(id, gameSession);
compatiblePlayers.forEach((client) => { playersArr.forEach((client) => {
matchmakingPlayersMap.delete(client.id);
client.gameSession = gameSession; client.gameSession = gameSession;
gameSession.playersMap.set(client.id, client); gameSession.playersMap.set(client.id, client);
gameSession.unreadyPlayersMap.set(client.id, client); gameSession.unreadyPlayersMap.set(client.id, client);
@@ -134,15 +204,15 @@ function matchmaking(player: ClientPlayer)
// WIP: Not pretty, hardcoded two players. // WIP: Not pretty, hardcoded two players.
// Could be done in gameSession maybe ? // Could be done in gameSession maybe ?
compatiblePlayers[0].racket = gameSession.components.playerRight; playersArr[0].racket = gameSession.components.playerRight;
compatiblePlayers[1].racket = gameSession.components.playerLeft; playersArr[1].racket = gameSession.components.playerLeft;
compatiblePlayers.forEach((client) => { playersArr.forEach((client) => {
client.socket.once("message", playerReadyConfirmationListener); client.socket.once("message", playerReadyConfirmationListener);
}); });
compatiblePlayers[0].socket.send(JSON.stringify( new ev.EventMatchmakingComplete(en.PlayerSide.right) )); playersArr[0].socket.send(JSON.stringify( new ev.EventMatchmakingComplete(en.PlayerSide.right) ));
compatiblePlayers[1].socket.send(JSON.stringify( new ev.EventMatchmakingComplete(en.PlayerSide.left) )); playersArr[1].socket.send(JSON.stringify( new ev.EventMatchmakingComplete(en.PlayerSide.left) ));
setTimeout(function abortMatch() { setTimeout(function abortMatch() {
if (gameSession.unreadyPlayersMap.size !== 0) if (gameSession.unreadyPlayersMap.size !== 0)
@@ -155,6 +225,18 @@ function matchmaking(player: ClientPlayer)
}); });
} }
}, 5000); }, 5000);
/* // WIP nest , send gameSession.id
await fetch(c.addressBackEnd + "/game/newGameSession",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
id: id,
})
}); */
} }
@@ -250,6 +332,9 @@ function clientTerminate(client: Client)
if (matchmakingPlayersMap.has(client.id)) { if (matchmakingPlayersMap.has(client.id)) {
matchmakingPlayersMap.delete(client.id); matchmakingPlayersMap.delete(client.id);
} }
else if (privateMatchmakingMap.has(client.id)) {
privateMatchmakingMap.delete(client.id);
}
} }

View File

@@ -89,12 +89,17 @@ export class ClientAnnounce extends ClientEvent {
} }
export class ClientAnnouncePlayer extends ClientAnnounce { export class ClientAnnouncePlayer extends ClientAnnounce {
clientId: string; clientId: string; // unused
matchOptions: en.MatchOptions; matchOptions: en.MatchOptions;
constructor(matchOptions: en.MatchOptions, clientId: string = "") { token: string;
username: string;
privateMatch: boolean;
constructor(matchOptions: en.MatchOptions, token: string, username: string, privateMatch: boolean = false) {
super(en.ClientRole.player); super(en.ClientRole.player);
this.clientId = clientId;
this.matchOptions = matchOptions; this.matchOptions = matchOptions;
this.token = token;
this.username = username;
this.privateMatch = privateMatch;
} }
} }

View File

@@ -1,6 +1,6 @@
import { Vector, VectorInteger } from "./Vector.js"; import { Vector, VectorInteger } from "./Vector.js";
import { Component, Moving } from "./interface.js"; import type { Component, Moving } from "./interface.js";
import * as c from "../constants.js" import * as c from "../constants.js"
export class Rectangle implements Component { export class Rectangle implements Component {

View File

@@ -1,5 +1,5 @@
import { Vector, VectorInteger } from "./Vector.js"; import type { Vector, VectorInteger } from "./Vector.js";
export interface Component { export interface Component {
pos: VectorInteger; pos: VectorInteger;

View File

@@ -1,5 +1,5 @@
import { MovingRectangle } from "./class/Rectangle.js"; import type { MovingRectangle } from "./class/Rectangle.js";
export function random(min: number = 0, max: number = 1) { export function random(min: number = 0, max: number = 1) {
return Math.random() * (max - min) + min; return Math.random() * (max - min) + min;

View File

@@ -1,7 +1,7 @@
import * as c from "./constants.js"; import * as c from "./constants.js";
import { MovingRectangle } from "../shared_js/class/Rectangle.js"; import type { MovingRectangle } from "../shared_js/class/Rectangle.js";
import { GameComponents } from "./class/GameComponents.js"; import type { GameComponents } from "./class/GameComponents.js";
export function wallsMovements(delta: number, gc: GameComponents) export function wallsMovements(delta: number, gc: GameComponents)
{ {

View File

@@ -7,7 +7,7 @@ POSTGRES_DATABASE=transcendance_db
# OAUTH2 42 API # OAUTH2 42 API
FORTYTWO_CLIENT_ID=u-s4t2ud-49dc7b539bcfe1acb48b928b2b281671c99fc5bfab1faca57a536ab7e0075500 FORTYTWO_CLIENT_ID=u-s4t2ud-49dc7b539bcfe1acb48b928b2b281671c99fc5bfab1faca57a536ab7e0075500
FORTYTWO_CLIENT_SECRET=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 FORTYTWO_CLIENT_SECRET=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
FORTYTWO_CALLBACK_URL=http://transcendance:8080/api/v2/auth/redirect FORTYTWO_CALLBACK_URL=http://transcendance:8080/api/v2/auth/redirect
COOKIE_SECRET=248cdc831110eec8796d7c1edbf79835 COOKIE_SECRET=248cdc831110eec8796d7c1edbf79835
# JWT # JWT

View File

@@ -15,25 +15,30 @@
let optionsAreNotSet = true let optionsAreNotSet = true
let sound = false; let soundMutedFlag = false;
let multi_balls = false; let multi_balls = false;
let moving_walls = false; let moving_walls = false;
let matchOption : enumeration.MatchOptions = enumeration.MatchOptions.noOption; let matchOptions : enumeration.MatchOptions = enumeration.MatchOptions.noOption;
// En async au cas où pour la suite mais apriori inutile, les check se feront sûrement au onMount // En async au cas où pour la suite mais apriori inutile, les check se feront sûrement au onMount
const init = async() => { const init = async() => {
if (multi_balls === true) console.log(soundMutedFlag);
matchOption |= enumeration.MatchOptions.multiBalls
if (moving_walls === true ) initAudio(soundMutedFlag);
matchOption |= enumeration.MatchOptions.movingWalls if (multi_balls === true) {
initAudio(sound) matchOptions |= enumeration.MatchOptions.multiBalls;
initMatchOptions(matchOption) }
optionsAreNotSet = false if (moving_walls === true) {
initPong(new GameArea()) matchOptions |= enumeration.MatchOptions.movingWalls;
initGc(new GameComponentsClient(matchOption, pong.ctx)) }
initStartFunction(start) initMatchOptions(matchOptions);
initWebSocket(matchOption) optionsAreNotSet = false;
initPong(new GameArea());
initGc(new GameComponentsClient(matchOptions, pong.ctx));
initStartFunction(start);
initWebSocket(matchOptions);
} }
function start() : void { function start() : void {
@@ -65,28 +70,31 @@
</head> </head>
<body> <body>
<div id="preload_font">.</div>
{#if optionsAreNotSet} {#if optionsAreNotSet}
<form on:submit|preventDefault={init}> <form on:submit|preventDefault={init}>
<div id="div_game_options"> <div id="div_game_options">
<fieldset> <fieldset>
<legend>game options</legend> <legend>game options</legend>
<div> <div>
<input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={multi_balls}> <input type="checkbox" id="multi_balls" name="multi_balls">
<label for="multi_balls">Multiples balls</label> <label for="multi_balls">multiples balls</label>
</div> </div>
<div> <div>
<input type="checkbox" id="moving_walls" name="moving_walls" bind:checked={moving_walls}> <input type="checkbox" id="moving_walls" name="moving_walls">
<label for="moving_walls">Moving walls</label> <label for="moving_walls">moving walls</label>
</div> </div>
<div> <div>
<input type="checkbox" id="moving_walls" name="moving_walls" bind:checked={sound}> <!-- svelte-ignore a11y-label-has-associated-control -->
<label for="moving_walls">Sound</label> <label>sound :</label>
</div> <input type="radio" id="sound_on" name="sound_selector" bind:group={soundMutedFlag} value=false checked>
<div> <label for="sound_on">on</label>
<button id="play_pong_button" >PLAY</button> <input type="radio" id="sound_off" name="sound_selector" bind:group={soundMutedFlag} value=true>
</div> <label for="sound_off">off</label>
</fieldset> </div>
<div>
<button id="play_pong_button">PLAY</button>
</div>
</fieldset>
</div> </div>
</form> </form>
<div id="div_game_instructions"> <div id="div_game_instructions">
@@ -106,29 +114,33 @@
@font-face { @font-face {
font-family: "Bit5x3"; font-family: "Bit5x3";
src: url("/fonts/Bit5x3.woff2") format("woff2"),local("Bit5x3"), url("/fonts/Bit5x3.woff") format("woff"); src:
url("/fonts/Bit5x3.woff2") format("woff2"),
local("Bit5x3"),
url("/fonts/Bit5x3.woff") format("woff");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
#preload_font {
font-family: "Bit5x3";
opacity:0;
height:0;
width:0;
display:inline-block;
}
body { body {
margin: 0; margin: 0;
background-color: #222425; background-color: #222425;
} }
#canvas_container { #canvas_container {
margin-top: 20px;
text-align: center; text-align: center;
/* border: dashed rgb(245, 245, 245) 5px; */ /* border: dashed rgb(245, 245, 245) 5px; */
/* max-height: 80vh; */ /* max-height: 80vh; */
/* overflow: hidden; */ /* overflow: hidden; */
} }
#div_game_instructions {
text-align: center;
font-family: "Bit5x3";
color: rgb(245, 245, 245);
font-size: large;
}
#div_game_options { #div_game_options {
margin-top: 20px;
text-align: center; text-align: center;
font-family: "Bit5x3"; font-family: "Bit5x3";
color: rgb(245, 245, 245); color: rgb(245, 245, 245);

View File

@@ -5,7 +5,7 @@ import { Vector, VectorInteger } from "../../shared_js/class/Vector.js";
import { TextElem, TextNumericValue } from "./Text.js"; import { TextElem, TextNumericValue } from "./Text.js";
import { RectangleClient, MovingRectangleClient, RacketClient, BallClient, Line } from "./RectangleClient.js"; import { RectangleClient, MovingRectangleClient, RacketClient, BallClient, Line } from "./RectangleClient.js";
import { GameComponents } from "../../shared_js/class/GameComponents.js"; import { GameComponents } from "../../shared_js/class/GameComponents.js";
import { MovingRectangle } from "../../shared_js/class/Rectangle.js"; import type { MovingRectangle } from "../../shared_js/class/Rectangle.js";
class GameComponentsExtensionForClient extends GameComponents { class GameComponentsExtensionForClient extends GameComponents {
wallTop: RectangleClient | MovingRectangleClient; wallTop: RectangleClient | MovingRectangleClient;

View File

@@ -1,6 +1,6 @@
import * as en from "../../shared_js/enums.js" import type * as en from "../../shared_js/enums.js"
import * as ev from "../../shared_js/class/Event.js" import type * as ev from "../../shared_js/class/Event.js"
export class InputHistory { export class InputHistory {
input: en.InputEnum; input: en.InputEnum;

View File

@@ -1,6 +1,6 @@
import { Vector, VectorInteger } from "../../shared_js/class/Vector.js"; import { Vector, VectorInteger } from "../../shared_js/class/Vector.js";
import { Component, GraphicComponent, Moving } from "../../shared_js/class/interface.js"; import type { GraphicComponent } from "../../shared_js/class/interface.js";
import { Rectangle, MovingRectangle, Racket, Ball } from "../../shared_js/class/Rectangle.js"; import { Rectangle, MovingRectangle, Racket, Ball } from "../../shared_js/class/Rectangle.js";
import { soundPongArr } from "../audio.js" import { soundPongArr } from "../audio.js"
import { random } from "../utils.js"; import { random } from "../utils.js";

View File

@@ -1,6 +1,6 @@
import { Vector, VectorInteger } from "../../shared_js/class/Vector.js"; import { Vector, VectorInteger } from "../../shared_js/class/Vector.js";
import { Component } from "../../shared_js/class/interface.js"; import type { Component } from "../../shared_js/class/interface.js";
// conflict with Text // conflict with Text
export class TextElem implements Component { export class TextElem implements Component {

View File

@@ -3,8 +3,8 @@ import * as c from "./constants.js";
import * as en from "../shared_js/enums.js" import * as en from "../shared_js/enums.js"
import { gc, matchOptions, clientInfo, clientInfoSpectator} from "./global.js"; import { gc, matchOptions, clientInfo, clientInfoSpectator} from "./global.js";
import { wallsMovements } from "../shared_js/wallsMovement.js"; import { wallsMovements } from "../shared_js/wallsMovement.js";
import { RacketClient } from "./class/RectangleClient.js"; import type { RacketClient } from "./class/RectangleClient.js";
import { VectorInteger } from "../shared_js/class/Vector.js"; import type { VectorInteger } from "../shared_js/class/Vector.js";
let actual_time: number = Date.now(); let actual_time: number = Date.now();
let last_time: number; let last_time: number;

View File

@@ -30,11 +30,15 @@ export let socket: WebSocket; /* TODO: A way to still use "const" not "let" ? */
export const clientInfo = new ClientInfo(); export const clientInfo = new ClientInfo();
export const clientInfoSpectator = new ClientInfoSpectator(); // WIP, could refactor this export const clientInfoSpectator = new ClientInfoSpectator(); // WIP, could refactor this
const tokenPLACEHOLDER = "";
const usernamePLACEHOLDER = "";
const privateMatchPLACEHOLDER = false;
export function initWebSocket(options: en.MatchOptions) export function initWebSocket(options: en.MatchOptions)
{ {
socket = new WebSocket(wsUrl, "json"); socket = new WebSocket(wsUrl, "json");
socket.addEventListener("open", (event) => { socket.addEventListener("open", (event) => {
socket.send(JSON.stringify( new ev.ClientAnnouncePlayer(options, clientInfo.id) )); socket.send(JSON.stringify( new ev.ClientAnnouncePlayer(options, tokenPLACEHOLDER, usernamePLACEHOLDER, privateMatchPLACEHOLDER) ));
}); });
// socket.addEventListener("message", logListener); // for testing purpose // socket.addEventListener("message", logListener); // for testing purpose
socket.addEventListener("message", preMatchListener); socket.addEventListener("message", preMatchListener);

View File

@@ -89,12 +89,17 @@ export class ClientAnnounce extends ClientEvent {
} }
export class ClientAnnouncePlayer extends ClientAnnounce { export class ClientAnnouncePlayer extends ClientAnnounce {
clientId: string; clientId: string; // unused
matchOptions: en.MatchOptions; matchOptions: en.MatchOptions;
constructor(matchOptions: en.MatchOptions, clientId: string = "") { token: string;
username: string;
privateMatch: boolean;
constructor(matchOptions: en.MatchOptions, token: string, username: string, privateMatch: boolean = false) {
super(en.ClientRole.player); super(en.ClientRole.player);
this.clientId = clientId;
this.matchOptions = matchOptions; this.matchOptions = matchOptions;
this.token = token;
this.username = username;
this.privateMatch = privateMatch;
} }
} }

View File

@@ -1,6 +1,6 @@
import { Vector, VectorInteger } from "./Vector.js"; import { Vector, VectorInteger } from "./Vector.js";
import { Component, Moving } from "./interface.js"; import type { Component, Moving } from "./interface.js";
import * as c from "../constants.js" import * as c from "../constants.js"
export class Rectangle implements Component { export class Rectangle implements Component {

View File

@@ -1,5 +1,5 @@
import { Vector, VectorInteger } from "./Vector.js"; import type { Vector, VectorInteger } from "./Vector.js";
export interface Component { export interface Component {
pos: VectorInteger; pos: VectorInteger;

View File

@@ -1,5 +1,5 @@
import { MovingRectangle } from "./class/Rectangle.js"; import type { MovingRectangle } from "./class/Rectangle.js";
export function random(min: number = 0, max: number = 1) { export function random(min: number = 0, max: number = 1) {
return Math.random() * (max - min) + min; return Math.random() * (max - min) + min;

View File

@@ -1,7 +1,7 @@
import * as c from "./constants.js"; import * as c from "./constants.js";
import { MovingRectangle } from "../shared_js/class/Rectangle.js"; import type { MovingRectangle } from "../shared_js/class/Rectangle.js";
import { GameComponents } from "./class/GameComponents.js"; import type { GameComponents } from "./class/GameComponents.js";
export function wallsMovements(delta: number, gc: GameComponents) export function wallsMovements(delta: number, gc: GameComponents)
{ {