Documentation Coté Client

Cette documentation présente la structure et le fonctionnement du côté client web de l'application, organisée autour des principales pages et fonctionnalités de manière globale. Pour consulter la documentation détaillée de chaque page, cliquez sur le titre correspondant.

Architecture Générale

L'application est développée avec Angular et suit une architecture modulaire. Elle est composée de:

• Pages: 13 pages principales qui constituent les vues de l'application
• Composants: Éléments réutilisables qui composent les pages
• Services: Logique métier et communication avec le serveur
• Classes: Modèles de données et entités
• Interfaces: Contrats de données
• Guards: Protection des routes selon l'authentification
• Pipes: Transformations de données (traduction)

L'application utilise principalement Socket.IO pour les communications en temps réel avec le serveur, Firebase pour l'authentification, et des API REST pour la gestion des ressources.

Organisation par Pages

L'application web est composée de 13 pages principales qui constituent les vues de l'application.

0. Page d'Authentification (AuthPageComponent)

Fonctionnalité: Point d'entrée de l'application permettant la connexion et l'inscription des utilisateurs.

Services utilisés:

• AuthService: Gestion de l'authentification Firebase
• SocketService: Authentification du socket après connexion
• UserService: Chargement du profil utilisateur

Composants:

• OneButtonPopupComponent: Messages d'information et d'erreur

Éléments de la page:

• Formulaire de connexion (username, mot de passe)
• Formulaire d'inscription (email, username, mot de passe, avatar)
• Bascule entre les modes connexion/inscription
• Vérification de disponibilité du username en temps réel
• Téléchargement d'avatar personnalisé (JPEG, PNG, GIF, WebP)
• Validation des entrées (longueur, format)
• Gestion des erreurs Firebase traduites
• Protection contre la connexion multiple (popup si déjà connecté)

Navigation possible vers:

• Page d'accueil (MainPageComponent) (après connexion réussie)

1. Page d'Accueil (MainPageComponent)

Fonctionnalité: Page principale de navigation après authentification, permettant d'accéder aux différentes sections.

Services utilisés:

• JoinCharacterCreationService: Permet de rejoindre une partie existante
• AuthService: Gestion de la déconnexion
• UserService: Affichage du profil utilisateur

Composants:

• ButtonComponent: Boutons de navigation customisés
• UserViewComponent: Affichage du profil utilisateur
• FriendsMenuComponent: Menu de gestion des amis
• LanguageToggleComponent: Sélecteur de langue

Éléments de la page:

• Popup de saisie de code pour rejoindre une partie
• Logo de l'application
• Cadre avec boutons de navigation
• Vue du profil utilisateur (avatar, username, monnaie virtuelle)
• Menu des amis avec recherche et demandes
• Sélecteur de langue (FR/EN)
• Bouton de déconnexion

Navigation possible vers:

• Création de partie
• Rejoindre une partie (JoinPageComponent)
• Administration des jeux
• Rejoindre une partie existante (via code)

2. Administration des Jeux (AdminPageComponent)

Fonctionnalité: Interface pour gérer les jeux disponibles (création, édition, suppression).

Services utilisés:

• GameService: CRUD (Create, Read, Update, Delete) des jeux dans la base de données
• EditService: Gestion de l'édition des jeux
• AuthService: Authentification pour les opérations

Composants:

• GameBoxComponent: Affichage d'un jeu
• OneButtonPopupComponent: Popups d'information et d'erreur
• TwoButtonsPopupComponent: Popups de confirmation

Éléments de la page:

• Grille d'affichage des jeux
• Boutons de navigation
• Flèches de pagination
• Popup de création d'un nouveau jeu

Navigation possible vers:

• Édition de jeu (EditionPageComponent)
• Création de jeu
• Page d'accueil (MainPageComponent)

3. Édition de Jeu (EditionPageComponent)

Fonctionnalité: Interface pour créer ou modifier un jeu (grille, tuiles, items).

Services utilisés:

• EditService: Gestion de l'édition et vérification
• GameService: Sauvegarde du jeu
• AutoTileService: Logique des tuiles pour les murs

Composants:

• GridComponent: Grille de jeu éditable
• TilesContainerComponent: Sélection des tuiles
• ItemsContainerComponent: Sélection des items
• DescriptionEditingComponent: Édition des métadonnées
• CellComponent: Affichage d'une cellule de la grille

Éléments de la page:

• Zone de la grille de jeu
• Zone des contrôles d'édition
• Popups de confirmation et d'erreur
• Sélection de visibilité (Public, Privé, Privé-Partagé)

Navigation possible vers:

• Administration des jeux (AdminPageComponent)

4. Création de Partie (GameCreationPageComponent)

Fonctionnalité: Sélection d'un jeu et configuration des paramètres de partie.

Services utilisés:

• GameService: Récupération des jeux disponibles
• GameCreationService: Gestion de la sélection et configuration
• UserService: Vérification de la monnaie virtuelle disponible

Composants:

• GameBoxComponent: Affichage des jeux disponibles
• OneButtonPopupComponent: Message d'erreur ou d'information

Éléments de la page:

• Grille d'affichage des jeux
• Configuration de la partie:
  • Visibilité (publique/amis)
  • Frais d'entrée (monnaie virtuelle)
  • Drop-in/drop-out (rejoindre en cours de jeu)
  • Verrouillage de la partie
• Boutons de navigation
• Flèches de pagination

Navigation possible vers:

• Création de personnage (CharacterCreationPageComponent)
• Page d'accueil (MainPageComponent)

5. Page de Rejoindre (JoinPageComponent)

Fonctionnalité: Liste des parties publiques disponibles et possibilité de rejoindre via code.

Services utilisés:

• SocketService: Écoute des mises à jour de parties disponibles
• JoinCharacterCreationService: Validation du code d'accès
• WaitingRoomService: Gestion du drop-in pour les parties en cours
• UserService: Vérification de la monnaie virtuelle

Composants:

• Aucun composant externe (interface inline)

Éléments de la page:

• Liste des parties disponibles avec informations:
  • Nom de la partie
  • Nom de l'administrateur
  • Nombre de joueurs / maximum
  • Taille de la carte
  • Statut (en attente / en cours)
  • Accessibilité (ouverte / verrouillée / pleine / amis seulement)
  • Frais d'entrée
  • Support drop-in/out
  • Aperçu de la carte
• Filtrage des parties (publiques, drop-in/out)
• Popup de saisie de code d'accès
• Rafraîchissement automatique toutes les 10 secondes
• Support du drop-in pour rejoindre une partie en cours

Navigation possible vers:

• Création de personnage (CharacterCreationPageComponent) (pour nouvelle partie)
• Vue de jeu (GameViewPageComponent) (pour drop-in)
• Page d'accueil (MainPageComponent)

6. Création de Personnage (CharacterCreationPageComponent)

Fonctionnalité: Création du personnage avant de rejoindre une partie.

Services utilisés:

• CharacterCreationService: Création du personnage et de la partie
• GameCreationService: Récupération du jeu sélectionné
• WaitingRoomService: Communication avec la salle d'attente
• GameService: Vérification de la disponibilité du jeu
• UserService: Déduction des frais d'entrée

Composants:

• OneButtonPopupComponent: Messages d'erreur et d'information

Éléments de la page:

• Sélecteur d'avatar avec carousel
• Champ de saisie du nom
• Sélection d'attributs (vie, rapidité, attaque, défense)
• Options de bonus et dé
• Affichage des frais d'entrée (si applicable)
• Boutons de navigation

Navigation possible vers:

• Salle d'attente (WaitingRoomPageComponent)
• Page d'accueil (MainPageComponent) ou sélection de jeu (GameCreationPageComponent)

7. Salle d'Attente (WaitingRoomPageComponent)

Fonctionnalité: Interface où les joueurs se regroupent avant le début de la partie.

Services utilisés:

• WaitingRoomService: Gestion de la salle d'attente
• CharacterCreationService: Obtention des informations du joueur
• ChatService: Communication entre joueurs

Composants:

• ChatboxComponent: Système de chat
• OneButtonPopupComponent: Messages d'information
• TwoButtonsPopupComponent: Confirmations

Éléments de la page:

• Grille des joueurs présents
• Code d'accès à la salle
• Contrôles d'administration (verrouillage, démarrage)
• Options d'ajout de joueurs virtuels
• Affichage du prize pool (si frais d'entrée)
• Mini-jeu d'animation néon

Navigation possible vers:

• Vue de jeu (GameViewPageComponent) (quand la partie commence)
• Page d'accueil (MainPageComponent) (annulation)

8. Vue de Jeu (GameViewPageComponent)

Fonctionnalité: Interface principale du jeu où se déroule la partie.

Services utilisés:

• GameViewService: Logique principale du jeu
• CombatService: Gestion des combats
• StatsService: Suivi des statistiques
• ChatService: Chat en jeu
• TranslationService: Traduction de l'interface

Composants:

• GridComponent: Grille de jeu
• CellComponent: Affichage des cellules
• PlayerInfoComponent: Information sur le joueur
• PlayerCommandsComponent: Commandes de jeu
• PlayersListComponent: Liste des joueurs
• CombatMenuComponent: Interface de combat
• ChatboxComponent: Chat entre joueurs
• GameInfoComponent: Informations sur la partie
• TimerComponent: Affichage du temps restant
• AlertNotificationComponent: Notifications
• TileInformationComponent: Information sur les tuiles
• ItemRejectPopupComponent: Gestion de l'inventaire
• OneButtonPopupComponent: Messages d'information
• TwoButtonsPopupComponent: Confirmations
• LanguageToggleComponent: Changement de langue en jeu

Éléments de la page:

• Disposition en trois colonnes (profil, grille, infos)
• Bouton de contrôle de musique
• Popups de fin de partie et d'abandon
• Affichage du prize pool
• Support drop-in/drop-out

Navigation possible vers:

• Page des statistiques (StatsPageComponent) (fin de partie)
• Page d'accueil (MainPageComponent) (abandon)

9. Statistiques (StatsPageComponent)

Fonctionnalité: Affichage des statistiques après une partie.

Services utilisés:

• StatsService: Récupération des statistiques de jeu
• ChatService: Communication entre joueurs
• GameViewService: Nettoyage des états
• SocketService: Communication avec le serveur

Composants:

• ChatboxComponent: Chat entre joueurs

Éléments de la page:

• Tableau de statistiques des joueurs
• Résumé global de la partie
• Section du joueur gagnant
• Affichage des gains en monnaie virtuelle (si prize pool)
• Bouton de retour

Navigation possible vers:

• Page d'accueil (MainPageComponent)

10. Application Principale (AppComponent)

Fonctionnalité: Composant racine contenant le routeur et les animations de transition.

Services utilisés:

• Router: Navigation entre les pages
• AuthService: Gestion de l'authentification
• AppInitializationService: Initialisation de l'application

Composants:

• RouterOutlet: Conteneur pour les routes

Éléments de la page:

• Écran de chargement
• Conteneur pour les animations de transition entre pages
• Initialisation des services globaux

11. Boutique (ShopPageComponent)

Fonctionnalité: Espace d'achat d'articles cosmétiques avec la monnaie virtuelle.

Services utilisés:

• ShopService: Gestion des articles et transactions
• UserService: Profil utilisateur et solde
• AuthService: Authentification pour les achats
• HelpService: Aide contextuelle

Composants:

• ShopItemComponent: Carte d'article
• UserViewComponent: Profil utilisateur
• OneButtonPopupComponent: Messages d'erreur
• TwoButtonsPopupComponent: Confirmation d'achat
• HelpButtonComponent et HelpPopupComponent: Aide

Éléments de la page:

• Grille d'articles (7 articles avec layout asymétrique)
• Affichage du solde en temps réel
• Boutons d'achat avec états (disponible/acheté/insuffisant)
• Popups de confirmation et d'erreur
• Vérification des fonds avant achat
• Mise à jour automatique après transaction

Navigation possible vers:

• Page d'Accueil (MainPageComponent)
• Page d'Aide (HelpPageComponent)

12. Aide (HelpPageComponent)

Fonctionnalité: Documentation complète et guides d'utilisation accessibles dans l'application.

Services utilisés:

• TranslationService: Traductions et changement de langue
• Router: Navigation

Composants:

• UserViewComponent: Profil utilisateur
• Pipes: TranslatePipe, MarkdownPipe

Éléments de la page:

• Sommaire navigable avec 16 sections thématiques
• Contenu formaté en Markdown
• Support FR/EN complet
• Sections couvrant toutes les pages et fonctionnalités
• Guides de gameplay, combat, items, système social
• FAQ et conseils stratégiques

Navigation possible vers:

• Page d'Accueil (MainPageComponent)

Services Principaux

Services d'Authentification et Utilisateur

AuthService

• Intégration Firebase Authentication
• Connexion avec email/mot de passe ou username
• Inscription avec avatar personnalisé
• Vérification de disponibilité du username
• Gestion des tokens ID
• Traduction des erreurs Firebase
• Déconnexion avec nettoyage de session

UserService

• Chargement du profil utilisateur
• Gestion de la monnaie virtuelle
• Mise à jour de l'avatar
• Synchronisation avec le serveur
• Gestion des préférences utilisateur

SessionService (côté client)

• Authentification du socket avec session ID
• Validation de session

Services Sociaux

FriendsService

• Recherche d'utilisateurs
• Envoi de demandes d'amis
• Acceptation/refus de demandes
• Liste d'amis
• Suppression d'amis
• Notifications en temps réel via Socket.IO
• Gestion des avatars

Service d'Internationalisation

TranslationService

• Support Français/Anglais
• Chargement des traductions depuis JSON
• Changement de langue en temps réel
• Synchronisation avec le serveur
• Pipe de traduction pour les templates

Services de Communication

SocketService

• Service principal gérant les connexions Socket.IO
• Authentification du socket avec session ID
• Émission et écoute d'événements

GameSocketHandlerService

• Événements liés au jeu

CombatService

• Gestion des combats

ChatService

• Messagerie en temps réel
• Gestion des canaux

WaitingRoomService

• Gestion de la salle d'attente
• Support du drop-in

Services de Gestion de Jeu

GameService

• CRUD des jeux via API REST
• Authentification des requêtes HTTP

GameCreationService

• Gestion de la sélection de jeu
• Configuration de partie (visibilité, frais, drop-in/out)

GameViewService

• Logique principale du jeu

StatsService

• Suivi des statistiques

Autres Services

EditService

• Gestion de l'édition des jeux

AutoTileService

• Logique des tuiles pour les murs

JoinCharacterCreationService

• Validation du code d'accès
• Gestion du drop-in

HttpInterceptorService

• Ajout automatique des tokens d'authentification aux requêtes HTTP
• Gestion des erreurs HTTP

AppInitializationService

• Initialisation de l'application au démarrage
• Chargement du profil utilisateur
• Configuration initiale

Composants Réutilisables

Composants Sociaux

FriendsMenuComponent

• Interface de gestion des amis
• Onglets (amis, demandes en attente)
• Recherche d'utilisateurs
• Envoi/acceptation/refus de demandes
• Suppression d'amis avec confirmation

UserViewComponent

• Affichage du profil utilisateur
• Avatar, username, monnaie virtuelle
• Popup de profil détaillé

UserSettingsComponent

• Paramètres utilisateur
• Changement de langue
• Préférences

Composants d'Interface

EmojiPickerComponent

• Sélecteur d'emojis pour le chat
• Intégration de @ctrl/ngx-emoji-mart

LanguageToggleComponent

• Sélecteur de langue FR/EN
• Icônes de drapeaux
• Changement instantané

Composants Existants

ButtonComponent

• Boutons de navigation customisés

GameBoxComponent

• Affichage d'un jeu

GridComponent

• Grille de jeu

CellComponent

• Affichage d'une cellule

ChatboxComponent

• Système de chat
• Support des emojis

CombatMenuComponent

• Interface de combat

PlayerInfoComponent

• Information sur le joueur

PlayerCommandsComponent

• Commandes de jeu

PlayersListComponent

• Liste des joueurs

TimerComponent

• Affichage du temps restant

AlertNotificationComponent

• Notifications

TileInformationComponent

• Information sur les tuiles

ItemRejectPopupComponent

• Gestion de l'inventaire

OneButtonPopupComponent

• Messages d'information

TwoButtonsPopupComponent

• Confirmations

TilesContainerComponent

• Sélection des tuiles

ItemsContainerComponent

• Sélection des items

DescriptionEditingComponent

• Édition des métadonnées

GameInfoComponent

• Informations sur la partie

Guards et Sécurité

AuthGuard

• Protection des routes nécessitant une authentification
• Redirection vers la page d'authentification si non connecté
• Attente de l'état d'authentification Firebase

NoAuthGuard

• Protection de la page d'authentification
• Redirection vers l'accueil si déjà connecté
• Évite l'accès à la page de login pour les utilisateurs authentifiés

Pipes

TranslatePipe

• Transformation des clés de traduction en texte localisé
• Utilisation dans les templates: {{ 'KEY' | translate }}
• Mise à jour automatique lors du changement de langue

Communication Client-Serveur

La communication avec le serveur est gérée via:

1. Socket.IO: Services implémentant la communication en temps réel:

   • SocketService: Service principal gérant les connexions
   • GameSocketHandlerService: Événements liés au jeu
   • CombatSocketService: Gestion des combats
   • ChatService: Messagerie
   • WaitingRoomService: Gestion de la salle d'attente
   • FriendsService: Notifications d'amis

2. HTTP: Utilisé pour la gestion des ressources:

   • GameService: CRUD des jeux via API REST
   • AuthService: Authentification et inscription
   • UserService: Gestion du profil
   • FriendsService: Gestion des amis

3. Firebase: Authentification

   • AuthService: Authentification Firebase

Entités Principales

• Game: Définition d'un jeu (grille, mode, taille)
• OnGoingGame: État d'une partie en cours
• Player: Informations sur un joueur
• Bot: Extension de Player pour les IA (Joueurs Virtuels défensifs et agressifs)
• Combat: État d'un combat entre joueurs
• Cell: Cellule de la grille de jeu
• Item: Objets que les joueurs peuvent collecter
• UserProfile: Profil utilisateur avec monnaie virtuelle
• FriendUser: Informations d'un utilisateur dans le contexte des amis

Fonctionnalités Clés

Authentification Complète

• Connexion/inscription avec Firebase
• Gestion de session unique (un appareil à la fois)
• Avatar personnalisé
• Validation en temps réel

Système Social

• Amis avec recherche
• Demandes en temps réel
• Notifications Socket.IO

Internationalisation

• Support FR/EN complet
• Changement de langue dynamique
• Traductions partagées avec le serveur

Économie Virtuelle

• Monnaie virtuelle par utilisateur
• Frais d'entrée configurables
• Prize pool affiché en jeu
• Gains automatiques

Amélioration du Matchmaking

• Page dédiée pour rejoindre
• Liste des parties publiques
• Drop-in/drop-out
• Filtres et rafraîchissement automatique
• Visibilité des parties (publique/amis)