Ajout de 2 fonctionnalitées principales : import PDF que ce soit pour les règles ou les campagnes directement.
All checks were successful
All checks were successful
Fonctionnalité de comparaison PDF / campagne pour faire un mix et demander des conseils à l'IA
This commit is contained in:
4
web/package-lock.json
generated
4
web/package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "loremind-web",
|
||||
"version": "0.9.2-beta",
|
||||
"version": "0.10.0-beta",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "loremind-web",
|
||||
"version": "0.9.2-beta",
|
||||
"version": "0.10.0-beta",
|
||||
"dependencies": {
|
||||
"@angular/animations": "^17.0.0",
|
||||
"@angular/common": "^17.0.0",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "loremind-web",
|
||||
"version": "0.9.2-beta",
|
||||
"version": "0.10.0-beta",
|
||||
"description": "LoreMind Frontend - Angular",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
<ng-container *ngIf="sidebarConfig$ | async as config">
|
||||
<app-secondary-sidebar
|
||||
[title]="config.title"
|
||||
[titleRoute]="config.titleRoute || null"
|
||||
[items]="config.items"
|
||||
[createActions]="config.createActions"
|
||||
[bottomPanel]="config.bottomPanel || null">
|
||||
|
||||
@@ -16,11 +16,13 @@ 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/campaign-detail/campaign-detail.component').then(m => m.CampaignDetailComponent) },
|
||||
{ path: 'campaigns/:campaignId/import', loadComponent: () => import('./campaigns/campaign/campaign-import/campaign-import.component').then(m => m.CampaignImportComponent) },
|
||||
{ path: 'campaigns/:campaignId/adapt', loadComponent: () => import('./campaigns/campaign/campaign-adapt/campaign-adapt.component').then(m => m.CampaignAdaptComponent) },
|
||||
{ path: 'campaigns/:campaignId/playthroughs/:playthroughId', loadComponent: () => import('./campaigns/playthrough/playthrough-detail/playthrough-detail.component').then(m => m.PlaythroughDetailComponent) },
|
||||
{ path: 'campaigns/:campaignId/playthroughs/:playthroughId/flags', loadComponent: () => import('./campaigns/playthrough/playthrough-flags-page/playthrough-flags-page.component').then(m => m.PlaythroughFlagsPageComponent) },
|
||||
{ path: 'campaigns/:campaignId/characters/create', loadComponent: () => import('./campaigns/character/character-edit/character-edit.component').then(m => m.CharacterEditComponent) },
|
||||
{ path: 'campaigns/:campaignId/characters/:characterId/edit', loadComponent: () => import('./campaigns/character/character-edit/character-edit.component').then(m => m.CharacterEditComponent) },
|
||||
{ path: 'campaigns/:campaignId/characters/:characterId', loadComponent: () => import('./campaigns/character/character-view/character-view.component').then(m => m.CharacterViewComponent) },
|
||||
{ path: 'campaigns/:campaignId/playthroughs/:playthroughId/characters/create', loadComponent: () => import('./campaigns/character/character-edit/character-edit.component').then(m => m.CharacterEditComponent) },
|
||||
{ path: 'campaigns/:campaignId/playthroughs/:playthroughId/characters/:characterId/edit', loadComponent: () => import('./campaigns/character/character-edit/character-edit.component').then(m => m.CharacterEditComponent) },
|
||||
{ path: 'campaigns/:campaignId/playthroughs/:playthroughId/characters/:characterId', loadComponent: () => import('./campaigns/character/character-view/character-view.component').then(m => m.CharacterViewComponent) },
|
||||
{ path: 'campaigns/:campaignId/npcs/create', loadComponent: () => import('./campaigns/npc/npc-edit/npc-edit.component').then(m => m.NpcEditComponent) },
|
||||
{ path: 'campaigns/:campaignId/npcs/:npcId/edit', loadComponent: () => import('./campaigns/npc/npc-edit/npc-edit.component').then(m => m.NpcEditComponent) },
|
||||
{ path: 'campaigns/:campaignId/npcs/:npcId', loadComponent: () => import('./campaigns/npc/npc-view/npc-view.component').then(m => m.NpcViewComponent) },
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
<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.
|
||||
Aucune quête pour ce hub. Créez-en une pour démarrer.
|
||||
</p>
|
||||
|
||||
<div class="hub-quest-grid" *ngIf="hubQuests.length > 0">
|
||||
|
||||
@@ -82,30 +82,9 @@ export function buildCampaignTree(campaignId: string, data: CampaignTreeData): T
|
||||
// IDs préfixés par type pour éviter les collisions dans LayoutService.expanded
|
||||
// (chaque entité a sa propre séquence IDENTITY en base → arc.id=1 et chapter.id=1
|
||||
// peuvent coexister et se marchaient sur les pieds dans le Set<string> global).
|
||||
const sortedCharacters = [...data.characters].sort(byName);
|
||||
const characterItems: TreeItem[] = sortedCharacters.map(ch => ({
|
||||
id: `character-${ch.id}`,
|
||||
label: ch.name,
|
||||
route: `/campaigns/${campaignId}/characters/${ch.id}`
|
||||
}));
|
||||
|
||||
const charactersNode: TreeItem = {
|
||||
id: 'characters-root',
|
||||
label: 'PJ',
|
||||
iconKey: 'users',
|
||||
children: characterItems,
|
||||
meta: characterItems.length ? String(characterItems.length) : undefined,
|
||||
sectionHeaderBefore: 'Personnages',
|
||||
// Note : le section header "Personnages" est porté par le premier nœud (PJ).
|
||||
// Le filet au-dessus est masqué par CSS si c'est le tout premier item de la sidebar.
|
||||
createActions: [{
|
||||
id: 'new-character',
|
||||
label: 'Nouveau PJ',
|
||||
route: `/campaigns/${campaignId}/characters/create`,
|
||||
actionIcon: 'plus'
|
||||
}]
|
||||
};
|
||||
|
||||
// Note refonte Playthrough : les PJ ne sont plus rattachés à la campagne mais
|
||||
// à une Partie (Playthrough). On ne les affiche donc plus dans la sidebar de
|
||||
// campagne — seuls les PNJ (donnée de scénario) restent sous "Personnages".
|
||||
const sortedNpcs = [...data.npcs].sort(byName);
|
||||
const npcItems: TreeItem[] = sortedNpcs.map(n => ({
|
||||
id: `npc-${n.id}`,
|
||||
@@ -119,7 +98,9 @@ export function buildCampaignTree(campaignId: string, data: CampaignTreeData): T
|
||||
iconKey: 'c-drama',
|
||||
children: npcItems,
|
||||
meta: npcItems.length ? String(npcItems.length) : undefined,
|
||||
// Pas de sectionHeaderBefore : on reste sous le header "Personnages" du nœud PJ.
|
||||
// Porte le header de section "Personnages" (les PJ ayant migré vers la Partie).
|
||||
// Le filet au-dessus est masqué par CSS si c'est le tout premier item de la sidebar.
|
||||
sectionHeaderBefore: 'Personnages',
|
||||
createActions: [{
|
||||
id: 'new-npc',
|
||||
label: 'Nouveau PNJ',
|
||||
@@ -166,14 +147,15 @@ export function buildCampaignTree(campaignId: string, data: CampaignTreeData): T
|
||||
|
||||
createActions: [{
|
||||
id: `new-chapter-${arc.id}`,
|
||||
label: 'Nouveau chapitre',
|
||||
// Dans un arc hub, un "chapitre" est présenté comme une "quête".
|
||||
label: arc.type === 'HUB' ? 'Nouvelle quête' : 'Nouveau chapitre',
|
||||
route: `/campaigns/${campaignId}/arcs/${arc.id}/chapters/create`,
|
||||
actionIcon: 'plus'
|
||||
}]
|
||||
};
|
||||
});
|
||||
|
||||
return [...arcNodes, charactersNode, npcsNode];
|
||||
return [...arcNodes, npcsNode];
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -197,6 +179,8 @@ export function buildCampaignSidebarConfig(
|
||||
}));
|
||||
return {
|
||||
title: campaign.name,
|
||||
// Titre cliquable → accueil de la campagne (raccourci depuis n'importe quelle sous-page).
|
||||
titleRoute: `/campaigns/${campaignId}`,
|
||||
items: buildCampaignTree(campaignId, treeData),
|
||||
footerLabel: 'Toutes les campagnes',
|
||||
createActions: [
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
<div class="adapt-page">
|
||||
|
||||
<div class="page-header">
|
||||
<button type="button" class="btn-back" (click)="back()">
|
||||
<lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
|
||||
Retour à la campagne
|
||||
</button>
|
||||
<h1>Adapter un PDF à cette campagne</h1>
|
||||
<p class="subtitle">
|
||||
L'IA connaît votre campagne (structure, PNJ, univers) et lit le PDF, puis discute avec vous
|
||||
pour l'intégrer et l'adapter. Ce sont des <strong>conseils</strong> : rien n'est créé,
|
||||
vous appliquez ce qui vous plaît — et vous pouvez lui répondre pour qu'elle ajuste.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Choix / changement du PDF -->
|
||||
<section class="upload-bar">
|
||||
<input #pdfInput type="file" accept="application/pdf,.pdf" hidden (change)="onPdfSelected($event)" />
|
||||
<button type="button" class="btn-primary" [disabled]="streaming" (click)="pdfInput.click()">
|
||||
<lucide-icon [img]="Upload" [size]="15"></lucide-icon>
|
||||
{{ hasConversation ? 'Changer de PDF' : 'Choisir un PDF à adapter' }}
|
||||
</button>
|
||||
<span class="file-name" *ngIf="fileName">{{ fileName }}</span>
|
||||
</section>
|
||||
|
||||
<p class="adapt-error" *ngIf="error">{{ error }}</p>
|
||||
|
||||
<!-- Conversation -->
|
||||
<section class="chat" *ngIf="hasConversation">
|
||||
<div class="msg" *ngFor="let m of messages; let i = index"
|
||||
[class.msg--user]="m.role === 'user'" [class.msg--assistant]="m.role === 'assistant'">
|
||||
<div class="msg-role">{{ m.role === 'user' ? 'Vous' : 'IA' }}</div>
|
||||
|
||||
<div class="msg-body" *ngIf="m.role === 'user'">{{ m.content }}</div>
|
||||
<div class="msg-body markdown-body" *ngIf="m.role === 'assistant'" [innerHTML]="m.content | markdown"></div>
|
||||
|
||||
<div class="msg-actions" *ngIf="m.role === 'assistant' && m.content && !(streaming && i === messages.length - 1)">
|
||||
<button type="button" class="btn-copy" (click)="copy(i)">
|
||||
<lucide-icon [img]="copiedIndex === i ? Check : Copy" [size]="12"></lucide-icon>
|
||||
{{ copiedIndex === i ? 'Copié' : 'Copier' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<span class="streaming-cursor" *ngIf="streaming && i === messages.length - 1 && m.role === 'assistant'">▌</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Saisie d'un feedback -->
|
||||
<section class="composer" *ngIf="hasConversation">
|
||||
<textarea
|
||||
[(ngModel)]="input"
|
||||
[disabled]="streaming"
|
||||
rows="2"
|
||||
placeholder="Répondez à l'IA : corrigez, demandez une alternative, un autre lieu à intégrer…"
|
||||
(keydown.enter)="$event.preventDefault(); sendCurrent()"></textarea>
|
||||
<button type="button" class="btn-send" [disabled]="streaming || !input.trim()" (click)="sendCurrent()">
|
||||
<lucide-icon [img]="Send" [size]="16"></lucide-icon>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,184 @@
|
||||
.adapt-page {
|
||||
padding: 2rem 2.5rem;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 1.25rem;
|
||||
|
||||
h1 { margin: 0.6rem 0 0.3rem; font-size: 1.5rem; color: #f3f4f6; }
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #9ca3af;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
padding: 0;
|
||||
|
||||
&:hover { color: #c4b5fd; }
|
||||
}
|
||||
|
||||
.subtitle { margin: 0; color: #9ca3af; font-size: 0.9rem; strong { color: #d1d5db; } }
|
||||
|
||||
// --- Barre PDF --------------------------------------------------------------
|
||||
.upload-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
padding: 0.6rem 1.1rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: #6c63ff;
|
||||
color: white;
|
||||
|
||||
&:hover:not(:disabled) { background: #5b52e0; }
|
||||
&:disabled { opacity: 0.6; cursor: progress; }
|
||||
}
|
||||
|
||||
.file-name { color: #9ca3af; font-size: 0.82rem; }
|
||||
|
||||
.adapt-error {
|
||||
margin: 0 0 1rem;
|
||||
padding: 0.55rem 0.8rem;
|
||||
background: rgba(248, 113, 113, 0.1);
|
||||
border: 1px solid rgba(248, 113, 113, 0.35);
|
||||
border-radius: 8px;
|
||||
color: #fca5a5;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
// --- Conversation -----------------------------------------------------------
|
||||
.chat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.msg {
|
||||
border-radius: 12px;
|
||||
padding: 0.7rem 0.9rem;
|
||||
border: 1px solid #1f2937;
|
||||
|
||||
&--user {
|
||||
background: rgba(108, 99, 255, 0.1);
|
||||
border-color: rgba(108, 99, 255, 0.3);
|
||||
align-self: flex-end;
|
||||
max-width: 85%;
|
||||
}
|
||||
|
||||
&--assistant {
|
||||
background: #0b1220;
|
||||
}
|
||||
}
|
||||
|
||||
.msg-role {
|
||||
font-size: 0.68rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #9ca3af;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.msg-body {
|
||||
color: #d1d5db;
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
|
||||
&.markdown-body { white-space: normal; }
|
||||
|
||||
::ng-deep {
|
||||
h1, h2, h3 { color: #f3f4f6; margin: 0.9rem 0 0.4rem; }
|
||||
h2 { font-size: 1.08rem; }
|
||||
h3 { font-size: 1rem; }
|
||||
ul, ol { padding-left: 1.3rem; }
|
||||
li { margin: 0.2rem 0; }
|
||||
strong { color: #fff; }
|
||||
code { background: #1f2937; padding: 0.1rem 0.3rem; border-radius: 4px; font-size: 0.85em; }
|
||||
a { color: #a78bfa; }
|
||||
p { margin: 0.4rem 0; }
|
||||
}
|
||||
}
|
||||
|
||||
.msg-actions { margin-top: 0.5rem; }
|
||||
|
||||
.btn-copy {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
background: transparent;
|
||||
border: 1px solid #374151;
|
||||
border-radius: 6px;
|
||||
color: #9ca3af;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
|
||||
&:hover { color: #c4b5fd; border-color: #6c63ff; }
|
||||
}
|
||||
|
||||
.streaming-cursor {
|
||||
display: inline-block;
|
||||
color: #6c63ff;
|
||||
animation: blink 1s step-start infinite;
|
||||
}
|
||||
|
||||
@keyframes blink { 50% { opacity: 0; } }
|
||||
|
||||
// --- Composer ---------------------------------------------------------------
|
||||
.composer {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-end;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
padding-top: 0.5rem;
|
||||
background: linear-gradient(to top, var(--color-bg, #0a0f1a) 70%, transparent);
|
||||
|
||||
textarea {
|
||||
flex: 1;
|
||||
background: #0b1220;
|
||||
border: 1px solid #1f2937;
|
||||
border-radius: 8px;
|
||||
color: #f3f4f6;
|
||||
padding: 0.55rem 0.7rem;
|
||||
font-size: 0.9rem;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
&:focus { outline: none; border-color: #6c63ff; }
|
||||
&:disabled { opacity: 0.6; }
|
||||
}
|
||||
}
|
||||
|
||||
.btn-send {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
background: #6c63ff;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover:not(:disabled) { background: #5b52e0; }
|
||||
&:disabled { opacity: 0.5; cursor: default; }
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { LucideAngularModule, ArrowLeft, Upload, Copy, Check, Send } from 'lucide-angular';
|
||||
import { CampaignAdaptService, AdaptMessage } from '../../../services/campaign-adapt.service';
|
||||
import { CampaignSidebarService } from '../../../services/campaign-sidebar.service';
|
||||
import { PageTitleService } from '../../../services/page-title.service';
|
||||
import { MarkdownPipe } from '../../../shared/markdown.pipe';
|
||||
|
||||
const FIRST_PROMPT = 'Propose-moi comment intégrer et adapter ce PDF à ma campagne.';
|
||||
|
||||
/**
|
||||
* Page « Adapter un PDF » — CONVERSATIONNELLE. L'IA connaît la campagne (structure,
|
||||
* PNJ, univers) + lit le PDF, propose une 1re adaptation, puis l'utilisateur peut
|
||||
* répondre (corriger, demander des alternatives…) et l'IA rebondit.
|
||||
* Route : /campaigns/:campaignId/adapt — rien n'est créé, conseils à appliquer à la main.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-campaign-adapt',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, LucideAngularModule, MarkdownPipe],
|
||||
templateUrl: './campaign-adapt.component.html',
|
||||
styleUrls: ['./campaign-adapt.component.scss']
|
||||
})
|
||||
export class CampaignAdaptComponent implements OnInit {
|
||||
readonly ArrowLeft = ArrowLeft;
|
||||
readonly Upload = Upload;
|
||||
readonly Copy = Copy;
|
||||
readonly Check = Check;
|
||||
readonly Send = Send;
|
||||
|
||||
campaignId = '';
|
||||
|
||||
/** PDF choisi, conservé pour les tours de conversation suivants. */
|
||||
private file: File | null = null;
|
||||
fileName = '';
|
||||
|
||||
/** Conversation affichée (user + assistant). */
|
||||
messages: AdaptMessage[] = [];
|
||||
streaming = false;
|
||||
error: string | null = null;
|
||||
|
||||
/** Saisie du message en cours. */
|
||||
input = '';
|
||||
copiedIndex: number | null = null;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private service: CampaignAdaptService,
|
||||
private campaignSidebar: CampaignSidebarService,
|
||||
private pageTitle: PageTitleService
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.campaignId = this.route.snapshot.paramMap.get('campaignId')!;
|
||||
this.pageTitle.set('Adapter un PDF');
|
||||
this.campaignSidebar.show(this.campaignId);
|
||||
}
|
||||
|
||||
get hasConversation(): boolean { return this.messages.length > 0; }
|
||||
|
||||
// --- Choix du PDF (démarre / réinitialise la conversation) ---------------
|
||||
|
||||
onPdfSelected(event: Event): void {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
input.value = '';
|
||||
if (!file) return;
|
||||
this.file = file;
|
||||
this.fileName = file.name;
|
||||
this.messages = [];
|
||||
this.error = null;
|
||||
this.send(FIRST_PROMPT);
|
||||
}
|
||||
|
||||
// --- Envoi d'un message (1er tour ou feedback) ---------------------------
|
||||
|
||||
sendCurrent(): void {
|
||||
const text = this.input.trim();
|
||||
if (!text || this.streaming) return;
|
||||
this.input = '';
|
||||
this.send(text);
|
||||
}
|
||||
|
||||
private send(text: string): void {
|
||||
if (!this.file || this.streaming) return;
|
||||
this.error = null;
|
||||
|
||||
this.messages.push({ role: 'user', content: text });
|
||||
// Historique envoyé = tout jusqu'au message user inclus (sans la bulle vide).
|
||||
const payload: AdaptMessage[] = this.messages.map(m => ({ role: m.role, content: m.content }));
|
||||
|
||||
const assistant: AdaptMessage = { role: 'assistant', content: '' };
|
||||
this.messages.push(assistant);
|
||||
this.streaming = true;
|
||||
|
||||
this.service.adviseStream(this.campaignId, this.file, payload).subscribe({
|
||||
next: (ev) => {
|
||||
if (ev.type === 'token') {
|
||||
assistant.content += ev.value;
|
||||
} else if (ev.type === 'done') {
|
||||
this.streaming = false;
|
||||
}
|
||||
},
|
||||
error: (err: Error) => {
|
||||
this.streaming = false;
|
||||
// Bulle assistant restée vide → on la retire pour ne pas afficher de vide.
|
||||
if (!assistant.content) {
|
||||
this.messages = this.messages.filter(m => m !== assistant);
|
||||
}
|
||||
this.error = err?.message ? `Échec : ${err.message}` : "Échec de l'adaptation.";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
copy(index: number): void {
|
||||
const msg = this.messages[index];
|
||||
if (!msg) return;
|
||||
navigator.clipboard?.writeText(msg.content).then(() => {
|
||||
this.copiedIndex = index;
|
||||
setTimeout(() => (this.copiedIndex = null), 2000);
|
||||
});
|
||||
}
|
||||
|
||||
back(): void {
|
||||
this.router.navigate(['/campaigns', this.campaignId]);
|
||||
}
|
||||
}
|
||||
@@ -102,38 +102,9 @@
|
||||
<h2>Personnages</h2>
|
||||
</div>
|
||||
|
||||
<!-- Sous-section : Personnages joueurs (PJ) -->
|
||||
<div class="persona-subsection">
|
||||
<div class="subsection-header">
|
||||
<h3>
|
||||
<lucide-icon [img]="User" [size]="16"></lucide-icon>
|
||||
Personnages joueurs
|
||||
<span class="count-badge" *ngIf="characters.length > 0">{{ characters.length }}</span>
|
||||
</h3>
|
||||
<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)="viewCharacter(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">{{ personaSnippet(character) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="empty-state empty-state--compact" *ngIf="characters.length === 0">
|
||||
<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>
|
||||
<!-- Les PJ ne sont plus rattachés à la campagne mais à une Partie (Playthrough) :
|
||||
ils se gèrent depuis la page d'une Partie. Ici on ne liste que les PNJ
|
||||
(donnée de scénario, partagée par toutes les Parties). -->
|
||||
|
||||
<!-- Sous-section : Personnages non-joueurs (PNJ) -->
|
||||
<div class="persona-subsection">
|
||||
@@ -172,10 +143,20 @@
|
||||
<section class="detail-section arcs-section" *ngIf="!editing">
|
||||
<div class="section-header">
|
||||
<h2>Arcs narratifs</h2>
|
||||
<button class="btn-add" (click)="createArc()">
|
||||
<lucide-icon [img]="Plus" [size]="14"></lucide-icon>
|
||||
Nouvel arc
|
||||
</button>
|
||||
<div class="section-header-actions">
|
||||
<button class="btn-add btn-add--secondary" (click)="adaptCampaign()" title="Conseils IA pour adapter un PDF à cette campagne">
|
||||
<lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
|
||||
Adapter un PDF
|
||||
</button>
|
||||
<button class="btn-add btn-add--secondary" (click)="importCampaign()" title="Générer l'arborescence depuis un PDF de campagne">
|
||||
<lucide-icon [img]="Upload" [size]="14"></lucide-icon>
|
||||
Importer un PDF
|
||||
</button>
|
||||
<button class="btn-add" (click)="createArc()">
|
||||
<lucide-icon [img]="Plus" [size]="14"></lucide-icon>
|
||||
Nouvel arc
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arcs-grid" *ngIf="arcs.length > 0">
|
||||
|
||||
@@ -268,6 +268,12 @@
|
||||
h2 { color: #d1d5db; font-size: 1rem; font-weight: 600; }
|
||||
}
|
||||
|
||||
.section-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -283,6 +289,14 @@
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover { background: #5b52e0; }
|
||||
|
||||
// Variante secondaire (ex: "Importer un PDF") : discrète à côté de l'action primaire.
|
||||
&--secondary {
|
||||
background: #1f2937;
|
||||
color: #e5e7eb;
|
||||
border: 1px solid #374151;
|
||||
&:hover { background: #273244; border-color: #6c63ff; }
|
||||
}
|
||||
}
|
||||
|
||||
.arcs-grid {
|
||||
|
||||
@@ -2,7 +2,7 @@ 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, User, Dices, Drama, Check, Play } from 'lucide-angular';
|
||||
import { LucideAngularModule, Swords, Plus, Globe, Pencil, Trash2, Dices, Drama, Check, Play, Upload, Sparkles } from 'lucide-angular';
|
||||
import { Router, RouterLink } from '@angular/router';
|
||||
import { forkJoin, of } from 'rxjs';
|
||||
import { catchError, switchMap, filter, map } from 'rxjs/operators';
|
||||
@@ -16,7 +16,6 @@ import { SessionService } from '../../../services/session.service';
|
||||
import { PlaythroughService } from '../../../services/playthrough.service';
|
||||
import { Playthrough } from '../../../services/campaign.model';
|
||||
import { Session } from '../../../services/session.model';
|
||||
import { Character } from '../../../services/character.model';
|
||||
import { Npc } from '../../../services/npc.model';
|
||||
import { LayoutService } from '../../../services/layout.service';
|
||||
import { PageTitleService } from '../../../services/page-title.service';
|
||||
@@ -38,11 +37,12 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
|
||||
readonly Globe = Globe;
|
||||
readonly Pencil = Pencil;
|
||||
readonly Trash2 = Trash2;
|
||||
readonly User = User;
|
||||
readonly Dices = Dices;
|
||||
readonly Drama = Drama;
|
||||
readonly Check = Check;
|
||||
readonly Play = Play;
|
||||
readonly Upload = Upload;
|
||||
readonly Sparkles = Sparkles;
|
||||
|
||||
campaign: Campaign | null = null;
|
||||
arcs: Arc[] = [];
|
||||
@@ -56,8 +56,6 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
|
||||
availableGameSystems: GameSystem[] = [];
|
||||
/** GameSystem associé si `campaign.gameSystemId` est renseigné ; sinon null. */
|
||||
linkedGameSystem: GameSystem | null = null;
|
||||
/** Fiches de personnages (PJ) de la campagne. */
|
||||
characters: Character[] = [];
|
||||
/** Fiches de personnages non-joueurs (PNJ) de la campagne. */
|
||||
npcs: Npc[] = [];
|
||||
/** Sessions de jeu (passées et en cours) liées à cette campagne. */
|
||||
@@ -73,8 +71,6 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
|
||||
|
||||
/** Parties (Playthroughs) de cette campagne. */
|
||||
playthroughs: Playthrough[] = [];
|
||||
/** Partie par défaut (1re) — fallback pour les actions session/PJ tant que l'UI Playthrough n'est pas finie. */
|
||||
defaultPlaythroughId: string | null = null;
|
||||
|
||||
/** Mode édition inline. */
|
||||
editing = false;
|
||||
@@ -124,10 +120,8 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
|
||||
this.campaign = campaign;
|
||||
this.editing = false;
|
||||
this.playthroughs = playthroughs;
|
||||
this.defaultPlaythroughId = playthroughs.length > 0 ? playthroughs[0].id! : null;
|
||||
this.loadLinkedLore(campaign);
|
||||
this.loadLinkedGameSystem(campaign);
|
||||
this.loadCharacters(campaign.id!);
|
||||
this.loadNpcs(campaign.id!);
|
||||
this.loadSessions(campaign.id!);
|
||||
this.arcs = treeData.arcs;
|
||||
@@ -162,10 +156,8 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
|
||||
this.campaign = campaign;
|
||||
this.editing = false;
|
||||
this.playthroughs = playthroughs;
|
||||
this.defaultPlaythroughId = playthroughs.length > 0 ? playthroughs[0].id! : null;
|
||||
this.loadLinkedLore(campaign);
|
||||
this.loadLinkedGameSystem(campaign);
|
||||
this.loadCharacters(campaign.id!);
|
||||
this.loadNpcs(campaign.id!);
|
||||
this.loadSessions(campaign.id!);
|
||||
this.arcs = treeData.arcs;
|
||||
@@ -200,18 +192,7 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
|
||||
).subscribe(gs => this.linkedGameSystem = gs);
|
||||
}
|
||||
|
||||
/** Charge les PJ de la Partie par défaut (refonte Playthrough). */
|
||||
private loadCharacters(_campaignId: string): void {
|
||||
if (!this.defaultPlaythroughId) {
|
||||
this.characters = [];
|
||||
return;
|
||||
}
|
||||
this.characterService.getByPlaythrough(this.defaultPlaythroughId).pipe(
|
||||
catchError(() => of([] as Character[]))
|
||||
).subscribe(list => this.characters = list);
|
||||
}
|
||||
|
||||
/** Symétrique pour les PNJ. */
|
||||
/** Charge les PNJ de la campagne (les PJ vivent désormais dans une Partie). */
|
||||
private loadNpcs(campaignId: string): void {
|
||||
this.npcService.getByCampaign(campaignId).pipe(
|
||||
catchError(() => of([] as Npc[]))
|
||||
@@ -245,11 +226,6 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
|
||||
});
|
||||
}
|
||||
|
||||
createCharacter(): void {
|
||||
if (!this.campaign) return;
|
||||
this.router.navigate(['/campaigns', this.campaign.id, 'characters', 'create']);
|
||||
}
|
||||
|
||||
createNpc(): void {
|
||||
if (!this.campaign) return;
|
||||
this.router.navigate(['/campaigns', this.campaign.id, 'npcs', 'create']);
|
||||
@@ -260,17 +236,6 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
|
||||
this.router.navigate(['/campaigns', this.campaign.id, 'npcs', npc.id, 'edit']);
|
||||
}
|
||||
|
||||
editCharacter(character: Character): void {
|
||||
if (!this.campaign || !character.id) return;
|
||||
this.router.navigate(['/campaigns', this.campaign.id, 'characters', character.id, 'edit']);
|
||||
}
|
||||
|
||||
/** Ouvre la vue lecture seule (style WorldAnvil) — clic sur la carte. */
|
||||
viewCharacter(character: Character): void {
|
||||
if (!this.campaign || !character.id) return;
|
||||
this.router.navigate(['/campaigns', this.campaign.id, 'characters', character.id]);
|
||||
}
|
||||
|
||||
viewNpc(npc: Npc): void {
|
||||
if (!this.campaign || !npc.id) return;
|
||||
this.router.navigate(['/campaigns', this.campaign.id, 'npcs', npc.id]);
|
||||
@@ -281,6 +246,18 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
|
||||
this.router.navigate(['/campaigns', this.campaign.id, 'arcs', 'create']);
|
||||
}
|
||||
|
||||
/** Ouvre la page d'import d'un PDF de campagne (proposition d'arbre à réviser). */
|
||||
importCampaign(): void {
|
||||
if (!this.campaign) return;
|
||||
this.router.navigate(['/campaigns', this.campaign.id, 'import']);
|
||||
}
|
||||
|
||||
/** Ouvre la page de conseils d'adaptation d'un PDF à cette campagne. */
|
||||
adaptCampaign(): void {
|
||||
if (!this.campaign) return;
|
||||
this.router.navigate(['/campaigns', this.campaign.id, 'adapt']);
|
||||
}
|
||||
|
||||
openArc(arc: Arc): void {
|
||||
if (!this.campaign || !arc.id) return;
|
||||
this.router.navigate(['/campaigns', this.campaign.id, 'arcs', arc.id]);
|
||||
@@ -306,11 +283,6 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
|
||||
return '(Fiche vide)';
|
||||
}
|
||||
|
||||
/** Alias gardé pour compatibilité avec les anciens templates. */
|
||||
characterSnippet(c: Character): string {
|
||||
return this.personaSnippet(c);
|
||||
}
|
||||
|
||||
private showLayout(allCampaigns: Campaign[], data: CampaignTreeData): void {
|
||||
this.layoutService.show(buildCampaignSidebarConfig(this.campaign!, allCampaigns, data, this.campaign!.id!));
|
||||
}
|
||||
@@ -385,9 +357,9 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
|
||||
const newGameSystemId = this.editGameSystemId ? this.editGameSystemId : null;
|
||||
const currentGameSystemId = this.campaign.gameSystemId ?? null;
|
||||
const gameSystemChanged = newGameSystemId !== currentGameSystemId;
|
||||
const hasSheets = this.characters.length > 0 || this.npcs.length > 0;
|
||||
const hasSheets = this.npcs.length > 0;
|
||||
if (gameSystemChanged && hasSheets) {
|
||||
const count = this.characters.length + this.npcs.length;
|
||||
const count = this.npcs.length;
|
||||
this.confirmDialog.confirm({
|
||||
title: 'Changer le systeme de jeu ?',
|
||||
message:
|
||||
|
||||
@@ -0,0 +1,183 @@
|
||||
<div class="import-page">
|
||||
|
||||
<div class="page-header">
|
||||
<button type="button" class="btn-back" (click)="cancel()">
|
||||
<lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
|
||||
Retour à la campagne
|
||||
</button>
|
||||
<h1>Importer un PDF de campagne</h1>
|
||||
<p class="subtitle">
|
||||
L'IA propose une arborescence arc → chapitre → scène. Vous la révisez et l'ajustez
|
||||
avant de créer quoi que ce soit.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Étape 1 : upload (masqué une fois en revue) -->
|
||||
<section class="upload-area" *ngIf="!reviewing">
|
||||
<input #pdfInput type="file" accept="application/pdf,.pdf" hidden (change)="onPdfSelected($event)" />
|
||||
<button type="button" class="btn-primary big" [disabled]="importing" (click)="pdfInput.click()">
|
||||
<lucide-icon [img]="Upload" [size]="16"></lucide-icon>
|
||||
{{ importing ? 'Import en cours…' : 'Choisir un PDF de campagne' }}
|
||||
</button>
|
||||
|
||||
<!-- Progression live -->
|
||||
<div class="import-progress" *ngIf="importing">
|
||||
<p class="import-phase">{{ importPhase }}</p>
|
||||
<div class="progress-bar" *ngIf="importProgress">
|
||||
<div class="progress-fill"
|
||||
[style.width.%]="importProgress.total ? (importProgress.current / importProgress.total) * 100 : 0">
|
||||
</div>
|
||||
</div>
|
||||
<p class="import-counts" *ngIf="importCounts">
|
||||
Trouvé jusqu'ici : {{ importCounts.arcs }} arc(s) · {{ importCounts.chapters }} chapitre(s) · {{ importCounts.scenes }} scène(s)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="import-error" *ngIf="importError">{{ importError }}</p>
|
||||
</section>
|
||||
|
||||
<!-- Étape 2 : revue de l'arbre éditable -->
|
||||
<section class="review-area" *ngIf="reviewing">
|
||||
<div class="review-header">
|
||||
<p class="review-summary">
|
||||
À créer : <strong>{{ arcCount }}</strong> nouvel(s) arc(s),
|
||||
<strong>{{ chapterCount }}</strong> chapitre(s),
|
||||
<strong>{{ sceneCount }}</strong> scène(s).
|
||||
Les éléments <em>« déjà présent »</em> (grisés) sont affichés pour situer les ajouts ;
|
||||
ils ne seront pas recréés. Modifiez les nouveaux, puis créez.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="tree">
|
||||
<!-- Arc -->
|
||||
<div class="arc-card" *ngFor="let arc of tree; let ai = index">
|
||||
<div class="node-head arc-head" [class.existing-node]="arc.existing">
|
||||
<button type="button" class="btn-collapse" (click)="toggleArc(arc)">
|
||||
<lucide-icon [img]="arc.collapsed ? ChevronRight : ChevronDown" [size]="16"></lucide-icon>
|
||||
</button>
|
||||
<lucide-icon [img]="Swords" [size]="16" class="node-icon"></lucide-icon>
|
||||
<input type="text" class="node-name" [(ngModel)]="arc.name" [name]="'arc-' + ai"
|
||||
[readonly]="arc.existing" placeholder="Nom de l'arc" />
|
||||
<span class="badge-existing" *ngIf="arc.existing">déjà présent</span>
|
||||
<button type="button" class="btn-remove" *ngIf="!arc.existing" (click)="removeArc(ai)" title="Supprimer l'arc">
|
||||
<lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="node-body" *ngIf="!arc.collapsed">
|
||||
<div class="arc-type-toggle" *ngIf="!arc.existing">
|
||||
<span class="toggle-label">Type :</span>
|
||||
<button type="button" class="type-btn" [class.active]="arc.type === 'LINEAR'"
|
||||
(click)="setArcType(arc, 'LINEAR')">Linéaire</button>
|
||||
<button type="button" class="type-btn" [class.active]="arc.type === 'HUB'"
|
||||
(click)="setArcType(arc, 'HUB')">Hub (quêtes)</button>
|
||||
</div>
|
||||
|
||||
<textarea class="node-desc" *ngIf="!arc.existing" [(ngModel)]="arc.description" [name]="'arc-desc-' + ai"
|
||||
rows="2" placeholder="Synopsis de l'arc (optionnel)"></textarea>
|
||||
|
||||
<!-- Chapitres -->
|
||||
<div class="chapter-card" *ngFor="let chapter of arc.chapters; let ci = index">
|
||||
<div class="node-head chapter-head" [class.existing-node]="chapter.existing">
|
||||
<button type="button" class="btn-collapse" (click)="toggleChapter(chapter)">
|
||||
<lucide-icon [img]="chapter.collapsed ? ChevronRight : ChevronDown" [size]="14"></lucide-icon>
|
||||
</button>
|
||||
<lucide-icon [img]="BookOpen" [size]="14" class="node-icon"></lucide-icon>
|
||||
<input type="text" class="node-name" [(ngModel)]="chapter.name" [name]="'chap-' + ai + '-' + ci"
|
||||
[readonly]="chapter.existing" placeholder="Nom du chapitre" />
|
||||
<span class="badge-existing" *ngIf="chapter.existing">déjà présent</span>
|
||||
<button type="button" class="btn-remove" *ngIf="!chapter.existing" (click)="removeChapter(arc, ci)" title="Supprimer le chapitre">
|
||||
<lucide-icon [img]="Trash2" [size]="13"></lucide-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="node-body" *ngIf="!chapter.collapsed">
|
||||
<textarea class="node-desc" *ngIf="!chapter.existing" [(ngModel)]="chapter.description" [name]="'chap-desc-' + ai + '-' + ci"
|
||||
rows="2" placeholder="Synopsis du chapitre (optionnel)"></textarea>
|
||||
|
||||
<!-- Scènes -->
|
||||
<div class="scene-card" *ngFor="let scene of chapter.scenes; let si = index"
|
||||
[class.existing-node]="scene.existing">
|
||||
<div class="scene-row">
|
||||
<lucide-icon [img]="MapPin" [size]="13" class="node-icon scene-icon"></lucide-icon>
|
||||
<div class="scene-fields">
|
||||
<input type="text" class="node-name" [(ngModel)]="scene.name"
|
||||
[name]="'scene-' + ai + '-' + ci + '-' + si" [readonly]="scene.existing"
|
||||
placeholder="Nom de la scène" />
|
||||
<input type="text" class="node-desc-inline" *ngIf="!scene.existing" [(ngModel)]="scene.description"
|
||||
[name]="'scene-desc-' + ai + '-' + ci + '-' + si" placeholder="Synopsis (optionnel)" />
|
||||
</div>
|
||||
<span class="badge-existing" *ngIf="scene.existing">déjà présent</span>
|
||||
<button type="button" class="btn-details" *ngIf="!scene.existing" (click)="toggleDetails(scene)"
|
||||
title="Narration joueurs, notes MJ, pièces">
|
||||
<lucide-icon [img]="scene.detailsOpen ? ChevronDown : ChevronRight" [size]="12"></lucide-icon>
|
||||
Détails<span *ngIf="scene.rooms.length"> · {{ scene.rooms.length }} pièce(s)</span>
|
||||
</button>
|
||||
<button type="button" class="btn-remove" *ngIf="!scene.existing" (click)="removeScene(chapter, si)" title="Supprimer la scène">
|
||||
<lucide-icon [img]="Trash2" [size]="13"></lucide-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="scene-details" *ngIf="scene.detailsOpen && !scene.existing">
|
||||
<label class="field-label">À lire aux joueurs</label>
|
||||
<textarea class="node-desc" [(ngModel)]="scene.playerNarration"
|
||||
[name]="'scene-pn-' + ai + '-' + ci + '-' + si" rows="3"
|
||||
placeholder="Texte d'encadré lu aux joueurs (optionnel)"></textarea>
|
||||
|
||||
<label class="field-label">Notes MJ</label>
|
||||
<textarea class="node-desc" [(ngModel)]="scene.gmNotes"
|
||||
[name]="'scene-gm-' + ai + '-' + ci + '-' + si" rows="3"
|
||||
placeholder="Secrets, développement, conséquences (optionnel)"></textarea>
|
||||
|
||||
<!-- Pièces (donjon) : vide = scène narrative classique -->
|
||||
<span class="field-label">Pièces (lieu explorable)</span>
|
||||
<div class="rooms">
|
||||
<div class="room-row" *ngFor="let room of scene.rooms; let ri = index">
|
||||
<input type="text" class="room-name" [(ngModel)]="room.name"
|
||||
[name]="'room-' + ai + '-' + ci + '-' + si + '-' + ri" placeholder="Pièce" />
|
||||
<input type="text" class="room-field" [(ngModel)]="room.description"
|
||||
[name]="'room-desc-' + ai + '-' + ci + '-' + si + '-' + ri" placeholder="Description" />
|
||||
<input type="text" class="room-field" [(ngModel)]="room.enemies"
|
||||
[name]="'room-en-' + ai + '-' + ci + '-' + si + '-' + ri" placeholder="Ennemis" />
|
||||
<input type="text" class="room-field" [(ngModel)]="room.loot"
|
||||
[name]="'room-loot-' + ai + '-' + ci + '-' + si + '-' + ri" placeholder="Trésor" />
|
||||
<button type="button" class="btn-remove" (click)="removeRoom(scene, ri)" title="Supprimer la pièce">
|
||||
<lucide-icon [img]="Trash2" [size]="12"></lucide-icon>
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" class="btn-add-inline" (click)="addRoom(scene)">
|
||||
<lucide-icon [img]="Plus" [size]="12"></lucide-icon> Pièce
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn-add-inline" (click)="addScene(chapter)">
|
||||
<lucide-icon [img]="Plus" [size]="12"></lucide-icon> Scène
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn-add-inline" (click)="addChapter(arc)">
|
||||
<lucide-icon [img]="Plus" [size]="12"></lucide-icon> Chapitre
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn-add" (click)="addArc()">
|
||||
<lucide-icon [img]="Plus" [size]="14"></lucide-icon> Ajouter un arc
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="apply-error" *ngIf="applyError">{{ applyError }}</p>
|
||||
|
||||
<div class="review-actions">
|
||||
<button type="button" class="btn-primary" [disabled]="applying || !hasNewContent" (click)="apply()">
|
||||
<lucide-icon [img]="Check" [size]="16"></lucide-icon>
|
||||
{{ applying ? 'Création…' : 'Créer dans la campagne' }}
|
||||
</button>
|
||||
<button type="button" class="btn-secondary" (click)="cancel()">Annuler</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,323 @@
|
||||
.import-page {
|
||||
padding: 2rem 2.5rem;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
h1 { margin: 0.6rem 0 0.3rem; font-size: 1.5rem; color: #f3f4f6; }
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #9ca3af;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
padding: 0;
|
||||
|
||||
&:hover { color: #c4b5fd; }
|
||||
}
|
||||
|
||||
.subtitle { margin: 0; color: #9ca3af; font-size: 0.9rem; }
|
||||
|
||||
// --- Upload -----------------------------------------------------------------
|
||||
.upload-area {
|
||||
padding: 2rem;
|
||||
border: 1px dashed #374151;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
background: #0b1220;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
padding: 0.6rem 1.1rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #6c63ff;
|
||||
color: white;
|
||||
&:hover:not(:disabled) { background: #5b52e0; }
|
||||
&:disabled { opacity: 0.6; cursor: progress; }
|
||||
|
||||
&.big { padding: 0.8rem 1.4rem; font-size: 0.95rem; }
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #1f2937;
|
||||
color: #e5e7eb;
|
||||
border: 1px solid #374151;
|
||||
&:hover { background: #273244; }
|
||||
}
|
||||
|
||||
.import-progress {
|
||||
margin: 1.25rem auto 0;
|
||||
max-width: 460px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.import-phase { margin: 0 0 0.5rem; color: #c4b5fd; font-size: 0.85rem; font-weight: 500; }
|
||||
|
||||
.progress-bar {
|
||||
height: 6px;
|
||||
background: #1f2937;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: #6c63ff;
|
||||
border-radius: 999px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.import-counts { margin: 0.55rem 0 0; color: #9ca3af; font-size: 0.8rem; }
|
||||
|
||||
.import-error,
|
||||
.apply-error {
|
||||
margin: 1rem 0 0;
|
||||
padding: 0.55rem 0.8rem;
|
||||
background: rgba(248, 113, 113, 0.1);
|
||||
border: 1px solid rgba(248, 113, 113, 0.35);
|
||||
border-radius: 8px;
|
||||
color: #fca5a5;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
// --- Revue (arbre) ----------------------------------------------------------
|
||||
.review-summary { margin: 0 0 1rem; color: #d1d5db; font-size: 0.9rem; strong { color: #fff; } em { color: #9ca3af; font-style: italic; } }
|
||||
|
||||
// Nœuds déjà présents dans la campagne : grisés, lecture seule.
|
||||
.existing-node {
|
||||
opacity: 0.6;
|
||||
|
||||
.node-name { background: transparent; border-color: transparent; cursor: default; }
|
||||
}
|
||||
|
||||
.badge-existing {
|
||||
font-size: 0.65rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: #9ca3af;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid #1f2937;
|
||||
border-radius: 999px;
|
||||
padding: 0.1rem 0.45rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tree { display: flex; flex-direction: column; gap: 0.75rem; }
|
||||
|
||||
.arc-card {
|
||||
border: 1px solid #1f2937;
|
||||
border-radius: 10px;
|
||||
background: #0b1220;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.node-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.55rem 0.7rem;
|
||||
}
|
||||
|
||||
.arc-head { background: #111827; }
|
||||
.chapter-head { background: rgba(255, 255, 255, 0.02); }
|
||||
|
||||
.btn-collapse {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #9ca3af;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
&:hover { color: #c4b5fd; }
|
||||
}
|
||||
|
||||
.node-icon { color: #a78bfa; flex-shrink: 0; }
|
||||
.scene-icon { color: #6b7280; }
|
||||
|
||||
.node-name {
|
||||
flex: 1;
|
||||
background: #0b1220;
|
||||
border: 1px solid #1f2937;
|
||||
border-radius: 6px;
|
||||
color: #f3f4f6;
|
||||
padding: 0.35rem 0.5rem;
|
||||
font-size: 0.88rem;
|
||||
|
||||
&:focus { outline: none; border-color: #6c63ff; }
|
||||
}
|
||||
|
||||
.btn-remove {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #6b7280;
|
||||
cursor: pointer;
|
||||
padding: 0.2rem;
|
||||
display: flex;
|
||||
&:hover { color: #f87171; }
|
||||
}
|
||||
|
||||
.node-body { padding: 0.5rem 0.7rem 0.7rem 1.7rem; display: flex; flex-direction: column; gap: 0.5rem; }
|
||||
|
||||
.node-desc,
|
||||
.node-desc-inline {
|
||||
background: #0b1220;
|
||||
border: 1px solid #1f2937;
|
||||
border-radius: 6px;
|
||||
color: #d1d5db;
|
||||
padding: 0.35rem 0.5rem;
|
||||
font-size: 0.82rem;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
&:focus { outline: none; border-color: #6c63ff; }
|
||||
}
|
||||
|
||||
.chapter-card {
|
||||
border: 1px solid #1f2937;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Sélecteur Linéaire / Hub
|
||||
.arc-type-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.toggle-label { color: #9ca3af; font-size: 0.8rem; }
|
||||
|
||||
.type-btn {
|
||||
background: #0b1220;
|
||||
border: 1px solid #1f2937;
|
||||
border-radius: 6px;
|
||||
color: #9ca3af;
|
||||
cursor: pointer;
|
||||
font-size: 0.78rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
|
||||
&:hover { border-color: #6c63ff; }
|
||||
&.active { background: rgba(108, 99, 255, 0.18); border-color: #6c63ff; color: #c4b5fd; font-weight: 600; }
|
||||
}
|
||||
|
||||
.scene-card {
|
||||
border: 1px solid #161e2e;
|
||||
border-radius: 6px;
|
||||
padding: 0.3rem 0.4rem;
|
||||
}
|
||||
|
||||
.scene-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.btn-details {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
background: transparent;
|
||||
border: 1px solid #1f2937;
|
||||
border-radius: 6px;
|
||||
color: #9ca3af;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover { color: #c4b5fd; border-color: #6c63ff; }
|
||||
}
|
||||
|
||||
.scene-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
margin: 0.4rem 0 0.2rem 1.5rem;
|
||||
padding-left: 0.6rem;
|
||||
border-left: 2px solid #1f2937;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
color: #9ca3af;
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
.rooms {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.room-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.room-name,
|
||||
.room-field {
|
||||
background: #0b1220;
|
||||
border: 1px solid #1f2937;
|
||||
border-radius: 5px;
|
||||
color: #d1d5db;
|
||||
padding: 0.25rem 0.4rem;
|
||||
font-size: 0.78rem;
|
||||
&:focus { outline: none; border-color: #6c63ff; }
|
||||
}
|
||||
|
||||
.room-name { flex: 0 0 22%; }
|
||||
.room-field { flex: 1; min-width: 0; }
|
||||
|
||||
.scene-fields {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
|
||||
.node-name { flex: 0 0 40%; }
|
||||
.node-desc-inline { flex: 1; }
|
||||
}
|
||||
|
||||
.btn-add,
|
||||
.btn-add-inline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
background: transparent;
|
||||
border: 1px dashed #374151;
|
||||
border-radius: 6px;
|
||||
color: #9ca3af;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.35rem 0.6rem;
|
||||
align-self: flex-start;
|
||||
|
||||
&:hover { color: #c4b5fd; border-color: #6c63ff; }
|
||||
}
|
||||
|
||||
.btn-add { margin-top: 0.25rem; }
|
||||
|
||||
.review-actions {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
@@ -0,0 +1,374 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import {
|
||||
LucideAngularModule, ArrowLeft, Upload, Plus, Trash2,
|
||||
ChevronDown, ChevronRight, Swords, BookOpen, MapPin, Check
|
||||
} from 'lucide-angular';
|
||||
import { CampaignImportService } from '../../../services/campaign-import.service';
|
||||
import { CampaignService } from '../../../services/campaign.service';
|
||||
import { CharacterService } from '../../../services/character.service';
|
||||
import { NpcService } from '../../../services/npc.service';
|
||||
import { CampaignSidebarService } from '../../../services/campaign-sidebar.service';
|
||||
import { PageTitleService } from '../../../services/page-title.service';
|
||||
import { ArcKind, ArcProposal, ChapterProposal, SceneProposal } from '../../../services/campaign-import.model';
|
||||
import { CampaignImportProposal } from '../../../services/campaign-import.model';
|
||||
import { loadCampaignTreeData, CampaignTreeData } from '../../campaign-tree.helper';
|
||||
import { of } from 'rxjs';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
|
||||
/**
|
||||
* Nœuds éditables (= proposition + état d'UI). `existing` = déjà présent dans la
|
||||
* campagne (chargé pour la revue) : lecture seule, sert de parent aux ajouts.
|
||||
* `existingId` = l'ID de l'entité existante (envoyé à l'apply pour s'y rattacher).
|
||||
*/
|
||||
interface RoomNode { name: string; description: string; enemies: string; loot: string; }
|
||||
interface SceneNode {
|
||||
name: string; description: string; playerNarration: string; gmNotes: string;
|
||||
rooms: RoomNode[]; detailsOpen: boolean; existing: boolean; existingId?: string;
|
||||
}
|
||||
interface ChapterNode {
|
||||
name: string; description: string; scenes: SceneNode[]; collapsed: boolean;
|
||||
existing: boolean; existingId?: string;
|
||||
}
|
||||
interface ArcNode {
|
||||
name: string; description: string; type: ArcKind; chapters: ChapterNode[]; collapsed: boolean;
|
||||
existing: boolean; existingId?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Page d'import d'un PDF de campagne → arbre arc/chapitre/scène.
|
||||
* Route : /campaigns/:campaignId/import
|
||||
*
|
||||
* Flux : upload → progression streamée → arbre éditable (revue) → création.
|
||||
* Rien n'est créé tant que l'utilisateur n'a pas validé « Créer dans la campagne ».
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-campaign-import',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, LucideAngularModule],
|
||||
templateUrl: './campaign-import.component.html',
|
||||
styleUrls: ['./campaign-import.component.scss']
|
||||
})
|
||||
export class CampaignImportComponent implements OnInit {
|
||||
readonly ArrowLeft = ArrowLeft;
|
||||
readonly Upload = Upload;
|
||||
readonly Plus = Plus;
|
||||
readonly Trash2 = Trash2;
|
||||
readonly ChevronDown = ChevronDown;
|
||||
readonly ChevronRight = ChevronRight;
|
||||
readonly Swords = Swords;
|
||||
readonly BookOpen = BookOpen;
|
||||
readonly MapPin = MapPin;
|
||||
readonly Check = Check;
|
||||
|
||||
campaignId = '';
|
||||
|
||||
// --- État import (streaming) ---
|
||||
importing = false;
|
||||
importPhase = '';
|
||||
importProgress: { current: number; total: number } | null = null;
|
||||
importCounts: { arcs: number; chapters: number; scenes: number } | null = null;
|
||||
importError: string | null = null;
|
||||
/** Vrai une fois la proposition reçue (on affiche l'arbre éditable). */
|
||||
reviewing = false;
|
||||
|
||||
// --- Arbre éditable ---
|
||||
tree: ArcNode[] = [];
|
||||
|
||||
/** Structure actuelle de la campagne (chargée pour la fusion à la revue). */
|
||||
private existingData: CampaignTreeData | null = null;
|
||||
|
||||
// --- État application (création) ---
|
||||
applying = false;
|
||||
applyError: string | null = null;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private service: CampaignImportService,
|
||||
private campaignService: CampaignService,
|
||||
private characterService: CharacterService,
|
||||
private npcService: NpcService,
|
||||
private campaignSidebar: CampaignSidebarService,
|
||||
private pageTitle: PageTitleService
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.campaignId = this.route.snapshot.paramMap.get('campaignId')!;
|
||||
this.pageTitle.set('Importer une campagne');
|
||||
this.campaignSidebar.show(this.campaignId);
|
||||
|
||||
// Pré-chargement de l'arborescence existante (pour fusionner à la revue).
|
||||
// En cas d'échec on dégrade : tout sera considéré comme nouveau.
|
||||
loadCampaignTreeData(this.campaignService, this.campaignId, this.characterService, this.npcService)
|
||||
.pipe(catchError(() => of(null)))
|
||||
.subscribe(data => this.existingData = data);
|
||||
}
|
||||
|
||||
// --- Upload + streaming --------------------------------------------------
|
||||
|
||||
onPdfSelected(event: Event): void {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
input.value = '';
|
||||
if (file) this.importPdf(file);
|
||||
}
|
||||
|
||||
private importPdf(file: File): void {
|
||||
this.importing = true;
|
||||
this.reviewing = false;
|
||||
this.importError = null;
|
||||
this.applyError = null;
|
||||
this.importPhase = 'Extraction du texte…';
|
||||
this.importProgress = null;
|
||||
this.importCounts = null;
|
||||
this.tree = [];
|
||||
|
||||
this.service.importStructureStream(this.campaignId, file).subscribe({
|
||||
next: (ev) => {
|
||||
if (ev.type === 'progress') {
|
||||
if (ev.total === 0) {
|
||||
this.importPhase = 'Extraction du texte…';
|
||||
this.importProgress = null;
|
||||
} else {
|
||||
this.importPhase = `Analyse de la campagne… (${ev.current}/${ev.total})`;
|
||||
this.importProgress = { current: ev.current, total: ev.total };
|
||||
this.importCounts = { arcs: ev.arcCount, chapters: ev.chapterCount, scenes: ev.sceneCount };
|
||||
}
|
||||
} else if (ev.type === 'done') {
|
||||
this.importing = false;
|
||||
this.importPhase = '';
|
||||
this.importProgress = null;
|
||||
if ((ev.arcs ?? []).length === 0) {
|
||||
this.importError = "Aucune structure narrative détectée dans ce PDF.";
|
||||
this.reviewing = false;
|
||||
} else {
|
||||
this.tree = this.buildMergedTree(ev.arcs);
|
||||
this.reviewing = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
error: (err: Error) => {
|
||||
this.importing = false;
|
||||
this.importPhase = '';
|
||||
this.importProgress = null;
|
||||
this.importError = err?.message ? `Échec de l'import : ${err.message}` : "Échec de l'import du PDF.";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// --- Construction de l'arbre fusionné (existant + proposition) -----------
|
||||
|
||||
/**
|
||||
* Construit l'arbre de revue : d'abord l'arborescence ACTUELLE de la campagne
|
||||
* (nœuds `existing`, lecture seule), puis on y fusionne la proposition par NOM
|
||||
* (insensible à la casse). Ce qui matche un nœud existant est rattaché ; ce qui
|
||||
* ne matche pas devient un nouveau nœud éditable.
|
||||
*/
|
||||
private buildMergedTree(proposalArcs: ArcProposal[]): ArcNode[] {
|
||||
const byOrder = (a: { order?: number }, b: { order?: number }) => (a.order ?? 0) - (b.order ?? 0);
|
||||
const arcs: ArcNode[] = [];
|
||||
|
||||
// 1. Arbre existant.
|
||||
const data = this.existingData;
|
||||
if (data) {
|
||||
for (const arc of [...data.arcs].sort(byOrder)) {
|
||||
const chapters: ChapterNode[] = [];
|
||||
for (const ch of [...(data.chaptersByArc[arc.id!] ?? [])].sort(byOrder)) {
|
||||
const scenes: SceneNode[] = [];
|
||||
for (const sc of [...(data.scenesByChapter[ch.id!] ?? [])].sort(byOrder)) {
|
||||
scenes.push(this.existingSceneNode(sc.id!, sc.name, sc.description));
|
||||
}
|
||||
chapters.push({
|
||||
name: ch.name, description: ch.description ?? '', scenes,
|
||||
collapsed: true, existing: true, existingId: ch.id
|
||||
});
|
||||
}
|
||||
arcs.push({
|
||||
name: arc.name, description: arc.description ?? '',
|
||||
type: (arc.type === 'HUB' ? 'HUB' : 'LINEAR'), chapters,
|
||||
collapsed: true, existing: true, existingId: arc.id
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Fusion de la proposition.
|
||||
for (const pa of proposalArcs ?? []) {
|
||||
const match = arcs.find(a => a.existing && this.sameName(a.name, pa.name));
|
||||
if (match) {
|
||||
this.mergeChaptersInto(match, pa.chapters ?? []);
|
||||
match.collapsed = false;
|
||||
} else {
|
||||
arcs.push(this.newArcNode(pa));
|
||||
}
|
||||
}
|
||||
return arcs;
|
||||
}
|
||||
|
||||
private mergeChaptersInto(arc: ArcNode, propChapters: ChapterProposal[]): void {
|
||||
for (const pc of propChapters) {
|
||||
const match = arc.chapters.find(c => c.existing && this.sameName(c.name, pc.name));
|
||||
if (match) {
|
||||
this.mergeScenesInto(match, pc.scenes ?? []);
|
||||
match.collapsed = false;
|
||||
} else {
|
||||
arc.chapters.push(this.newChapterNode(pc));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private mergeScenesInto(chapter: ChapterNode, propScenes: SceneProposal[]): void {
|
||||
for (const ps of propScenes) {
|
||||
// Scène de même nom déjà présente → on ne duplique pas (dédup).
|
||||
if (chapter.scenes.some(s => this.sameName(s.name, ps.name))) continue;
|
||||
chapter.scenes.push(this.newSceneNode(ps));
|
||||
}
|
||||
}
|
||||
|
||||
private sameName(a: string, b: string): boolean {
|
||||
return (a ?? '').trim().toLowerCase() === (b ?? '').trim().toLowerCase();
|
||||
}
|
||||
|
||||
// --- Mappers proposition → nœud NEUF -------------------------------------
|
||||
|
||||
private newArcNode(a: ArcProposal): ArcNode {
|
||||
return {
|
||||
name: a.name ?? '', description: a.description ?? '',
|
||||
type: (a.type === 'HUB' ? 'HUB' : 'LINEAR'),
|
||||
collapsed: false, existing: false,
|
||||
chapters: (a.chapters ?? []).map(c => this.newChapterNode(c))
|
||||
};
|
||||
}
|
||||
|
||||
private newChapterNode(c: ChapterProposal): ChapterNode {
|
||||
return {
|
||||
name: c.name ?? '', description: c.description ?? '',
|
||||
collapsed: false, existing: false,
|
||||
scenes: (c.scenes ?? []).map(s => this.newSceneNode(s))
|
||||
};
|
||||
}
|
||||
|
||||
private newSceneNode(s: SceneProposal): SceneNode {
|
||||
return {
|
||||
name: s.name ?? '', description: s.description ?? '',
|
||||
playerNarration: s.playerNarration ?? '', gmNotes: s.gmNotes ?? '',
|
||||
detailsOpen: false, existing: false,
|
||||
rooms: (s.rooms ?? []).map(r => ({
|
||||
name: r.name ?? '', description: r.description ?? '',
|
||||
enemies: r.enemies ?? '', loot: r.loot ?? ''
|
||||
}))
|
||||
};
|
||||
}
|
||||
|
||||
private existingSceneNode(id: string, name: string, description?: string): SceneNode {
|
||||
return {
|
||||
name, description: description ?? '', playerNarration: '', gmNotes: '',
|
||||
detailsOpen: false, existing: true, existingId: id, rooms: []
|
||||
};
|
||||
}
|
||||
|
||||
setArcType(arc: ArcNode, type: ArcKind): void { arc.type = type; }
|
||||
toggleDetails(scene: SceneNode): void { scene.detailsOpen = !scene.detailsOpen; }
|
||||
addRoom(scene: SceneNode): void {
|
||||
scene.rooms.push({ name: '', description: '', enemies: '', loot: '' });
|
||||
scene.detailsOpen = true;
|
||||
}
|
||||
removeRoom(scene: SceneNode, index: number): void { scene.rooms.splice(index, 1); }
|
||||
|
||||
// --- Édition de l'arbre --------------------------------------------------
|
||||
|
||||
toggleArc(arc: ArcNode): void { arc.collapsed = !arc.collapsed; }
|
||||
toggleChapter(chapter: ChapterNode): void { chapter.collapsed = !chapter.collapsed; }
|
||||
|
||||
addArc(): void {
|
||||
this.tree.push({ name: '', description: '', type: 'LINEAR', chapters: [], collapsed: false, existing: false });
|
||||
}
|
||||
removeArc(index: number): void { this.tree.splice(index, 1); }
|
||||
|
||||
addChapter(arc: ArcNode): void {
|
||||
arc.chapters.push({ name: '', description: '', scenes: [], collapsed: false, existing: false });
|
||||
}
|
||||
removeChapter(arc: ArcNode, index: number): void { arc.chapters.splice(index, 1); }
|
||||
|
||||
addScene(chapter: ChapterNode): void {
|
||||
chapter.scenes.push({
|
||||
name: '', description: '', playerNarration: '', gmNotes: '', rooms: [], detailsOpen: true, existing: false
|
||||
});
|
||||
}
|
||||
removeScene(chapter: ChapterNode, index: number): void { chapter.scenes.splice(index, 1); }
|
||||
|
||||
/** Compteurs des nœuds NOUVEAUX (= ce qui sera réellement créé). */
|
||||
get arcCount(): number { return this.tree.filter(a => !a.existing && a.name.trim()).length; }
|
||||
get chapterCount(): number {
|
||||
return this.tree.reduce((n, a) => n + a.chapters.filter(c => !c.existing && c.name.trim()).length, 0);
|
||||
}
|
||||
get sceneCount(): number {
|
||||
return this.tree.reduce((n, a) =>
|
||||
n + a.chapters.reduce((m, c) => m + c.scenes.filter(s => !s.existing && s.name.trim()).length, 0), 0);
|
||||
}
|
||||
|
||||
/** Vrai s'il y a au moins un nœud nouveau à créer (sinon « Créer » désactivé). */
|
||||
get hasNewContent(): boolean {
|
||||
return this.arcCount > 0 || this.chapterCount > 0 || this.sceneCount > 0;
|
||||
}
|
||||
|
||||
// --- Application (création) ----------------------------------------------
|
||||
|
||||
apply(): void {
|
||||
if (this.applying || !this.hasNewContent) return;
|
||||
this.applying = true;
|
||||
this.applyError = null;
|
||||
|
||||
// On envoie l'arbre fusionné COMPLET (existants + nouveaux) : les nœuds
|
||||
// `existing` portent leur existingId et servent de parents — l'apply ne
|
||||
// recrée que les nœuds sans existingId.
|
||||
const proposal: CampaignImportProposal = {
|
||||
arcs: this.tree
|
||||
.filter(a => a.name.trim())
|
||||
.map(a => ({
|
||||
name: a.name.trim(),
|
||||
description: a.description.trim(),
|
||||
type: a.type,
|
||||
existingId: a.existingId ?? null,
|
||||
chapters: a.chapters
|
||||
.filter(c => c.name.trim())
|
||||
.map(c => ({
|
||||
name: c.name.trim(),
|
||||
description: c.description.trim(),
|
||||
existingId: c.existingId ?? null,
|
||||
scenes: c.scenes
|
||||
.filter(s => s.name.trim())
|
||||
.map(s => ({
|
||||
name: s.name.trim(),
|
||||
description: s.description.trim(),
|
||||
playerNarration: s.playerNarration.trim(),
|
||||
gmNotes: s.gmNotes.trim(),
|
||||
existingId: s.existingId ?? null,
|
||||
rooms: s.rooms
|
||||
.filter(r => r.name.trim())
|
||||
.map(r => ({
|
||||
name: r.name.trim(),
|
||||
description: r.description.trim(),
|
||||
enemies: r.enemies.trim(),
|
||||
loot: r.loot.trim()
|
||||
}))
|
||||
}))
|
||||
}))
|
||||
}))
|
||||
};
|
||||
|
||||
this.service.applyStructure(this.campaignId, proposal).subscribe({
|
||||
next: () => this.router.navigate(['/campaigns', this.campaignId]),
|
||||
error: () => {
|
||||
this.applying = false;
|
||||
this.applyError = "Échec de la création. La campagne existe-t-elle toujours ?";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
cancel(): void {
|
||||
this.router.navigate(['/campaigns', this.campaignId]);
|
||||
}
|
||||
}
|
||||
@@ -1,19 +1,19 @@
|
||||
<div class="chapter-create-page">
|
||||
|
||||
<div class="page-header">
|
||||
<h1>Créer un nouveau chapitre</h1>
|
||||
<p class="arc-ref" *ngIf="arcName">Arc : {{ arcName }}</p>
|
||||
<h1>{{ isHub ? 'Créer une nouvelle quête' : 'Créer un nouveau chapitre' }}</h1>
|
||||
<p class="arc-ref" *ngIf="arcName">{{ isHub ? 'Hub' : 'Arc' }} : {{ arcName }}</p>
|
||||
</div>
|
||||
|
||||
<form [formGroup]="form" (ngSubmit)="submit()" class="chapter-form">
|
||||
|
||||
<div class="field">
|
||||
<label for="chapter-create-name">Nom du chapitre *</label>
|
||||
<label for="chapter-create-name">{{ isHub ? 'Nom de la quête *' : 'Nom du chapitre *' }}</label>
|
||||
<input
|
||||
id="chapter-create-name"
|
||||
type="text"
|
||||
formControlName="name"
|
||||
placeholder="Ex: Chapitre 1: Les Disparitions"
|
||||
[placeholder]="isHub ? 'Ex: Sauver le marchand disparu' : 'Ex: Chapitre 1: Les Disparitions'"
|
||||
[class.invalid]="form.get('name')?.invalid && form.get('name')?.touched"
|
||||
/>
|
||||
</div>
|
||||
@@ -23,7 +23,7 @@
|
||||
<textarea
|
||||
id="chapter-create-description"
|
||||
formControlName="description"
|
||||
placeholder="Décrivez ce chapitre..."
|
||||
[placeholder]="isHub ? 'Décrivez cette quête...' : 'Décrivez ce chapitre...'"
|
||||
rows="5">
|
||||
</textarea>
|
||||
</div>
|
||||
@@ -35,7 +35,7 @@
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn-primary" [disabled]="form.invalid">
|
||||
Créer le chapitre
|
||||
{{ isHub ? 'Créer la quête' : 'Créer le chapitre' }}
|
||||
</button>
|
||||
<button type="button" class="btn-secondary" (click)="cancel()">Annuler</button>
|
||||
</div>
|
||||
|
||||
@@ -31,6 +31,8 @@ export class ChapterCreateComponent implements OnInit, OnDestroy {
|
||||
campaignId = '';
|
||||
arcId = '';
|
||||
arcName = '';
|
||||
/** Arc parent de type hub : un "chapitre" y est présenté comme une "quête". */
|
||||
isHub = false;
|
||||
private existingChapterCount = 0;
|
||||
|
||||
constructor(
|
||||
@@ -62,6 +64,7 @@ export class ChapterCreateComponent implements OnInit, OnDestroy {
|
||||
}).subscribe(({ campaign, allCampaigns, treeData }) => {
|
||||
const currentArc = treeData.arcs.find(a => a.id === this.arcId);
|
||||
this.arcName = currentArc?.name ?? '';
|
||||
this.isHub = currentArc?.type === 'HUB';
|
||||
this.existingChapterCount = treeData.chaptersByArc[this.arcId]?.length ?? 0;
|
||||
|
||||
this.layoutService.show(buildCampaignSidebarConfig(campaign, allCampaigns, treeData, this.campaignId));
|
||||
|
||||
@@ -5,7 +5,6 @@ import { FormsModule } from '@angular/forms';
|
||||
import { LucideAngularModule, Save, ArrowLeft, User, Trash2, Sparkles } from 'lucide-angular';
|
||||
import { CharacterService } from '../../../services/character.service';
|
||||
import { CampaignService } from '../../../services/campaign.service';
|
||||
import { PlaythroughService } from '../../../services/playthrough.service';
|
||||
import { GameSystemService } from '../../../services/game-system.service';
|
||||
import { CampaignSidebarService } from '../../../services/campaign-sidebar.service';
|
||||
import { TemplateField } from '../../../services/template.model';
|
||||
@@ -49,7 +48,7 @@ export class CharacterEditComponent implements OnInit {
|
||||
toggleChat(): void { this.chatOpen = !this.chatOpen; }
|
||||
|
||||
campaignId: string | null = null;
|
||||
/** Partie cible — déduite du 1er Playthrough de la campagne. */
|
||||
/** Partie propriétaire du PJ — lue depuis la route (les PJ sont scoping Playthrough). */
|
||||
playthroughId: string | null = null;
|
||||
characterId: string | null = null;
|
||||
|
||||
@@ -67,7 +66,6 @@ export class CharacterEditComponent implements OnInit {
|
||||
private router: Router,
|
||||
private service: CharacterService,
|
||||
private campaignService: CampaignService,
|
||||
private playthroughService: PlaythroughService,
|
||||
private gameSystemService: GameSystemService,
|
||||
private campaignSidebar: CampaignSidebarService,
|
||||
private confirmDialog: ConfirmDialogService
|
||||
@@ -76,15 +74,12 @@ export class CharacterEditComponent implements OnInit {
|
||||
ngOnInit(): void {
|
||||
const params = this.route.snapshot.paramMap;
|
||||
this.campaignId = params.get('campaignId');
|
||||
this.playthroughId = params.get('playthroughId');
|
||||
this.characterId = params.get('characterId');
|
||||
|
||||
if (this.campaignId) {
|
||||
this.loadTemplateForCampaign(this.campaignId);
|
||||
this.campaignSidebar.show(this.campaignId);
|
||||
// Résolution Partie par défaut (1er Playthrough) — nécessaire pour create/update.
|
||||
this.playthroughService.listByCampaign(this.campaignId).subscribe({
|
||||
next: list => { this.playthroughId = list.length > 0 ? list[0].id! : null; }
|
||||
});
|
||||
}
|
||||
|
||||
if (this.characterId) {
|
||||
@@ -138,7 +133,7 @@ export class CharacterEditComponent implements OnInit {
|
||||
req.subscribe({
|
||||
next: (saved) => {
|
||||
if (isCreation && saved.id) {
|
||||
this.router.navigate(['/campaigns', this.campaignId, 'characters', saved.id]);
|
||||
this.router.navigate(['/campaigns', this.campaignId, 'playthroughs', this.playthroughId, 'characters', saved.id]);
|
||||
} else {
|
||||
this.back();
|
||||
}
|
||||
@@ -165,7 +160,9 @@ export class CharacterEditComponent implements OnInit {
|
||||
}
|
||||
|
||||
back(): void {
|
||||
if (this.campaignId) {
|
||||
if (this.campaignId && this.playthroughId) {
|
||||
this.router.navigate(['/campaigns', this.campaignId, 'playthroughs', this.playthroughId]);
|
||||
} else if (this.campaignId) {
|
||||
this.router.navigate(['/campaigns', this.campaignId]);
|
||||
} else {
|
||||
this.router.navigate(['/campaigns']);
|
||||
|
||||
@@ -13,7 +13,7 @@ import { AiChatDrawerComponent } from '../../../shared/ai-chat-drawer/ai-chat-dr
|
||||
|
||||
/**
|
||||
* Vue lecture seule "WorldAnvil" d'une fiche PJ.
|
||||
* Route : /campaigns/:campaignId/characters/:characterId
|
||||
* Route : /campaigns/:campaignId/playthroughs/:playthroughId/characters/:characterId
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-character-view',
|
||||
@@ -28,6 +28,7 @@ export class CharacterViewComponent implements OnInit {
|
||||
readonly Sparkles = Sparkles;
|
||||
|
||||
campaignId: string | null = null;
|
||||
playthroughId: string | null = null;
|
||||
characterId: string | null = null;
|
||||
|
||||
character: Character | null = null;
|
||||
@@ -48,6 +49,7 @@ export class CharacterViewComponent implements OnInit {
|
||||
ngOnInit(): void {
|
||||
const params = this.route.snapshot.paramMap;
|
||||
this.campaignId = params.get('campaignId');
|
||||
this.playthroughId = params.get('playthroughId');
|
||||
this.characterId = params.get('characterId');
|
||||
if (this.characterId) {
|
||||
this.service.getById(this.characterId).subscribe({
|
||||
@@ -68,13 +70,15 @@ export class CharacterViewComponent implements OnInit {
|
||||
}
|
||||
|
||||
edit(): void {
|
||||
if (this.campaignId && this.characterId) {
|
||||
this.router.navigate(['/campaigns', this.campaignId, 'characters', this.characterId, 'edit']);
|
||||
if (this.campaignId && this.playthroughId && this.characterId) {
|
||||
this.router.navigate(['/campaigns', this.campaignId, 'playthroughs', this.playthroughId, 'characters', this.characterId, 'edit']);
|
||||
}
|
||||
}
|
||||
|
||||
back(): void {
|
||||
if (this.campaignId) {
|
||||
if (this.campaignId && this.playthroughId) {
|
||||
this.router.navigate(['/campaigns', this.campaignId, 'playthroughs', this.playthroughId]);
|
||||
} else if (this.campaignId) {
|
||||
this.router.navigate(['/campaigns', this.campaignId]);
|
||||
} else {
|
||||
this.router.navigate(['/campaigns']);
|
||||
|
||||
@@ -42,11 +42,17 @@
|
||||
|
||||
<!-- PJ -->
|
||||
<section class="block">
|
||||
<h2><lucide-icon [img]="Users" [size]="18"></lucide-icon> Personnages joueurs</h2>
|
||||
<div class="block-header">
|
||||
<h2><lucide-icon [img]="Users" [size]="18"></lucide-icon> Personnages joueurs</h2>
|
||||
<button type="button" class="btn-add" (click)="createCharacter()">
|
||||
<lucide-icon [img]="Plus" [size]="14"></lucide-icon>
|
||||
Nouveau PJ
|
||||
</button>
|
||||
</div>
|
||||
<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>
|
||||
<a [routerLink]="['/campaigns', campaignId, 'playthroughs', playthroughId, 'characters', c.id]">{{ c.name }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
@@ -46,6 +46,32 @@
|
||||
}
|
||||
}
|
||||
|
||||
.block-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.7rem;
|
||||
|
||||
h2 { margin: 0; }
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: #6c63ff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover { background: #5b52e0; }
|
||||
}
|
||||
|
||||
.empty {
|
||||
font-size: 0.88rem;
|
||||
color: var(--color-text-muted, #777);
|
||||
|
||||
@@ -3,7 +3,7 @@ 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 { LucideAngularModule, ArrowLeft, Play, Flag, Users, Trash2, Pencil, Plus } from 'lucide-angular';
|
||||
import { CampaignService } from '../../../services/campaign.service';
|
||||
import { CharacterService } from '../../../services/character.service';
|
||||
import { NpcService } from '../../../services/npc.service';
|
||||
@@ -36,6 +36,7 @@ export class PlaythroughDetailComponent implements OnInit, OnDestroy {
|
||||
readonly Users = Users;
|
||||
readonly Trash2 = Trash2;
|
||||
readonly Pencil = Pencil;
|
||||
readonly Plus = Plus;
|
||||
|
||||
campaignId = '';
|
||||
playthroughId = '';
|
||||
@@ -105,6 +106,11 @@ export class PlaythroughDetailComponent implements OnInit, OnDestroy {
|
||||
this.router.navigate(['/sessions', s.id]);
|
||||
}
|
||||
|
||||
/** Crée un PJ rattaché à CETTE Partie (route scoping Playthrough). */
|
||||
createCharacter(): void {
|
||||
this.router.navigate(['/campaigns', this.campaignId, 'playthroughs', this.playthroughId, 'characters', 'create']);
|
||||
}
|
||||
|
||||
openFlags(): void {
|
||||
this.router.navigate(['/campaigns', this.campaignId, 'playthroughs', this.playthroughId, 'flags']);
|
||||
}
|
||||
|
||||
@@ -36,6 +36,33 @@
|
||||
selon ce qu'elle génère (combat → Combat/Monstres, PNJ → Classes, arc → Lore/Factions).
|
||||
</p>
|
||||
|
||||
<!-- Import d'un PDF de règles : l'IA propose un découpage en sections,
|
||||
que l'utilisateur révise ci-dessous avant d'enregistrer. -->
|
||||
<div class="import-row">
|
||||
<input #pdfInput type="file" accept="application/pdf,.pdf" hidden (change)="onPdfSelected($event)" />
|
||||
<button type="button" class="btn-import" [disabled]="importing" (click)="pdfInput.click()">
|
||||
<lucide-icon [img]="Upload" [size]="14"></lucide-icon>
|
||||
{{ importing ? 'Import en cours…' : 'Importer un PDF de règles' }}
|
||||
</button>
|
||||
<span class="import-hint" *ngIf="!importing">L'IA propose un découpage en sections — vous révisez avant d'enregistrer.</span>
|
||||
</div>
|
||||
|
||||
<!-- Progression live de l'import (étape + barre + sections trouvées). -->
|
||||
<div class="import-progress" *ngIf="importing">
|
||||
<p class="import-phase">{{ importPhase }}</p>
|
||||
<div class="progress-bar" *ngIf="importProgress">
|
||||
<div class="progress-fill"
|
||||
[style.width.%]="importProgress.total ? (importProgress.current / importProgress.total) * 100 : 0">
|
||||
</div>
|
||||
</div>
|
||||
<p class="import-found" *ngIf="importFound.length">
|
||||
Sections trouvées : {{ importFound.join(' · ') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="import-note" *ngIf="importNote">{{ importNote }}</p>
|
||||
<p class="import-error" *ngIf="importError">{{ importError }}</p>
|
||||
|
||||
<div class="section-list">
|
||||
<div class="section-card" *ngFor="let section of sections; let i = index" [class.collapsed]="section.collapsed">
|
||||
|
||||
|
||||
@@ -95,6 +95,94 @@
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
// --- Import PDF de règles ---------------------------------------------------
|
||||
.import-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.btn-import {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.5rem 0.9rem;
|
||||
background: #1f2937;
|
||||
color: #e5e7eb;
|
||||
border: 1px solid #374151;
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
|
||||
&:hover:not(:disabled) { background: #273244; border-color: #6c63ff; }
|
||||
&:disabled { opacity: 0.6; cursor: progress; }
|
||||
}
|
||||
|
||||
.import-hint {
|
||||
color: #6b7280;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.import-progress {
|
||||
margin: -0.4rem 0 1rem;
|
||||
padding: 0.7rem 0.85rem;
|
||||
background: #0b1220;
|
||||
border: 1px solid #1f2937;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.import-phase {
|
||||
margin: 0 0 0.5rem;
|
||||
color: #c4b5fd;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 6px;
|
||||
background: #1f2937;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: #6c63ff;
|
||||
border-radius: 999px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.import-found {
|
||||
margin: 0.55rem 0 0;
|
||||
color: #9ca3af;
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.import-note {
|
||||
margin: -0.4rem 0 1rem;
|
||||
padding: 0.55rem 0.8rem;
|
||||
background: rgba(108, 99, 255, 0.12);
|
||||
border: 1px solid rgba(108, 99, 255, 0.35);
|
||||
border-radius: 8px;
|
||||
color: #c4b5fd;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.import-error {
|
||||
margin: -0.4rem 0 1rem;
|
||||
padding: 0.55rem 0.8rem;
|
||||
background: rgba(248, 113, 113, 0.1);
|
||||
border: 1px solid rgba(248, 113, 113, 0.35);
|
||||
border-radius: 8px;
|
||||
color: #fca5a5;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.section-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -2,7 +2,7 @@ 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 { LucideAngularModule, Save, ArrowLeft, Dices, Plus, Trash2, ChevronDown, ChevronRight, Upload } from 'lucide-angular';
|
||||
import { GameSystemService } from '../../services/game-system.service';
|
||||
import { TemplateField } from '../../services/template.model';
|
||||
import { TemplateFieldsEditorComponent } from '../../shared/template-fields-editor/template-fields-editor.component';
|
||||
@@ -54,9 +54,23 @@ export class GameSystemEditComponent implements OnInit {
|
||||
readonly Trash2 = Trash2;
|
||||
readonly ChevronDown = ChevronDown;
|
||||
readonly ChevronRight = ChevronRight;
|
||||
readonly Upload = Upload;
|
||||
|
||||
id: string | null = null;
|
||||
|
||||
/** Import PDF en cours (appel LLM long) → désactive le bouton + spinner. */
|
||||
importing = false;
|
||||
/** Message de succès post-import (sections ajoutées, pages, OCR). */
|
||||
importNote: string | null = null;
|
||||
/** Message d'erreur d'import (Brain injoignable, PDF illisible…). */
|
||||
importError: string | null = null;
|
||||
/** Libellé de l'étape courante (« Extraction… », « Analyse… (3/12) »). */
|
||||
importPhase = '';
|
||||
/** Avancement de la structuration ; null pendant l'extraction (total inconnu). */
|
||||
importProgress: { current: number; total: number } | null = null;
|
||||
/** Titres de sections trouvés au fil de l'eau (affichage live). */
|
||||
importFound: string[] = [];
|
||||
|
||||
name = '';
|
||||
description = '';
|
||||
author = '';
|
||||
@@ -108,6 +122,96 @@ export class GameSystemEditComponent implements OnInit {
|
||||
this.sections.push({ title: '', content: '', collapsed: false });
|
||||
}
|
||||
|
||||
// --- Import d'un PDF de règles -------------------------------------------
|
||||
|
||||
/** Déclenché par le <input file> caché : lance l'import du PDF choisi. */
|
||||
onPdfSelected(event: Event): void {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
// Reset de la valeur : re-sélectionner le même fichier doit re-déclencher.
|
||||
input.value = '';
|
||||
if (file) this.importPdf(file);
|
||||
}
|
||||
|
||||
private importPdf(file: File): void {
|
||||
this.importing = true;
|
||||
this.importNote = null;
|
||||
this.importError = null;
|
||||
this.importPhase = 'Extraction du texte…';
|
||||
this.importProgress = null;
|
||||
this.importFound = [];
|
||||
|
||||
this.service.importRulesStream(file).subscribe({
|
||||
next: (ev) => {
|
||||
if (ev.type === 'progress') {
|
||||
if (ev.total === 0) {
|
||||
// Phase d'extraction (total encore inconnu).
|
||||
this.importPhase = 'Extraction du texte…';
|
||||
this.importProgress = null;
|
||||
} else {
|
||||
this.importPhase = `Analyse des règles… (${ev.current}/${ev.total})`;
|
||||
this.importProgress = { current: ev.current, total: ev.total };
|
||||
for (const t of ev.newSectionTitles) {
|
||||
if (!this.importFound.includes(t)) this.importFound.push(t);
|
||||
}
|
||||
}
|
||||
} else if (ev.type === 'done') {
|
||||
this.finishImport(ev.sections, ev.pageCount, ev.ocrPageCount);
|
||||
}
|
||||
},
|
||||
error: (err: Error) => {
|
||||
this.resetImportProgress();
|
||||
this.importError = err?.message
|
||||
? `Échec de l'import : ${err.message}`
|
||||
: "Échec de l'import du PDF.";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private finishImport(sections: Record<string, string>, pageCount: number, ocrPageCount: number): void {
|
||||
this.resetImportProgress();
|
||||
const added = this.mergeImportedSections(sections);
|
||||
if (added === 0) {
|
||||
this.importError = "Aucune règle exploitable n'a été extraite de ce PDF "
|
||||
+ "(scan sans OCR, ou contenu non reconnu).";
|
||||
return;
|
||||
}
|
||||
const ocr = ocrPageCount > 0 ? ` (dont ${ocrPageCount} page(s) via OCR)` : '';
|
||||
this.importNote = `${added} section(s) proposée(s) depuis ${pageCount} page(s)${ocr}. `
|
||||
+ `Relisez et ajustez ci-dessous avant d'enregistrer.`;
|
||||
}
|
||||
|
||||
private resetImportProgress(): void {
|
||||
this.importing = false;
|
||||
this.importPhase = '';
|
||||
this.importProgress = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fusionne les sections proposées dans l'éditeur. Section de même titre
|
||||
* (insensible à la casse) → contenu ajouté à la suite ; sinon nouvelle carte.
|
||||
* Retourne le nombre de sections effectivement intégrées.
|
||||
*/
|
||||
private mergeImportedSections(sections: Record<string, string>): number {
|
||||
let count = 0;
|
||||
for (const [rawTitle, rawContent] of Object.entries(sections ?? {})) {
|
||||
const title = (rawTitle ?? '').trim();
|
||||
const content = (rawContent ?? '').trim();
|
||||
if (!title || !content) continue;
|
||||
const existing = this.sections.find(
|
||||
s => s.title.trim().toLowerCase() === title.toLowerCase()
|
||||
);
|
||||
if (existing) {
|
||||
existing.content = `${existing.content.trim()}\n\n${content}`.trim();
|
||||
existing.collapsed = false;
|
||||
} else {
|
||||
this.sections.push({ title, content, collapsed: false });
|
||||
}
|
||||
count++;
|
||||
}
|
||||
return count;
|
||||
}
|
||||
|
||||
removeSection(index: number): void {
|
||||
this.sections.splice(index, 1);
|
||||
}
|
||||
|
||||
108
web/src/app/services/campaign-adapt.service.ts
Normal file
108
web/src/app/services/campaign-adapt.service.ts
Normal file
@@ -0,0 +1,108 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
/** Évènements du flux SSE de conseils d'adaptation. */
|
||||
export type AdaptStreamEvent =
|
||||
| { type: 'token'; value: string }
|
||||
| { type: 'done' }
|
||||
| { type: 'error'; message: string };
|
||||
|
||||
/** Message de la conversation d'adaptation. */
|
||||
export interface AdaptMessage {
|
||||
role: 'user' | 'assistant';
|
||||
content: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Service : adaptation conversationnelle d'un PDF à une campagne (streamée).
|
||||
* fetch() + SSE (POST multipart impossible avec EventSource), décodage ligne à ligne.
|
||||
*/
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class CampaignAdaptService {
|
||||
|
||||
adviseStream(campaignId: string, file: File, messages: AdaptMessage[]): Observable<AdaptStreamEvent> {
|
||||
return new Observable<AdaptStreamEvent>((subscriber) => {
|
||||
const controller = new AbortController();
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
form.append('messages', JSON.stringify(messages ?? []));
|
||||
|
||||
fetch(`/api/campaigns/${campaignId}/adapt-pdf/stream`, {
|
||||
method: 'POST',
|
||||
headers: { 'Accept': 'text/event-stream' },
|
||||
body: form,
|
||||
signal: controller.signal
|
||||
})
|
||||
.then(async (response) => {
|
||||
if (!response.ok || !response.body) {
|
||||
subscriber.error(new Error(`HTTP ${response.status}`));
|
||||
return;
|
||||
}
|
||||
await this.consume(response.body, subscriber);
|
||||
})
|
||||
.catch((err) => {
|
||||
if (controller.signal.aborted) return;
|
||||
subscriber.error(err);
|
||||
});
|
||||
|
||||
return () => controller.abort();
|
||||
});
|
||||
}
|
||||
|
||||
private async consume(
|
||||
body: ReadableStream<Uint8Array>,
|
||||
subscriber: { next: (e: AdaptStreamEvent) => void; error: (e: unknown) => void; complete: () => void }
|
||||
): Promise<void> {
|
||||
const reader = body.getReader();
|
||||
const decoder = new TextDecoder('utf-8');
|
||||
let buffer = '';
|
||||
let currentEvent: string | null = null;
|
||||
let currentData = '';
|
||||
|
||||
const dispatch = () => {
|
||||
const name = currentEvent ?? 'message';
|
||||
if (name === 'error') {
|
||||
let message = "Échec de l'adaptation.";
|
||||
try { message = (JSON.parse(currentData) as { message?: string }).message ?? message; } catch { /* défaut */ }
|
||||
subscriber.error(new Error(message));
|
||||
} else if (name === 'done') {
|
||||
subscriber.next({ type: 'done' });
|
||||
subscriber.complete();
|
||||
} else if (name === 'token') {
|
||||
try {
|
||||
const tok = (JSON.parse(currentData) as { token?: string }).token;
|
||||
if (tok) subscriber.next({ type: 'token', value: tok });
|
||||
} catch { /* fragment ignoré */ }
|
||||
}
|
||||
currentEvent = null;
|
||||
currentData = '';
|
||||
};
|
||||
|
||||
try {
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
buffer += decoder.decode(value, { stream: true });
|
||||
let idx: number;
|
||||
while ((idx = buffer.indexOf('\n')) >= 0) {
|
||||
const line = buffer.slice(0, idx).replace(/\r$/, '');
|
||||
buffer = buffer.slice(idx + 1);
|
||||
if (line === '') {
|
||||
if (currentEvent !== null || currentData !== '') dispatch();
|
||||
continue;
|
||||
}
|
||||
if (line.startsWith('event:')) {
|
||||
currentEvent = line.slice(6).trim();
|
||||
} else if (line.startsWith('data:')) {
|
||||
const chunk = line.slice(5).replace(/^ /, '');
|
||||
currentData = currentData ? `${currentData}\n${chunk}` : chunk;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (currentEvent !== null || currentData !== '') dispatch();
|
||||
subscriber.complete();
|
||||
} catch (err) {
|
||||
subscriber.error(err);
|
||||
}
|
||||
}
|
||||
}
|
||||
72
web/src/app/services/campaign-import.model.ts
Normal file
72
web/src/app/services/campaign-import.model.ts
Normal file
@@ -0,0 +1,72 @@
|
||||
/**
|
||||
* Types de l'import de PDF de campagne (arbre arc → chapitre → scène).
|
||||
* Jumeaux des records Java (CampaignImportProposal / CampaignImportProgress).
|
||||
*/
|
||||
|
||||
export interface RoomProposal {
|
||||
name: string;
|
||||
description: string;
|
||||
enemies: string;
|
||||
loot: string;
|
||||
}
|
||||
|
||||
export interface SceneProposal {
|
||||
name: string;
|
||||
description: string;
|
||||
/** Texte d'encadré « à lire aux joueurs ». */
|
||||
playerNarration: string;
|
||||
/** Secrets / développement MJ. */
|
||||
gmNotes: string;
|
||||
/** Non vide ⇒ la scène est un lieu explorable (donjon). */
|
||||
rooms: RoomProposal[];
|
||||
/** ID si la scène existe déjà (revue pré-chargée) ; absent = à créer. */
|
||||
existingId?: string | null;
|
||||
}
|
||||
|
||||
export interface ChapterProposal {
|
||||
name: string;
|
||||
description: string;
|
||||
scenes: SceneProposal[];
|
||||
existingId?: string | null;
|
||||
}
|
||||
|
||||
export type ArcKind = 'LINEAR' | 'HUB';
|
||||
|
||||
export interface ArcProposal {
|
||||
name: string;
|
||||
description: string;
|
||||
type: ArcKind;
|
||||
chapters: ChapterProposal[];
|
||||
existingId?: string | null;
|
||||
}
|
||||
|
||||
export interface CampaignImportProposal {
|
||||
arcs: ArcProposal[];
|
||||
}
|
||||
|
||||
/** Récapitulatif renvoyé après création effective des entités. */
|
||||
export interface CampaignImportApplyResult {
|
||||
arcsCreated: number;
|
||||
chaptersCreated: number;
|
||||
scenesCreated: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Évènements du flux SSE d'import streamé.
|
||||
* - progress : avancement (total=0 ⇒ extraction en cours).
|
||||
* - done : arbre proposé (à réviser).
|
||||
* - error : message d'erreur côté serveur.
|
||||
*/
|
||||
export type CampaignImportStreamEvent =
|
||||
| {
|
||||
type: 'progress';
|
||||
current: number;
|
||||
total: number;
|
||||
pageCount: number;
|
||||
ocrPageCount: number;
|
||||
arcCount: number;
|
||||
chapterCount: number;
|
||||
sceneCount: number;
|
||||
}
|
||||
| { type: 'done'; arcs: ArcProposal[] }
|
||||
| { type: 'error'; message: string };
|
||||
113
web/src/app/services/campaign-import.service.ts
Normal file
113
web/src/app/services/campaign-import.service.ts
Normal file
@@ -0,0 +1,113 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable } from 'rxjs';
|
||||
import {
|
||||
CampaignImportApplyResult,
|
||||
CampaignImportProposal,
|
||||
CampaignImportStreamEvent
|
||||
} from './campaign-import.model';
|
||||
|
||||
/**
|
||||
* Service HTTP pour l'import d'un PDF de campagne.
|
||||
*
|
||||
* `importStructureStream` utilise fetch() (POST multipart + SSE, impossible
|
||||
* avec EventSource) et décode le flux ligne par ligne, comme le chat.
|
||||
* `applyStructure` poste l'arbre révisé pour créer les entités.
|
||||
*/
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class CampaignImportService {
|
||||
constructor(private http: HttpClient) {}
|
||||
|
||||
importStructureStream(campaignId: string, file: File): Observable<CampaignImportStreamEvent> {
|
||||
return new Observable<CampaignImportStreamEvent>((subscriber) => {
|
||||
const controller = new AbortController();
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
|
||||
fetch(`/api/campaigns/${campaignId}/import-structure/stream`, {
|
||||
method: 'POST',
|
||||
headers: { 'Accept': 'text/event-stream' },
|
||||
body: form,
|
||||
signal: controller.signal
|
||||
})
|
||||
.then(async (response) => {
|
||||
if (!response.ok || !response.body) {
|
||||
subscriber.error(new Error(`HTTP ${response.status}`));
|
||||
return;
|
||||
}
|
||||
await this.consumeSse(response.body, subscriber);
|
||||
})
|
||||
.catch((err) => {
|
||||
if (controller.signal.aborted) return;
|
||||
subscriber.error(err);
|
||||
});
|
||||
|
||||
return () => controller.abort();
|
||||
});
|
||||
}
|
||||
|
||||
applyStructure(campaignId: string, proposal: CampaignImportProposal): Observable<CampaignImportApplyResult> {
|
||||
return this.http.post<CampaignImportApplyResult>(
|
||||
`/api/campaigns/${campaignId}/import-structure/apply`, proposal);
|
||||
}
|
||||
|
||||
/** Décode un ReadableStream SSE et émet les évènements d'import typés. */
|
||||
private async consumeSse(
|
||||
body: ReadableStream<Uint8Array>,
|
||||
subscriber: { next: (e: CampaignImportStreamEvent) => void; error: (e: unknown) => void; complete: () => void }
|
||||
): Promise<void> {
|
||||
const reader = body.getReader();
|
||||
const decoder = new TextDecoder('utf-8');
|
||||
let buffer = '';
|
||||
let currentEvent: string | null = null;
|
||||
let currentData = '';
|
||||
|
||||
const dispatch = () => {
|
||||
const name = currentEvent ?? 'message';
|
||||
if (name === 'error') {
|
||||
let message = 'Échec de l\'import.';
|
||||
try { message = (JSON.parse(currentData) as { message?: string }).message ?? message; } catch { /* défaut */ }
|
||||
subscriber.error(new Error(message));
|
||||
} else if (name === 'progress' || name === 'done') {
|
||||
try {
|
||||
const obj = JSON.parse(currentData);
|
||||
if (name === 'done') {
|
||||
subscriber.next({ type: 'done', arcs: obj.arcs ?? [] });
|
||||
subscriber.complete();
|
||||
} else {
|
||||
subscriber.next({ type: 'progress', ...obj });
|
||||
}
|
||||
} catch { /* bloc malformé ignoré */ }
|
||||
}
|
||||
currentEvent = null;
|
||||
currentData = '';
|
||||
};
|
||||
|
||||
try {
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
buffer += decoder.decode(value, { stream: true });
|
||||
let idx: number;
|
||||
while ((idx = buffer.indexOf('\n')) >= 0) {
|
||||
const line = buffer.slice(0, idx).replace(/\r$/, '');
|
||||
buffer = buffer.slice(idx + 1);
|
||||
if (line === '') {
|
||||
if (currentEvent !== null || currentData !== '') dispatch();
|
||||
continue;
|
||||
}
|
||||
if (line.startsWith('event:')) {
|
||||
currentEvent = line.slice(6).trim();
|
||||
} else if (line.startsWith('data:')) {
|
||||
const chunk = line.slice(5).replace(/^ /, '');
|
||||
currentData = currentData ? `${currentData}\n${chunk}` : chunk;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (currentEvent !== null || currentData !== '') dispatch();
|
||||
subscriber.complete();
|
||||
} catch (err) {
|
||||
subscriber.error(err);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -18,6 +18,28 @@ export interface GameSystem {
|
||||
isPublic?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Réponse de l'import d'un PDF de règles : proposition de sections à réviser.
|
||||
* `sections` = {titre → contenu markdown}. `ocrPageCount` > 0 ⇒ le PDF était
|
||||
* (au moins partiellement) un scan passé à l'OCR.
|
||||
*/
|
||||
export interface RulesImportResponse {
|
||||
sections: Record<string, string>;
|
||||
pageCount: number;
|
||||
ocrPageCount: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Évènements du flux SSE d'import streamé.
|
||||
* - progress : avancement (total=0 ⇒ phase d'extraction en cours).
|
||||
* - done : résultat final (sections proposées).
|
||||
* - error : message d'erreur côté serveur.
|
||||
*/
|
||||
export type RulesImportStreamEvent =
|
||||
| { type: 'progress'; current: number; total: number; pageCount: number; ocrPageCount: number; newSectionTitles: string[] }
|
||||
| { type: 'done'; sections: Record<string, string>; pageCount: number; ocrPageCount: number }
|
||||
| { type: 'error'; message: string };
|
||||
|
||||
/** Payload de creation/mise a jour (sans id). */
|
||||
export interface GameSystemCreate {
|
||||
name: string;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient, HttpParams } from '@angular/common/http';
|
||||
import { Observable } from 'rxjs';
|
||||
import { GameSystem, GameSystemCreate } from './game-system.model';
|
||||
import { GameSystem, GameSystemCreate, RulesImportResponse, RulesImportStreamEvent } from './game-system.model';
|
||||
|
||||
/**
|
||||
* Service HTTP pour les GameSystems (systèmes de JDR).
|
||||
@@ -36,4 +36,109 @@ export class GameSystemService {
|
||||
const params = new HttpParams().set('q', q);
|
||||
return this.http.get<GameSystem[]>(`${this.apiUrl}/search`, { params });
|
||||
}
|
||||
|
||||
/**
|
||||
* Importe un PDF de règles : renvoie une PROPOSITION de sections (titre →
|
||||
* markdown). Rien n'est persisté côté serveur — l'appelant injecte les
|
||||
* sections dans l'éditeur pour révision avant enregistrement.
|
||||
*/
|
||||
importRules(file: File): Observable<RulesImportResponse> {
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
return this.http.post<RulesImportResponse>(`${this.apiUrl}/import-rules`, form);
|
||||
}
|
||||
|
||||
/**
|
||||
* Variante streamée : émet l'avancement au fil de l'eau puis `done`.
|
||||
* On utilise fetch() (pas EventSource : POST + multipart impossibles avec
|
||||
* EventSource) et on décode le flux SSE ligne par ligne. Annuler la
|
||||
* subscription annule le fetch (AbortController).
|
||||
*/
|
||||
importRulesStream(file: File): Observable<RulesImportStreamEvent> {
|
||||
return new Observable<RulesImportStreamEvent>((subscriber) => {
|
||||
const controller = new AbortController();
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
|
||||
fetch(`${this.apiUrl}/import-rules/stream`, {
|
||||
method: 'POST',
|
||||
headers: { 'Accept': 'text/event-stream' },
|
||||
body: form,
|
||||
signal: controller.signal
|
||||
})
|
||||
.then(async (response) => {
|
||||
if (!response.ok || !response.body) {
|
||||
subscriber.error(new Error(`HTTP ${response.status}`));
|
||||
return;
|
||||
}
|
||||
await this.consumeImportSse(response.body, subscriber);
|
||||
})
|
||||
.catch((err) => {
|
||||
if (controller.signal.aborted) return;
|
||||
subscriber.error(err);
|
||||
});
|
||||
|
||||
return () => controller.abort();
|
||||
});
|
||||
}
|
||||
|
||||
/** Décode un ReadableStream SSE et émet les évènements d'import typés. */
|
||||
private async consumeImportSse(
|
||||
body: ReadableStream<Uint8Array>,
|
||||
subscriber: { next: (e: RulesImportStreamEvent) => void; error: (e: unknown) => void; complete: () => void }
|
||||
): Promise<void> {
|
||||
const reader = body.getReader();
|
||||
const decoder = new TextDecoder('utf-8');
|
||||
let buffer = '';
|
||||
let currentEvent: string | null = null;
|
||||
let currentData = '';
|
||||
|
||||
const dispatch = () => {
|
||||
const name = currentEvent ?? 'message';
|
||||
if (name === 'error') {
|
||||
let message = 'Échec de l\'import.';
|
||||
try { message = (JSON.parse(currentData) as { message?: string }).message ?? message; } catch { /* garde le défaut */ }
|
||||
subscriber.error(new Error(message));
|
||||
} else if (name === 'progress' || name === 'done') {
|
||||
try {
|
||||
const obj = JSON.parse(currentData);
|
||||
if (name === 'done') {
|
||||
subscriber.next({ type: 'done', ...obj });
|
||||
subscriber.complete();
|
||||
} else {
|
||||
subscriber.next({ type: 'progress', ...obj });
|
||||
}
|
||||
} catch { /* bloc malformé ignoré */ }
|
||||
}
|
||||
currentEvent = null;
|
||||
currentData = '';
|
||||
};
|
||||
|
||||
try {
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
buffer += decoder.decode(value, { stream: true });
|
||||
let idx: number;
|
||||
while ((idx = buffer.indexOf('\n')) >= 0) {
|
||||
const line = buffer.slice(0, idx).replace(/\r$/, '');
|
||||
buffer = buffer.slice(idx + 1);
|
||||
if (line === '') {
|
||||
if (currentEvent !== null || currentData !== '') dispatch();
|
||||
continue;
|
||||
}
|
||||
if (line.startsWith('event:')) {
|
||||
currentEvent = line.slice(6).trim();
|
||||
} else if (line.startsWith('data:')) {
|
||||
const chunk = line.slice(5).replace(/^ /, '');
|
||||
currentData = currentData ? `${currentData}\n${chunk}` : chunk;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (currentEvent !== null || currentData !== '') dispatch();
|
||||
subscriber.complete();
|
||||
} catch (err) {
|
||||
subscriber.error(err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -73,6 +73,12 @@ export interface BottomPanel {
|
||||
|
||||
export interface SecondarySidebarConfig {
|
||||
title: string;
|
||||
/**
|
||||
* Si défini, le titre devient cliquable et navigue vers cette route
|
||||
* (ex: accueil de la campagne depuis n'importe quelle sous-page). Absent =
|
||||
* titre statique (cas du Lore).
|
||||
*/
|
||||
titleRoute?: string;
|
||||
items: TreeItem[];
|
||||
createActions: SidebarAction[];
|
||||
globalItems: GlobalItem[];
|
||||
|
||||
@@ -13,6 +13,10 @@ export interface AppSettings {
|
||||
onemin_model: string;
|
||||
onemin_api_key_set: boolean;
|
||||
llm_num_ctx: number;
|
||||
/** Taille cible d'un morceau (tokens) pour l'import de PDF (règles/campagne). */
|
||||
import_chunk_tokens: number;
|
||||
/** Timeout HTTP des appels LLM (secondes). */
|
||||
llm_timeout_seconds: number;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -26,6 +30,8 @@ export interface AppSettingsUpdate {
|
||||
onemin_model?: string;
|
||||
onemin_api_key?: string;
|
||||
llm_num_ctx?: number;
|
||||
import_chunk_tokens?: number;
|
||||
llm_timeout_seconds?: number;
|
||||
}
|
||||
|
||||
/** Metadonnees d'un modele Ollama (issues de /api/show). */
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
<button *ngFor="let c of characters"
|
||||
type="button"
|
||||
class="ref-item"
|
||||
(click)="openInNewTab(['campaigns', campaignId, 'characters', c.id!])">
|
||||
(click)="openInNewTab(['campaigns', campaignId, 'playthroughs', playthroughId!, 'characters', c.id!])">
|
||||
<span class="ref-item-name">{{ c.name }}</span>
|
||||
<lucide-icon [img]="ExternalLink" [size]="12" class="ref-item-icon"></lucide-icon>
|
||||
</button>
|
||||
|
||||
@@ -221,6 +221,45 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Bloc Import de PDF -->
|
||||
<section class="card" *ngIf="settings">
|
||||
<h2>Import de PDF</h2>
|
||||
<div class="form-row">
|
||||
<label for="import-chunk-tokens">Taille des morceaux a l'import (tokens)</label>
|
||||
<input
|
||||
id="import-chunk-tokens"
|
||||
type="number"
|
||||
min="2000"
|
||||
step="1000"
|
||||
[(ngModel)]="settings.import_chunk_tokens">
|
||||
<p class="hint">
|
||||
Lors de l'import d'un PDF (regles ou campagne), le texte est decoupe en morceaux
|
||||
de cette taille avant d'etre analyse par l'IA. <strong>Plus gros = moins de morceaux</strong>,
|
||||
donc plus rapide et moins de fragmentation/doublons — mais le morceau doit tenir dans
|
||||
la fenetre du modele.
|
||||
<br />
|
||||
Repere : ~10 000 pour Ollama (16k de contexte) ; jusqu'a ~100 000 pour un modele a
|
||||
grand contexte (ex : GPT-5 mini, 400k) afin de traiter un livre entier en une seule passe.
|
||||
Attention : un gros morceau = generation plus longue (voir le timeout ci-dessous).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<label for="llm-timeout">Timeout des appels IA (secondes)</label>
|
||||
<input
|
||||
id="llm-timeout"
|
||||
type="number"
|
||||
min="30"
|
||||
step="30"
|
||||
[(ngModel)]="settings.llm_timeout_seconds">
|
||||
<p class="hint">
|
||||
Delai max d'attente d'une reponse du modele. Si un import lourd echoue avec
|
||||
« delai depasse » (timeout), <strong>augmentez cette valeur</strong> (ex : 600)
|
||||
ou reduisez la taille des morceaux ci-dessus. Defaut : 300 s.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Bloc Mises a jour (canal stable + canal beta Patreon fusionnes) -->
|
||||
<section class="card" *ngIf="config.updateCheckEnabled || licenseStatus?.enabled">
|
||||
<h2>Mises a jour</h2>
|
||||
|
||||
@@ -518,7 +518,9 @@ export class SettingsComponent implements OnInit, OnDestroy {
|
||||
ollama_base_url: this.settings.ollama_base_url,
|
||||
llm_model: this.settings.llm_model,
|
||||
onemin_model: this.settings.onemin_model,
|
||||
llm_num_ctx: this.settings.llm_num_ctx
|
||||
llm_num_ctx: this.settings.llm_num_ctx,
|
||||
import_chunk_tokens: this.settings.import_chunk_tokens,
|
||||
llm_timeout_seconds: this.settings.llm_timeout_seconds
|
||||
};
|
||||
if (this.clearApiKey) {
|
||||
patch.onemin_api_key = '';
|
||||
|
||||
@@ -8,7 +8,19 @@
|
||||
|
||||
<ng-container *ngIf="!isCollapsed">
|
||||
|
||||
<h2 class="sidebar-title">{{ title }}</h2>
|
||||
<button
|
||||
*ngIf="titleRoute; else staticTitle"
|
||||
type="button"
|
||||
class="sidebar-title sidebar-title--link"
|
||||
[class.active]="isTitleActive()"
|
||||
title="Retour à l'accueil de la campagne"
|
||||
(click)="clickTitle()">
|
||||
<lucide-icon [img]="Home" [size]="14" class="sidebar-title-icon"></lucide-icon>
|
||||
<span class="sidebar-title-text">{{ title }}</span>
|
||||
</button>
|
||||
<ng-template #staticTitle>
|
||||
<h2 class="sidebar-title">{{ title }}</h2>
|
||||
</ng-template>
|
||||
|
||||
<div class="actions-row" *ngIf="createActions.length">
|
||||
<button
|
||||
|
||||
@@ -77,6 +77,35 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// Variante cliquable : le titre devient un bouton "retour à l'accueil".
|
||||
.sidebar-title--link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
padding: 0.3rem 0.5rem;
|
||||
transition: background 0.15s;
|
||||
|
||||
.sidebar-title-icon {
|
||||
flex-shrink: 0;
|
||||
color: #a78bfa;
|
||||
}
|
||||
|
||||
.sidebar-title-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:hover { background: rgba(255, 255, 255, 0.07); }
|
||||
&.active { background: rgba(108, 99, 255, 0.18); }
|
||||
}
|
||||
|
||||
.actions-row {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Component, Input, Output, EventEmitter, HostListener, OnDestroy, ElementRef } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Router } from '@angular/router';
|
||||
import { LucideAngularModule, ChevronRight, ChevronDown, PanelLeftClose, PanelLeftOpen, Plus, FolderPlus, FilePlus, LucideIconData } from 'lucide-angular';
|
||||
import { LucideAngularModule, ChevronRight, ChevronDown, PanelLeftClose, PanelLeftOpen, Plus, FolderPlus, FilePlus, Home, LucideIconData } from 'lucide-angular';
|
||||
import { TreeItem, TreeCreateAction, SidebarAction, BottomPanel, BottomPanelItem, LayoutService } from '../../services/layout.service';
|
||||
import { resolveIcon } from '../../lore/lore-icons';
|
||||
|
||||
@@ -14,6 +14,8 @@ import { resolveIcon } from '../../lore/lore-icons';
|
||||
})
|
||||
export class SecondarySidebarComponent implements OnDestroy {
|
||||
@Input() title = '';
|
||||
/** Si défini, le titre est cliquable et navigue vers cette route (accueil de section). */
|
||||
@Input() titleRoute: string | null = null;
|
||||
@Input() createActions: SidebarAction[] = [];
|
||||
@Input() bottomPanel: BottomPanel | null = null;
|
||||
@Output() collapsedChange = new EventEmitter<boolean>();
|
||||
@@ -28,6 +30,7 @@ export class SecondarySidebarComponent implements OnDestroy {
|
||||
readonly Plus = Plus;
|
||||
readonly FolderPlus = FolderPlus;
|
||||
readonly FilePlus = FilePlus;
|
||||
readonly Home = Home;
|
||||
|
||||
isCollapsed = false;
|
||||
|
||||
@@ -114,6 +117,19 @@ export class SecondarySidebarComponent implements OnDestroy {
|
||||
if (action.route) { this.router.navigate([action.route]); }
|
||||
}
|
||||
|
||||
/** Clic sur le titre cliquable : retour à l'accueil de la section (ex: campagne). */
|
||||
clickTitle(): void {
|
||||
if (this.titleRoute) { this.router.navigate([this.titleRoute]); }
|
||||
}
|
||||
|
||||
/** True si on est déjà sur la route du titre (surligne le titre comme actif). */
|
||||
isTitleActive(): boolean {
|
||||
if (!this.titleRoute) return false;
|
||||
return this.router.isActive(this.titleRoute, {
|
||||
paths: 'exact', queryParams: 'ignored', fragment: 'ignored', matrixParams: 'ignored'
|
||||
});
|
||||
}
|
||||
|
||||
clickItem(item: TreeItem): void {
|
||||
if (item.route) { this.router.navigate([item.route]); return; }
|
||||
this.toggleItem(item.id);
|
||||
|
||||
Reference in New Issue
Block a user