475 lines
18 KiB
TypeScript
475 lines
18 KiB
TypeScript
import { useEffect, useState } from "react";
|
||
import { useStore } from "../store";
|
||
import { SectionItem, QuestItem, CombatType } from "../types";
|
||
import QuestDetailPanel from "./QuestDetailPanel";
|
||
import { TextWithCoords } from "./TextWithCoords";
|
||
|
||
function useWindowWidth() {
|
||
const [width, setWidth] = useState(window.innerWidth);
|
||
useEffect(() => {
|
||
const handler = () => setWidth(window.innerWidth);
|
||
window.addEventListener("resize", handler);
|
||
return () => window.removeEventListener("resize", handler);
|
||
}, []);
|
||
return width;
|
||
}
|
||
|
||
export function combatIcon(name: string): string {
|
||
const l = name.toLowerCase();
|
||
if (l === "solo") return "🗡️";
|
||
if (l === "groupe") return "⚔️";
|
||
if (l === "donjon") return "💀";
|
||
if (
|
||
l === "combat_vagues" ||
|
||
l === "combat_tactique" ||
|
||
l === "combat_aleatoire" ||
|
||
l === "combat_zone" ||
|
||
l === "combat"
|
||
) return "🗡️";
|
||
if (l === "deplacement") return "🗺️";
|
||
if (l === "item") return "📦";
|
||
// Fallback — conserve l'ancienne logique pour les données CSV existantes
|
||
if (l.includes("solo") || l.includes("seul")) return "🗡️";
|
||
if (l.includes("group") || l.includes("groupe")) return "⚔️";
|
||
if (l.includes("donjon") || l.includes("boss")) return "💀";
|
||
return "🗡️";
|
||
}
|
||
|
||
export default function GuideView() {
|
||
const { activeGuideData, completedQuests, toggleQuest, activeProfileId, resourcesPanelCollapsed, setResourcesPanelCollapsed, resourceInventory, setResourceQuantity } = useStore();
|
||
const resourcesCollapsed = resourcesPanelCollapsed;
|
||
const setResourcesCollapsed = setResourcesPanelCollapsed;
|
||
const [selectedQuest, setSelectedQuest] = useState<{ name: string; url: string | null } | null>(null);
|
||
const windowWidth = useWindowWidth();
|
||
const resourcesIsOverlay = resourcesCollapsed || windowWidth < 500;
|
||
|
||
if (!activeGuideData) return null;
|
||
|
||
if (selectedQuest && activeProfileId) {
|
||
return (
|
||
<div style={{ flex: 1, display: "flex", overflow: "hidden", minHeight: 0 }}>
|
||
<QuestDetailPanel
|
||
questName={selectedQuest.name}
|
||
questUrl={selectedQuest.url}
|
||
profileId={activeProfileId}
|
||
onClose={() => setSelectedQuest(null)}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const { name, effect, recommended_level, resources, sections, combat_legend } = activeGuideData;
|
||
|
||
const allQuests = collectAllQuests(sections);
|
||
const completedCount = allQuests.filter(q => completedQuests.has(q)).length;
|
||
const pct = allQuests.length > 0 ? Math.round((completedCount / allQuests.length) * 100) : 0;
|
||
const isDone = pct === 100;
|
||
|
||
return (
|
||
<div style={{ flex: 1, display: "flex", overflow: "hidden", minHeight: 0, position: "relative" }}>
|
||
<div className="with-scrollbar" style={{ flex: 1, overflowY: "auto", padding: "20px 24px" }}>
|
||
|
||
{/* Header */}
|
||
<div style={{ marginBottom: "20px" }}>
|
||
<div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "8px", flexWrap: "wrap" }}>
|
||
<div style={{ minWidth: 0 }}>
|
||
<h1 style={{ fontSize: "18px", fontWeight: 700, color: "#f0c040", marginBottom: "2px", wordBreak: "break-word" }}>{name}</h1>
|
||
{recommended_level && (
|
||
<div style={{ fontSize: "12px", color: "#94a3b8" }}>
|
||
Niv. recommandé : <span style={{ color: "#e2e8f0", fontWeight: 600 }}>{recommended_level}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div style={{ textAlign: "right", flexShrink: 0 }}>
|
||
<div style={{ fontSize: "13px", fontWeight: 700, color: isDone ? "#4ade80" : "#f0c040" }}>
|
||
{completedCount} / {allQuests.length}
|
||
</div>
|
||
<div style={{ fontSize: "11px", color: "#94a3b8" }}>{pct}%</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ height: "4px", background: "#2d3748", borderRadius: "2px", overflow: "hidden", marginTop: "10px" }}>
|
||
<div style={{
|
||
height: "100%", width: `${pct}%`,
|
||
background: isDone ? "#4ade80" : "linear-gradient(90deg, #4a9eff, #f0c040)",
|
||
borderRadius: "2px", transition: "width 0.3s ease",
|
||
}} />
|
||
</div>
|
||
|
||
{effect && (
|
||
<div style={{
|
||
marginTop: "12px", padding: "10px 14px",
|
||
background: "rgba(240,192,64,0.04)", borderRadius: "6px",
|
||
borderLeft: "3px solid rgba(240,192,64,0.4)",
|
||
fontSize: "12px", color: "#94a3b8", lineHeight: 1.6,
|
||
}}>
|
||
<span style={{ color: "#f0c040", fontWeight: 600, fontSize: "11px", display: "block", marginBottom: "3px", textTransform: "uppercase", letterSpacing: "0.05em" }}>
|
||
✨ Effet
|
||
</span>
|
||
{effect}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Légende */}
|
||
{combat_legend.length > 0 && (
|
||
<Legend legend={combat_legend} />
|
||
)}
|
||
|
||
{/* Sections */}
|
||
{sections.map((section, si) => (
|
||
<div key={si} style={{ marginBottom: "24px" }}>
|
||
<h2 style={{
|
||
fontSize: "11px", fontWeight: 600, color: "#4a5568",
|
||
textTransform: "uppercase", letterSpacing: "0.1em",
|
||
marginBottom: "8px", borderBottom: "1px solid #2d3748", paddingBottom: "4px",
|
||
}}>
|
||
{section.name}
|
||
</h2>
|
||
{section.items.map((item, ii) => (
|
||
<SectionItemView key={ii} item={item} completedQuests={completedQuests} onToggle={toggleQuest} onSelect={setSelectedQuest} />
|
||
))}
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Resources panel */}
|
||
{resources.length > 0 && (
|
||
<div style={{
|
||
position: resourcesIsOverlay ? "absolute" : "relative",
|
||
right: 0,
|
||
top: 0,
|
||
bottom: 0,
|
||
zIndex: 10,
|
||
width: resourcesCollapsed ? "36px" : "190px",
|
||
flexShrink: 0,
|
||
background: resourcesCollapsed ? "transparent" : "#161b22",
|
||
borderLeft: resourcesCollapsed ? "none" : "1px solid #2d3748",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
overflow: "hidden",
|
||
transition: "width 0.2s ease, background 0.2s ease",
|
||
}}>
|
||
{/* Toggle */}
|
||
<button
|
||
onClick={() => setResourcesCollapsed(!resourcesCollapsed)}
|
||
title={resourcesCollapsed ? "Afficher les ressources" : "Masquer les ressources"}
|
||
style={{
|
||
width: "100%",
|
||
height: "36px",
|
||
flexShrink: 0,
|
||
background: resourcesCollapsed ? "rgba(22,27,34,0.9)" : "transparent",
|
||
border: resourcesCollapsed ? "1px solid #2d3748" : "none",
|
||
borderRight: "none",
|
||
borderRadius: resourcesCollapsed ? "6px 0 0 6px" : "0",
|
||
borderBottom: "1px solid #2d3748",
|
||
color: "#4a5568",
|
||
cursor: "pointer",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: resourcesCollapsed ? "center" : "flex-start",
|
||
padding: "0 10px",
|
||
gap: "6px",
|
||
marginTop: resourcesCollapsed ? "8px" : "0",
|
||
transition: "all 0.15s",
|
||
}}
|
||
onMouseEnter={e => (e.currentTarget.style.color = "#f0c040")}
|
||
onMouseLeave={e => (e.currentTarget.style.color = "#4a5568")}
|
||
>
|
||
<span style={{
|
||
fontSize: "12px",
|
||
transform: resourcesCollapsed ? "rotate(180deg)" : "rotate(0deg)",
|
||
transition: "transform 0.2s ease",
|
||
display: "inline-block",
|
||
}}>
|
||
›
|
||
</span>
|
||
{!resourcesCollapsed && (
|
||
<span style={{ fontSize: "11px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", whiteSpace: "nowrap" }}>
|
||
Ressources
|
||
</span>
|
||
)}
|
||
</button>
|
||
|
||
{/* List */}
|
||
{!resourcesCollapsed && (
|
||
<div className="with-scrollbar" style={{ flex: 1, overflowY: "auto", padding: "10px 14px" }}>
|
||
{resources.map((r, i) => {
|
||
const owned = resourceInventory[r.name] ?? 0;
|
||
const done = owned >= r.quantity;
|
||
return (
|
||
<div key={i} style={{
|
||
padding: "6px 0", borderBottom: "1px solid #1f2937", fontSize: "12px",
|
||
}}>
|
||
<span style={{
|
||
color: done ? "#4ade80" : "#94a3b8",
|
||
display: "-webkit-box",
|
||
WebkitLineClamp: 2,
|
||
WebkitBoxOrient: "vertical",
|
||
overflow: "hidden",
|
||
wordBreak: "break-word",
|
||
marginBottom: "3px",
|
||
} as React.CSSProperties}>
|
||
{r.name}
|
||
</span>
|
||
<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
|
||
<input
|
||
type="number"
|
||
min="0"
|
||
value={owned === 0 ? "" : owned}
|
||
placeholder="0"
|
||
onChange={e => {
|
||
const v = parseInt(e.target.value);
|
||
setResourceQuantity(r.name, isNaN(v) ? 0 : Math.max(0, v));
|
||
}}
|
||
style={{
|
||
width: "42px", background: "#0d1117",
|
||
border: `1px solid ${done ? "rgba(74,222,128,0.4)" : "#2d3748"}`,
|
||
borderRadius: "4px", padding: "2px 4px",
|
||
color: done ? "#4ade80" : "#e2e8f0",
|
||
fontSize: "11px", outline: "none", textAlign: "right",
|
||
}}
|
||
/>
|
||
<span style={{ color: done ? "#4ade80" : "#f0c040", fontWeight: 700, flexShrink: 0 }}>
|
||
/ ×{r.quantity}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Legend({ legend }: { legend: CombatType[] }) {
|
||
return (
|
||
<div style={{
|
||
marginBottom: "20px", padding: "12px 16px",
|
||
background: "rgba(255,255,255,0.02)", border: "1px solid #2d3748", borderRadius: "8px",
|
||
}}>
|
||
<div style={{
|
||
fontSize: "11px", fontWeight: 600, color: "#4a5568",
|
||
textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: "10px",
|
||
}}>
|
||
Légende
|
||
</div>
|
||
<div style={{ display: "flex", flexWrap: "wrap", gap: "16px" }}>
|
||
{legend.map((ct, i) => (
|
||
<div key={i} style={{ display: "flex", alignItems: "center", gap: "6px" }}>
|
||
<span style={{ fontSize: "15px" }}>{combatIcon(ct.name)}</span>
|
||
<span style={{ fontSize: "12px", color: "#94a3b8" }}>{ct.name}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function SectionItemView({ item, completedQuests, onToggle, onSelect }: {
|
||
item: SectionItem;
|
||
completedQuests: Set<string>;
|
||
onToggle: (name: string) => void;
|
||
onSelect: (quest: { name: string; url: string | null }) => void;
|
||
}) {
|
||
if (item.type === "Instruction") {
|
||
if (item.text.startsWith("__ZONE__:")) {
|
||
const zone = item.text.replace("__ZONE__:", "");
|
||
return (
|
||
<div style={{
|
||
display: "flex", alignItems: "center", gap: "8px",
|
||
padding: "8px 0 4px", marginBottom: "2px",
|
||
}}>
|
||
<div style={{ flex: 1, height: "1px", background: "#2d3748" }} />
|
||
<span style={{ fontSize: "11px", color: "#4a9eff", fontWeight: 600, flexShrink: 0 }}>{zone}</span>
|
||
<div style={{ flex: 1, height: "1px", background: "#2d3748" }} />
|
||
</div>
|
||
);
|
||
}
|
||
return (
|
||
<div style={{
|
||
marginBottom: "6px", padding: "9px 14px",
|
||
background: "rgba(74,158,255,0.04)",
|
||
borderLeft: "3px solid rgba(74,158,255,0.35)",
|
||
borderRadius: "4px",
|
||
fontSize: "12px", color: "#94a3b8", lineHeight: 1.6,
|
||
}}>
|
||
<span style={{ color: "#4a9eff", fontSize: "10px", fontWeight: 600, display: "block", marginBottom: "2px", textTransform: "uppercase", letterSpacing: "0.05em" }}>
|
||
Rappel
|
||
</span>
|
||
<TextWithCoords text={item.text} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (item.type === "Group") {
|
||
return (
|
||
<div style={{
|
||
background: "rgba(255,255,255,0.02)", border: "1px solid #2d3748",
|
||
borderRadius: "6px", padding: "8px 10px", marginBottom: "6px",
|
||
}}>
|
||
{item.note && (
|
||
<div style={{ fontSize: "11px", color: "#4a9eff", marginBottom: "6px", fontStyle: "italic" }}>
|
||
🔗 {item.note}
|
||
</div>
|
||
)}
|
||
{item.quests.map((q, i) => (
|
||
<QuestRow key={i} quest={q} indent completed={completedQuests.has(q.name)} onToggle={onToggle} onSelect={onSelect} />
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (item.type === "Quest") {
|
||
return <QuestRow quest={item} completed={completedQuests.has(item.name)} onToggle={onToggle} onSelect={onSelect} />;
|
||
}
|
||
|
||
return null;
|
||
}
|
||
|
||
function QuestRow({ quest, completed, onToggle, onSelect, indent }: {
|
||
quest: QuestItem;
|
||
completed: boolean;
|
||
onToggle: (name: string) => void;
|
||
onSelect: (quest: { name: string; url: string | null }) => void;
|
||
indent?: boolean;
|
||
}) {
|
||
const questPreviews = useStore(s => s.questPreviews);
|
||
const previewsLoading = useStore(s => s.previewsLoading);
|
||
const [previewsOpen, setPreviewsOpen] = useState(false);
|
||
|
||
const previews = quest.url ? questPreviews[quest.url] : undefined;
|
||
const showLoadingPlaceholder = previewsLoading && quest.url !== null && previews === undefined;
|
||
|
||
const hasPreviewSection = showLoadingPlaceholder || (previews && previews.length > 0);
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
display: "flex", alignItems: "flex-start", gap: "8px",
|
||
padding: indent ? "3px 0" : "4px 6px",
|
||
borderRadius: "5px",
|
||
marginBottom: indent ? "1px" : "2px",
|
||
opacity: completed ? 0.5 : 1,
|
||
transition: "all 0.12s",
|
||
}}
|
||
onMouseEnter={e => { (e.currentTarget as HTMLElement).style.background = "rgba(255,255,255,0.04)"; }}
|
||
onMouseLeave={e => { (e.currentTarget as HTMLElement).style.background = "transparent"; }}
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
checked={completed}
|
||
onChange={() => onToggle(quest.name)}
|
||
style={{ marginTop: "2px", flexShrink: 0, cursor: "pointer" }}
|
||
/>
|
||
<div style={{ flex: 1, minWidth: 0 }}>
|
||
<div style={{ display: "flex", alignItems: "baseline", flexWrap: "wrap", gap: "2px 8px" }}>
|
||
<span
|
||
onClick={() => onSelect({ name: quest.name, url: quest.url })}
|
||
style={{
|
||
fontSize: "12px", lineHeight: 1.4,
|
||
color: completed ? "#4a5568" : "#93c5fd",
|
||
textDecoration: completed ? "line-through" : "underline",
|
||
textDecorationColor: "rgba(147,197,253,0.3)",
|
||
cursor: "pointer",
|
||
wordBreak: "break-word",
|
||
}}
|
||
>
|
||
{quest.name}
|
||
</span>
|
||
{quest.combat_indicators.map((ci, i) => (
|
||
<span key={i} style={{ fontSize: "11px", color: "#94a3b8", whiteSpace: "nowrap", flexShrink: 0 }}>
|
||
{combatIcon(ci.combat_type)} x{ci.count}
|
||
</span>
|
||
))}
|
||
</div>
|
||
|
||
{hasPreviewSection && (
|
||
<span
|
||
onClick={() => setPreviewsOpen(o => !o)}
|
||
style={{
|
||
display: "inline-block",
|
||
marginTop: "2px",
|
||
fontSize: "10px",
|
||
color: "#4a5568",
|
||
cursor: "pointer",
|
||
userSelect: "none",
|
||
}}
|
||
onMouseEnter={e => { (e.currentTarget as HTMLElement).style.color = "#94a3b8"; }}
|
||
onMouseLeave={e => { (e.currentTarget as HTMLElement).style.color = "#4a5568"; }}
|
||
>
|
||
{previewsOpen
|
||
? `▾ À prévoir`
|
||
: `▸ À prévoir${previews && previews.length > 0 ? ` (${previews.length})` : ""}`
|
||
}
|
||
</span>
|
||
)}
|
||
|
||
{previewsOpen && (
|
||
<>
|
||
{showLoadingPlaceholder && (
|
||
<div style={{
|
||
marginTop: "3px",
|
||
width: "60px", height: "14px",
|
||
borderRadius: "4px",
|
||
background: "linear-gradient(90deg, #1f2937 25%, #2d3748 50%, #1f2937 75%)",
|
||
backgroundSize: "200% 100%",
|
||
animation: "shimmer 1.4s infinite",
|
||
}} />
|
||
)}
|
||
|
||
{!showLoadingPlaceholder && previews && previews.length > 0 && (
|
||
<div style={{ display: "flex", flexWrap: "wrap", gap: "4px", marginTop: "3px" }}>
|
||
{previews.map((ci, i) => (
|
||
<span key={i} style={{
|
||
display: "inline-flex", alignItems: "center", gap: "3px",
|
||
fontSize: "10px", padding: "1px 6px", borderRadius: "4px",
|
||
background: "rgba(255,255,255,0.05)", border: "1px solid #2d3748",
|
||
color: "#4a5568",
|
||
}}>
|
||
<span>{combatIcon(ci.combat_type)}</span>
|
||
<span>×{ci.count}{ci.combat_type !== "item" ? ` ${ci.combat_type}` : ""}</span>
|
||
{ci.evitable && (
|
||
<span style={{ color: "#4ade80" }}>(évit.)</span>
|
||
)}
|
||
{ci.label && (
|
||
<span style={{
|
||
fontStyle: "italic",
|
||
maxWidth: "80px", overflow: "hidden",
|
||
textOverflow: "ellipsis", whiteSpace: "nowrap",
|
||
display: "inline-block",
|
||
}}>
|
||
{ci.label}
|
||
</span>
|
||
)}
|
||
</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{quest.note && (
|
||
<div style={{ fontSize: "11px", color: "#4a5568", marginTop: "2px", fontStyle: "italic" }}>
|
||
→ <TextWithCoords text={quest.note} />
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function collectAllQuests(sections: import("../types").Section[]): string[] {
|
||
const names: string[] = [];
|
||
for (const section of sections) {
|
||
for (const item of section.items) {
|
||
if (item.type === "Quest") names.push(item.name);
|
||
else if (item.type === "Group") item.quests.forEach((q: QuestItem) => names.push(q.name));
|
||
}
|
||
}
|
||
return names;
|
||
}
|