Merge branch 'luke' into cherif_back_and_game
This commit is contained in:
batche
BIN
srcs/requirements/svelte/api_front/public/favicon.ico
Normal file
BIN
srcs/requirements/svelte/api_front/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
@@ -6,7 +6,7 @@
|
||||
|
||||
<title>Potato Pong</title>
|
||||
|
||||
<link rel='icon' type='image/png' href='/favicon.png'>
|
||||
<link rel='icon' type='image/x-icon' href='/favicon.ico'>
|
||||
<link rel='stylesheet' href='/global.css'>
|
||||
<link rel='stylesheet' href='/build/bundle.css'>
|
||||
|
||||
|
||||
@@ -34,11 +34,10 @@
|
||||
let token = "";
|
||||
|
||||
//Game's stuff gameserver side
|
||||
let sound = false;
|
||||
let sound = "on"; // possible de faire un boolean avec svelte et radio buttons ?
|
||||
let multi_balls = false;
|
||||
let moving_walls = false;
|
||||
let matchOption : enumeration.MatchOptions = enumeration.MatchOptions.noOption;
|
||||
|
||||
let matchOptions : enumeration.MatchOptions = enumeration.MatchOptions.noOption;
|
||||
//html boolean for pages
|
||||
let showWaitPage = false;
|
||||
let showInvitations = false;
|
||||
@@ -61,71 +60,17 @@
|
||||
})
|
||||
|
||||
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
|
||||
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 ;
|
||||
// }
|
||||
initAudio(sound)
|
||||
initMatchOptions(matchOption)
|
||||
optionsAreNotSet = false
|
||||
initPong(new GameArea())
|
||||
initGc(new GameComponentsClient(matchOption, pong.ctx))
|
||||
initStartFunction(start)
|
||||
initWebSocket(matchOption)
|
||||
}
|
||||
|
||||
function start() : void {
|
||||
@@ -188,83 +133,35 @@
|
||||
|
||||
<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>
|
||||
</fieldset>
|
||||
</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}
|
||||
<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" 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>
|
||||
<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">
|
||||
@@ -276,29 +173,26 @@
|
||||
|
||||
@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 {
|
||||
#div_game_options {
|
||||
text-align: center;
|
||||
font-family: "Bit5x3";
|
||||
color: rgb(245, 245, 245);
|
||||
|
||||
@@ -5,7 +5,7 @@ import { Vector, VectorInteger } from "../../shared_js/class/Vector.js";
|
||||
import { TextElem, TextNumericValue } from "./Text.js";
|
||||
import { RectangleClient, MovingRectangleClient, RacketClient, BallClient, Line } from "./RectangleClient.js";
|
||||
import { GameComponents } from "../../shared_js/class/GameComponents.js";
|
||||
import { MovingRectangle } from "../../shared_js/class/Rectangle.js";
|
||||
import type { MovingRectangle } from "../../shared_js/class/Rectangle.js";
|
||||
|
||||
class GameComponentsExtensionForClient extends GameComponents {
|
||||
wallTop: RectangleClient | MovingRectangleClient;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
|
||||
import * as en from "../../shared_js/enums.js"
|
||||
import * as ev from "../../shared_js/class/Event.js"
|
||||
import type * as en from "../../shared_js/enums.js"
|
||||
import type * as ev from "../../shared_js/class/Event.js"
|
||||
|
||||
export class InputHistory {
|
||||
input: en.InputEnum;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
|
||||
import { Vector, VectorInteger } from "../../shared_js/class/Vector.js";
|
||||
import { Component, GraphicComponent, Moving } from "../../shared_js/class/interface.js";
|
||||
import type { GraphicComponent } from "../../shared_js/class/interface.js";
|
||||
import { Rectangle, MovingRectangle, Racket, Ball } from "../../shared_js/class/Rectangle.js";
|
||||
import { soundPongArr } from "../audio.js"
|
||||
import { random } from "../utils.js";
|
||||
@@ -81,7 +81,9 @@ export class BallClient extends Ball implements GraphicComponent {
|
||||
}
|
||||
bounce(collider?: Rectangle) {
|
||||
this._bounceAlgo(collider);
|
||||
soundPongArr[ Math.floor(random(0, soundPongArr.length)) ].play();
|
||||
let i = Math.floor(random(0, soundPongArr.length));
|
||||
soundPongArr[ i ].play();
|
||||
console.log(`sound_i=${i}`); // debug log
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
|
||||
import { Vector, VectorInteger } from "../../shared_js/class/Vector.js";
|
||||
import { Component } from "../../shared_js/class/interface.js";
|
||||
import type { Component } from "../../shared_js/class/interface.js";
|
||||
|
||||
// conflict with Text
|
||||
export class TextElem implements Component {
|
||||
|
||||
@@ -3,8 +3,8 @@ import * as c from "./constants.js";
|
||||
import * as en from "../shared_js/enums.js"
|
||||
import { gc, matchOptions, clientInfo, clientInfoSpectator} from "./global.js";
|
||||
import { wallsMovements } from "../shared_js/wallsMovement.js";
|
||||
import { RacketClient } from "./class/RectangleClient.js";
|
||||
import { VectorInteger } from "../shared_js/class/Vector.js";
|
||||
import type { RacketClient } from "./class/RectangleClient.js";
|
||||
import type { VectorInteger } from "../shared_js/class/Vector.js";
|
||||
|
||||
let actual_time: number = Date.now();
|
||||
let last_time: number;
|
||||
|
||||
@@ -30,11 +30,17 @@ export let socket: WebSocket; /* TODO: A way to still use "const" not "let" ? */
|
||||
export const clientInfo = new ClientInfo();
|
||||
export const clientInfoSpectator = new ClientInfoSpectator(); // WIP, could refactor this
|
||||
|
||||
export function initWebSocket(options: en.MatchOptions)
|
||||
|
||||
export function initWebSocket(options: en.MatchOptions, token: string, username: string, privateMatch = false, playerTwoUsername?: string)
|
||||
{
|
||||
socket = new WebSocket(wsUrl, "json");
|
||||
socket.addEventListener("open", (event) => {
|
||||
socket.send(JSON.stringify( new ev.ClientAnnouncePlayer(options, clientInfo.id) ));
|
||||
if (privateMatch) {
|
||||
socket.send(JSON.stringify( new ev.ClientAnnouncePlayer(options, token, username, privateMatch, playerTwoUsername) ));
|
||||
}
|
||||
else {
|
||||
socket.send(JSON.stringify( new ev.ClientAnnouncePlayer(options, token, username) ));
|
||||
}
|
||||
});
|
||||
// socket.addEventListener("message", logListener); // for testing purpose
|
||||
socket.addEventListener("message", preMatchListener);
|
||||
|
||||
@@ -89,12 +89,21 @@ export class ClientAnnounce extends ClientEvent {
|
||||
}
|
||||
|
||||
export class ClientAnnouncePlayer extends ClientAnnounce {
|
||||
clientId: string;
|
||||
clientId: string; // unused
|
||||
matchOptions: en.MatchOptions;
|
||||
constructor(matchOptions: en.MatchOptions, clientId: string = "") {
|
||||
token: string;
|
||||
username: string;
|
||||
privateMatch: boolean;
|
||||
playerTwoUsername?: string;
|
||||
constructor(matchOptions: en.MatchOptions, token: string, username: string, privateMatch: boolean = false, playerTwoUsername?: string) {
|
||||
super(en.ClientRole.player);
|
||||
this.clientId = clientId;
|
||||
this.matchOptions = matchOptions;
|
||||
this.token = token;
|
||||
this.username = username;
|
||||
this.privateMatch = privateMatch;
|
||||
if (playerTwoUsername) {
|
||||
this.playerTwoUsername = playerTwoUsername;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
|
||||
import { Vector, VectorInteger } from "./Vector.js";
|
||||
import { Component, Moving } from "./interface.js";
|
||||
import type { Component, Moving } from "./interface.js";
|
||||
import * as c from "../constants.js"
|
||||
|
||||
export class Rectangle implements Component {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
import { Vector, VectorInteger } from "./Vector.js";
|
||||
import type { Vector, VectorInteger } from "./Vector.js";
|
||||
|
||||
export interface Component {
|
||||
pos: VectorInteger;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
import { MovingRectangle } from "./class/Rectangle.js";
|
||||
import type { MovingRectangle } from "./class/Rectangle.js";
|
||||
|
||||
export function random(min: number = 0, max: number = 1) {
|
||||
return Math.random() * (max - min) + min;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
|
||||
import * as c from "./constants.js";
|
||||
import { MovingRectangle } from "../shared_js/class/Rectangle.js";
|
||||
import { GameComponents } from "./class/GameComponents.js";
|
||||
import type { MovingRectangle } from "../shared_js/class/Rectangle.js";
|
||||
import type { GameComponents } from "./class/GameComponents.js";
|
||||
|
||||
export function wallsMovements(delta: number, gc: GameComponents)
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user