Changement sur le Readme
Ajout d'une partie spécifique pour des PNJ dans la partie campagne
This commit is contained in:
165
web/src/app/campaigns/arc/arc-edit/arc-edit.component.html
Normal file
165
web/src/app/campaigns/arc/arc-edit/arc-edit.component.html
Normal file
@@ -0,0 +1,165 @@
|
||||
<div class="edit-page">
|
||||
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1>{{ arc?.name || 'Arc' }}</h1>
|
||||
<p class="subtitle">Arc narratif</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button type="button" class="btn-ai"
|
||||
(click)="toggleChat()"
|
||||
[class.active]="chatOpen"
|
||||
title="Ouvrir l'Assistant IA pour dialoguer autour de cet arc">
|
||||
<lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
|
||||
Assistant IA
|
||||
</button>
|
||||
<button type="button" class="btn-secondary" (click)="cancel()">Annuler</button>
|
||||
<button type="button" class="btn-danger" (click)="delete()">
|
||||
<lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
|
||||
Supprimer
|
||||
</button>
|
||||
<button type="button" class="btn-primary" (click)="submit()" [disabled]="form.invalid">
|
||||
Sauvegarder
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form [formGroup]="form" (ngSubmit)="submit()" class="edit-form">
|
||||
|
||||
<!-- Illustrations (galerie editable, rendu editorial) -->
|
||||
<div class="field">
|
||||
<label>Illustrations</label>
|
||||
<app-image-gallery
|
||||
[imageIds]="illustrationImageIds"
|
||||
[editable]="true"
|
||||
[layout]="'EDITORIAL'"
|
||||
(imageIdsChange)="illustrationImageIds = $event">
|
||||
</app-image-gallery>
|
||||
<small class="field-hint">Ambiances, portraits, visuels evocateurs de l'arc. JPEG, PNG, WebP ou GIF, 10 Mo max.</small>
|
||||
</div>
|
||||
|
||||
<!-- Cartes & plans -->
|
||||
<div class="field">
|
||||
<label>Cartes & plans</label>
|
||||
<app-image-gallery
|
||||
[imageIds]="mapImageIds"
|
||||
[editable]="true"
|
||||
[layout]="'MAPS'"
|
||||
(imageIdsChange)="mapImageIds = $event">
|
||||
</app-image-gallery>
|
||||
<small class="field-hint">Cartes regionales et plans utiles aux joueurs pour situer l'action.</small>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="arc-edit-name">Titre de l'arc *</label>
|
||||
<input
|
||||
id="arc-edit-name"
|
||||
type="text"
|
||||
formControlName="name"
|
||||
placeholder="Ex: L'Ombre du Nord"
|
||||
[class.invalid]="form.get('name')?.invalid && form.get('name')?.touched"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="arc-edit-description">Synopsis de l'arc</label>
|
||||
<textarea
|
||||
id="arc-edit-description"
|
||||
formControlName="description"
|
||||
placeholder="Décrivez l'histoire principale de cet arc narratif..."
|
||||
rows="5">
|
||||
</textarea>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Icône</label>
|
||||
<app-icon-picker [options]="campaignIconOptions" [(selected)]="selectedIcon"></app-icon-picker>
|
||||
</div>
|
||||
|
||||
<div class="field-row">
|
||||
<div class="field">
|
||||
<label for="arc-edit-themes">Thèmes principaux</label>
|
||||
<textarea
|
||||
id="arc-edit-themes"
|
||||
formControlName="themes"
|
||||
placeholder="Quels sont les thèmes explorés dans cet arc ? (trahison, rédemption...)"
|
||||
rows="4">
|
||||
</textarea>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="arc-edit-stakes">Enjeux globaux</label>
|
||||
<textarea
|
||||
id="arc-edit-stakes"
|
||||
formControlName="stakes"
|
||||
placeholder="Quels sont les enjeux majeurs de cet arc pour les personnages ?"
|
||||
rows="4">
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="arc-edit-gm-notes">Notes et planification du MJ</label>
|
||||
<textarea
|
||||
id="arc-edit-gm-notes"
|
||||
formControlName="gmNotes"
|
||||
placeholder="Vos notes sur la direction de l'arc, les twists prévus, les révélations importantes..."
|
||||
rows="5">
|
||||
</textarea>
|
||||
<small class="field-hint">Ces notes sont privées et ne seront pas exportées vers FoundryVTT.</small>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="arc-edit-rewards">Récompenses et progression</label>
|
||||
<textarea
|
||||
id="arc-edit-rewards"
|
||||
formControlName="rewards"
|
||||
placeholder="Quelles récompenses les joueurs obtiendront-ils ? Objets, niveaux, connaissances, contacts..."
|
||||
rows="4">
|
||||
</textarea>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="arc-edit-resolution">Dénouement prévu</label>
|
||||
<textarea
|
||||
id="arc-edit-resolution"
|
||||
formControlName="resolution"
|
||||
placeholder="Comment cet arc devrait-il se terminer ? Quelles sont les issues possibles ?"
|
||||
rows="4">
|
||||
</textarea>
|
||||
</div>
|
||||
|
||||
<!-- ===== Pages Lore associées (phase B2 cross-context) ===== -->
|
||||
<div class="field" *ngIf="loreId">
|
||||
<label>Pages Lore associées</label>
|
||||
<app-lore-link-picker
|
||||
[value]="relatedPageIds"
|
||||
[availablePages]="availablePages"
|
||||
[loreId]="loreId"
|
||||
(valueChange)="relatedPageIds = $event">
|
||||
</app-lore-link-picker>
|
||||
<small class="field-hint">
|
||||
Liez cet arc à des PNJ, lieux ou éléments du Lore. Cliquez sur un chip pour ouvrir la page associée.
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="field lore-hint" *ngIf="!loreId">
|
||||
<small class="field-hint">
|
||||
💡 Cette campagne n'est associée à aucun univers. Associez-la à un Lore dans l'écran de la campagne
|
||||
pour pouvoir lier cet arc à des pages du Lore (PNJ, lieux, etc.).
|
||||
</small>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Drawer chat IA (hors .edit-page pour couvrir le viewport à droite) -->
|
||||
<app-ai-chat-drawer
|
||||
[campaignId]="campaignId"
|
||||
entityType="arc"
|
||||
[entityId]="arcId"
|
||||
[isOpen]="chatOpen"
|
||||
welcomeMessage="Je vois cet arc. Demande-moi d'enrichir ses thèmes, ses enjeux ou son dénouement."
|
||||
[quickSuggestions]="chatQuickSuggestions"
|
||||
(close)="chatOpen = false">
|
||||
</app-ai-chat-drawer>
|
||||
34
web/src/app/campaigns/arc/arc-edit/arc-edit.component.scss
Normal file
34
web/src/app/campaigns/arc/arc-edit/arc-edit.component.scss
Normal file
@@ -0,0 +1,34 @@
|
||||
.edit-page {
|
||||
padding: 2.5rem 2rem;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
// Header local : titre à gauche, actions (Assistant IA) à droite.
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Formulaire vertical classique.
|
||||
.edit-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
// Override local : dans ce header, le bouton Supprimer est poussé à droite
|
||||
// via margin-left auto (les boutons Annuler/Sauvegarder restent groupés à gauche).
|
||||
// Styles de base fournis globalement par @app/styles/_buttons.scss (.btn-danger).
|
||||
.btn-danger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
200
web/src/app/campaigns/arc/arc-edit/arc-edit.component.ts
Normal file
200
web/src/app/campaigns/arc/arc-edit/arc-edit.component.ts
Normal file
@@ -0,0 +1,200 @@
|
||||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { forkJoin, of } from 'rxjs';
|
||||
import { switchMap } from 'rxjs/operators';
|
||||
import { LucideAngularModule, Trash2, Sparkles } from 'lucide-angular';
|
||||
import { CampaignService } from '../../../services/campaign.service';
|
||||
import { CharacterService } from '../../../services/character.service';
|
||||
import { NpcService } from '../../../services/npc.service';
|
||||
import { PageService } from '../../../services/page.service';
|
||||
import { LayoutService, GlobalItem } from '../../../services/layout.service';
|
||||
import { PageTitleService } from '../../../services/page-title.service';
|
||||
import { Campaign, Arc } from '../../../services/campaign.model';
|
||||
import { Page } from '../../../services/page.model';
|
||||
import { loadCampaignTreeData, buildCampaignTree } from '../../campaign-tree.helper';
|
||||
import { LoreLinkPickerComponent } from '../../../shared/lore-link-picker/lore-link-picker.component';
|
||||
import { AiChatDrawerComponent } from '../../../shared/ai-chat-drawer/ai-chat-drawer.component';
|
||||
import { ImageGalleryComponent } from '../../../shared/image-gallery/image-gallery.component';
|
||||
import { IconPickerComponent } from '../../../shared/icon-picker/icon-picker.component';
|
||||
import { CAMPAIGN_ICON_OPTIONS } from '../../campaign-icons';
|
||||
|
||||
/**
|
||||
* Écran de détail/modification d'un Arc.
|
||||
* Route : /campaigns/:campaignId/arcs/:arcId
|
||||
*
|
||||
* Intègre le picker de pages Lore (phase B2 cross-context) :
|
||||
* si la campagne parente est associée à un Lore (`campaign.loreId`), les pages
|
||||
* de ce Lore sont proposées dans un autocomplete pour lier cet arc à des
|
||||
* personnages / lieux / objets du Lore.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-arc-edit',
|
||||
standalone: true,
|
||||
imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, LoreLinkPickerComponent, AiChatDrawerComponent, ImageGalleryComponent, IconPickerComponent],
|
||||
templateUrl: './arc-edit.component.html',
|
||||
styleUrls: ['./arc-edit.component.scss']
|
||||
})
|
||||
export class ArcEditComponent implements OnInit, OnDestroy {
|
||||
readonly Trash2 = Trash2;
|
||||
readonly Sparkles = Sparkles;
|
||||
readonly campaignIconOptions = CAMPAIGN_ICON_OPTIONS;
|
||||
selectedIcon: string | null = null;
|
||||
|
||||
/** État drawer chat IA (b5.7 — intégration Campagne). */
|
||||
chatOpen = false;
|
||||
readonly chatQuickSuggestions = [
|
||||
'Propose 3 thèmes majeurs pour cet arc',
|
||||
'Imagine des enjeux qui mettent la pression sur les joueurs',
|
||||
'Suggère un dénouement en deux actes'
|
||||
];
|
||||
|
||||
toggleChat(): void { this.chatOpen = !this.chatOpen; }
|
||||
|
||||
form: FormGroup;
|
||||
campaignId = '';
|
||||
arcId = '';
|
||||
arc: Arc | null = null;
|
||||
|
||||
/** Pages disponibles pour le picker (vide si la campagne n'a pas de loreId). */
|
||||
availablePages: Page[] = [];
|
||||
/** ID du Lore associé à la campagne (null si campagne sans univers). */
|
||||
loreId: string | null = null;
|
||||
/** IDs des pages liées à cet arc (bind sur app-lore-link-picker). */
|
||||
relatedPageIds: string[] = [];
|
||||
|
||||
/** IDs des images illustrant cet arc (bind sur app-image-gallery editable). */
|
||||
illustrationImageIds: string[] = [];
|
||||
/** IDs des images utilisees comme cartes / plans (outil de table). */
|
||||
mapImageIds: string[] = [];
|
||||
|
||||
constructor(
|
||||
private fb: FormBuilder,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private campaignService: CampaignService,
|
||||
private characterService: CharacterService,
|
||||
private npcService: NpcService,
|
||||
private pageService: PageService,
|
||||
private layoutService: LayoutService,
|
||||
private pageTitleService: PageTitleService
|
||||
) {
|
||||
this.form = this.fb.group({
|
||||
name: ['', Validators.required],
|
||||
description: [''],
|
||||
themes: [''],
|
||||
stakes: [''],
|
||||
gmNotes: [''],
|
||||
rewards: [''],
|
||||
resolution: ['']
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
// On s'abonne à paramMap plutôt que de lire snapshot une fois : Angular
|
||||
// réutilise le composant quand on navigue entre arcs frères via l'arbre
|
||||
// (même route pattern), et ngOnInit ne se relance pas.
|
||||
this.route.paramMap.subscribe(pm => {
|
||||
const newCampaignId = pm.get('campaignId')!;
|
||||
const newArcId = pm.get('arcId')!;
|
||||
if (newArcId !== this.arcId || newCampaignId !== this.campaignId) {
|
||||
this.campaignId = newCampaignId;
|
||||
this.arcId = newArcId;
|
||||
this.loadAll();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private loadAll(): void {
|
||||
// On déclenche d'abord les 4 appels indépendants, puis on charge les pages
|
||||
// du Lore associé UNIQUEMENT si la campagne en a un (switchMap conditionnel).
|
||||
forkJoin({
|
||||
campaign: this.campaignService.getCampaignById(this.campaignId),
|
||||
allCampaigns: this.campaignService.getAllCampaigns(),
|
||||
arc: this.campaignService.getArcById(this.arcId),
|
||||
treeData: loadCampaignTreeData(this.campaignService, this.campaignId, this.characterService, this.npcService)
|
||||
}).pipe(
|
||||
switchMap(data => {
|
||||
const lid = data.campaign.loreId ?? null;
|
||||
// Pas de loreId → pas de picker, on retourne une liste vide.
|
||||
const pages$ = lid ? this.pageService.getByLoreId(lid) : of([] as Page[]);
|
||||
return pages$.pipe(
|
||||
switchMap(pages => of({ ...data, pages, loreId: lid }))
|
||||
);
|
||||
})
|
||||
).subscribe(({ campaign, allCampaigns, arc, treeData, pages, loreId }) => {
|
||||
this.arc = arc;
|
||||
this.loreId = loreId;
|
||||
this.availablePages = pages;
|
||||
this.relatedPageIds = [...(arc.relatedPageIds ?? [])];
|
||||
this.selectedIcon = arc.icon ?? null;
|
||||
this.illustrationImageIds = [...(arc.illustrationImageIds ?? [])];
|
||||
this.mapImageIds = [...(arc.mapImageIds ?? [])];
|
||||
this.pageTitleService.set(arc.name);
|
||||
this.form.patchValue({
|
||||
name: arc.name,
|
||||
description: arc.description ?? '',
|
||||
themes: arc.themes ?? '',
|
||||
stakes: arc.stakes ?? '',
|
||||
gmNotes: arc.gmNotes ?? '',
|
||||
rewards: arc.rewards ?? '',
|
||||
resolution: arc.resolution ?? ''
|
||||
});
|
||||
|
||||
const globalItems: GlobalItem[] = allCampaigns.map((c: Campaign) => ({
|
||||
id: c.id!, name: c.name, route: `/campaigns/${c.id}`
|
||||
}));
|
||||
|
||||
this.layoutService.show({
|
||||
title: campaign.name,
|
||||
items: buildCampaignTree(this.campaignId, treeData),
|
||||
footerLabel: 'Toutes les campagnes',
|
||||
createActions: [
|
||||
{ id: 'create-arc', label: '+ Nouvel arc', variant: 'primary', route: `/campaigns/${this.campaignId}/arcs/create` }
|
||||
],
|
||||
globalItems,
|
||||
globalBackLabel: 'Toutes les campagnes',
|
||||
globalBackRoute: '/campaigns'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
submit(): void {
|
||||
if (this.form.invalid || !this.arc) return;
|
||||
this.campaignService.updateArc(this.arcId, {
|
||||
name: this.form.value.name,
|
||||
description: this.form.value.description,
|
||||
campaignId: this.campaignId,
|
||||
order: this.arc.order ?? 1,
|
||||
themes: this.form.value.themes,
|
||||
stakes: this.form.value.stakes,
|
||||
gmNotes: this.form.value.gmNotes,
|
||||
rewards: this.form.value.rewards,
|
||||
resolution: this.form.value.resolution,
|
||||
relatedPageIds: this.relatedPageIds,
|
||||
illustrationImageIds: this.illustrationImageIds,
|
||||
mapImageIds: this.mapImageIds,
|
||||
icon: this.selectedIcon
|
||||
}).subscribe({
|
||||
next: () => this.router.navigate(['/campaigns', this.campaignId, 'arcs', this.arcId]),
|
||||
error: () => console.error('Erreur lors de la sauvegarde')
|
||||
});
|
||||
}
|
||||
|
||||
delete(): void {
|
||||
if (!confirm(`Supprimer l'arc "${this.arc?.name}" ? Cette action est irréversible.`)) return;
|
||||
this.campaignService.deleteArc(this.arcId).subscribe({
|
||||
next: () => this.router.navigate(['/campaigns', this.campaignId]),
|
||||
error: () => console.error('Erreur lors de la suppression')
|
||||
});
|
||||
}
|
||||
|
||||
cancel(): void {
|
||||
this.router.navigate(['/campaigns', this.campaignId, 'arcs', this.arcId]);
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.layoutService.hide();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user