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

Merge remote-tracking branch 'origin/master' into eric_front_and_back

Browse Source
This commit is contained in:
Me
2023-01-15 22:07:48 +01:00
parent e546723263 c6d034b9f7
commit 48d4ff3dee
11 changed files with 169 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
View File

@@ -42,16 +42,6 @@
</div>
<style>
@font-face {
font-family: "Bit5x3";
src:
url("/fonts/Bit5x3.woff2") format("woff2"),
local("Bit5x3"),
url("/fonts/Bit5x3.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
.container {
height: 100%;

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

@@ -24,7 +24,6 @@
//boolean for html page
let hiddenGame = true;
let optionsAreNotSet = true;
let showGameOptions = true;
let showInvitations = false;
let showError = false;
@@ -62,8 +61,7 @@
})
function resetPage() {
hiddenGame = true;
optionsAreNotSet = true;
setHiddenGame(true);
showGameOptions = true;
showInvitations = false;
showError = false;
@@ -74,7 +72,6 @@
const initGame = async() =>
{
optionsAreNotSet = false;
showWaitPage = true;
const matchOptions = pong.computeMatchOptions(options);
try {
@@ -91,13 +88,18 @@
console.log("status : " + response.status);
const responseBody = await response.json();
const token : string = responseBody.token;
showWaitPage = false;
if (response.ok && token)
{
watchMatchStartInterval = setInterval(watchMatchStart, watchMatchStartIntervalRate);
watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate);
pong.init(matchOptions, options, gameAreaId, token);
hiddenGame = false;
if (options.isSomeoneIsInvited) {
options.reset(user.username);
fetchInvitations();
}
else {
watchMatchStartInterval = setInterval(watchMatchStart, watchMatchStartIntervalRate);
watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate);
pong.init(matchOptions, options, gameAreaId, token);
setHiddenGame(false);
}
}
else
{
@@ -107,7 +109,6 @@
showError = true;
options.reset(user.username);
setTimeout(() => {
optionsAreNotSet = true;
showError = false;
errorMessage = "";
}, 5000);
@@ -115,11 +116,11 @@
} catch (e) {
console.log(e);
}
showWaitPage = false;
}
const initGameForInvitedPlayer = async(invitation : any) =>
const initInvitationGame = async(invitation : any) =>
{
optionsAreNotSet = false;
showWaitPage = true;
console.log("invitation : ");
console.log(invitation);
@@ -130,10 +131,12 @@
options.playerOneUsername = invitation.playerOneUsername;
options.playerTwoUsername = invitation.playerTwoUsername;
options.isSomeoneIsInvited = true;
options.isInvitedPerson = true;
if (user.username === invitation.playerTwoUsername) {
options.isInvitedPerson = true;
}
pong.init(invitation.gameOptions, options, gameAreaId, invitation.token);
showWaitPage = false;
hiddenGame = false;
setHiddenGame(false);
}
}
@@ -169,10 +172,11 @@
}
const fetchInvitations = async() => {
showGameOptions = false;
showInvitations = true;
console.log("fetchInvitations");
invitations = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/invitations`)
.then(x => x.json());
showGameOptions = false;
showInvitations = true;
}
const rejectInvitation = async(invitation) => {
@@ -199,7 +203,7 @@
}).catch(error => console.log(error));
if (res && res.ok) {
initGameForInvitedPlayer(invitation);
initInvitationGame(invitation);
}
}
@@ -209,6 +213,16 @@
resetPage();
};
function setHiddenGame(value: boolean) {
if (value) {
document.getElementById("game_page").classList.remove("dim_background");
}
else {
document.getElementById("game_page").classList.add("dim_background");
}
hiddenGame = value;
}
</script>
<Header />
@@ -273,58 +287,56 @@
<!-- -->
{#if optionsAreNotSet}
{#if hiddenGame}
{#if showGameOptions}
<div id="game_option">
<div class="div_game">
<button class="pong_button" on:click={fetchInvitations}>Show invitations</button>
<fieldset in:fly="{{ y: 10, duration: 1000 }}">
<legend>game options</legend>
<div class="div_game" id="game_options">
<button class="pong_button" on:click={fetchInvitations}>Show invitations</button>
<fieldset in:fly="{{ y: 10, duration: 1000 }}">
<legend>game options</legend>
<label for="multi_balls">
<input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={options.multi_balls}>
Multiples balls
<label for="multi_balls">
<input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={options.multi_balls}>
Multiples balls
</label>
<label for="moving_walls">
<input type="checkbox" id="moving_walls" name="moving_walls" bind:checked={options.moving_walls}>
Moving walls
</label>
<div>
sound :
<label for="sound_on">
<input type="radio" id="sound_on" name="sound_selector" bind:group={options.sound} value="on">
on
</label>
<label for="moving_walls">
<input type="checkbox" id="moving_walls" name="moving_walls" bind:checked={options.moving_walls}>
Moving walls
<label for="sound_off">
<input type="radio" id="sound_off" name="sound_selector" bind:group={options.sound} value="off">
off
</label>
</div>
<div>
sound :
<label for="sound_on">
<input type="radio" id="sound_on" name="sound_selector" bind:group={options.sound} value="on">
on
</label>
<label for="sound_off">
<input type="radio" id="sound_off" name="sound_selector" bind:group={options.sound} value="off">
off
</label>
</div>
<label for="invitation_checkbox">
<input type="checkbox" id="invitation_checkbox" bind:checked={options.isSomeoneIsInvited}>
Invite a friend
</label>
<label for="invitation_checkbox">
<input type="checkbox" id="invitation_checkbox" bind:checked={options.isSomeoneIsInvited}>
Invite a friend
</label>
{#if options.isSomeoneIsInvited}
<select bind:value={options.playerTwoUsername}>
{#each allUsers as invitedUser }
<option value={invitedUser.username}>{invitedUser.username}</option>
{/each}
</select>
{/if}
<div>
<button class="pong_button" on:click={initGame}>PLAY</button>
</div>
</fieldset>
</div>
{#if options.isSomeoneIsInvited}
<select bind:value={options.playerTwoUsername}>
{#each allUsers as invitedUser }
<option value={invitedUser.username}>{invitedUser.username}</option>
{/each}
</select>
{/if}
<div>
<button class="pong_button" on:click={initGame}>PLAY</button>
</div>
</fieldset>
</div>
{/if}
{#if showInvitations}
<div class="div_game">
<div class="div_game" id="game_invitations">
<button class="pong_button" on:click={switchToGameOptions}>Play a Game</button>
<fieldset in:fly="{{ y: 10, duration: 1000 }}">
<legend>invitations</legend>
@@ -332,7 +344,7 @@
{#if invitations.length !== 0}
{#each invitations as invitation}
<div>
{invitation.playerOneUsername} has invited you to play a pong !
{invitation.playerOneUsername} VS {invitation.playerTwoUsername}
<button class="pong_button" on:click={() => acceptInvitation(invitation)}>V</button>
<button class="pong_button" on:click={() => rejectInvitation(invitation)}>X</button>
</div>
@@ -348,19 +360,9 @@
</div> <!-- div "game_page" -->
<style>
@font-face {
font-family: "Bit5x3";
src:
url("/fonts/Bit5x3.woff2") format("woff2"),
local("Bit5x3"),
url("/fonts/Bit5x3.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
#game_page {
margin: 0;
background-color: #222425;
position: relative;
width: 100%;
height: auto;
@@ -368,9 +370,11 @@
flex-direction: column;
flex-grow: 1;
}
#game_option {
#game_options, #game_invitations {
margin-top: 20px;
}
#canvas_container {
margin-top: 20px;
text-align: center;
@@ -380,7 +384,7 @@
}
canvas {
/* background-color: #ff0000; */
background-color: #333333;
background-color: #333;
max-width: 75vw;
/* max-height: 100vh; */
width: 80%;

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

@@ -45,7 +45,7 @@
playerOneAvatar = await fetchAvatar(gameState.playerOneUsername);
playerTwoAvatar = await fetchAvatar(gameState.playerTwoUsername);
hiddenGame = false;
setHiddenGame(false);
};
const watchGameState = () => {
@@ -70,7 +70,7 @@
};
async function resetPage() {
hiddenGame = true;
setHiddenGame(true);
pongSpectator.destroy();
matchList = await fetchMatchList();
};
@@ -93,6 +93,16 @@
});
};
function setHiddenGame(value: boolean) {
if (value) {
document.getElementById("game_page").classList.remove("dim_background");
}
else {
document.getElementById("game_page").classList.add("dim_background");
}
hiddenGame = value;
}
</script>
<!-- -->
@@ -164,21 +174,10 @@
<!-- -->
<style>
@font-face {
font-family: "Bit5x3";
src:
url("/fonts/Bit5x3.woff2") format("woff2"),
local("Bit5x3"),
url("/fonts/Bit5x3.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
#game_page {
margin: 0;
padding: 20px;
background-color: #222425;
position: relative;
width: 100%;
height: 100%;

13
srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
View File

@@ -46,9 +46,9 @@
<tr>
<th>{i + 1}</th>
{#if user.username === currentUser.username}
<td><b>You ({user.username})</b></td>
<td><b>{user.username} [You]</b></td>
{:else}
<td>{user.username}</td>
<td>{user.username}</td>
{/if}
<td>{user.stats.winGame}</td>
<td>{user.stats.loseGame}</td>
@@ -63,7 +63,7 @@
<style>
.principal-div {
.principal-div {
display: flex;
justify-content: center;
align-items: center;
@@ -90,15 +90,10 @@
}
.stats-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
background-color: #555;
}
.stats-table tbody tr:last-of-type {
border-bottom: 2px solid #618174;
}
.stats-table tbody tr.active-row {
font-weight: bold;
color: #618174;
}
</style>

15
srcs/requirements/svelte/api_front/src/pieces/Header.svelte
View File

@@ -34,24 +34,13 @@
</div>
<style>
@font-face {
font-family: "Bit5x3";
src:
url("/fonts/Bit5x3.woff2") format("woff2"),
local("Bit5x3"),
url("/fonts/Bit5x3.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
.header div.center button.selected {
text-decoration: underline;
background-color: #2B3A67;
background-color: #8c0000;
}
.header div.center button {
background-color: #8c0000;
background-color: #444;
border-color: #071013;
color: white;
font-family: "Bit5x3";

6
srcs/requirements/svelte/api_front/src/pieces/utils.ts
View File

@@ -4,7 +4,7 @@ export async function fetchAvatar(username: string)
return fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar?username=${username}`)
.then((response) => {
if (!response.ok) {
throw new Error("Avatar not retrieved");
throw new Error("HTTP " + response.status);
}
return response.blob();
})
@@ -22,7 +22,7 @@ export async function fetchUser()
return fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then((response) => {
if (!response.ok) {
throw new Error("User not retrieved");
throw new Error("HTTP " + response.status);
}
return response.json();
})
@@ -40,7 +40,7 @@ export async function fetchAllUsers()
return fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/all`)
.then((response) => {
if (!response.ok) {
throw new Error("All Users not retrieved");
throw new Error("HTTP " + response.status);
}
return response.json();
})