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

Wip fetch() from gameServer to nestServer

Browse Source 
+ 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
Download Patch File Download Diff File Expand all files Collapse all files

92
srcs/requirements/svelte/api_front/src/pages/game/Game.svelte
View File

@@ -15,25 +15,30 @@
let optionsAreNotSet = true
let sound = false;
let soundMutedFlag = false;
let multi_balls = 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
const init = async() => {
if (multi_balls === true)
matchOption |= enumeration.MatchOptions.multiBalls
if (moving_walls === true )
matchOption |= enumeration.MatchOptions.movingWalls
initAudio(sound)
initMatchOptions(matchOption)
optionsAreNotSet = false
initPong(new GameArea())
initGc(new GameComponentsClient(matchOption, pong.ctx))
initStartFunction(start)
initWebSocket(matchOption)
console.log(soundMutedFlag);
initAudio(soundMutedFlag);
if (multi_balls === true) {
matchOptions |= enumeration.MatchOptions.multiBalls;
}
if (moving_walls === true) {
matchOptions |= enumeration.MatchOptions.movingWalls;
}
initMatchOptions(matchOptions);
optionsAreNotSet = false;
initPong(new GameArea());
initGc(new GameComponentsClient(matchOptions, pong.ctx));
initStartFunction(start);
initWebSocket(matchOptions);
}
function start() : void {
@@ -65,28 +70,31 @@
</head>
<body>
<div id="preload_font">.</div>
{#if optionsAreNotSet}
<form on:submit|preventDefault={init}>
<div id="div_game_options">
<fieldset>
<legend>game options</legend>
<div>
<input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={multi_balls}>
<label for="multi_balls">Multiples balls</label>
</div>
<div>
<input type="checkbox" id="moving_walls" name="moving_walls" bind:checked={moving_walls}>
<label for="moving_walls">Moving walls</label>
</div>
<div>
<input type="checkbox" id="moving_walls" name="moving_walls" bind:checked={sound}>
<label for="moving_walls">Sound</label>
</div>
<div>
<button id="play_pong_button" >PLAY</button>
</div>
</fieldset>
<fieldset>
<legend>game options</legend>
<div>
<input type="checkbox" id="multi_balls" name="multi_balls">
<label for="multi_balls">multiples balls</label>
</div>
<div>
<input type="checkbox" id="moving_walls" name="moving_walls">
<label for="moving_walls">moving walls</label>
</div>
<div>
<!-- svelte-ignore a11y-label-has-associated-control -->
<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>
<button id="play_pong_button">PLAY</button>
</div>
</fieldset>
</div>
</form>
<div id="div_game_instructions">
@@ -106,29 +114,33 @@
@font-face {
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-style: normal;
font-display: swap;
}
#preload_font {
font-family: "Bit5x3";
opacity:0;
height:0;
width:0;
display:inline-block;
}
body {
margin: 0;
background-color: #222425;
}
#canvas_container {
margin-top: 20px;
text-align: center;
/* border: dashed rgb(245, 245, 245) 5px; */
/* max-height: 80vh; */
/* overflow: hidden; */
}
#div_game_instructions {
text-align: center;
font-family: "Bit5x3";
color: rgb(245, 245, 245);
font-size: large;
}
#div_game_options {
margin-top: 20px;
text-align: center;
font-family: "Bit5x3";
color: rgb(245, 245, 245);

2
srcs/requirements/svelte/api_front/src/pages/game/client/class/GameComponentsClient.ts
View File

@@ -5,7 +5,7 @@ import { Vector, VectorInteger } from "../../shared_js/class/Vector.js";
import { TextElem, TextNumericValue } from "./Text.js";
import { RectangleClient, MovingRectangleClient, RacketClient, BallClient, Line } from "./RectangleClient.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 {
wallTop: RectangleClient | MovingRectangleClient;

4
srcs/requirements/svelte/api_front/src/pages/game/client/class/InputHistory.ts
View File

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

2
srcs/requirements/svelte/api_front/src/pages/game/client/class/RectangleClient.ts
View File

@@ -1,6 +1,6 @@
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 { soundPongArr } from "../audio.js"
import { random } from "../utils.js";

2
srcs/requirements/svelte/api_front/src/pages/game/client/class/Text.ts
View File

@@ -1,6 +1,6 @@
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
export class TextElem implements Component {

4
srcs/requirements/svelte/api_front/src/pages/game/client/gameLoop.ts
View File

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

6
srcs/requirements/svelte/api_front/src/pages/game/client/ws.ts
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 clientInfoSpectator = new ClientInfoSpectator(); // WIP, could refactor this
const tokenPLACEHOLDER = "";
const usernamePLACEHOLDER = "";
const privateMatchPLACEHOLDER = false;
export function initWebSocket(options: en.MatchOptions)
{
socket = new WebSocket(wsUrl, "json");
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", preMatchListener);

11
srcs/requirements/svelte/api_front/src/pages/game/shared_js/class/Event.ts
View File

@@ -89,12 +89,17 @@ export class ClientAnnounce extends ClientEvent {
}
export class ClientAnnouncePlayer extends ClientAnnounce {
clientId: string;
clientId: string; // unused
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);
this.clientId = clientId;
this.matchOptions = matchOptions;
this.token = token;
this.username = username;
this.privateMatch = privateMatch;
}
}

2
srcs/requirements/svelte/api_front/src/pages/game/shared_js/class/Rectangle.ts
View File

@@ -1,6 +1,6 @@
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"
export class Rectangle implements Component {

2
srcs/requirements/svelte/api_front/src/pages/game/shared_js/class/interface.ts
View File

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

2
srcs/requirements/svelte/api_front/src/pages/game/shared_js/utils.ts
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) {
return Math.random() * (max - min) + min;

4
srcs/requirements/svelte/api_front/src/pages/game/shared_js/wallsMovement.ts
View File

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