nicolas-arnaud
/
Transcendence
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

* Lint

master
vvandenb 2 years ago
parent
0ac4ed6d91
commit
0bf1528d78
6 changed files with 158 additions and 139 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      back/volume/src/pong/game/Ball.ts
  2. 183
      front/volume/src/App.svelte
  3. 9
      front/volume/src/components/Channels.svelte
  4. 55
      front/volume/src/components/Chat.svelte
  5. 8
      front/volume/src/components/Pong/Game.ts
  6. 36
      front/volume/src/components/Pong/constants.ts

6
back/volume/src/pong/game/Ball.ts
View File

@ -1,7 +1,11 @@
import { type Paddle } from './Paddle' import { type Paddle } from './Paddle'
import { type Point, Rect } from './utils' import { type Point, Rect } from './utils'
import { type MapDtoValidated } from '../dtos/MapDtoValidated' import { type MapDtoValidated } from '../dtos/MapDtoValidated'
import { DEFAULT_BALL_SIZE, DEFAULT_BALL_INITIAL_SPEED, GAME_TICKS } from './constants' import {
DEFAULT_BALL_SIZE,
DEFAULT_BALL_INITIAL_SPEED,
GAME_TICKS
} from './constants'
export class Ball { export class Ball {
rect: Rect rect: Rect

183
front/volume/src/App.svelte
View File

@ -171,109 +171,104 @@
} }
</script> </script>
<div> <div>
{#if $store === null} {#if $store === null}
<div class="login-div"> <div class="login-div">
<h3 class="test"> <h3 class="test">Please log in with 42 api to access the website.</h3>
Please log in with 42 api to access the website. <img
</h3> class="img-42"
<img class="img-42" src="https://translate.intra.42.fr/assets/42_logo-7dfc9110a5319a308863b96bda33cea995046d1731cebb735e41b16255106c12.svg" alt="logo_42"> src="https://translate.intra.42.fr/assets/42_logo-7dfc9110a5319a308863b96bda33cea995046d1731cebb735e41b16255106c12.svg"
<button class="login-button" type="button" on:click={login}>Log In</button> alt="logo_42"
</div>
{:else if $store.twoFA === true && $store.isVerified === false}
<h1><button type="button" on:click={verify}>verify</button></h1>
{:else}
<Navbar
{clickProfile}
{clickHistory}
{clickFriends}
{clickChannels}
{clickLeaderboard}
/> />
{#if appState.includes(APPSTATE.CHANNELS)} <button class="login-button" type="button" on:click={login}>Log In</button
{#if appState.replace(APPSTATE.CHANNELS, "") !== ""} >
<div </div>
on:click={() => setAppState(APPSTATE.CHANNELS)} {:else if $store.twoFA === true && $store.isVerified === false}
on:keydown={() => setAppState(APPSTATE.CHANNELS)} <h1><button type="button" on:click={verify}>verify</button></h1>
> {:else}
<Chat <Navbar
chatMessages={selectedChannel.messages} {clickProfile}
on:view-profile={openIdProfile} {clickHistory}
on:add-friend={addFriend} {clickFriends}
on:invite-to-game={pong.inviteToGame} {clickChannels}
/> {clickLeaderboard}
</div> />
{:else} {#if appState.includes(APPSTATE.CHANNELS)}
<div on:click={resetAppState} on:keydown={resetAppState}> {#if appState.replace(APPSTATE.CHANNELS, "") !== ""}
<Channels {channels} onSelectChannel={handleSelectChannel} />
</div>
{/if}
{/if}
{#if appState === APPSTATE.LEADERBOARD}
<div on:click={resetAppState} on:keydown={resetAppState}>
<Leaderboard {leaderboard} />
</div>
{/if}
{#if appState === APPSTATE.FRIENDS}
<div <div
on:click={() => { on:click={() => setAppState(APPSTATE.CHANNELS)}
resetAppState(); on:keydown={() => setAppState(APPSTATE.CHANNELS)}
clearInterval(friendsInterval);
}}
on:keydown={() => {
resetAppState();
clearInterval(friendsInterval);
}}
> >
<Friends {friends} {invits} /> <Chat
</div> chatMessages={selectedChannel.messages}
{/if} on:view-profile={openIdProfile}
{#if appState === APPSTATE.HISTORY} on:add-friend={addFriend}
<div on:click={resetAppState} on:keydown={resetAppState}> on:invite-to-game={pong.inviteToGame}
<MatchHistory />
</div>
{/if}
{#if appState === APPSTATE.HISTORY_ID}
<div
on:click={() => setAppState(APPSTATE.PROFILE)}
on:keydown={() => setAppState(APPSTATE.PROFILE)}
>
<MatchHistory username={userProfile.username} />
</div>
{/if}
{#if appState === APPSTATE.PROFILE}
<div on:click={resetAppState} on:keydown={resetAppState}>
<Profile
user={userProfile}
edit={1}
on:view-history={openIdHistory}
/> />
</div> </div>
{/if} {:else}
{#if appState === APPSTATE.PROFILE_ID} <div on:click={resetAppState} on:keydown={resetAppState}>
<div <Channels {channels} onSelectChannel={handleSelectChannel} />
on:click={() =>
setAppState(APPSTATE.CHANNELS + "#" + selectedChannel.name)}
on:keydown={() =>
setAppState(APPSTATE.CHANNELS + "#" + selectedChannel.name)}
>
<Profile
user={userProfile}
edit={0}
on:view-history={openIdHistory}
/>
</div> </div>
{/if} {/if}
{/if}
{#if appState === APPSTATE.LEADERBOARD}
<div on:click={resetAppState} on:keydown={resetAppState}>
<Leaderboard {leaderboard} />
</div>
{/if}
{#if appState === APPSTATE.FRIENDS}
<div
on:click={() => {
resetAppState();
clearInterval(friendsInterval);
}}
on:keydown={() => {
resetAppState();
clearInterval(friendsInterval);
}}
>
<Friends {friends} {invits} />
</div>
{/if}
{#if appState === APPSTATE.HISTORY}
<div on:click={resetAppState} on:keydown={resetAppState}>
<MatchHistory />
</div>
{/if}
{#if appState === APPSTATE.HISTORY_ID}
<div
on:click={() => setAppState(APPSTATE.PROFILE)}
on:keydown={() => setAppState(APPSTATE.PROFILE)}
>
<MatchHistory username={userProfile.username} />
</div>
{/if}
{#if appState === APPSTATE.PROFILE}
<div on:click={resetAppState} on:keydown={resetAppState}>
<Profile user={userProfile} edit={1} on:view-history={openIdHistory} />
</div>
{/if}
{#if appState === APPSTATE.PROFILE_ID}
<div
on:click={() =>
setAppState(APPSTATE.CHANNELS + "#" + selectedChannel.name)}
on:keydown={() =>
setAppState(APPSTATE.CHANNELS + "#" + selectedChannel.name)}
>
<Profile user={userProfile} edit={0} on:view-history={openIdHistory} />
</div>
{/if}
{#if fakemenu} {#if fakemenu}
<FakeLogin bind:username={usernameFake} bind:ftId={ftIdFake} /> <FakeLogin bind:username={usernameFake} bind:ftId={ftIdFake} />
<button on:click={impersonate}>Impersonate</button> <button on:click={impersonate}>Impersonate</button>
<button on:click={() => (fakemenu = false)}>No impersonate</button> <button on:click={() => (fakemenu = false)}>No impersonate</button>
{:else} {:else}
<Pong bind:this={pong} {appState} {setAppState} {fakeUser} /> <Pong bind:this={pong} {appState} {setAppState} {fakeUser} />
{/if}
{/if} {/if}
</div> {/if}
</div>
<style> <style>
.login-div { .login-div {

9
front/volume/src/components/Channels.svelte
View File

@ -63,7 +63,7 @@
channels = channels.filter((c) => c.id !== id); channels = channels.filter((c) => c.id !== id);
} }
// TODO: save to database // TODO: save to database
} };
//--------------------------------------------------------------------------------/ //--------------------------------------------------------------------------------/
</script> </script>
@ -77,8 +77,11 @@
<li> <li>
<span>{_channels.name}</span> <span>{_channels.name}</span>
<button on:click={() => selectChat(_channels.id)}>Enter</button> <button on:click={() => selectChat(_channels.id)}>Enter</button>
<button on:click={() => removeChannel(_channels.id)} on:keydown={() => removeChannel(_channels.id)}>delete</button> <button
{/each} on:click={() => removeChannel(_channels.id)}
on:keydown={() => removeChannel(_channels.id)}>delete</button
>
</li>{/each}
{:else} {:else}
<p>No channels available</p> <p>No channels available</p>
{/if} {/if}

55
front/volume/src/components/Chat.svelte
View File

@ -9,7 +9,7 @@
import type { Player } from "./Profile.svelte"; import type { Player } from "./Profile.svelte";
interface User { interface User {
username: string; username: string;
} }
</script> </script>
<script lang="ts"> <script lang="ts">
@ -59,16 +59,16 @@
showChatMembers = !showChatMembers; showChatMembers = !showChatMembers;
} }
let chatMembers: Array<User> = [ let chatMembers: Array<User> = [
{ username: "user1"}, { username: "user1" },
{ username: "user2"}, { username: "user2" },
{ username: "user3"}, { username: "user3" },
{ username: "user4"}, { username: "user4" },
{ username: "user5"}, { username: "user5" },
{ username: "user6"}, { username: "user6" },
{ username: "user7"}, { username: "user7" },
{ username: "user8"}, { username: "user8" },
{ username: "user9"}, { username: "user9" },
] ];
// let chatMembers: Array<Player> = []; // let chatMembers: Array<Player> = [];
// async function getChatMembers() { // async function getChatMembers() {
// console.log("Getting chat members"); // console.log("Getting chat members");
@ -105,19 +105,29 @@
> >
<ul> <ul>
<li> <li>
<button on:click={() => dispatch("send-message", selectedUser)}>Send Message</button> <button on:click={() => dispatch("send-message", selectedUser)}
>Send Message</button
>
</li> </li>
<li> <li>
<button on:click={() => dispatch("view-profile", selectedUser)}>View Profile</button> <button on:click={() => dispatch("view-profile", selectedUser)}
>View Profile</button
>
</li> </li>
<li> <li>
<button on:click={() => dispatch("add-friend", selectedUser)}>Add Friend</button> <button on:click={() => dispatch("add-friend", selectedUser)}
>Add Friend</button
>
</li> </li>
<li> <li>
<button on:click={() => dispatch("invite-to-game", selectedUser)}>Invite to Game</button> <button on:click={() => dispatch("invite-to-game", selectedUser)}
>Invite to Game</button
>
</li> </li>
<li> <li>
<button on:click={() => dispatch("block-user", selectedUser)}>Block User</button> <button on:click={() => dispatch("block-user", selectedUser)}
>Block User</button
>
</li> </li>
<li><button on:click={closeProfileMenu}>Close</button></li> <li><button on:click={closeProfileMenu}>Close</button></li>
</ul> </ul>
@ -129,9 +139,16 @@
<img src="img/send.png" alt="send" /> <img src="img/send.png" alt="send" />
</button> </button>
</form> </form>
<button on:click|stopPropagation={toggleChatMembers} on:keydown|stopPropagation>Chat Members</button> <button
on:click|stopPropagation={toggleChatMembers}
on:keydown|stopPropagation>Chat Members</button
>
{#if showChatMembers} {#if showChatMembers}
<div class="chatMembers" on:click|stopPropagation on:keydown|stopPropagation> <div
class="chatMembers"
on:click|stopPropagation
on:keydown|stopPropagation
>
<div> <div>
<ul> <ul>
{#each chatMembers as member} {#each chatMembers as member}
@ -141,7 +158,7 @@
<button>ban</button> <button>ban</button>
<button>kick</button> <button>kick</button>
<button>mute</button> <button>mute</button>
<button>admin</button> <button>admin</button>
</p> </p>
</li> </li>
{/each} {/each}

8
front/volume/src/components/Pong/Game.ts
View File

@ -24,9 +24,9 @@ export class Game {
ranked: boolean; ranked: boolean;
youAreReady: boolean; youAreReady: boolean;
private readonly score_audio = new Audio('audio/score.wav'); private readonly score_audio = new Audio("audio/score.wav");
private readonly paddle_hit_audio = new Audio('audio/paddle_hit.wav'); private readonly paddle_hit_audio = new Audio("audio/paddle_hit.wav");
private readonly edge_hit_audio = new Audio('audio/edge_hit.wav'); private readonly edge_hit_audio = new Audio("audio/edge_hit.wav");
constructor( constructor(
renderCanvas: HTMLCanvasElement, renderCanvas: HTMLCanvasElement,
@ -112,7 +112,7 @@ export class Game {
this.edge_hit_audio.play(); this.edge_hit_audio.play();
} }
this.ball.speed = data.ballSpeed; this.ball.speed = data.ballSpeed;
this.ball.rect.center = data.ballPosition; this.ball.rect.center = data.ballPosition;
for (let i = 0; i < data.scores.length; i++) { for (let i = 0; i < data.scores.length; i++) {

36
front/volume/src/components/Pong/constants.ts
View File

@ -1,21 +1,21 @@
import { Point } from './utils' import { Point } from "./utils";
export const GAME_EVENTS = { export const GAME_EVENTS = {
START_GAME: 'START_GAME', START_GAME: "START_GAME",
READY: 'READY', READY: "READY",
GAME_TICK: 'GAME_TICK', GAME_TICK: "GAME_TICK",
PLAYER_MOVE: 'PLAYER_MOVE', PLAYER_MOVE: "PLAYER_MOVE",
GET_GAME_INFO: 'GET_GAME_INFO', GET_GAME_INFO: "GET_GAME_INFO",
CREATE_GAME: 'CREATE_GAME', CREATE_GAME: "CREATE_GAME",
REGISTER_PLAYER: 'REGISTER_PLAYER', REGISTER_PLAYER: "REGISTER_PLAYER",
MATCHMAKING: 'MATCHMAKING', MATCHMAKING: "MATCHMAKING",
LEAVE_GAME: 'LEAVE_GAME' LEAVE_GAME: "LEAVE_GAME",
} };
export const DEFAULT_MAP_SIZE = new Point(500, 400) export const DEFAULT_MAP_SIZE = new Point(500, 400);
export const DEFAULT_PADDLE_SIZE = new Point(6, 30) export const DEFAULT_PADDLE_SIZE = new Point(6, 30);
export const DEFAULT_BALL_SIZE = new Point(10, 10) export const DEFAULT_BALL_SIZE = new Point(10, 10);
export const DEFAULT_BALL_INITIAL_SPEED = new Point(10, 2) export const DEFAULT_BALL_INITIAL_SPEED = new Point(10, 2);
export const DEFAULT_PLAYER_X_OFFSET = 50 export const DEFAULT_PLAYER_X_OFFSET = 50;
export const DEFAULT_WIN_SCORE = 5 export const DEFAULT_WIN_SCORE = 5;
export const GAME_TICKS = 30 export const GAME_TICKS = 30;

Write Preview
Loading…
Cancel
Save