diff --git a/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte b/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte index 224be713..091a3741 100644 --- a/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte +++ b/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte @@ -34,10 +34,11 @@ let token = ""; //Game's stuff gameserver side - let sound = "on"; // possible de faire un boolean avec svelte et radio buttons ? + let sound = ""; let multi_balls = false; let moving_walls = false; - let matchOptions : enumeration.MatchOptions = enumeration.MatchOptions.noOption; + let matchOption : enumeration.MatchOptions = enumeration.MatchOptions.noOption; + //html boolean for pages let showWaitPage = false; let showInvitations = false; @@ -60,17 +61,71 @@ }) const init = async() => { + optionsAreNotSet = false + showWaitPage = true + console.log("Player two username " + playerTwoUsername) 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) + const res = await fetch("http://transcendance:8080/api/v2/game/ticket", { + method : "POST", + headers : {'Content-Type': 'application/json'}, + body : JSON.stringify({ + playerOneUsername : user.username, + playerTwoUsername : playerTwoUsername, + gameOptions : matchOption, + isGameIsWithInvitation : invite_someone + }) + }) + .then(x => x.json()) + .catch(error => { + console.log(error) + }) + if (res.status === 403 || res.status === 404 || res.status === 500) + { + errorMessageWhenAttemptingToGetATicket = res.message; + showError = true; + setTimeout(() => { + showError = false; + showWaitPage = false + optionsAreNotSet = true + playerTwoUsername = ""; + matchOption = 0; + token = "" + }, 5000) + return ; + } + else if (res.status === 200) + { + initAudio(sound) + initMatchOptions(matchOption) + initPong(new GameArea()) + initGc(new GameComponentsClient(matchOption, pong.ctx)) + initStartFunction(start) + initWebSocket(matchOption) + } + // const fetch = await fetch("http://transcendance:8080/api/v2/game/gameServer/validate", { + // method : "POST", + // headers : {'Content-Type': 'application/json'}, + // body : JSON.stringify({ + // playerOneUsername : user.username, + // playerTwoUsername : playerTwoUsername, + // gameOptions : matchOption, + // isGameIsWithInvitation : invite_someone, + // token : token + // }) + // }) + // .then(x => x.json()) + // .catch(error => { + // console.log(error) + // }) + // if (res.status !== 200) + // { + // showError = true; + // errorMessageWhenAttemptingToGetATicket = "Your session is not valid. Please try again." + // return ; + // } } function start() : void { @@ -133,35 +188,83 @@
.
-{#if optionsAreNotSet} -
-
-
- game options -
- - -
-
- - -
-
- - -
-
- -
-
-
-
-
-

--- keys ---

-

move up: 'w' or 'up arrow'

-

move down: 's' OR 'down arrow'

-

grid on/off: 'g'

+ {#if showError === true} +
+
+ Error +

{errorMessageWhenAttemptingToGetATicket}

+ +
+ {/if} + + {#if showWaitPage === true} +
+
+ Connecting to the game... +

{waitingMessage}

+
+
+ {/if} + +{#if optionsAreNotSet} + {#if showGameOption === true} +
+
+ +
+ game options +
+ + +
+
+ + +
+
+ + +
+
+ + +
+ {#if invite_someone === true} + + {/if} +
+ +
+
+
+
+ {/if} + {#if showInvitations} +
+ +
+ Current invitation(s) + {#if isThereAnyInvitation} + {#each invitations as invitation } +
+ {invitation.playerOneUsername} has invited you to play a pong ! + + +
+ {/each} + {/if} + {#if isThereAnyInvitation ===false} +

Currently, no one asked to play with you.

+ + {/if} +
+
+ {/if} {/if}
@@ -173,26 +276,29 @@ @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_options { +#div_game { text-align: center; font-family: "Bit5x3"; color: rgb(245, 245, 245);