feat: dofus icone added to guide view and font changed

src/components/DofusIconWidget.tsx

@@ -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>
+  );
+}

src/components/GuideView.tsx

@@ -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,29 +74,44 @@ export default function GuideView() {
         {/* Header */}
         <div style={{ marginBottom: "20px" }}>
           <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "8px", flexWrap: "wrap" }}>
+            {/* 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 style={{ minWidth: 0 }}>
-              <h1 style={{ fontSize: "18px", fontWeight: 700, color: "#f0c040", marginBottom: "2px", wordBreak: "break-word" }}>{name}</h1>
+                <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={{ 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={{ 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 && (
             <div style={{

src/components/HomeView.tsx

@@ -1,39 +1,5 @@
 import { useStore } from "../store";
-
+import { DofusIcon, GID_TO_ICON } from "./DofusIconWidget";
-// 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();
@@ -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)}

src/index.css

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