blomios/TougliGui
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add first version of TougliGui with same features as on google sheet

Browse Source
This commit is contained in:
Blomios
2026-04-21 22:02:20 +02:00
parent 79d5c4baaa
commit f571d8bb3f
53 changed files with 12416 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
src/components/GuideView.tsx Normal file
View File

@ -0,0 +1,249 @@
import { openUrl } from "@tauri-apps/plugin-opener";
import { useStore } from "../store";
import { SectionItem, QuestItem } from "../types";
export default function GuideView() {
const { activeGuideData, completedQuests, toggleQuest } = useStore();
if (!activeGuideData) return null;
const { name, effect, recommended_level, resources, sections } = 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;
return (
<div style={{ flex: 1, display: "flex", overflow: "hidden" }}>
{/* Main quest list */}
<div style={{ flex: 1, overflowY: "auto", padding: "20px 24px" }}>
{/* Guide header */}
<div style={{ marginBottom: "20px" }}>
<h1 style={{ fontSize: "20px", fontWeight: 700, color: "#f0c040", marginBottom: "4px" }}>
{name}
</h1>
<div style={{ display: "flex", gap: "16px", alignItems: "center", marginBottom: "10px" }}>
{recommended_level && (
<span style={{
fontSize: "11px", background: "rgba(74,158,255,0.15)", color: "#4a9eff",
border: "1px solid rgba(74,158,255,0.3)", borderRadius: "4px", padding: "2px 8px",
}}>
Niveau recommandé : {recommended_level}
</span>
)}
<span style={{ fontSize: "11px", color: "#94a3b8" }}>
{completedCount}/{allQuests.length} quêtes · {pct}%
</span>
</div>
{/* Progress bar */}
<div style={{ height: "4px", background: "#2d3748", borderRadius: "2px", overflow: "hidden" }}>
<div style={{
height: "100%", width: `${pct}%`,
background: pct === 100 ? "#4ade80" : "linear-gradient(90deg, #4a9eff, #f0c040)",
borderRadius: "2px", transition: "width 0.3s ease",
}} />
</div>
{effect && (
<div style={{
marginTop: "10px", background: "rgba(240,192,64,0.05)",
border: "1px solid rgba(240,192,64,0.2)", borderRadius: "6px",
padding: "8px 12px", fontSize: "11px", color: "#94a3b8", lineHeight: 1.5,
}}>
<span style={{ color: "#f0c040", fontWeight: 600 }}>Effet : </span>
{effect}
</div>
)}
</div>
{/* Sections */}
{sections.map((section, si) => (
<div key={si} style={{ marginBottom: "20px" }}>
<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} />
))}
</div>
))}
</div>
{/* Resources panel */}
{resources.length > 0 && (
<div style={{
width: "200px", flexShrink: 0, background: "#161b22",
borderLeft: "1px solid #2d3748", overflowY: "auto", padding: "16px 14px",
}}>
<h3 style={{
fontSize: "11px", fontWeight: 600, color: "#4a5568",
textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: "10px",
}}>
Ressources
</h3>
{resources.map((r, i) => (
<div key={i} style={{
display: "flex", justifyContent: "space-between", alignItems: "center",
padding: "4px 0", borderBottom: "1px solid #1f2937",
fontSize: "11px",
}}>
<span style={{ color: "#94a3b8", flex: 1, marginRight: "8px" }}>{r.name}</span>
<span style={{ color: "#f0c040", fontWeight: 700, flexShrink: 0 }}>×{r.quantity}</span>
</div>
))}
</div>
)}
</div>
);
}
function SectionItemView({ item, completedQuests, onToggle }: {
item: SectionItem;
completedQuests: Set<string>;
onToggle: (name: string) => 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={{
background: "rgba(74,158,255,0.05)", border: "1px solid rgba(74,158,255,0.15)",
borderRadius: "6px", padding: "8px 12px", marginBottom: "4px",
fontSize: "11px", color: "#94a3b8", lineHeight: 1.5,
}}>
ℹ️ {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: "10px", 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} />
))}
</div>
);
}
if (item.type === "Quest") {
return <QuestRow quest={item} completed={completedQuests.has(item.name)} onToggle={onToggle} />;
}
return null;
}
function QuestRow({ quest, completed, onToggle, indent }: {
quest: QuestItem;
completed: boolean;
onToggle: (name: string) => void;
indent?: boolean;
}) {
return (
<div
onClick={() => onToggle(quest.name)}
style={{
display: "flex", alignItems: "flex-start", gap: "8px",
padding: indent ? "4px 0" : "5px 6px",
borderRadius: "5px", cursor: "pointer",
marginBottom: indent ? "2px" : "3px",
opacity: completed ? 0.6 : 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)}
onClick={e => e.stopPropagation()}
style={{ marginTop: "2px", flexShrink: 0 }}
/>
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{ display: "flex", alignItems: "center", gap: "5px", flexWrap: "wrap" }}>
<span style={{
fontSize: "12px", color: completed ? "#4a5568" : "#e2e8f0",
textDecoration: completed ? "line-through" : "none",
lineHeight: 1.4,
}}>
{quest.name}
</span>
{quest.url && (
<span
title="Voir sur Dofus Pour Les Noobs"
onClick={e => { e.stopPropagation(); openUrl(quest.url!); }}
style={{
fontSize: "10px", color: "#4a9eff", cursor: "pointer",
opacity: 0.7, flexShrink: 0, lineHeight: 1,
}}
onMouseEnter={e => (e.currentTarget as HTMLElement).style.opacity = "1"}
onMouseLeave={e => (e.currentTarget as HTMLElement).style.opacity = "0.7"}
>
🔗
</span>
)}
</div>
{quest.combat_indicators.length > 0 && (
<div style={{ display: "flex", flexWrap: "wrap", gap: "3px", marginTop: "3px" }}>
{quest.combat_indicators.map((ci, i) => (
<span key={i} style={{
fontSize: "9px", padding: "1px 5px",
background: "rgba(74,158,255,0.15)", color: "#4a9eff",
border: "1px solid rgba(74,158,255,0.25)", borderRadius: "3px",
}}>
{ci.combat_type} {ci.count}
</span>
))}
</div>
)}
{quest.note && (
<div style={{ fontSize: "10px", color: "#94a3b8", marginTop: "2px", fontStyle: "italic" }}>
→ {quest.note}
</div>
)}
</div>
</div>
);
}
function collectAllQuests(sections: import("../types").Section[] | undefined): string[] {
if (!sections) return [];
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: import("../types").QuestItem) => names.push(q.name));
}
}
return names;
}