193 lines
8.1 KiB
TypeScript
193 lines
8.1 KiB
TypeScript
import { useStore } from "../store";
|
|
|
|
export default function HomeView({ needsSync, onSync }: { needsSync?: boolean; onSync?: () => void }) {
|
|
const { guides, openGuide, profiles, activeProfileId, syncing } = useStore();
|
|
|
|
const activeProfile = profiles.find(p => p.id === activeProfileId);
|
|
const totalQuests = guides.reduce((s, g) => s + g.total_quests, 0);
|
|
const totalCompleted = guides.reduce((s, g) => s + g.completed_quests, 0);
|
|
const globalPct = totalQuests > 0 ? Math.round((totalCompleted / totalQuests) * 100) : 0;
|
|
const completedGuides = guides.filter(g => g.total_quests > 0 && g.completed_quests === g.total_quests);
|
|
const inProgressGuides = guides.filter(g => g.completed_quests > 0 && g.completed_quests < g.total_quests);
|
|
|
|
return (
|
|
<div className="with-scrollbar" style={{ flex: 1, overflowY: "auto", padding: "20px 24px", minHeight: 0 }}>
|
|
{/* Header */}
|
|
<div style={{ marginBottom: "20px" }}>
|
|
<h1 style={{ fontSize: "20px", fontWeight: 700, color: "#f0c040", marginBottom: "2px" }}>
|
|
Tougli — Guide Dofus
|
|
</h1>
|
|
{activeProfile && (
|
|
<p style={{ fontSize: "13px", color: "#94a3b8" }}>
|
|
Profil actif : <span style={{ color: "#e2e8f0", fontWeight: 600 }}>{activeProfile.name}</span>
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* First-time sync CTA */}
|
|
{needsSync && (
|
|
<div style={{
|
|
background: "rgba(240,192,64,0.06)", border: "1px solid rgba(240,192,64,0.35)",
|
|
borderRadius: "10px", padding: "20px 24px", marginBottom: "24px",
|
|
display: "flex", flexDirection: "column", alignItems: "center", gap: "12px",
|
|
textAlign: "center",
|
|
}}>
|
|
<div style={{ fontSize: "11px", fontWeight: 600, color: "#f0c040", textTransform: "uppercase", letterSpacing: "0.1em" }}>
|
|
Première utilisation
|
|
</div>
|
|
<p style={{ fontSize: "13px", color: "#94a3b8", lineHeight: 1.6, margin: 0 }}>
|
|
Aucun guide chargé. Synchronisez pour récupérer les données depuis Google Sheets.
|
|
</p>
|
|
<button
|
|
onClick={onSync}
|
|
disabled={!onSync || syncing}
|
|
style={{
|
|
background: "#f0c040", color: "#0d1117", border: "none",
|
|
padding: "9px 24px", borderRadius: "8px", fontWeight: 700,
|
|
fontSize: "13px", cursor: onSync && !syncing ? "pointer" : "default",
|
|
display: "flex", alignItems: "center", gap: "8px",
|
|
opacity: onSync && !syncing ? 1 : 0.5,
|
|
}}
|
|
>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/>
|
|
</svg>
|
|
Synchroniser les guides
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Global progress */}
|
|
{guides.length > 0 && (
|
|
<div style={{
|
|
background: "#161b22", border: "1px solid #2d3748", borderRadius: "10px",
|
|
padding: "16px 20px", marginBottom: "24px",
|
|
}}>
|
|
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "8px" }}>
|
|
<span style={{ fontSize: "13px", color: "#94a3b8" }}>Progression globale</span>
|
|
<span style={{ fontSize: "13px", fontWeight: 700, color: "#f0c040" }}>
|
|
{totalCompleted} / {totalQuests} quêtes ({globalPct}%)
|
|
</span>
|
|
</div>
|
|
<div style={{ height: "6px", background: "#2d3748", borderRadius: "3px", overflow: "hidden" }}>
|
|
<div style={{
|
|
height: "100%", width: `${globalPct}%`,
|
|
background: "linear-gradient(90deg, #4a9eff, #f0c040)",
|
|
borderRadius: "3px", transition: "width 0.4s ease",
|
|
}} />
|
|
</div>
|
|
<div style={{ marginTop: "10px", display: "flex", gap: "20px" }}>
|
|
<Stat label="Complétés" value={completedGuides.length} color="#4ade80" />
|
|
<Stat label="En cours" value={inProgressGuides.length} color="#f0c040" />
|
|
<Stat label="Total" value={guides.length} color="#94a3b8" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* En cours */}
|
|
{inProgressGuides.length > 0 && (
|
|
<Section title="En cours" guides={inProgressGuides} onOpen={openGuide} />
|
|
)}
|
|
|
|
{/* Tous les guides */}
|
|
<Section title="Tous les guides" guides={guides} onOpen={openGuide} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Stat({ label, value, color }: { label: string; value: number; color: string }) {
|
|
return (
|
|
<div>
|
|
<span style={{ fontSize: "16px", fontWeight: 700, color }}>{value}</span>
|
|
<span style={{ fontSize: "11px", color: "#4a5568", marginLeft: "4px" }}>{label}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Section({ title, guides, onOpen }: {
|
|
title: string;
|
|
guides: import("../types").GuideListItem[];
|
|
onOpen: (gid: string) => void;
|
|
}) {
|
|
return (
|
|
<div style={{ marginBottom: "24px" }}>
|
|
<h2 style={{
|
|
fontSize: "11px", fontWeight: 600, color: "#4a5568",
|
|
textTransform: "uppercase", letterSpacing: "0.1em",
|
|
marginBottom: "10px", borderBottom: "1px solid #2d3748", paddingBottom: "4px",
|
|
}}>
|
|
{title}
|
|
</h2>
|
|
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(175px, 1fr))", gap: "8px" }}>
|
|
{guides.map(g => <GuideCard key={g.gid} guide={g} onOpen={onOpen} />)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function GuideCard({ guide, onOpen }: {
|
|
guide: import("../types").GuideListItem;
|
|
onOpen: (gid: string) => void;
|
|
}) {
|
|
const pct = guide.total_quests > 0 ? Math.round((guide.completed_quests / guide.total_quests) * 100) : 0;
|
|
const isDone = pct === 100 && guide.total_quests > 0;
|
|
const inProgress = guide.completed_quests > 0 && !isDone;
|
|
|
|
const accentColor = isDone ? "#4ade80" : inProgress ? "#f0c040" : "#4a9eff";
|
|
|
|
return (
|
|
<button
|
|
onClick={() => onOpen(guide.gid)}
|
|
style={{
|
|
background: "#161b22", border: `1px solid ${isDone ? "rgba(74,222,128,0.25)" : "#2d3748"}`,
|
|
borderRadius: "8px", padding: "12px 14px", cursor: "pointer",
|
|
textAlign: "left", transition: "all 0.15s", position: "relative", overflow: "hidden",
|
|
}}
|
|
onMouseEnter={e => {
|
|
(e.currentTarget as HTMLElement).style.borderColor = accentColor;
|
|
(e.currentTarget as HTMLElement).style.background = "#1a2233";
|
|
}}
|
|
onMouseLeave={e => {
|
|
(e.currentTarget as HTMLElement).style.borderColor = isDone ? "rgba(74,222,128,0.25)" : "#2d3748";
|
|
(e.currentTarget as HTMLElement).style.background = "#161b22";
|
|
}}
|
|
>
|
|
{/* Indicateur latéral */}
|
|
<div style={{
|
|
position: "absolute", left: 0, top: 0, bottom: 0, width: "3px",
|
|
background: accentColor, opacity: isDone ? 1 : inProgress ? 0.8 : 0.3,
|
|
borderRadius: "8px 0 0 8px",
|
|
}} />
|
|
|
|
<div style={{ paddingLeft: "4px" }}>
|
|
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "8px" }}>
|
|
<span style={{
|
|
fontSize: "12px", fontWeight: 600, lineHeight: 1.3,
|
|
color: isDone ? "#4ade80" : "#e2e8f0",
|
|
}}>
|
|
{guide.name}
|
|
</span>
|
|
{isDone && <span style={{ fontSize: "12px", flexShrink: 0 }}>✓</span>}
|
|
</div>
|
|
|
|
<div style={{ height: "3px", background: "#2d3748", borderRadius: "2px", overflow: "hidden", marginBottom: "6px" }}>
|
|
<div style={{
|
|
height: "100%", width: `${pct}%`,
|
|
background: accentColor,
|
|
borderRadius: "2px", transition: "width 0.3s ease",
|
|
}} />
|
|
</div>
|
|
|
|
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
|
<span style={{ fontSize: "10px", color: "#4a5568" }}>
|
|
{guide.completed_quests}/{guide.total_quests} quêtes
|
|
</span>
|
|
<span style={{ fontSize: "10px", fontWeight: 700, color: accentColor }}>
|
|
{pct}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|