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

Minimal example GameSpectator.svelte page

Browse Source
This commit is contained in:
LuckyLaszlo
2022-12-22 18:24:07 +01:00
parent e80215204f
commit 8063f1c04c
5 changed files with 64 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,9 +4,7 @@
import Header from '../../pieces/Header.svelte'; import Header from '../../pieces/Header.svelte';
import { fade, fly } from 'svelte/transition'; import { fade, fly } from 'svelte/transition';
import * as enumeration from './shared_js/enums'; import * as pong from "./client/pong";
import * as pong from "./client/pong"
import * as pongSpectator from "./client/pongSpectator" // TODO init spectator
// Pour Chérif: variables indiquant l'état du match // Pour Chérif: variables indiquant l'état du match
import { matchEnded, matchAbort } from "./client/ws"; import { matchEnded, matchAbort } from "./client/ws";

55
srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte Normal file
View File

@@ -0,0 +1,55 @@
<script lang="ts">
import { onMount, onDestroy } from "svelte";
import Header from '../../pieces/Header.svelte';
import { fade, fly } from 'svelte/transition';
import * as pongSpectator from "./client/pongSpectator";
// Pour Chérif: variables indiquant l'état du match
import { matchEnded, matchAbort } from "./client/ws";
//user's stuff
let user;
let allUsers;
//Game's stuff client side only
const gameAreaId = "game_area";
//html boolean for pages
let hiddenGame = true;
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() => {
pongSpectator.destroy();
})
const initGameSpectator = async() => {
let gameSessionId = "ID_PLACEHOLDER"; // PLACEHOLDER
let matchOptions = 0; // PLACEHOLDER
let sound = "off"; // PLACEHOLDER
pongSpectator.init(matchOptions, sound, gameAreaId, gameSessionId);
hiddenGame = false;
};
</script>
<Header />
<!-- <div id="game_page"> Replacement for <body>.
Might become useless after CSS rework. -->
<div id="game_page">
<div id="canvas_container" hidden={hiddenGame}>
<canvas id={gameAreaId}/>
</div>
</div> <!-- div "game_page" -->
<style>
</style>

5
srcs/requirements/svelte/api_front/src/pages/game/client/init.ts
View File

@@ -24,11 +24,10 @@ export function computeMatchOptions(options: InitOptions)
return matchOptions; return matchOptions;
} }
export function initBase(options: InitOptions, gameAreaId: string) export function initBase(matchOptions: en.MatchOptions, sound: string, gameAreaId: string)
{ {
const matchOptions = computeMatchOptions(options);
initMatchOptions(matchOptions); initMatchOptions(matchOptions);
initAudio(options.sound); initAudio(sound);
initPong(new GameArea(gameAreaId)); initPong(new GameArea(gameAreaId));
initGc(new GameComponentsClient(matchOptions, pong.ctx)); initGc(new GameComponentsClient(matchOptions, pong.ctx));
} }

4
srcs/requirements/svelte/api_front/src/pages/game/client/pong.ts
View File

@@ -17,10 +17,10 @@ import { initStartFunction } from "./global.js"
export function init(options: InitOptions, gameAreaId: string, token: string) export function init(options: InitOptions, gameAreaId: string, token: string)
{ {
initBase(options, gameAreaId); const matchOptions = computeMatchOptions(options);
initBase(matchOptions, options.sound, gameAreaId);
initStartFunction(start); initStartFunction(start);
const matchOptions = computeMatchOptions(options);
if (options.isSomeoneIsInvited) { if (options.isSomeoneIsInvited) {
initWebSocket(matchOptions, token, options.playerOneUsername, true, options.playerTwoUsername, options.isInvitedPerson); initWebSocket(matchOptions, token, options.playerOneUsername, true, options.playerTwoUsername, options.isInvitedPerson);
} }

7
srcs/requirements/svelte/api_front/src/pages/game/client/pongSpectator.ts
View File

@@ -1,10 +1,9 @@
import * as c from "./constants.js" import * as c from "./constants.js"
import type * as en from "../shared_js/enums.js"
import { gameLoopSpectator } from "./gameLoop.js" import { gameLoopSpectator } from "./gameLoop.js"
import { drawLoop } from "./draw.js"; import { drawLoop } from "./draw.js";
import { initWebSocketSpectator } from "./ws.js"; import { initWebSocketSpectator } from "./ws.js";
import type { InitOptions } from "./class/InitOptions.js";
export { InitOptions } from "./class/InitOptions.js";
import { initBase, destroyBase, computeMatchOptions } from "./init.js"; import { initBase, destroyBase, computeMatchOptions } from "./init.js";
export { computeMatchOptions } from "./init.js"; export { computeMatchOptions } from "./init.js";
@@ -13,9 +12,9 @@ import { pong, gc } from "./global.js"
import { initStartFunction } from "./global.js" import { initStartFunction } from "./global.js"
export function init(options: InitOptions, gameAreaId: string, gameSessionId: string) export function init(matchOptions: en.MatchOptions, sound: string, gameAreaId: string, gameSessionId: string)
{ {
initBase(options, gameAreaId); initBase(matchOptions, sound, gameAreaId);
initStartFunction(start); initStartFunction(start);
initWebSocketSpectator(gameSessionId); initWebSocketSpectator(gameSessionId);