Plusieurs ajouts :
- Possibilité de configurer des lieux dans une scène : permet de configurer un donjon par exemple avec les pièces, les trésors par pièce, la narration..... Mise en place également de conditions permettant de conditionner le déblocage des quêtes. - Possibilité de transformé un arc en instance non linéaire afin de faire un hub. Permet de jouer de préparer des campagnes type Dragon of Icespire peak plus facilement. - Configuration de partie : chaque partie va contenir les séances, ce qui permettra de suivre le déblocage des conditions pour les quêtes. Passage en 0.9.1-beta
This commit is contained in:
@@ -17,6 +17,22 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Structure de l'arc</label>
|
||||
<div class="arc-type-choice">
|
||||
<label class="arc-type-option" [class.selected]="form.get('type')?.value === 'LINEAR'">
|
||||
<input type="radio" formControlName="type" value="LINEAR" />
|
||||
<span class="arc-type-title">Linéaire</span>
|
||||
<span class="arc-type-desc">Chapitres joués dans l'ordre — narration séquentielle classique.</span>
|
||||
</label>
|
||||
<label class="arc-type-option" [class.selected]="form.get('type')?.value === 'HUB'">
|
||||
<input type="radio" formControlName="type" value="HUB" />
|
||||
<span class="arc-type-title">Hub</span>
|
||||
<span class="arc-type-desc">Quêtes parallèles débloquées par des conditions — type sandbox (ex : Phandalin / Icespire Peak).</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="arc-create-description">Description</label>
|
||||
<textarea
|
||||
|
||||
@@ -3,6 +3,44 @@
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.arc-type-choice {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.arc-type-option {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
padding: 0.85rem 0.95rem;
|
||||
border: 1px solid var(--color-border, #e2e2e2);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
background: var(--color-surface, #fff);
|
||||
transition: border-color 120ms ease, background 120ms ease;
|
||||
|
||||
&:hover { border-color: var(--color-primary, #2c6cd6); }
|
||||
|
||||
&.selected {
|
||||
border-color: var(--color-primary, #2c6cd6);
|
||||
background: rgba(66, 133, 244, 0.06);
|
||||
}
|
||||
|
||||
input[type="radio"] { display: none; }
|
||||
}
|
||||
|
||||
.arc-type-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.arc-type-desc {
|
||||
font-size: 0.78rem;
|
||||
color: var(--color-text-muted, #666);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
// Override local : titre en violet (pas en blanc comme le .page-header global).
|
||||
.page-header h1 { color: #a5b4fc; }
|
||||
|
||||
|
||||
@@ -44,7 +44,9 @@ export class ArcCreateComponent implements OnInit, OnDestroy {
|
||||
) {
|
||||
this.form = this.fb.group({
|
||||
name: ['', Validators.required],
|
||||
description: ['']
|
||||
description: [''],
|
||||
// Type structurel : LINEAR (séquentiel) par défaut, HUB (sandbox/quêtes parallèles).
|
||||
type: ['LINEAR', Validators.required]
|
||||
});
|
||||
}
|
||||
|
||||
@@ -72,6 +74,7 @@ export class ArcCreateComponent implements OnInit, OnDestroy {
|
||||
description: this.form.value.description,
|
||||
campaignId: this.campaignId,
|
||||
order: this.existingArcCount + 1,
|
||||
type: this.form.value.type,
|
||||
icon: this.selectedIcon
|
||||
}).subscribe({
|
||||
next: (created) => this.router.navigate(['/campaigns', this.campaignId, 'arcs', created.id]),
|
||||
|
||||
@@ -71,6 +71,22 @@
|
||||
</textarea>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Structure de l'arc</label>
|
||||
<div class="arc-type-choice">
|
||||
<label class="arc-type-option" [class.selected]="form.get('type')?.value === 'LINEAR'">
|
||||
<input type="radio" formControlName="type" value="LINEAR" />
|
||||
<span class="arc-type-title">Linéaire</span>
|
||||
<span class="arc-type-desc">Chapitres joués dans l'ordre — narration séquentielle.</span>
|
||||
</label>
|
||||
<label class="arc-type-option" [class.selected]="form.get('type')?.value === 'HUB'">
|
||||
<input type="radio" formControlName="type" value="HUB" />
|
||||
<span class="arc-type-title">Hub</span>
|
||||
<span class="arc-type-desc">Quêtes parallèles débloquées par des conditions (sandbox).</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Icône</label>
|
||||
<app-icon-picker [options]="campaignIconOptions" [(selected)]="selectedIcon"></app-icon-picker>
|
||||
|
||||
@@ -3,6 +3,44 @@
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.arc-type-choice {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.arc-type-option {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
padding: 0.85rem 0.95rem;
|
||||
border: 1px solid var(--color-border, #e2e2e2);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
background: var(--color-surface, #fff);
|
||||
transition: border-color 120ms ease, background 120ms ease;
|
||||
|
||||
&:hover { border-color: var(--color-primary, #2c6cd6); }
|
||||
|
||||
&.selected {
|
||||
border-color: var(--color-primary, #2c6cd6);
|
||||
background: rgba(66, 133, 244, 0.06);
|
||||
}
|
||||
|
||||
input[type="radio"] { display: none; }
|
||||
}
|
||||
|
||||
.arc-type-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.arc-type-desc {
|
||||
font-size: 0.78rem;
|
||||
color: var(--color-text-muted, #666);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
// Header local : titre à gauche, actions (Assistant IA) à droite.
|
||||
.page-header {
|
||||
display: flex;
|
||||
|
||||
@@ -85,6 +85,7 @@ export class ArcEditComponent implements OnInit, OnDestroy {
|
||||
this.form = this.fb.group({
|
||||
name: ['', Validators.required],
|
||||
description: [''],
|
||||
type: ['LINEAR', Validators.required],
|
||||
themes: [''],
|
||||
stakes: [''],
|
||||
gmNotes: [''],
|
||||
@@ -137,6 +138,7 @@ export class ArcEditComponent implements OnInit, OnDestroy {
|
||||
this.form.patchValue({
|
||||
name: arc.name,
|
||||
description: arc.description ?? '',
|
||||
type: arc.type ?? 'LINEAR',
|
||||
themes: arc.themes ?? '',
|
||||
stakes: arc.stakes ?? '',
|
||||
gmNotes: arc.gmNotes ?? '',
|
||||
@@ -155,6 +157,7 @@ export class ArcEditComponent implements OnInit, OnDestroy {
|
||||
description: this.form.value.description,
|
||||
campaignId: this.campaignId,
|
||||
order: this.arc.order ?? 1,
|
||||
type: this.form.value.type,
|
||||
themes: this.form.value.themes,
|
||||
stakes: this.form.value.stakes,
|
||||
gmNotes: this.form.value.gmNotes,
|
||||
|
||||
@@ -6,7 +6,9 @@
|
||||
<lucide-icon *ngIf="arc.icon" [img]="resolveCampaignIcon(arc.icon)" [size]="22" class="title-icon"></lucide-icon>
|
||||
{{ arc.name }}
|
||||
</h1>
|
||||
<p class="view-subtitle">Arc narratif</p>
|
||||
<p class="view-subtitle">
|
||||
{{ arc.type === 'HUB' ? 'Arc en hub (quêtes non linéaires)' : 'Arc narratif' }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="view-actions">
|
||||
<button type="button" class="btn-primary" (click)="editMode()">
|
||||
@@ -31,6 +33,40 @@
|
||||
<app-image-gallery [imageIds]="arc.mapImageIds ?? []" [layout]="'MAPS'"></app-image-gallery>
|
||||
</section>
|
||||
|
||||
<!-- Vue Hub (scénario) : liste les quêtes et leurs conditions, sans statut.
|
||||
Le statut effectif et les actions de jeu vivent dans l'écran d'une Partie. -->
|
||||
<section class="view-section" *ngIf="arc.type === 'HUB'">
|
||||
<h2 class="view-section-title"><span class="view-section-icon">🗺️</span> Quêtes du hub (scénario)</h2>
|
||||
|
||||
<p class="view-section-empty" *ngIf="hubQuests.length === 0">
|
||||
Aucune quête pour ce hub. Créez un chapitre pour ajouter une première quête.
|
||||
</p>
|
||||
|
||||
<div class="hub-quest-grid" *ngIf="hubQuests.length > 0">
|
||||
<button type="button"
|
||||
class="hub-quest-card"
|
||||
*ngFor="let q of hubQuests"
|
||||
(click)="openQuest(q)">
|
||||
<div class="hub-quest-card-head">
|
||||
<span class="hub-quest-card-icon" *ngIf="q.icon">
|
||||
<lucide-icon [img]="resolveCampaignIcon(q.icon)" [size]="18"></lucide-icon>
|
||||
</span>
|
||||
<span class="hub-quest-card-name">{{ q.name }}</span>
|
||||
</div>
|
||||
|
||||
<p class="hub-quest-card-desc" *ngIf="q.description?.trim()">{{ q.description }}</p>
|
||||
|
||||
<div class="hub-quest-card-locked-hint" *ngIf="(q.prerequisites?.length ?? 0) > 0">
|
||||
<lucide-icon [img]="AlertCircle" [size]="13"></lucide-icon>
|
||||
<span>{{ q.prerequisites!.length }} condition(s) de déblocage</span>
|
||||
<ul class="hub-quest-card-prereq-list">
|
||||
<li *ngFor="let p of q.prerequisites">{{ describePrerequisite(p) }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="view-section">
|
||||
<h2 class="view-section-title"><span class="view-section-icon">📜</span> Synopsis</h2>
|
||||
<p class="view-section-body" *ngIf="arc.description?.trim(); else emptyDesc">{{ arc.description }}</p>
|
||||
|
||||
@@ -1 +1,112 @@
|
||||
// Styles partagés via styles/_view.scss
|
||||
|
||||
// === Vue Hub ===
|
||||
.hub-section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
|
||||
.view-section-title { margin: 0; }
|
||||
}
|
||||
|
||||
.hub-quest-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.hub-quest-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 0.85rem 0.9rem;
|
||||
border: 1px solid var(--color-border, #e2e2e2);
|
||||
border-radius: 10px;
|
||||
background: var(--color-surface, #fff);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
|
||||
min-height: 110px;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-primary, #2c6cd6);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
&.locked {
|
||||
opacity: 0.7;
|
||||
background: rgba(128, 128, 128, 0.04);
|
||||
border-style: dashed;
|
||||
|
||||
&:hover {
|
||||
// Pas d'illusion d'interactivité pour les quêtes verrouillées
|
||||
transform: none;
|
||||
border-color: var(--color-border, #e2e2e2);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hub-quest-card-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.hub-quest-card-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-primary, #2c6cd6);
|
||||
}
|
||||
|
||||
.hub-quest-card-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.hub-quest-card-desc {
|
||||
font-size: 0.82rem;
|
||||
color: var(--color-text-muted, #666);
|
||||
margin: 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hub-quest-card-footer {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.hub-quest-card-locked-hint {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
margin-top: 0.4rem;
|
||||
padding-top: 0.4rem;
|
||||
border-top: 1px dashed rgba(128, 128, 128, 0.25);
|
||||
font-size: 0.72rem;
|
||||
color: var(--color-text-muted, #777);
|
||||
|
||||
> lucide-icon,
|
||||
> span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.hub-quest-card-prereq-list {
|
||||
list-style: disc;
|
||||
padding-left: 1rem;
|
||||
margin: 0.15rem 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
|
||||
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
|
||||
import { forkJoin, of } from 'rxjs';
|
||||
import { switchMap } from 'rxjs/operators';
|
||||
import { LucideAngularModule, Pencil, Trash2 } from 'lucide-angular';
|
||||
import { LucideAngularModule, Pencil, Trash2, AlertCircle } from 'lucide-angular';
|
||||
import { resolveCampaignIcon } from '../../campaign-icons';
|
||||
import { CampaignService } from '../../../services/campaign.service';
|
||||
import { CharacterService } from '../../../services/character.service';
|
||||
@@ -11,7 +11,7 @@ import { NpcService } from '../../../services/npc.service';
|
||||
import { PageService } from '../../../services/page.service';
|
||||
import { LayoutService } from '../../../services/layout.service';
|
||||
import { PageTitleService } from '../../../services/page-title.service';
|
||||
import { Arc } from '../../../services/campaign.model';
|
||||
import { Arc, Chapter, Prerequisite } from '../../../services/campaign.model';
|
||||
import { Page } from '../../../services/page.model';
|
||||
import { loadCampaignTreeData, buildCampaignSidebarConfig } from '../../campaign-tree.helper';
|
||||
import { ImageGalleryComponent } from '../../../shared/image-gallery/image-gallery.component';
|
||||
@@ -32,12 +32,22 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
|
||||
export class ArcViewComponent implements OnInit, OnDestroy {
|
||||
readonly Pencil = Pencil;
|
||||
readonly Trash2 = Trash2;
|
||||
readonly AlertCircle = AlertCircle;
|
||||
readonly resolveCampaignIcon = resolveCampaignIcon;
|
||||
|
||||
campaignId = '';
|
||||
arcId = '';
|
||||
arc: Arc | null = null;
|
||||
|
||||
/** Chapitres de l'arc courant — exploités pour le rendu HUB (grille de quêtes). */
|
||||
hubQuests: Chapter[] = [];
|
||||
|
||||
/**
|
||||
* Indexe les chapitres de toute la campagne par id pour résoudre les libellés
|
||||
* des prérequis QUEST_COMPLETED quand on les affiche dans les tooltips de verrouillage.
|
||||
*/
|
||||
private allChaptersById: Record<string, Chapter> = {};
|
||||
|
||||
/** ID du Lore associé à la campagne (null si pas d'univers lié). */
|
||||
loreId: string | null = null;
|
||||
/** Pages du Lore — pour résoudre relatedPageIds en titres. */
|
||||
@@ -85,10 +95,42 @@ export class ArcViewComponent implements OnInit, OnDestroy {
|
||||
this.availablePages = pages;
|
||||
this.pageTitleService.set(arc.name);
|
||||
|
||||
// Quêtes du Hub : chapitres de l'arc courant, triés par order puis par nom.
|
||||
this.hubQuests = [...(treeData.chaptersByArc[this.arcId] ?? [])].sort((a, b) => {
|
||||
const oa = a.order ?? 0;
|
||||
const ob = b.order ?? 0;
|
||||
if (oa !== ob) return oa - ob;
|
||||
return a.name.localeCompare(b.name, 'fr', { numeric: true, sensitivity: 'base' });
|
||||
});
|
||||
// Index global pour résoudre les noms de quêtes référencées par les prérequis.
|
||||
this.allChaptersById = {};
|
||||
Object.values(treeData.chaptersByArc).forEach(list =>
|
||||
list.forEach(c => { if (c.id) this.allChaptersById[c.id] = c; })
|
||||
);
|
||||
|
||||
this.layoutService.show(buildCampaignSidebarConfig(campaign, allCampaigns, treeData, this.campaignId));
|
||||
});
|
||||
}
|
||||
|
||||
/** Construit un libellé lisible pour un prérequis (tooltip de verrouillage). */
|
||||
describePrerequisite(p: Prerequisite): string {
|
||||
switch (p.kind) {
|
||||
case 'QUEST_COMPLETED':
|
||||
return `Quête « ${this.allChaptersById[p.questId]?.name ?? '?'} » terminée`;
|
||||
case 'SESSION_REACHED':
|
||||
return `Session ${p.minSessionNumber} atteinte`;
|
||||
case 'FLAG_SET':
|
||||
return `Fait : ${p.flagName}`;
|
||||
}
|
||||
}
|
||||
|
||||
openQuest(q: Chapter): void {
|
||||
if (!q.id) return;
|
||||
this.router.navigate([
|
||||
'/campaigns', this.campaignId, 'arcs', this.arcId, 'chapters', q.id
|
||||
]);
|
||||
}
|
||||
|
||||
titleOfRelated(pageId: string): string {
|
||||
return this.availablePages.find(p => p.id === pageId)?.title ?? '(page supprimée)';
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user