Aide

La page Aide (HelpPageComponent) est une ressource complète de documentation accessible directement depuis l'application web. Elle fournit des guides détaillés, des tutoriels, des explications de gameplay, et des réponses aux questions fréquentes. L'interface est organisée en sections thématiques avec un sommaire navigable et un affichage de contenu formaté en Markdown.

HelpPageComponent

Propriétés

|| Propriété | Type | Description |
||---|---|---|
|| sections | Array | Liste de toutes les sections d'aide disponibles (title, content) |
|| currentSection | Object \| null | Section actuellement affichée (title, content) |
|| private subscriptions | Subscription[] | Gestion des abonnements RxJS |

Méthodes

constructor(private router: Router, private translationService: TranslationService)

Description : Initialise le composant avec les services nécessaires.
Paramètres :

• router : Service de navigation Angular
• translationService : Service de traduction i18n

ngOnInit(): void

Description : Initialise le composant au chargement de la page.
Actions :

1. Charge les sections d'aide via loadHelpSections()
2. Sélectionne la première section par défaut
3. S'abonne aux changements de langue pour recharger les sections traduites

Retour : void

ngOnDestroy(): void

Description : Nettoie les abonnements lors de la destruction du composant.
Retour : void

private loadHelpSections(): void

Description : Charge toutes les sections d'aide avec leurs traductions.
Sections chargées :

1. Page Principale (MAIN_PAGE_HELP)
2. Rejoindre une Partie (JOIN_GAME_HELP)
3. Créer une Partie (CREATE_GAME_HELP)
4. Administration des Jeux (ADMIN_PAGE_HELP)
5. Édition de Jeu (EDITION_PAGE_HELP)
6. Création de Personnage (CHARACTER_CREATION_PAGE_HELP)
7. Salle d'Attente (WAITING_ROOM_PAGE_HELP)
8. Vue de Jeu (GAME_VIEW_PAGE_HELP)
9. Statistiques (STATS_PAGE_HELP)
10. Boutique (SHOP_HELP)
11. Modes de Jeu (GAME_MODES)
12. Combat (COMBAT)
13. Items (ITEMS)
14. Social (SOCIAL)
15. Conseils (TIPS)
16. FAQ (FAQ)

Source : Contenu récupéré via translationService.translate()
Format : Contenu en Markdown pour formatage riche
Retour : void

selectSection(section: { title: string; content: string }): void

Description : Sélectionne une section d'aide à afficher.
Paramètres :

• section : Section à afficher

Actions : Met à jour currentSection avec la section sélectionnée
Retour : void

goBack(): void

Description : Retourne à la page d'accueil.
Navigation : AppRoutes.Home
Retour : void

Composants utilisés

UserViewComponent

Composant affichant le profil utilisateur.

Propriétés @Input

|| Propriété | Type | Description |
||---|---|---|
|| disableLogout | boolean | Désactive le bouton de déconnexion (true pour page d'aide) |

Pipes utilisés

MarkdownPipe

Pipe Angular transformant le contenu Markdown en HTML formaté.

Utilisation

<div [innerHTML]="currentSection.content | markdown"></div>

Description : Convertit le Markdown en HTML sécurisé avec support de :

• Titres (#, ##, etc.)
• Listes (-, *, numérotées)
• Gras et italique (**, *)
• Liens ([texte](url))
• Code inline et blocs (`, ```)
• Images (![alt](url))

TranslatePipe

Pipe Angular pour la traduction i18n.

Utilisation

<span>{{ 'HELP_PAGE.TITLE' | translate }}</span>

Description : Traduit les clés de traduction selon la langue active (FR/EN)

Services utilisés

TranslationService

Service gérant l'internationalisation (i18n) de l'application.

Propriétés

• currentLanguage$ : BehaviorSubject - Observable de la langue actuelle ('fr' ou 'en')

Méthodes

translate(key: string): string

Description : Traduit une clé de traduction dans la langue actuelle.
Paramètres :

• key : Clé de traduction (ex: 'HELP_PAGE.TITLE')

Source : Fichiers de traduction dans common/i18n/
Retour : string (texte traduit)

Exemple :

this.translationService.translate('MAIN_PAGE_HELP.TITLE')
// Retourne "Page Principale" en FR ou "Main Page" en EN

setLanguage(lang: string): void

Description : Change la langue active de l'application.
Paramètres :

• lang : Code de langue ('fr' ou 'en')

Actions : Met à jour currentLanguage$ et déclenche les abonnements
Retour : void

Router

Service de navigation Angular standard.

Méthodes

navigate(commands: any[])

Description : Navigue vers une route spécifiée.
Retour : Promise<boolean>

Communication avec le Serveur

La page d'aide ne communique pas directement avec le serveur. Tout le contenu d'aide est :

• Stocké localement dans les fichiers de traduction
• Chargé au démarrage de l'application
• Accessible hors ligne

Contenu statique

Les sections d'aide sont définies dans :

• common/i18n/fr.json (version française)
• common/i18n/en.json (version anglaise)

Avantages :

• Pas de latence réseau
• Accessible hors ligne
• Cohérence avec les traductions de l'application
• Facile à maintenir

Navigation

La page Aide peut rediriger vers :

1. Page d'Accueil (MainPageComponent) - Via bouton "RETOUR"

Routes utilisées

• AppRoutes.Home : Retour à l'accueil

Navigation interne

Au sein de la page, la navigation se fait par sélection de section :

• Clic sur une section du sommaire
• Affichage du contenu correspondant dans le panneau de droite
• Aucun changement d'URL (navigation interne)

Structure du contenu Markdown

Chaque section d'aide contient du contenu Markdown structuré :

Exemple de structure

# Titre Principal

Description générale de la fonctionnalité.

## Section 1
- Point important 1
- Point important 2

## Section 2
Instructions détaillées avec **texte en gras**.

### Astuce
> Texte de conseil ou note importante

## Liens utiles
- [Documentation externe](https://example.com)

Sections disponibles

Pages de l'application

• Page Principale : Navigation, profil, menu amis
• Rejoindre une Partie : Liste des parties, filtres, drop-in/out
• Créer une Partie : Sélection de jeu, configuration, visibilité
• Administration des Jeux : Création, édition, suppression de jeux
• Édition de Jeu : Outil d'édition de grille, tuiles, items
• Création de Personnage : Avatar, attributs, bonus
• Salle d'Attente : Attente des joueurs, contrôles admin
• Vue de Jeu : Interface de jeu, actions, inventaire
• Statistiques : Résultats de partie, classement
• Boutique : Achat d'items cosmétiques

Mécaniques de jeu

• Modes de Jeu : Classic (Battle Royale), CTF (Capture The Flag)
• Combat : Système de dés, modificateurs, victoire
• Items : Types, effets, stratégies

Fonctionnalités sociales

• Social : Amis, chat, canaux

Autres

• Conseils : Stratégies, astuces
• FAQ : Questions fréquentes

Réactivité aux changements de langue

Lorsque l'utilisateur change la langue de l'application :

1. Détection : translationService.currentLanguage$ émet une nouvelle valeur
2. Rechargement : loadHelpSections() est appelé pour recharger toutes les sections
3. Préservation : La section actuellement affichée est préservée (par index)
4. Mise à jour : L'interface est rafraîchie avec les nouvelles traductions

Résultat : L'utilisateur reste sur la même section conceptuelle mais avec le contenu traduit.