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

added formating to front

master
nicolas-arnaud 2 years ago
parent
0956468721
commit
c78c58a3c3
20 changed files with 946 additions and 870 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. 2
      front/Dockerfile
  2. 27
      front/volume/package-lock.json
  3. 11
      front/volume/package.json
  4. 87
      front/volume/src/App.svelte
  5. 3
      front/volume/src/app.d.ts
  6. 48
      front/volume/src/components/Chat.svelte
  7. 4
      front/volume/src/components/Friends.svelte
  8. 22
      front/volume/src/components/NavBar.svelte
  9. 10
      front/volume/src/components/Pong/Ball.ts
  10. 46
      front/volume/src/components/Pong/Game.ts
  11. 4
      front/volume/src/components/Pong/Paddle.ts
  12. 8
      front/volume/src/components/Pong/Player.ts
  13. 43
      front/volume/src/components/Pong/Pong.svelte
  14. 19
      front/volume/src/components/Pong/constants.ts
  15. 14
      front/volume/src/components/Pong/utils.ts
  16. 10
      front/volume/src/components/Profile.svelte
  17. 2
      front/volume/src/main.ts

2
front/Dockerfile
View File

@ -11,6 +11,6 @@ ENTRYPOINT npm install; \
elif [[ $NODE_ENV == "debug" ]]; then \ elif [[ $NODE_ENV == "debug" ]]; then \
npm run dev; \ npm run dev; \
elif [[ $NODE_ENV == "check" ]]; then \ elif [[ $NODE_ENV == "check" ]]; then \
npm run check; echo "=== FINISH ==="\ npm run format && npm run check; echo "=== FINISH ==="\
else echo "Nothing to do for that NODE_ENV context."; \ else echo "Nothing to do for that NODE_ENV context."; \
fi; fi;

27
front/volume/package-lock.json
View File

@ -14,6 +14,8 @@
"vite": "^4.1.0" "vite": "^4.1.0"
}, },
"devDependencies": { "devDependencies": {
"prettier": "^2.8.4",
"prettier-plugin-svelte": "^2.9.0",
"svelte-check": "^2.10.3", "svelte-check": "^2.10.3",
"tslib": "^2.5.0", "tslib": "^2.5.0",
"typescript": "^4.9.3" "typescript": "^4.9.3"
@ -1017,6 +1019,31 @@
"node": "^10 || ^12 || >=14" "node": "^10 || ^12 || >=14"
} }
}, },
"node_modules/prettier": {
"version": "2.8.4",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz",
"integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==",
"dev": true,
"bin": {
"prettier": "bin-prettier.js"
},
"engines": {
"node": ">=10.13.0"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/prettier-plugin-svelte": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.9.0.tgz",
"integrity": "sha512-3doBi5NO4IVgaNPtwewvrgPpqAcvNv0NwJNflr76PIGgi9nf1oguQV1Hpdm9TI2ALIQVn/9iIwLpBO5UcD2Jiw==",
"dev": true,
"peerDependencies": {
"prettier": "^1.16.4 || ^2.0.0",
"svelte": "^3.2.0"
}
},
"node_modules/queue-microtask": { "node_modules/queue-microtask": {
"version": "1.2.3", "version": "1.2.3",
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",

11
front/volume/package.json
View File

@ -7,17 +7,20 @@
"dev": "vite --host", "dev": "vite --host",
"build": "vite build", "build": "vite build",
"preview": "vite preview --host", "preview": "vite preview --host",
"check": "svelte-check --tsconfig ./tsconfig.json" "check": "svelte-check --tsconfig ./tsconfig.json",
"format": "prettier --write --plugin-search-dir=. 'src/**/*.{js,ts,html,svelte}'"
}, },
"devDependencies": { "devDependencies": {
"prettier": "^2.8.4",
"prettier-plugin-svelte": "^2.9.0",
"svelte-check": "^2.10.3", "svelte-check": "^2.10.3",
"tslib": "^2.5.0", "tslib": "^2.5.0",
"typescript": "^4.9.3" "typescript": "^4.9.3"
}, },
"dependencies": { "dependencies": {
"svelte": "^3.55.1", "@sveltejs/vite-plugin-svelte": "^2.0.2",
"vite": "^4.1.0",
"@tsconfig/svelte": "^3.0.0", "@tsconfig/svelte": "^3.0.0",
"@sveltejs/vite-plugin-svelte": "^2.0.2" "svelte": "^3.55.1",
"vite": "^4.1.0"
} }
} }

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

@ -1,15 +1,15 @@
<script lang="ts"> <script lang="ts">
import Navbar from './components/NavBar.svelte'; import Navbar from "./components/NavBar.svelte";
import Profile from './components/Profile.svelte'; import Profile from "./components/Profile.svelte";
import MatchHistory from './components/MatchHistory.svelte'; import MatchHistory from "./components/MatchHistory.svelte";
import type { Match } from './components/MatchHistory.svelte'; import type { Match } from "./components/MatchHistory.svelte";
import Friends from './components/Friends.svelte'; import Friends from "./components/Friends.svelte";
import type { Friend } from './components/Friends.svelte'; import type { Friend } from "./components/Friends.svelte";
import Spectate from './components/Spectate.svelte'; import Spectate from "./components/Spectate.svelte";
import type { SpectateType } from './components/Spectate.svelte'; import type { SpectateType } from "./components/Spectate.svelte";
import Play from './components/Play.svelte'; import Play from "./components/Play.svelte";
import Pong from './components/Pong/Pong.svelte'; import Pong from "./components/Pong/Pong.svelte";
import Chat from './components/Chat.svelte' import Chat from "./components/Chat.svelte";
let isProfileOpen = false; let isProfileOpen = false;
function clickProfile() { function clickProfile() {
@ -20,59 +20,78 @@
isHistoryOpen = true; isHistoryOpen = true;
} }
let matches: Array<Match> = [ let matches: Array<Match> = [
{ winner: 'Alice', loser: 'Bob', points: -5, rank: '22' }, { winner: "Alice", loser: "Bob", points: -5, rank: "22" },
{ winner: 'Alice', loser: 'Bob', points: 10, rank: '24' }, { winner: "Alice", loser: "Bob", points: 10, rank: "24" },
{ winner: 'Alice', loser: 'Bob', points: 10, rank: '24' }, { winner: "Alice", loser: "Bob", points: 10, rank: "24" },
{ winner: 'Alice', loser: 'Bob', points: 7, rank: '23' }, { winner: "Alice", loser: "Bob", points: 7, rank: "23" },
{ winner: 'Alice', loser: 'Bob', points: 10, rank: '24' }, { winner: "Alice", loser: "Bob", points: 10, rank: "24" },
{ winner: 'Alice', loser: 'Bob', points: 10, rank: '24' } { winner: "Alice", loser: "Bob", points: 10, rank: "24" },
]; ];
let isFriendOpen = false; let isFriendOpen = false;
function clickFriends() { function clickFriends() {
isFriendOpen = true; isFriendOpen = true;
} }
let friends: Array<Friend> = [ let friends: Array<Friend> = [
{ username: 'Alice', status: 'online' }, { username: "Alice", status: "online" },
{ username: 'Bob', status: 'online' }, { username: "Bob", status: "online" },
{ username: 'Charlie', status: 'offline' }, { username: "Charlie", status: "offline" },
{ username: 'Dave', status: 'offline' }, { username: "Dave", status: "offline" },
{ username: 'Eve', status: 'in a game' }, { username: "Eve", status: "in a game" },
{ username: 'Frank', status: 'online' } { username: "Frank", status: "online" },
]; ];
let isSpectateOpen = false; let isSpectateOpen = false;
function clickSpectate() { function clickSpectate() {
isSpectateOpen = true; isSpectateOpen = true;
} }
let spectate: Array<SpectateType> = [ let spectate: Array<SpectateType> = [
{ player1: 'Alice', player2: 'Bob', id: '1' }, { player1: "Alice", player2: "Bob", id: "1" },
{ player1: 'Alice', player2: 'Bob', id: '4' }, { player1: "Alice", player2: "Bob", id: "4" },
{ player1: 'Alice', player2: 'Bob', id: '6' }, { player1: "Alice", player2: "Bob", id: "6" },
{ player1: 'Alice', player2: 'Bob', id: '8' }, { player1: "Alice", player2: "Bob", id: "8" },
{ player1: 'Alice', player2: 'Bob', id: '2' }, { player1: "Alice", player2: "Bob", id: "2" },
{ player1: 'Alice', player2: 'Bob', id: '3' } { player1: "Alice", player2: "Bob", id: "3" },
]; ];
</script> </script>
<main> <main>
<Navbar {clickProfile} {clickHistory} {clickFriends} {clickSpectate} /> <Navbar {clickProfile} {clickHistory} {clickFriends} {clickSpectate} />
{#if isSpectateOpen} {#if isSpectateOpen}
<div on:click={() => (isSpectateOpen = false)} on:keydown={() => (isSpectateOpen = false)}> <div
on:click={() => (isSpectateOpen = false)}
on:keydown={() => (isSpectateOpen = false)}
>
<Spectate {spectate} /> <Spectate {spectate} />
</div> </div>
{/if} {/if}
{#if isFriendOpen} {#if isFriendOpen}
<div on:click={() => (isFriendOpen = false)} on:keydown={() => (isFriendOpen = false)}> <div
on:click={() => (isFriendOpen = false)}
on:keydown={() => (isFriendOpen = false)}
>
<Friends {friends} /> <Friends {friends} />
</div> </div>
{/if} {/if}
{#if isHistoryOpen} {#if isHistoryOpen}
<div on:click={() => (isHistoryOpen = false)} on:keydown={() => (isHistoryOpen = false)}> <div
on:click={() => (isHistoryOpen = false)}
on:keydown={() => (isHistoryOpen = false)}
>
<MatchHistory {matches} /> <MatchHistory {matches} />
</div> </div>
{/if} {/if}
{#if isProfileOpen} {#if isProfileOpen}
<div on:click={() => (isProfileOpen = false)} on:keydown={() => (isProfileOpen = false)}> <div
<Profile username="Alice" wins={10} losses={5} elo={256} rank={23} is2faEnabled={false} /> on:click={() => (isProfileOpen = false)}
on:keydown={() => (isProfileOpen = false)}
>
<Profile
username="Alice"
wins={10}
losses={5}
elo={256}
rank={23}
is2faEnabled={false}
/>
</div> </div>
{/if} {/if}
<Play /> <Play />

3
front/volume/src/app.d.ts
View File

@ -1,5 +1,4 @@
declare global { declare global {
namespace App { namespace App {}
}
} }
export {}; export {};

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

@ -1,48 +1,37 @@
<script lang="ts"> <script lang="ts">
let chatIsOpen = false; let chatIsOpen = false;
const toggleChat = () => (chatIsOpen = !chatIsOpen); const toggleChat = () => (chatIsOpen = !chatIsOpen);
let newText = ''; let newText = "";
let chatMessages = [ let chatMessages = [
{ {
name: 'Alice', name: "Alice",
text: 'Hello guys! Happy to see you here!' text: "Hello guys! Happy to see you here!",
}, },
{ {
name: 'Bob', name: "Bob",
text: 'Wanna play?' text: "Wanna play?",
}, },
{ {
name: 'Carl', name: "Carl",
text: 'cyka blyat' text: "cyka blyat",
}, },
] ];
const sendMessage = () => { const sendMessage = () => {
if (newText !== '') if (newText !== "") {
{
const newMessage = { const newMessage = {
name: 'You', name: "You",
text: newText text: newText,
}; };
chatMessages = [ chatMessages = [...chatMessages, newMessage];
...chatMessages, newText = "";
newMessage
];
newText = '';
}
} }
};
</script> </script>
<!-- Main chat div, changes style to hide/unhide the chat depending if it's open or closed --> <!-- Main chat div, changes style to hide/unhide the chat depending if it's open or closed -->
<div class={ <div class={chatIsOpen ? "chat-open chat-container" : "chat-container"}>
chatIsOpen
? 'chat-open chat-container'
: 'chat-container'}>
<!-- Button to toggle chat --> <!-- Button to toggle chat -->
<div class="chat-view-button"> <div class="chat-view-button">
<button on:click={toggleChat}> <button on:click={toggleChat}>
@ -66,10 +55,7 @@
</div> </div>
<!-- Form to send message --> <!-- Form to send message -->
<form on:submit|preventDefault={sendMessage}> <form on:submit|preventDefault={sendMessage}>
<input <input type="text" placeholder="Type a message..." bind:value={newText} />
type="text"
placeholder="Type a message..."
bind:value={newText} />
<button> <button>
<img src="img/send.png" alt="send" /> <img src="img/send.png" alt="send" />
</button> </button>
@ -77,8 +63,6 @@
</div> </div>
</div> </div>
<style> <style>
.chat-container { .chat-container {
position: absolute; position: absolute;

4
front/volume/src/components/Friends.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts" context="module"> <script lang="ts" context="module">
export interface Friend { export interface Friend {
username: string; username: string;
status: 'online' | 'offline' | 'in a game'; status: "online" | "offline" | "in a game";
} }
</script> </script>
@ -28,7 +28,7 @@
// console.log('Failed to add friend'); // console.log('Failed to add friend');
// } // }
// usernameInput.value = ''; // usernameInput.value = '';
alert('Trying to add friend' + username); alert("Trying to add friend" + username);
} }
</script> </script>

22
front/volume/src/components/NavBar.svelte
View File

@ -1,11 +1,11 @@
<script lang="ts"> <script lang="ts">
export let links = [ export let links = [
{ text: 'Home', url: 'img/pong.png' }, { text: "Home", url: "img/pong.png" },
{ text: 'Spectate' }, { text: "Spectate" },
{ text: 'Chat' }, { text: "Chat" },
{ text: 'History' }, { text: "History" },
{ text: 'Friends' }, { text: "Friends" },
{ text: 'Profile' } { text: "Profile" },
]; ];
export let clickProfile = () => {}; export let clickProfile = () => {};
export let clickHistory = () => {}; export let clickHistory = () => {};
@ -16,35 +16,35 @@
<nav class="navigation-bar"> <nav class="navigation-bar">
<ul> <ul>
{#each links as link} {#each links as link}
{#if link.text === 'Spectate'} {#if link.text === "Spectate"}
<li> <li>
<button on:click={clickSpectate}> <button on:click={clickSpectate}>
<p>Spectate</p> <p>Spectate</p>
</button> </button>
</li> </li>
{/if} {/if}
{#if link.text === 'Friends'} {#if link.text === "Friends"}
<li> <li>
<button on:click={clickFriends}> <button on:click={clickFriends}>
<p>Friends</p> <p>Friends</p>
</button> </button>
</li> </li>
{/if} {/if}
{#if link.text === 'Profile'} {#if link.text === "Profile"}
<li> <li>
<button on:click={clickProfile}> <button on:click={clickProfile}>
<img src="img/profileicon.png" alt="profile icon" /> <img src="img/profileicon.png" alt="profile icon" />
</button> </button>
</li> </li>
{/if} {/if}
{#if link.text === 'History'} {#if link.text === "History"}
<li> <li>
<button on:click={clickHistory}> <button on:click={clickHistory}>
<p>History</p> <p>History</p>
</button> </button>
</li> </li>
{/if} {/if}
{#if link.text === 'Home'} {#if link.text === "Home"}
<li> <li>
<a href="/"> <a href="/">
<img src="img/pong.png" alt="home-icon" /> <img src="img/pong.png" alt="home-icon" />

10
front/volume/src/components/Pong/Ball.ts
View File

@ -1,11 +1,15 @@
import { Point, Rect } from './utils'; import { Point, Rect } from "./utils";
export class Ball { export class Ball {
rect: Rect; rect: Rect;
speed: Point; speed: Point;
color: string | CanvasGradient | CanvasPattern = 'white'; color: string | CanvasGradient | CanvasPattern = "white";
constructor(spawn: Point, size: Point = new Point(20, 20), speed: Point = new Point(10, 2)) { constructor(
spawn: Point,
size: Point = new Point(20, 20),
speed: Point = new Point(10, 2)
) {
this.rect = new Rect(spawn, size); this.rect = new Rect(spawn, size);
} }

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

@ -1,11 +1,11 @@
import { Ball } from './Ball'; import { Ball } from "./Ball";
import { GAME_EVENTS } from './constants'; import { GAME_EVENTS } from "./constants";
import type { GameInfo, GameUpdate } from './constants'; import type { GameInfo, GameUpdate } from "./constants";
import { Paddle } from './Paddle'; import { Paddle } from "./Paddle";
import { Player } from './Player'; import { Player } from "./Player";
import { formatWebsocketData, Point } from './utils'; import { formatWebsocketData, Point } from "./utils";
const BG_COLOR = 'black'; const BG_COLOR = "black";
export class Game { export class Game {
canvas: HTMLCanvasElement; canvas: HTMLCanvasElement;
@ -26,9 +26,15 @@ export class Game {
this.canvas.width = data.mapSize.x; this.canvas.width = data.mapSize.x;
this.canvas.height = data.mapSize.y; this.canvas.height = data.mapSize.y;
this.ball = new Ball(new Point(this.canvas.width / 2, this.canvas.height / 2), data.ballSize); this.ball = new Ball(
new Point(this.canvas.width / 2, this.canvas.height / 2),
data.ballSize
);
const paddle1: Paddle = new Paddle(new Point(data.playerXOffset, this.canvas.height / 2), data.paddleSize); const paddle1: Paddle = new Paddle(
new Point(data.playerXOffset, this.canvas.height / 2),
data.paddleSize
);
const paddle2: Paddle = new Paddle( const paddle2: Paddle = new Paddle(
new Point(this.canvas.width - data.playerXOffset, this.canvas.height / 2), new Point(this.canvas.width - data.playerXOffset, this.canvas.height / 2),
data.paddleSize data.paddleSize
@ -40,15 +46,15 @@ export class Game {
start(socket: WebSocket) { start(socket: WebSocket) {
if (this.my_paddle) { if (this.my_paddle) {
this.canvas.addEventListener('mousemove', (e) => { this.canvas.addEventListener("mousemove", (e) => {
this.my_paddle.move(e); this.my_paddle.move(e);
socket.send( socket.send(
formatWebsocketData(GAME_EVENTS.PLAYER_MOVE, { formatWebsocketData(GAME_EVENTS.PLAYER_MOVE, {
position: this.my_paddle.rect.center position: this.my_paddle.rect.center,
}) })
); );
}); });
console.log('Game started!'); console.log("Game started!");
} }
} }
@ -73,10 +79,18 @@ export class Game {
this.ball.draw(this.context); this.ball.draw(this.context);
const max_width = 50; const max_width = 50;
this.context.font = '50px Arial'; this.context.font = "50px Arial";
const text_width = this.context.measureText('0').width; const text_width = this.context.measureText("0").width;
const text_offset = 50; const text_offset = 50;
this.players[0].drawScore(this.canvas.width / 2 - (text_width + text_offset), max_width, this.context); this.players[0].drawScore(
this.players[1].drawScore(this.canvas.width / 2 + text_offset, max_width, this.context); this.canvas.width / 2 - (text_width + text_offset),
max_width,
this.context
);
this.players[1].drawScore(
this.canvas.width / 2 + text_offset,
max_width,
this.context
);
} }
} }

4
front/volume/src/components/Pong/Paddle.ts
View File

@ -1,8 +1,8 @@
import { Point, Rect } from './utils'; import { Point, Rect } from "./utils";
export class Paddle { export class Paddle {
rect: Rect; rect: Rect;
color: string | CanvasGradient | CanvasPattern = 'white'; color: string | CanvasGradient | CanvasPattern = "white";
constructor(spawn: Point, size: Point = new Point(6, 100)) { constructor(spawn: Point, size: Point = new Point(6, 100)) {
this.rect = new Rect(spawn, size); this.rect = new Rect(spawn, size);

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

@ -1,4 +1,4 @@
import type { Paddle } from './Paddle'; import type { Paddle } from "./Paddle";
export class Player { export class Player {
paddle: Paddle; paddle: Paddle;
@ -13,7 +13,11 @@ export class Player {
this.paddle.draw(context); this.paddle.draw(context);
} }
drawScore(score_position_x: number, max_width: number, context: CanvasRenderingContext2D) { drawScore(
score_position_x: number,
max_width: number,
context: CanvasRenderingContext2D
) {
context.fillText(this.score.toString(), score_position_x, 50, max_width); context.fillText(this.score.toString(), score_position_x, 50, max_width);
} }
} }

43
front/volume/src/components/Pong/Pong.svelte
View File

@ -1,28 +1,35 @@
<script lang="ts"> <script lang="ts">
import { GAME_EVENTS } from './constants'; import { GAME_EVENTS } from "./constants";
import { Game } from './Game'; import { Game } from "./Game";
import { formatWebsocketData } from './utils'; import { formatWebsocketData } from "./utils";
const FPS = 144; const FPS = 144;
const SERVER_URL = 'ws://localhost:3001'; const SERVER_URL = "ws://localhost:3001";
let connected: boolean = false; let connected: boolean = false;
let socket: WebSocket; let socket: WebSocket;
let username: string = 'John'; let username: string = "John";
let otherUsername: string = 'Garfield'; let otherUsername: string = "Garfield";
//Get canvas and its context //Get canvas and its context
window.onload = () => { window.onload = () => {
const canvas: HTMLCanvasElement = document.getElementById('pong_canvas') as HTMLCanvasElement; const canvas: HTMLCanvasElement = document.getElementById(
"pong_canvas"
) as HTMLCanvasElement;
if (canvas) { if (canvas) {
const context: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D; const context: CanvasRenderingContext2D = canvas.getContext(
"2d"
) as CanvasRenderingContext2D;
if (context) { if (context) {
setupSocket(canvas, context); setupSocket(canvas, context);
} }
} }
}; };
function setupSocket(canvas: HTMLCanvasElement, context: CanvasRenderingContext2D) { function setupSocket(
canvas: HTMLCanvasElement,
context: CanvasRenderingContext2D
) {
socket = new WebSocket(SERVER_URL); socket = new WebSocket(SERVER_URL);
const game = new Game(canvas, context); const game = new Game(canvas, context);
socket.onmessage = function (e) { socket.onmessage = function (e) {
@ -40,10 +47,10 @@
setInterval(() => { setInterval(() => {
game.draw(); game.draw();
}, 1000 / FPS); }, 1000 / FPS);
console.log('Game updated!'); console.log("Game updated!");
} }
} else { } else {
console.log('Unknown event from server: ' + event); console.log("Unknown event from server: " + event);
} }
}; };
socket.onopen = () => { socket.onopen = () => {
@ -60,7 +67,9 @@
} }
function connectToServer() { function connectToServer() {
socket.send(formatWebsocketData(GAME_EVENTS.REGISTER_PLAYER, { playerName: username })); socket.send(
formatWebsocketData(GAME_EVENTS.REGISTER_PLAYER, { playerName: username })
);
setInterval(() => { setInterval(() => {
updateGameInfo(); updateGameInfo();
}, 1000); }, 1000);
@ -79,14 +88,20 @@
<br /> <br />
<button <button
on:click={() => { on:click={() => {
socket.send(formatWebsocketData(GAME_EVENTS.CREATE_GAME, { playerNames: [username, otherUsername] })); socket.send(
formatWebsocketData(GAME_EVENTS.CREATE_GAME, {
playerNames: [username, otherUsername],
})
);
updateGameInfo(); updateGameInfo();
}} }}
> >
Create game vs {otherUsername} Create game vs {otherUsername}
</button> </button>
<br /> <br />
<button on:click={() => socket.send(formatWebsocketData(GAME_EVENTS.READY))}>Ready</button> <button on:click={() => socket.send(formatWebsocketData(GAME_EVENTS.READY))}
>Ready</button
>
<br /> <br />
<br /> <br />
{:else} {:else}

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

@ -1,13 +1,13 @@
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",
}; };
export interface GameInfo extends GameInfoConstants { export interface GameInfo extends GameInfoConstants {
@ -26,7 +26,7 @@ export const gameInfoConstants: GameInfoConstants = {
paddleSize: new Point(6, 50), paddleSize: new Point(6, 50),
playerXOffset: 50, playerXOffset: 50,
ballSize: new Point(20, 20), ballSize: new Point(20, 20),
winScore: 2 winScore: 2,
}; };
export interface GameUpdate { export interface GameUpdate {
@ -34,4 +34,3 @@ export interface GameUpdate {
ballPosition: Point; ballPosition: Point;
scores: number[]; scores: number[];
} }

14
front/volume/src/components/Pong/utils.ts
View File

@ -32,11 +32,19 @@ export class Rect {
this.size = size; this.size = size;
} }
draw(context: CanvasRenderingContext2D, color: string | CanvasGradient | CanvasPattern) { draw(
context: CanvasRenderingContext2D,
color: string | CanvasGradient | CanvasPattern
) {
const offset: Point = new Point(this.size.x / 2, this.size.y / 2); const offset: Point = new Point(this.size.x / 2, this.size.y / 2);
context.fillStyle = color; context.fillStyle = color;
context.fillRect(this.center.x - offset.x, this.center.y - offset.y, this.size.x, this.size.y); context.fillRect(
this.center.x - offset.x,
this.center.y - offset.y,
this.size.x,
this.size.y
);
} }
//True if `this` rect contains `other` rect in the x-axis //True if `this` rect contains `other` rect in the x-axis
@ -83,6 +91,6 @@ export class Rect {
export function formatWebsocketData(event: string, data?: any): string { export function formatWebsocketData(event: string, data?: any): string {
return JSON.stringify({ return JSON.stringify({
event, event,
data data,
}); });
} }

10
front/volume/src/components/Profile.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
export let username = ''; export let username = "";
export let realname = ''; export let realname = "";
export let wins = 0; export let wins = 0;
export let losses = 0; export let losses = 0;
export let elo = 0; export let elo = 0;
@ -23,15 +23,15 @@
// else { // else {
// console.log('username update failed'); // console.log('username update failed');
// } // }
alert('Trying to update username to ' + username); alert("Trying to update username to " + username);
} }
async function handleAvatarUpload(event: Event) { async function handleAvatarUpload(event: Event) {
event.preventDefault(); event.preventDefault();
alert('Trying to upload avatar'); alert("Trying to upload avatar");
} }
async function handle2fa(event: Event) { async function handle2fa(event: Event) {
event.preventDefault(); event.preventDefault();
alert('Trying to ' + (is2faEnabled ? 'disable' : 'enable') + ' 2FA'); alert("Trying to " + (is2faEnabled ? "disable" : "enable") + " 2FA");
} }
</script> </script>

2
front/volume/src/main.ts
View File

@ -1,4 +1,4 @@
import App from './App.svelte'; import App from "./App.svelte";
const app = new App({ const app = new App({
target: document.body, target: document.body,

Write Preview
Loading…
Cancel
Save