diff --git a/front/Dockerfile b/front/Dockerfile index 1d6363b..840be25 100644 --- a/front/Dockerfile +++ b/front/Dockerfile @@ -11,6 +11,6 @@ ENTRYPOINT npm install; \ elif [[ $NODE_ENV == "debug" ]]; then \ npm run dev; \ 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."; \ fi; diff --git a/front/volume/package-lock.json b/front/volume/package-lock.json index 54c1938..8555d88 100644 --- a/front/volume/package-lock.json +++ b/front/volume/package-lock.json @@ -14,6 +14,8 @@ "vite": "^4.1.0" }, "devDependencies": { + "prettier": "^2.8.4", + "prettier-plugin-svelte": "^2.9.0", "svelte-check": "^2.10.3", "tslib": "^2.5.0", "typescript": "^4.9.3" @@ -1017,6 +1019,31 @@ "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": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", diff --git a/front/volume/package.json b/front/volume/package.json index b6479ee..2fb6180 100644 --- a/front/volume/package.json +++ b/front/volume/package.json @@ -7,17 +7,20 @@ "dev": "vite --host", "build": "vite build", "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": { + "prettier": "^2.8.4", + "prettier-plugin-svelte": "^2.9.0", "svelte-check": "^2.10.3", "tslib": "^2.5.0", "typescript": "^4.9.3" }, "dependencies": { - "svelte": "^3.55.1", - "vite": "^4.1.0", + "@sveltejs/vite-plugin-svelte": "^2.0.2", "@tsconfig/svelte": "^3.0.0", - "@sveltejs/vite-plugin-svelte": "^2.0.2" + "svelte": "^3.55.1", + "vite": "^4.1.0" } } diff --git a/front/volume/src/App.svelte b/front/volume/src/App.svelte index a1bfc7b..fa119e7 100644 --- a/front/volume/src/App.svelte +++ b/front/volume/src/App.svelte @@ -1,83 +1,102 @@
- - {#if isSpectateOpen} -
(isSpectateOpen = false)} on:keydown={() => (isSpectateOpen = false)}> - -
- {/if} - {#if isFriendOpen} -
(isFriendOpen = false)} on:keydown={() => (isFriendOpen = false)}> - -
- {/if} - {#if isHistoryOpen} -
(isHistoryOpen = false)} on:keydown={() => (isHistoryOpen = false)}> - -
- {/if} - {#if isProfileOpen} -
(isProfileOpen = false)} on:keydown={() => (isProfileOpen = false)}> - -
- {/if} - - - + + {#if isSpectateOpen} +
(isSpectateOpen = false)} + on:keydown={() => (isSpectateOpen = false)} + > + +
+ {/if} + {#if isFriendOpen} +
(isFriendOpen = false)} + on:keydown={() => (isFriendOpen = false)} + > + +
+ {/if} + {#if isHistoryOpen} +
(isHistoryOpen = false)} + on:keydown={() => (isHistoryOpen = false)} + > + +
+ {/if} + {#if isProfileOpen} +
(isProfileOpen = false)} + on:keydown={() => (isProfileOpen = false)} + > + +
+ {/if} + + +
diff --git a/front/volume/src/components/Friends.svelte b/front/volume/src/components/Friends.svelte index 452ec7b..085a681 100644 --- a/front/volume/src/components/Friends.svelte +++ b/front/volume/src/components/Friends.svelte @@ -1,80 +1,80 @@
-
-
- {#if friends.length > 0} -

Monkey friends

- {#each friends.slice(0, 10) as friend} -
  • - {friend.username} is {friend.status} -
    • - {/each} - {:else} -

    No friends to display

    - {/if} -
    -

    Add a friend

    -
    - - -
    -
    -
    -
    +
    +
    + {#if friends.length > 0} +

    Monkey friends

    + {#each friends.slice(0, 10) as friend} +
  • + {friend.username} is {friend.status} +
    • + {/each} + {:else} +

    No friends to display

    + {/if} +
    +

    Add a friend

    +
    + + +
    +
    +
    +
    diff --git a/front/volume/src/components/MatchHistory.svelte b/front/volume/src/components/MatchHistory.svelte index 68c9101..07f1f93 100644 --- a/front/volume/src/components/MatchHistory.svelte +++ b/front/volume/src/components/MatchHistory.svelte @@ -1,58 +1,58 @@
    -
    -
    - {#if matches.length > 0} -

    Last 10 monkey games

    - {#each matches.slice(0, 10) as match} -
  • - {match.winner} 1 - 0 {match.loser} - {#if match.points > 0} - +{match.points} - {:else} - {match.points} - {/if} - MP | rank #{match.rank} -
    • - {/each} - {:else} -

    No matches to display

    - {/if} -
    -
    +
    +
    + {#if matches.length > 0} +

    Last 10 monkey games

    + {#each matches.slice(0, 10) as match} +
  • + {match.winner} 1 - 0 {match.loser} + {#if match.points > 0} + +{match.points} + {:else} + {match.points} + {/if} + MP | rank #{match.rank} +
    • + {/each} + {:else} +

    No matches to display

    + {/if} +
    +
    diff --git a/front/volume/src/components/NavBar.svelte b/front/volume/src/components/NavBar.svelte index a101a28..9604f56 100644 --- a/front/volume/src/components/NavBar.svelte +++ b/front/volume/src/components/NavBar.svelte @@ -1,106 +1,106 @@ diff --git a/front/volume/src/components/Play.svelte b/front/volume/src/components/Play.svelte index ca6f100..71c1f90 100644 --- a/front/volume/src/components/Play.svelte +++ b/front/volume/src/components/Play.svelte @@ -1,38 +1,38 @@
    -

    Choose a gamemode

    - - - + +
    diff --git a/front/volume/src/components/Pong/Ball.ts b/front/volume/src/components/Pong/Ball.ts index cfb0828..52ba4e1 100644 --- a/front/volume/src/components/Pong/Ball.ts +++ b/front/volume/src/components/Pong/Ball.ts @@ -1,15 +1,19 @@ -import { Point, Rect } from './utils'; +import { Point, Rect } from "./utils"; export class Ball { - rect: Rect; - speed: Point; - color: string | CanvasGradient | CanvasPattern = 'white'; + rect: Rect; + speed: Point; + color: string | CanvasGradient | CanvasPattern = "white"; - constructor(spawn: Point, size: Point = new Point(20, 20), speed: Point = new Point(10, 2)) { - this.rect = new Rect(spawn, size); - } + constructor( + spawn: Point, + size: Point = new Point(20, 20), + speed: Point = new Point(10, 2) + ) { + this.rect = new Rect(spawn, size); + } - draw(context: CanvasRenderingContext2D) { - this.rect.draw(context, this.color); - } + draw(context: CanvasRenderingContext2D) { + this.rect.draw(context, this.color); + } } diff --git a/front/volume/src/components/Pong/Game.ts b/front/volume/src/components/Pong/Game.ts index e74f865..2e2ffe4 100644 --- a/front/volume/src/components/Pong/Game.ts +++ b/front/volume/src/components/Pong/Game.ts @@ -1,82 +1,96 @@ -import { Ball } from './Ball'; -import { GAME_EVENTS } from './constants'; -import type { GameInfo, GameUpdate } from './constants'; -import { Paddle } from './Paddle'; -import { Player } from './Player'; -import { formatWebsocketData, Point } from './utils'; +import { Ball } from "./Ball"; +import { GAME_EVENTS } from "./constants"; +import type { GameInfo, GameUpdate } from "./constants"; +import { Paddle } from "./Paddle"; +import { Player } from "./Player"; +import { formatWebsocketData, Point } from "./utils"; -const BG_COLOR = 'black'; +const BG_COLOR = "black"; export class Game { - canvas: HTMLCanvasElement; - context: CanvasRenderingContext2D; - ball: Ball; - players: Player[]; - my_paddle: Paddle; - id: string; + canvas: HTMLCanvasElement; + context: CanvasRenderingContext2D; + ball: Ball; + players: Player[]; + my_paddle: Paddle; + id: string; - constructor(canvas: HTMLCanvasElement, context: CanvasRenderingContext2D) { - this.canvas = canvas; - this.context = context; - this.players = []; - this.my_paddle = null; - } + constructor(canvas: HTMLCanvasElement, context: CanvasRenderingContext2D) { + this.canvas = canvas; + this.context = context; + this.players = []; + this.my_paddle = null; + } - setInfo(data: GameInfo) { - this.canvas.width = data.mapSize.x; - this.canvas.height = data.mapSize.y; + setInfo(data: GameInfo) { + this.canvas.width = data.mapSize.x; + 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 paddle2: Paddle = new Paddle( - new Point(this.canvas.width - data.playerXOffset, this.canvas.height / 2), - data.paddleSize - ); - this.players = [new Player(paddle1), new Player(paddle2)]; - this.my_paddle = this.players[data.yourPaddleIndex].paddle; - this.id = data.gameId; - } + const paddle1: Paddle = new Paddle( + new Point(data.playerXOffset, this.canvas.height / 2), + data.paddleSize + ); + const paddle2: Paddle = new Paddle( + new Point(this.canvas.width - data.playerXOffset, this.canvas.height / 2), + data.paddleSize + ); + this.players = [new Player(paddle1), new Player(paddle2)]; + this.my_paddle = this.players[data.yourPaddleIndex].paddle; + this.id = data.gameId; + } - start(socket: WebSocket) { - if (this.my_paddle) { - this.canvas.addEventListener('mousemove', (e) => { - this.my_paddle.move(e); - socket.send( - formatWebsocketData(GAME_EVENTS.PLAYER_MOVE, { - position: this.my_paddle.rect.center - }) - ); - }); - console.log('Game started!'); - } - } + start(socket: WebSocket) { + if (this.my_paddle) { + this.canvas.addEventListener("mousemove", (e) => { + this.my_paddle.move(e); + socket.send( + formatWebsocketData(GAME_EVENTS.PLAYER_MOVE, { + position: this.my_paddle.rect.center, + }) + ); + }); + console.log("Game started!"); + } + } - update(data: GameUpdate) { - if (this.players[0].paddle != this.my_paddle) { - this.players[0].paddle.rect.center = data.paddlesPositions[0]; - } - if (this.players[1].paddle != this.my_paddle) { - this.players[1].paddle.rect.center = data.paddlesPositions[1]; - } - this.ball.rect.center = data.ballPosition; - for (let i = 0; i < data.scores.length; i++) { - this.players[i].score = data.scores[i]; - } - } + update(data: GameUpdate) { + if (this.players[0].paddle != this.my_paddle) { + this.players[0].paddle.rect.center = data.paddlesPositions[0]; + } + if (this.players[1].paddle != this.my_paddle) { + this.players[1].paddle.rect.center = data.paddlesPositions[1]; + } + this.ball.rect.center = data.ballPosition; + for (let i = 0; i < data.scores.length; i++) { + this.players[i].score = data.scores[i]; + } + } - draw() { - this.context.fillStyle = BG_COLOR; - this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + draw() { + this.context.fillStyle = BG_COLOR; + this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); - this.players.forEach((p) => p.draw(this.context)); - this.ball.draw(this.context); + this.players.forEach((p) => p.draw(this.context)); + this.ball.draw(this.context); - const max_width = 50; - this.context.font = '50px Arial'; - const text_width = this.context.measureText('0').width; - const text_offset = 50; - this.players[0].drawScore(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); - } + const max_width = 50; + this.context.font = "50px Arial"; + const text_width = this.context.measureText("0").width; + const text_offset = 50; + this.players[0].drawScore( + 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 + ); + } } diff --git a/front/volume/src/components/Pong/Paddle.ts b/front/volume/src/components/Pong/Paddle.ts index ee7f419..38e5691 100644 --- a/front/volume/src/components/Pong/Paddle.ts +++ b/front/volume/src/components/Pong/Paddle.ts @@ -1,29 +1,29 @@ -import { Point, Rect } from './utils'; +import { Point, Rect } from "./utils"; export class Paddle { - rect: Rect; - color: string | CanvasGradient | CanvasPattern = 'white'; + rect: Rect; + color: string | CanvasGradient | CanvasPattern = "white"; - constructor(spawn: Point, size: Point = new Point(6, 100)) { - this.rect = new Rect(spawn, size); - } + constructor(spawn: Point, size: Point = new Point(6, 100)) { + this.rect = new Rect(spawn, size); + } - draw(context: CanvasRenderingContext2D) { - this.rect.draw(context, this.color); - } + draw(context: CanvasRenderingContext2D) { + this.rect.draw(context, this.color); + } - move(e: MouseEvent) { - const canvas = e.target as HTMLCanvasElement; - const rect = canvas.getBoundingClientRect(); - const new_y = ((e.clientY - rect.top) * canvas.height) / rect.height; + move(e: MouseEvent) { + const canvas = e.target as HTMLCanvasElement; + const rect = canvas.getBoundingClientRect(); + const new_y = ((e.clientY - rect.top) * canvas.height) / rect.height; - const offset: number = this.rect.size.y / 2; - if (new_y - offset < 0) { - this.rect.center.y = offset; - } else if (new_y + offset > canvas.height) { - this.rect.center.y = canvas.height - offset; - } else { - this.rect.center.y = new_y; - } - } + const offset: number = this.rect.size.y / 2; + if (new_y - offset < 0) { + this.rect.center.y = offset; + } else if (new_y + offset > canvas.height) { + this.rect.center.y = canvas.height - offset; + } else { + this.rect.center.y = new_y; + } + } } diff --git a/front/volume/src/components/Pong/Player.ts b/front/volume/src/components/Pong/Player.ts index eec3dc9..296cbd3 100644 --- a/front/volume/src/components/Pong/Player.ts +++ b/front/volume/src/components/Pong/Player.ts @@ -1,19 +1,23 @@ -import type { Paddle } from './Paddle'; +import type { Paddle } from "./Paddle"; export class Player { - paddle: Paddle; - score: number; + paddle: Paddle; + score: number; - constructor(paddle: Paddle) { - this.paddle = paddle; - this.score = 0; - } + constructor(paddle: Paddle) { + this.paddle = paddle; + this.score = 0; + } - draw(context: CanvasRenderingContext2D) { - this.paddle.draw(context); - } + draw(context: CanvasRenderingContext2D) { + this.paddle.draw(context); + } - drawScore(score_position_x: number, max_width: number, context: CanvasRenderingContext2D) { - context.fillText(this.score.toString(), score_position_x, 50, max_width); - } + drawScore( + score_position_x: number, + max_width: number, + context: CanvasRenderingContext2D + ) { + context.fillText(this.score.toString(), score_position_x, 50, max_width); + } } diff --git a/front/volume/src/components/Pong/Pong.svelte b/front/volume/src/components/Pong/Pong.svelte index abe17e0..891a9d1 100644 --- a/front/volume/src/components/Pong/Pong.svelte +++ b/front/volume/src/components/Pong/Pong.svelte @@ -1,96 +1,111 @@
    - {#if connected} - Your name: - -
    - -
    - Other player name: - -
    - -
    - -
    -
    - {:else} - Connecting to game server... - {/if} - + {#if connected} + Your name: + +
    + +
    + Other player name: + +
    + +
    + +
    +
    + {:else} + Connecting to game server... + {/if} +
    diff --git a/front/volume/src/components/Pong/constants.ts b/front/volume/src/components/Pong/constants.ts index f632116..d9f1d7c 100644 --- a/front/volume/src/components/Pong/constants.ts +++ b/front/volume/src/components/Pong/constants.ts @@ -1,37 +1,36 @@ -import { Point } from './utils'; +import { Point } from "./utils"; export const GAME_EVENTS = { - START_GAME: 'START_GAME', - READY: 'READY', - GAME_TICK: 'GAME_TICK', - PLAYER_MOVE: 'PLAYER_MOVE', - GET_GAME_INFO: 'GET_GAME_INFO', - CREATE_GAME: 'CREATE_GAME', - REGISTER_PLAYER: 'REGISTER_PLAYER' + START_GAME: "START_GAME", + READY: "READY", + GAME_TICK: "GAME_TICK", + PLAYER_MOVE: "PLAYER_MOVE", + GET_GAME_INFO: "GET_GAME_INFO", + CREATE_GAME: "CREATE_GAME", + REGISTER_PLAYER: "REGISTER_PLAYER", }; export interface GameInfo extends GameInfoConstants { - yourPaddleIndex: number; - gameId: string; + yourPaddleIndex: number; + gameId: string; } export interface GameInfoConstants { - mapSize: Point; - paddleSize: Point; - playerXOffset: number; - ballSize: Point; - winScore: number; + mapSize: Point; + paddleSize: Point; + playerXOffset: number; + ballSize: Point; + winScore: number; } export const gameInfoConstants: GameInfoConstants = { - mapSize: new Point(600, 400), - paddleSize: new Point(6, 50), - playerXOffset: 50, - ballSize: new Point(20, 20), - winScore: 2 + mapSize: new Point(600, 400), + paddleSize: new Point(6, 50), + playerXOffset: 50, + ballSize: new Point(20, 20), + winScore: 2, }; export interface GameUpdate { - paddlesPositions: Point[]; - ballPosition: Point; - scores: number[]; + paddlesPositions: Point[]; + ballPosition: Point; + scores: number[]; } - diff --git a/front/volume/src/components/Pong/utils.ts b/front/volume/src/components/Pong/utils.ts index b083261..38157cf 100644 --- a/front/volume/src/components/Pong/utils.ts +++ b/front/volume/src/components/Pong/utils.ts @@ -1,88 +1,96 @@ export class Point { - x: number; - y: number; + x: number; + y: number; - constructor(x: number, y: number) { - this.x = x; - this.y = y; - } + constructor(x: number, y: number) { + this.x = x; + this.y = y; + } - //Returns a new point - add(other: Point) { - return new Point(this.x + other.x, this.y + other.y); - } + //Returns a new point + add(other: Point) { + return new Point(this.x + other.x, this.y + other.y); + } - //Modifies `this` point - add_inplace(other: Point) { - this.x += other.x; - this.y += other.y; - } + //Modifies `this` point + add_inplace(other: Point) { + this.x += other.x; + this.y += other.y; + } - clone(): Point { - return new Point(this.x, this.y); - } + clone(): Point { + return new Point(this.x, this.y); + } } export class Rect { - center: Point; - size: Point; + center: Point; + size: Point; - constructor(center: Point, size: Point) { - this.center = center; - this.size = size; - } + constructor(center: Point, size: Point) { + this.center = center; + this.size = size; + } - draw(context: CanvasRenderingContext2D, color: string | CanvasGradient | CanvasPattern) { - const offset: Point = new Point(this.size.x / 2, this.size.y / 2); + draw( + context: CanvasRenderingContext2D, + color: string | CanvasGradient | CanvasPattern + ) { + const offset: Point = new Point(this.size.x / 2, this.size.y / 2); - context.fillStyle = color; - context.fillRect(this.center.x - offset.x, this.center.y - offset.y, this.size.x, this.size.y); - } + context.fillStyle = color; + 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 - contains_x(other: Rect): boolean { - const offset: number = this.size.x / 2; - const offset_other: number = other.size.x / 2; + //True if `this` rect contains `other` rect in the x-axis + contains_x(other: Rect): boolean { + const offset: number = this.size.x / 2; + const offset_other: number = other.size.x / 2; - if ( - this.center.x - offset <= other.center.x - offset_other && - this.center.x + offset >= other.center.x + offset_other - ) - return true; - return false; - } + if ( + this.center.x - offset <= other.center.x - offset_other && + this.center.x + offset >= other.center.x + offset_other + ) + return true; + return false; + } - //True if `this` rect contains `other` rect in the y-axis - contains_y(other: Rect): boolean { - const offset: number = this.size.y / 2; - const offset_other: number = other.size.y / 2; + //True if `this` rect contains `other` rect in the y-axis + contains_y(other: Rect): boolean { + const offset: number = this.size.y / 2; + const offset_other: number = other.size.y / 2; - if ( - this.center.y - offset <= other.center.y - offset_other && - this.center.y + offset >= other.center.y + offset_other - ) - return true; - return false; - } + if ( + this.center.y - offset <= other.center.y - offset_other && + this.center.y + offset >= other.center.y + offset_other + ) + return true; + return false; + } - collides(other: Rect): boolean { - const offset: Point = new Point(this.size.x / 2, this.size.y / 2); - const offset_other: Point = new Point(other.size.x / 2, other.size.y / 2); + collides(other: Rect): boolean { + const offset: Point = new Point(this.size.x / 2, this.size.y / 2); + const offset_other: Point = new Point(other.size.x / 2, other.size.y / 2); - if ( - this.center.x - offset.x < other.center.x + offset_other.x && - this.center.x + offset.x > other.center.x - offset_other.x && - this.center.y - offset.y < other.center.y + offset_other.y && - this.center.y + offset.y > other.center.y - offset_other.y - ) - return true; - return false; - } + if ( + this.center.x - offset.x < other.center.x + offset_other.x && + this.center.x + offset.x > other.center.x - offset_other.x && + this.center.y - offset.y < other.center.y + offset_other.y && + this.center.y + offset.y > other.center.y - offset_other.y + ) + return true; + return false; + } } export function formatWebsocketData(event: string, data?: any): string { - return JSON.stringify({ - event, - data - }); + return JSON.stringify({ + event, + data, + }); } diff --git a/front/volume/src/components/Profile.svelte b/front/volume/src/components/Profile.svelte index 210bb92..f35c445 100644 --- a/front/volume/src/components/Profile.svelte +++ b/front/volume/src/components/Profile.svelte @@ -1,109 +1,109 @@
    -
    -
    - Profile Icon -

    {realname}

    -
    - -
    -
    -
    -
    -
    - - -
    - -
    -

    Wins: {wins}

    -

    Losses: {losses}

    -

    Winrate: {(wins / (wins + losses)) * 100}%

    -

    Elo : {elo}

    -

    Rank: {rank}

    -
    - -
    -
    -
    +
    +
    + Profile Icon +

    {realname}

    +
    + +
    +
    +
    +
    +
    + + +
    + +
    +

    Wins: {wins}

    +

    Losses: {losses}

    +

    Winrate: {(wins / (wins + losses)) * 100}%

    +

    Elo : {elo}

    +

    Rank: {rank}

    +
    + +
    +
    +
    diff --git a/front/volume/src/components/Spectate.svelte b/front/volume/src/components/Spectate.svelte index a9a4b36..38f7738 100644 --- a/front/volume/src/components/Spectate.svelte +++ b/front/volume/src/components/Spectate.svelte @@ -1,53 +1,53 @@
    -
    -
    - {#if spectate.length > 0} -

    Monkey spectating

    - {#each spectate.slice(0, 10) as _spectate} -
  • - {_spectate.player1} VS {_spectate.player2} - -
    • - {/each} - {:else} -

    No matches to spectate

    - {/if} -
    -
    +
    +
    + {#if spectate.length > 0} +

    Monkey spectating

    + {#each spectate.slice(0, 10) as _spectate} +
  • + {_spectate.player1} VS {_spectate.player2} + +
    • + {/each} + {:else} +

    No matches to spectate

    + {/if} +
    +
    diff --git a/front/volume/src/main.ts b/front/volume/src/main.ts index 9494003..c30c26a 100644 --- a/front/volume/src/main.ts +++ b/front/volume/src/main.ts @@ -1,7 +1,7 @@ -import App from './App.svelte'; +import App from "./App.svelte"; const app = new App({ - target: document.body, + target: document.body, }); export const prerender = true;