Tetardtek/TetaRdPG
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: UI evolution — HudBar Tailwind + arcs collapsés intelligents
Some checks failed
CI/CD — Build & Deploy / Build & Deploy (push) Failing after 48s
Details

Browse Source 
- HudBar: migration inline styles → Tailwind, breakpoint 480px ultra-compact mobile
- QuestPage: arcs fermés par défaut sauf quête active/à réclamer, barre progression par arc
- QuestPage: migration inline styles → Tailwind (QuestCard, ArcSection, ArcQuestRow)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Tetardtek
2026-04-28 17:39:01 +02:00
parent 4d82346af4
commit 06e082b11c
3 changed files with 148 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
frontend/src/components/HudBar.tsx
View File

@@ -15,7 +15,6 @@ function RegenTimer({ endurance, enduranceMax, lastEnduranceTs }: { endurance: n
if (endurance >= enduranceMax) return null; if (endurance >= enduranceMax) return null;
// Regen = 1pt every 3min = 180s
const elapsedMs = now - new Date(lastEnduranceTs).getTime(); const elapsedMs = now - new Date(lastEnduranceTs).getTime();
const elapsedInCycle = elapsedMs % (3 * 60 * 1000); const elapsedInCycle = elapsedMs % (3 * 60 * 1000);
const remainingMs = 3 * 60 * 1000 - elapsedInCycle; const remainingMs = 3 * 60 * 1000 - elapsedInCycle;
@@ -24,8 +23,8 @@ function RegenTimer({ endurance, enduranceMax, lastEnduranceTs }: { endurance: n
const sec = remainingSec % 60; const sec = remainingSec % 60;
return ( return (
<span style={{ fontSize: 9, color: '#5ba4f5' }}> <span className="hud-regen text-[9px] text-rpg-blue inline-flex items-center gap-0.5">
<Clock size={8} style={{ display: 'inline', marginRight: 2 }} /> <Clock size={8} className="inline" />
+1 dans {min}:{sec.toString().padStart(2, '0')} +1 dans {min}:{sec.toString().padStart(2, '0')}
</span> </span>
); );
@@ -35,7 +34,7 @@ export function HudBar() {
const { data: char } = useQuery({ const { data: char } = useQuery({
queryKey: ['character'], queryKey: ['character'],
queryFn: characterApi.me, queryFn: characterApi.me,
refetchInterval: 30_000, // refresh every 30s for endurance updates refetchInterval: 30_000,
}); });
useEffect(() => { useEffect(() => {
@@ -56,41 +55,31 @@ export function HudBar() {
const questReady = activeQuests?.filter((pq: any) => pq.status === 'completed').length ?? 0; const questReady = activeQuests?.filter((pq: any) => pq.status === 'completed').length ?? 0;
return ( return (
<div className="hud-bar" style={{ <div className="hud-bar bg-[#111620] border-b border-[#1e2535] px-4 py-1 flex items-center gap-4 text-[11px] text-rpg-muted flex-wrap">
background: '#111620',
borderBottom: '1px solid #1e2535',
padding: '4px 1rem',
display: 'flex',
alignItems: 'center',
gap: 16,
fontSize: 11,
color: '#6b7a99',
flexWrap: 'wrap',
}}>
{/* Name + Level */} {/* Name + Level */}
<Link to="/dashboard" style={{ textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 6 }}> <Link to="/dashboard" className="no-underline flex items-center gap-1.5">
<span style={{ fontSize: 14 }}>🐸</span> <span className="text-sm">🐸</span>
<span style={{ fontWeight: 700, color: '#dce4f0', fontSize: 12 }}>{char.name}</span> <span className="font-bold text-rpg-text text-xs">{char.name}</span>
<span style={{ color: '#6b7a99' }}>Niv.{char.level}</span> <span className="hud-label text-rpg-muted">Niv.{char.level}</span>
</Link> </Link>
<span style={{ color: '#2a3448' }}>|</span> <span className="hud-sep text-[#2a3448]">|</span>
{/* HP */} {/* HP */}
<Link to="/dashboard" style={{ textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 4 }}> <Link to="/dashboard" className="no-underline flex items-center gap-1">
<Heart size={10} color="#e84040" /> <Heart size={10} className="text-rpg-red" />
<span style={{ color: char.hpCurrent < char.hpMax ? '#e84040' : '#6b7a99' }}> <span className={char.hpCurrent < char.hpMax ? 'text-rpg-red' : 'text-rpg-muted'}>
{char.hpCurrent}/{char.hpMax} {char.hpCurrent}<span className="hud-label">/{char.hpMax}</span>
</span> </span>
</Link> </Link>
<span style={{ color: '#2a3448' }}>|</span> <span className="hud-sep text-[#2a3448]">|</span>
{/* Endurance + timer */} {/* Endurance + timer */}
<Link to="/dashboard" style={{ textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 4 }}> <Link to="/dashboard" className="no-underline flex items-center gap-1">
<Zap size={10} color="#5ba4f5" /> <Zap size={10} className="text-rpg-blue" />
<span style={{ color: endurance < 5 ? '#e84040' : '#6b7a99' }}> <span className={endurance < 5 ? 'text-rpg-red' : 'text-rpg-muted'}>
{endurance}/{char.enduranceMax} {endurance}<span className="hud-label">/{char.enduranceMax}</span>
</span> </span>
{char.lastEnduranceTs && ( {char.lastEnduranceTs && (
<RegenTimer <RegenTimer
@@ -101,30 +90,30 @@ export function HudBar() {
)} )}
</Link> </Link>
<span style={{ color: '#2a3448' }}>|</span> <span className="hud-sep text-[#2a3448]">|</span>
{/* XP */} {/* XP */}
<Link to="/dashboard" style={{ textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 4 }}> <Link to="/dashboard" className="no-underline flex items-center gap-1">
<Star size={10} color="#a78bfa" /> <Star size={10} className="text-rpg-purple" />
<span>{char.xp}/{xpNext}</span> <span>{char.xp}<span className="hud-label">/{xpNext}</span></span>
</Link> </Link>
<span style={{ color: '#2a3448' }}>|</span> <span className="hud-sep text-[#2a3448]">|</span>
{/* Gold */} {/* Gold */}
<span style={{ display: 'flex', alignItems: 'center', gap: 4 }}> <span className="flex items-center gap-1">
<Coins size={10} color="#f4c94e" /> <Coins size={10} className="text-rpg-gold" />
<span>{char.gold}</span> <span>{char.gold}</span>
</span> </span>
<span style={{ color: '#2a3448' }}>|</span> <span className="hud-sep text-[#2a3448]">|</span>
{/* Quests */} {/* Quests */}
<Link to="/quests" style={{ textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 4 }}> <Link to="/quests" className="no-underline flex items-center gap-1">
<Scroll size={10} color={questReady > 0 ? '#f4c94e' : '#6b7a99'} /> <Scroll size={10} className={questReady > 0 ? 'text-rpg-gold' : 'text-rpg-muted'} />
<span>{questCount} quête{questCount !== 1 ? 's' : ''}</span> <span className="hud-label">{questCount} quête{questCount !== 1 ? 's' : ''}</span>
{questReady > 0 && ( {questReady > 0 && (
<span style={{ color: '#f4c94e', fontWeight: 700 }}>({questReady} prête{questReady > 1 ? 's' : ''} !)</span> <span className="text-rpg-gold font-bold">({questReady} prête{questReady > 1 ? 's' : ''} !)</span>
)} )}
</Link> </Link>
</div> </div>

8
frontend/src/index.css
View File

@@ -137,6 +137,7 @@ body {
/* HudBar compact */ /* HudBar compact */
.hud-bar { font-size: 10px; gap: 6px; padding: 4px 8px; flex-wrap: wrap; } .hud-bar { font-size: 10px; gap: 6px; padding: 4px 8px; flex-wrap: wrap; }
.hud-regen { display: none; }
/* Guide drawer full width mobile */ /* Guide drawer full width mobile */
.guide-drawer { width: 100% !important; } .guide-drawer { width: 100% !important; }
@@ -147,3 +148,10 @@ body {
/* Header compact */ /* Header compact */
.header-username { display: none; } .header-username { display: none; }
} }
/* ── Ultra-compact mobile (petit écran) ── */
@media (max-width: 480px) {
.hud-bar { gap: 4px; padding: 3px 6px; font-size: 9px; }
.hud-sep { display: none; }
.hud-label { display: none; }
}

213
frontend/src/pages/QuestPage.tsx
View File

@@ -1,7 +1,7 @@
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { questApi } from '../api/endpoints'; import { questApi } from '../api/endpoints';
import { Scroll, CheckCircle, Circle, Trophy, ChevronDown, ChevronRight, Star, Coins, Swords, Lock } from 'lucide-react'; import { Scroll, CheckCircle, Circle, Trophy, ChevronDown, ChevronRight, Star, Coins, Swords, Lock } from 'lucide-react';
import { useState } from 'react'; import { useState, useMemo } from 'react';
const OBJ_LABELS: Record<string, string> = { const OBJ_LABELS: Record<string, string> = {
kill_monster: 'Tuer', kill_monster: 'Tuer',
@@ -11,14 +11,9 @@ const OBJ_LABELS: Record<string, string> = {
forge_item: 'Forger', forge_item: 'Forger',
}; };
function QuestCard({ pq, mode }: { pq: any; mode: 'active' | 'available' | 'completed' }) { function useInvalidateQuests() {
const qc = useQueryClient(); const qc = useQueryClient();
const quest = mode === 'active' ? pq.quest : pq; return () => {
const progress = mode === 'active' ? pq.progress : 0;
const status = mode === 'active' ? pq.status : 'available';
const pct = Math.min(100, Math.floor((progress / quest.objectiveCount) * 100));
const invalidateAll = () => {
qc.invalidateQueries({ queryKey: ['quests'] }); qc.invalidateQueries({ queryKey: ['quests'] });
qc.invalidateQueries({ queryKey: ['questsActive'] }); qc.invalidateQueries({ queryKey: ['questsActive'] });
qc.invalidateQueries({ queryKey: ['questsAvailable'] }); qc.invalidateQueries({ queryKey: ['questsAvailable'] });
@@ -26,6 +21,14 @@ function QuestCard({ pq, mode }: { pq: any; mode: 'active' | 'available' | 'comp
qc.invalidateQueries({ queryKey: ['questArcs'] }); qc.invalidateQueries({ queryKey: ['questArcs'] });
qc.invalidateQueries({ queryKey: ['character'] }); qc.invalidateQueries({ queryKey: ['character'] });
}; };
}
function QuestCard({ pq, mode }: { pq: any; mode: 'active' | 'available' | 'completed' }) {
const invalidateAll = useInvalidateQuests();
const quest = mode === 'active' ? pq.quest : pq;
const progress = mode === 'active' ? pq.progress : 0;
const status = mode === 'active' ? pq.status : 'available';
const pct = Math.min(100, Math.floor((progress / quest.objectiveCount) * 100));
const acceptMut = useMutation({ const acceptMut = useMutation({
mutationFn: () => questApi.accept(quest.id), mutationFn: () => questApi.accept(quest.id),
@@ -46,72 +49,57 @@ function QuestCard({ pq, mode }: { pq: any; mode: 'active' | 'available' | 'comp
const isClaimed = status === 'claimed'; const isClaimed = status === 'claimed';
return ( return (
<div className={`card ${isCompleted ? 'card-gold' : ''}`} style={{ padding: '0.75rem 1rem' }}> <div className={`card ${isCompleted ? 'card-gold' : ''} py-3 px-4`}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 4 }}> <div className="flex justify-between items-start mb-1">
<div style={{ flex: 1 }}> <div className="flex-1">
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}> <div className="flex items-center gap-1.5">
{isClaimed ? <CheckCircle size={14} color="#3ddc84" /> : isCompleted ? <Trophy size={14} color="#f4c94e" /> : <Circle size={13} color="#6b7a99" />} {isClaimed ? <CheckCircle size={14} className="text-rpg-green" /> : isCompleted ? <Trophy size={14} className="text-rpg-gold" /> : <Circle size={13} className="text-rpg-muted" />}
<span style={{ fontWeight: 700, fontSize: 13, color: isCompleted ? '#f4c94e' : '#dce4f0' }}>{quest.name}</span> <span className={`font-bold text-[13px] ${isCompleted ? 'text-rpg-gold' : 'text-rpg-text'}`}>{quest.name}</span>
{quest.repeatable && <span style={{ fontSize: 9, color: '#5ba4f5', background: '#1a2540', padding: '1px 5px', borderRadius: 4 }}>répétable</span>} {quest.repeatable && <span className="text-[9px] text-rpg-blue bg-[#1a2540] px-1.5 py-px rounded">répétable</span>}
</div> </div>
<p style={{ margin: '4px 0 0', fontSize: 11, color: '#6b7a99' }}>{quest.description}</p> <p className="mt-1 mb-0 text-[11px] text-rpg-muted">{quest.description}</p>
</div> </div>
</div> </div>
{/* Objectif */} {/* Objectif */}
<div style={{ fontSize: 11, color: '#9ca3af', margin: '6px 0 4px' }}> <div className="text-[11px] text-[#9ca3af] mt-1.5 mb-1">
{OBJ_LABELS[quest.objectiveType] ?? quest.objectiveType} — {mode === 'active' ? `${progress}/${quest.objectiveCount}` : `×${quest.objectiveCount}`} {OBJ_LABELS[quest.objectiveType] ?? quest.objectiveType} — {mode === 'active' ? `${progress}/${quest.objectiveCount}` : `×${quest.objectiveCount}`}
</div> </div>
{/* Progress bar (active quests only) */} {/* Progress bar (active quests only) */}
{mode === 'active' && ( {mode === 'active' && (
<div style={{ background: '#1e2535', borderRadius: 4, height: 6, marginBottom: 6, overflow: 'hidden' }}> <div className="bar-track mb-1.5" style={{ height: 6 }}>
<div style={{ width: `${pct}%`, height: '100%', background: isCompleted ? '#f4c94e' : '#5ba4f5', borderRadius: 4, transition: 'width 0.3s' }} /> <div className={isCompleted ? 'bar-fill-xp' : 'bar-fill-end'} style={{ width: `${pct}%` }} />
</div> </div>
)} )}
{/* Rewards */} {/* Rewards */}
<div style={{ display: 'flex', gap: 12, fontSize: 11, color: '#6b7a99', marginBottom: 6 }}> <div className="flex gap-3 text-[11px] text-rpg-muted mb-1.5">
<span style={{ display: 'flex', alignItems: 'center', gap: 3 }}><Star size={10} color="#a78bfa" /> {quest.rewardXp} XP</span> <span className="flex items-center gap-1"><Star size={10} className="text-rpg-purple" /> {quest.rewardXp} XP</span>
<span style={{ display: 'flex', alignItems: 'center', gap: 3 }}><Coins size={10} color="#f4c94e" /> {quest.rewardGold} or</span> <span className="flex items-center gap-1"><Coins size={10} className="text-rpg-gold" /> {quest.rewardGold} or</span>
{quest.rewardTitle && <span style={{ color: '#f4c94e' }}>🏅 {quest.rewardTitle}</span>} {quest.rewardTitle && <span className="text-rpg-gold">🏅 {quest.rewardTitle}</span>}
{quest.minLevel > 1 && <span>Niv. {quest.minLevel}+</span>} {quest.minLevel > 1 && <span>Niv. {quest.minLevel}+</span>}
</div> </div>
{/* Actions */} {/* Actions */}
{mode === 'available' && ( {mode === 'available' && (
<button <button className="btn btn-ghost text-[11px] py-1 px-3" disabled={acceptMut.isPending} onClick={() => acceptMut.mutate()}>
className="btn btn-ghost"
style={{ fontSize: 11, padding: '0.25rem 0.75rem' }}
disabled={acceptMut.isPending}
onClick={() => acceptMut.mutate()}
>
{acceptMut.isPending ? 'Acceptation…' : '+ Accepter'} {acceptMut.isPending ? 'Acceptation…' : '+ Accepter'}
</button> </button>
)} )}
{mode === 'active' && isCompleted && ( {mode === 'active' && isCompleted && (
<button <button className="btn btn-gold text-[11px] py-1 px-3" disabled={claimMut.isPending} onClick={() => claimMut.mutate()}>
className="btn btn-gold"
style={{ fontSize: 11, padding: '0.25rem 0.75rem' }}
disabled={claimMut.isPending}
onClick={() => claimMut.mutate()}
>
{claimMut.isPending ? 'Réclamation…' : '🎁 Réclamer la récompense'} {claimMut.isPending ? 'Réclamation…' : '🎁 Réclamer la récompense'}
</button> </button>
)} )}
{mode === 'active' && !isCompleted && ( {mode === 'active' && !isCompleted && (
<button <button className="btn btn-ghost text-[10px] py-0.5 px-2 text-rpg-muted" disabled={abandonMut.isPending} onClick={() => abandonMut.mutate()}>
className="btn btn-ghost"
style={{ fontSize: 10, padding: '0.2rem 0.5rem', color: '#6b7a99' }}
disabled={abandonMut.isPending}
onClick={() => abandonMut.mutate()}
>
{abandonMut.isPending ? '…' : '✕ Abandonner'} {abandonMut.isPending ? '…' : '✕ Abandonner'}
</button> </button>
)} )}
{acceptMut.isError && <p style={{ color: '#e84040', fontSize: 11, marginTop: 4 }}>{(acceptMut.error as Error).message}</p>} {acceptMut.isError && <p className="text-rpg-red text-[11px] mt-1">{(acceptMut.error as Error).message}</p>}
{claimMut.isError && <p style={{ color: '#e84040', fontSize: 11, marginTop: 4 }}>{(claimMut.error as Error).message}</p>} {claimMut.isError && <p className="text-rpg-red text-[11px] mt-1">{(claimMut.error as Error).message}</p>}
{abandonMut.isError && <p style={{ color: '#e84040', fontSize: 11, marginTop: 4 }}>{(abandonMut.error as Error).message}</p>} {abandonMut.isError && <p className="text-rpg-red text-[11px] mt-1">{(abandonMut.error as Error).message}</p>}
</div> </div>
); );
} }
@@ -137,68 +125,83 @@ function ArcQuestRow({ q }: { q: any }) {
}); });
return ( return (
<div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, padding: '4px 0', borderBottom: '1px solid #1a2030' }}> <div className="flex items-center gap-2 text-xs py-1 border-b border-[#1a2030]">
{q.playerStatus === 'claimed' {q.playerStatus === 'claimed'
? <CheckCircle size={12} color="#3ddc84" /> ? <CheckCircle size={12} className="text-rpg-green shrink-0" />
: q.playerStatus === 'completed' : q.playerStatus === 'completed'
? <Trophy size={12} color="#f4c94e" /> ? <Trophy size={12} className="text-rpg-gold shrink-0" />
: q.playerStatus === 'active' : q.playerStatus === 'active'
? <Swords size={12} color="#5ba4f5" /> ? <Swords size={12} className="text-rpg-blue shrink-0" />
: <Circle size={11} color="#3a4560" /> : <Circle size={11} className="text-[#3a4560] shrink-0" />
} }
<div style={{ flex: 1 }}> <div className="flex-1 min-w-0">
<span style={{ <span className={
color: q.playerStatus === 'claimed' ? '#3ddc84' : q.playerStatus === 'active' ? '#dce4f0' : '#6b7a99', q.playerStatus === 'claimed' ? 'text-rpg-green' : q.playerStatus === 'active' ? 'text-rpg-text' : 'text-rpg-muted'
}}>{q.name}</span> }>{q.name}</span>
{q.playerStatus === 'active' && ( {q.playerStatus === 'active' && (
<span style={{ fontSize: 10, color: '#5ba4f5', marginLeft: 6 }}>{q.progress}/{q.objectiveCount}</span> <span className="text-[10px] text-rpg-blue ml-1.5">{q.progress}/{q.objectiveCount}</span>
)} )}
</div> </div>
<span style={{ fontSize: 10, color: '#6b7a99' }}>{q.rewardXp} XP</span> <span className="text-[10px] text-rpg-muted">{q.rewardXp} XP</span>
{q.minLevel > 1 && !q.levelOk && <span style={{ fontSize: 9, color: '#e84040' }}>Niv.{q.minLevel}</span>} {q.minLevel > 1 && !q.levelOk && <span className="text-[9px] text-rpg-red">Niv.{q.minLevel}</span>}
{/* Actions */} {/* Actions */}
{q.canAccept && ( {q.canAccept && (
<button className="btn btn-ghost" style={{ fontSize: 10, padding: '0.1rem 0.4rem' }} <button className="btn btn-ghost text-[10px] py-px px-1.5" disabled={acceptMut.isPending} onClick={() => acceptMut.mutate()}>
disabled={acceptMut.isPending} onClick={() => acceptMut.mutate()}>
{acceptMut.isPending ? '...' : '+ Accepter'} {acceptMut.isPending ? '...' : '+ Accepter'}
</button> </button>
)} )}
{q.playerStatus === 'completed' && ( {q.playerStatus === 'completed' && (
<button className="btn btn-gold" style={{ fontSize: 10, padding: '0.1rem 0.4rem' }} <button className="btn btn-gold text-[10px] py-px px-1.5" disabled={claimMut.isPending} onClick={() => claimMut.mutate()}>
disabled={claimMut.isPending} onClick={() => claimMut.mutate()}>
{claimMut.isPending ? '...' : '🎁 Réclamer'} {claimMut.isPending ? '...' : '🎁 Réclamer'}
</button> </button>
)} )}
{acceptMut.isError && <span style={{ color: '#e84040', fontSize: 9 }}>{(acceptMut.error as Error).message}</span>} {acceptMut.isError && <span className="text-rpg-red text-[9px]">{(acceptMut.error as Error).message}</span>}
</div> </div>
); );
} }
function ArcSection({ arc }: { arc: any }) { /** Détermine si un arc doit être ouvert par défaut */
const [open, setOpen] = useState(true); function shouldArcBeOpen(arc: any): boolean {
if (!arc.zoneUnlocked) return false;
if (arc.completed) return false;
// Ouvert si au moins une quête est active ou prête à réclamer
return arc.quests.some((q: any) => q.playerStatus === 'active' || q.playerStatus === 'completed');
}
function ArcSection({ arc, defaultOpen }: { arc: any; defaultOpen: boolean }) {
const [open, setOpen] = useState(defaultOpen);
const { completed, total } = arc.progress; const { completed, total } = arc.progress;
const locked = !arc.zoneUnlocked; const locked = !arc.zoneUnlocked;
const pct = total > 0 ? Math.floor((completed / total) * 100) : 0;
return ( return (
<div className={`card ${locked ? '' : arc.completed ? '' : 'card-gold'}`} style={{ padding: '0.75rem 1rem', marginBottom: '0.5rem', opacity: locked ? 0.4 : 1 }}> <div className={`card ${locked ? '' : arc.completed ? '' : 'card-gold'} py-3 px-4 mb-2 ${locked ? 'opacity-40' : ''}`}>
<div <div
style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', marginBottom: open && !locked ? 8 : 0 }} className={`flex items-center gap-2 cursor-pointer ${open && !locked ? 'mb-2' : ''}`}
onClick={() => setOpen(!open)} onClick={() => setOpen(!open)}
> >
{locked ? <Lock size={14} color="#6b7a99" /> : open ? <ChevronDown size={14} color="#6b7a99" /> : <ChevronRight size={14} color="#6b7a99" />} {locked ? <Lock size={14} className="text-rpg-muted shrink-0" /> : open ? <ChevronDown size={14} className="text-rpg-muted shrink-0" /> : <ChevronRight size={14} className="text-rpg-muted shrink-0" />}
<Scroll size={14} color={arc.completed ? '#3ddc84' : locked ? '#6b7a99' : '#f4c94e'} /> <Scroll size={14} className={`shrink-0 ${arc.completed ? 'text-rpg-green' : locked ? 'text-rpg-muted' : 'text-rpg-gold'}`} />
<span style={{ fontWeight: 700, fontSize: 14, color: arc.completed ? '#3ddc84' : locked ? '#6b7a99' : '#f4c94e', flex: 1 }}> <span className={`font-bold text-sm flex-1 ${arc.completed ? 'text-rpg-green' : locked ? 'text-rpg-muted' : 'text-rpg-gold'}`}>
{arc.name} {arc.name}
</span> </span>
<span style={{ fontSize: 11, color: '#6b7a99' }}>{completed}/{total}</span> <span className="text-[11px] text-rpg-muted">{completed}/{total}</span>
{arc.completed && <CheckCircle size={14} color="#3ddc84" />} {arc.completed && <CheckCircle size={14} className="text-rpg-green shrink-0" />}
{locked && <span style={{ fontSize: 10, color: '#6b7a99' }}>🔒 Complétez l'arc précédent</span>} {locked && <span className="text-[10px] text-rpg-muted">🔒 Complétez l'arc précédent</span>}
</div> </div>
{/* Progress bar */}
{!locked && (
<div className="bar-track mb-2" style={{ height: 4 }}>
<div className={arc.completed ? 'bar-fill-hp' : 'bar-fill-xp'} style={{ width: `${pct}%`, background: arc.completed ? '#3ddc84' : undefined }} />
</div>
)}
{open && !locked && ( {open && !locked && (
<> <>
<p style={{ fontSize: 11, color: '#6b7a99', margin: '0 0 8px', paddingLeft: 28 }}>{arc.description}</p> <p className="text-[11px] text-rpg-muted mb-2 pl-7">{arc.description}</p>
<div style={{ display: 'flex', flexDirection: 'column', paddingLeft: 12 }}> <div className="flex flex-col pl-3">
{arc.quests.map((q: any) => <ArcQuestRow key={q.id} q={q} />)} {arc.quests.map((q: any) => <ArcQuestRow key={q.id} q={q} />)}
</div> </div>
</> </>
@@ -213,12 +216,21 @@ export function QuestPage() {
const { data: arcs } = useQuery({ queryKey: ['questArcs'], queryFn: questApi.arcs }); const { data: arcs } = useQuery({ queryKey: ['questArcs'], queryFn: questApi.arcs });
const [showAllCombat, setShowAllCombat] = useState(false); const [showAllCombat, setShowAllCombat] = useState(false);
if (loadActive || loadAvail) return <div style={{ padding: '2rem', color: '#6b7a99' }}>Chargement…</div>; // Pré-calculer quels arcs sont ouverts par défaut (stable entre renders)
const arcDefaultOpen = useMemo(() => {
if (!arcs) return {};
const map: Record<string, boolean> = {};
for (const arc of arcs) {
map[arc.id] = shouldArcBeOpen(arc);
}
return map;
}, [arcs]);
if (loadActive || loadAvail) return <div className="p-8 text-rpg-muted">Chargement…</div>;
const isCraftQuest = (q: any) => ['forge_item', 'craft_item'].includes(q.objectiveType ?? q.quest?.objectiveType); const isCraftQuest = (q: any) => ['forge_item', 'craft_item'].includes(q.objectiveType ?? q.quest?.objectiveType);
const isCombatQuest = (q: any) => !isCraftQuest(q); const isCombatQuest = (q: any) => !isCraftQuest(q);
// Split by category
const activeAll = active ?? []; const activeAll = active ?? [];
const activeCombat = activeAll.filter((pq: any) => !pq.quest.repeatable && isCombatQuest(pq)); const activeCombat = activeAll.filter((pq: any) => !pq.quest.repeatable && isCombatQuest(pq));
const activeCraft = activeAll.filter((pq: any) => !pq.quest.repeatable && isCraftQuest(pq)); const activeCraft = activeAll.filter((pq: any) => !pq.quest.repeatable && isCraftQuest(pq));
@@ -233,37 +245,36 @@ export function QuestPage() {
return ( return (
<div> <div>
<h2 style={{ margin: '0 0 1rem', color: '#f4c94e', fontSize: 20 }}>📜 Quêtes</h2> <h2 className="mb-4 text-rpg-gold text-xl font-bold">📜 Quêtes</h2>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}> <div className="grid-2">
{/* Active combat quests */} {/* Active combat quests */}
<div> <div>
<p style={{ margin: '0 0 0.5rem', fontSize: 12, fontWeight: 700, color: '#6b7a99', textTransform: 'uppercase' }}> <p className="mb-2 text-xs font-bold text-rpg-muted uppercase">
Quêtes actives ({activeCombat.length}/3) Quêtes actives ({activeCombat.length}/3)
</p> </p>
{activeCombat.length > 0 ? ( {activeCombat.length > 0 ? (
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}> <div className="flex flex-col gap-1.5">
{activeCombat.map((pq: any) => <QuestCard key={pq.id} pq={pq} mode="active" />)} {activeCombat.map((pq: any) => <QuestCard key={pq.id} pq={pq} mode="active" />)}
</div> </div>
) : ( ) : (
<div className="card" style={{ padding: '1.5rem', textAlign: 'center', color: '#6b7a99', fontSize: 13 }}> <div className="card py-6 text-center text-rpg-muted text-[13px]">
Aucune quête active — acceptez-en à droite Aucune quête active — acceptez-en à droite
</div> </div>
)} )}
</div> </div>
{/* Available combat quests (staggered) */} {/* Available combat quests */}
<div> <div>
<p style={{ margin: '0 0 0.5rem', fontSize: 12, fontWeight: 700, color: '#6b7a99', textTransform: 'uppercase' }}> <p className="mb-2 text-xs font-bold text-rpg-muted uppercase">
Quêtes de combat Quêtes de combat
</p> </p>
{shownCombat.length > 0 ? ( {shownCombat.length > 0 ? (
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}> <div className="flex flex-col gap-1.5">
{shownCombat.map((q: any) => <QuestCard key={q.id} pq={q} mode="available" />)} {shownCombat.map((q: any) => <QuestCard key={q.id} pq={q} mode="available" />)}
{hiddenCount > 0 && ( {hiddenCount > 0 && (
<button <button
className="btn btn-ghost" className="btn btn-ghost w-full text-[11px] py-1 mt-0.5"
style={{ width: '100%', fontSize: 11, padding: '0.3rem', marginTop: 2 }}
onClick={() => setShowAllCombat(!showAllCombat)} onClick={() => setShowAllCombat(!showAllCombat)}
> >
{showAllCombat ? 'Réduire' : `Voir tout (+${hiddenCount} quête${hiddenCount > 1 ? 's' : ''})`} {showAllCombat ? 'Réduire' : `Voir tout (+${hiddenCount} quête${hiddenCount > 1 ? 's' : ''})`}
@@ -271,32 +282,28 @@ export function QuestPage() {
)} )}
</div> </div>
) : ( ) : (
<div className="card" style={{ padding: '1.5rem', textAlign: 'center', color: '#6b7a99', fontSize: 13 }}> <div className="card py-6 text-center text-rpg-muted text-[13px]">
Toutes les quêtes de combat sont complétées Toutes les quêtes de combat sont complétées
</div> </div>
)} )}
</div> </div>
</div> </div>
{/* Métiers (craft/forge — hors pool, comme les dailies) */} {/* Métiers */}
{(activeCraft.length > 0 || availableCraft.length > 0) && ( {(activeCraft.length > 0 || availableCraft.length > 0) && (
<div style={{ marginTop: '1.5rem' }}> <div className="mt-6">
<p style={{ margin: '0 0 0.5rem', fontSize: 12, fontWeight: 700, color: '#6b7a99', textTransform: 'uppercase' }}> <p className="mb-2 text-xs font-bold text-rpg-muted uppercase">🔨 Métiers</p>
🔨 Métiers <div className="grid-2-cards">
</p>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 }}>
{activeCraft.map((pq: any) => <QuestCard key={pq.id} pq={pq} mode="active" />)} {activeCraft.map((pq: any) => <QuestCard key={pq.id} pq={pq} mode="active" />)}
{availableCraft.map((q: any) => <QuestCard key={q.id} pq={q} mode="available" />)} {availableCraft.map((q: any) => <QuestCard key={q.id} pq={q} mode="available" />)}
</div> </div>
</div> </div>
)} )}
{/* Tâches quotidiennes (répétables — toujours en fond) */} {/* Tâches quotidiennes */}
<div style={{ marginTop: '1.5rem' }}> <div className="mt-6">
<p style={{ margin: '0 0 0.5rem', fontSize: 12, fontWeight: 700, color: '#6b7a99', textTransform: 'uppercase' }}> <p className="mb-2 text-xs font-bold text-rpg-muted uppercase">🔄 Tâches quotidiennes</p>
🔄 Tâches quotidiennes <div className="grid-2-cards">
</p>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 }}>
{activeDaily.map((pq: any) => <QuestCard key={pq.id} pq={pq} mode="active" />)} {activeDaily.map((pq: any) => <QuestCard key={pq.id} pq={pq} mode="active" />)}
{availableDaily.map((q: any) => <QuestCard key={q.id} pq={q} mode="available" />)} {availableDaily.map((q: any) => <QuestCard key={q.id} pq={q} mode="available" />)}
</div> </div>
@@ -304,11 +311,11 @@ export function QuestPage() {
{/* Arcs narratifs */} {/* Arcs narratifs */}
{arcs && arcs.length > 0 && ( {arcs && arcs.length > 0 && (
<div style={{ marginTop: '1.5rem' }}> <div className="mt-6">
<p style={{ margin: '0 0 0.5rem', fontSize: 12, fontWeight: 700, color: '#6b7a99', textTransform: 'uppercase' }}> <p className="mb-2 text-xs font-bold text-rpg-muted uppercase">📖 Arcs narratifs</p>
📖 Arcs narratifs {arcs.map((arc: any) => (
</p> <ArcSection key={arc.id} arc={arc} defaultOpen={arcDefaultOpen[arc.id] ?? false} />
{arcs.map((arc: any) => <ArcSection key={arc.id} arc={arc} />)} ))}
</div> </div>
)} )}
</div> </div>