refactor: types frontend alignés backend — zéro as any, monstres triés par level

types.ts: rewrite complet — Character, Monster, CombatResult, CombatLog alignés sur les champs réels du backend. Plus de mapping approximatif. CombatPage: réécriture propre — monstres triés par level (appropriés en haut, trop forts en bas avec opacity + warning), historique avec vrais noms de monstres et valeurs XP/or, level up affiché dans le résultat. Cleanup: 0 occurrence de "as any" dans tout le frontend.
2026-03-24 17:24:59 +01:00
parent e3c870bb9f
commit 014ffdd789
5 changed files with 103 additions and 58 deletions
--- a/frontend/src/api/types.ts
+++ b/frontend/src/api/types.ts
@@ -7,6 +7,7 @@ export interface User {

 export interface Character {
  id: string;
+  userId: string;
  name: string;
  level: number;
  xp: number;
@@ -18,21 +19,23 @@ export interface Character {
  vitalite: number;
  hpCurrent: number;
  hpMax: number;
-  endurance: number;
-  enduranceCurrent: number;   // calculé à la lecture (backend field)
+  enduranceSaved: number;
+  lastEnduranceTs: string;
  enduranceMax: number;
+  enduranceCurrent: number;
  statPoints: number;
-  xpToNextLevel: number;
  activeTitle: string | null;
  totalGoldEarned: number;
+  xpToNextLevel: number;
  createdAt: string;
+  updatedAt: string;
 }

 export interface Monster {
  id: string;
  name: string;
-  levelMin: number;
-  levelMax: number;
+  minLevel: number;
+  maxLevel: number;
  hp: number;
  attack: number;
  defense: number;
@@ -40,37 +43,57 @@ export interface Monster {
  xpReward: number;
  goldMin: number;
  goldMax: number;
+  dropMaterialId: string | null;
 }

 export interface CombatRound {
  round: number;
-  playerDamage: number;
-  playerCrit: boolean;
-  monsterDodged: boolean;
-  monsterDamage: number;
-  playerDodged: boolean;
+  playerAttack: { damage: number; isCrit: boolean; isDodged: boolean; log: string };
+  monsterAttack: { damage: number; isCrit: boolean; isDodged: boolean; log: string };
  playerHp: number;
  monsterHp: number;
  log: string[];
 }

+export interface CombatRewards {
+  xp: number;
+  gold: number;
+  goldLost: number;
+  levelUp: boolean;
+  newLevel: number;
+  statPointsGained: number;
+  loot: { name: string; quantity: number } | null;
+}
+
+export interface CombatCharacterState {
+  level: number;
+  xp: number;
+  xpToNextLevel: number;
+  gold: number;
+  hpCurrent: number;
+  hpMax: number;
+  enduranceCurrent: number;
+  enduranceMax: number;
+  statPoints: number;
+}
+
 export interface CombatResult {
  winner: 'player' | 'monster';
  rounds: CombatRound[];
-  xpGained?: number;
-  goldGained?: number;
-  enduranceCost: number;
-  loot?: { material: Material; quantity: number } | null;
+  summary: string;
+  rewards: CombatRewards;
+  character: CombatCharacterState;
 }

 export interface CombatLog {
  id: string;
-  monsterId: string;
-  monsterName?: string;
  winner: 'player' | 'monster';
-  xpGained: number;
-  goldGained: number;
+  totalRounds: number;
+  xpEarned: number;
+  goldEarned: number;
+  levelUp: boolean;
  createdAt: string;
+  monster: { id: string; name: string; minLevel: number; maxLevel: number };
 }

 export type Rarity = 'common' | 'rare' | 'epic' | 'legendary';
--- a/frontend/src/components/HudBar.tsx
+++ b/frontend/src/components/HudBar.tsx
@@ -46,8 +46,8 @@ export function HudBar() {

  if (!char) return null;

-  const endurance = (char as any).enduranceCurrent ?? (char as any).endurance ?? 0;
-  const xpNext = (char as any).xpToNextLevel ?? Math.round(100 * Math.pow(char.level, 1.5));
+  const endurance = char.enduranceCurrent;
+  const xpNext = char.xpToNextLevel;
  const questCount = activeQuests?.filter((pq: any) => pq.status === 'active').length ?? 0;
  const questReady = activeQuests?.filter((pq: any) => pq.status === 'completed').length ?? 0;

@@ -88,11 +88,11 @@ export function HudBar() {
        <span style={{ color: endurance < 5 ? '#e84040' : '#6b7a99' }}>
          {endurance}/{char.enduranceMax}
        </span>
-        {(char as any).lastEnduranceTs && (
+        {char.lastEnduranceTs && (
          <RegenTimer
            endurance={endurance}
            enduranceMax={char.enduranceMax}
-            lastEnduranceTs={(char as any).lastEnduranceTs}
+            lastEnduranceTs={char.lastEnduranceTs}
          />
        )}
      </Link>
--- a/frontend/src/pages/CombatPage.tsx
+++ b/frontend/src/pages/CombatPage.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { combatApi, characterApi } from '../api/endpoints';
-import type { Monster, CombatResult } from '../api/types';
+import type { Monster, CombatResult, CombatLog } from '../api/types';
 import { Swords, Trophy, Skull, Clock, Zap } from 'lucide-react';

 const COMBAT_COST = 5;
@@ -12,16 +12,21 @@ const ATTACK_TYPES = [
  { id: 'magic',  label: 'Magie',    emoji: '✨',  stat: 'Intelligence × 1.5' },
 ];

-function MonsterCard({ m, selected, onSelect }: { m: Monster; selected: boolean; onSelect: () => void }) {
+function MonsterCard({ m, selected, onSelect, playerLevel }: { m: Monster; selected: boolean; onSelect: () => void; playerLevel: number }) {
+  const tooHard = m.minLevel > playerLevel + 2;
+  const tooEasy = m.maxLevel < playerLevel - 3;
+
  return (
    <div
      className={`card card-hover ${selected ? 'card-gold' : ''}`}
      onClick={onSelect}
-      style={{ cursor: 'pointer', transition: 'all 0.15s' }}
+      style={{ cursor: 'pointer', transition: 'all 0.15s', opacity: tooHard ? 0.4 : 1 }}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 6 }}>
        <span style={{ fontWeight: 700, fontSize: 14, color: selected ? '#f4c94e' : '#dce4f0' }}>{m.name}</span>
-        <span className="badge badge-red" style={{ fontSize: 10 }}>Niv. {(m as any).minLevel ?? m.levelMin}–{(m as any).maxLevel ?? m.levelMax}</span>
+        <span className={tooHard ? 'badge badge-red' : tooEasy ? 'badge' : 'badge badge-green'} style={{ fontSize: 10 }}>
+          Niv. {m.minLevel}–{m.maxLevel}
+        </span>
      </div>
      <div style={{ display: 'flex', gap: 12, fontSize: 12, color: '#6b7a99' }}>
        <span>❤️ {m.hp}</span>
@@ -30,49 +35,49 @@ function MonsterCard({ m, selected, onSelect }: { m: Monster; selected: boolean;
        <span>⭐ {m.xpReward} XP</span>
        <span>💰 {m.goldMin}–{m.goldMax}</span>
      </div>
+      {tooHard && <div style={{ fontSize: 10, color: '#e84040', marginTop: 4 }}>Niveau trop élevé</div>}
    </div>
  );
 }

-function CombatLog({ result }: { result: CombatResult }) {
+function CombatLogView({ result }: { result: CombatResult }) {
  const won = result.winner === 'player';
  return (
    <div className="card" style={{ marginTop: '1rem' }}>
-      {/* Résultat */}
      <div style={{ textAlign: 'center', padding: '0.75rem 0', marginBottom: '0.75rem', borderBottom: '1px solid #2a3448' }}>
        {won
          ? <div style={{ color: '#3ddc84', fontWeight: 800, fontSize: 18 }}>
              <Trophy size={20} style={{ display: 'inline', marginRight: 8 }} />
-              Victoire ! +{(result as any).rewards?.xp ?? result.xpGained} XP  +{(result as any).rewards?.gold ?? result.goldGained} or
+              Victoire ! +{result.rewards.xp} XP  +{result.rewards.gold} or
            </div>
          : <div style={{ color: '#e84040', fontWeight: 800, fontSize: 18 }}>
              <Skull size={20} style={{ display: 'inline', marginRight: 8 }} />
-              Défaite… −50 endurance
+              Défaite… Retour à l'auberge
            </div>
        }
-        {((result as any).rewards?.loot ?? result.loot) && (
+        {result.rewards.loot && (
          <div style={{ fontSize: 13, color: '#f4c94e', marginTop: 4 }}>
-            🎁 Loot obtenu !
+            🎁 Loot : {result.rewards.loot.name} ×{result.rewards.loot.quantity}
          </div>
        )}
-        {(result as any).rewards?.levelUp && (
+        {result.rewards.levelUp && (
          <div style={{ fontSize: 13, color: '#a78bfa', marginTop: 4 }}>
-            🎉 LEVEL UP ! Niveau {(result as any).rewards.newLevel} — +{(result as any).rewards.statPointsGained} points de stats
+            🎉 LEVEL UP ! Niveau {result.rewards.newLevel} — +{result.rewards.statPointsGained} points de stats
          </div>
        )}
      </div>

-      {/* Log de combat */}
      <p style={{ margin: '0 0 6px', fontSize: 12, fontWeight: 700, color: '#6b7a99' }}>
        Log — {result.rounds.length} tour{result.rounds.length > 1 ? 's' : ''}
      </p>
      <div className="combat-log">
        {result.rounds.flatMap(r =>
          r.log.map((line, i) => {
-            const cls = line.includes('frappe') && !line.includes('Monstre') ? 'log-player'
-              : line.includes('Monstre') || line.includes('frappe') ? 'log-monster'
-              : line.includes('CRITIQUE') ? 'log-crit'
-              : 'log-system';
+            const cls = line.includes('CRITIQUE') ? 'log-crit'
+              : line.includes('esquive') ? 'log-crit'
+              : line.includes('HP') ? 'log-system'
+              : i === 0 ? 'log-player'
+              : 'log-monster';
            return <div key={`${r.round}-${i}`} className={cls}>[T{r.round}] {line}</div>;
          })
        )}
@@ -85,6 +90,19 @@ function CombatLog({ result }: { result: CombatResult }) {
  );
 }

+function HistoryEntry({ h }: { h: CombatLog }) {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, padding: '3px 0', borderBottom: '1px solid #1e2535' }}>
+      <span style={{ color: h.winner === 'player' ? '#3ddc84' : '#e84040' }}>
+        {h.winner === 'player' ? '✓' : '✗'} {h.monster.name}
+      </span>
+      <span style={{ color: '#6b7a99' }}>
+        {h.winner === 'player' ? `+${h.xpEarned}xp +${h.goldEarned}or` : `${h.totalRounds} tours`}
+      </span>
+    </div>
+  );
+}
+
 export function CombatPage() {
  const qc = useQueryClient();
  const [selectedMonster, setSelectedMonster] = useState<Monster | null>(null);
@@ -92,7 +110,8 @@ export function CombatPage() {
  const [lastResult, setLastResult] = useState<CombatResult | null>(null);

  const { data: char } = useQuery({ queryKey: ['character'], queryFn: characterApi.me });
-  const endurance = (char as any)?.enduranceCurrent ?? (char as any)?.endurance ?? 0;
+  const endurance = char?.enduranceCurrent ?? 0;
+  const playerLevel = char?.level ?? 1;
  const canFight = endurance >= COMBAT_COST;

  const { data: monsters, isLoading } = useQuery({
@@ -111,11 +130,20 @@ export function CombatPage() {
      setLastResult(result);
      qc.invalidateQueries({ queryKey: ['character'] });
      qc.invalidateQueries({ queryKey: ['combatHistory'] });
+      qc.invalidateQueries({ queryKey: ['questsActive'] });
    },
  });

  if (isLoading) return <div style={{ padding: '2rem', color: '#6b7a99' }}>Chargement des monstres…</div>;

+  // Trier : monstres appropriés en haut, trop forts en bas
+  const sorted = [...(monsters ?? [])].sort((a, b) => {
+    const aOk = a.minLevel <= playerLevel + 2 ? 0 : 1;
+    const bOk = b.minLevel <= playerLevel + 2 ? 0 : 1;
+    if (aOk !== bOk) return aOk - bOk;
+    return a.minLevel - b.minLevel;
+  });
+
  return (
    <div>
      <h2 style={{ margin: '0 0 1rem', color: '#f4c94e', fontSize: 20 }}>⚔️ Combat</h2>
@@ -127,12 +155,13 @@ export function CombatPage() {
            Adversaire
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-            {monsters?.map(m => (
+            {sorted.map(m => (
              <MonsterCard
                key={m.id}
                m={m}
                selected={selectedMonster?.id === m.id}
                onSelect={() => setSelectedMonster(m)}
+                playerLevel={playerLevel}
              />
            ))}
          </div>
@@ -150,7 +179,7 @@ export function CombatPage() {
                key={a.id}
                className={`card card-hover ${attackType === a.id ? 'card-gold' : ''}`}
                onClick={() => setAttackType(a.id)}
-                style={{ display: 'flex', alignItems: 'center', gap: 10 }}
+                style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}
              >
                <span style={{ fontSize: 18 }}>{a.emoji}</span>
                <div>
@@ -164,7 +193,7 @@ export function CombatPage() {
          {/* Coût endurance */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, marginBottom: 6, fontSize: 12, color: canFight ? '#5ba4f5' : '#e84040' }}>
            <Zap size={12} /> Coût : {COMBAT_COST} endurance — Disponible : {endurance}
-            {canFight && <span style={{ color: '#6b7a99' }}>({Math.floor(endurance / COMBAT_COST)} combats possibles)</span>}
+            {canFight && <span style={{ color: '#6b7a99' }}>({Math.floor(endurance / COMBAT_COST)} combats)</span>}
          </div>

          {/* Bouton combattre */}
@@ -192,14 +221,7 @@ export function CombatPage() {
                <Clock size={11} /> Historique récent
              </p>
              <div className="card" style={{ padding: '0.75rem' }}>
-                {history.slice(0, 5).map(h => (
-                  <div key={h.id} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, padding: '3px 0', borderBottom: '1px solid #1e2535' }}>
-                    <span style={{ color: h.winner === 'player' ? '#3ddc84' : '#e84040' }}>
-                      {h.winner === 'player' ? '✓' : '✗'} {(h as any).monster?.name ?? h.monsterName ?? 'Monstre'}
-                    </span>
-                    <span style={{ color: '#6b7a99' }}>+{(h as any).xpEarned ?? h.xpGained}xp +{(h as any).goldEarned ?? h.goldGained}or</span>
-                  </div>
-                ))}
+                {history.slice(0, 5).map(h => <HistoryEntry key={h.id} h={h} />)}
              </div>
            </div>
          )}
@@ -207,7 +229,7 @@ export function CombatPage() {
      </div>

      {/* Résultat du dernier combat */}
-      {lastResult && <CombatLog result={lastResult} />}
+      {lastResult && <CombatLogView result={lastResult} />}
    </div>
  );
 }
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -150,10 +150,10 @@ export function DashboardPage() {
  if (isLoading) return <div style={{ padding: '2rem', color: '#6b7a99' }}>Chargement…</div>;
  if (isError || !char) return <CreateCharacter />;

-  const xpNext = (char as any).xpToNextLevel ?? Math.round(100 * Math.pow(char.level, 1.5));
-  const statPoints = (char as any).statPoints ?? 0;
+  const xpNext = char.xpToNextLevel;
+  const statPoints = char.statPoints ?? 0;
  const needsHeal = char.hpCurrent < char.hpMax;
-  const endurance = (char as any).enduranceCurrent ?? (char as any).endurance ?? 0;
+  const endurance = char.enduranceCurrent;
  const REST_COST = 10;
  const COMBAT_COST = 5;
  const FORGE_COST = 10;
@@ -202,9 +202,9 @@ export function DashboardPage() {
                <span style={{ fontSize: 12, color: '#5ba4f5', display: 'flex', alignItems: 'center', gap: 4 }}>
                  <Zap size={11} /> Endurance
                </span>
-                <span style={{ fontSize: 11, color: '#6b7a99' }}>{char.enduranceCurrent ?? char.endurance} / {char.enduranceMax}</span>
+                <span style={{ fontSize: 11, color: '#6b7a99' }}>{endurance} / {char.enduranceMax}</span>
              </div>
-              <Bar value={char.enduranceCurrent ?? char.endurance} max={char.enduranceMax} type="end" showValues={false} />
+              <Bar value={endurance} max={char.enduranceMax} type="end" showValues={false} />
            </div>
            <div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
--- a/frontend/src/pages/ForgePage.tsx
+++ b/frontend/src/pages/ForgePage.tsx
@@ -63,7 +63,7 @@ export function ForgePage() {
  const [lastResult, setLastResult] = useState<{ success: boolean; newLevel: number } | null>(null);

  const { data: char } = useQuery({ queryKey: ['character'], queryFn: characterApi.me });
-  const endurance = (char as any)?.enduranceCurrent ?? (char as any)?.endurance ?? 0;
+  const endurance = char?.enduranceCurrent ?? 0;
  const gold = char?.gold ?? 0;

  const { data: inventory, isLoading } = useQuery({