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

major rework in Game.svelte and GameSpectator.svelte

Browse Source 
+ WIP match draw
This commit is contained in:
LuckyLaszlo
2023-01-06 20:04:40 +01:00
parent 68ae8ac333
commit 711f971333
8 changed files with 191 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
srcs/requirements/game_server/game_back/src/server/class/GameSession.ts
View File

@@ -229,8 +229,7 @@ export class GameSession {
this._forfeit(); this._forfeit();
} }
else { else {
// WIP: envoyer un truc à Nest ? Genre "match draw" this._matchEnd(en.PlayerSide.noSide, true);
this.destroy();
} }
return true; return true;
} }
@@ -269,11 +268,16 @@ export class GameSession {
gc.scoreLeft = 3; gc.scoreLeft = 3;
gc.scoreRight = 0; gc.scoreRight = 0;
} }
else else if (winner === en.PlayerSide.right)
{ {
gc.scoreLeft = 0; gc.scoreLeft = 0;
gc.scoreRight = 3; gc.scoreRight = 3;
} }
else
{ // TODO: match draw, verifier la getion coté Nest
gc.scoreLeft = 0;
gc.scoreRight = 0;
}
} }
await fetch(c.addressBackEnd + "/game/gameserver/updategame", await fetch(c.addressBackEnd + "/game/gameserver/updategame",
{ {

1
srcs/requirements/game_server/game_back/src/shared_js/enums.ts
View File

@@ -31,6 +31,7 @@ export enum InputEnum {
} }
export enum PlayerSide { export enum PlayerSide {
noSide = 0,
left = 1, left = 1,
right right
} }

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

@@ -13,25 +13,20 @@
let allUsers; let allUsers;
//Game's stuff //Game's stuff
let optionsAreNotSet = true;
const options = new pong.InitOptions(); const options = new pong.InitOptions();
//Game's stuff client side only
const gameAreaId = "game_area"; const gameAreaId = "game_area";
//html boolean for pages //boolean for html page
let showWaitPage = false;
let showInvitations = false;
let showGameOption = true;
let showError = false;
let hiddenGame = true; let hiddenGame = true;
let showMatchEnded = false; let optionsAreNotSet = true;
let showGameOptions = true;
let showInvitations = false;
let showError = false;
let errorMessage = "";
let showWaitPage = false;
let isThereAnyInvitation = false;
let invitations = []; let invitations = [];
let waitingMessage = "Please wait...";
let errorMessageWhenAttemptingToGetATicket = "";
let watchGameStateInterval; let watchGameStateInterval;
const watchGameStateIntervalRate = 142; const watchGameStateIntervalRate = 142;
@@ -48,6 +43,17 @@
pong.destroy(); pong.destroy();
}) })
function resetPage() {
hiddenGame = true;
optionsAreNotSet = true;
showGameOptions = true;
showInvitations = false;
showError = false;
showWaitPage = false;
options.reset(user.username);
pong.destroy();
};
const initGame = async() => const initGame = async() =>
{ {
optionsAreNotSet = false; optionsAreNotSet = false;
@@ -63,31 +69,29 @@
gameOptions : matchOptions, gameOptions : matchOptions,
isGameIsWithInvitation : options.isSomeoneIsInvited isGameIsWithInvitation : options.isSomeoneIsInvited
}) })
}) });
const responseFromServer = await responseWhenGrantToken; const responseFromServer = await responseWhenGrantToken;
const responseInjson = await responseFromServer.json(); const responseInjson = await responseFromServer.json();
const token : string = responseInjson.token; const token : string = responseInjson.token;
showWaitPage = false; showWaitPage = false;
console.log("status : " + responseFromServer.status) console.log("status : " + responseFromServer.status);
if (responseFromServer.status != 200) if (responseFromServer.status != 200)
{ {
console.log(responseInjson) console.log(responseInjson);
console.log("On refuse le ticket"); console.log("On refuse le ticket");
errorMessageWhenAttemptingToGetATicket = responseInjson.message; errorMessage = responseInjson.message;
showError = true; showError = true;
options.reset(); options.reset(user.username);
options.playerOneUsername = user.username;
setTimeout(() => { setTimeout(() => {
optionsAreNotSet = true optionsAreNotSet = true;
showError = false; showError = false;
// showWaitPage = false // ??? errorMessage = "";
}, 5000); }, 5000);
} }
else if (token) else if (token)
{ {
watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate); watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate);
// options.isInvitedPerson = false // ??? pong.init(matchOptions, options, gameAreaId, token);
pong.init(options, gameAreaId, token);
hiddenGame = false; hiddenGame = false;
} }
// TODO: Un "else" peut-être ? Si pas de token on fait un truc ? // TODO: Un "else" peut-être ? Si pas de token on fait un truc ?
@@ -96,25 +100,25 @@
const initGameForInvitedPlayer = async(invitation : any) => const initGameForInvitedPlayer = async(invitation : any) =>
{ {
optionsAreNotSet = false optionsAreNotSet = false;
showWaitPage = true showWaitPage = true;
console.log("invitation : ") console.log("invitation : ");
console.log(invitation) console.log(invitation);
if (invitation.token) if (invitation.token)
{ {
watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate); watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate);
options.playerOneUsername = invitation.playerOneUsername; options.playerOneUsername = invitation.playerOneUsername;
options.playerTwoUsername = invitation.playerTwoUsername; options.playerTwoUsername = invitation.playerTwoUsername;
options.isSomeoneIsInvited = true; options.isSomeoneIsInvited = true;
options.isInvitedPerson = true options.isInvitedPerson = true;
pong.init(options, gameAreaId, invitation.token); pong.init(invitation.gameOptions, options, gameAreaId, invitation.token);
showWaitPage = false showWaitPage = false;
hiddenGame = false; hiddenGame = false;
} }
} }
const watchGameState = () => { const watchGameState = () => {
console.log("watchGameState") console.log("watchGameState");
if (gameState) { // trigger Svelte reactivity if (gameState) { // trigger Svelte reactivity
gameState.matchStarted = gameState.matchStarted; gameState.matchStarted = gameState.matchStarted;
gameState.matchEnded = gameState.matchEnded; gameState.matchEnded = gameState.matchEnded;
@@ -123,34 +127,24 @@
if (gameState.matchAborted || gameState.matchEnded) if (gameState.matchAborted || gameState.matchEnded)
{ {
clearInterval(watchGameStateInterval); clearInterval(watchGameStateInterval);
console.log("watchGameState, end") console.log("watchGameState, end");
showWaitPage = false
gameState.matchAborted ?
errorMessageWhenAttemptingToGetATicket = "The match has been aborted"
: errorMessageWhenAttemptingToGetATicket = "The match is finished !"
gameState.matchAborted ? showError = true : showMatchEnded = true;
setTimeout(() => { setTimeout(() => {
resetPage(); resetPage();
errorMessageWhenAttemptingToGetATicket = ""; console.log("watchGameState : setTimeout");
isThereAnyInvitation = false;
invitations = []; // ???
console.log("watchGameState : setTimeout")
}, 5000); }, 5000);
} }
} }
const switchToGameOptions = () => {
const showOptions = () => { showGameOptions = true;
showGameOption = true showInvitations = false;
showInvitations = false
} }
const showInvitation = async() => { const fetchInvitations = async() => {
showGameOption = false; showGameOptions = false;
showInvitations = true; showInvitations = true;
invitations = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/invitations`) invitations = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/invitations`)
.then(x => x.json()) .then(x => x.json());
invitations.length !== 0 ? isThereAnyInvitation = true : isThereAnyInvitation = false
} }
const rejectInvitation = async(invitation) => { const rejectInvitation = async(invitation) => {
@@ -162,30 +156,23 @@
}) })
}) })
.then(x => x.json()) .then(x => x.json())
.catch(error => console.log(error)) .catch(error => console.log(error));
showInvitation() fetchInvitations();
} }
const acceptInvitation = async(invitation : any) => { const acceptInvitation = async(invitation : any) =>
{
const res = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/accept`, { const res = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/accept`, {
method: "POST", method: "POST",
headers: { 'Content-Type': 'application/json'}, headers: { 'Content-Type': 'application/json'},
body: JSON.stringify({ body: JSON.stringify({
token : invitation.token token : invitation.token
}) })
}) }).catch(error => console.log(error));
.then(x => x.json())
.catch(error => {
console.log(error)
})
if (res.status === 200)
{
showInvitation()
initGameForInvitedPlayer(invitation)
}
//Au final c'est utile !
initGameForInvitedPlayer(invitation) // Luke: normal de initGameForInvitedPlayer() sur un "res.status" different de 200 ? if (res && res.ok) {
initGameForInvitedPlayer(invitation);
}
} }
function leaveMatch() { function leaveMatch() {
@@ -193,16 +180,6 @@
resetPage(); resetPage();
}; };
function resetPage() {
hiddenGame = true;
optionsAreNotSet = true
showError = false;
showMatchEnded = false;
options.reset();
options.playerOneUsername = user.username;
pong.destroy();
};
</script> </script>
<Header /> <Header />
@@ -210,53 +187,61 @@
Might become useless after CSS rework. --> Might become useless after CSS rework. -->
<div id="game_page"> <div id="game_page">
{#if showMatchEnded === true} {#if showError}
<div id="div_game" in:fly="{{ y: 10, duration: 1000 }}"> <div class="div_game" in:fly="{{ y: 10, duration: 1000 }}">
<p>{errorMessageWhenAttemptingToGetATicket}</p>
</div>
{/if}
{#if showError === true}
<div id="div_game" in:fly="{{ y: 10, duration: 1000 }}">
<fieldset> <fieldset>
<legend>Error</legend> <legend>Error</legend>
<p>{errorMessageWhenAttemptingToGetATicket}</p> <p>{errorMessage}</p>
</fieldset> </fieldset>
</div> </div>
{/if} {/if}
{#if !hiddenGame}
{#if gameState.matchEnded}
<div class="div_game" in:fly="{{ y: 10, duration: 1000 }}">
<p>The match is finished !</p>
</div>
{:else if gameState.matchAborted}
<div class="div_game" in:fly="{{ y: 10, duration: 1000 }}">
<p>The match has been aborted</p>
</div>
{/if}
{/if}
<div id="canvas_container" hidden={hiddenGame}> <div id="canvas_container" hidden={hiddenGame}>
<canvas id={gameAreaId}/> <canvas id={gameAreaId}/>
</div> </div>
{#if !hiddenGame} {#if !hiddenGame}
{#if !hiddenGame && gameState.matchStarted && !gameState.matchEnded} {#if gameState.matchStarted && !gameState.matchEnded}
<div id="div_game"> <div class="div_game">
<button id="pong_button" on:click={leaveMatch}>forfeit</button> <button class="pong_button" on:click={leaveMatch}>forfeit</button>
</div> </div>
{:else if !hiddenGame && !gameState.matchStarted} {:else if !gameState.matchStarted}
<div id="div_game"> <div class="div_game">
<button id="pong_button" on:click={leaveMatch}>leave matchmaking</button> <button class="pong_button" on:click={leaveMatch}>leave matchmaking</button>
</div> </div>
{/if} {/if}
{/if} {/if}
{#if showWaitPage === true} {#if showWaitPage}
<div id="div_game" in:fly="{{ y: 10, duration: 1000 }}"> <div class="div_game" in:fly="{{ y: 10, duration: 1000 }}">
<fieldset> <fieldset>
<legend>Connecting to the game...</legend> <legend>Connecting to the game...</legend>
<p>{waitingMessage}</p> <p>Please wait...</p>
</fieldset> </fieldset>
</div> </div>
{/if} {/if}
<!-- -->
{#if optionsAreNotSet} {#if optionsAreNotSet}
{#if showGameOption === true} {#if showGameOptions}
<div id="game_option"> <div id="game_option">
<div id="div_game"> <div class="div_game">
<button id="pong_button" on:click={showInvitation}>Show invitations</button> <button class="pong_button" on:click={fetchInvitations}>Show invitations</button>
<fieldset> <fieldset in:fly="{{ y: 10, duration: 1000 }}">
<legend>game options</legend> <legend>game options</legend>
<div> <div>
<input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={options.multi_balls}> <input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={options.multi_balls}>
@@ -277,7 +262,7 @@
<input type="checkbox" id="isSomeoneIsInvited" bind:checked={options.isSomeoneIsInvited}> <input type="checkbox" id="isSomeoneIsInvited" bind:checked={options.isSomeoneIsInvited}>
<label for="moving_walls">Invite a friend</label> <label for="moving_walls">Invite a friend</label>
</div> </div>
{#if options.isSomeoneIsInvited === true} {#if options.isSomeoneIsInvited}
<select bind:value={options.playerTwoUsername}> <select bind:value={options.playerTwoUsername}>
{#each allUsers as user } {#each allUsers as user }
<option value={user.username}>{user.username}</option> <option value={user.username}>{user.username}</option>
@@ -285,7 +270,7 @@
</select> </select>
{/if} {/if}
<div> <div>
<button id="pong_button" on:click={initGame}>PLAY</button> <button class="pong_button" on:click={initGame}>PLAY</button>
</div> </div>
</fieldset> </fieldset>
</div> </div>
@@ -293,27 +278,24 @@
{/if} {/if}
{#if showInvitations} {#if showInvitations}
<div id="invitations_options" in:fly="{{ y: 10, duration: 1000 }}"> <div class="div_game">
<div id="div_game"> <button class="pong_button" on:click={switchToGameOptions}>Play a Game</button>
<button id="pong_button" on:click={showOptions}>Play a Game</button> <fieldset in:fly="{{ y: 10, duration: 1000 }}">
<fieldset> <legend>invitations</legend>
<legend>Current invitation(s)</legend> <button class="pong_button" on:click={fetchInvitations}>Reload</button>
{#if isThereAnyInvitation} {#if invitations.length !== 0}
{#each invitations as invitation} {#each invitations as invitation}
<div> <div>
{invitation.playerOneUsername} has invited you to play a pong ! {invitation.playerOneUsername} has invited you to play a pong !
<button id="pong_button" on:click={() => acceptInvitation(invitation)}>V</button> <button class="pong_button" on:click={() => acceptInvitation(invitation)}>V</button>
<button id="pong_button" on:click={() => rejectInvitation(invitation)}>X</button> <button class="pong_button" on:click={() => rejectInvitation(invitation)}>X</button>
</div> </div>
{/each} {/each}
{/if} {:else}
{#if isThereAnyInvitation === false}
<p>Currently, no one asked to play with you.</p> <p>Currently, no one asked to play with you.</p>
<button id="pong_button" on:click={showInvitation}>Reload</button>
{/if} {/if}
</fieldset> </fieldset>
</div> </div>
</div>
{/if} {/if}
{/if} {/if}
@@ -352,22 +334,22 @@ canvas {
width: 80%; width: 80%;
} }
#div_game { .div_game {
margin-top: 20px; 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);
font-size: x-large; font-size: x-large;
} }
#div_game fieldset { .div_game fieldset {
max-width: 50vw; max-width: 50vw;
width: auto; width: auto;
margin: 0 auto; margin: 0 auto;
} }
#div_game fieldset div { .div_game fieldset div {
padding: 10px; padding: 10px;
} }
#pong_button { .pong_button {
font-family: "Bit5x3"; font-family: "Bit5x3";
color: rgb(245, 245, 245); color: rgb(245, 245, 245);
background-color: #333333; background-color: #333333;
@@ -375,18 +357,4 @@ canvas {
padding: 10px; padding: 10px;
} }
#users_name { /* UNUSED */
text-align: center;
font-family: "Bit5x3";
color: rgb(245, 245, 245);
font-size: x-large;
}
#error_notification { /* UNUSED */
text-align: center;
display: block;
font-family: "Bit5x3";
color: rgb(143, 19, 19);
font-size: x-large;
}
</style> </style>

82
srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte
View File

@@ -20,8 +20,9 @@
//html boolean for pages //html boolean for pages
let hiddenGame = true; let hiddenGame = true;
let hiddenMatchList = false;
let watchGameStateInterval;
const watchGameStateIntervalRate = 142;
onMount( async() => { onMount( async() => {
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`) user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
@@ -31,34 +32,55 @@
const responseForMatchList = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/match/all`) const responseForMatchList = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/match/all`)
const jsonForMatchList = await responseForMatchList.json(); const jsonForMatchList = await responseForMatchList.json();
matchList = jsonForMatchList; matchList = jsonForMatchList;
if (matchList.length <= 0) {
hiddenMatchList = true;
}
}) })
onDestroy( async() => { onDestroy( async() => {
clearInterval(watchGameStateInterval);
pongSpectator.destroy(); pongSpectator.destroy();
}) })
async function initGameSpectator(gameSessionId: string, matchOptions: pongSpectator.MatchOptions) { async function initGameSpectator(gameSessionId: string, matchOptions: pongSpectator.MatchOptions)
{
watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate);
pongSpectator.init(matchOptions, sound, gameAreaId, gameSessionId); pongSpectator.init(matchOptions, sound, gameAreaId, gameSessionId);
hiddenGame = false; hiddenGame = false;
}; };
const watchGameState = () => {
console.log("watchGameState")
if (gameState) { // trigger Svelte reactivity
gameState.matchStarted = gameState.matchStarted;
gameState.matchEnded = gameState.matchEnded;
gameState.matchAborted = gameState.matchAborted;
}
if (gameState.matchAborted || gameState.matchEnded)
{
clearInterval(watchGameStateInterval);
console.log("watchGameState, end")
setTimeout(() => {
resetPage();
console.log("watchGameState : setTimeout")
}, 5000);
}
}
function leaveMatch() { function leaveMatch() {
clearInterval(watchGameStateInterval);
resetPage(); resetPage();
}; };
async function resetPage() { async function resetPage() {
hiddenGame = true; hiddenGame = true;
pongSpectator.destroy(); pongSpectator.destroy();
fetchMatchList();
};
async function fetchMatchList() {
matchList = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/match/all`) matchList = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/match/all`)
.then( x => x.json() ); .then( x => x.json() );
if (matchList.length <= 0) {
hiddenMatchList = true;
}
}; };
</script> </script>
<!-- --> <!-- -->
@@ -67,18 +89,33 @@
Might become useless after CSS rework. --> Might become useless after CSS rework. -->
<div id="game_page"> <div id="game_page">
{#if !hiddenGame}
{#if gameState.matchEnded}
<div class="div_game" in:fly="{{ y: 10, duration: 1000 }}">
<p>The match is finished !</p>
</div>
{/if}
{/if}
<div id="canvas_container" hidden={hiddenGame}> <div id="canvas_container" hidden={hiddenGame}>
<canvas id={gameAreaId}/> <canvas id={gameAreaId}/>
</div> </div>
{#if !hiddenGame}
{#if !gameState.matchEnded}
<div class="div_game">
<button class="pong_button" on:click={leaveMatch}>leave</button>
</div>
{/if}
{/if}
<!-- -->
{#if hiddenGame} {#if hiddenGame}
<div id="div_game"> <div class="div_game" in:fly="{{ y: 10, duration: 1000 }}">
<div id="game_options">
<fieldset> <fieldset>
{#if hiddenMatchList}
<legend>no match available</legend>
{:else}
<legend>options</legend> <legend>options</legend>
<button class="pong_button" on:click={fetchMatchList}>Reload</button>
<div> <div>
<p>sound :</p> <p>sound :</p>
<input type="radio" id="sound_on" name="sound_selector" bind:group={sound} value="on"> <input type="radio" id="sound_on" name="sound_selector" bind:group={sound} value="on">
@@ -86,19 +123,16 @@
<input type="radio" id="sound_off" name="sound_selector" bind:group={sound} value="off"> <input type="radio" id="sound_off" name="sound_selector" bind:group={sound} value="off">
<label for="sound_off">off</label> <label for="sound_off">off</label>
</div> </div>
</fieldset>
{#if matchList.length !== 0}
<menu id="match_list"> <menu id="match_list">
{#each matchList as match} {#each matchList as match}
<MatchListElem match={match} on:click={(e) => initGameSpectator(match.gameServerIdOfTheMatch, match.gameOptions)} /> <MatchListElem match={match} on:click={(e) => initGameSpectator(match.gameServerIdOfTheMatch, match.gameOptions)} />
{/each} {/each}
</menu> </menu>
{/if}
</fieldset>
</div>
</div>
{:else} {:else}
<div id="div_game"> <p>no match ongoing</p>
<button id="pong_button" on:click={leaveMatch}>leave match</button> {/if}
</div> </div>
{/if} {/if}
@@ -133,26 +167,26 @@ canvas {
width: 80%; width: 80%;
} }
#div_game { .div_game {
margin-top: 20px; 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);
font-size: x-large; font-size: x-large;
} }
#div_game fieldset { .div_game fieldset {
max-width: 50vw; max-width: 50vw;
width: auto; width: auto;
margin: 0 auto; margin: 0 auto;
} }
#div_game fieldset div { .div_game fieldset div {
padding: 10px; padding: 10px;
} }
#match_list { #match_list {
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
font-size: large; font-size: large;
} }
#pong_button { .pong_button {
font-family: "Bit5x3"; font-family: "Bit5x3";
color: rgb(245, 245, 245); color: rgb(245, 245, 245);
background-color: #333333; background-color: #333333;

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

@@ -7,13 +7,13 @@ export class InitOptions {
isInvitedPerson = false; isInvitedPerson = false;
playerOneUsername = ""; playerOneUsername = "";
playerTwoUsername = ""; playerTwoUsername = "";
reset() { reset(playerOneUsername: string) {
this.sound = "off"; this.sound = "off";
this.multi_balls = false; this.multi_balls = false;
this.moving_walls = false; this.moving_walls = false;
this.isSomeoneIsInvited = false; this.isSomeoneIsInvited = false;
this.isInvitedPerson = false; this.isInvitedPerson = false;
this.playerOneUsername = ""; this.playerOneUsername = playerOneUsername;
this.playerTwoUsername = ""; this.playerTwoUsername = "";
} }
} }

6
srcs/requirements/svelte/api_front/src/pages/game/client/pong.ts
View File

@@ -1,5 +1,6 @@
import * as c from "./constants.js" import * as c from "./constants.js"
import type * as en from "../shared_js/enums.js"
import { handleInput } from "./handleInput.js"; import { handleInput } from "./handleInput.js";
import { gameLoop } from "./gameLoop.js" import { gameLoop } from "./gameLoop.js"
import { drawLoop } from "./draw.js"; import { drawLoop } from "./draw.js";
@@ -10,16 +11,14 @@ export { InitOptions } from "./class/InitOptions.js";
import { initBase, destroyBase, computeMatchOptions } from "./init.js"; import { initBase, destroyBase, computeMatchOptions } from "./init.js";
export { computeMatchOptions } from "./init.js"; export { computeMatchOptions } from "./init.js";
/* TODO: A way to delay the init of variables, but still use "const" not "let" ? */
import { pong, gc } from "./global.js" import { pong, gc } from "./global.js"
import { setStartFunction } from "./global.js" import { setStartFunction } from "./global.js"
let abortControllerKeydown: AbortController; let abortControllerKeydown: AbortController;
let abortControllerKeyup: AbortController; let abortControllerKeyup: AbortController;
export function init(options: InitOptions, gameAreaId: string, token: string) export function init(matchOptions: en.MatchOptions, options: InitOptions, gameAreaId: string, token: string)
{ {
const matchOptions = computeMatchOptions(options);
initBase(matchOptions, options.sound, gameAreaId); initBase(matchOptions, options.sound, gameAreaId);
setStartFunction(start); setStartFunction(start);
@@ -72,7 +71,6 @@ function start_after_countdown()
); );
resume(); resume();
gameState.matchStarted = true;
} }
function resume() function resume()

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

@@ -101,6 +101,7 @@ function preMatchListener(this: WebSocket, event: MessageEvent)
msg.matchmakingComplete(); msg.matchmakingComplete();
break; break;
case en.EventTypes.matchStart: case en.EventTypes.matchStart:
gameState.matchStarted = true;
socket.removeEventListener("message", preMatchListener); socket.removeEventListener("message", preMatchListener);
socket.addEventListener("message", inGameListener); socket.addEventListener("message", inGameListener);
startFunction(); startFunction();
@@ -244,6 +245,7 @@ export function preMatchListenerSpectator(this: WebSocket, event: MessageEvent)
const data: ev.ServerEvent = JSON.parse(event.data); const data: ev.ServerEvent = JSON.parse(event.data);
if (data.type === en.EventTypes.matchStart) if (data.type === en.EventTypes.matchStart)
{ {
gameState.matchStarted = true;
socket.removeEventListener("message", preMatchListenerSpectator); socket.removeEventListener("message", preMatchListenerSpectator);
socket.addEventListener("message", inGameListenerSpectator); socket.addEventListener("message", inGameListenerSpectator);
socket.send(JSON.stringify( new ev.ClientEvent(en.EventTypes.clientSpectatorReady) )); socket.send(JSON.stringify( new ev.ClientEvent(en.EventTypes.clientSpectatorReady) ));
@@ -324,10 +326,5 @@ function matchEndSpectator(data: ev.EventMatchEnd)
console.log("matchEndSpectator"); console.log("matchEndSpectator");
gameState.matchEnded = true; gameState.matchEnded = true;
socket.close(); socket.close();
// WIP
/* msg.win();
if (data.forfeit) {
msg.forfeit(clientInfo.side);
} */
} }

1
srcs/requirements/svelte/api_front/src/pages/game/shared_js/enums.ts
View File

@@ -31,6 +31,7 @@ export enum InputEnum {
} }
export enum PlayerSide { export enum PlayerSide {
noSide = 0,
left = 1, left = 1,
right right
} }