Mise en ligne de la version 0.2.0

web/src/app/campaigns/chapter-view/chapter-view.component.html

@@ -0,0 +1,65 @@
+<div class="view-page" *ngIf="chapter">
+
+  <header class="view-header">
+    <div>
+      <h1>{{ chapter.name }}</h1>
+      <p class="view-subtitle">Chapitre</p>
+    </div>
+    <div class="view-actions">
+      <button type="button" class="btn-secondary" (click)="openGraph()"
+              title="Voir l'organigramme des scènes et de leurs branches">
+        <lucide-icon [img]="Network" [size]="14"></lucide-icon>
+        Carte du chapitre
+      </button>
+      <button type="button" class="btn-primary" (click)="editMode()">
+        <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
+        Modifier
+      </button>
+    </div>
+  </header>
+
+  <!-- Illustrations -->
+  <section class="view-section" *ngIf="(chapter.illustrationImageIds?.length ?? 0) > 0">
+    <app-image-gallery [imageIds]="chapter.illustrationImageIds ?? []"></app-image-gallery>
+  </section>
+
+  <section class="view-section">
+    <h2 class="view-section-title"><span class="view-section-icon">📖</span> Synopsis</h2>
+    <p class="view-section-body" *ngIf="chapter.description?.trim(); else emptyDesc">{{ chapter.description }}</p>
+    <ng-template #emptyDesc><p class="view-section-empty">Non renseigné</p></ng-template>
+  </section>
+
+  <div class="view-row">
+    <section class="view-section">
+      <h2 class="view-section-title"><span class="view-section-icon">🎯</span> Objectifs des joueurs</h2>
+      <p class="view-section-body" *ngIf="chapter.playerObjectives?.trim(); else emptyObj">{{ chapter.playerObjectives }}</p>
+      <ng-template #emptyObj><p class="view-section-empty">Non renseigné</p></ng-template>
+    </section>
+
+    <section class="view-section">
+      <h2 class="view-section-title"><span class="view-section-icon">⚡</span> Enjeux narratifs</h2>
+      <p class="view-section-body" *ngIf="chapter.narrativeStakes?.trim(); else emptyNs">{{ chapter.narrativeStakes }}</p>
+      <ng-template #emptyNs><p class="view-section-empty">Non renseigné</p></ng-template>
+    </section>
+  </div>
+
+  <section class="view-section view-section--private" *ngIf="chapter.gmNotes?.trim()">
+    <h2 class="view-section-title">
+      <span class="view-section-icon">🔒</span>
+      Notes du Maître de Jeu
+    </h2>
+    <p class="view-section-body">{{ chapter.gmNotes }}</p>
+  </section>
+
+  <section class="view-section" *ngIf="loreId && (chapter.relatedPageIds?.length ?? 0) > 0">
+    <h2 class="view-section-title"><span class="view-section-icon">🔗</span> Pages Lore associées</h2>
+    <div class="view-chips">
+      <a class="view-chip"
+         *ngFor="let relId of chapter.relatedPageIds"
+         [routerLink]="['/lore', loreId, 'pages', relId]">
+        {{ titleOfRelated(relId) }}
+      </a>
+    </div>
+  </section>
+
+</div>

web/src/app/campaigns/chapter-view/chapter-view.component.scss

@@ -0,0 +1 @@
+// Styles partagés via styles/_view.scss

web/src/app/campaigns/chapter-view/chapter-view.component.ts

@@ -0,0 +1,118 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { forkJoin, of } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+import { LucideAngularModule, Pencil, Network } from 'lucide-angular';
+import { CampaignService } from '../../services/campaign.service';
+import { PageService } from '../../services/page.service';
+import { LayoutService, GlobalItem } from '../../services/layout.service';
+import { PageTitleService } from '../../services/page-title.service';
+import { Campaign, Chapter } from '../../services/campaign.model';
+import { Page } from '../../services/page.model';
+import { loadCampaignTreeData, buildCampaignTree } from '../campaign-tree.helper';
+import { ImageGalleryComponent } from '../../shared/image-gallery/image-gallery.component';
+
+/**
+ * Écran de consultation d'un Chapitre (lecture seule).
+ * Route : /campaigns/:campaignId/arcs/:arcId/chapters/:chapterId
+ */
+@Component({
+  selector: 'app-chapter-view',
+  standalone: true,
+  imports: [CommonModule, RouterModule, LucideAngularModule, ImageGalleryComponent],
+  templateUrl: './chapter-view.component.html',
+  styleUrls: ['./chapter-view.component.scss']
+})
+export class ChapterViewComponent implements OnInit, OnDestroy {
+  readonly Pencil = Pencil;
+  readonly Network = Network;
+
+  campaignId = '';
+  arcId = '';
+  chapterId = '';
+  chapter: Chapter | null = null;
+
+  loreId: string | null = null;
+  availablePages: Page[] = [];
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private campaignService: CampaignService,
+    private pageService: PageService,
+    private layoutService: LayoutService,
+    private pageTitleService: PageTitleService
+  ) {}
+
+  ngOnInit(): void {
+    this.route.paramMap.subscribe(pm => {
+      const newCampaignId = pm.get('campaignId')!;
+      const newArcId = pm.get('arcId')!;
+      const newChapterId = pm.get('chapterId')!;
+      if (newChapterId !== this.chapterId ||
+          newArcId !== this.arcId ||
+          newCampaignId !== this.campaignId) {
+        this.campaignId = newCampaignId;
+        this.arcId = newArcId;
+        this.chapterId = newChapterId;
+        this.load();
+      }
+    });
+  }
+
+  private load(): void {
+    forkJoin({
+      campaign: this.campaignService.getCampaignById(this.campaignId),
+      allCampaigns: this.campaignService.getAllCampaigns(),
+      chapter: this.campaignService.getChapterById(this.chapterId),
+      treeData: loadCampaignTreeData(this.campaignService, this.campaignId)
+    }).pipe(
+      switchMap(data => {
+        const lid = data.campaign.loreId ?? null;
+        const pages$ = lid ? this.pageService.getByLoreId(lid) : of([] as Page[]);
+        return pages$.pipe(switchMap(pages => of({ ...data, pages, loreId: lid })));
+      })
+    ).subscribe(({ campaign, allCampaigns, chapter, treeData, pages, loreId }) => {
+      this.chapter = chapter;
+      this.loreId = loreId;
+      this.availablePages = pages;
+      this.pageTitleService.set(chapter.name);
+
+      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'
+      });
+    });
+  }
+
+  titleOfRelated(pageId: string): string {
+    return this.availablePages.find(p => p.id === pageId)?.title ?? '(page supprimée)';
+  }
+
+  editMode(): void {
+    this.router.navigate([
+      '/campaigns', this.campaignId, 'arcs', this.arcId, 'chapters', this.chapterId, 'edit'
+    ]);
+  }
+
+  openGraph(): void {
+    this.router.navigate([
+      '/campaigns', this.campaignId, 'arcs', this.arcId, 'chapters', this.chapterId, 'graph'
+    ]);
+  }
+
+  ngOnDestroy(): void {
+    this.layoutService.hide();
+  }
+}