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

Vive le rouge !

Browse Source
This commit is contained in:
batche
2022-12-20 20:23:15 +01:00
parent fb7bfa0097
commit 77857a873d
11 changed files with 311 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>

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

@@ -20,21 +20,13 @@
let user;
let allUsers;
//init function
let isSecondPlayerAnsweredYes = false;
let isSecondPlayerRefused = false;
let isSomethingWentWrong = true;
//Game's stuff nest side
let optionsAreNotSet = true;
let invite_someone = false;
let isSomeoneIsIvited = false;
let playerTwoUsername = "";
let token = "";
//Game's stuff gameserver side
let sound = "";
let sound = "on";
let multi_balls = false;
let moving_walls = false;
let matchOption : enumeration.MatchOptions = enumeration.MatchOptions.noOption;
@@ -44,6 +36,7 @@
let showInvitations = false;
let showGameOption = true;
let showError = false;
let showCanvas = false;
let isThereAnyInvitation = false;
let invitations;
@@ -51,8 +44,6 @@
let waitingMessage = "Please wait..."
let errorMessageWhenAttemptingToGetATicket = "";
let responseToCheckIfOtherUserHasAnswered;
onMount( async() => {
user = await fetch('http://transcendance:8080/api/v2/user')
.then( x => x.json() );
@@ -68,23 +59,24 @@
matchOption |= enumeration.MatchOptions.multiBalls
if (moving_walls === true )
matchOption |= enumeration.MatchOptions.movingWalls
const res = await fetch("http://transcendance:8080/api/v2/game/ticket", {
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 : invite_someone
isGameIsWithInvitation : isSomeoneIsIvited
})
})
.then(x => x.json())
.catch(error => {
console.log(error)
})
if (res.status === 403 || res.status === 404 || res.status === 500)
const responseFromServer = await responseWhenGrantToken;
console.log("Response.ok : " + responseFromServer.ok )
console.log("//")
const responseInjson = await responseFromServer.json()
if (!responseFromServer.ok || !responseInjson.token)
{
errorMessageWhenAttemptingToGetATicket = res.message;
errorMessageWhenAttemptingToGetATicket = responseInjson.message;
showError = true;
setTimeout(() => {
showError = false;
@@ -92,40 +84,27 @@
optionsAreNotSet = true
playerTwoUsername = "";
matchOption = 0;
token = ""
}, 5000)
return ;
}
else if (res.status === 200)
else
{
initAudio(sound)
showError = false
showWaitPage = false
const token = responseInjson.token
console.log("Token === " + token)
if (sound === "off") {
initAudio(true);
}
else if (sound === "on") {
initAudio(false);
}
initMatchOptions(matchOption)
initPong(new GameArea())
initGc(new GameComponentsClient(matchOption, pong.ctx))
initStartFunction(start)
initWebSocket(matchOption)
console.log("Avant init websocket")
initWebSocket(matchOption, token, user.username)
}
// 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 {
@@ -134,10 +113,10 @@
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);
@@ -160,6 +139,7 @@
showInvitations = true;
invitations = await fetch("http://transcendance:8080/api/v2/game/invitations")
.then(x => x.json())
console.log(...invitations)
}
const rejectInvitation = async() => {
@@ -188,12 +168,13 @@
<body>
<div id="preload_font">.</div>
{#if showError === true}
<div id="div_game">
<fieldset>
<legend>Error</legend>
<p>{errorMessageWhenAttemptingToGetATicket}</p>
<button id="pong_button" on:click={() => push('/game')}>Retry</button>
<button id="pong_button">Retry</button>
</fieldset>
</div>
{/if}
@@ -223,14 +204,18 @@
<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>
<!-- 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>
<input type="checkbox" id="invite_someone" name="moving_walls" bind:checked={invite_someone}>
<input type="checkbox" id="isSomeoneIsIvited" name="moving_walls" bind:checked={isSomeoneIsIvited}>
<label for="moving_walls">Invite a friend</label>
</div>
{#if invite_someone === true}
{#if isSomeoneIsIvited === true}
<select bind:value={playerTwoUsername}>
{#each allUsers as user }
<option value={user.username}>{user.username}</option>
@@ -266,12 +251,13 @@
</div>
{/if}
{/if}
<div id="canvas_container">
<!-- <p> =) </p> -->
<canvas id="gameArea"></canvas>
</div>
</body>
<style>
@font-face {
@@ -312,6 +298,7 @@ body {
color: rgb(143, 19, 19);
font-size: x-large;
}
#div_game fieldset {
max-width: 50vw;
width: auto;
@@ -328,7 +315,7 @@ body {
padding: 10px;
}
canvas {
background-color: #333333;
background-color: #ff0000;
max-width: 75vw;
/* max-height: 100vh; */
width: 80%;

9
srcs/requirements/svelte/api_front/src/pages/game/client/class/GameArea.ts
View File

@@ -9,13 +9,14 @@ export class GameArea {
canvas: HTMLCanvasElement;
ctx: CanvasRenderingContext2D;
constructor() {
this.canvas = document.createElement("canvas");
this.canvas = document.getElementById("gameArea");
if (this.canvas)
console.log("Le canvas a été trouvé !")
else
console.log("Le canvas a été mangé par un être mystérieux...")
this.ctx = this.canvas.getContext("2d") as CanvasRenderingContext2D;
this.canvas.width = c.CanvasWidth;
this.canvas.height = c.CanvasWidth / c.CanvasRatio;
let container = document.getElementById("canvas_container");
if (container)
container.insertBefore(this.canvas, container.childNodes[0]);
}
addKey(key: string) {
key = key.toLowerCase();