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

feat: dofus icone added to guide view and font changed
Some checks failed
Release / create-release (push) Has been cancelled
Details
Release / build-linux (push) Has been cancelled
Details
Release / build-windows (push) Has been cancelled
Details
Release / build-macos (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Blomios
2026-04-26 12:51:16 +02:00
parent 4f960ff41f
commit 5a747222fc
4 changed files with 148 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/components/DofusIconWidget.tsx Normal file
View File

@ -0,0 +1,111 @@
import { useEffect } from "react";
const DOFUS_SHIMMER_STYLE_ID = "dofus-icon-shimmer";
function injectShimmerStyle() {
if (document.getElementById(DOFUS_SHIMMER_STYLE_ID)) return;
const style = document.createElement("style");
style.id = DOFUS_SHIMMER_STYLE_ID;
style.textContent = `
@keyframes dofus-shimmer {
from { filter: brightness(1); }
to { filter: brightness(1.35); }
}
`;
document.head.appendChild(style);
}
// 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";
export 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 function DofusIcon({ gid, pct, size = 44, left = 0 }: { gid: string; pct: number; size?: number; left?: number }) {
useEffect(injectShimmerStyle, []);
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,
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",
animation: "dofus-shimmer 2s ease-in-out infinite alternate",
}}
/>
)}
</div>
);
}

50
src/components/GuideView.tsx
View File

@ -3,6 +3,7 @@ import { useStore } from "../store";
import { SectionItem, QuestItem, CombatType } from "../types";
import QuestDetailPanel from "./QuestDetailPanel";
import { TextWithCoords } from "./TextWithCoords";
import { DofusIcon, GID_TO_ICON } from "./DofusIconWidget";
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
@ -59,7 +60,7 @@ export default function GuideView() {
);
}
const { name, effect, recommended_level, resources, sections, combat_legend } = activeGuideData;
const { name, effect, recommended_level, resources, sections, combat_legend, gid } = activeGuideData;
const allQuests = collectAllQuests(sections);
const completedCount = allQuests.filter(q => completedQuests.has(q)).length;
@ -73,28 +74,43 @@ export default function GuideView() {
{/* 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>
{/* Zone gauche : icône + nom + niveau recommandé */}
<div style={{ display: "flex", alignItems: "flex-end", gap: "8px", minWidth: 0 }}>
{GID_TO_ICON[gid] && (
<div style={{ position: "relative", flexShrink: 0, width: 52, height: 52 }}>
<DofusIcon gid={gid} pct={pct} size={52} />
</div>
)}
</div>
<div style={{ textAlign: "right", flexShrink: 0 }}>
<div style={{ fontSize: "13px", fontWeight: 700, color: isDone ? "#4ade80" : "#f0c040" }}>
{completedCount} / {allQuests.length}
<div style={{ minWidth: 0 }}>
<h1 style={{
fontSize: "18px", fontWeight: 700, color: "#f0c040",
marginBottom: "2px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
}}>
{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={{ 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 style={{ marginTop: "10px" }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: "4px" }}>
<span style={{ fontSize: "12px", fontWeight: 700, color: isDone ? "#4ade80" : "#f0c040" }}>
{completedCount} / {allQuests.length} quêtes
</span>
<span style={{ fontSize: "11px", color: "#94a3b8" }}>{pct}%</span>
</div>
<div style={{ height: "4px", background: "#2d3748", borderRadius: "2px", overflow: "hidden" }}>
<div style={{
height: "100%", width: `${pct}%`,
background: isDone ? "#4ade80" : "linear-gradient(90deg, #4a9eff, #f0c040)",
borderRadius: "2px", transition: "width 0.3s ease",
}} />
</div>
</div>
{effect && (

97
src/components/HomeView.tsx
View File

@ -1,39 +1,5 @@
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
};
import { DofusIcon, GID_TO_ICON } from "./DofusIconWidget";
export default function HomeView({ needsSync, onSync }: { needsSync?: boolean; onSync?: () => void }) {
const { guides, openGuide, profiles, activeProfileId, syncing } = useStore();
@ -49,7 +15,7 @@ export default function HomeView({ needsSync, onSync }: { needsSync?: boolean; o
<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" }}>
<h1 style={{ fontSize: "20px", fontWeight: 700, color: "#f0c040", marginBottom: "2px", fontFamily: "'Cinzel Decorative', serif" }}>
Tougli — Guide Dofus
</h1>
{activeProfile && (
@ -160,63 +126,6 @@ function Section({ title, guides, onOpen }: {
);
}
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;
@ -232,7 +141,7 @@ function GuideCard({ guide, onOpen }: {
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} />
<DofusIcon gid={guide.gid} pct={pct} size={44} left={8} />
<button
onClick={() => onOpen(guide.gid)}

1
src/index.css
View File

@ -1,3 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&display=swap');
@import "tailwindcss";
@theme {