Salle d'Attente
La Salle d'Attente (WaitingRoomPageComponent) est l'interface où les joueurs se rassemblent avant le début d'une partie. Elle permet aux joueurs de voir qui rejoint la partie, de discuter via le chat, et à l'administrateur de gérer la partie (verrouiller/déverrouiller, ajouter des joueurs virtuels, démarrer la partie, etc.).
WaitingRoomPageComponent
Propriétés
| Propriété | Type | Description |
|---|---|---|
@ViewChild('neonCursorApp') |
ElementRef |
Référence à l'élément DOM du mini-jeu d'effet néon |
onGoingGame |
OnGoingGame |
Instance du jeu en attente |
gameCode |
string |
Code d'accès à la partie |
isLocked |
boolean |
Indique si la partie est verrouillée |
isGameFull |
boolean |
Indique si la partie a atteint sa capacité maximale |
mode |
string |
Mode d'entrée ('create' pour créateur, 'join' pour participant) |
isAdmin |
boolean |
Indique si l'utilisateur est l'administrateur de la partie |
players |
Player[] |
Liste des joueurs dans la salle d'attente |
defaultPlayers |
(Player | null)[] |
Tableau des emplacements de joueurs (avec des valeurs null pour les emplacements vides) |
showMiniGame |
boolean |
Contrôle l'affichage du mini-jeu Néon |
neonCursorInstance |
unknown |
Instance du script du mini-jeu |
isPopupActive |
boolean |
Contrôle l'affichage du popup d'erreur général |
isValidationPopupActive |
boolean |
Contrôle l'affichage du popup de validation |
isGameCancelledPopup |
boolean |
Contrôle l'affichage du popup d'annulation de partie |
isPlayerKickedPopupActive |
boolean |
Contrôle l'affichage du popup d'exclusion |
isKickValidationPopupActive |
boolean |
Contrôle l'affichage du popup de confirmation d'exclusion |
isVirtualPlayerChoiceActive |
boolean |
Contrôle l'affichage du popup de choix de joueur virtuel |
playerNameToKick |
string |
Nom du joueur à exclure |
popupMessage |
string |
Message à afficher dans les popups |
gridLimits |
{ [key: number]: number } |
Limite de joueurs en fonction de la taille de la grille |
private subscriptions |
Subscription[] |
Liste des abonnements aux observables |
Méthodes
constructor(private router: Router, private route: ActivatedRoute, private characterCreation: CharacterCreationService, private waitingRoomService: WaitingRoomService, private renderer: Renderer2)
Description : Initialise le composant avec les services nécessaires et configure les abonnements aux événements socket.
Paramètres :
router: Service de navigation Angularroute: Service pour accéder aux paramètres de routecharacterCreation: Service de création de personnagewaitingRoomService: Service de gestion de la salle d'attenterenderer: Service pour manipuler le DOM
Détails : Configure plusieurs abonnements pour gérer les mises à jour de l'état du jeu, le verrouillage, le démarrage, l'annulation et l'exclusion des joueurs.
ngOnInit()
Description : Initialise le composant au chargement et détermine si l'utilisateur est l'administrateur.
Retour : void
Détails : Utilise les paramètres de route pour déterminer le mode ('create' ou 'join') et définit isAdmin en conséquence.
toggleLock()
Description : Bascule l'état de verrouillage de la partie si possible.
Retour : void
Détails : Vérifie d'abord si la partie est pleine avant de permettre le déverrouillage. Communique avec le service waitingRoomService pour mettre à jour l'état sur le serveur.
startGame()
Description : Vérifie les conditions pour démarrer la partie et l'initialise si tout est en ordre.
Retour : void
Détails : Vérifie que la partie est verrouillée, qu'il y a au moins 2 joueurs, et que le mode CTF a un nombre pair de joueurs si nécessaire. Utilise le service waitingRoomService pour démarrer la partie.
kickPlayerValidation(playerName: string)
Description : Prépare l'exclusion d'un joueur en affichant un popup de confirmation.
Paramètres : playerName: Nom du joueur à exclure
Retour : void
Détails : Stocke le nom du joueur et affiche le popup de confirmation.
kickPlayer()
Description : Confirme l'exclusion d'un joueur de la partie.
Retour : void
Détails : Vérifie que la partie et le code existent, puis utilise le service waitingRoomService pour exclure le joueur.
quitRoomValidation()
Description : Affiche un popup de confirmation pour quitter la salle d'attente ou annuler la partie.
Retour : void
Détails : Adapte le message selon que l'utilisateur est l'administrateur ou un joueur normal.
quitRoom()
Description : Quitte la salle d'attente ou annule la partie.
Retour : void
Détails : Utilise le service waitingRoomService pour notifier le serveur, déverrouille la partie si en mode 'join', et redirige vers la page d'accueil.
addTypeChoice()
Description : Prépare l'ajout d'un joueur virtuel en affichant le popup de choix du type.
Retour : void
Détails : Vérifie d'abord que la partie n'est pas verrouillée avant de permettre l'ajout.
addVirtualPlayer(playerType: string)
Description : Ajoute un joueur virtuel du type spécifié à la partie.
Paramètres : playerType: Type de joueur virtuel ('AggressiveBot' ou 'DefensiveBot')
Retour : void
Détails : Vérifie d'abord que la partie n'est pas pleine avant d'ajouter le joueur virtuel.
closeVirtualPlayerChoice()
Description : Ferme le popup de choix de joueur virtuel.
Retour : void
closeValidationPopup()
Description : Ferme les popups de validation et de confirmation d'exclusion.
Retour : void
closePopup()
Description : Ferme le popup d'erreur général.
Retour : void
closeGameCancelledPopup()
Description : Ferme le popup d'annulation de partie et redirige vers la page d'accueil.
Retour : void
closePlayerKickedPopup()
Description : Ferme le popup d'exclusion et redirige vers la page d'accueil.
Retour : void
playMiniGames()
Description : Active l'affichage du mini-jeu d'effet néon.
Retour : void
Détails : Utilise un délai pour charger le script après l'affichage de l'interface.
closeMiniGame()
Description : Ferme le mini-jeu et nettoie les ressources associées.
Retour : void
Détails : Supprime les éléments canvas ajoutés et réinitialise l'instance.
quitGame()
Description : Redirige directement vers la page d'accueil.
Retour : void
ngOnDestroy()
Description : Nettoie les abonnements lors de la destruction du composant.
Retour : void
Détails : Annule tous les abonnements pour éviter les fuites de mémoire.
loadNeonCursorScript()
Description : Charge dynamiquement le script pour le mini-jeu d'effet néon.
Retour : void
Détails : Crée un élément script et l'ajoute au DOM pour charger et initialiser l'effet néon.
updateUI(game: OnGoingGame)
Description : Met à jour l'interface utilisateur avec les informations de la partie.
Paramètres : game: Instance mise à jour du jeu
Retour : void
Détails : Met à jour les propriétés du composant et réorganise le tableau des emplacements de joueurs.
Composants utilisés
ChatboxComponent
Le ChatboxComponent est un composant de chat intégré qui permet aux joueurs de communiquer pendant l'attente et pendant la partie.
Propriétés
| Propriété | Type | Description |
|---|---|---|
@ViewChild('chatMessages') |
ElementRef |
Référence à l'élément DOM contenant les messages du chat |
@ViewChild(GameLogComponent) |
GameLogComponent |
Référence au composant de journal de jeu intégré |
@Input() initialVisibility |
boolean |
État initial de visibilité du chat |
messages |
ChatMessage[] |
Liste des messages du chat |
newMessage |
string |
Contenu du nouveau message à envoyer |
isChatboxVisible |
boolean |
Contrôle la visibilité du chat |
isJournalMode |
boolean |
Indique si le chat est en mode journal |
isLogFiltered |
boolean |
Indique si le journal est filtré |
unreadMessagesCount |
number |
Nombre de messages non lus |
private messagesSubscription |
Subscription |
Abonnement aux messages du chat |
private playerName |
string |
Nom du joueur actuel |
private gameCode |
string |
Code de la partie actuelle |
Méthodes
constructor(private chatService: ChatService, private socketService: SocketService, private statsService: StatsService)
Description : Initialise le composant avec les services nécessaires.
Paramètres :
chatService: Service de gestion des messages du chatsocketService: Service de communication socketstatsService: Service de gestion des statistiques
ngOnInit()
Description : Initialise le composant au chargement.
Retour : void
Détails :
- S'abonne au flux de messages du chat
- Réinitialise le compteur de messages non lus
- Récupère le nom du joueur et le code de la partie
- Se connecte au chat avec le code de la partie
- S'abonne aux événements de mise à jour du jeu
ngAfterViewInit()
Description : Exécute des actions après le rendu du composant.
Retour : void
Détails : Fait défiler la vue vers le bas pour afficher les derniers messages.
ngOnDestroy()
Description : Nettoie les ressources lors de la destruction du composant.
Retour : void
Détails : Annule l'abonnement aux messages pour éviter les fuites de mémoire.
sendMessage()
Description : Envoie un nouveau message dans le chat.
Retour : void
Détails : Vérifie que le message n'est pas vide, puis utilise le service pour l'envoyer.
scrollToBottom()
Description : Fait défiler la vue des messages vers le bas.
Retour : void
Détails : Utilise l'élément de référence pour modifier le défilement.
toggleChatbox()
Description : Bascule la visibilité du chat.
Retour : void
Détails : Réinitialise le compteur de messages non lus lorsque le chat devient visible.
toggleJournalMode()
Description : Bascule entre le mode chat et le mode journal.
Retour : void
Détails : Réinitialise le filtre si on quitte le mode journal.
toggleLogFilter()
Description : Active/désactive le filtrage des entrées du journal.
Retour : void
Détails : Propage le changement au composant de journal.
connectToChat(gameCode: string)
Description : Établit la connexion au chat pour une partie spécifique.
Paramètres : gameCode: Code de la partie
Retour : void
Détails : Rejoint la salle socket et configure le service de chat.
getGameCodeAndConnectToChat()
Description : Récupère le code de la partie et établit la connexion au chat.
Retour : void
Détails : Tente de récupérer le code depuis différentes sources.
OneButtonPopupComponent
Composant de popup simple avec un seul bouton pour les messages d'information ou d'erreur.
Propriétés
| Propriété | Type | Description |
|---|---|---|
@Input() isPopupActive |
boolean |
Contrôle l'affichage du popup |
@Input() popupMessage |
string |
Message à afficher |
@Input() closePopup |
() => void |
Fonction de fermeture |
TwoButtonsPopupComponent
Composant de popup avec deux boutons pour les demandes de confirmation.
Propriétés
| Propriété | Type | Description |
|---|---|---|
@Input() isPopupActive |
boolean |
Contrôle l'affichage du popup |
@Input() popupMessage |
string |
Message à afficher |
@Input() validatePopup |
() => void |
Fonction de validation |
@Input() closePopup |
() => void |
Fonction de fermeture |
Services utilisés
WaitingRoomService
Service principal pour gérer les communications liées à la salle d'attente.
Méthodes
constructor(private socketService: SocketService)
Description : Initialise le service avec le service socket.
Paramètres : socketService: Service de gestion des communications socket
onGameUpdated()
Description : Retourne un Observable pour les mises à jour du jeu.
Retour : Observable(OnGoingGame)
Détails : Écoute l'événement GameUpdated sur le socket.
requestGameUpdate(gameCode: string)
Description : Demande une mise à jour du jeu au serveur.
Paramètres : gameCode: Code de la partie
Retour : void
Détails : Émet l'événement RequestGameUpdate sur le socket.
onGameLockUpdated()
Description : Retourne un Observable pour les mises à jour de l'état de verrouillage.
Retour : Observable(boolean)
Détails : Écoute l'événement GameLockUpdated sur le socket et extrait l'état de verrouillage.
toggleGameLock(isLocked: boolean)
Description : Change l'état de verrouillage de la partie.
Paramètres : isLocked: Nouvel état de verrouillage
Retour : void
Détails : Émet l'événement ToggleGameLock sur le socket.
leaveWaitingRoom()
Description : Notifie le serveur que le joueur quitte la salle d'attente.
Retour : void
Détails : Émet l'événement LeaveWaitingRoom sur le socket.
kickPlayer(nip: string, playerName: string)
Description : Exclut un joueur de la partie.
Paramètres :
nip: Code de la partieplayerName: Nom du joueur à exclure
Retour : void
Détails : Émet l'événement KickPlayer sur le socket.
addVirtualPlayer(nip: string, playerType: string)
Description : Ajoute un joueur virtuel à la partie.
Paramètres :
nip: Code de la partieplayerType: Type de joueur virtuel
Retour : void
Détails : Émet l'événement AddVirtualPlayer sur le socket.
onPlayerKicked()
Description : Retourne un Observable pour les notifications d'exclusion.
Retour : Observable(string)
Détails : Écoute l'événement Kicked sur le socket et extrait le message.
onGameCancelled()
Description : Retourne un Observable pour les notifications d'annulation de partie.
Retour : Observable(string)
Détails : Écoute l'événement GameCancelled sur le socket et extrait le message.
startGame(gameCode: string)
Description : Démarre la partie.
Paramètres : gameCode: Code de la partie
Retour : void
Détails : Émet l'événement StartGame sur le socket.
onStartGame()
Description : Retourne un Observable pour les notifications de démarrage de partie.
Retour : Observable(OnGoingGame)
Détails : Écoute l'événement StartGame sur le socket.
getCurrentGame()
Description : Obtient le sujet BehaviorSubject contenant le jeu actuel.
Retour : BehaviorSubject(OnGoingGame)
setCurrentGame(game: OnGoingGame)
Description : Définit le jeu actuel dans le service.
Paramètres : game: Jeu à définir
Retour : void
getCurrentPlayer()
Description : Obtient le sujet BehaviorSubject contenant le joueur actuel.
Retour : BehaviorSubject(Player)
setCurrentPlayer(player: Player)
Description : Définit le joueur actuel dans le service.
Paramètres : player: Joueur à définir
Retour : void
updatePlayer()
Description : Met à jour les informations du joueur actuel.
Retour : void
Détails : Trouve le joueur dans la liste des joueurs du jeu actuel et met à jour le joueur actuel.
CharacterCreationService
Service qui gère la création de personnage et la création/participation à une partie.
Méthodes pertinentes pour la salle d'attente
createGame(player: Player, game: Game)
Description : Crée une nouvelle partie avec le joueur comme administrateur.
Paramètres :
player: Joueur qui crée la partiegame: Jeu sélectionné
Retour : void
Détails : Définit le joueur comme administrateur, crée une instance OnGoingGame et émet l'événement CreateGame.
onGameCreated()
Description : Retourne un Observable pour les notifications de création de partie.
Retour : Observable(OnGoingGame)
Détails : Écoute l'événement GameCreated sur le socket.
joinWaitingRoom(player: Player)
Description : Fait rejoindre au joueur une salle d'attente existante.
Paramètres : player: Joueur qui rejoint
Retour : void
Détails : Émet l'événement JoinWaitingRoom sur le socket.
SocketService
Le SocketService est un service fondamental qui gère les communications en temps réel avec le serveur via Socket.IO.
Propriétés
| Propriété | Type | Description |
|---|---|---|
socket |
Socket |
Instance de la connexion Socket.IO |
private currentGameSubject |
BehaviorSubject<OnGoingGame> |
Sujet contenant l'état actuel du jeu |
private currentPlayerSubject |
BehaviorSubject<Player> |
Sujet contenant l'état actuel du joueur |
Méthodes
constructor(server: Server, private onGoingGameService: OnGoingGameService, private waitingSocketService: WaitingSocketService, private joinRoomService: JoinGameService, private timerService: TimerSocketService, private combatService: CombatSocketService, private chatService: ChatService)
Description : Initialise le service avec les dépendances requises.
Paramètres :
server: Instance du serveur Express/Socket.IO- Plusieurs services de gestion des différents aspects du jeu
Détails : Récupère l'instance IO du serveur et initialise les connexions.
sendToRoom(nip: string, dir: string, data?: unknown)
Description : Envoie un événement à tous les sockets dans une salle spécifique.
Paramètres :
nip: Code de la salle/partiedir: Nom de l'événementdata: Données à envoyer (optionnel)
Retour : void
getIO()
Description : Récupère l'instance du serveur Socket.IO.
Retour : SocketIOServer
init()
Description : Initialise les écouteurs d'événements socket.
Retour : void
Détails : Configure les écouteurs pour l'événement de connexion.
activateNewSocket(socket: Socket)
Description : Configure un nouveau socket avec tous les gestionnaires d'événements nécessaires.
Paramètres : socket: Nouvelle connexion socket
Retour : void
Détails : Initialise le socket avec les gestionnaires pour la salle d'attente, le jeu, le chat, etc.
listen<T>(event: string)
Description : Crée un Observable pour écouter un type spécifique d'événement.
Paramètres : event: Nom de l'événement à écouter
Retour : Observable(T)
Détails : Transforme les événements socket en flux Observable pour une utilisation avec RxJS.
reconnect()
Description : Rétablit la connexion socket après une déconnexion.
Retour : void
Détails : Déconnecte d'abord le socket existant, puis crée une nouvelle connexion.
emit(event: string, data?: unknown)
Description : Émet un événement au serveur.
Paramètres :
event: Nom de l'événementdata: Données à envoyer (optionnel)
Retour : void
joinRoom(nip: string)
Description : Fait rejoindre au socket une salle spécifique.
Paramètres : nip: Code de la salle/partie
Retour : void
Détails : Vérifie d'abord que le socket est connecté avant de tenter de rejoindre.
disconnect()
Description : Déconnecte le socket du serveur.
Retour : void
on<T>(event: string, callback: (data: T) => void)
Description : Ajoute un écouteur d'événement direct au socket.
Paramètres :
event: Nom de l'événement à écoutercallback: Fonction à exécuter lors de la réception de l'événement
Retour : void
Communication avec le Serveur
La communication avec le serveur se fait via Socket.IO, géré par le SocketService et abstrait par les services spécifiques. Les principaux événements sont:
-
Émissions:
SocketIOEvents.ToggleGameLock: Pour verrouiller/déverrouiller la partieSocketIOEvents.LeaveWaitingRoom: Pour quitter la salle d'attenteSocketIOEvents.KickPlayer: Pour exclure un joueurSocketIOEvents.AddVirtualPlayer: Pour ajouter un joueur virtuelSocketIOEvents.StartGame: Pour démarrer la partie
-
Réceptions:
SocketIOEvents.GameUpdated: Mise à jour des informations de la partieSocketIOEvents.GameLockUpdated: Mise à jour de l'état de verrouillageSocketIOEvents.StartGame: Notification de démarrage de partieSocketIOEvents.GameCancelled: Notification d'annulation de partieSocketIOEvents.Kicked: Notification d'exclusion
Navigation
La Salle d'Attente peut rediriger vers:
- Page d'Accueil (
MainPageComponent) - Lorsque le joueur quitte ou est exclu, ou que la partie est annulée - Page de Jeu (
GameViewPageComponent) - Lorsque la partie démarre
Mini-jeu d'Effet Néon
Un mini-jeu d'effet néon est disponible pour les joueurs pendant l'attente:
- Activation: Via le bouton "MINI JEUX D'ATTENTE" pour les joueurs non-administrateurs
- Fonctionnement: Un effet visuel interactif où le curseur laisse une traînée lumineuse (utilise la bibliothèque threejs-toys)
- Technique: Le script est chargé dynamiquement via la méthode
loadNeonCursorScript()et intégré à l'élément DOM référencé parneonCursorApp
Gestion des Joueurs Virtuels
Les administrateurs peuvent ajouter des joueurs virtuels (bots) pour compléter la partie:
- Types:
AggressiveBot: Un bot avec une stratégie agressiveDefensiveBot: Un bot avec une stratégie défensive
- Limites: La partie a une limite de joueurs basée sur la taille de la grille (définie dans
gridLimits) - Verrouillage: Les joueurs virtuels ne peuvent être ajoutés que lorsque la partie n'est pas verrouillée