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

changes in Game.svelte

Browse Source 
+ playerOne is always in left
+ kick players after match end
+ slow down ball and player
+ re in Makefile
This commit is contained in:
LuckyLaszlo
2022-12-22 00:27:41 +01:00
parent 351ffc1756
commit 84062d5a89
12 changed files with 159 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
srcs/requirements/svelte/api_front/src/pages/SpectatorMatchList.svelte
View File

@@ -1,4 +1,5 @@
<script lang="ts">
import Header from '../pieces/Header.svelte';
import MatchListElem from "../pieces/MatchListElem.svelte";
let arr = [
@@ -21,6 +22,7 @@
</script>
<!-- -->
<Header/>
<menu>
{#each arr as match}
<MatchListElem match={match}/>

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

@@ -1,9 +1,9 @@
<script lang="ts">
import { onMount, onDestroy } from "svelte";
import * as enumeration from './shared_js/enums'
import * as constants from './client/constants'
import { initPong, initGc, initMatchOptions, initStartFunction } from './client/global'
/* TODO Luke: refactoring */
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';
@@ -13,8 +13,10 @@
import { initWebSocket } from './client/ws';
import { initAudio } from './client/audio';
import { pong, gc} from './client/global'
import { onMount, onDestroy } from "svelte";
import Header from '../../pieces/Header.svelte';
import { fade, fly } from 'svelte/transition'
import { fade, fly } from 'svelte/transition';
@@ -24,11 +26,13 @@
//Game's stuff nest side
let optionsAreNotSet = true;
let isSomeoneIsIvited = false;
let isSomeoneIsInvited = false;
let playerTwoUsername = "";
//Game's stuff gameserver side
//Game's stuff client side only
let sound = "on";
let gameAreaId = "game_area";
//Game's stuff gameserver side
let multi_balls = false;
let moving_walls = false;
let matchOption : enumeration.MatchOptions = enumeration.MatchOptions.noOption;
@@ -38,6 +42,7 @@
let showInvitations = false;
let showGameOption = true;
let showError = false;
let hiddenGame = true;
let isThereAnyInvitation = false;
let invitations = [];
@@ -72,7 +77,7 @@
playerOneUsername : user.username,
playerTwoUsername : playerTwoUsername,
gameOptions : matchOption,
isGameIsWithInvitation : isSomeoneIsIvited
isGameIsWithInvitation : isSomeoneIsInvited
})
})
const responseFromServer = await responseWhenGrantToken;
@@ -95,10 +100,11 @@
{
(sound === "off") ? initAudio(true) : initAudio(false);
initMatchOptions(matchOption)
initPong(new GameArea())
initPong(new GameArea(gameAreaId))
initGc(new GameComponentsClient(matchOption, pong.ctx))
initStartFunction(start)
isSomeoneIsIvited ?
hiddenGame = false;
isSomeoneIsInvited ?
initWebSocket(matchOption, token, user.username, true, playerTwoUsername) :
initWebSocket(matchOption, token, user.username)
}
@@ -112,10 +118,11 @@
if (invitation.token)
{
initMatchOptions(matchOption)
initPong(new GameArea())
initPong(new GameArea(gameAreaId))
initGc(new GameComponentsClient(matchOption, pong.ctx))
initStartFunction(start)
showWaitPage = false
hiddenGame = false;
initWebSocket(matchOption, invitation.token, invitation.playerOneUsername, true, user.username)
}
}
@@ -186,13 +193,16 @@
showInvitation()
initGameForPrivateParty(invitation)
}
</script>
<Header />
<!-- <div id="game_page"> Replacement for <body>.
Might become useless after CSS rework. -->
<div id="game_page">
<body>
<div id="preload_font">.</div>
<div id="canvas_container" hidden={hiddenGame}>
<canvas id={gameAreaId}/>
</div>
{#if showError === true}
<div id="div_game" in:fly="{{ y: 10, duration: 1000 }}">
@@ -215,106 +225,93 @@
{#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}
</select>
{/if}
<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 }
{#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>
{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>
<input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={multi_balls}>
<label for="multi_balls">Multiples balls</label>
</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>
<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="isSomeoneIsInvited" bind:checked={isSomeoneIsInvited}>
<label for="moving_walls">Invite a friend</label>
</div>
{#if isSomeoneIsInvited === 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>
</div>
</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>
{/if}
{/if}
{/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");
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 {
#game_page {
margin: 0;
background-color: #222425;
}
#canvas_container {
margin-top: 20px;
text-align: center;
/* border: dashed rgb(245, 245, 245) 5px; */
/* max-height: 80vh; */
@@ -329,6 +326,7 @@ body {
}
#div_game {
margin-top: 20px;
text-align: center;
font-family: "Bit5x3";
color: rgb(245, 245, 245);
@@ -359,7 +357,8 @@ body {
padding: 10px;
}
canvas {
background-color: #ff0000;
/* background-color: #ff0000; */
background-color: #333333;
max-width: 75vw;
/* max-height: 100vh; */
width: 80%;

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

@@ -8,14 +8,18 @@ export class GameArea {
drawLoopInterval: number = 0;
canvas: HTMLCanvasElement;
ctx: CanvasRenderingContext2D;
constructor() {
this.canvas = document.createElement("canvas");
constructor(canvas_id: string) {
const canvas = document.getElementById("game_area");
if (canvas && canvas instanceof HTMLCanvasElement) {
this.canvas = canvas;
}
else {
console.log("GameArea init error, invalid canvas_id");
return;
}
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();

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

@@ -4,6 +4,7 @@ import * as ev from "../shared_js/class/Event.js"
import * as en from "../shared_js/enums.js"
import { InputHistory } from "./class/InputHistory.js"
import * as c from "./constants.js";
import { matchEnded } from "./ws.js";
export let gridDisplay = false;
@@ -43,7 +44,9 @@ export function handleInput()
playerMovements(delta_time, keys);
}
socket.send(JSON.stringify(inputState));
if (!matchEnded) {
socket.send(JSON.stringify(inputState));
}
// setTimeout(testInputDelay, 100);
inputHistoryArr.push(new InputHistory(inputState, delta_time));

11
srcs/requirements/svelte/api_front/src/pages/game/client/ws.ts
View File

@@ -10,6 +10,8 @@ import { soundRoblox } from "./audio.js"
import { sleep } from "./utils.js";
import { Vector, VectorInteger } from "../shared_js/class/Vector.js";
export let matchEnded = false;
class ClientInfo {
id = "";
side: en.PlayerSide;
@@ -187,6 +189,8 @@ function scoreUpdate(data: ev.EventScoreUpdate)
function matchEnd(data: ev.EventMatchEnd)
{
matchEnded = true;
socket.close();
if (data.winner === clientInfo.side) {
msg.win();
if (data.forfeit) {
@@ -196,13 +200,8 @@ function matchEnd(data: ev.EventMatchEnd)
else {
msg.lose();
}
// matchEnded = true; // unused
}
// export let matchEnded = false; // unused
/* Spectator */
export function initWebSocketSpectator(gameSessionId: string)
@@ -301,6 +300,8 @@ function scoreUpdateSpectator(data: ev.EventScoreUpdate)
function matchEndSpectator(data: ev.EventMatchEnd)
{
console.log("matchEndSpectator");
matchEnded = true;
socket.close();
// WIP
/* msg.win();
if (data.forfeit) {

4
srcs/requirements/svelte/api_front/src/pages/game/shared_js/constants.ts
View File

@@ -11,8 +11,8 @@ export const pw = Math.floor(w*0.017);
export const ph = pw*6;
export const ballSize = pw;
export const wallSize = Math.floor(w*0.01);
export const racketSpeed = Math.floor(w*0.66); // pixel per second
export const ballSpeed = Math.floor(w*0.66); // pixel per second
export const racketSpeed = Math.floor(w*0.60); // pixel per second
export const ballSpeed = Math.floor(w*0.55); // pixel per second
export const ballSpeedIncrease = Math.floor(ballSpeed*0.05); // pixel per second
export const normalizedSpeed = false; // for consistency in speed independent of direction

1
srcs/requirements/svelte/api_front/src/pieces/Header.svelte
View File

@@ -25,6 +25,7 @@
<h1>Potato Pong</h1>
<nav>
<button on:click={() => (push('/game'))}>Game</button>
<button on:click={() => (push('/matchlist'))}>Match List</button>
{#if $location !== '/profile'}
<button on:click={() => (push('/profile'))}>My Profile</button>
{:else if $location === '/profile'}