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

jeu suite

Browse Source
This commit is contained in:
batche
2022-12-20 17:56:18 +01:00
parent bd66fe60ff
commit fb7bfa0097
1 changed files with 149 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -34,10 +34,11 @@
let token = ""; let token = "";
//Game's stuff gameserver side //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 multi_balls = false;
let moving_walls = false; let moving_walls = false;
let matchOptions : enumeration.MatchOptions = enumeration.MatchOptions.noOption; let matchOption : enumeration.MatchOptions = enumeration.MatchOptions.noOption;
//html boolean for pages //html boolean for pages
let showWaitPage = false; let showWaitPage = false;
let showInvitations = false; let showInvitations = false;
@@ -60,17 +61,71 @@
}) })
const init = async() => { const init = async() => {
optionsAreNotSet = false
showWaitPage = true
console.log("Player two username " + playerTwoUsername)
if (multi_balls === true) if (multi_balls === true)
matchOption |= enumeration.MatchOptions.multiBalls matchOption |= enumeration.MatchOptions.multiBalls
if (moving_walls === true ) if (moving_walls === true )
matchOption |= enumeration.MatchOptions.movingWalls matchOption |= enumeration.MatchOptions.movingWalls
initAudio(sound) const res = await fetch("http://transcendance:8080/api/v2/game/ticket", {
initMatchOptions(matchOption) method : "POST",
optionsAreNotSet = false headers : {'Content-Type': 'application/json'},
initPong(new GameArea()) body : JSON.stringify({
initGc(new GameComponentsClient(matchOption, pong.ctx)) playerOneUsername : user.username,
initStartFunction(start) playerTwoUsername : playerTwoUsername,
initWebSocket(matchOption) 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 { function start() : void {
@@ -133,35 +188,83 @@
<body> <body>
<div id="preload_font">.</div> <div id="preload_font">.</div>
{#if optionsAreNotSet} {#if showError === true}
<form on:submit|preventDefault={init}> <div id="div_game">
<div id="div_game_options"> <fieldset>
<fieldset> <legend>Error</legend>
<legend>game options</legend> <p>{errorMessageWhenAttemptingToGetATicket}</p>
<div> <button id="pong_button" on:click={() => push('/game')}>Retry</button>
<input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={multi_balls}> </fieldset>
<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>
</div>
</form>
<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>
{/if}
{#if showWaitPage === true}
<div id="div_game">
<fieldset>
<legend>Connecting to the game...</legend>
<p>{waitingMessage}</p>
</fieldset>
</div>
{/if}
{#if optionsAreNotSet}
{#if showGameOption === true}
<form on:submit|preventDefault={init}>
<div id="div_game">
<button id="pong_button" on:click={showInvitation}>Show invitations</button>
<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>
<input type="checkbox" id="invite_someone" name="moving_walls" bind:checked={invite_someone}>
<label for="moving_walls">Invite a friend</label>
</div>
{#if invite_someone === true}
<select bind:value={playerTwoUsername}>
{#each allUsers as user }
<option value={user.username}>{user.username}</option>
{/each}
</select>
{/if}
<div>
<button id="pong_button" >PLAY</button>
</div>
</fieldset>
</div>
</form>
{/if}
{#if showInvitations}
<div id="div_game">
<button id="pong_button" on:click={showOptions}>Play a Game</button>
<fieldset>
<legend>Current invitation(s)</legend>
{#if isThereAnyInvitation}
{#each invitations as invitation }
<div>
{invitation.playerOneUsername} has invited you to play a pong !
<button id="pong_button" on:click={acceptInvitation}>V</button>
<button id="pong_button" on:click={rejectInvitation}>X</button>
</div>
{/each}
{/if}
{#if isThereAnyInvitation ===false}
<p>Currently, no one asked to play with you.</p>
<button id="pong_button" on:click={showInvitation}>Reload</button>
{/if}
</fieldset>
</div>
{/if}
{/if} {/if}
<div id="canvas_container"> <div id="canvas_container">
@@ -173,26 +276,29 @@
@font-face { @font-face {
font-family: "Bit5x3"; font-family: "Bit5x3";
src: src: url("/fonts/Bit5x3.woff2") format("woff2"),local("Bit5x3"), url("/fonts/Bit5x3.woff") format("woff");
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_options { #div_game {
text-align: center; text-align: center;
font-family: "Bit5x3"; font-family: "Bit5x3";
color: rgb(245, 245, 245); color: rgb(245, 245, 245);