Wip fetch() from gameServer to nestServer
+ miscs (html, css, svelte warning, ...)
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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));
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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";
|
||||||
|
|||||||
@@ -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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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)
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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,23 +70,26 @@
|
|||||||
</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>
|
||||||
|
<input type="radio" id="sound_on" name="sound_selector" bind:group={soundMutedFlag} value=false checked>
|
||||||
|
<label for="sound_on">on</label>
|
||||||
|
<input type="radio" id="sound_off" name="sound_selector" bind:group={soundMutedFlag} value=true>
|
||||||
|
<label for="sound_off">off</label>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<button id="play_pong_button">PLAY</button>
|
<button id="play_pong_button">PLAY</button>
|
||||||
@@ -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);
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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";
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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)
|
||||||
{
|
{
|
||||||
|
|||||||
Reference in New Issue
Block a user