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

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

@@ -6,7 +6,9 @@
         <lucide-icon *ngIf="arc.icon" [img]="resolveCampaignIcon(arc.icon)" [size]="22" class="title-icon"></lucide-icon>
         {{ arc.name }}
       </h1>
-      <p class="view-subtitle">Arc narratif</p>
+      <p class="view-subtitle">
+        {{ arc.type === 'HUB' ? 'Arc en hub (quêtes non linéaires)' : 'Arc narratif' }}
+      </p>
     </div>
     <div class="view-actions">
       <button type="button" class="btn-primary" (click)="editMode()">
@@ -31,6 +33,40 @@
     <app-image-gallery [imageIds]="arc.mapImageIds ?? []" [layout]="'MAPS'"></app-image-gallery>
   </section>
 
+  <!-- Vue Hub (scénario) : liste les quêtes et leurs conditions, sans statut.
+       Le statut effectif et les actions de jeu vivent dans l'écran d'une Partie. -->
+  <section class="view-section" *ngIf="arc.type === 'HUB'">
+    <h2 class="view-section-title"><span class="view-section-icon">🗺️</span> Quêtes du hub (scénario)</h2>
+
+    <p class="view-section-empty" *ngIf="hubQuests.length === 0">
+      Aucune quête pour ce hub. Créez un chapitre pour ajouter une première quête.
+    </p>
+
+    <div class="hub-quest-grid" *ngIf="hubQuests.length > 0">
+      <button type="button"
+              class="hub-quest-card"
+              *ngFor="let q of hubQuests"
+              (click)="openQuest(q)">
+        <div class="hub-quest-card-head">
+          <span class="hub-quest-card-icon" *ngIf="q.icon">
+            <lucide-icon [img]="resolveCampaignIcon(q.icon)" [size]="18"></lucide-icon>
+          </span>
+          <span class="hub-quest-card-name">{{ q.name }}</span>
+        </div>
+
+        <p class="hub-quest-card-desc" *ngIf="q.description?.trim()">{{ q.description }}</p>
+
+        <div class="hub-quest-card-locked-hint" *ngIf="(q.prerequisites?.length ?? 0) > 0">
+          <lucide-icon [img]="AlertCircle" [size]="13"></lucide-icon>
+          <span>{{ q.prerequisites!.length }} condition(s) de déblocage</span>
+          <ul class="hub-quest-card-prereq-list">
+            <li *ngFor="let p of q.prerequisites">{{ describePrerequisite(p) }}</li>
+          </ul>
+        </div>
+      </button>
+    </div>
+  </section>
+
   <section class="view-section">
     <h2 class="view-section-title"><span class="view-section-icon">📜</span> Synopsis</h2>
     <p class="view-section-body" *ngIf="arc.description?.trim(); else emptyDesc">{{ arc.description }}</p>

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

@@ -1 +1,112 @@
 // Styles partagés via styles/_view.scss
+
+// === Vue Hub ===
+.hub-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
+
+  .view-section-title { margin: 0; }
+}
+
+.hub-quest-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 0.85rem;
+}
+
+.hub-quest-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.85rem 0.9rem;
+  border: 1px solid var(--color-border, #e2e2e2);
+  border-radius: 10px;
+  background: var(--color-surface, #fff);
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
+  min-height: 110px;
+
+  &:hover {
+    border-color: var(--color-primary, #2c6cd6);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
+  }
+
+  &.locked {
+    opacity: 0.7;
+    background: rgba(128, 128, 128, 0.04);
+    border-style: dashed;
+
+    &:hover {
+      // Pas d'illusion d'interactivité pour les quêtes verrouillées
+      transform: none;
+      border-color: var(--color-border, #e2e2e2);
+      box-shadow: none;
+    }
+  }
+}
+
+.hub-quest-card-head {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.hub-quest-card-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-primary, #2c6cd6);
+}
+
+.hub-quest-card-name {
+  font-weight: 600;
+  font-size: 0.95rem;
+  line-height: 1.2;
+}
+
+.hub-quest-card-desc {
+  font-size: 0.82rem;
+  color: var(--color-text-muted, #666);
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.hub-quest-card-footer {
+  margin-top: auto;
+}
+
+.hub-quest-card-locked-hint {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-top: 0.4rem;
+  padding-top: 0.4rem;
+  border-top: 1px dashed rgba(128, 128, 128, 0.25);
+  font-size: 0.72rem;
+  color: var(--color-text-muted, #777);
+
+  > lucide-icon,
+  > span {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+  }
+}
+
+.hub-quest-card-prereq-list {
+  list-style: disc;
+  padding-left: 1rem;
+  margin: 0.15rem 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}

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

@@ -3,7 +3,7 @@ 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, Trash2 } from 'lucide-angular';
+import { LucideAngularModule, Pencil, Trash2, AlertCircle } from 'lucide-angular';
 import { resolveCampaignIcon } from '../../campaign-icons';
 import { CampaignService } from '../../../services/campaign.service';
 import { CharacterService } from '../../../services/character.service';
@@ -11,7 +11,7 @@ import { NpcService } from '../../../services/npc.service';
 import { PageService } from '../../../services/page.service';
 import { LayoutService } from '../../../services/layout.service';
 import { PageTitleService } from '../../../services/page-title.service';
-import { Arc } from '../../../services/campaign.model';
+import { Arc, Chapter, Prerequisite } from '../../../services/campaign.model';
 import { Page } from '../../../services/page.model';
 import { loadCampaignTreeData, buildCampaignSidebarConfig } from '../../campaign-tree.helper';
 import { ImageGalleryComponent } from '../../../shared/image-gallery/image-gallery.component';
@@ -32,12 +32,22 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
 export class ArcViewComponent implements OnInit, OnDestroy {
   readonly Pencil = Pencil;
   readonly Trash2 = Trash2;
+  readonly AlertCircle = AlertCircle;
   readonly resolveCampaignIcon = resolveCampaignIcon;
 
   campaignId = '';
   arcId = '';
   arc: Arc | null = null;
 
+  /** Chapitres de l'arc courant — exploités pour le rendu HUB (grille de quêtes). */
+  hubQuests: Chapter[] = [];
+
+  /**
+   * Indexe les chapitres de toute la campagne par id pour résoudre les libellés
+   * des prérequis QUEST_COMPLETED quand on les affiche dans les tooltips de verrouillage.
+   */
+  private allChaptersById: Record<string, Chapter> = {};
+
   /** ID du Lore associé à la campagne (null si pas d'univers lié). */
   loreId: string | null = null;
   /** Pages du Lore — pour résoudre relatedPageIds en titres. */
@@ -85,10 +95,42 @@ export class ArcViewComponent implements OnInit, OnDestroy {
       this.availablePages = pages;
       this.pageTitleService.set(arc.name);
 
+      // Quêtes du Hub : chapitres de l'arc courant, triés par order puis par nom.
+      this.hubQuests = [...(treeData.chaptersByArc[this.arcId] ?? [])].sort((a, b) => {
+        const oa = a.order ?? 0;
+        const ob = b.order ?? 0;
+        if (oa !== ob) return oa - ob;
+        return a.name.localeCompare(b.name, 'fr', { numeric: true, sensitivity: 'base' });
+      });
+      // Index global pour résoudre les noms de quêtes référencées par les prérequis.
+      this.allChaptersById = {};
+      Object.values(treeData.chaptersByArc).forEach(list =>
+          list.forEach(c => { if (c.id) this.allChaptersById[c.id] = c; })
+      );
+
       this.layoutService.show(buildCampaignSidebarConfig(campaign, allCampaigns, treeData, this.campaignId));
     });
   }
 
+  /** Construit un libellé lisible pour un prérequis (tooltip de verrouillage). */
+  describePrerequisite(p: Prerequisite): string {
+    switch (p.kind) {
+      case 'QUEST_COMPLETED':
+        return `Quête « ${this.allChaptersById[p.questId]?.name ?? '?'} » terminée`;
+      case 'SESSION_REACHED':
+        return `Session ${p.minSessionNumber} atteinte`;
+      case 'FLAG_SET':
+        return `Fait : ${p.flagName}`;
+    }
+  }
+
+  openQuest(q: Chapter): void {
+    if (!q.id) return;
+    this.router.navigate([
+      '/campaigns', this.campaignId, 'arcs', this.arcId, 'chapters', q.id
+    ]);
+  }
+
   titleOfRelated(pageId: string): string {
     return this.availablePages.find(p => p.id === pageId)?.title ?? '(page supprimée)';
   }