diff --git a/front/volume/public/global.css b/front/volume/public/global.css index d7f5bb0..f856a8d 100644 --- a/front/volume/public/global.css +++ b/front/volume/public/global.css @@ -64,7 +64,7 @@ button { } button:disabled { - color: #6c757d; + color: #aab3bb; cursor: not-allowed; } diff --git a/front/volume/src/components/Pong/GameCreation.svelte b/front/volume/src/components/Pong/GameCreation.svelte index 13c7600..4b7d9c0 100644 --- a/front/volume/src/components/Pong/GameCreation.svelte +++ b/front/volume/src/components/Pong/GameCreation.svelte @@ -33,7 +33,7 @@
Friend: -
@@ -74,7 +74,7 @@ } .window { - background-color: #fff; + background-color: #343a40; border: 1px solid #ccc; border-radius: 5px; padding: 1rem; diff --git a/front/volume/src/components/Pong/Matchmaking.svelte b/front/volume/src/components/Pong/Matchmaking.svelte index a696a80..a301b32 100644 --- a/front/volume/src/components/Pong/Matchmaking.svelte +++ b/front/volume/src/components/Pong/Matchmaking.svelte @@ -24,7 +24,7 @@ } .window { - background-color: #fff; + background-color: #343a40; border: 1px solid #ccc; border-radius: 5px; padding: 1rem; diff --git a/front/volume/src/components/Pong/Pong.svelte b/front/volume/src/components/Pong/Pong.svelte index 33a5f81..b3b6a10 100644 --- a/front/volume/src/components/Pong/Pong.svelte +++ b/front/volume/src/components/Pong/Pong.svelte @@ -12,6 +12,9 @@ import { io, Socket } from "socket.io-client"; import type { GameUpdate } from "./dtos/GameUpdate"; import type { GameInfo } from "./dtos/GameInfo"; + import { popup } from "../Alert/content"; + import Alert from "../Alert/Alert.svelte"; + import { bind } from 'svelte-simple-modal'; export function inviteToGame(event: CustomEvent) { setAppState(APPSTATE.CREATE_GAME); @@ -97,6 +100,9 @@ socket.on(GAME_EVENTS.CREATE_GAME, (succeeded: boolean) => { if (succeeded) { gamePlaying = true; + } else { + gamePlaying = false; + popup.set(bind(Alert, { message: "Failed to invite user. Is he currently connected to the game?", form: false })) } }); socket.on(GAME_EVENTS.MATCHMAKING, (data: MatchmakingDto) => {