Édition de Jeu

Vue d’ensemble

La page d'Édition de Jeu (EditionPageComponent) fournit une interface complète pour créer ou modifier un jeu. Elle permet de personnaliser tous les aspects du jeu : métadonnées (titre, description), disposition de la grille avec différents types de tuiles (murs, portes, sols, etc.) et placement des objets. Cette page est accessible depuis la page d'Administration des Jeux, soit lors de la création d'un nouveau jeu, soit lors de l'édition d'un jeu existant.

EditionPageComponent

Propriétés

Propriété	Type	Description
`@ViewChild(GridComponent)`	`GridComponent`	Référence au composant de grille
`game`	`Game`	Le jeu en cours d'édition
`isPopupActive`	`boolean`	Contrôle l'affichage des popups

Méthodes

`constructor(private editService: EditService)`

Description : Initialise le composant avec le service d'édition.
Paramètres ->editService: Service de gestion de l'édition des jeux

`ngOnInit()`

Description : Initialise le composant et souscrit aux modifications du jeu en cours d'édition. Retour : void
Détails : Utilise le service EditService pour récupérer et observer le jeu en cours d'édition.

`handlePopupStateChange(isActive: boolean)`

Description : Met à jour l'état d'affichage des popups.
Paramètres -> isActive: État d'activation du popup
Retour : void

`onTileUpdated(event: Vec2)`

Description : Gère la mise à jour d'une tuile dans la grille.
Paramètres -> event: Coordonnées de la tuile (rangée et colonne)
Retour : void
Détails : Délègue au service EditService pour placer la tuile sélectionnée.

`onResetTileAndItem(event: Vec2)`

Description : Réinitialise une tuile et/ou un item à sa position par défaut.
Paramètres ->event: Coordonnées de la tuile (rangée et colonne)
Retour : void
Détails : Utilise le service EditService pour réinitialiser la tuile ou l'item.

`onCellDrop(event: Vec2)`

Description : Gère le dépôt d'un item sur une cellule.
Paramètres -> event: Coordonnées de la cellule (rangée et colonne)
Retour : void
Détails : Délègue au service EditService pour placer l'item.

`onCellInternalDrop(event: { row: number; col: number; newRow: number; newCol: number })`

Description : Gère le déplacement d'un item d'une cellule à une autre.
Paramètres -> event: Coordonnées de départ et d'arrivée
Retour : void
Détails : Utilise le service EditService pour déplacer l'item.

`onCellDrag(event: Vec2)`

Description : Gère le début du glissement d'un item.
Paramètres ->event: Coordonnées de la cellule (rangée et colonne)
Retour : void
Détails : Utilise le service EditService pour enregistrer l'item en cours de glissement.

`takeScreenshot()`

Description : Capture une image de la grille pour la prévisualisation du jeu.
Retour : void
Détails : Utilise Html2CanvasWrapper pour capturer la grille et enregistre l'image via EditService.

`ngOnDestroy()`

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

Éléments HTML importants

Conteneur principal : Organisation des différentes sections d'édition
Description du jeu : Formulaire pour les métadonnées (titre, description, mode, taille)
Grille de jeu : Interface interactive pour placer les tuiles et les items
Palette d'édition : Sélection des tuiles et des items à placer
Overlay : Effet d'assombrissement lorsqu'un popup est actif

Composants utilisés

DescriptionEditingComponent

Composant qui gère l'édition des métadonnées du jeu (titre, description).

Propriétés

Propriété	Type	Description
`@Output() popupStateChange`	`EventEmitter<boolean>`	Événement émis lors du changement d'état d'un popup
`@Output() saveClicked`	`EventEmitter<void>`	Événement émis lors du clic sur Sauvegarder
`popupType`	`PopupType`	Énumération des types de popups
`gameName`	`string`	Nom du jeu
`gameDesc`	`string`	Description du jeu
`gameSize`	`number`	Taille de la grille
`gameMode`	`string`	Mode de jeu
`invalidityReasons`	`string[]`	Raisons d'invalidité du jeu
`isResetPopupActive`	`boolean`	État du popup de réinitialisation
`isBackPopupActive`	`boolean`	État du popup de retour
`isInvalidityReasonsPopupActive`	`boolean`	État du popup d'invalidité
`isLoading`	`boolean`	État de chargement pendant la sauvegarde

Méthodes

`constructor(private editService: EditService, private router: Router)`

Description : Initialise le composant et souscrit aux modifications du jeu.

`async onSave()`

Description : Sauvegarde les modifications et vérifie la validité du jeu.
Retour : Promise<void>
Détails : Met à jour les métadonnées, vérifie la validité et sauvegarde ou affiche les erreurs.

`togglePopup(popupType: PopupType, state: boolean)`

Description : Gère l'affichage des différents popups.
Paramètres :

popupType: Type de popup à afficher/masquer
state: État d'activation

Retour : void
Détails : Met à jour l'état du popup correspondant et émet un événement.

`onResetGame()`

Description : Réinitialise les modifications du jeu.
Retour : void
Détails : Utilise le service EditService pour restaurer l'état initial.

`goToAdmin()`

Description : Redirige vers la page d'administration.
Retour : void
Détails : Ferme le popup de retour et désélectionne la tuile active.

GridComponent

Composant responsable de l'affichage et de l'interaction avec la grille de jeu.

Propriétés

Propriété	Type	Description
`@Input() grid`	`Grid`	La grille à afficher
`@Output() cellLeftClicked`	`EventEmitter<Vec2>`	Événement lors d'un clic gauche sur une cellule
`@Output() cellRightClicked`	`EventEmitter<Vec2>`	Événement lors d'un clic droit sur une cellule
`@Output() cellDragOver`	`EventEmitter<Vec2>`	Événement lors du survol d'une cellule pendant le glissement
`@Output() cellDrop`	`EventEmitter<Vec2>`	Événement lors du dépôt sur une cellule
`@Output() cellDrag`	`EventEmitter<Vec2>`	Événement lors du début de glissement
`@Output() cellInternalDrop`	`EventEmitter<{ row: number; col: number; newRow: number; newCol: number }>`	Événement lors du déplacement interne
`@Output() cellHover`	`EventEmitter<Vec2>`	Événement lors du survol d'une cellule
`isLeftClickDown`	`boolean`	État du bouton gauche de la souris
`isRightClickDown`	`boolean`	État du bouton droit de la souris

Méthodes

`constructor(private editService: EditService, public elementRef: ElementRef)`

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

`getGridPos(index: number)`

Description : Convertit un index linéaire en coordonnées 2D.
Paramètres ->index: Index de la cellule
Retour : Vec2 - Coordonnées (row, col)

`createGridArray(size: number)`

Description : Crée un tableau d'indices pour l'itération.
Paramètres ->size: Taille de la grille
Retour : number[] - Tableau d'indices

`getCell(index: number)`

Description : Récupère une cellule à partir de son index.
Paramètres ->index: Index de la cellule
Retour : Cell - La cellule correspondante

Événements de souris et glisser-déposer

Le composant contient plusieurs méthodes pour gérer les événements de souris et de glisser-déposer:

onMouseOver, onMouseDown, onMouseUp, onMouseLeave
onContextMenu, onDragOver, onDrop, onDragStart

Ces méthodes émettent les événements correspondants pour que le composant parent puisse les traiter.

CellComponent

Composant qui représente une cellule individuelle de la grille.

Propriétés

Propriété	Type	Description
`@Input() cell`	`Cell`	La cellule à afficher

Méthodes

`getGameAvatar(avatarPath: string)`

Description : Récupère le chemin d'avatar pour l'affichage dans la grille.
Paramètres :avatarPath: Chemin de l'avatar
Retour : string - Chemin transformé

TilesContainerComponent

Composant qui affiche la palette des tuiles disponibles.

Propriétés

Propriété	Type	Description
`tiles`	`{ type: TileType; desc: string }[]`	Liste des tuiles disponibles
`currentTile`	`TileType \| null`	Tuile actuellement sélectionnée
`popupImg`	`string`	Image à afficher dans le popup
`popupText`	`string`	Texte à afficher dans le popup
`isPopupVisible`	`boolean`	État de visibilité du popup

Méthodes

`constructor(private editService: EditService)`

Description : Initialise le composant avec le service d'édition.

`selectCurrentTile(tile: TileType)`

Description : Sélectionne ou désélectionne une tuile.
Paramètres : tile: Type de tuile à sélectionner
Retour : void
Détails : Met à jour le service EditService avec la tuile sélectionnée.

`showPopup(desc: string, imgUrl: string)`

Description : Affiche un popup avec les détails de la tuile.
Paramètres :

desc: Description de la tuile
imgUrl: URL de l'image

Retour : void

ItemContainerComponent

Composant qui affiche la palette des items disponibles.

Propriétés

Propriété	Type	Description
`popupImg`	`string`	Image à afficher dans le popup
`popupName`	`string`	Nom à afficher dans le popup
`popupText`	`string`	Texte à afficher dans le popup
`isPopupVisible`	`boolean`	État de visibilité du popup
`items`	`Item[]`	Liste des items disponibles

Méthodes

`constructor(private editService: EditService)`

Description : Initialise le composant avec le service d'édition.

`ngOnInit()`

Description : Initialise le composant et souscrit aux modifications des items.
Retour : void

Événements de glisser-déposer

Le composant contient plusieurs méthodes pour gérer les événements de glisser-déposer:

onDragStart: Commence le glissement d'un item
onDropItem: Gère le dépôt d'un item
onDragOver: Gère le survol pendant le glissement

`showPopup(item: Item)`

Description : Affiche un popup avec les détails de l'item.
Paramètres ->item: Item à afficher
Retour : void

Services utilisés

EditService

Service responsable de la gestion de l'édition des jeux, maintenant la cohérence entre les différents composants.

Propriétés

Propriété	Type	Description
`selectedCopyGameSubject`	`BehaviorSubject<Game \| null>`	Subject contenant le jeu en édition
`selectedCopyGame$`	`Observable<Game \| null>`	Observable du jeu en édition
`itemsSubject`	`BehaviorSubject<Item[]>`	Subject contenant les items disponibles
`items$`	`Observable<Item[]>`	Observable des items disponibles
`selectedGame`	`Game \| null`	Version originale du jeu en édition
`tileSelected`	`TileType \| null`	Type de tuile actuellement sélectionné
`itemDragged`	`Item \| null`	Item en cours de glissement
`draggedItemPos`	`Vec2 \| null`	Position de l'item en glissement
`isDraggingItem`	`boolean`	Indique si un glissement est en cours
`maxItems`	`number`	Nombre maximum d'items selon la taille de grille
`isResetting`	`boolean`	Indique si une réinitialisation est en cours

Méthodes

`constructor(private gameService: GameService, private autoTileService: AutoTileService)`

Description : Initialise le service avec les services nécessaires.

`async verifyGame()`

Description : Vérifie la validité du jeu actuel.
Retour : Promise<string[]> - Liste des raisons d'invalidité
Détails : Utilise le service GameService pour vérifier la validité sur le serveur.

`getInfoGame()`

Description : Récupère les métadonnées du jeu.
Retour : { mode: string; size: number; description: string; name: string } | null

`updateInfoGame(name: string, description: string)`

Description : Met à jour les métadonnées du jeu.
Paramètres :

name: Nouveau nom
description: Nouvelle description

Retour : void

`initializeItems()`

Description : Initialise la liste des items disponibles.
Retour : Item[] - Liste des items

`updateGameState()`

Description : Met à jour l'état du jeu après des modifications.
Retour : void
Détails : Synchronise les items placés et les points de départ.

`setSelectedGame(game: Game | null)`

Description : Définit le jeu à éditer.
Paramètres ->game: Jeu à éditer
Retour : void
Détails : Crée une copie profonde du jeu et initialise les compteurs d'items.

`getSelectedGame()`

Description : Récupère le jeu en cours d'édition.
Retour : Game | null - Jeu en édition

`setTile(tile: TileType | null)`

Description : Définit le type de tuile sélectionné.
Paramètres ->tile: Type de tuile
Retour : void

Méthodes de glisser-déposer

Le service contient plusieurs méthodes pour gérer le glisser-déposer:

setDraggedItem, stopDraggingItem, getDraggedItemPos, setDraggedItemPos, resetItem

`placeTile(event: Vec2)`

Description : Place une tuile à une position spécifique.
Paramètres ->event: Coordonnées
Retour : void
Détails : Gère les cas spéciaux comme les murs et les portes.

`resetTilesOrItem(event: Vec2)`

Description : Réinitialise une tuile ou un item à sa position.
Paramètres : event: Coordonnées
Retour : void

`resetModification()`

Description : Annule toutes les modifications depuis le dernier chargement.
Retour : void

`onSave()`

Description : Sauvegarde le jeu actuel.
Retour : void
Détails : Gère la visibilité du jeu et utilise le service GameService pour sauvegarder.

`setItemDragged(item: Item)`

Description : Définit l'item en cours de glissement.
Paramètres ->item: Item à glisser
Retour : void

`getItems$()`

Description : Récupère l'observable des items disponibles.
Retour : Observable<Item[]>

`placeItem(event: Vec2)`

Description : Place un item à une position spécifique.
Paramètres ->event: Coordonnées
Retour : void
Détails : Vérifie si la cellule est accessible avant de placer l'item.

`moveItem(event: { row: number; col: number; newRow: number; newCol: number })`

Description : Déplace un item d'une position à une autre.
Paramètres -> event: Coordonnées de départ et d'arrivée
Retour : void
Détails : Vérifie si la nouvelle position est accessible.

`saveImage(image: string)`

Description : Sauvegarde l'image de prévisualisation du jeu.
Paramètres :image: Image en format base64
Retour : void

`isCellBlocked(cell: Cell)`

Description : Vérifie si une cellule est bloquée pour le placement d'items.
Paramètres :cell: Cellule à vérifier
Retour : boolean - Vrai si la cellule est bloquée

AutoTileService

Service qui gère la logique des tuiles de mur pour leur donner l'apparence appropriée selon leur contexte.

Méthodes

`isWall(tileType: TileType | string)`

Description : Vérifie si une tuile est un mur.
Paramètres ->tileType: Type de tuile
Retour : boolean - Vrai si c'est un mur

`determineWallType(grid: Grid, row: number, col: number)`

Description : Détermine le type de mur approprié selon les murs adjacents.
Paramètres :

grid: Grille de jeu
row: Rangée
col: Colonne

Retour : string - Type de mur à utiliser
Détails : Utilise un système de masque binaire pour déterminer le type de mur.

`updateAdjacentWalls(grid: Grid, row: number, col: number)`

Description : Met à jour les murs adjacents après la modification d'une cellule.
Paramètres :

grid: Grille de jeu
row: Rangée
col: Colonne

Retour : void

GameService

Service de communication avec le serveur pour les opérations sur les jeux.

Ce service, déjà documenté dans la section 2. Administration des Jeux, est utilisé ici pour:

Vérifier la validité d'un jeu (verifyGame)
Sauvegarder un jeu (onSave)

Html2CanvasWrapper

Wrapper pour la bibliothèque html2canvas, utilisé pour capturer une image de la grille.

Méthodes

`capture(element: HTMLElement)`

Description : Capture un élément HTML sous forme de canvas.
Paramètres ->element: Élément HTML à capturer
Retour : Promise<HTMLCanvasElement> - Canvas contenant l'image
Détails : Utilise html2canvas pour effectuer la capture.

Communication avec le Serveur

Le service EditService communique avec le serveur via GameService pour:

Vérification : Vérifier la validité du jeu avant sauvegarde
Sauvegarde : Sauvegarder le jeu modifié

Ces opérations utilisent des requêtes HTTP POST et PUT respectivement.

La page d'Édition de Jeu peut rediriger vers:

Page d'Administration (AdminPageComponent) - Lors d'une sauvegarde réussie ou en cliquant sur "RETOUR"