feat: dofus icone added to guide view and font changed

.claude/agents/react-ui-designer.md

@@ -65,6 +65,19 @@ You are fluent in:
 4. **Régression** — Regression analysis (if applicable)
 5. **Code corrigé** — Provide corrected code snippets for all 🔴 and 🟠 issues
 
+## Unit Testing — Mandatory Protocol
+
+After **every** feature implementation or code update, you must:
+
+1. **Run the full test suite** to detect regressions:
+   ```bash
+   cd /home/anthony/Documents/Projects/TougliGui && npm run test
+   ```
+2. **Write or update unit tests** for anything you added or changed. Tests live in `src/__tests__/`. Use Vitest + Testing Library (already configured in the project).
+3. **Report the test results** at the end of your response: number of tests passing, any failures, and which tests you added or modified.
+
+Never consider a task complete without running the tests. If a test fails, fix the issue before reporting done.
+
 ## Behavioral Guidelines
 - **Default language**: Respond in the same language as the user (French or English).
 - **Be decisive**: When multiple valid approaches exist, recommend one and explain briefly why.

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,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 }}>
+            {/* Zone gauche : icône + nom + niveau recommandé */}
-              <h1 style={{ fontSize: "18px", fontWeight: 700, color: "#f0c040", marginBottom: "2px", wordBreak: "break-word" }}>{name}</h1>
+            <div style={{ display: "flex", alignItems: "flex-end", gap: "8px", minWidth: 0 }}>
-              {recommended_level && (
+              {GID_TO_ICON[gid] && (
-                <div style={{ fontSize: "12px", color: "#94a3b8" }}>
+                <div style={{ position: "relative", flexShrink: 0, width: 52, height: 52 }}>
-                  Niv. recommandé : <span style={{ color: "#e2e8f0", fontWeight: 600 }}>{recommended_level}</span>
+                  <DofusIcon gid={gid} pct={pct} size={52} />
                 </div>
               )}
-            </div>
+              <div style={{ minWidth: 0 }}>
-            <div style={{ textAlign: "right", flexShrink: 0 }}>
+                <h1 style={{
-              <div style={{ fontSize: "13px", fontWeight: 700, color: isDone ? "#4ade80" : "#f0c040" }}>
+                  fontSize: "18px", fontWeight: 700, color: "#f0c040",
-                {completedCount} / {allQuests.length}
+                  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={{ marginTop: "10px" }}>
-            <div style={{
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: "4px" }}>
-              height: "100%", width: `${pct}%`,
+              <span style={{ fontSize: "12px", fontWeight: 700, color: isDone ? "#4ade80" : "#f0c040" }}>
-              background: isDone ? "#4ade80" : "linear-gradient(90deg, #4a9eff, #f0c040)",
+                {completedCount} / {allQuests.length} quêtes
-              borderRadius: "2px", transition: "width 0.3s ease",
+              </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 && (

src/components/HomeView.tsx

@@ -1,4 +1,5 @@
 import { useStore } from "../store";
+import { DofusIcon, GID_TO_ICON } from "./DofusIconWidget";
 
 export default function HomeView({ needsSync, onSync }: { needsSync?: boolean; onSync?: () => void }) {
   const { guides, openGuide, profiles, activeProfileId, syncing } = useStore();
@@ -14,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 && (
@@ -118,7 +119,7 @@ function Section({ title, guides, onOpen }: {
       }}>
         {title}
       </h2>
-      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(175px, 1fr))", gap: "8px" }}>
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(210px, 1fr))", gap: "8px", paddingTop: "20px" }}>
         {guides.map(g => <GuideCard key={g.gid} guide={g} onOpen={onOpen} />)}
       </div>
     </div>
@@ -132,44 +133,62 @@ function GuideCard({ guide, onOpen }: {
   const pct = guide.total_quests > 0 ? Math.round((guide.completed_quests / guide.total_quests) * 100) : 0;
   const isDone = pct === 100 && guide.total_quests > 0;
   const inProgress = guide.completed_quests > 0 && !isDone;
+  const hasIcon = GID_TO_ICON[guide.gid] != null;
 
   const accentColor = isDone ? "#4ade80" : inProgress ? "#f0c040" : "#4a9eff";
+  const borderColor = isDone ? "rgba(74,222,128,0.25)" : "#2d3748";
 
   return (
-    <button
+    // Wrapper pour permettre à l'icône de déborder vers le haut
-      onClick={() => onOpen(guide.gid)}
+    <div style={{ position: "relative", paddingTop: hasIcon ? "18px" : "0" }}>
-      style={{
+      <DofusIcon gid={guide.gid} pct={pct} size={44} left={8} />
-        background: "#161b22", border: `1px solid ${isDone ? "rgba(74,222,128,0.25)" : "#2d3748"}`,
-        borderRadius: "8px", padding: "12px 14px", cursor: "pointer",
-        textAlign: "left", transition: "all 0.15s", position: "relative", overflow: "hidden",
-      }}
-      onMouseEnter={e => {
-        (e.currentTarget as HTMLElement).style.borderColor = accentColor;
-        (e.currentTarget as HTMLElement).style.background = "#1a2233";
-      }}
-      onMouseLeave={e => {
-        (e.currentTarget as HTMLElement).style.borderColor = isDone ? "rgba(74,222,128,0.25)" : "#2d3748";
-        (e.currentTarget as HTMLElement).style.background = "#161b22";
-      }}
-    >
-      {/* Indicateur latéral */}
-      <div style={{
-        position: "absolute", left: 0, top: 0, bottom: 0, width: "3px",
-        background: accentColor, opacity: isDone ? 1 : inProgress ? 0.8 : 0.3,
-        borderRadius: "8px 0 0 8px",
-      }} />
 
-      <div style={{ paddingLeft: "4px" }}>
+      <button
-        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "8px" }}>
+        onClick={() => onOpen(guide.gid)}
+        style={{
+          width: "100%",
+          background: "#161b22",
+          border: `1px solid ${borderColor}`,
+          borderRadius: "8px",
+          padding: "10px 12px",
+          cursor: "pointer",
+          textAlign: "left",
+          transition: "border-color 0.15s, background 0.15s",
+          position: "relative",
+          overflow: "hidden",
+        }}
+        onMouseEnter={e => {
+          (e.currentTarget as HTMLElement).style.borderColor = accentColor;
+          (e.currentTarget as HTMLElement).style.background = "#1a2233";
+        }}
+        onMouseLeave={e => {
+          (e.currentTarget as HTMLElement).style.borderColor = borderColor;
+          (e.currentTarget as HTMLElement).style.background = "#161b22";
+        }}
+      >
+        {/* Nom + checkmark */}
+        <div style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: "8px",
+          paddingLeft: hasIcon ? "46px" : "0",
+          minWidth: 0,
+        }}>
           <span style={{
             fontSize: "12px", fontWeight: 600, lineHeight: 1.3,
             color: isDone ? "#4ade80" : "#e2e8f0",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            minWidth: 0,
           }}>
             {guide.name}
           </span>
           {isDone && <span style={{ fontSize: "12px", flexShrink: 0 }}>✓</span>}
         </div>
 
+        {/* Barre de progression */}
         <div style={{ height: "3px", background: "#2d3748", borderRadius: "2px", overflow: "hidden", marginBottom: "6px" }}>
           <div style={{
             height: "100%", width: `${pct}%`,
@@ -178,6 +197,7 @@ function GuideCard({ guide, onOpen }: {
           }} />
         </div>
 
+        {/* Compteur */}
         <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
           <span style={{ fontSize: "10px", color: "#4a5568" }}>
             {guide.completed_quests}/{guide.total_quests} quêtes
@@ -186,7 +206,7 @@ function GuideCard({ guide, onOpen }: {
             {pct}%
           </span>
         </div>
-      </div>
+      </button>
-    </button>
+    </div>
   );
 }

src/index.css

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

src/types.ts

@@ -10,6 +10,7 @@ export interface GuideListItem {
   last_synced_at: string | null;
   total_quests: number;
   completed_quests: number;
+  image_url?: string;
 }
 
 export interface CombatType {