Changement sur le Readme

Ajout d'une partie spécifique pour des PNJ dans la partie campagne

web/src/app/campaigns/scene/scene-create/scene-create.component.html

@@ -0,0 +1,45 @@
+<div class="scene-create-page">
+
+  <div class="page-header">
+    <h1>Créer une nouvelle scène</h1>
+    <p class="chapter-ref" *ngIf="chapterName">Chapitre : {{ chapterName }}</p>
+  </div>
+
+  <form [formGroup]="form" (ngSubmit)="submit()" class="scene-form">
+
+    <div class="field">
+      <label for="scene-create-name">Nom de la scène *</label>
+      <input
+        id="scene-create-name"
+        type="text"
+        formControlName="name"
+        placeholder="Ex: Arrivée au village"
+        [class.invalid]="form.get('name')?.invalid && form.get('name')?.touched"
+      />
+    </div>
+
+    <div class="field">
+      <label for="scene-create-description">Description</label>
+      <textarea
+        id="scene-create-description"
+        formControlName="description"
+        placeholder="Décrivez la scène, les événements clés, les PNJ présents..."
+        rows="6">
+      </textarea>
+    </div>
+
+    <div class="field">
+      <label>Icône</label>
+      <app-icon-picker [options]="campaignIconOptions" [(selected)]="selectedIcon"></app-icon-picker>
+    </div>
+
+    <div class="form-actions">
+      <button type="submit" class="btn-primary" [disabled]="form.invalid">
+        Créer la scène
+      </button>
+      <button type="button" class="btn-secondary" (click)="cancel()">Annuler</button>
+    </div>
+
+  </form>
+
+</div>

web/src/app/campaigns/scene/scene-create/scene-create.component.scss

@@ -0,0 +1,18 @@
+.scene-create-page {
+  padding: 2.5rem 2rem;
+  max-width: 640px;
+}
+
+// Overrides locaux : titre violet + sous-titre .chapter-ref (parent de la scène).
+.page-header {
+  h1 { color: #a5b4fc; }
+  .chapter-ref { color: #6b7280; font-size: 0.85rem; margin: 0; }
+}
+
+.scene-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.btn-primary { flex: 1; }

web/src/app/campaigns/scene/scene-create/scene-create.component.ts

@@ -0,0 +1,109 @@
+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 } from 'rxjs';
+import { LucideAngularModule } from 'lucide-angular';
+import { CampaignService } from '../../../services/campaign.service';
+import { CharacterService } from '../../../services/character.service';
+import { NpcService } from '../../../services/npc.service';
+import { LayoutService, GlobalItem } from '../../../services/layout.service';
+import { Campaign } from '../../../services/campaign.model';
+import { loadCampaignTreeData, buildCampaignTree } from '../../campaign-tree.helper';
+import { IconPickerComponent } from '../../../shared/icon-picker/icon-picker.component';
+import { CAMPAIGN_ICON_OPTIONS } from '../../campaign-icons';
+
+/**
+ * Écran de création d'une nouvelle scène rattachée à un chapitre.
+ * Route : /campaigns/:campaignId/arcs/:arcId/chapters/:chapterId/scenes/create
+ */
+@Component({
+  selector: 'app-scene-create',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, IconPickerComponent],
+  templateUrl: './scene-create.component.html',
+  styleUrls: ['./scene-create.component.scss']
+})
+export class SceneCreateComponent implements OnInit, OnDestroy {
+  readonly campaignIconOptions = CAMPAIGN_ICON_OPTIONS;
+  selectedIcon: string | null = null;
+
+  form: FormGroup;
+  campaignId = '';
+  arcId = '';
+  chapterId = '';
+  chapterName = '';
+  private existingSceneCount = 0;
+
+  constructor(
+    private fb: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private campaignService: CampaignService,
+    private characterService: CharacterService,
+    private npcService: NpcService,
+    private layoutService: LayoutService
+  ) {
+    this.form = this.fb.group({
+      name:        ['', Validators.required],
+      description: ['']
+    });
+  }
+
+  ngOnInit(): void {
+    this.campaignId = this.route.snapshot.paramMap.get('campaignId')!;
+    this.arcId = this.route.snapshot.paramMap.get('arcId')!;
+    this.chapterId = this.route.snapshot.paramMap.get('chapterId')!;
+    this.loadLayout();
+  }
+
+  private loadLayout(): void {
+    forkJoin({
+      campaign: this.campaignService.getCampaignById(this.campaignId),
+      allCampaigns: this.campaignService.getAllCampaigns(),
+      treeData: loadCampaignTreeData(this.campaignService, this.campaignId, this.characterService, this.npcService)
+    }).subscribe(({ campaign, allCampaigns, treeData }) => {
+      const currentChapter = (treeData.chaptersByArc[this.arcId] ?? []).find(c => c.id === this.chapterId);
+      this.chapterName = currentChapter?.name ?? '';
+      this.existingSceneCount = treeData.scenesByChapter[this.chapterId]?.length ?? 0;
+
+      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) return;
+    this.campaignService.createScene({
+      name: this.form.value.name,
+      description: this.form.value.description,
+      chapterId: this.chapterId,
+      order: this.existingSceneCount + 1,
+      icon: this.selectedIcon
+    }).subscribe({
+      next: (created) => this.router.navigate(['/campaigns', this.campaignId, 'arcs', this.arcId, 'chapters', this.chapterId, 'scenes', created.id]),
+      error: () => console.error('Erreur lors de la création de la scène')
+    });
+  }
+
+  cancel(): void {
+    this.router.navigate(['/campaigns', this.campaignId]);
+  }
+
+  ngOnDestroy(): void {
+    this.layoutService.hide();
+  }
+}