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

WIP token identification

Browse Source
This commit is contained in:
LuckyLaszlo
2022-12-19 21:48:16 +01:00
parent 674eff0d6d
commit c29db6d5f3
7 changed files with 58 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
srcs/requirements/svelte/api_front/src/pages/GamePage.svelte
View File

@@ -1,106 +0,0 @@
<script lang="ts">
// import { initDom } from "../game/client/pong.js";
import {onMount} from 'svelte';
onMount(() => {
// initDom();
})
</script>
<body>
<div id="div_game_options">
<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>
<label>sound :</label>
<input type="radio" id="sound_on" name="sound_selector" checked>
<label for="sound_on">on</label>
<input type="radio" id="sound_off" name="sound_selector">
<label for="sound_off">off</label>
</div>
<div>
<button id="play_pong_button">PLAY</button>
</div>
</fieldset>
</div>
<div id="div_game_instructions">
<h2>--- keys ---</h2>
<p>move up: 'w' or 'up arrow'</p>
<p>move down: 's' OR 'down arrow'</p>
<p>grid on/off: 'g'</p>
</div>
<div id="canvas_container">
<!-- <p> =) </p> -->
</div>
<!-- <script src="http://localhost:8080/js/pong.js" type="module" defer></script> -->
</body>
<style>
@font-face {
font-family: "Bit5x3";
src: url("/fonts/Bit5x3.woff2") format("woff2"),
url("/fonts/Bit5x3.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
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);
font-size: x-large;
}
#div_game_options fieldset {
max-width: 50vw;
width: auto;
margin: 0 auto;
}
#div_game_options fieldset div {
padding: 10px;
}
#play_pong_button {
font-family: "Bit5x3";
color: rgb(245, 245, 245);
background-color: #333333;
font-size: x-large;
padding: 10px;
}
canvas {
background-color: #333333;
max-width: 75vw;
/* max-height: 100vh; */
width: 80%;
}
</style>

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

@@ -20,16 +20,18 @@
let moving_walls = false;
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() => {
// WIP nest, fetch token generation
const address = "http://transcendance:8080";
const responsePromise = fetch(address + "/token");
if (sound === "off") {
initAudio(true);
}
else if (sound === "on") {
initAudio(false);
}
console.log(sound);
console.log(sound); //debug
if (multi_balls === true) {
matchOptions |= enumeration.MatchOptions.multiBalls;
@@ -43,7 +45,15 @@
initPong(new GameArea());
initGc(new GameComponentsClient(matchOptions, pong.ctx));
initStartFunction(start);
initWebSocket(matchOptions);
const response = await responsePromise;
if (!response.ok) {
console.log("Token retrieve failed"); // TODO: error message
return;
}
const responseJson = await response.json();
initWebSocket(matchOptions, responseJson.token, "usernamePLACEHOLDER");
// ou est stocké le username dans le front svelte ?
}
function start() : void {

12
srcs/requirements/svelte/api_front/src/pages/game/client/ws.ts
View File

@@ -31,14 +31,16 @@ 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)
export function initWebSocket(options: en.MatchOptions, token: string, username: string, privateMatch = false, playerTwoUsername?: string)
{
socket = new WebSocket(wsUrl, "json");
socket.addEventListener("open", (event) => {
socket.send(JSON.stringify( new ev.ClientAnnouncePlayer(options, tokenPLACEHOLDER, usernamePLACEHOLDER, privateMatchPLACEHOLDER) ));
if (privateMatch) {
socket.send(JSON.stringify( new ev.ClientAnnouncePlayer(options, token, username, privateMatch, playerTwoUsername) ));
}
else {
socket.send(JSON.stringify( new ev.ClientAnnouncePlayer(options, token, username) ));
}
});
// socket.addEventListener("message", logListener); // for testing purpose
socket.addEventListener("message", preMatchListener);

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

@@ -94,12 +94,16 @@ export class ClientAnnouncePlayer extends ClientAnnounce {
token: string;
username: string;
privateMatch: boolean;
constructor(matchOptions: en.MatchOptions, token: string, username: string, privateMatch: boolean = false) {
playerTwoUsername?: string;
constructor(matchOptions: en.MatchOptions, token: string, username: string, privateMatch: boolean = false, playerTwoUsername?: string) {
super(en.ClientRole.player);
this.matchOptions = matchOptions;
this.token = token;
this.username = username;
this.privateMatch = privateMatch;
if (playerTwoUsername) {
this.playerTwoUsername = playerTwoUsername;
}
}
}