304 lines
12 KiB
TypeScript
304 lines
12 KiB
TypeScript
import { useStore } from "../store";
|
|
|
|
// Mapping statique gid (Google Sheets ID) -> URL icône via api.dofusdb.fr
|
|
// Pattern URL : https://api.dofusdb.fr/img/items/{iconId}.png
|
|
const DOFUS_ICON_BASE = "https://api.dofusdb.fr/img/items";
|
|
const GID_TO_ICON: Record<string, string> = {
|
|
"474870200": `${DOFUS_ICON_BASE}/23009.png`, // Dofawa
|
|
"743703882": `${DOFUS_ICON_BASE}/23025.png`, // Dofus Argenté
|
|
"103963898": `${DOFUS_ICON_BASE}/23006.png`, // Dofus Cawotte
|
|
"1075294690": `${DOFUS_ICON_BASE}/23022.png`, // Dokoko
|
|
"1567240526": `${DOFUS_ICON_BASE}/23020.png`, // Dofus des Veilleurs
|
|
"1011508069": `${DOFUS_ICON_BASE}/23002.png`, // Dofus Emeraude
|
|
"2045137654": `${DOFUS_ICON_BASE}/23001.png`, // Dofus Pourpre
|
|
"1967508888": `${DOFUS_ICON_BASE}/23032.png`, // Domakuro
|
|
"1382359191": `${DOFUS_ICON_BASE}/23033.png`, // Dorigami
|
|
"1413546794": `${DOFUS_ICON_BASE}/23003.png`, // Dofus Turquoise
|
|
"1641656252": `${DOFUS_ICON_BASE}/23005.png`, // Dofus des Glaces
|
|
"953522228": `${DOFUS_ICON_BASE}/23023.png`, // Dofus Abyssal
|
|
"818597042": `${DOFUS_ICON_BASE}/23039.png`, // Dofoozbz
|
|
"1021129660": `${DOFUS_ICON_BASE}/23016.png`, // Dofus Nébuleux
|
|
"595670723": `${DOFUS_ICON_BASE}/23004.png`, // Dofus Vulbis
|
|
"544349966": `${DOFUS_ICON_BASE}/23008.png`, // Dofus Tacheté
|
|
"1150302145": `${DOFUS_ICON_BASE}/23024.png`, // Dofus Forgelave
|
|
"882278553": `${DOFUS_ICON_BASE}/23007.png`, // Dofus Ebène
|
|
"200570588": `${DOFUS_ICON_BASE}/23011.png`, // Dofus Ivoire
|
|
"1209269839": `${DOFUS_ICON_BASE}/23012.png`, // Dofus Ocre
|
|
"462784268": `${DOFUS_ICON_BASE}/23027.png`, // Dofus Argenté Scintillant
|
|
"1543573905": `${DOFUS_ICON_BASE}/23034.png`, // Dofus Cauchemar
|
|
"1007491889": `${DOFUS_ICON_BASE}/23035.png`, // Dom de Pin
|
|
"1047555165": `${DOFUS_ICON_BASE}/23036.png`, // Dofus Sylvestre
|
|
"2105601828": `${DOFUS_ICON_BASE}/23029.png`, // Dofus Cacao
|
|
"474510463": `${DOFUS_ICON_BASE}/23017.png`, // Dokille
|
|
"62476099": `${DOFUS_ICON_BASE}/23018.png`, // Dolmanax
|
|
"1873654554": `${DOFUS_ICON_BASE}/23019.png`, // Dotruche
|
|
"360188709": `${DOFUS_ICON_BASE}/23010.png`, // Dofus Kaliptus
|
|
};
|
|
|
|
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(210px, 1fr))", gap: "8px", paddingTop: "20px" }}>
|
|
{guides.map(g => <GuideCard key={g.gid} guide={g} onOpen={onOpen} />)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function DofusIcon({ gid, pct, size = 44 }: { gid: string; pct: number; size?: number }) {
|
|
const iconUrl = GID_TO_ICON[gid] ?? null;
|
|
if (!iconUrl) return null;
|
|
|
|
// L'icône colorée est clippée du bas vers le haut selon pct.
|
|
// clipPath: inset(top right bottom left) — on réduit depuis le haut.
|
|
const filledClip = `inset(${100 - pct}% 0 0 0)`;
|
|
|
|
return (
|
|
<div style={{
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 8,
|
|
width: size,
|
|
height: size,
|
|
filter: "drop-shadow(0 2px 6px rgba(0,0,0,0.6))",
|
|
zIndex: 2,
|
|
flexShrink: 0,
|
|
}}>
|
|
{/* Calque grisé (base) */}
|
|
<img
|
|
src={iconUrl}
|
|
alt=""
|
|
aria-hidden="true"
|
|
style={{
|
|
position: "absolute",
|
|
inset: 0,
|
|
width: "100%",
|
|
height: "100%",
|
|
objectFit: "contain",
|
|
filter: "grayscale(1) brightness(0.45)",
|
|
userSelect: "none",
|
|
pointerEvents: "none",
|
|
}}
|
|
/>
|
|
{/* Calque coloré, progressivement révélé du bas vers le haut */}
|
|
{pct > 0 && (
|
|
<img
|
|
src={iconUrl}
|
|
alt=""
|
|
aria-hidden="true"
|
|
style={{
|
|
position: "absolute",
|
|
inset: 0,
|
|
width: "100%",
|
|
height: "100%",
|
|
objectFit: "contain",
|
|
clipPath: filledClip,
|
|
userSelect: "none",
|
|
pointerEvents: "none",
|
|
}}
|
|
/>
|
|
)}
|
|
</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 hasIcon = GID_TO_ICON[guide.gid] != null;
|
|
|
|
const accentColor = isDone ? "#4ade80" : inProgress ? "#f0c040" : "#4a9eff";
|
|
const borderColor = isDone ? "rgba(74,222,128,0.25)" : "#2d3748";
|
|
|
|
return (
|
|
// Wrapper pour permettre à l'icône de déborder vers le haut
|
|
<div style={{ position: "relative", paddingTop: hasIcon ? "18px" : "0" }}>
|
|
<DofusIcon gid={guide.gid} pct={pct} size={44} />
|
|
|
|
<button
|
|
onClick={() => onOpen(guide.gid)}
|
|
style={{
|
|
width: "100%",
|
|
background: "#161b22",
|
|
border: `1px solid ${borderColor}`,
|
|
borderRadius: "8px",
|
|
padding: "10px 12px",
|
|
cursor: "pointer",
|
|
textAlign: "left",
|
|
transition: "border-color 0.15s, background 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 = borderColor;
|
|
(e.currentTarget as HTMLElement).style.background = "#161b22";
|
|
}}
|
|
>
|
|
{/* Nom + checkmark */}
|
|
<div style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
marginBottom: "8px",
|
|
paddingLeft: hasIcon ? "46px" : "0",
|
|
minWidth: 0,
|
|
}}>
|
|
<span style={{
|
|
fontSize: "12px", fontWeight: 600, lineHeight: 1.3,
|
|
color: isDone ? "#4ade80" : "#e2e8f0",
|
|
whiteSpace: "nowrap",
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
minWidth: 0,
|
|
}}>
|
|
{guide.name}
|
|
</span>
|
|
{isDone && <span style={{ fontSize: "12px", flexShrink: 0 }}>✓</span>}
|
|
</div>
|
|
|
|
{/* Barre de progression */}
|
|
<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>
|
|
|
|
{/* Compteur */}
|
|
<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>
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|