oqkdjqlkjsdxlqkJSD
This commit is contained in:
batche
@@ -1,368 +1,74 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount, onDestroy } from "svelte";
|
import { onMount, onDestroy } from "svelte";
|
||||||
import * as enumeration from './shared_js/enums'
|
import Header from "../../pieces/Header.svelte";
|
||||||
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'
|
|
||||||
import Header from '../../pieces/Header.svelte';
|
|
||||||
import { fade, fly } from 'svelte/transition'
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//user's stuff
|
//user's stuff
|
||||||
let user;
|
let currentUser;
|
||||||
let allUsers;
|
let allUsers;
|
||||||
|
let idInterval;
|
||||||
//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 matchOption : enumeration.MatchOptions = enumeration.MatchOptions.noOption;
|
|
||||||
|
|
||||||
//html boolean for pages
|
|
||||||
let showWaitPage = false;
|
|
||||||
let showInvitations = false;
|
|
||||||
let showGameOption = true;
|
|
||||||
let showError = false;
|
|
||||||
|
|
||||||
let isThereAnyInvitation = false;
|
|
||||||
let invitations = [];
|
|
||||||
|
|
||||||
|
|
||||||
let waitingMessage = "Please wait..."
|
|
||||||
let errorMessageWhenAttemptingToGetATicket = "";
|
|
||||||
|
|
||||||
onMount( async() => {
|
onMount( async() => {
|
||||||
user = await fetch('http://transcendance:8080/api/v2/user')
|
currentUser = await fetch('http://transcendance:8080/api/v2/user')
|
||||||
.then( x => x.json() );
|
.then( x => x.json() );
|
||||||
allUsers = await fetch('http://transcendance:8080/api/v2/user/all')
|
allUsers = await fetch('http://transcendance:8080/api/v2/game/ranking')
|
||||||
.then( x => x.json() );
|
.then( x => x.json() );
|
||||||
|
idInterval = setInterval(fetchScores, 10000);
|
||||||
})
|
})
|
||||||
|
|
||||||
onDestroy( async() => {
|
onDestroy( async() => {
|
||||||
|
clearInterval(idInterval);
|
||||||
})
|
})
|
||||||
|
|
||||||
const initGame = async() => {
|
function fetchScores() {
|
||||||
optionsAreNotSet = false
|
fetch('http://transcendance:8080/api/v2/game/ranking')
|
||||||
showWaitPage = true
|
.then( x => x.json() )
|
||||||
if (multi_balls === true)
|
.then( x => allUsers = x );
|
||||||
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 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();
|
|
||||||
}, responseWhenGrantTokenume);
|
|
||||||
}
|
|
||||||
|
|
||||||
function responseWhenGrantTokenume(): 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.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>
|
</script>
|
||||||
|
|
||||||
<Header />
|
<Header />
|
||||||
|
|
||||||
<body>
|
<div class="container">
|
||||||
<div id="preload_font">.</div>
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
{#if showError === true}
|
<h1>Ranking</h1>
|
||||||
<div id="div_game" in:fly="{{ y: 10, duration: 1000 }}">
|
|
||||||
<fieldset>
|
|
||||||
<legend>Error</legend>
|
|
||||||
<p>{errorMessageWhenAttemptingToGetATicket}</p>
|
|
||||||
<button id="pong_button">Retry</button>
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<table class="table table-striped">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">#</th>
|
||||||
|
<th scope="col">Username</th>
|
||||||
|
<th scope="col">Win</th>
|
||||||
|
<th scope="col">Lose</th>
|
||||||
|
<th scope="col">Draw</th>
|
||||||
|
<th scope="col">Games Played</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{#each allUsers as user, i}
|
||||||
|
<tr>
|
||||||
|
<th scope="row">{i + 1}</th>
|
||||||
|
{#if user.username === currentUser.username}
|
||||||
|
<td><b>You ({user.username})</b></td>
|
||||||
|
{:else}
|
||||||
|
<td>{user.username}</td>
|
||||||
{/if}
|
{/if}
|
||||||
|
<td>{user.stats.winGame}</td>
|
||||||
{#if showWaitPage === true}
|
<td>{user.stats.loseGame}</td>
|
||||||
<div id="div_game" in:fly="{{ y: 10, duration: 1000 }}">
|
<td>{user.stats.drawGame}</td>
|
||||||
<fieldset>
|
<td>{user.stats.totalGame}</td>
|
||||||
<legend>Connecting to the game...</legend>
|
</tr>
|
||||||
<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}
|
{/each}
|
||||||
</select>
|
</tbody>
|
||||||
{/if}
|
</table>
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div id="canvas_container">
|
|
||||||
<!-- <p> =) </p> -->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
<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;
|
|
||||||
}
|
|
||||||
#preload_font {
|
|
||||||
font-family: "Bit5x3";
|
|
||||||
opacity:0;523LsTrY7n5EwR0s+Om0pdBPFFF5DrShb/x30XuICASgpri15boksH8kWLezj/5syRHPugI0HTGU6/TQgkUx2t7yEWCFGiEDrb/Mv6NKXirVW/W4
|
|
||||||
height:0;
|
|
||||||
width:0;
|
|
||||||
display:inline-block;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
background-color: #222425;
|
|
||||||
}
|
|
||||||
#canvas_container {
|
|
||||||
text-align: center;
|
|
||||||
/* border: dashed rgb(245, 245, 245) 5px; */
|
|
||||||
/* max-height: 80vh; */
|
|
||||||
/* overflow: hidden; */
|
|
||||||
}
|
|
||||||
|
|
||||||
#users_name {
|
|
||||||
text-align: center;
|
|
||||||
font-family: "Bit5x3";
|
|
||||||
color: rgb(245, 245, 245);
|
|
||||||
font-size: x-large;
|
|
||||||
}
|
|
||||||
|
|
||||||
#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 fieldset div {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
#pong_button {
|
|
||||||
font-family: "Bit5x3";
|
|
||||||
color: rgb(245, 245, 245);
|
|
||||||
background-color: #333333;
|
|
||||||
font-size: x-large;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
canvas {
|
|
||||||
background-color: #ff0000;
|
|
||||||
max-width: 75vw;
|
|
||||||
/* max-height: 100vh; */
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -26,6 +26,7 @@
|
|||||||
<nav>
|
<nav>
|
||||||
<button on:click={() => (push('/game'))}>Game</button>
|
<button on:click={() => (push('/game'))}>Game</button>
|
||||||
<button on:click={() => (push('/matchlist'))}>Match List</button>
|
<button on:click={() => (push('/matchlist'))}>Match List</button>
|
||||||
|
<button on:click={() => (push('/ranking'))}>Ranking</button>
|
||||||
{#if $location !== '/profile'}
|
{#if $location !== '/profile'}
|
||||||
<button on:click={() => (push('/profile'))}>My Profile</button>
|
<button on:click={() => (push('/profile'))}>My Profile</button>
|
||||||
{:else if $location === '/profile'}
|
{:else if $location === '/profile'}
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ import UnauthorizedAccessPage from '../pages/UnauthorizedAccessPage.svelte';
|
|||||||
import { wrap } from 'svelte-spa-router/wrap'
|
import { wrap } from 'svelte-spa-router/wrap'
|
||||||
import TestPage from '../pages/TmpTestPage.svelte';
|
import TestPage from '../pages/TmpTestPage.svelte';
|
||||||
import Game from '../pages/game/Game.svelte';
|
import Game from '../pages/game/Game.svelte';
|
||||||
|
import Ranking from '../pages/Ranking.svelte';
|
||||||
import SpectatorMatchList from '../pages/SpectatorMatchList.svelte';
|
import SpectatorMatchList from '../pages/SpectatorMatchList.svelte';
|
||||||
|
|
||||||
|
|
||||||
@@ -15,26 +16,7 @@ export const primaryRoutes = {
|
|||||||
'/2fa': TwoFactorAuthentication,
|
'/2fa': TwoFactorAuthentication,
|
||||||
'/game': Game,
|
'/game': Game,
|
||||||
'/matchlist': SpectatorMatchList,
|
'/matchlist': SpectatorMatchList,
|
||||||
'/test': wrap({
|
'/ranking' : Ranking,
|
||||||
component: TestPage,
|
|
||||||
conditions: [
|
|
||||||
async(detail) => {
|
|
||||||
// THIS SHIT TOTALLY WORKS
|
|
||||||
// Yea in the end this might be the best thing, like also from a Security point of view
|
|
||||||
const user = await fetch('http://transcendance:8080/api/v2/user')
|
|
||||||
.then((resp) => resp.json())
|
|
||||||
|
|
||||||
console.log('in /test what is in user')
|
|
||||||
console.log(user)
|
|
||||||
|
|
||||||
if (user && user.username)
|
|
||||||
return true;
|
|
||||||
else
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
],
|
|
||||||
|
|
||||||
}),
|
|
||||||
'/profile': wrap({
|
'/profile': wrap({
|
||||||
component: ProfilePage,
|
component: ProfilePage,
|
||||||
conditions: [
|
conditions: [
|
||||||
|
|||||||
Reference in New Issue
Block a user