Pokemon images

package.json

@@ -30,5 +30,9 @@
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.39.0",
     "vite": "^7.1.0"
+  },
+  "volta": {
+    "node": "22.12.0",
+    "npm": "10.5.0"
   }
 }

src/components/NPCPartyBuilder.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react';
-import { Plus, Trash2, Shuffle, Zap, Search } from 'lucide-react';
+import { Plus, Trash2, Shuffle, Zap, Search, Grid, List } from 'lucide-react';
 import type { NPCConfiguration, NPCPartyProvider, SimplePartyProvider, PoolPartyProvider, PoolEntry } from '../types/npc';
 import { pokemonApi } from '../services/pokemonApi';
 import { PokemonFormSelector } from './PokemonFormSelector';
+import { PokemonCard } from './PokemonCard';
 
 interface NPCPartyBuilderProps {
   config: NPCConfiguration;
@@ -14,6 +15,8 @@ export function NPCPartyBuilder({ config, onChange }: NPCPartyBuilderProps) {
   const [showPokemonFormSelector, setShowPokemonFormSelector] = useState(false);
   const [selectedPokemonIndex, setSelectedPokemonIndex] = useState<number>(-1);
   const [isGenerating, setIsGenerating] = useState(false);
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
+  const [currentPokemonString, setCurrentPokemonString] = useState<string>(''); // Ajout de l'état pour le Pokémon actuel
 
   const handlePartyChange = (party: NPCPartyProvider) => {
     onChange({ ...config, party });
@@ -77,6 +80,14 @@ export function NPCPartyBuilder({ config, onChange }: NPCPartyBuilderProps) {
 
   const openPokemonFormSelector = (index: number) => {
     setSelectedPokemonIndex(index);
+
+    // Si on modifie un Pokémon existant, récupérer sa chaîne actuelle
+    if (partyType === 'simple') {
+      const party = config.party as SimplePartyProvider;
+      const existingPokemon = party.pokemon[index];
+      setCurrentPokemonString(existingPokemon || '');
+    }
+
     setShowPokemonFormSelector(true);
   };
 
@@ -126,16 +137,47 @@ export function NPCPartyBuilder({ config, onChange }: NPCPartyBuilderProps) {
     };
 
     return (
-      <div className="space-y-4">
+      <div className="space-y-6">
-        <div className="flex items-center justify-between">
+        {/* Header with controls */}
-          <h4 className="font-medium">Pokemon List</h4>
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-          <div className="flex gap-2">
+          <div className="flex items-center gap-4">
+            <h4 className="font-semibold text-lg text-gray-800">Pokemon Team</h4>
+            <span className="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded-full">
+              {party.pokemon.length} Pokemon
+            </span>
+          </div>
+
+          {/* Display mode and add controls */}
+          <div className="flex items-center gap-2">
+            <div className="flex items-center bg-gray-100 rounded-md p-1">
+              <button
+                type="button"
+                onClick={() => setViewMode('grid')}
+                className={`p-1 rounded ${viewMode === 'grid' 
+                  ? 'bg-white text-indigo-600 shadow-sm' 
+                  : 'text-gray-500 hover:text-gray-700'}`}
+                title="Grid view"
+              >
+                <Grid className="h-4 w-4" />
+              </button>
+              <button
+                type="button"
+                onClick={() => setViewMode('list')}
+                className={`p-1 rounded ${viewMode === 'list' 
+                  ? 'bg-white text-indigo-600 shadow-sm' 
+                  : 'text-gray-500 hover:text-gray-700'}`}
+                title="List view"
+              >
+                <List className="h-4 w-4" />
+              </button>
+            </div>
+
             <button
               type="button"
               onClick={addPokemon}
-              className="inline-flex items-center px-2 py-1 border border-transparent text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200"
+              className="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 transition-colors"
             >
-              <Plus className="h-3 w-3 mr-1" />
+              <Plus className="h-4 w-4 mr-1" />
               Add Empty Slot
             </button>
             <button
@@ -145,25 +187,28 @@ export function NPCPartyBuilder({ config, onChange }: NPCPartyBuilderProps) {
                 const newIndex = (config.party as SimplePartyProvider)?.pokemon?.length || 0;
                 openPokemonFormSelector(newIndex);
               }}
-              className="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded text-white bg-indigo-600 hover:bg-indigo-700"
+              className="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 transition-colors"
             >
-              <Search className="h-3 w-3 mr-1" />
+              <Search className="h-4 w-4 mr-1" />
               Add Pokémon
             </button>
           </div>
         </div>
 
         {/* Team Generation Tools */}
-        <div className="bg-gray-50 p-3 rounded-lg space-y-3">
+        <div className="bg-gradient-to-r from-gray-50 to-gray-100 p-4 rounded-xl border">
-          <h5 className="text-sm font-medium text-gray-700">Team Generation</h5>
+          <h5 className="text-sm font-semibold text-gray-800 mb-3 flex items-center">
+            <Shuffle className="h-4 w-4 mr-2 text-indigo-600" />
+            Team Generation
+          </h5>
           <div className="flex flex-wrap gap-2">
             <button
               type="button"
               onClick={() => generateRandomTeam(6)}
               disabled={isGenerating}
-              className="inline-flex items-center px-3 py-1 text-xs font-medium rounded-md text-white bg-green-600 hover:bg-green-700 disabled:opacity-50"
+              className="inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg text-white bg-green-600 hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
             >
-              <Shuffle className="h-3 w-3 mr-1" />
+              <Shuffle className="h-4 w-4 mr-1" />
               {isGenerating ? 'Generating...' : 'Random Team'}
             </button>
             
@@ -175,76 +220,79 @@ export function NPCPartyBuilder({ config, onChange }: NPCPartyBuilderProps) {
                 }
               }}
               disabled={isGenerating}
-              className="text-xs border border-gray-300 rounded px-2 py-1 disabled:opacity-50"
+              className="text-sm border border-gray-300 rounded-lg px-3 py-2 disabled:opacity-50 bg-white hover:bg-gray-50 transition-colors"
             >
               <option value="">Generate by Type</option>
-              <option value="fire">Fire Team</option>
+              <option value="fire">🔥 Fire Team</option>
-              <option value="water">Water Team</option>
+              <option value="water">💧 Water Team</option>
-              <option value="grass">Grass Team</option>
+              <option value="grass">🌱 Grass Team</option>
-              <option value="electric">Electric Team</option>
+              <option value="electric">⚡ Electric Team</option>
-              <option value="psychic">Psychic Team</option>
+              <option value="psychic">🔮 Psychic Team</option>
-              <option value="fighting">Fighting Team</option>
+              <option value="fighting">👊 Fighting Team</option>
-              <option value="poison">Poison Team</option>
+              <option value="poison">☠️ Poison Team</option>
-              <option value="ground">Ground Team</option>
+              <option value="ground">🌍 Ground Team</option>
-              <option value="rock">Rock Team</option>
+              <option value="rock">🗿 Rock Team</option>
-              <option value="bug">Bug Team</option>
+              <option value="bug">🐛 Bug Team</option>
-              <option value="ghost">Ghost Team</option>
+              <option value="ghost">👻 Ghost Team</option>
-              <option value="steel">Steel Team</option>
+              <option value="steel">⚔️ Steel Team</option>
-              <option value="dragon">Dragon Team</option>
+              <option value="dragon">🐉 Dragon Team</option>
-              <option value="dark">Dark Team</option>
+              <option value="dark">🌑 Dark Team</option>
-              <option value="fairy">Fairy Team</option>
+              <option value="fairy">🧚 Fairy Team</option>
             </select>
 
             <button
               type="button"
               onClick={() => generateRandomTeam(3)}
               disabled={isGenerating}
-              className="inline-flex items-center px-2 py-1 text-xs font-medium rounded text-purple-700 bg-purple-100 hover:bg-purple-200 disabled:opacity-50"
+              className="inline-flex items-center px-3 py-2 text-sm font-medium rounded-lg text-purple-700 bg-purple-100 hover:bg-purple-200 disabled:opacity-50 transition-colors"
             >
-              <Zap className="h-3 w-3 mr-1" />
+              <Zap className="h-4 w-4 mr-1" />
               Quick 3
             </button>
           </div>
         </div>
 
-        {party.pokemon.map((pokemon, index) => (
+        {/* Pokemon List/Grid */}
-          <div key={index} className="flex items-center space-x-2">
+        {party.pokemon.length === 0 ? (
-            <input
+          <div className="text-center py-12 bg-gray-50 rounded-xl border-2 border-dashed border-gray-300">
-              type="text"
+            <div className="mx-auto w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center mb-4">
-              value={pokemon}
+              <Search className="h-6 w-6 text-gray-400" />
-              onChange={(e) => updatePokemon(index, e.target.value)}
+            </div>
-              className="flex-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
+            <p className="text-gray-500 font-medium">No Pokémon in the team</p>
-              placeholder="pikachu level=50 moves=thunderbolt,quick-attack"
+            <p className="text-gray-400 text-sm mt-1">Start by adding a Pokémon</p>
-            />
-            <button
-              type="button"
-              onClick={() => openPokemonFormSelector(index)}
-              className="p-1 text-indigo-600 hover:text-indigo-800"
-              title="Add Pokémon"
-            >
-              <Search className="h-4 w-4" />
-            </button>
-            <button
-              type="button"
-              onClick={() => removePokemon(index)}
-              className="p-1 text-red-600 hover:text-red-800"
-            >
-              <Trash2 className="h-4 w-4" />
-            </button>
           </div>
-        ))}
+        ) : (
+          <div className={viewMode === 'grid'
+            ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
+            : "space-y-3"}>
+            {party.pokemon.map((pokemon, index) => (
+              <PokemonCard
+                key={index}
+                pokemonString={pokemon}
+                index={index}
+                onUpdate={updatePokemon}
+                onRemove={removePokemon}
+                onOpenSelector={openPokemonFormSelector}
+                isCompact={viewMode === 'list'}
+              />
+            ))}
+          </div>
+        )}
 
-        <div className="mt-4">
+        {/* Static configuration */}
+        <div className="pt-4 border-t border-gray-200">
           <label className="inline-flex items-center">
             <input
               type="checkbox"
               checked={party.isStatic || false}
               onChange={(e) => handlePartyChange({ ...party, isStatic: e.target.checked })}
-              className="form-checkbox"
+              className="form-checkbox h-4 w-4 text-indigo-600 rounded focus:ring-indigo-500 border-gray-300"
             />
-            <span className="ml-2 text-sm">Static Party</span>
+            <span className="ml-3 text-sm font-medium text-gray-700">Static Party</span>
           </label>
-          <p className="text-xs text-gray-500 mt-1">If true, party won't change between battles</p>
+          <p className="text-xs text-gray-500 mt-2 ml-7">
+            If true, party won't change between battles
+          </p>
         </div>
       </div>
     );
@@ -468,7 +516,12 @@ export function NPCPartyBuilder({ config, onChange }: NPCPartyBuilderProps) {
       <PokemonFormSelector
         isOpen={showPokemonFormSelector}
         onSelect={handlePokemonFormSelect}
-        onClose={() => setShowPokemonFormSelector(false)}
+        onClose={() => {
+          setShowPokemonFormSelector(false);
+          setSelectedPokemonIndex(-1);
+          setCurrentPokemonString('');
+        }}
+        initialPokemonString={currentPokemonString}
       />
     </>
   );

src/components/PokemonCard.tsx

@@ -0,0 +1,173 @@
+import { useState, useEffect } from 'react';
+import { Search, Trash2, ImageOff } from 'lucide-react';
+import { pokemonApi } from '../services/pokemonApi';
+
+interface PokemonCardProps {
+  pokemonString: string;
+  index: number;
+  onUpdate: (index: number, value: string) => void;
+  onRemove: (index: number) => void;
+  onOpenSelector: (index: number) => void;
+  isCompact?: boolean;
+}
+
+export function PokemonCard({ 
+  pokemonString, 
+  index, 
+  onUpdate, 
+  onRemove, 
+  onOpenSelector,
+  isCompact = false 
+}: PokemonCardProps) {
+  const [pokemonInfo, setPokemonInfo] = useState<{
+    name: string;
+    imageUrl: string | null;
+    displayName: string;
+  } | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [imageError, setImageError] = useState(false);
+
+  useEffect(() => {
+    const loadPokemonInfo = async () => {
+      if (!pokemonString.trim()) {
+        setPokemonInfo(null);
+        return;
+      }
+
+      setLoading(true);
+      setImageError(false);
+      try {
+        const info = await pokemonApi.getPokemonInfo(pokemonString);
+        setPokemonInfo(info);
+      } catch (error) {
+        console.error('Failed to load Pokemon info:', error);
+        setPokemonInfo(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadPokemonInfo();
+  }, [pokemonString]);
+
+  const handleImageError = () => {
+    setImageError(true);
+  };
+
+  if (isCompact) {
+    return (
+      <div className="flex items-center space-x-3 p-3 bg-white border rounded-lg shadow-sm hover:shadow-md transition-shadow">
+        {/* Image du Pokémon */}
+        <div className="flex-shrink-0 w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center overflow-hidden">
+          {loading ? (
+            <div className="animate-spin rounded-full h-6 w-6 border-2 border-indigo-500 border-t-transparent"></div>
+          ) : pokemonInfo?.imageUrl && !imageError ? (
+            <img 
+              src={pokemonInfo.imageUrl} 
+              alt={pokemonInfo.displayName}
+              className="w-full h-full object-contain"
+              onError={handleImageError}
+            />
+          ) : (
+            <ImageOff className="h-8 w-8 text-gray-400" />
+          )}
+        </div>
+
+        {/* Informations et contrôles */}
+        <div className="flex-1 min-w-0">
+          <input
+            type="text"
+            value={pokemonString}
+            onChange={(e) => onUpdate(index, e.target.value)}
+            className="w-full text-sm border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+            placeholder="pikachu level=50 moves=thunderbolt,quick-attack"
+          />
+          {pokemonInfo && (
+            <p className="text-xs text-gray-500 mt-1 truncate">{pokemonInfo.displayName}</p>
+          )}
+        </div>
+
+        {/* Boutons d'action */}
+        <div className="flex items-center space-x-1">
+          <button
+            type="button"
+            onClick={() => onOpenSelector(index)}
+            className="p-1 text-indigo-600 hover:text-indigo-800 hover:bg-indigo-50 rounded"
+            title="Select Pokémon"
+          >
+            <Search className="h-4 w-4" />
+          </button>
+          <button
+            type="button"
+            onClick={() => onRemove(index)}
+            className="p-1 text-red-600 hover:text-red-800 hover:bg-red-50 rounded"
+            title="Remove"
+          >
+            <Trash2 className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white border-2 border-gray-200 rounded-xl p-4 hover:border-indigo-300 transition-colors shadow-sm hover:shadow-md">
+      <div className="flex flex-col items-center space-y-3">
+        {/* Image du Pokémon */}
+        <div className="w-24 h-24 bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl flex items-center justify-center overflow-hidden border">
+          {loading ? (
+            <div className="animate-spin rounded-full h-8 w-8 border-3 border-indigo-500 border-t-transparent"></div>
+          ) : pokemonInfo?.imageUrl && !imageError ? (
+            <img 
+              src={pokemonInfo.imageUrl} 
+              alt={pokemonInfo.displayName}
+              className="w-full h-full object-contain transition-transform hover:scale-105"
+              onError={handleImageError}
+            />
+          ) : (
+            <ImageOff className="h-12 w-12 text-gray-400" />
+          )}
+        </div>
+
+        {/* Nom du Pokémon */}
+        {pokemonInfo && (
+          <div className="text-center">
+            <h4 className="font-semibold text-gray-800">{pokemonInfo.displayName}</h4>
+            <p className="text-xs text-gray-500">#{index + 1}</p>
+          </div>
+        )}
+
+        {/* Champ de saisie */}
+        <div className="w-full">
+          <textarea
+            value={pokemonString}
+            onChange={(e) => onUpdate(index, e.target.value)}
+            className="w-full text-sm border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 resize-none"
+            placeholder="pikachu level=50 moves=thunderbolt,quick-attack"
+            rows={3}
+          />
+        </div>
+
+        {/* Boutons d'action */}
+        <div className="flex items-center space-x-2 w-full">
+          <button
+            type="button"
+            onClick={() => onOpenSelector(index)}
+            className="flex-1 inline-flex items-center justify-center px-3 py-2 text-sm font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 transition-colors"
+          >
+            <Search className="h-4 w-4 mr-1" />
+            Select
+          </button>
+          <button
+            type="button"
+            onClick={() => onRemove(index)}
+            className="px-3 py-2 text-sm font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 transition-colors"
+            title="Remove"
+          >
+            <Trash2 className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/PokemonFormSelector.tsx

@@ -12,9 +12,10 @@ interface PokemonFormSelectorProps {
   onSelect: (pokemonString: string) => void;
   onClose: () => void;
   isOpen: boolean;
+  initialPokemonString?: string; // Nouvelle prop pour le Pokémon à modifier
 }
 
-export function PokemonFormSelector({ onSelect, onClose, isOpen }: PokemonFormSelectorProps) {
+export function PokemonFormSelector({ onSelect, onClose, isOpen, initialPokemonString }: PokemonFormSelectorProps) {
   const [allPokemon, setAllPokemon] = useState<PokemonListItem[]>([]);
   const [selectedPokemon, setSelectedPokemon] = useState<Pokemon | null>(null);
   const [isLoadingMoves, setIsLoadingMoves] = useState(false);
@@ -81,6 +82,26 @@ export function PokemonFormSelector({ onSelect, onClose, isOpen }: PokemonFormSe
     loadPokemonDetails();
   }, [formData.pokemon]);
 
+  // Si une chaîne Pokémon initiale est fournie, la définir dans l'état du formulaire
+  useEffect(() => {
+    if (initialPokemonString && isOpen) {
+      const parsePokemonString = (pokemonString: string) => {
+        const regex = /(\w+)(?:\s+level=(\d+))?(?:\s+moves=([\w,-]+))?/;
+        const match = pokemonString.match(regex);
+
+        if (match) {
+          const pokemon = match[1];
+          const level = match[2] ? parseInt(match[2]) : 50;
+          const moves = match[3] ? match[3].split(',').map(move => move.trim()) : ['', '', '', ''];
+
+          setFormData({ pokemon, level, moves });
+        }
+      };
+
+      parsePokemonString(initialPokemonString);
+    }
+  }, [initialPokemonString, isOpen]);
+
   const handlePokemonChange = (pokemonName: string) => {
     setFormData(prev => ({
       ...prev,

src/services/pokemonApi.ts

@@ -75,7 +75,7 @@ export interface CobblemonPokemon {
 }
 
 class PokemonApiService {
-  private cache = new Map<string, any>();
+  private cache = new Map<string, { data: unknown; timestamp: number }>();
   private readonly CACHE_EXPIRY = 10 * 60 * 1000; // 10 minutes
 
   private async fetchWithCache<T>(url: string): Promise<T> {
@@ -83,7 +83,7 @@ class PokemonApiService {
     const cached = this.cache.get(cacheKey);
     
     if (cached && Date.now() - cached.timestamp < this.CACHE_EXPIRY) {
-      return cached.data;
+      return cached.data as T;
     }
 
     try {
@@ -107,11 +107,9 @@ class PokemonApiService {
 
   async searchPokemon(query: string, limit: number = 20): Promise<PokemonListItem[]> {
     const allPokemon = await this.getAllPokemon();
-    const filtered = allPokemon.results
+    return allPokemon.results
       .filter(pokemon => pokemon.name.toLowerCase().includes(query.toLowerCase()))
       .slice(0, limit);
-    
-    return filtered;
   }
 
   async getPokemon(nameOrId: string | number): Promise<Pokemon> {
@@ -169,7 +167,7 @@ class PokemonApiService {
     const stdDev = (max - min) / 6;
     
     // Simple normal distribution approximation
-    let level = Math.round(avg + stdDev * (Math.random() + Math.random() + Math.random() - 1.5));
+    const level = Math.round(avg + stdDev * (Math.random() + Math.random() + Math.random() - 1.5));
     return Math.max(min, Math.min(max, level));
   }
 
@@ -244,6 +242,54 @@ class PokemonApiService {
       return this.generateRandomTeam(teamSize);
     }
   }
+
+  // Nouvelle fonction pour extraire le nom du Pokémon depuis une chaîne Cobblemon
+  extractPokemonName(cobblemonString: string): string {
+    if (!cobblemonString || cobblemonString.trim() === '') return '';
+
+    // La chaîne est au format: "pikachu level=50 moves=thunderbolt,quick-attack"
+    // On prend le premier mot avant l'espace
+    const parts = cobblemonString.trim().split(/\s+/);
+    return parts[0].toLowerCase();
+  }
+
+  // Nouvelle fonction pour récupérer l'image d'un Pokémon
+  async getPokemonImageUrl(pokemonName: string): Promise<string | null> {
+    if (!pokemonName || pokemonName.trim() === '') return null;
+
+    try {
+      const pokemon = await this.getPokemon(pokemonName.toLowerCase());
+
+      // Priorité aux images officielles, sinon sprite par défaut
+      return pokemon.sprites.other?.['official-artwork']?.front_default ||
+             pokemon.sprites.front_default ||
+             null;
+    } catch (error) {
+      console.warn(`Failed to fetch image for pokemon: ${pokemonName}`, error);
+      return null;
+    }
+  }
+
+  // Fonction pour récupérer les informations basiques d'un Pokémon depuis une chaîne Cobblemon
+  async getPokemonInfo(cobblemonString: string): Promise<{ name: string; imageUrl: string | null; displayName: string } | null> {
+    const pokemonName = this.extractPokemonName(cobblemonString);
+    if (!pokemonName) return null;
+
+    try {
+      const imageUrl = await this.getPokemonImageUrl(pokemonName);
+      return {
+        name: pokemonName,
+        imageUrl,
+        displayName: this.formatPokemonName(pokemonName)
+      };
+    } catch (error) {
+      return {
+        name: pokemonName,
+        imageUrl: null,
+        displayName: this.formatPokemonName(pokemonName)
+      };
+    }
+  }
 }
 
 export const pokemonApi = new PokemonApiService();