Création de Partie
La page de Création de Partie (GameCreationPageComponent) permet aux utilisateurs de sélectionner un jeu parmi ceux disponibles afin de créer une nouvelle partie.
GameCreationPageComponent
Propriétés
| Propriété | Type | Description |
|---|---|---|
gamesList |
Game[] |
Liste complète des jeux disponibles et visibles |
displayedGames |
Game[] |
Sous-ensemble des jeux actuellement affichés (pagination) |
startIndex |
number |
Indice de départ pour la pagination |
selectedGame |
Game |
Jeu actuellement sélectionné par l'utilisateur |
isPopupActive |
boolean |
Contrôle l'affichage du popup d'erreur |
popUpMessage |
string |
Message affiché dans le popup |
animationDirection |
'left' | 'right' | '' |
Direction de l'animation lors du changement de page |
Méthodes
constructor(private router: Router, private gameService: GameService, private gameCreationService: GameCreationService)
Description : Initialise le composant avec les services nécessaires.
Paramètres :
router: Service de navigation AngulargameService: Service de gestion des jeuxgameCreationService: Service de création de partie
onGameSelected(game: Game)
Description : Gère la sélection d'un jeu par l'utilisateur.
Paramètres :
game: Jeu sélectionné
Retour : void
Détails : Enregistre le jeu sélectionné dans le service de création de partie et met à jour la variable locale.
async ngOnInit()
Description : Initialise le composant au chargement et charge les jeux disponibles.
Retour : Promise<void>
Détails : Appelle loadGames() pour récupérer la liste des jeux visibles.
async loadGames()
Description : Charge les jeux visibles depuis le serveur.
Retour : Promise<void>
Détails : Utilise le service GameService pour récupérer les jeux visibles et met à jour l'affichage.
updateDisplayedGames()
Description : Met à jour la liste des jeux affichés en fonction de l'indice de départ.
Retour : void
Détails : Extrait un sous-ensemble de gamesList pour l'affichage avec une taille limitée par DISPLAY_LIMIT.
prevGames()
Description : Affiche la page précédente de jeux.
Retour : void
Détails : Décrémente l'indice de départ si possible, définit la direction d'animation sur 'right', et met à jour les jeux affichés.
nextGames()
Description : Affiche la page suivante de jeux.
Retour : void
Détails : Incrémente l'indice de départ si possible, définit la direction d'animation sur 'left', et met à jour les jeux affichés.
async onContinue()
Description : Traite la demande de continuation après la sélection d'un jeu.
Retour : Promise<void>
Détails : Vérifie si un jeu est sélectionné et s'il est toujours visible avant de naviguer vers la page de création de personnage. Affiche un message d'erreur approprié sinon.
showPopup(message: string)
Description : Affiche un popup avec un message spécifié.
Paramètres ->message: Message à afficher
Retour : void
Détails : Met à jour le message du popup et active son affichage.
closePopup()
Description : Ferme le popup d'erreur.
Retour : void
Détails : Désactive l'affichage du popup.
Éléments HTML importants
- Titre : "CHOISISSEZ UN JEU"
- Flèches de navigation : Boutons pour naviguer entre les pages de jeux
- Grille de jeux : Affichage des jeux disponibles
- Boutons d'action : "RETOUR" pour revenir à l'accueil et "CONTINUER" pour passer à l'étape suivante
- Popup : Affichage des messages d'erreur
- Animation : Animation de zoom/glissement pour les transitions entre pages
Composants utilisés
GameBoxComponent
Composant qui affiche un jeu individuel avec ses informations et permet sa sélection.
Propriétés
| Propriété | Type | Description |
|---|---|---|
@Input() game |
Game |
Le jeu à afficher |
@Input() selectedGame |
Game |
Le jeu actuellement sélectionné |
@Output() gameSelected |
EventEmitter<Game> |
Événement émis quand un jeu est sélectionné |
Méthodes
constructor(private gameService: GameService, private router: Router, private editService: EditService)
Description : Initialise le composant avec les services nécessaires.
Paramètres :
gameService: Service de gestion des jeuxrouter: Service de navigation AngulareditService: Service d'édition des jeux
onGameSelected()
Description : Émet un événement lorsqu'un jeu est sélectionné.
Retour : void
Détails : Vérifie si le jeu n'est pas déjà sélectionné avant d'émettre l'événement.
Liaison HTML importante
- Affichage des détails du jeu (nom, image, description, taille, mode, date de mise à jour)
- Bouton de sélection qui change visuellement quand le jeu est sélectionné
OneButtonPopupComponent
Composant de popup simple avec un seul bouton, utilisé pour afficher des messages 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 |
Méthodes
onClose()
Description : Appelle la fonction de fermeture fournie.
Retour : void
Services utilisés
GameService
Service responsable de la communication avec le serveur pour les opérations sur les jeux.
Méthodes pertinentes pour la création de partie
async getVisibleGames()
Description : Récupère tous les jeux visibles depuis le serveur.
Retour : Promise<Game[]> - Liste des jeux visibles
Détails : Communique avec le serveur via une requête HTTP GET.
async verifVisibility(gameName: string)
Description : Vérifie si un jeu est toujours visible.
Paramètres ->gameName: Nom du jeu à vérifier
Retour : Promise<boolean> - Vrai si le jeu est visible
Détails : Communique avec le serveur via une requête HTTP GET.
GameCreationService
Service simple qui stocke le jeu sélectionné pour la création d'une partie.
Propriétés
| Propriété | Type | Description |
|---|---|---|
gameSelected |
Game |
Le jeu sélectionné pour la création de partie |
Méthodes
setSelectedGame(game: Game)
Description : Définit le jeu sélectionné.
Paramètres ->game: Jeu à sélectionner
Retour : void
getSelectedGame()
Description : Récupère le jeu sélectionné.
Retour : Game - Le jeu actuellement sélectionné
Communication avec le Serveur
Le GameService communique avec le serveur via des requêtes HTTP:
- GET
/game-manager: Récupère la liste des jeux visibles - GET
/game-manager/visibility/:name: Vérifie la visibilité d'un jeu spécifique
Ces communications permettent:
- D'afficher uniquement les jeux rendus visibles par les administrateurs
- De vérifier qu'un jeu est toujours visible avant de l'utiliser pour créer une partie
Navigation
La page de Création de Partie peut rediriger vers:
- Page d'Accueil (
MainPageComponent) - Avec le bouton "RETOUR" - Page de Création de Personnage (
CharacterCreationPageComponent) - Après sélection d'un jeu et clic sur "CONTINUER", avec les paramètres de mode "create"
La navigation vers la page de création de personnage inclut un paramètre mode: 'create' pour indiquer qu'il s'agit d'une création de partie (et non d'une participation à une partie existante).
Animations
Le composant utilise des animations Angular pour les transitions entre les jeux:
zoomSlideAnimation: Animation d'agrandissement et de déplacement appliquée aux GameBoxComponent lors des changements de page, avec une direction spécifiée (gauche ou droite) pour créer un effet cohérent de défilement.