Page d’Accueuil
La Page d'Accueil (MainPageComponent) constitue le point d'entrée principal de l'application. Elle propose aux utilisateurs différentes options de navigation : créer une partie, rejoindre une partie existante via un code, ou accéder à la gestion des jeux.
MainPageComponent
Propriétés
| Propriété | Type | Description |
|---|---|---|
isJoinGamePopupActive |
boolean |
Contrôle l'affichage du popup de saisie de code |
isCodeValid |
boolean |
Indique si le code saisi est valide |
codeErrorMsg |
string |
Message d'erreur à afficher si le code est invalide |
codeInputs |
number[] |
Tableau des indices pour les champs de saisie du code |
accessCode |
string[] |
Tableau contenant les caractères du code saisi |
Méthodes
constructor(router: Router, joinGameService: JoinCharacterCreationService)
Description : Initialise le composant et récupère le tableau des codes d'accès.
Paramètres :
router: Service de navigation AngularjoinGameService: Service pour rejoindre une partie
showJoinGamePopup()
Description : Affiche le popup de saisie de code pour rejoindre une partie.
Retour : Aucun
closeJoinGamePopup()
Description : Ferme le popup de saisie de code et réinitialise le code et l'état de validation. Retour : Aucun
onInputChange(event: Event, index: number)
Description : Gère la saisie de chaque caractère du code et déplace le focus au champ suivant.
Paramètres :
event: Événement de saisieindex: Position dans le code- Retour : Aucun
- Détails : Délègue au service JoinCharacterCreationService la gestion de la saisie.
onBackspace(event: KeyboardEvent, index: number)
Description : Gère le comportement de la touche Backspace pour revenir au champ précédent.
Paramètres :
event: Événement clavierindex: Position dans le code- Retour : Aucun
- Détails : Délègue au service JoinCharacterCreationService la gestion du retour arrière.
async redirectToCharacterCreation()
Description : Vérifie la validité du code et redirige vers la page de création de personnage si le code est valide.
Retour : Aucun
Détails : Utilise le service JoinCharacterCreationService pour valider le code et le routeur pour la redirection.
redirectToGames()
Description : Redirige vers la page d'administration des jeux.
Retour : Aucun
redirectToGameCreation()
Description : Redirige vers la page de création de partie.
Retour : Aucun
Éléments HTML importants
- Logo : Affichage du logo de l'application
- Cadre avec boutons : Trois boutons de navigation principaux
- Popup de saisie de code : Interface permettant de saisir un code à 4 chiffres pour rejoindre une partie
- Zone de pied de page : Affichage des crédits de l'équipe
Composants utilisés
ButtonComponent
Composant personnalisé pour les boutons de l'application avec un style cohérent.
Propriétés
| Propriété | Type | Description |
|---|---|---|
@Input() text |
string |
Texte à afficher sur le bouton |
@Input() icon |
string |
Icône Material Design à afficher |
@Input() ngStyle |
{ [key: string]: string } |
Styles CSS supplémentaires à appliquer |
Utilisation dans MainPageComponent
Les trois boutons principaux utilisent ce composant avec des styles et icônes différents :
- "JOINDRE UNE PARTIE" avec l'icône "sports_esports"
- "CRÉER UNE PARTIE" avec l'icône "add_circle"
- "GÉRER LES JEUX" avec l'icône "edit"
Services utilisés
JoinCharacterCreationService
Service responsable de la gestion de la saisie et validation des codes pour rejoindre une partie existante.
Propriétés
| Propriété | Type | Description |
|---|---|---|
accessCode |
string[] |
Tableau contenant les caractères du code saisi |
Méthodes
constructor(private socketService: SocketService)
Description : Initialise le service avec le service socket pour la communication avec le serveur.
Paramètres :
socketService: Service pour les communications socket
onInputChange(event: Event, index: number)
Description : Gère la saisie d'un caractère du code d'accès et déplace le focus au champ suivant.
Paramètres :
event: Événement de saisieindex: Position dans le code
Retour : Aucun
onBackspace(event: KeyboardEvent, index: number)
Description : Gère le comportement de la touche Backspace pour revenir au champ précédent.
Paramètres :
event: Événement clavierindex: Position actuelle dans le code
Retour : Aucun
isCodeComplete()
Description : Vérifie si tous les champs du code ont été remplis.
Retour : boolean - Vrai si le code est complet, faux sinon
async isCodeValid()
Description : Vérifie si le code saisi est valide pour rejoindre une partie.
Retour : Promise<{ valid: boolean; message: string }> - Résultat de la validation avec un message
async isCharacterCreationAccessible(gameCode: string)
Description : Vérifie auprès du serveur si la partie est accessible avec le code fourni. Paramètres :
gameCode: Code de la partie à rejoindre- Retour :
Promise<{ success: boolean; message: string }>- Résultat de la vérification - Détails : Utilise des événements socket pour communiquer avec le serveur et vérifier la validité du code.
getAccessCodeArray()
Description : Récupère le tableau des caractères du code.
Retour : string[] - Tableau des caractères du code
getAccessCode()
Description : Récupère le code sous forme de chaîne.
Retour : string - Code complet
resetAccessCode()
Description : Réinitialise le code d'accès.
Retour : Aucun
Communication avec le Serveur
Le service JoinCharacterCreationService communique avec le serveur via Socket.IO lors de la validation du code:
- Émission :
SocketIOEvents.JoinCharacterCreationavec le code de partie - Réception : Plusieurs événements possibles:
SocketIOEvents.LimitReached: La limite de joueurs est atteinteSocketIOEvents.GameLocked: La partie est verrouilléeSocketIOEvents.RoomValidation: Validation générale du code (succès/échec)
Cette communication permet de vérifier si le code entrée correspond à une partie existante, disponible et non verrouillée avant de rediriger l'utilisateur vers la page de création de personnage pour cette partie.
Navigation
La Page d'Accueil peut rediriger vers:
- Page de Création de Personnage (
CharacterCreationPageComponent) - Lorsqu'un code valide est saisi - Page de Création de Partie (
GameCreationPageComponent) - Lorsque le bouton "CRÉER UNE PARTIE" est cliqué - Page d'Administration (
AdminPageComponent) - Lorsque le bouton "GÉRER LES JEUX" est cliqué