Ajout de la partie "Système de jeu" avec toute la partie stockage de règles de notre jeu.

Ajout de possibilité de stocker des fiches de personnages associés à une campagne également (personnages joueurs pour le moment)
2026-04-22 11:58:50 +02:00
parent bf38b6695f
commit 8f4dd3e9d6
63 changed files with 2840 additions and 36 deletions
--- a/web/src/app/app.routes.ts
+++ b/web/src/app/app.routes.ts
@@ -14,6 +14,8 @@ export const routes: Routes = [
  { path: 'lore/:loreId/pages/:pageId/edit', loadComponent: () => import('./lore/page-edit/page-edit.component').then(m => m.PageEditComponent) },
  { path: 'campaigns', loadComponent: () => import('./campaigns/campaigns.component').then(m => m.CampaignsComponent) },
  { path: 'campaigns/:id', loadComponent: () => import('./campaigns/campaign-detail/campaign-detail.component').then(m => m.CampaignDetailComponent) },
+  { path: 'campaigns/:campaignId/characters/create', loadComponent: () => import('./campaigns/character-edit/character-edit.component').then(m => m.CharacterEditComponent) },
+  { path: 'campaigns/:campaignId/characters/:characterId/edit', loadComponent: () => import('./campaigns/character-edit/character-edit.component').then(m => m.CharacterEditComponent) },
  { path: 'campaigns/:campaignId/arcs/create', loadComponent: () => import('./campaigns/arc-create/arc-create.component').then(m => m.ArcCreateComponent) },
  { path: 'campaigns/:campaignId/arcs/:arcId', loadComponent: () => import('./campaigns/arc-view/arc-view.component').then(m => m.ArcViewComponent) },
  { path: 'campaigns/:campaignId/arcs/:arcId/edit', loadComponent: () => import('./campaigns/arc-edit/arc-edit.component').then(m => m.ArcEditComponent) },
@@ -24,6 +26,9 @@ export const routes: Routes = [
  { path: 'campaigns/:campaignId/arcs/:arcId/chapters/:chapterId/scenes/create', loadComponent: () => import('./campaigns/scene-create/scene-create.component').then(m => m.SceneCreateComponent) },
  { path: 'campaigns/:campaignId/arcs/:arcId/chapters/:chapterId/scenes/:sceneId', loadComponent: () => import('./campaigns/scene-view/scene-view.component').then(m => m.SceneViewComponent) },
  { path: 'campaigns/:campaignId/arcs/:arcId/chapters/:chapterId/scenes/:sceneId/edit', loadComponent: () => import('./campaigns/scene-edit/scene-edit.component').then(m => m.SceneEditComponent) },
+  { path: 'game-systems', loadComponent: () => import('./game-systems/game-systems.component').then(m => m.GameSystemsComponent) },
+  { path: 'game-systems/create', loadComponent: () => import('./game-systems/game-system-edit/game-system-edit.component').then(m => m.GameSystemEditComponent) },
+  { path: 'game-systems/:id/edit', loadComponent: () => import('./game-systems/game-system-edit/game-system-edit.component').then(m => m.GameSystemEditComponent) },
  { path: 'settings', loadComponent: () => import('./settings/settings.component').then(m => m.SettingsComponent) },
  { path: '', redirectTo: '/lore', pathMatch: 'full' }
 ];
--- a/web/src/app/campaigns/campaign-create/campaign-create.component.html
+++ b/web/src/app/campaigns/campaign-create/campaign-create.component.html
@@ -46,6 +46,18 @@
        </p>
      </div>

+      <div class="field">
+        <label>Système de JDR</label>
+        <select formControlName="gameSystemId">
+          <option value="">— Aucun (campagne générique) —</option>
+          <option *ngFor="let gs of availableGameSystems" [value]="gs.id">{{ gs.name }}</option>
+        </select>
+        <p class="hint">
+          Optionnel. Si défini, l'IA injectera les règles du système (classes, combat, lore...)
+          dans ses suggestions pour respecter les mécaniques du JDR.
+        </p>
+      </div>
+
      <div class="info-box">
        <p><strong>💡 Organisation :</strong> Votre campagne sera structurée en :</p>
        <ul>
--- a/web/src/app/campaigns/campaign-create/campaign-create.component.ts
+++ b/web/src/app/campaigns/campaign-create/campaign-create.component.ts
@@ -4,16 +4,19 @@ import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angula
 import { LucideAngularModule, BookCopy, X } from 'lucide-angular';
 import { LoreService } from '../../services/lore.service';
 import { Lore } from '../../services/lore.model';
+import { GameSystemService } from '../../services/game-system.service';
+import { GameSystem } from '../../services/game-system.model';

 /**
 * Payload émis vers le parent à la création d'une campagne.
- * `loreId` est optionnel (null = campagne sans univers associé).
+ * `loreId` et `gameSystemId` sont optionnels (null = non associé).
 */
 export interface CampaignCreatePayload {
  name: string;
  description: string;
  playerCount: number;
  loreId: string | null;
+  gameSystemId: string | null;
 }

@Component({
@@ -33,15 +36,20 @@ export class CampaignCreateComponent implements OnInit {
  form: FormGroup;
  /** Lores disponibles pour association. Chargés à l'ouverture de la modal. */
  availableLores: Lore[] = [];
+  /** GameSystems disponibles pour association. */
+  availableGameSystems: GameSystem[] = [];

-  constructor(private fb: FormBuilder, private loreService: LoreService) {
+  constructor(
+    private fb: FormBuilder,
+    private loreService: LoreService,
+    private gameSystemService: GameSystemService
+  ) {
    this.form = this.fb.group({
-      name:        ['', Validators.required],
-      description: [''],
-      playerCount: [4, [Validators.required, Validators.min(1)]],
-      // Valeur par défaut : chaîne vide = "— Aucun lore associé —".
-      // Le service normalise ensuite ""/null en null côté backend.
-      loreId:      ['']
+      name:         ['', Validators.required],
+      description:  [''],
+      playerCount:  [4, [Validators.required, Validators.min(1)]],
+      loreId:       [''],
+      gameSystemId: ['']
    });
  }

@@ -50,6 +58,10 @@ export class CampaignCreateComponent implements OnInit {
      next: (lores) => this.availableLores = lores,
      error: () => this.availableLores = []
    });
+    this.gameSystemService.getAll().subscribe({
+      next: (gs) => this.availableGameSystems = gs,
+      error: () => this.availableGameSystems = []
+    });
  }

  submit(): void {
@@ -59,7 +71,8 @@ export class CampaignCreateComponent implements OnInit {
      name: raw.name,
      description: raw.description,
      playerCount: raw.playerCount,
-      loreId: raw.loreId ? raw.loreId : null
+      loreId: raw.loreId ? raw.loreId : null,
+      gameSystemId: raw.gameSystemId ? raw.gameSystemId : null
    });
  }

--- a/web/src/app/campaigns/campaign-detail/campaign-detail.component.html
+++ b/web/src/app/campaigns/campaign-detail/campaign-detail.component.html
@@ -53,6 +53,13 @@
        <option *ngFor="let lore of availableLores" [value]="lore.id">{{ lore.name }}</option>
      </select>
    </div>
+    <div class="field">
+      <label>Système de JDR</label>
+      <select [(ngModel)]="editGameSystemId" name="editGameSystemId">
+        <option value="">— Aucun (générique) —</option>
+        <option *ngFor="let gs of availableGameSystems" [value]="gs.id">{{ gs.name }}</option>
+      </select>
+    </div>
    <div class="header-actions">
      <button type="button" class="btn-primary" (click)="saveEdit()" [disabled]="!editName.trim()">
        Sauvegarder
@@ -63,6 +70,35 @@
    </div>
  </div>

+  <div class="characters-section">
+    <div class="section-header">
+      <h2>Personnages joueurs</h2>
+      <button class="btn-add" (click)="createCharacter()">
+        <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
+        Nouveau PJ
+      </button>
+    </div>
+
+    <div class="characters-grid" *ngIf="characters.length > 0">
+      <div class="character-card" *ngFor="let character of characters" (click)="editCharacter(character)">
+        <lucide-icon [img]="User" [size]="20" class="character-icon"></lucide-icon>
+        <div class="character-info">
+          <span class="character-name">{{ character.name }}</span>
+          <span class="character-snippet">{{ characterSnippet(character) }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="empty-state" *ngIf="characters.length === 0">
+      <lucide-icon [img]="User" [size]="40" class="empty-icon"></lucide-icon>
+      <p>Aucun personnage joueur pour le moment.</p>
+      <button class="btn-add-first" (click)="createCharacter()">
+        <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
+        Créer votre premier PJ
+      </button>
+    </div>
+  </div>
+
  <div class="arcs-section">
    <div class="section-header">
      <h2>Arcs narratifs</h2>
--- a/web/src/app/campaigns/campaign-detail/campaign-detail.component.scss
+++ b/web/src/app/campaigns/campaign-detail/campaign-detail.component.scss
@@ -173,6 +173,46 @@
  .arc-meta  { color: #6b7280; font-size: 0.75rem; }
 }

+.characters-section {
+  margin-bottom: 2.5rem;
+}
+
+.characters-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 0.75rem;
+}
+
+.character-card {
+  background: #111827;
+  border: 1px solid #1f2937;
+  border-radius: 10px;
+  padding: 0.9rem 1rem;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  cursor: pointer;
+  transition: border-color 0.2s, transform 0.2s;
+
+  &:hover { border-color: #a78bfa; transform: translateY(-2px); }
+
+  .character-icon { color: #a78bfa; flex-shrink: 0; margin-top: 2px; }
+  .character-info {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    gap: 0.2rem;
+  }
+  .character-name { color: white; font-size: 0.95rem; font-weight: 600; }
+  .character-snippet {
+    color: #6b7280;
+    font-size: 0.8rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
 .empty-state {
  display: flex;
  flex-direction: column;
--- a/web/src/app/campaigns/campaign-detail/campaign-detail.component.ts
+++ b/web/src/app/campaigns/campaign-detail/campaign-detail.component.ts
@@ -2,12 +2,16 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute } from '@angular/router';
 import { FormsModule } from '@angular/forms';
-import { LucideAngularModule, Swords, Plus, Globe, Pencil, Trash2 } from 'lucide-angular';
+import { LucideAngularModule, Swords, Plus, Globe, Pencil, Trash2, User, Dices } from 'lucide-angular';
 import { Router, RouterLink } from '@angular/router';
 import { forkJoin, of } from 'rxjs';
 import { catchError, switchMap, filter, map } from 'rxjs/operators';
 import { CampaignService } from '../../services/campaign.service';
 import { LoreService } from '../../services/lore.service';
+import { GameSystemService } from '../../services/game-system.service';
+import { GameSystem } from '../../services/game-system.model';
+import { CharacterService } from '../../services/character.service';
+import { Character } from '../../services/character.model';
 import { LayoutService, GlobalItem } from '../../services/layout.service';
 import { PageTitleService } from '../../services/page-title.service';
 import { Campaign, Arc } from '../../services/campaign.model';
@@ -27,6 +31,8 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
  readonly Globe = Globe;
  readonly Pencil = Pencil;
  readonly Trash2 = Trash2;
+  readonly User = User;
+  readonly Dices = Dices;

  campaign: Campaign | null = null;
  arcs: Arc[] = [];
@@ -34,18 +40,27 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
  linkedLore: Lore | null = null;
  /** Lores disponibles pour changer l'association en mode édition. */
  availableLores: Lore[] = [];
+  /** GameSystems disponibles pour changer l'association en mode édition. */
+  availableGameSystems: GameSystem[] = [];
+  /** GameSystem associé si `campaign.gameSystemId` est renseigné ; sinon null. */
+  linkedGameSystem: GameSystem | null = null;
+  /** Fiches de personnages (PJ) de la campagne. */
+  characters: Character[] = [];

  /** Mode édition inline. */
  editing = false;
  editName = '';
  editDescription = '';
  editLoreId = '';
+  editGameSystemId = '';

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private campaignService: CampaignService,
    private loreService: LoreService,
+    private gameSystemService: GameSystemService,
+    private characterService: CharacterService,
    private layoutService: LayoutService,
    private pageTitleService: PageTitleService
  ) {}
@@ -68,6 +83,8 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
      this.campaign = campaign;
      this.editing = false;
      this.loadLinkedLore(campaign);
+      this.loadLinkedGameSystem(campaign);
+      this.loadCharacters(campaign.id!);
      this.arcs = treeData.arcs;
      this.showLayout(allCampaigns, treeData);
      this.pageTitleService.set(campaign.name);
@@ -90,6 +107,8 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
      this.campaign = campaign;
      this.editing = false;
      this.loadLinkedLore(campaign);
+      this.loadLinkedGameSystem(campaign);
+      this.loadCharacters(campaign.id!);
      this.arcs = treeData.arcs;
      this.showLayout(allCampaigns, treeData);
      this.pageTitleService.set(campaign.name);
@@ -110,6 +129,47 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
    ).subscribe(lore => this.linkedLore = lore);
  }

+  /** Même logique pour le GameSystem associé : dégradation si supprimé. */
+  private loadLinkedGameSystem(campaign: Campaign): void {
+    if (!campaign.gameSystemId) {
+      this.linkedGameSystem = null;
+      return;
+    }
+    this.gameSystemService.getById(campaign.gameSystemId).pipe(
+      catchError(() => of(null))
+    ).subscribe(gs => this.linkedGameSystem = gs);
+  }
+
+  /** Charge les fiches de personnages (PJ) de la campagne. */
+  private loadCharacters(campaignId: string): void {
+    this.characterService.getByCampaign(campaignId).pipe(
+      catchError(() => of([] as Character[]))
+    ).subscribe(list => this.characters = list);
+  }
+
+  createCharacter(): void {
+    if (!this.campaign) return;
+    this.router.navigate(['/campaigns', this.campaign.id, 'characters', 'create']);
+  }
+
+  editCharacter(character: Character): void {
+    if (!this.campaign || !character.id) return;
+    this.router.navigate(['/campaigns', this.campaign.id, 'characters', character.id, 'edit']);
+  }
+
+  /** Extrait une ligne de résumé depuis le markdown (1re ligne non-vide, non-titre). */
+  characterSnippet(c: Character): string {
+    if (!c.markdownContent) return '(Fiche vide)';
+    const firstMeaningful = c.markdownContent
+      .split('\n')
+      .map(l => l.trim())
+      .find(l => l && !l.startsWith('#'));
+    if (!firstMeaningful) return '(Fiche vide)';
+    return firstMeaningful.length > 80
+      ? firstMeaningful.substring(0, 77) + '…'
+      : firstMeaningful;
+  }
+
  private showLayout(allCampaigns: Campaign[], data: CampaignTreeData): void {
    const campaignId = this.campaign!.id!;
    const globalItems: GlobalItem[] = allCampaigns.map(c => ({
@@ -138,11 +198,16 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
    this.editName = this.campaign.name;
    this.editDescription = this.campaign.description ?? '';
    this.editLoreId = this.campaign.loreId ?? '';
-    // On charge les Lores disponibles pour le select uniquement à l'entrée en mode édition.
+    this.editGameSystemId = this.campaign.gameSystemId ?? '';
+    // On charge les Lores et GameSystems disponibles uniquement à l'entrée en mode édition.
    this.loreService.getAllLores().subscribe({
      next: (lores) => this.availableLores = lores,
      error: () => this.availableLores = []
    });
+    this.gameSystemService.getAll().subscribe({
+      next: (gs) => this.availableGameSystems = gs,
+      error: () => this.availableGameSystems = []
+    });
    this.editing = true;
  }

@@ -156,7 +221,8 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
      name: this.editName.trim(),
      description: this.editDescription,
      playerCount: this.campaign.playerCount ?? 0,
-      loreId: this.editLoreId ? this.editLoreId : null
+      loreId: this.editLoreId ? this.editLoreId : null,
+      gameSystemId: this.editGameSystemId ? this.editGameSystemId : null
    }).subscribe({
      next: (updated) => {
        this.campaign = updated;
--- a/web/src/app/campaigns/character-edit/character-edit.component.html
+++ b/web/src/app/campaigns/character-edit/character-edit.component.html
@@ -0,0 +1,82 @@
+<div class="ce-page">
+
+  <div class="ce-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]="User" [size]="22"></lucide-icon>
+        {{ characterId ? 'Éditer la fiche' : 'Nouveau personnage' }}
+      </h1>
+      <button
+        *ngIf="characterId"
+        type="button"
+        class="btn-ai"
+        (click)="toggleChat()"
+        [class.active]="chatOpen"
+        title="Ouvrir l'Assistant IA pour dialoguer autour de ce PJ">
+        <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
+        Assistant IA
+      </button>
+    </div>
+  </div>
+
+  <div class="ce-form">
+
+    <div class="field">
+      <label>Nom du personnage *</label>
+      <input
+        type="text"
+        [(ngModel)]="name"
+        name="name"
+        placeholder="Ex: Thorin le Grand-Hache, Lyra l'Errante..."
+      />
+    </div>
+
+    <div class="field content-field">
+      <label>Fiche (markdown)</label>
+      <p class="hint">
+        Tout en markdown libre : stats, classe, backstory, équipement, objectifs personnels…
+        L'IA lira ces infos pour rester cohérente quand vous générez des scènes impliquant ce PJ.
+      </p>
+      <textarea
+        [(ngModel)]="markdownContent"
+        name="markdownContent"
+        rows="22"
+        placeholder="# Thorin Grand-Hache&#10;&#10;**Race :** Nain&#10;**Classe :** Guerrier niveau 4&#10;**PV :** 35 / 35&#10;&#10;## Stats&#10;- Force : 16&#10;- Dextérité : 12&#10;...&#10;&#10;## Backstory&#10;Originaire des montagnes du Nord, Thorin a fui son clan après..."
+      ></textarea>
+    </div>
+
+    <div class="actions">
+      <button type="button" class="btn-primary" [disabled]="!name.trim()" (click)="submit()">
+        <lucide-icon [img]="Save" [size]="16"></lucide-icon>
+        {{ characterId ? 'Enregistrer' : 'Créer' }}
+      </button>
+      <button type="button" class="btn-secondary" (click)="back()">Annuler</button>
+      <span class="spacer"></span>
+      <button
+        *ngIf="characterId"
+        type="button"
+        class="btn-danger"
+        (click)="deleteCharacter()">
+        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+        Supprimer
+      </button>
+    </div>
+
+  </div>
+
+</div>
+
+<app-ai-chat-drawer
+  *ngIf="characterId && campaignId"
+  [campaignId]="campaignId"
+  entityType="character"
+  [entityId]="characterId"
+  [isOpen]="chatOpen"
+  welcomeMessage="Je vois cette fiche de personnage. Demande-moi de proposer stats, backstory, équipement ou objectifs personnels."
+  [quickSuggestions]="chatQuickSuggestions"
+  (close)="chatOpen = false">
+</app-ai-chat-drawer>
--- a/web/src/app/campaigns/character-edit/character-edit.component.scss
+++ b/web/src/app/campaigns/character-edit/character-edit.component.scss
@@ -0,0 +1,157 @@
+.ce-page {
+  padding: 2rem 3rem;
+  color: #e5e7eb;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.ce-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; }
+}
+
+.ce-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/character-edit/character-edit.component.ts
+++ b/web/src/app/campaigns/character-edit/character-edit.component.ts
@@ -0,0 +1,110 @@
+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, User, Trash2, Sparkles } from 'lucide-angular';
+import { CharacterService } from '../../services/character.service';
+import { Character } from '../../services/character.model';
+import { AiChatDrawerComponent } from '../../shared/ai-chat-drawer/ai-chat-drawer.component';
+
+/**
+ * Éditeur plein écran d'une fiche de personnage (PJ).
+ * Double rôle création/édition :
+ *  - `/campaigns/:campaignId/characters/create` → POST
+ *  - `/campaigns/:campaignId/characters/:characterId/edit` → PUT
+ *
+ * MVP : name + markdown libre. Évolution prévue vers un template dérivé
+ * du GameSystem de la campagne (stats structurées).
+ */
+@Component({
+  selector: 'app-character-edit',
+  standalone: true,
+  imports: [CommonModule, FormsModule, LucideAngularModule, AiChatDrawerComponent],
+  templateUrl: './character-edit.component.html',
+  styleUrls: ['./character-edit.component.scss']
+})
+export class CharacterEditComponent implements OnInit {
+  readonly Save = Save;
+  readonly ArrowLeft = ArrowLeft;
+  readonly User = User;
+  readonly Trash2 = Trash2;
+  readonly Sparkles = Sparkles;
+
+  /** État drawer chat IA focalisé sur ce PJ. */
+  chatOpen = false;
+  readonly chatQuickSuggestions = [
+    'Propose une backstory cohérente avec l\'univers',
+    'Suggère 3 objectifs personnels pour ce personnage',
+    'Aide-moi à équilibrer les stats de combat'
+  ];
+
+  toggleChat(): void { this.chatOpen = !this.chatOpen; }
+
+  campaignId: string | null = null;
+  characterId: string | null = null;
+
+  name = '';
+  markdownContent = '';
+  private order = 0;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private service: CharacterService
+  ) {}
+
+  ngOnInit(): void {
+    const params = this.route.snapshot.paramMap;
+    this.campaignId = params.get('campaignId');
+    this.characterId = params.get('characterId');
+
+    if (this.characterId) {
+      this.service.getById(this.characterId).subscribe({
+        next: (c) => {
+          this.name = c.name;
+          this.markdownContent = c.markdownContent ?? '';
+          this.order = c.order ?? 0;
+        },
+        error: () => this.back()
+      });
+    }
+  }
+
+  submit(): void {
+    if (!this.name.trim() || !this.campaignId) return;
+    const req = this.characterId
+      ? this.service.update(this.characterId, {
+          id: this.characterId,
+          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 Character')
+    });
+  }
+
+  deleteCharacter(): void {
+    if (!this.characterId) return;
+    if (!confirm(`Supprimer la fiche de "${this.name}" ? Cette action est irréversible.`)) return;
+    this.service.delete(this.characterId).subscribe({
+      next: () => this.back(),
+      error: () => console.error('Erreur suppression Character')
+    });
+  }
+
+  back(): void {
+    if (this.campaignId) {
+      this.router.navigate(['/campaigns', this.campaignId]);
+    } else {
+      this.router.navigate(['/campaigns']);
+    }
+  }
+}
--- a/web/src/app/game-systems/game-system-edit/game-system-edit.component.html
+++ b/web/src/app/game-systems/game-system-edit/game-system-edit.component.html
@@ -0,0 +1,103 @@
+<div class="gse-page">
+
+  <div class="gse-header">
+    <button class="btn-back" (click)="back()">
+      <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
+      Retour à la liste
+    </button>
+    <h1>
+      <lucide-icon [img]="Dices" [size]="22"></lucide-icon>
+      {{ id ? 'Éditer le système' : 'Nouveau système de JDR' }}
+    </h1>
+  </div>
+
+  <div class="gse-form">
+
+    <div class="field">
+      <label>Nom *</label>
+      <input type="text" [(ngModel)]="name" name="name" placeholder="Ex: Nimble, D&D 5.1 SRD, Mon Homebrew..." />
+    </div>
+
+    <div class="field">
+      <label>Description courte</label>
+      <textarea [(ngModel)]="description" name="description" rows="2" placeholder="En une ligne, de quoi parle ce système ?"></textarea>
+    </div>
+
+    <div class="field">
+      <label>Auteur</label>
+      <input type="text" [(ngModel)]="author" name="author" placeholder="Ex: Hasbro, Homebrew, moi-même..." />
+    </div>
+
+    <!-- Sections de règles -->
+    <div class="sections-area">
+      <h2 class="sections-title">Règles du système</h2>
+      <p class="sections-hint">
+        Une section = un thème. L'IA injectera automatiquement les sections pertinentes
+        selon ce qu'elle génère (combat → Combat/Monstres, PNJ → Classes, arc → Lore/Factions).
+      </p>
+
+      <div class="section-list">
+        <div class="section-card" *ngFor="let section of sections; let i = index" [class.collapsed]="section.collapsed">
+
+          <div class="section-head">
+            <button type="button" class="btn-collapse" (click)="toggleCollapse(section)">
+              <lucide-icon [img]="section.collapsed ? ChevronRight : ChevronDown" [size]="16"></lucide-icon>
+            </button>
+            <input
+              type="text"
+              class="section-title-input"
+              [(ngModel)]="section.title"
+              [name]="'title-' + i"
+              placeholder="Nom de la section (ex: Combat)"
+            />
+            <button type="button" class="btn-remove" (click)="removeSection(i)" title="Supprimer cette section">
+              <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+            </button>
+          </div>
+
+          <textarea
+            *ngIf="!section.collapsed"
+            class="section-content"
+            [(ngModel)]="section.content"
+            [name]="'content-' + i"
+            rows="6"
+            placeholder="Décrivez les règles de cette section..."
+          ></textarea>
+
+        </div>
+
+        <div *ngIf="sections.length === 0" class="empty-hint">
+          Aucune section pour l'instant — ajoutez-en une avec les boutons ci-dessous.
+        </div>
+      </div>
+
+      <div class="add-row">
+        <span class="add-label">Ajouter une section :</span>
+        <button
+          type="button"
+          *ngFor="let name of suggestedSections"
+          class="chip"
+          [class.disabled]="isSectionUsed(name)"
+          (click)="addSuggested(name)"
+          [disabled]="isSectionUsed(name)">
+          <lucide-icon [img]="Plus" [size]="12"></lucide-icon>
+          {{ name }}
+        </button>
+        <button type="button" class="chip chip-custom" (click)="addBlank()">
+          <lucide-icon [img]="Plus" [size]="12"></lucide-icon>
+          Autre…
+        </button>
+      </div>
+    </div>
+
+    <div class="actions">
+      <button type="button" class="btn-primary" [disabled]="!name.trim()" (click)="submit()">
+        <lucide-icon [img]="Save" [size]="16"></lucide-icon>
+        {{ id ? 'Enregistrer' : 'Créer' }}
+      </button>
+      <button type="button" class="btn-secondary" (click)="back()">Annuler</button>
+    </div>
+
+  </div>
+
+</div>
--- a/web/src/app/game-systems/game-system-edit/game-system-edit.component.scss
+++ b/web/src/app/game-systems/game-system-edit/game-system-edit.component.scss
@@ -0,0 +1,256 @@
+.gse-page {
+  padding: 2rem 3rem;
+  color: #e5e7eb;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.gse-header {
+  margin-bottom: 2rem;
+
+  h1 {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 1.75rem;
+    color: white;
+    margin: 0.75rem 0 0;
+  }
+}
+
+.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; }
+}
+
+.gse-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;
+  }
+
+  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;
+    }
+  }
+
+  textarea { resize: vertical; }
+}
+
+/* ─── Sections ──────────────────────────────────────────────── */
+
+.sections-area {
+  border-top: 1px solid #1f2937;
+  padding-top: 1.5rem;
+  margin-top: 0.5rem;
+}
+
+.sections-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: white;
+  margin: 0 0 0.25rem;
+}
+
+.sections-hint {
+  color: #6b7280;
+  font-size: 0.85rem;
+  margin: 0 0 1rem;
+}
+
+.section-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 1.25rem;
+}
+
+.section-card {
+  background: #0b1220;
+  border: 1px solid #1f2937;
+  border-radius: 10px;
+  overflow: hidden;
+  transition: border-color 0.15s;
+
+  &:focus-within { border-color: #374151; }
+  &.collapsed { background: #0a0f1a; }
+}
+
+.section-head {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.5rem 0.5rem 0.25rem;
+}
+
+.btn-collapse {
+  background: transparent;
+  border: none;
+  color: #6b7280;
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  border-radius: 4px;
+
+  &:hover { color: #e5e7eb; }
+}
+
+.section-title-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: white;
+  font-size: 1rem;
+  font-weight: 500;
+  padding: 0.3rem 0.25rem;
+
+  &:focus { outline: none; }
+  &::placeholder { color: #4b5563; font-weight: 400; font-style: italic; }
+}
+
+.btn-remove {
+  background: transparent;
+  border: none;
+  color: #6b7280;
+  cursor: pointer;
+  padding: 4px 6px;
+  border-radius: 4px;
+  display: flex;
+
+  &:hover { color: #f87171; background: rgba(248, 113, 113, 0.08); }
+}
+
+.section-content {
+  width: 100%;
+  background: transparent;
+  border: none;
+  border-top: 1px solid #1f2937;
+  color: #d1d5db;
+  padding: 0.75rem 1rem;
+  font-size: 0.9rem;
+  font-family: inherit;
+  line-height: 1.5;
+  resize: vertical;
+  box-sizing: border-box;
+
+  &:focus { outline: none; }
+}
+
+.empty-hint {
+  color: #6b7280;
+  font-size: 0.85rem;
+  font-style: italic;
+  text-align: center;
+  padding: 1.5rem;
+  border: 1px dashed #1f2937;
+  border-radius: 10px;
+}
+
+/* ─── Chips d'ajout ─────────────────────────────────────────── */
+
+.add-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.add-label {
+  color: #9ca3af;
+  font-size: 0.85rem;
+  margin-right: 0.25rem;
+}
+
+.chip {
+  background: #111827;
+  border: 1px solid #1f2937;
+  color: #d1d5db;
+  padding: 0.3rem 0.7rem;
+  border-radius: 999px;
+  cursor: pointer;
+  font-size: 0.8rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  transition: all 0.15s;
+
+  &:hover:not(:disabled) {
+    border-color: #a78bfa;
+    color: white;
+  }
+
+  &.disabled, &:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+  }
+
+  &.chip-custom {
+    border-style: dashed;
+    color: #a78bfa;
+  }
+}
+
+/* ─── Actions ──────────────────────────────────────────────── */
+
+.actions {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 0.5rem;
+}
+
+.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; }
+}
--- a/web/src/app/game-systems/game-system-edit/game-system-edit.component.ts
+++ b/web/src/app/game-systems/game-system-edit/game-system-edit.component.ts
@@ -0,0 +1,170 @@
+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, Dices, Plus, Trash2, ChevronDown, ChevronRight } from 'lucide-angular';
+import { GameSystemService } from '../../services/game-system.service';
+
+/**
+ * Éditeur plein écran d'un GameSystem. Rôle double création/édition :
+ *  - `/game-systems/create` → POST au submit
+ *  - `/game-systems/:id/edit` → PUT au submit
+ *
+ * UI par sections : au lieu d'un gros textarea de markdown, on présente
+ * une liste de cartes repliables (une par section H2). Au load on parse
+ * le markdown existant, au submit on le reconstruit. Les noms suggérés
+ * (Combat, Classes…) guident sans imposer — c'est le même mapping que
+ * le backend utilise pour filtrer les sections à injecter dans l'IA.
+ */
+interface RuleSection {
+  title: string;
+  content: string;
+  collapsed: boolean;
+}
+
+/**
+ * Sections suggérées : mécaniques de jeu uniquement. Lore/factions/PNJ
+ * appartiennent au module Lore de LoreMind (décrit l'univers de l'utilisateur),
+ * pas au GameSystem (décrit les règles). Séparation volontaire.
+ */
+const SUGGESTED_SECTIONS = [
+  'Combat', 'Classes', 'Stats', 'Magie', 'Monstres', 'Progression'
+];
+
+@Component({
+  selector: 'app-game-system-edit',
+  standalone: true,
+  imports: [CommonModule, FormsModule, LucideAngularModule],
+  templateUrl: './game-system-edit.component.html',
+  styleUrls: ['./game-system-edit.component.scss']
+})
+export class GameSystemEditComponent implements OnInit {
+  readonly Save = Save;
+  readonly ArrowLeft = ArrowLeft;
+  readonly Dices = Dices;
+  readonly Plus = Plus;
+  readonly Trash2 = Trash2;
+  readonly ChevronDown = ChevronDown;
+  readonly ChevronRight = ChevronRight;
+
+  id: string | null = null;
+
+  name = '';
+  description = '';
+  author = '';
+  sections: RuleSection[] = [];
+
+  readonly suggestedSections = SUGGESTED_SECTIONS;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private service: GameSystemService
+  ) {}
+
+  ngOnInit(): void {
+    this.id = this.route.snapshot.paramMap.get('id');
+    if (this.id) {
+      this.service.getById(this.id).subscribe({
+        next: (gs) => {
+          this.name = gs.name;
+          this.description = gs.description ?? '';
+          this.author = gs.author ?? '';
+          this.sections = this.parseMarkdown(gs.rulesMarkdown ?? '');
+        },
+        error: () => this.back()
+      });
+    }
+  }
+
+  /** Noms de section déjà utilisés — pour désactiver les suggestions en doublon. */
+  isSectionUsed(title: string): boolean {
+    const lower = title.toLowerCase();
+    return this.sections.some(s => s.title.toLowerCase() === lower);
+  }
+
+  /** Ajoute une section avec un nom suggéré. */
+  addSuggested(title: string): void {
+    if (this.isSectionUsed(title)) return;
+    this.sections.push({ title, content: '', collapsed: false });
+  }
+
+  /** Ajoute une section vierge (titre à remplir). */
+  addBlank(): void {
+    this.sections.push({ title: '', content: '', collapsed: false });
+  }
+
+  removeSection(index: number): void {
+    this.sections.splice(index, 1);
+  }
+
+  toggleCollapse(section: RuleSection): void {
+    section.collapsed = !section.collapsed;
+  }
+
+  submit(): void {
+    if (!this.name.trim()) return;
+    const payload = {
+      name: this.name.trim(),
+      description: this.description.trim() || null,
+      author: this.author.trim() || null,
+      rulesMarkdown: this.serializeMarkdown(),
+      isPublic: false
+    };
+    const req = this.id
+      ? this.service.update(this.id, payload)
+      : this.service.create(payload);
+    req.subscribe({
+      next: () => this.back(),
+      error: () => console.error('Erreur sauvegarde GameSystem')
+    });
+  }
+
+  back(): void {
+    this.router.navigate(['/game-systems']);
+  }
+
+  // --- Parse / Serialize markdown ------------------------------------------
+
+  /**
+   * Découpe un markdown par titres H2 en sections. Doit rester cohérent avec
+   * le parser Java côté backend (regex `^##\s+…$`). Le texte avant le premier
+   * H2 est volontairement perdu — le backend l'ignore aussi pour l'injection IA.
+   */
+  private parseMarkdown(markdown: string): RuleSection[] {
+    if (!markdown) return [];
+    const sections: RuleSection[] = [];
+    const lines = markdown.split('\n');
+    let current: RuleSection | null = null;
+    const buffer: string[] = [];
+
+    const flush = () => {
+      if (current) {
+        current.content = buffer.join('\n').trim();
+        sections.push(current);
+      }
+      buffer.length = 0;
+    };
+
+    for (const line of lines) {
+      const match = line.match(/^##\s+(.+?)\s*$/);
+      if (match) {
+        flush();
+        current = { title: match[1].trim(), content: '', collapsed: false };
+      } else if (current) {
+        buffer.push(line);
+      }
+    }
+    flush();
+    return sections;
+  }
+
+  /** Reconstruit le markdown à partir des sections (ignore les sections vides). */
+  private serializeMarkdown(): string | null {
+    const valid = this.sections.filter(s => s.title.trim() || s.content.trim());
+    if (valid.length === 0) return null;
+    return valid
+      .map(s => `## ${s.title.trim() || 'Sans titre'}\n${s.content.trim()}`)
+      .join('\n\n');
+  }
+}
--- a/web/src/app/game-systems/game-systems.component.html
+++ b/web/src/app/game-systems/game-systems.component.html
@@ -0,0 +1,39 @@
+<div class="gs-page">
+
+  <div class="gs-hero">
+    <lucide-icon [img]="Dices" [size]="56" class="hero-icon"></lucide-icon>
+    <h1>Systèmes de JDR</h1>
+    <p class="hero-subtitle">Les règles que l'IA connaîtra pour vos campagnes</p>
+  </div>
+
+  <div class="gs-grid">
+
+    <div class="gs-card" *ngFor="let gs of gameSystems" (click)="edit(gs.id!)">
+      <div class="card-header">
+        <h2>{{ gs.name }}</h2>
+        <div class="card-actions">
+          <button class="icon-btn" (click)="delete(gs, $event)" title="Supprimer">
+            <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+          </button>
+        </div>
+      </div>
+      <p class="card-description">{{ gs.description || '(Pas de description)' }}</p>
+      <div class="card-footer">
+        <span *ngIf="gs.author" class="author">par {{ gs.author }}</span>
+        <span *ngIf="gs.isPublic" class="badge-public">public</span>
+      </div>
+    </div>
+
+    <div class="gs-card card-new" (click)="create()">
+      <div class="new-icon">
+        <lucide-icon [img]="Plus" [size]="20"></lucide-icon>
+      </div>
+      <h2>Nouveau système</h2>
+      <p class="card-description">Saisir les règles d'un JDR (markdown)</p>
+    </div>
+
+  </div>
+
+  <p class="tip">💡 Astuce : organisez vos règles par sections avec des titres <code>## Combat</code>, <code>## Classes</code>, <code>## Lore</code>… Le système injectera les sections pertinentes selon ce que l'IA doit générer.</p>
+
+</div>
--- a/web/src/app/game-systems/game-systems.component.scss
+++ b/web/src/app/game-systems/game-systems.component.scss
@@ -0,0 +1,111 @@
+.gs-page {
+  padding: 2rem 3rem;
+  color: #e5e7eb;
+}
+
+.gs-hero {
+  text-align: center;
+  margin-bottom: 2.5rem;
+
+  .hero-icon { color: #a78bfa; margin-bottom: 0.75rem; }
+  h1 { font-size: 2rem; margin: 0.5rem 0 0.25rem; color: white; }
+  .hero-subtitle { color: #9ca3af; margin: 0; }
+}
+
+.gs-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1.25rem;
+}
+
+.gs-card {
+  background: #111827;
+  border: 1px solid #1f2937;
+  border-radius: 12px;
+  padding: 1.25rem;
+  cursor: pointer;
+  transition: border-color 0.2s, transform 0.2s;
+
+  &:hover {
+    border-color: #a78bfa;
+    transform: translateY(-2px);
+  }
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 0.5rem;
+
+    h2 { color: white; font-size: 1.1rem; margin: 0; }
+  }
+
+  .card-description {
+    color: #9ca3af;
+    font-size: 0.9rem;
+    min-height: 2.5em;
+  }
+
+  .card-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 0.75rem;
+    font-size: 0.8rem;
+
+    .author { color: #6b7280; }
+    .badge-public {
+      background: #1e3a8a;
+      color: #bfdbfe;
+      padding: 2px 8px;
+      border-radius: 10px;
+    }
+  }
+}
+
+.icon-btn {
+  background: transparent;
+  border: none;
+  color: #6b7280;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  display: flex;
+
+  &:hover { color: #f87171; background: rgba(248, 113, 113, 0.1); }
+}
+
+.card-new {
+  border-style: dashed;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+
+  .new-icon {
+    background: rgba(167, 139, 250, 0.1);
+    color: #a78bfa;
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 0.75rem;
+  }
+  h2 { margin: 0 0 0.25rem; color: white; }
+}
+
+.tip {
+  margin-top: 2rem;
+  color: #6b7280;
+  font-size: 0.85rem;
+
+  code {
+    background: #1f2937;
+    padding: 1px 6px;
+    border-radius: 4px;
+    color: #a78bfa;
+  }
+}
--- a/web/src/app/game-systems/game-systems.component.ts
+++ b/web/src/app/game-systems/game-systems.component.ts
@@ -0,0 +1,56 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+import { LucideAngularModule, Dices, Plus, Pencil, Trash2 } from 'lucide-angular';
+import { GameSystemService } from '../services/game-system.service';
+import { GameSystem } from '../services/game-system.model';
+
+@Component({
+  selector: 'app-game-systems',
+  standalone: true,
+  imports: [CommonModule, LucideAngularModule],
+  templateUrl: './game-systems.component.html',
+  styleUrls: ['./game-systems.component.scss']
+})
+export class GameSystemsComponent implements OnInit {
+  readonly Dices = Dices;
+  readonly Plus = Plus;
+  readonly Pencil = Pencil;
+  readonly Trash2 = Trash2;
+
+  gameSystems: GameSystem[] = [];
+
+  constructor(
+    private router: Router,
+    private gameSystemService: GameSystemService
+  ) {}
+
+  ngOnInit(): void {
+    this.load();
+  }
+
+  load(): void {
+    this.gameSystemService.getAll().subscribe({
+      next: (data) => this.gameSystems = data,
+      error: () => this.gameSystems = []
+    });
+  }
+
+  create(): void {
+    this.router.navigate(['/game-systems/create']);
+  }
+
+  edit(id: string): void {
+    this.router.navigate(['/game-systems', id, 'edit']);
+  }
+
+  delete(system: GameSystem, event: MouseEvent): void {
+    event.stopPropagation();
+    if (!system.id) return;
+    if (!confirm(`Supprimer le système "${system.name}" ? Les campagnes qui l'utilisent ne seront plus associées à aucun système.`)) return;
+    this.gameSystemService.delete(system.id).subscribe({
+      next: () => this.load(),
+      error: () => console.error('Erreur suppression GameSystem')
+    });
+  }
+}
--- a/web/src/app/services/ai-chat.service.ts
+++ b/web/src/app/services/ai-chat.service.ts
@@ -41,7 +41,7 @@ export type ChatStreamEvent =
 * décode ligne par ligne pour extraire les événements SSE.
 */
 /** Type d'entité narrative focus pour le chat Campagne. */
-export type NarrativeEntityType = 'arc' | 'chapter' | 'scene';
+export type NarrativeEntityType = 'arc' | 'chapter' | 'scene' | 'character';

@Injectable({ providedIn: 'root' })
 export class AiChatService {
--- a/web/src/app/services/campaign.model.ts
+++ b/web/src/app/services/campaign.model.ts
@@ -8,6 +8,8 @@ export interface Campaign {
  chapterCount?: number;
  /** ID du Lore associé (weak reference cross-context). `null` = pas d'univers lié. */
  loreId?: string | null;
+  /** ID du GameSystem associé (weak reference cross-context). `null` = campagne générique. */
+  gameSystemId?: string | null;
 }

 // Interface pour la création de Campaign (sans id)
@@ -16,6 +18,7 @@ export interface CampaignCreate {
  description: string;
  playerCount: number;
  loreId?: string | null;
+  gameSystemId?: string | null;
 }

 export interface Arc {
--- a/web/src/app/services/character.model.ts
+++ b/web/src/app/services/character.model.ts
@@ -0,0 +1,18 @@
+/**
+ * Fiche de personnage joueur (PJ) d'une campagne.
+ * MVP : markdownContent libre. Évolution prévue vers des fiches templatées
+ * par GameSystem (stats structurées selon le JDR joué).
+ */
+export interface Character {
+  id?: string;
+  name: string;
+  markdownContent?: string | null;
+  campaignId: string;
+  order?: number;
+}
+
+export interface CharacterCreate {
+  name: string;
+  markdownContent?: string | null;
+  campaignId: string;
+}
--- a/web/src/app/services/character.service.ts
+++ b/web/src/app/services/character.service.ts
@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Character, CharacterCreate } from './character.model';
+
+/**
+ * Service HTTP pour les fiches de personnages (PJ) d'une campagne.
+ */
+@Injectable({ providedIn: 'root' })
+export class CharacterService {
+  private apiUrl = 'http://localhost:8080/api/characters';
+
+  constructor(private http: HttpClient) {}
+
+  getByCampaign(campaignId: string): Observable<Character[]> {
+    return this.http.get<Character[]>(`${this.apiUrl}/campaign/${campaignId}`);
+  }
+
+  getById(id: string): Observable<Character> {
+    return this.http.get<Character>(`${this.apiUrl}/${id}`);
+  }
+
+  create(payload: CharacterCreate): Observable<Character> {
+    return this.http.post<Character>(this.apiUrl, payload);
+  }
+
+  update(id: string, payload: Character): Observable<Character> {
+    return this.http.put<Character>(`${this.apiUrl}/${id}`, payload);
+  }
+
+  delete(id: string): Observable<void> {
+    return this.http.delete<void>(`${this.apiUrl}/${id}`);
+  }
+}
--- a/web/src/app/services/conversation.model.ts
+++ b/web/src/app/services/conversation.model.ts
@@ -26,7 +26,7 @@ export interface Conversation {
 export interface ConversationContext {
  loreId?: string | null;
  campaignId?: string | null;
-  entityType?: 'page' | 'arc' | 'chapter' | 'scene' | null;
+  entityType?: 'page' | 'arc' | 'chapter' | 'scene' | 'character' | null;
  entityId?: string | null;
 }

--- a/web/src/app/services/game-system.model.ts
+++ b/web/src/app/services/game-system.model.ts
@@ -0,0 +1,24 @@
+/**
+ * Interface TypeScript pour GameSystemDTO (jumeau du DTO Java).
+ *
+ * rulesMarkdown : markdown monolithique, sections découpées par titres H2
+ * (## Combat, ## Classes, etc.). Le découpage et la sélection des sections
+ * à injecter dans le prompt IA sont faits côté backend Java.
+ */
+export interface GameSystem {
+  id?: string;
+  name: string;
+  description?: string | null;
+  rulesMarkdown?: string | null;
+  author?: string | null;
+  isPublic?: boolean;
+}
+
+/** Payload de création/mise à jour (sans id). */
+export interface GameSystemCreate {
+  name: string;
+  description?: string | null;
+  rulesMarkdown?: string | null;
+  author?: string | null;
+  isPublic: boolean;
+}
--- a/web/src/app/services/game-system.service.ts
+++ b/web/src/app/services/game-system.service.ts
@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { GameSystem, GameSystemCreate } from './game-system.model';
+
+/**
+ * Service HTTP pour les GameSystems (systèmes de JDR).
+ */
+@Injectable({ providedIn: 'root' })
+export class GameSystemService {
+  private apiUrl = 'http://localhost:8080/api/game-systems';
+
+  constructor(private http: HttpClient) {}
+
+  getAll(): Observable<GameSystem[]> {
+    return this.http.get<GameSystem[]>(this.apiUrl);
+  }
+
+  getById(id: string): Observable<GameSystem> {
+    return this.http.get<GameSystem>(`${this.apiUrl}/${id}`);
+  }
+
+  create(payload: GameSystemCreate): Observable<GameSystem> {
+    return this.http.post<GameSystem>(this.apiUrl, payload);
+  }
+
+  update(id: string, payload: GameSystemCreate): Observable<GameSystem> {
+    return this.http.put<GameSystem>(`${this.apiUrl}/${id}`, payload);
+  }
+
+  delete(id: string): Observable<void> {
+    return this.http.delete<void>(`${this.apiUrl}/${id}`);
+  }
+
+  search(q: string): Observable<GameSystem[]> {
+    const params = new HttpParams().set('q', q);
+    return this.http.get<GameSystem[]>(`${this.apiUrl}/search`, { params });
+  }
+}
--- a/web/src/app/sidebar/sidebar.component.html
+++ b/web/src/app/sidebar/sidebar.component.html
@@ -49,6 +49,10 @@
      <span>Recherche globale</span>
      <span class="tool-kbd">Ctrl+K</span>
    </button>
+    <button class="tool-btn" [class.active]="currentRoute.startsWith('/game-systems')" (click)="navigateTo('/game-systems')">
+      <lucide-icon [img]="Dices" [size]="16"></lucide-icon>
+      <span>Systèmes de JDR</span>
+    </button>
    <button class="tool-btn">
      <lucide-icon [img]="Download" [size]="16"></lucide-icon>
      <span>Export VTT</span>
--- a/web/src/app/sidebar/sidebar.component.ts
+++ b/web/src/app/sidebar/sidebar.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { AsyncPipe, NgIf, NgFor } from '@angular/common';
 import { Router } from '@angular/router';
-import { LucideAngularModule, Search, Download, Settings, ArrowLeft } from 'lucide-angular';
+import { LucideAngularModule, Search, Download, Settings, ArrowLeft, Dices } from 'lucide-angular';
 import { LayoutService } from '../services/layout.service';
 import { GlobalSearchService } from '../services/global-search.service';

@@ -19,6 +19,7 @@ export class SidebarComponent {
  readonly Download = Download;
  readonly Settings = Settings;
  readonly ArrowLeft = ArrowLeft;
+  readonly Dices = Dices;

  readonly layoutConfig$ = this.layoutService.secondarySidebar$;