Plusieurs ajouts :

- Possibilité de configurer des lieux dans une scène : permet de configurer un donjon par exemple avec les pièces, les trésors par pièce, la narration..... Mise en place également de conditions permettant de conditionner le déblocage des quêtes. - Possibilité de transformé un arc en instance non linéaire afin de faire un hub. Permet de jouer de préparer des campagnes type Dragon of Icespire peak plus facilement. - Configuration de partie : chaque partie va contenir les séances, ce qui permettra de suivre le déblocage des conditions pour les quêtes. Passage en 0.9.1-beta
2026-06-03 15:44:48 +02:00
parent 694f687fec
commit c3d3394ec7
147 changed files with 5347 additions and 392 deletions
--- a/web/src/app/campaigns/playthrough/playthrough-detail/playthrough-detail.component.html
+++ b/web/src/app/campaigns/playthrough/playthrough-detail/playthrough-detail.component.html
@@ -0,0 +1,66 @@
+<div class="playthrough-page" *ngIf="playthrough">
+
+  <header class="page-header">
+    <button type="button" class="btn-secondary" (click)="back()">
+      <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
+      Retour
+    </button>
+    <div class="header-info">
+      <h1>{{ playthrough.name }}</h1>
+      <p class="subtitle" *ngIf="playthrough.description">{{ playthrough.description }}</p>
+    </div>
+    <div class="header-actions">
+      <button type="button" class="btn-danger" (click)="delete()">
+        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+        Supprimer
+      </button>
+    </div>
+  </header>
+
+  <!-- Bloc action principal : démarrer ou reprendre la session -->
+  <section class="play-action">
+    <button type="button" class="btn-primary big"
+            *ngIf="!activeOnThis"
+            [disabled]="startingSession"
+            (click)="startSession()">
+      <lucide-icon [img]="Play" [size]="16"></lucide-icon>
+      Lancer une session
+    </button>
+
+    <button type="button" class="btn-primary big"
+            *ngIf="activeOnThis"
+            (click)="openSession(activeOnThis)">
+      <lucide-icon [img]="Play" [size]="16"></lucide-icon>
+      Reprendre la session en cours
+    </button>
+
+    <button type="button" class="btn-secondary" (click)="openFlags()">
+      <lucide-icon [img]="Flag" [size]="14"></lucide-icon>
+      Faits de la partie
+    </button>
+  </section>
+
+  <!-- PJ -->
+  <section class="block">
+    <h2><lucide-icon [img]="Users" [size]="18"></lucide-icon> Personnages joueurs</h2>
+    <p class="empty" *ngIf="characters.length === 0">Aucun PJ pour cette partie.</p>
+    <ul class="character-list" *ngIf="characters.length > 0">
+      <li *ngFor="let c of characters">
+        <a [routerLink]="['/campaigns', campaignId, 'characters', c.id]">{{ c.name }}</a>
+      </li>
+    </ul>
+  </section>
+
+  <!-- Sessions -->
+  <section class="block">
+    <h2>Sessions</h2>
+    <p class="empty" *ngIf="sessions.length === 0">Aucune session encore. Lancez la première !</p>
+    <ul class="session-list" *ngIf="sessions.length > 0">
+      <li *ngFor="let s of sessions" (click)="openSession(s)">
+        <span class="session-name">{{ s.name }}</span>
+        <span class="session-status" [class.active]="s.active">{{ s.active ? 'En cours' : 'Terminée' }}</span>
+      </li>
+    </ul>
+  </section>
+
+</div>
--- a/web/src/app/campaigns/playthrough/playthrough-detail/playthrough-detail.component.scss
+++ b/web/src/app/campaigns/playthrough/playthrough-detail/playthrough-detail.component.scss
@@ -0,0 +1,109 @@
+.playthrough-page {
+  padding: 2.5rem 2rem;
+  max-width: 880px;
+}
+
+.page-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+
+  h1 { margin: 0 0 0.2rem; font-size: 1.6rem; }
+}
+
+.header-info { flex: 1; }
+
+.subtitle {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--color-text-muted, #666);
+}
+
+.play-action {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  margin-bottom: 2rem;
+  flex-wrap: wrap;
+}
+
+.btn-primary.big,
+.btn-secondary.big {
+  padding: 0.75rem 1.25rem;
+  font-size: 0.95rem;
+}
+
+.block {
+  margin-bottom: 1.75rem;
+
+  h2 {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 1.05rem;
+    margin: 0 0 0.7rem;
+  }
+}
+
+.empty {
+  font-size: 0.88rem;
+  color: var(--color-text-muted, #777);
+  font-style: italic;
+}
+
+.character-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+
+  a {
+    display: inline-block;
+    padding: 0.35rem 0.7rem;
+    border: 1px solid var(--color-border, #e2e2e2);
+    border-radius: 999px;
+    text-decoration: none;
+    color: inherit;
+
+    &:hover { border-color: var(--color-primary, #2c6cd6); }
+  }
+}
+
+.session-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+
+  li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.6rem 0.85rem;
+    border: 1px solid var(--color-border, #e2e2e2);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: border-color 120ms ease;
+
+    &:hover { border-color: var(--color-primary, #2c6cd6); }
+  }
+}
+
+.session-status {
+  font-size: 0.78rem;
+  padding: 0.15rem 0.55rem;
+  border-radius: 999px;
+  background: rgba(128, 128, 128, 0.1);
+  color: var(--color-text-muted, #666);
+
+  &.active {
+    background: rgba(52, 168, 83, 0.15);
+    color: #2f7a47;
+    font-weight: 600;
+  }
+}
--- a/web/src/app/campaigns/playthrough/playthrough-detail/playthrough-detail.component.ts
+++ b/web/src/app/campaigns/playthrough/playthrough-detail/playthrough-detail.component.ts
@@ -0,0 +1,145 @@
+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 { catchError } from 'rxjs/operators';
+import { LucideAngularModule, ArrowLeft, Play, Flag, Users, Trash2, Pencil } from 'lucide-angular';
+import { CampaignService } from '../../../services/campaign.service';
+import { CharacterService } from '../../../services/character.service';
+import { NpcService } from '../../../services/npc.service';
+import { PlaythroughService } from '../../../services/playthrough.service';
+import { SessionService } from '../../../services/session.service';
+import { LayoutService } from '../../../services/layout.service';
+import { PageTitleService } from '../../../services/page-title.service';
+import { Playthrough } from '../../../services/campaign.model';
+import { Session } from '../../../services/session.model';
+import { Character } from '../../../services/character.model';
+import { loadCampaignTreeData, buildCampaignSidebarConfig } from '../../campaign-tree.helper';
+import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dialog.service';
+
+/**
+ * Vue détail d'une Partie (Playthrough).
+ * Minimal MVP — affiche les infos, le lien vers les faits, la liste des sessions
+ * et les PJ de cette Partie.
+ */
+@Component({
+  selector: 'app-playthrough-detail',
+  standalone: true,
+  imports: [CommonModule, RouterModule, LucideAngularModule],
+  templateUrl: './playthrough-detail.component.html',
+  styleUrls: ['./playthrough-detail.component.scss']
+})
+export class PlaythroughDetailComponent implements OnInit, OnDestroy {
+  readonly ArrowLeft = ArrowLeft;
+  readonly Play = Play;
+  readonly Flag = Flag;
+  readonly Users = Users;
+  readonly Trash2 = Trash2;
+  readonly Pencil = Pencil;
+
+  campaignId = '';
+  playthroughId = '';
+
+  playthrough: Playthrough | null = null;
+  sessions: Session[] = [];
+  characters: Character[] = [];
+  /** Session active de CETTE Partie (null si aucune). Plus de check global. */
+  activeOnThis: Session | null = null;
+
+  startingSession = false;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private campaignService: CampaignService,
+    private characterService: CharacterService,
+    private npcService: NpcService,
+    private playthroughService: PlaythroughService,
+    private sessionService: SessionService,
+    private layoutService: LayoutService,
+    private pageTitleService: PageTitleService,
+    private confirmDialog: ConfirmDialogService
+  ) {}
+
+  ngOnInit(): void {
+    this.route.paramMap.subscribe(pm => {
+      const cid = pm.get('campaignId')!;
+      const pid = pm.get('playthroughId')!;
+      if (cid !== this.campaignId || pid !== this.playthroughId) {
+        this.campaignId = cid;
+        this.playthroughId = pid;
+        this.load();
+      }
+    });
+  }
+
+  private load(): void {
+    forkJoin({
+      campaign: this.campaignService.getCampaignById(this.campaignId),
+      allCampaigns: this.campaignService.getAllCampaigns(),
+      treeData: loadCampaignTreeData(this.campaignService, this.campaignId, this.characterService, this.npcService),
+      playthrough: this.playthroughService.getById(this.playthroughId),
+      sessions: this.sessionService.getSessions(this.playthroughId).pipe(catchError(() => of([] as Session[]))),
+      characters: this.characterService.getByPlaythrough(this.playthroughId).pipe(catchError(() => of([] as Character[]))),
+      activeOnThis: this.sessionService.getActiveByPlaythrough(this.playthroughId).pipe(catchError(() => of(null)))
+    }).subscribe(({ campaign, allCampaigns, treeData, playthrough, sessions, characters, activeOnThis }) => {
+      this.playthrough = playthrough;
+      this.sessions = sessions;
+      this.characters = characters;
+      this.activeOnThis = activeOnThis;
+      this.pageTitleService.set(`${playthrough.name} — ${campaign.name}`);
+      this.layoutService.show(buildCampaignSidebarConfig(campaign, allCampaigns, treeData, this.campaignId));
+    });
+  }
+
+  startSession(): void {
+    if (this.startingSession || this.activeOnThis) return;
+    this.startingSession = true;
+    this.sessionService.startSession(this.playthroughId).subscribe({
+      next: s => { this.startingSession = false; this.router.navigate(['/sessions', s.id]); },
+      error: () => { this.startingSession = false; }
+    });
+  }
+
+  openSession(s: Session): void {
+    this.router.navigate(['/sessions', s.id]);
+  }
+
+  openFlags(): void {
+    this.router.navigate(['/campaigns', this.campaignId, 'playthroughs', this.playthroughId, 'flags']);
+  }
+
+  back(): void {
+    this.router.navigate(['/campaigns', this.campaignId]);
+  }
+
+  delete(): void {
+    if (!this.playthrough) return;
+    this.playthroughService.deletionImpact(this.playthroughId).subscribe({
+      next: impact => {
+        const parts: string[] = [];
+        if (impact.sessions > 0) parts.push(`${impact.sessions} session(s)`);
+        if (impact.characters > 0) parts.push(`${impact.characters} PJ`);
+        if (impact.flags > 0) parts.push(`${impact.flags} fait(s)`);
+        if (impact.progressions > 0) parts.push(`${impact.progressions} progression(s) de quête`);
+        const details: string[] = [];
+        if (parts.length) details.push(`Cette action supprimera aussi : ${parts.join(', ')}.`);
+        details.push('Cette action est irréversible.');
+        this.confirmDialog.confirm({
+          title: 'Supprimer la Partie',
+          message: `Supprimer "${this.playthrough?.name}" ?`,
+          details,
+          confirmLabel: 'Supprimer',
+          variant: 'danger'
+        }).then(ok => {
+          if (!ok) return;
+          this.playthroughService.delete(this.playthroughId).subscribe({
+            next: () => this.router.navigate(['/campaigns', this.campaignId])
+          });
+        });
+      }
+    });
+  }
+
+  ngOnDestroy(): void {}
+}
--- a/web/src/app/campaigns/playthrough/playthrough-flags-page/playthrough-flags-page.component.html
+++ b/web/src/app/campaigns/playthrough/playthrough-flags-page/playthrough-flags-page.component.html
@@ -0,0 +1,20 @@
+<div class="flags-page" *ngIf="playthrough">
+  <header class="page-header">
+    <button type="button" class="btn-secondary" (click)="back()">
+      <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
+      Retour
+    </button>
+    <div>
+      <h1>Faits — {{ playthrough.name }}</h1>
+      <p class="subtitle">
+        Faits booléens propres à cette partie. Toggle-les en jeu pour débloquer
+        les quêtes qui en dépendent.
+      </p>
+    </div>
+  </header>
+
+  <app-playthrough-flags-manager
+    [campaignId]="campaignId"
+    [playthroughId]="playthroughId">
+  </app-playthrough-flags-manager>
+</div>
--- a/web/src/app/campaigns/playthrough/playthrough-flags-page/playthrough-flags-page.component.scss
+++ b/web/src/app/campaigns/playthrough/playthrough-flags-page/playthrough-flags-page.component.scss
@@ -0,0 +1,24 @@
+.flags-page {
+  padding: 2.5rem 2rem;
+  max-width: 720px;
+}
+
+.page-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+
+  h1 {
+    margin: 0 0 0.25rem;
+    font-size: 1.5rem;
+  }
+}
+
+.subtitle {
+  margin: 0;
+  font-size: 0.88rem;
+  color: var(--color-text-muted, #666);
+  max-width: 60ch;
+  line-height: 1.4;
+}
--- a/web/src/app/campaigns/playthrough/playthrough-flags-page/playthrough-flags-page.component.ts
+++ b/web/src/app/campaigns/playthrough/playthrough-flags-page/playthrough-flags-page.component.ts
@@ -0,0 +1,75 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { forkJoin } from 'rxjs';
+import { LucideAngularModule, ArrowLeft } from 'lucide-angular';
+import { CampaignService } from '../../../services/campaign.service';
+import { CharacterService } from '../../../services/character.service';
+import { NpcService } from '../../../services/npc.service';
+import { PlaythroughService } from '../../../services/playthrough.service';
+import { LayoutService } from '../../../services/layout.service';
+import { PageTitleService } from '../../../services/page-title.service';
+import { Playthrough } from '../../../services/campaign.model';
+import { loadCampaignTreeData, buildCampaignSidebarConfig } from '../../campaign-tree.helper';
+import { PlaythroughFlagsManagerComponent } from '../../../shared/playthrough-flags-manager/playthrough-flags-manager.component';
+
+/**
+ * Page dédiée aux "Faits" d'une Partie.
+ * Route : /campaigns/:campaignId/playthroughs/:playthroughId/flags
+ */
+@Component({
+  selector: 'app-playthrough-flags-page',
+  standalone: true,
+  imports: [CommonModule, RouterModule, LucideAngularModule, PlaythroughFlagsManagerComponent],
+  templateUrl: './playthrough-flags-page.component.html',
+  styleUrls: ['./playthrough-flags-page.component.scss']
+})
+export class PlaythroughFlagsPageComponent implements OnInit, OnDestroy {
+  readonly ArrowLeft = ArrowLeft;
+
+  campaignId = '';
+  playthroughId = '';
+  playthrough: Playthrough | null = null;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private campaignService: CampaignService,
+    private characterService: CharacterService,
+    private npcService: NpcService,
+    private playthroughService: PlaythroughService,
+    private layoutService: LayoutService,
+    private pageTitleService: PageTitleService
+  ) {}
+
+  ngOnInit(): void {
+    this.route.paramMap.subscribe(pm => {
+      const cid = pm.get('campaignId')!;
+      const pid = pm.get('playthroughId')!;
+      if (cid !== this.campaignId || pid !== this.playthroughId) {
+        this.campaignId = cid;
+        this.playthroughId = pid;
+        this.load();
+      }
+    });
+  }
+
+  private load(): void {
+    forkJoin({
+      campaign: this.campaignService.getCampaignById(this.campaignId),
+      allCampaigns: this.campaignService.getAllCampaigns(),
+      treeData: loadCampaignTreeData(this.campaignService, this.campaignId, this.characterService, this.npcService),
+      playthrough: this.playthroughService.getById(this.playthroughId)
+    }).subscribe(({ campaign, allCampaigns, treeData, playthrough }) => {
+      this.playthrough = playthrough;
+      this.pageTitleService.set(`${playthrough.name} — Faits`);
+      this.layoutService.show(buildCampaignSidebarConfig(campaign, allCampaigns, treeData, this.campaignId));
+    });
+  }
+
+  back(): void {
+    this.router.navigate(['/campaigns', this.campaignId]);
+  }
+
+  ngOnDestroy(): void {}
+}