feat: add dofus Icones on main page

2026-04-26 10:58:52 +02:00
parent b0e6d09301
commit 4f960ff41f
3 changed files with 152 additions and 27 deletions
--- a/.claude/agents/react-ui-designer.md
+++ b/.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.
--- a/src/components/HomeView.tsx
+++ b/src/components/HomeView.tsx
@ -1,5 +1,40 @@
 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
+};
+
 export default function HomeView({ needsSync, onSync }: { needsSync?: boolean; onSync?: () => void }) {
  const { guides, openGuide, profiles, activeProfileId, syncing } = useStore();

@ -118,13 +153,70 @@ 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>
  );
 }

+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;
@ -132,44 +224,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
-      onClick={() => onOpen(guide.gid)}
-      style={{
-        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",
-      }} />
+    // 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} />

-      <div style={{ paddingLeft: "4px" }}>
-        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "8px" }}>
+      <button
+        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 +288,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 +297,7 @@ function GuideCard({ guide, onOpen }: {
            {pct}%
          </span>
        </div>
-      </div>
-    </button>
+      </button>
+    </div>
  );
 }
--- a/src/types.ts
+++ b/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 {