changements pour l'env (encore) + corrections de quelques bugs dans game_server

This commit is contained in:
batche
2023-01-02 19:20:24 +01:00
parent 095108d35e
commit 8586e15cef
28 changed files with 182 additions and 163 deletions

View File

@@ -8,6 +8,7 @@
"name": "svelte-app",
"version": "1.0.0",
"dependencies": {
"dotenv": "^16.0.3",
"sirv-cli": "^2.0.0",
"socket.io-client": "^4.5.4",
"svelte-spa-router": "^3.3.0"
@@ -17,6 +18,7 @@
"@rollup/plugin-node-resolve": "^11.0.0",
"@rollup/plugin-typescript": "^8.0.0",
"@tsconfig/svelte": "^2.0.0",
"@types/node": "^18.11.18",
"rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-livereload": "^2.0.0",
@@ -267,9 +269,9 @@
"dev": true
},
"node_modules/@types/node": {
"version": "18.11.9",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
"integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==",
"version": "18.11.18",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
"integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
"dev": true
},
"node_modules/@types/pug": {
@@ -522,6 +524,14 @@
"node": ">=8"
}
},
"node_modules/dotenv": {
"version": "16.0.3",
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
"integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==",
"engines": {
"node": ">=12"
}
},
"node_modules/engine.io-client": {
"version": "6.2.3",
"resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.2.3.tgz",

View File

@@ -13,6 +13,7 @@
"@rollup/plugin-node-resolve": "^11.0.0",
"@rollup/plugin-typescript": "^8.0.0",
"@tsconfig/svelte": "^2.0.0",
"@types/node": "^18.11.18",
"rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-livereload": "^2.0.0",
@@ -25,6 +26,7 @@
"typescript": "^4.0.0"
},
"dependencies": {
"dotenv": "^16.0.3",
"sirv-cli": "^2.0.0",
"socket.io-client": "^4.5.4",
"svelte-spa-router": "^3.3.0"

View File

@@ -30,6 +30,7 @@ function serve() {
};
}
export default {
input: 'src/main.ts',
output: {

View File

@@ -1,5 +0,0 @@
<script context="module">
export const Domain = "transcendance";
export const Port = "8080";
export const PortIo = "8080";
</script>

View File

@@ -0,0 +1,3 @@
export const Domain = "transcendance";
export const Port = "8080";
export const PortIo = Port;

View File

@@ -1,4 +1,7 @@
import App from './App.svelte';
import dotenv from 'dotenv';
dotenv.config();
const app = new App({
target: document.body,
props: {
@@ -6,4 +9,4 @@ const app = new App({
}
});
export default app;
//# sourceMappingURL=main.js.map
//# sourceMappingURL=main.js.map

View File

@@ -7,4 +7,4 @@ const app = new App({
}
});
export default app;
export default app;

View File

@@ -3,13 +3,13 @@
import { push } from "svelte-spa-router";
import { onMount } from 'svelte';
import { get } from "svelte/store";
import { Domain, Port } from "../Constantes.svelte";
import { Domain, Port } from "../Constantes";
let user;
onMount(async () => {
user = await fetch(`http://${Domain}:${Port}/api/v2/user`)
user = await fetch(`http://${process.env.WEBSITE_HOST}:${Port}/api/v2/user`)
.then((resp) => resp.json())
// i mean i could do a failed to load user or some shit, maybe with a .catch or something? but atm why bother

View File

@@ -1,19 +1,7 @@
<script lang="ts">
import { onMount } from "svelte";
import { push } from "svelte-spa-router";
import { Domain, Port } from "../Constantes.svelte";
// onMount( async() => {
// await fetch(`http://${Domain}:${Port}/api/v2/auth/2fa/generate`,
// {
// method: 'POST',
// })
// .then(response => {return response.blob()})
// .then(blob => {
// const url = URL.createObjectURL(blob);
// qrCodeImg = url;
// });
// });
import { Domain, Port } from "../Constantes";
let qrCodeImg;

View File

@@ -3,7 +3,7 @@
import { onMount, onDestroy } from "svelte";
import Header from '../../pieces/Header.svelte';
import { fade, fly } from 'svelte/transition';
import { Domain, Port } from "../../Constantes.svelte";
import { Domain, Port } from "../../Constantes";
import * as pong from "./client/pong";
import { gameState } from "./client/ws";
@@ -90,6 +90,7 @@
hiddenGame = false;
}
// TODO: Un "else" peut-être ? Si pas de token on fait un truc ?
// Si on ne rentre pas dans le else if, du coup il ne se passe rien.
}
const initGameForInvitedPlayer = async(invitation : any) =>

View File

@@ -4,7 +4,7 @@
import Header from '../../pieces/Header.svelte';
import MatchListElem from "../../pieces/MatchListElem.svelte";
import { fade, fly } from 'svelte/transition';
import { Domain, Port } from "../../Constantes.svelte";
import { Domain, Port } from "../../Constantes";
import * as pongSpectator from "./client/pongSpectator";
import { gameState } from "./client/ws";
@@ -17,36 +17,38 @@
//Game's stuff client side only
const gameAreaId = "game_area";
let sound = "off";
const dummyMatchList = [
{
gameSessionId: gameSessionIdPLACEHOLDER,
matchOptions: pongSpectator.MatchOptions.noOption,
playerOneUsername: "toto",
playerTwoUsername: "bruno",
},
{
gameSessionId: gameSessionIdPLACEHOLDER,
matchOptions: pongSpectator.MatchOptions.multiBalls,
playerOneUsername: "pl1",
playerTwoUsername: "pl2",
},
{
gameSessionId: "id6543",
matchOptions: pongSpectator.MatchOptions.movingWalls | pongSpectator.MatchOptions.multiBalls,
playerOneUsername: "bertand",
playerTwoUsername: "cassandre",
},
{
gameSessionId: "id3452",
matchOptions: pongSpectator.MatchOptions.multiBalls,
playerOneUsername: "madeleine",
playerTwoUsername: "jack",
},
];
let matchList = dummyMatchList;
// const dummyMatchList = [
// {
// gameSessionId: gameSessionIdPLACEHOLDER,
// matchOptions: pongSpectator.MatchOptions.noOption,
// playerOneUsername: "toto",
// playerTwoUsername: "bruno",
// },
// {
// gameSessionId: gameSessionIdPLACEHOLDER,
// matchOptions: pongSpectator.MatchOptions.multiBalls,
// playerOneUsername: "pl1",
// playerTwoUsername: "pl2",
// },
// {
// gameSessionId: "id6543",
// matchOptions: pongSpectator.MatchOptions.movingWalls | pongSpectator.MatchOptions.multiBalls,
// playerOneUsername: "bertand",
// playerTwoUsername: "cassandre",
// },
// {
// gameSessionId: "id3452",
// matchOptions: pongSpectator.MatchOptions.multiBalls,
// playerOneUsername: "madeleine",
// playerTwoUsername: "jack",
// },
// ];
let matchList = [];
//html boolean for pages
let hiddenGame = true;
let hiddenMatchList = false;
onMount( async() => {
user = await fetch(`http://${Domain}:${Port}/api/v2/user`)
@@ -54,7 +56,13 @@
allUsers = await fetch(`http://${Domain}:${Port}/api/v2/user/all`)
.then( x => x.json() );
// WIP: fetch for match list here
matchList = dummyMatchList;
const responseForMatchList = await fetch(`http://${Domain}:${Port}/api/v2/game/match/all`)
const jsonForMatchList = await responseForMatchList.json();
matchList = jsonForMatchList;
console.log("matchList");
if (matchList.length <= 0)
hiddenMatchList = true;
console.log(matchList);
})
onDestroy( async() => {
@@ -70,11 +78,16 @@
resetPage();
};
function resetPage() {
async function resetPage() {
hiddenGame = true;
pongSpectator.destroy();
// WIP: fetch for match list here
matchList = dummyMatchList;
matchList = await fetch(`http://${Domain}:${Port}/api/v2/game/match/all`)
.then( x => x.json() );
console.log("matchList");
if (matchList.length <= 0)
hiddenMatchList = true;
console.log(matchList);
};
</script>
@@ -93,7 +106,10 @@
<div id="div_game">
<div id="game_options">
<fieldset>
<legend>options</legend>
{#if hiddenMatchList}
<legend>no match available</legend>
{:else}
<legend>options</legend>
<div>
<p>sound :</p>
<input type="radio" id="sound_on" name="sound_selector" bind:group={sound} value="on">
@@ -101,13 +117,15 @@
<input type="radio" id="sound_off" name="sound_selector" bind:group={sound} value="off">
<label for="sound_off">off</label>
</div>
<menu id="match_list">
{#each matchList as match}
<MatchListElem match={match} on:click={(e) => initGameSpectator(match.gameServerIdOfTheMatch, match.gameOptions)} />
{/each}
</menu>
{/if}
</fieldset>
</div>
<menu id="match_list">
{#each matchList as match}
<MatchListElem match={match} on:click={(e) => initGameSpectator(match.gameSessionId, match.matchOptions)} />
{/each}
</menu>
</div>
{:else}
<div id="div_game">

View File

@@ -2,7 +2,7 @@
<script lang="ts">
import { onMount, onDestroy } from "svelte";
import Header from "../../pieces/Header.svelte";
import { Domain, Port } from "../../Constantes.svelte";
import { Domain, Port } from "../../Constantes";
//user's stuff
let currentUser;

View File

@@ -2,7 +2,7 @@
import { onMount } from 'svelte';
import GenerateUserDisplay from '../../pieces/GenerateUserDisplay.svelte';
import { Domain, Port } from "../../Constantes.svelte";
import { Domain, Port } from "../../Constantes";
import Chat from '../../pieces/chat/Chat.svelte';

View File

@@ -2,7 +2,7 @@
import { onMount } from "svelte";
import { binding_callbacks } from "svelte/internal";
import { Domain, Port } from "../../Constantes.svelte";
import { Domain, Port } from "../../Constantes";
import Button from "../../pieces/Button.svelte";
import DisplayAUser from "../../pieces/DisplayAUser.svelte";

View File

@@ -3,7 +3,7 @@
import Card from '../../pieces/Card.svelte';
import {onMount} from 'svelte';
import { push } from 'svelte-spa-router';
import { Domain, Port } from "../../Constantes.svelte";
import { Domain, Port } from "../../Constantes";
import Button from '../../pieces/Button.svelte';
let user;

View File

@@ -2,7 +2,7 @@
import { onMount } from 'svelte';
import GenerateUserDisplay from './GenerateUserDisplay.svelte';
import { Domain, Port } from "../Constantes.svelte";
import { Domain, Port } from "../Constantes";
// import {updateGeneratedUser} from './GenerateUserDisplay.svelte';
export let aUsername;

View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { onMount } from 'svelte';
import { Domain, Port } from "../Constantes.svelte";
import { Domain, Port } from "../Constantes";
export let user;
export let primary;
@@ -43,7 +43,7 @@
let index = 0, interval = 1000;
const rand = (min, max) =>
const rand = (min, max) =>
Math.floor(Math.random() * (max - min + 1)) + min;
// it's unhappy that "star" isn't typeset, no idea what to do about it...
@@ -65,7 +65,7 @@
for (let i = 0; i < 3; i++) {
setTimeout(() => {
animate(stars[i]);
setInterval(() => animate(stars[i]), 1000);
}, index++ * (interval / 3))
}
@@ -80,7 +80,7 @@
<!-- <img class="icon" src="{user.image_url}" alt="default user icon"> -->
<img class="avatar" src="{avatar}" alt="default user icon">
<div class="username">{user.username}</div>
<div class="rank">Rank:
<div class="rank">Rank:
<span class="glitter">
<span bind:this={stars[0]} class="glitter-star">
<svg viewBox="0 0 512 512">
@@ -166,7 +166,7 @@
/* Glittery Star Stuff */
:root {
:root {
--purple: rgb(123, 31, 162);
--violet: rgb(103, 58, 183);
--pink: rgb(244, 143, 177);
@@ -177,7 +177,7 @@
from {
background-position: 0% center;
}
to {
background-position: -200% center;
}
@@ -187,7 +187,7 @@
from, to {
transform: scale(0);
}
50% {
transform: scale(1);
}
@@ -197,7 +197,7 @@
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
@@ -242,7 +242,7 @@
var(--purple)
);
background-size: 200%;
/* Keep these for Safari and chrome */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { push } from "svelte-spa-router";
import { location } from 'svelte-spa-router';
import { Domain, Port } from "../Constantes.svelte";
import { Domain, Port } from "../Constantes";
import active from 'svelte-spa-router/active'
// or i could leave them all and not display if they're active?

View File

@@ -4,8 +4,8 @@
import { MatchOptions } from "../pages/game/client/pongSpectator";
export let match: {
gameSessionId: string,
matchOptions: MatchOptions,
gameServerIdOfTheMatch: string,
gameOptions: MatchOptions,
playerOneUsername: string,
playerTwoUsername: string
};
@@ -13,14 +13,14 @@
let matchOptionsString = "";
onMount( async() => {
if (match.matchOptions === MatchOptions.noOption) {
if (match.gameOptions === MatchOptions.noOption) {
matchOptionsString = "standard";
}
else {
if (match.matchOptions & MatchOptions.multiBalls) {
if (match.gameOptions & MatchOptions.multiBalls) {
matchOptionsString += "multi balls";
}
if (match.matchOptions & MatchOptions.movingWalls) {
if (match.gameOptions & MatchOptions.movingWalls) {
if (matchOptionsString) { matchOptionsString += ", "; }
matchOptionsString += "moving walls";
}

View File

@@ -2,7 +2,7 @@
<script lang="ts">
import Layouts from './Chat_layouts.svelte';
import { Domain, PortIo } from "../../Constantes.svelte";
import { Domain, PortIo } from "../../Constantes";
export let color = "transparent";
/* web sockets with socket.io