Changement sur le Readme

Ajout d'une partie spécifique pour des PNJ dans la partie campagne
2026-04-27 15:48:04 +02:00
parent aaebeaa547
commit 389392fd1d
80 changed files with 1771 additions and 719 deletions
--- a/web/src/app/campaigns/npc/npc-edit/npc-edit.component.html
+++ b/web/src/app/campaigns/npc/npc-edit/npc-edit.component.html
@@ -0,0 +1,82 @@
+<div class="ne-page">
+
+  <div class="ne-header">
+    <button class="btn-back" (click)="back()">
+      <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
+      Retour à la campagne
+    </button>
+    <div class="header-row">
+      <h1>
+        <lucide-icon [img]="Drama" [size]="22"></lucide-icon>
+        {{ npcId ? 'Éditer le PNJ' : 'Nouveau PNJ' }}
+      </h1>
+      <button
+        *ngIf="npcId"
+        type="button"
+        class="btn-ai"
+        (click)="toggleChat()"
+        [class.active]="chatOpen"
+        title="Ouvrir l'Assistant IA pour dialoguer autour de ce PNJ">
+        <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
+        Assistant IA
+      </button>
+    </div>
+  </div>
+
+  <div class="ne-form">
+
+    <div class="field">
+      <label>Nom du PNJ *</label>
+      <input
+        type="text"
+        [(ngModel)]="name"
+        name="name"
+        placeholder="Ex: Borin le forgeron, Dame Elara, Kael l'aubergiste..."
+      />
+    </div>
+
+    <div class="field content-field">
+      <label>Fiche (markdown)</label>
+      <p class="hint">
+        Tout en markdown libre : apparence, motivations, faction, secrets, stats, notes MJ…
+        À terme, l'IA pourra exploiter ces infos pour incarner le PNJ avec cohérence dans les scènes.
+      </p>
+      <textarea
+        [(ngModel)]="markdownContent"
+        name="markdownContent"
+        rows="22"
+        placeholder="# Borin le forgeron&#10;&#10;**Race :** Nain&#10;**Faction :** Clan Feuillefer&#10;**Statut :** Vivant&#10;&#10;## Apparence&#10;Barbe rousse tressée, tablier de cuir brûlé...&#10;&#10;## Motivations&#10;Venger son clan décimé par les orcs il y a 10 hivers.&#10;&#10;## Notes MJ (secret)&#10;Connaît l'emplacement du marteau de Durin..."
+      ></textarea>
+    </div>
+
+    <div class="actions">
+      <button type="button" class="btn-primary" [disabled]="!name.trim()" (click)="submit()">
+        <lucide-icon [img]="Save" [size]="16"></lucide-icon>
+        {{ npcId ? 'Enregistrer' : 'Créer' }}
+      </button>
+      <button type="button" class="btn-secondary" (click)="back()">Annuler</button>
+      <span class="spacer"></span>
+      <button
+        *ngIf="npcId"
+        type="button"
+        class="btn-danger"
+        (click)="deleteNpc()">
+        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+        Supprimer
+      </button>
+    </div>
+
+  </div>
+
+</div>
+
+<app-ai-chat-drawer
+  *ngIf="npcId && campaignId"
+  [campaignId]="campaignId"
+  entityType="npc"
+  [entityId]="npcId"
+  [isOpen]="chatOpen"
+  welcomeMessage="Je vois cette fiche de PNJ. Demande-moi de proposer apparence, motivations, secrets, ou répliques signatures."
+  [quickSuggestions]="chatQuickSuggestions"
+  (close)="chatOpen = false">
+</app-ai-chat-drawer>
--- a/web/src/app/campaigns/npc/npc-edit/npc-edit.component.scss
+++ b/web/src/app/campaigns/npc/npc-edit/npc-edit.component.scss
@@ -0,0 +1,157 @@
+.ne-page {
+  padding: 2rem 3rem;
+  color: #e5e7eb;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.ne-header {
+  margin-bottom: 2rem;
+
+  .header-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+  }
+
+  h1 {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 1.75rem;
+    color: white;
+    margin: 0.75rem 0 0;
+  }
+}
+
+.btn-ai {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  background: rgba(167, 139, 250, 0.08);
+  border: 1px solid rgba(167, 139, 250, 0.4);
+  color: #a78bfa;
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: all 0.15s;
+
+  &:hover { background: rgba(167, 139, 250, 0.15); border-color: #a78bfa; }
+  &.active { background: #a78bfa; color: #0b1220; }
+}
+
+.btn-back {
+  background: transparent;
+  border: none;
+  color: #9ca3af;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0;
+  font-size: 0.85rem;
+
+  &:hover { color: #e5e7eb; }
+}
+
+.ne-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+
+  label {
+    color: #e5e7eb;
+    font-size: 0.875rem;
+    font-weight: 500;
+    margin-bottom: 0.4rem;
+  }
+
+  .hint {
+    color: #6b7280;
+    font-size: 0.8rem;
+    margin: 0.4rem 0 0.5rem;
+  }
+
+  input[type="text"], textarea {
+    background: #0b1220;
+    border: 1px solid #1f2937;
+    border-radius: 8px;
+    color: #e5e7eb;
+    padding: 0.6rem 0.75rem;
+    font-size: 0.95rem;
+    font-family: inherit;
+
+    &:focus {
+      outline: none;
+      border-color: #a78bfa;
+    }
+  }
+}
+
+.content-field textarea {
+  font-family: 'Fira Code', 'Cascadia Code', monospace;
+  font-size: 0.85rem;
+  line-height: 1.5;
+  resize: vertical;
+}
+
+.actions {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 1rem;
+  align-items: center;
+
+  .spacer { flex: 1; }
+}
+
+.btn-primary {
+  background: #a78bfa;
+  color: #0b1220;
+  border: none;
+  padding: 0.6rem 1.25rem;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+
+  &:disabled { opacity: 0.5; cursor: not-allowed; }
+  &:hover:not(:disabled) { background: #c4b5fd; }
+}
+
+.btn-secondary {
+  background: transparent;
+  border: 1px solid #1f2937;
+  color: #9ca3af;
+  padding: 0.6rem 1.25rem;
+  border-radius: 8px;
+  cursor: pointer;
+
+  &:hover { border-color: #374151; color: #e5e7eb; }
+}
+
+.btn-danger {
+  background: transparent;
+  border: 1px solid rgba(248, 113, 113, 0.3);
+  color: #f87171;
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 0.875rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+
+  &:hover {
+    border-color: #f87171;
+    background: rgba(248, 113, 113, 0.08);
+  }
+}
--- a/web/src/app/campaigns/npc/npc-edit/npc-edit.component.ts
+++ b/web/src/app/campaigns/npc/npc-edit/npc-edit.component.ts
@@ -0,0 +1,109 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { LucideAngularModule, Save, ArrowLeft, Drama, Trash2, Sparkles } from 'lucide-angular';
+import { NpcService } from '../../../services/npc.service';
+import { AiChatDrawerComponent } from '../../../shared/ai-chat-drawer/ai-chat-drawer.component';
+
+/**
+ * Éditeur plein écran d'une fiche de PNJ.
+ * Double rôle création/édition :
+ *  - `/campaigns/:campaignId/npcs/create` → POST
+ *  - `/campaigns/:campaignId/npcs/:npcId/edit` → PUT
+ *
+ * MVP : name + markdown libre. L'Assistant IA est branché en mode édition
+ * (focus entityType="npc") pour proposer apparence, motivations, secrets...
+ */
+@Component({
+  selector: 'app-npc-edit',
+  standalone: true,
+  imports: [CommonModule, FormsModule, LucideAngularModule, AiChatDrawerComponent],
+  templateUrl: './npc-edit.component.html',
+  styleUrls: ['./npc-edit.component.scss']
+})
+export class NpcEditComponent implements OnInit {
+  readonly Save = Save;
+  readonly ArrowLeft = ArrowLeft;
+  readonly Drama = Drama;
+  readonly Trash2 = Trash2;
+  readonly Sparkles = Sparkles;
+
+  /** État drawer chat IA focalisé sur ce PNJ. */
+  chatOpen = false;
+  readonly chatQuickSuggestions = [
+    'Propose une apparence et une posture marquantes',
+    'Suggère 2 motivations et un secret pour ce PNJ',
+    'Imagine 3 répliques signatures qui le caractérisent'
+  ];
+
+  toggleChat(): void { this.chatOpen = !this.chatOpen; }
+
+  campaignId: string | null = null;
+  npcId: string | null = null;
+
+  name = '';
+  markdownContent = '';
+  private order = 0;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private service: NpcService
+  ) {}
+
+  ngOnInit(): void {
+    const params = this.route.snapshot.paramMap;
+    this.campaignId = params.get('campaignId');
+    this.npcId = params.get('npcId');
+
+    if (this.npcId) {
+      this.service.getById(this.npcId).subscribe({
+        next: (n) => {
+          this.name = n.name;
+          this.markdownContent = n.markdownContent ?? '';
+          this.order = n.order ?? 0;
+        },
+        error: () => this.back()
+      });
+    }
+  }
+
+  submit(): void {
+    if (!this.name.trim() || !this.campaignId) return;
+    const req = this.npcId
+      ? this.service.update(this.npcId, {
+          id: this.npcId,
+          name: this.name.trim(),
+          markdownContent: this.markdownContent || null,
+          campaignId: this.campaignId,
+          order: this.order
+        })
+      : this.service.create({
+          name: this.name.trim(),
+          markdownContent: this.markdownContent || null,
+          campaignId: this.campaignId
+        });
+    req.subscribe({
+      next: () => this.back(),
+      error: () => console.error('Erreur sauvegarde Npc')
+    });
+  }
+
+  deleteNpc(): void {
+    if (!this.npcId) return;
+    if (!confirm(`Supprimer la fiche de "${this.name}" ? Cette action est irréversible.`)) return;
+    this.service.delete(this.npcId).subscribe({
+      next: () => this.back(),
+      error: () => console.error('Erreur suppression Npc')
+    });
+  }
+
+  back(): void {
+    if (this.campaignId) {
+      this.router.navigate(['/campaigns', this.campaignId]);
+    } else {
+      this.router.navigate(['/campaigns']);
+    }
+  }
+}