Amélioration de l'UI : meilleur affichage des images que ce soit dans la partie lore ou la partie campagne (partie campagne : visualisation scrapbooking). Possibilité de réordonner les champs dans les templates...

Passage v0.3.0
2026-04-21 16:56:27 +02:00
parent 1e34f7f954
commit 71449bee1b
45 changed files with 1045 additions and 90 deletions
--- a/web/src/app/campaigns/arc-edit/arc-edit.component.html
+++ b/web/src/app/campaigns/arc-edit/arc-edit.component.html
@@ -18,15 +18,28 @@

  <form [formGroup]="form" (ngSubmit)="submit()" class="edit-form">

-    <!-- Illustrations (galerie editable) -->
+    <!-- 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">Glisse-depose ou clique sur "+ Ajouter" pour uploader. JPEG, PNG, WebP ou GIF, 10 Mo max.</small>
+      <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 &amp; 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">
--- a/web/src/app/campaigns/arc-edit/arc-edit.component.ts
+++ b/web/src/app/campaigns/arc-edit/arc-edit.component.ts
@@ -60,6 +60,8 @@ export class ArcEditComponent implements OnInit, OnDestroy {

  /** 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,
@@ -119,6 +121,7 @@ export class ArcEditComponent implements OnInit, OnDestroy {
      this.availablePages = pages;
      this.relatedPageIds = [...(arc.relatedPageIds ?? [])];
      this.illustrationImageIds = [...(arc.illustrationImageIds ?? [])];
+      this.mapImageIds = [...(arc.mapImageIds ?? [])];
      this.pageTitleService.set(arc.name);
      this.form.patchValue({
        name:        arc.name,
@@ -161,7 +164,8 @@ export class ArcEditComponent implements OnInit, OnDestroy {
      rewards:        this.form.value.rewards,
      resolution:     this.form.value.resolution,
      relatedPageIds: this.relatedPageIds,
-      illustrationImageIds: this.illustrationImageIds
+      illustrationImageIds: this.illustrationImageIds,
+      mapImageIds:    this.mapImageIds
    }).subscribe({
      next: () => this.router.navigate(['/campaigns', this.campaignId, 'arcs', this.arcId]),
      error: () => console.error('Erreur lors de la sauvegarde')
--- a/web/src/app/campaigns/arc-view/arc-view.component.html
+++ b/web/src/app/campaigns/arc-view/arc-view.component.html
@@ -13,9 +13,15 @@
    </div>
  </header>

-  <!-- Illustrations en tete de page (si presentes) -->
+  <!-- Illustrations (rendu editorial magazine) -->
  <section class="view-section" *ngIf="(arc.illustrationImageIds?.length ?? 0) > 0">
-    <app-image-gallery [imageIds]="arc.illustrationImageIds ?? []"></app-image-gallery>
+    <app-image-gallery [imageIds]="arc.illustrationImageIds ?? []" [layout]="'EDITORIAL'"></app-image-gallery>
+  </section>
+
+  <!-- Cartes & plans -->
+  <section class="view-section" *ngIf="(arc.mapImageIds?.length ?? 0) > 0">
+    <h2 class="view-section-title"><span class="view-section-icon">🗺️</span> Cartes & plans</h2>
+    <app-image-gallery [imageIds]="arc.mapImageIds ?? []" [layout]="'MAPS'"></app-image-gallery>
  </section>

  <section class="view-section">
--- a/web/src/app/campaigns/chapter-edit/chapter-edit.component.html
+++ b/web/src/app/campaigns/chapter-edit/chapter-edit.component.html
@@ -18,15 +18,28 @@

  <form [formGroup]="form" (ngSubmit)="submit()" class="edit-form">

-    <!-- Illustrations (galerie editable) -->
+    <!-- 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">Ajoute des cartes, portraits ou ambiances pour illustrer ce chapitre.</small>
+      <small class="field-hint">Portraits, ambiances, scenes marquantes du chapitre.</small>
+    </div>
+
+    <!-- Cartes & plans -->
+    <div class="field">
+      <label>Cartes &amp; plans</label>
+      <app-image-gallery
+        [imageIds]="mapImageIds"
+        [editable]="true"
+        [layout]="'MAPS'"
+        (imageIdsChange)="mapImageIds = $event">
+      </app-image-gallery>
+      <small class="field-hint">Cartes regionales, plans de donjon, schemas utiles a la table.</small>
    </div>

    <div class="field">
--- a/web/src/app/campaigns/chapter-edit/chapter-edit.component.ts
+++ b/web/src/app/campaigns/chapter-edit/chapter-edit.component.ts
@@ -54,6 +54,7 @@ export class ChapterEditComponent implements OnInit, OnDestroy {
  loreId: string | null = null;
  relatedPageIds: string[] = [];
  illustrationImageIds: string[] = [];
+  mapImageIds: string[] = [];

  constructor(
    private fb: FormBuilder,
@@ -111,6 +112,7 @@ export class ChapterEditComponent implements OnInit, OnDestroy {
      this.availablePages = pages;
      this.relatedPageIds = [...(chapter.relatedPageIds ?? [])];
      this.illustrationImageIds = [...(chapter.illustrationImageIds ?? [])];
+      this.mapImageIds = [...(chapter.mapImageIds ?? [])];
      this.form.patchValue({
        name:             chapter.name,
        description:      chapter.description ?? '',
@@ -148,7 +150,8 @@ export class ChapterEditComponent implements OnInit, OnDestroy {
      playerObjectives: this.form.value.playerObjectives,
      narrativeStakes:  this.form.value.narrativeStakes,
      relatedPageIds:   this.relatedPageIds,
-      illustrationImageIds: this.illustrationImageIds
+      illustrationImageIds: this.illustrationImageIds,
+      mapImageIds:      this.mapImageIds
    }).subscribe({
      next: () => this.router.navigate(['/campaigns', this.campaignId, 'arcs', this.arcId, 'chapters', this.chapterId]),
      error: () => console.error('Erreur lors de la sauvegarde')
--- a/web/src/app/campaigns/chapter-view/chapter-view.component.html
+++ b/web/src/app/campaigns/chapter-view/chapter-view.component.html
@@ -18,9 +18,15 @@
    </div>
  </header>

-  <!-- Illustrations -->
+  <!-- Illustrations (rendu editorial magazine) -->
  <section class="view-section" *ngIf="(chapter.illustrationImageIds?.length ?? 0) > 0">
-    <app-image-gallery [imageIds]="chapter.illustrationImageIds ?? []"></app-image-gallery>
+    <app-image-gallery [imageIds]="chapter.illustrationImageIds ?? []" [layout]="'EDITORIAL'"></app-image-gallery>
+  </section>
+
+  <!-- Cartes & plans -->
+  <section class="view-section" *ngIf="(chapter.mapImageIds?.length ?? 0) > 0">
+    <h2 class="view-section-title"><span class="view-section-icon">🗺️</span> Cartes & plans</h2>
+    <app-image-gallery [imageIds]="chapter.mapImageIds ?? []" [layout]="'MAPS'"></app-image-gallery>
  </section>

  <section class="view-section">
--- a/web/src/app/campaigns/scene-edit/scene-edit.component.html
+++ b/web/src/app/campaigns/scene-edit/scene-edit.component.html
@@ -18,15 +18,28 @@

  <form [formGroup]="form" (ngSubmit)="submit()" class="edit-form">

-    <!-- Illustrations (galerie editable) -->
+    <!-- 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">Carte du lieu, portrait des PNJ presents, ambiance visuelle...</small>
+      <small class="field-hint">Portraits des PNJ, ambiance visuelle, scenes evocatrices...</small>
+    </div>
+
+    <!-- Cartes & plans (galerie editable, rendu maps) -->
+    <div class="field">
+      <label>Cartes &amp; plans</label>
+      <app-image-gallery
+        [imageIds]="mapImageIds"
+        [editable]="true"
+        [layout]="'MAPS'"
+        (imageIdsChange)="mapImageIds = $event">
+      </app-image-gallery>
+      <small class="field-hint">Plans du lieu, cartes tactiques, schemas utilisables a la table.</small>
    </div>

    <div class="field">
--- a/web/src/app/campaigns/scene-edit/scene-edit.component.ts
+++ b/web/src/app/campaigns/scene-edit/scene-edit.component.ts
@@ -53,6 +53,7 @@ export class SceneEditComponent implements OnInit, OnDestroy {
  loreId: string | null = null;
  relatedPageIds: string[] = [];
  illustrationImageIds: string[] = [];
+  mapImageIds: string[] = [];

  /** Scènes du chapitre courant (hors scène éditée) — alimente le dropdown des cibles. */
  siblingScenes: Scene[] = [];
@@ -129,6 +130,7 @@ export class SceneEditComponent implements OnInit, OnDestroy {
      this.availablePages = pages;
      this.relatedPageIds = [...(scene.relatedPageIds ?? [])];
      this.illustrationImageIds = [...(scene.illustrationImageIds ?? [])];
+      this.mapImageIds = [...(scene.mapImageIds ?? [])];
      this.siblingScenes = chapterScenes.filter(s => s.id !== this.sceneId);
      this.branches = (scene.branches ?? []).map(b => ({ ...b }));
      this.form.patchValue({
@@ -179,6 +181,7 @@ export class SceneEditComponent implements OnInit, OnDestroy {
      enemies:              this.form.value.enemies,
      relatedPageIds:       this.relatedPageIds,
      illustrationImageIds: this.illustrationImageIds,
+      mapImageIds:          this.mapImageIds,
      branches:             this.branches
    }).subscribe({
      next: () => this.router.navigate(['/campaigns', this.campaignId, 'arcs', this.arcId, 'chapters', this.chapterId, 'scenes', this.sceneId]),
--- a/web/src/app/campaigns/scene-view/scene-view.component.html
+++ b/web/src/app/campaigns/scene-view/scene-view.component.html
@@ -13,9 +13,15 @@
    </div>
  </header>

-  <!-- Illustrations -->
+  <!-- Illustrations (rendu editorial magazine) -->
  <section class="view-section" *ngIf="(scene.illustrationImageIds?.length ?? 0) > 0">
-    <app-image-gallery [imageIds]="scene.illustrationImageIds ?? []"></app-image-gallery>
+    <app-image-gallery [imageIds]="scene.illustrationImageIds ?? []" [layout]="'EDITORIAL'"></app-image-gallery>
+  </section>
+
+  <!-- Cartes & plans -->
+  <section class="view-section" *ngIf="(scene.mapImageIds?.length ?? 0) > 0">
+    <h2 class="view-section-title"><span class="view-section-icon">🗺️</span> Cartes & plans</h2>
+    <app-image-gallery [imageIds]="scene.mapImageIds ?? []" [layout]="'MAPS'"></app-image-gallery>
  </section>

  <!-- Description courte -->