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

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)}