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

Merge branch 'cherif_back_and_game' into luke

Browse Source
This commit is contained in:
LuckyLaszlo
2022-12-21 20:19:11 +01:00
parent a1472c9059 eb1a5b47dd
commit 351ffc1756
28 changed files with 1834 additions and 1012 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
srcs/requirements/svelte/api_front/src/App.svelte
View File

@@ -2,7 +2,7 @@
// routing
// may not need {link} here
import Router, { link, replace } from "svelte-spa-router";
import { primaryRoutes } from "./routes/primaryRoutes.js";
import { primaryRoutes } from "./routes/primaryRoutes.js";
// import primaryRoutes from "./routes/primaryRoutes.svelte";
const conditionsFailed = (event) => {

186
srcs/requirements/svelte/api_front/src/pages/game/Game.Luke.svelte Normal file
View File

@@ -0,0 +1,186 @@
<script lang="ts">
import * as enumeration from './shared_js/enums'
import * as constants from './client/constants'
import { initPong, initGc, initMatchOptions, initStartFunction } from './client/global'
import { GameArea } from './client/class/GameArea';
import { GameComponentsClient } from './client/class/GameComponentsClient';
import { handleInput } from './client/handleInput';
import {gameLoop} from './client/gameLoop'
import { drawLoop } from './client/draw';
import {countdown} from './client/utils'
import { initWebSocket } from './client/ws';
import { initAudio } from './client/audio';
import { pong, gc} from './client/global'
let optionsAreNotSet = true
let sound = "on"; // possible de faire un boolean avec svelte et radio buttons ?
let multi_balls = false;
let moving_walls = false;
let matchOptions : enumeration.MatchOptions = enumeration.MatchOptions.noOption;
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); //debug
if (multi_balls === true) {
matchOptions |= enumeration.MatchOptions.multiBalls;
}
if (moving_walls === true) {
matchOptions |= enumeration.MatchOptions.movingWalls;
}
initMatchOptions(matchOptions);
optionsAreNotSet = false;
initPong(new GameArea());
initGc(new GameComponentsClient(matchOptions, pong.ctx));
initStartFunction(start);
// const response = await responsePromise;
// if (!response.ok) {
// console.log("Token retrieve failed"); // TODO: error message
// return;
// }
// const responseJson = await response.json();
initWebSocket(matchOptions, "yolo", "usernamePLACEHOLDER");
// ou est stocké le username dans le front svelte ?
}
function start() : void {
gc.text1.pos.assign(constants.w*0.5, constants.h*0.75);
countdown(constants.matchStartDelay/1000, (count: number) => {
gc.text1.clear();
gc.text1.text = `${count}`;
gc.text1.update();
}, resume);
}
function resume(): void {
gc.text1.text = "";
window.addEventListener('keydown', function (e) {
pong.addKey(e.key);
});
window.addEventListener('keyup', function (e) {
pong.deleteKey(e.key);
});
pong.handleInputInterval = window.setInterval(handleInput, constants.handleInputIntervalMS);
// pong.handleInputInterval = window.setInterval(sendLoop, c.sendLoopIntervalMS);
pong.gameLoopInterval = window.setInterval(gameLoop, constants.gameLoopIntervalMS);
pong.drawLoopInterval = window.setInterval(drawLoop, constants.drawLoopIntervalMS);
}
</script>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
{#if optionsAreNotSet}
<form on:submit|preventDefault={init}>
<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>
<!-- svelte-ignore a11y-label-has-associated-control -->
<label>sound :</label>
<input type="radio" id="sound_on" name="sound_selector" bind:group={sound} value="on">
<label for="sound_on">on</label>
<input type="radio" id="sound_off" name="sound_selector" bind:group={sound} value="off">
<label for="sound_off">off</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>
{/if}
<div id="canvas_container">
<!-- <p> =) </p> -->
</div>
</body>
<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;
}
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>

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

@@ -1,71 +1,137 @@
<script lang="ts">
import { onMount, onDestroy } from "svelte";
import * as enumeration from './shared_js/enums'
import * as constants from './client/constants'
import { initPong, initGc, initMatchOptions, initStartFunction } from './client/global'
import { GameArea } from './client/class/GameArea';
import { GameComponentsClient } from './client/class/GameComponentsClient';
import { handleInput } from './client/handleInput';
import {gameLoop} from './client/gameLoop'
import { gameLoop } from './client/gameLoop'
import { drawLoop } from './client/draw';
import {countdown} from './client/utils'
import { countdown } from './client/utils'
import { initWebSocket } from './client/ws';
import { initAudio } from './client/audio';
import { pong, gc} from './client/global'
import Header from '../../pieces/Header.svelte';
import { fade, fly } from 'svelte/transition'
let optionsAreNotSet = true
let sound = "on"; // possible de faire un boolean avec svelte et radio buttons ?
//user's stuff
let user;
let allUsers;
//Game's stuff nest side
let optionsAreNotSet = true;
let isSomeoneIsIvited = false;
let playerTwoUsername = "";
//Game's stuff gameserver side
let sound = "on";
let multi_balls = false;
let moving_walls = false;
let matchOptions : enumeration.MatchOptions = enumeration.MatchOptions.noOption;
let matchOption : enumeration.MatchOptions = enumeration.MatchOptions.noOption;
const init = async() => {
// WIP nest, fetch token generation
const address = "http://transcendance:8080";
const responsePromise = fetch(address + "/token");
//html boolean for pages
let showWaitPage = false;
let showInvitations = false;
let showGameOption = true;
let showError = false;
if (sound === "off") {
initAudio(true);
}
else if (sound === "on") {
initAudio(false);
}
console.log(sound); //debug
let isThereAnyInvitation = false;
let invitations = [];
if (multi_balls === true) {
matchOptions |= enumeration.MatchOptions.multiBalls;
}
if (moving_walls === true) {
matchOptions |= enumeration.MatchOptions.movingWalls;
}
initMatchOptions(matchOptions);
optionsAreNotSet = false;
initPong(new GameArea());
initGc(new GameComponentsClient(matchOptions, pong.ctx));
initStartFunction(start);
let waitingMessage = "Please wait..."
let errorMessageWhenAttemptingToGetATicket = "";
const response = await responsePromise;
if (!response.ok) {
console.log("Token retrieve failed"); // TODO: error message
return;
onMount( async() => {
user = await fetch('http://transcendance:8080/api/v2/user')
.then( x => x.json() );
allUsers = await fetch('http://transcendance:8080/api/v2/user/all')
.then( x => x.json() );
})
onDestroy( async() => {
})
const initGame = async() => {
optionsAreNotSet = false
showWaitPage = true
if (multi_balls === true)
matchOption |= enumeration.MatchOptions.multiBalls
if (moving_walls === true )
matchOption |= enumeration.MatchOptions.movingWalls
const responseWhenGrantToken = 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 : isSomeoneIsIvited
})
})
const responseFromServer = await responseWhenGrantToken;
const responseInjson = await responseFromServer.json();
const token : string = responseInjson.token;
showWaitPage = false
if (!responseFromServer.ok)
{
errorMessageWhenAttemptingToGetATicket = responseInjson.message;
showError = true;
setTimeout(() => {
showError = false;
showWaitPage = false
optionsAreNotSet = true
playerTwoUsername = "";
matchOption = 0;
}, 5000)
}
else if (token)
{
(sound === "off") ? initAudio(true) : initAudio(false);
initMatchOptions(matchOption)
initPong(new GameArea())
initGc(new GameComponentsClient(matchOption, pong.ctx))
initStartFunction(start)
isSomeoneIsIvited ?
initWebSocket(matchOption, token, user.username, true, playerTwoUsername) :
initWebSocket(matchOption, token, user.username)
}
const responseJson = await response.json();
initWebSocket(matchOptions, responseJson.token, "usernamePLACEHOLDER");
// ou est stocké le username dans le front svelte ?
}
const initGameForPrivateParty = async(invitation : any) => {
optionsAreNotSet = false
showWaitPage = true
console.log("invitation : ")
console.log(invitation)
if (invitation.token)
{
initMatchOptions(matchOption)
initPong(new GameArea())
initGc(new GameComponentsClient(matchOption, pong.ctx))
initStartFunction(start)
showWaitPage = false
initWebSocket(matchOption, invitation.token, invitation.playerOneUsername, true, user.username)
}
}
function start() : void {
gc.text1.pos.assign(constants.w*0.5, constants.h*0.75);
countdown(constants.matchStartDelay/1000, (count: number) => {
gc.text1.clear();
gc.text1.text = `${count}`;
gc.text1.update();
}, resume);
}, responseWhenGrantTokenume);
}
function resume(): void {
function responseWhenGrantTokenume(): void {
gc.text1.text = "";
window.addEventListener('keydown', function (e) {
pong.addKey(e.key);
@@ -74,102 +140,218 @@
pong.deleteKey(e.key);
});
pong.handleInputInterval = window.setInterval(handleInput, constants.handleInputIntervalMS);
// pong.handleInputInterval = window.setInterval(sendLoop, c.sendLoopIntervalMS);
pong.gameLoopInterval = window.setInterval(gameLoop, constants.gameLoopIntervalMS);
pong.drawLoopInterval = window.setInterval(drawLoop, constants.drawLoopIntervalMS);
}
const showOptions = () => {
showGameOption = true
showInvitations = false
}
const showInvitation = async() => {
showGameOption = false;
showInvitations = true;
invitations = await fetch("http://transcendance:8080/api/v2/game/invitations")
.then(x => x.json())
invitations.length !== 0 ? isThereAnyInvitation = true : isThereAnyInvitation = false
}
const rejectInvitation = async(invitation) => {
await fetch("http://transcendance:8080/api/v2/game/decline",{
method: "POST",
headers: { 'Content-Type': 'application/json'},
body: JSON.stringify({
token : invitation.token
})
})
.then(x => x.json())
.catch(error => console.log(error))
showInvitation()
}
const acceptInvitation = async(invitation : any) => {
await fetch("http://transcendance:8080/api/v2/game/accept",{
method: "POST",
headers: { 'Content-Type': 'application/json'},
body: JSON.stringify({
token : invitation.token
})
})
.then(x => x.json())
.catch(error => {
console.log(error)
})
showInvitation()
initGameForPrivateParty(invitation)
}
</script>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<Header />
<body>
{#if optionsAreNotSet}
<form on:submit|preventDefault={init}>
<div id="div_game_options">
<div id="preload_font">.</div>
{#if showError === true}
<div id="div_game" in:fly="{{ y: 10, duration: 1000 }}">
<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>
<!-- svelte-ignore a11y-label-has-associated-control -->
<label>sound :</label>
<input type="radio" id="sound_on" name="sound_selector" bind:group={sound} value="on">
<label for="sound_on">on</label>
<input type="radio" id="sound_off" name="sound_selector" bind:group={sound} value="off">
<label for="sound_off">off</label>
</div>
<div>
<button id="play_pong_button">PLAY</button>
</div>
<legend>Error</legend>
<p>{errorMessageWhenAttemptingToGetATicket}</p>
<button id="pong_button">Retry</button>
</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>
{/if}
{#if showWaitPage === true}
<div id="div_game" in:fly="{{ y: 10, duration: 1000 }}">
<fieldset>
<legend>Connecting to the game...</legend>
<p>{waitingMessage}</p>
</fieldset>
</div>
{/if}
{#if optionsAreNotSet}
{#if showGameOption === true}
<div id="game_option">
<form on:submit|preventDefault={() => initGame()}>
<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>
<p>sound :</p>
<input type="radio" id="sound_on" name="sound_selector" bind:group={sound} value="on">
<label for="sound_on">on</label>
<input type="radio" id="sound_off" name="sound_selector" bind:group={sound} value="off">
<label for="sound_off">off</label>
</div>
<div>
<input type="checkbox" id="isSomeoneIsIvited" bind:checked={isSomeoneIsIvited}>
<label for="moving_walls">Invite a friend</label>
</div>
{#if isSomeoneIsIvited === 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>
</div>
{/if}
{#if showInvitations}
<div id="invitations_options" in:fly="{{ y: 10, duration: 1000 }}">
<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(invitation)}>V</button>
<button id="pong_button" on:click={() => rejectInvitation(invitation)}>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>
</div>
{/if}
{/if}
<div id="canvas_container">
<!-- <p> =) </p> -->
</div>
<div id="canvas_container">
<!-- <p> =) </p> -->
</div>
</body>
<style>
@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_instructions {
text-align: center;
font-family: "Bit5x3";
color: rgb(245, 245, 245);
font-size: large;
}
#div_game_options {
margin-top: 20px;
#users_name {
text-align: center;
font-family: "Bit5x3";
color: rgb(245, 245, 245);
font-size: x-large;
}
#div_game_options fieldset {
#div_game {
text-align: center;
font-family: "Bit5x3";
color: rgb(245, 245, 245);
font-size: x-large;
}
#error_notification {
text-align: center;
display: block;
font-family: "Bit5x3";
color: rgb(143, 19, 19);
font-size: x-large;
}
#div_game fieldset {
max-width: 50vw;
width: auto;
margin: 0 auto;
}
#div_game_options fieldset div {
#div_game fieldset div {
padding: 10px;
}
#play_pong_button {
#pong_button {
font-family: "Bit5x3";
color: rgb(245, 245, 245);
background-color: #333333;
@@ -177,7 +359,7 @@ body {
padding: 10px;
}
canvas {
background-color: #333333;
background-color: #ff0000;
max-width: 75vw;
/* max-height: 100vh; */
width: 80%;

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

@@ -34,6 +34,8 @@ export const clientInfoSpectator = new ClientInfoSpectator(); // WIP, could refa
export function initWebSocket(options: en.MatchOptions, token: string, username: string, privateMatch = false, playerTwoUsername?: string)
{
socket = new WebSocket(wsUrl, "json");
console.log("Infos from ws.ts : options => " + options + " token => " + token + " username => " + username + " priavte match => " + privateMatch
+ " player two => " + playerTwoUsername)
socket.addEventListener("open", (event) => {
if (privateMatch) {
socket.send(JSON.stringify( new ev.ClientAnnouncePlayer(options, token, username, privateMatch, playerTwoUsername) ));

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

@@ -24,6 +24,7 @@
<img src="/img/potato_logo.png" alt="Potato Pong Logo" on:click={() => (push('/'))}>
<h1>Potato Pong</h1>
<nav>
<button on:click={() => (push('/game'))}>Game</button>
{#if $location !== '/profile'}
<button on:click={() => (push('/profile'))}>My Profile</button>
{:else if $location === '/profile'}
@@ -52,11 +53,11 @@
src:url('/fonts/Bondi.ttf.woff') format('woff'),
url('/fonts/Bondi.ttf.svg#Bondi') format('svg'),
url('/fonts/Bondi.ttf.eot'),
url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');
url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
/* There is a bunch of unncessary shit in here... why so many flex grids, why is everything the same class? just seemed easier but... */
@@ -116,4 +117,4 @@
/* .none{
} */
</style>
</style>