From 746f92557cceecd2ea8623ec3f66bfb3be3805c7 Mon Sep 17 00:00:00 2001
From: vesta <den.lemaire@gmail.com>
Date: Sun, 7 Sep 2025 21:33:57 +0200
Subject: [PATCH] class structure and npc

---
 html/main.html    |  176 ++++--
 js/script.js      | 1337 ++++++++++++++++++++++++++++++---------------
 js/scriptalpha.js |  936 ++++++++++++++++++++-----------
 3 files changed, 1637 insertions(+), 812 deletions(-)
diff --git a/html/main.html b/html/main.html
index 1a104b6..59463a4 100644
--- a/html/main.html
+++ b/html/main.html
@@ -9,7 +9,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
     <style>
         body { font-family: 'Inter', sans-serif; overflow: hidden; }
-        canvas { display: block; background-color: #1a202c; cursor: pointer; }
+        canvas { display: block; background-color: #000000; cursor: pointer; }
         ::-webkit-scrollbar { width: 8px; }
         ::-webkit-scrollbar-track { background: #2d3748; }
         ::-webkit-scrollbar-thumb { background: #4a5568; border-radius: 4px; }
@@ -21,20 +21,50 @@
             -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
         }
         .control-btn:active { background-color: rgba(255, 255, 255, 0.5); }
-        .equip-btn, .menu-btn {
-            background-color: #3182ce; color: white; padding: 2px 6px; border-radius: 4px;
-            font-size: 0.75rem; cursor: pointer; margin-left: 8px; border: none;
+        .quest-choice-btn {
+            background-color: #3182ce; color: white; padding: 8px; border-radius: 4px;
+            font-size: 0.9rem; cursor: pointer; border: none; text-align: left;
+        }
+        .quest-choice-btn:hover { background-color: #2b6cb0; }
+        #dialogue-box {
+            bottom: 10%;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 80%;
+            max-width: 600px;
         }
-        .equip-btn:hover, .menu-btn:hover { background-color: #2b6cb0; }
-        .menu-btn { padding: 8px 12px; font-size: 1rem; width: 100%; text-align: left; }
-        .menu-btn:disabled { background-color: #4a5568; cursor: not-allowed; }
         @media (min-width: 1024px) { #mobile-controls, #info-toggle-btn { display: none; } }
     </style>
 </head>
 <body class="bg-gray-900 text-white flex h-screen">
     <svg width="0" height="0" style="position:absolute; display: none;">
         <defs>
-            <!-- Asset Forêt -->            <!-- Asset Forêt Dense -->
+            <g id="player-svg" viewBox="0 0 100 100">
+                <rect x="40" y="30" width="20" height="15" fill="#FBBF24"/> 
+                <rect x="40" y="45" width="20" height="30" fill="#E53E3E"/>
+                <rect x="40" y="75" width="20" height="15" fill="#4A5568"/>
+                <circle cx="50" cy="20" r="10" fill="#FBBF24"/>
+            </g>
+            <g id="npc-svg" viewBox="0 0 100 100">
+                <rect x="40" y="45" width="20" height="30" fill="#3182ce"/>
+                <rect x="40" y="75" width="20" height="15" fill="#4A5568"/>
+                <circle cx="50" cy="30" r="10" fill="#F2D5B5"/>
+            </g>
+            <g id="village-svg" viewBox="0 0 100 100">
+                <rect x="20" y="50" width="60" height="45" fill="#A0522D" stroke="#1A202C" stroke-width="2"/>
+                <polygon points="15,50 85,50 50,20" fill="#D4A373" stroke="#1A202C" stroke-width="2"/>
+                <rect x="45" y="65" width="10" height="10" fill="#2D3748"/>
+            </g>
+            <g id="city-svg" viewBox="0 0 100 100">
+                <path d="M 10 95 L 15 70 L 85 70 L 90 95 Z" fill="#696969" stroke="#1A202C" stroke-width="2" />
+                <path d="M 15 70 L 15 65 L 25 65 L 25 70 L 35 70 L 35 65 L 45 65 L 45 70 L 55 70 L 55 65 L 65 65 L 65 70 L 75 70 L 75 65 L 85 65 L 85 70 Z" fill="#696969" stroke="#1A202C" stroke-width="1.5"/>
+                <rect x="20" y="30" width="20" height="40" fill="#A9A9A9" stroke="#1A202C" stroke-width="2"/>
+                <rect x="18" y="25" width="24" height="5" fill="#A9A9A9" stroke="#1A202C" stroke-width="2"/>
+                <rect x="60" y="30" width="20" height="40" fill="#A9A9A9" stroke="#1A202C" stroke-width="2"/>
+                <rect x="58" y="25" width="24" height="5" fill="#A9A9A9" stroke="#1A202C" stroke-width="2"/>
+                <rect x="40" y="15" width="20" height="55" fill="#A9A9A9" stroke="#1A202C" stroke-width="2"/>
+                <path d="M 38 15 L 38 10 L 43 10 L 43 15 L 48 15 L 48 10 L 53 10 L 53 15 L 58 15 L 58 10 L 63 10 L 63 15 Z" fill="#A9A9A9" stroke="#1A202C" stroke-width="1.5"/>
+            </g>
             <g id="forest-svg" viewBox="0 0 100 100">
                 <defs>
                     <linearGradient id="treeTrunkDark" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#5F432A;"/><stop offset="100%" style="stop-color:#4A2E1A;"/></linearGradient>
@@ -61,8 +91,6 @@
                 <path d="M 50 10 C 20 50, 80 50, 50 10 Z" fill="url(#enchantedLeaves)" transform="rotate(-15 50 50)"/>
                 <path d="M 50 15 L 85 65 L 15 65 Z" fill="url(#enchantedLeaves)"/>
             </g>
-            
-            <!-- Asset Marais -->
             <g id="swamp-svg" viewBox="0 0 100 100">
                 <defs>
                     <linearGradient id="swampWater" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#4A5568;"/><stop offset="100%" style="stop-color:#2D3748;"/></linearGradient>
@@ -120,68 +148,83 @@
                 <!-- Queue -->
                 <path d="M 20 65 Q 15 70, 18 75" stroke="#3D2A1F" stroke-width="3" fill="none" stroke-linecap="round"/>
             </g>
-            
-            <!-- Asset Ville -->
-            <g id="city-svg" viewBox="0 0 100 100">
-                <defs>
-                    <linearGradient id="stoneGradient" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#A9A9A9;"/><stop offset="100%" style="stop-color:#696969;"/></linearGradient>
-                    <linearGradient id="stoneShadowGradient" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#808080;"/><stop offset="100%" style="stop-color:#4A5568;"/></linearGradient>
-                </defs>
-                <path d="M 10 95 L 15 70 L 85 70 L 90 95 Z" fill="url(#stoneShadowGradient)" stroke="#1A202C" stroke-width="2"/>
-                <path d="M 15 70 L 15 65 L 25 65 L 25 70 L 35 70 L 35 65 L 45 65 L 45 70 L 55 70 L 55 65 L 65 65 L 65 70 L 75 70 L 75 65 L 85 65 L 85 70 Z" fill="url(#stoneShadowGradient)" stroke="#1A202C" stroke-width="1.5"/>
-                <rect x="20" y="30" width="20" height="40" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/><rect x="18" y="25" width="24" height="5" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/>
-                <rect x="60" y="30" width="20" height="40" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/><rect x="58" y="25" width="24" height="5" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/>
-                <rect x="40" y="15" width="20" height="55" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/>
-                <path d="M 38 15 L 38 10 L 43 10 L 43 15 L 48 15 L 48 10 L 53 10 L 53 15 L 58 15 L 58 10 L 63 10 L 63 15 Z" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="1.5"/>
+            <g id="bird-svg" viewBox="0 0 100 100" fill="#3A3A3A">
+                <path d="M50 2C27.9 2 10 20.3 10 42.9c0 6.4 1.5 12.4 4.1 17.8L2 85l23-12.1c5.2 2.1 11 3.2 17.1 3.2 22.1 0 40-18.3 40-40.9S72.1 2 50 2zm18.4 46.5c-1.3 2.5-4.4 4.2-7.8 4.2-3.5 0-6.6-1.7-7.8-4.2-0.6-1.1-1.8-1.4-2.8-0.8-1.1 0.6-1.4 1.8-0.8 2.8 2.2 4.1 6.7 6.8 11.5 6.8s9.3-2.7 11.5-6.8c0.6-1.1 0.3-2.4-0.8-2.8-1.1-0.6-2.3-0.2-2.8 0.8zM31.6 48.5c-1.3 2.5-4.4 4.2-7.8 4.2-3.5 0-6.6-1.7-7.8-4.2-0.6-1.1-1.8-1.4-2.8-0.8-1.1 0.6-1.4 1.8-0.8 2.8 2.2 4.1 6.7 6.8 11.5 6.8s9.3-2.7 11.5-6.8c0.6-1.1 0.3-2.4-0.8-2.8-1-0.6-2.3-0.2-2.8 0.8z"/>
+                <path d="M 85.5,35.1 C 81.2,29.3 75.3,24.8 68.4,22.1 L 68.4,22.1 C 66.1,21.1 63.6,20.5 61,20.5 C 58.4,20.5 55.9,21.1 53.6,22.1 L 53.6,22.1 C 46.7,24.8 40.8,29.3 36.5,35.1 C 35.6,36.2 35.8,37.8 36.9,38.7 C 37.3,39.1 37.9,39.3 38.4,39.3 C 39.1,39.3 39.9,38.9 40.4,38.2 C 44.1,33.2 49.3,29.3 55.3,27 L 55.3,27 C 57.1,26.5 59,26.2 61,26.2 C 63,26.2 64.9,26.5 66.7,27 L 66.7,27 C 72.7,29.3 77.9,33.2 81.6,38.2 C 82.1,38.9 82.9,39.3 83.6,39.3 C 84.1,39.3 84.7,39.1 85.1,38.7 C 86.2,37.8 86.4,36.2 85.5,35.1 Z"/>
             </g>
-            
-            <!-- Asset Village -->
-            <g id="village-svg" viewBox="0 0 100 100">
-                <defs>
-                    <linearGradient id="woodGradient" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#A0522D;"/><stop offset="100%" style="stop-color:#8B4513;"/></linearGradient>
-                    <linearGradient id="thatchGradient" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#D4A373;"/><stop offset="100%" style="stop-color:#A0522D;"/></linearGradient>
-                </defs>
-                <rect x="20" y="50" width="60" height="45" fill="url(#woodGradient)" stroke="#1A202C" stroke-width="2"/>
-                <polygon points="15,50 85,50 50,20" fill="url(#thatchGradient)" stroke="#1A202C" stroke-width="2"/>
-                <rect x="65" y="60" width="25" height="35" fill="#8B4513" stroke="#1A202C" stroke-width="1.5"/><polygon points="62,60 93,60 77.5,40" fill="#A0522D" stroke="#1A202C" stroke-width="1.5"/>
-                <rect x="45" y="65" width="10" height="10" fill="#2D3748"/>
+            <g id="farm-svg" viewBox="0 0 100 100">
+                <rect x="25" y="40" width="50" height="40" fill="#A0522D" stroke="#1A202C" stroke-width="2"/>
+                <polygon points="20,40 80,40 50,20" fill="#D4A373" stroke="#1A202C" stroke-width="2"/>
+                <rect x="40" y="55" width="20" height="25" fill="#8B4513" stroke="#1A202C" stroke-width="1.5"/>
+                <rect x="10" y="70" width="5" height="15" fill="#6B4F2E"/>
+                <rect x="20" y="70" width="5" height="15" fill="#6B4F2E"/>
+                <rect x="75" y="70" width="5" height="15" fill="#6B4F2E"/>
+                <rect x="85" y="70" width="5" height="15" fill="#6B4F2E"/>
+                <line x1="10" y1="75" x2="25" y2="75" stroke="#6B4F2E" stroke-width="3"/>
+                <line x1="75" y1="75" x2="90" y2="75" stroke="#6B4F2E" stroke-width="3"/>
             </g>
-            
-            
-            <!-- Asset Joueur (Loup) -->
-            <g id="player-svg" viewBox="0 0 100 100">
-                <defs>
-                    <linearGradient id="wolfFurGradient" x1="0%" y1="0%" x2="0%" y2="100%">
-                        <stop offset="0%" style="stop-color:#A0AEC0;" />
-                        <stop offset="100%" style="stop-color:#718096;" />
-                    </linearGradient>
-                    <linearGradient id="wolfShadowGradient" x1="0%" y1="0%" x2="0%" y2="100%">
-                        <stop offset="0%" style="stop-color:#4A5568;" />
-                        <stop offset="100%" style="stop-color:#2D3748;" />
-                    </linearGradient>
-                </defs>
-                <path d="M 50 20 L 90 50 L 80 95 L 20 95 L 10 50 Z" fill="url(#wolfFurGradient)" />
-                <path d="M 50 20 L 70 55 L 50 65 L 30 55 Z" fill="url(#wolfShadowGradient)" />
-                <path d="M 25 52 L 10 30 L 35 40 Z" fill="#A0AEC0" stroke="#2D3748" stroke-width="1.5"/>
-                <path d="M 75 52 L 90 30 L 65 40 Z" fill="#A0AEC0" stroke="#2D3748" stroke-width="1.5"/>
-                <path d="M 35 55 Q 40 52 45 55 Q 40 58 35 55 Z" fill="#FBBF24" />
-                <path d="M 65 55 Q 60 52 55 55 Q 60 58 65 55 Z" fill="#FBBF24" />
-                <circle cx="39" cy="55" r="1.5" fill="black" />
-                <circle cx="61" cy="55" r="1.5" fill="black" />
+            <g id="camp-svg" viewBox="0 0 100 100">
+                <polygon points="20,80 50,30 80,80" fill="#D4A373" stroke="#1A202C" stroke-width="2"/>
+                <polygon points="25,80 50,35 75,80" fill="#BFB08A" />
+                <circle cx="65" cy="75" r="10" fill="#696969"/>
+                <path d="M 62 72 L 65 68 L 68 72 Z" fill="#FF4500" />
+                <path d="M 60 78 L 63 74 L 66 78 Z" fill="#FFA500" />
+                <path d="M 68 78 L 71 74 L 74 78 Z" fill="#FFD700" />
+            </g>
+            <g id="house-svg" viewBox="0 0 100 100">
+                <path d="M 15 80 L 15 50 L 50 20 L 85 50 L 85 80 Z" fill="#D2B48C"/>
+                <path d="M 20 75 L 20 55 L 50 30 L 80 55 L 80 75 Z" fill="#8B4513"/>
+                <rect x="25" y="60" width="15" height="15" fill="#F0E68C"/>
+                <rect x="60" y="60" width="15" height="15" fill="#F0E68C"/>
+                <line x1="15" y1="50" x2="85" y2="50" stroke="#5C3317" stroke-width="3"/>
+                <line x1="50" y1="20" x2="50" y2="80" stroke="#5C3317" stroke-width="3"/>
+            </g>
+            <g id="cult-svg" viewBox="0 0 100 100">
+                <path d="M 20 80 L 20 40 L 50 10 L 80 40 L 80 80 Z" fill="#C0C0C0"/>
+                <path d="M 25 75 L 25 45 L 50 20 L 75 45 L 75 75 Z" fill="#A9A9A9"/>
+                <rect x="45" y="5" width="10" height="20" fill="#C0C0C0"/>
+                <rect x="40" y="10" width="20" height="5" fill="#C0C0C0"/>
+                <rect x="42" y="50" width="16" height="25" fill="#654321"/>
+            </g>
+            <g id="market-svg" viewBox="0 0 100 100">
+                <rect x="15" y="70" width="70" height="10" fill="#8B4513"/>
+                <rect x="20" y="40" width="10" height="30" fill="#A0522D"/>
+                <rect x="70" y="40" width="10" height="30" fill="#A0522D"/>
+                <polygon points="10,40 90,40 80,25 20,25" fill="#CD5C5C"/>
+                <path d="M10 40 C 30 45, 70 45, 90 40" fill="none" stroke="#A52A2A" stroke-width="2"/>
+                <rect x="25" y="60" width="15" height="10" fill="#DEB887"/>
+                <rect x="60" y="60" width="15" height="10" fill="#DEB887"/>
+            </g>
+            <g id="mine-svg" viewBox="0 0 100 100">
+                <path d="M 20 80 A 30 30 0 0 1 80 80 Z" fill="#000000"/>
+                <path d="M 25 80 A 25 25 0 0 1 75 80 Z" fill="#2F4F4F"/>
+                <path d="M 15 85 L 15 40 L 25 40 L 25 85 Z" fill="#8B4513"/>
+                <path d="M 85 85 L 85 40 L 75 40 L 75 85 Z" fill="#8B4513"/>
+                <path d="M 15 40 L 85 40 L 80 30 L 20 30 Z" fill="#A0522D"/>
             </g>
-            
         </defs>
     </svg>
+    
     <!-- Panneau d'information Desktop -->
     <div id="desktop-panel" class="w-1/4 max-w-sm p-6 bg-gray-800 shadow-lg overflow-y-auto flex-col hidden md:flex">
         <h1 class="text-2xl font-bold mb-4 text-cyan-400">defiance v0.12.1</h1>
-        <p class="text-sm text-gray-400 mb-6">ZQSD/Flèches: Bouger | E: Interagir | C: Camper</p>
+        <p class="text-sm text-gray-400 mb-6">ZQSD/Flèches: Bouger | E: Interagir</p>
         
         <div class="space-y-4">
+            <div class="space-y-2">
+                <h2 class="text-xl font-semibold border-b-2 border-gray-700 pb-2">Paramètres IA</h2>
+                <div class="bg-gray-700 p-4 rounded-lg text-sm space-y-2">
+                    <label for="apiKeyInputDesktop" class="font-semibold">Clé API Gemini</label>
+                    <input type="password" id="apiKeyInputDesktop" placeholder="Entrez votre clé API" class="w-full bg-gray-800 rounded p-2 text-white placeholder-gray-500">
+                    <p class="text-xs text-gray-400">Obtenez une clé sur Google AI Studio pour générer des quêtes infinies.</p>
+                </div>
+            </div>
             <h2 class="text-xl font-semibold border-b-2 border-gray-700 pb-2">Feuille de Personnage</h2>
             <div id="player-info-desktop" class="bg-gray-700 p-4 rounded-lg text-sm space-y-3"></div>
             <h2 class="text-xl font-semibold border-b-2 border-gray-700 pb-2 mt-4">Infos de la Tuile</h2>
             <div id="tile-info-desktop" class="bg-gray-700 p-4 rounded-lg text-sm"></div>
+            <h2 class="text-xl font-semibold border-b-2 border-gray-700 pb-2 mt-4">Journal de Quêtes</h2>
+            <div id="quest-log-desktop" class="bg-gray-700 p-4 rounded-lg text-sm space-y-2"></div>
         </div>
         <div class="mt-auto pt-6 text-center text-xs text-gray-500"><p>Généré par Gemini</p></div>
     </div>
@@ -201,10 +244,19 @@
         <!-- Panneau d'info Mobile (Overlay) -->
         <div id="mobile-info-panel" class="absolute inset-0 bg-black/75 p-4 flex-col items-center justify-center z-30 hidden">
             <div class="w-full max-w-md max-h-full bg-gray-800 rounded-lg shadow-lg overflow-y-auto p-6 space-y-4">
+                <div class="space-y-2">
+                    <h2 class="text-xl font-semibold border-b-2 border-gray-700 pb-2">Paramètres IA</h2>
+                    <div class="bg-gray-700 p-4 rounded-lg text-sm space-y-2">
+                        <label for="apiKeyInputMobile" class="font-semibold">Clé API Gemini</label>
+                        <input type="password" id="apiKeyInputMobile" placeholder="Entrez votre clé API" class="w-full bg-gray-800 rounded p-2 text-white placeholder-gray-500">
+                    </div>
+                </div>
                 <h2 class="text-xl font-semibold border-b-2 border-gray-700 pb-2">Feuille de Personnage</h2>
                 <div id="player-info-mobile" class="bg-gray-700 p-4 rounded-lg text-sm space-y-3"></div>
                 <h2 class="text-xl font-semibold border-b-2 border-gray-700 pb-2 mt-4">Infos de la Tuile</h2>
                 <div id="tile-info-mobile" class="bg-gray-700 p-4 rounded-lg text-sm"></div>
+                <h2 class="text-xl font-semibold border-b-2 border-gray-700 pb-2 mt-4">Journal de Quêtes</h2>
+                <div id="quest-log-mobile" class="bg-gray-700 p-4 rounded-lg text-sm space-y-2"></div>
             </div>
         </div>
         
@@ -219,6 +271,14 @@
             </div>
         </div>
         
+        <!-- Boîte de dialogue -->
+        <div id="dialogue-box" class="absolute bg-black/70 p-4 rounded-lg border border-gray-600 shadow-lg z-30 hidden">
+            <h3 id="dialogue-name" class="text-lg font-bold text-cyan-400 mb-2"></h3>
+            <p id="dialogue-text" class="text-gray-200 mb-4"></p>
+            <div id="dialogue-choices" class="space-y-2"></div>
+            <button id="dialogue-close" class="mt-4 bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-md text-sm w-full">Fermer</button>
+        </div>
+        
         <!-- Écran de Combat -->
         <div id="combat-screen" class="absolute inset-0 bg-black/80 flex-col items-center justify-center z-40 hidden">
             <div class="text-center text-4xl mb-8 text-red-500 font-bold">COMBAT !</div>
diff --git a/js/script.js b/js/script.js
index f9743a6..62e5287 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,22 +1,153 @@
 document.addEventListener('DOMContentLoaded', () => {
-  const Biome = {
-    WATER_DEEP: { acceptStructure:false, movements:['swim'], affinities:[('water',0.8),('dark',0.2)], name: 'Eau Profonde', winterColor: '#3D5A80', fallColor: '#3D5A80', summerColor: '#3D5A80', autumnColor: '#3D5A80',maxElevation:0,minElevation:0 }, 
-    WATER_SHALLOW: {  acceptStructure:false,movements:['swim','ride','navigate','fly'], affinities:[('water',0.8),('life',0.2)],name: 'Eau Peu Profonde', winterColor: '#97aabdff', fallColor: '#5A8AB8', summerColor: '#5A8AB8', autumnColor: '#5A8AB8',maxElevation:1,minElevation:1 },
-    BEACH: {  acceptStructure:true, movements:['walk','ride','fly'],affinities:[('sand',0.8),('water',0.2)],name: 'Sable', winterColor: '#E9D9A1', fallColor: '#E9D9A1', summerColor: '#E9D9A1', autumnColor: '#E9D9A1',maxElevation:2 ,minElevation:2 }, 
-    GRASSLAND: { sprite:{frame:4,animationSpeed:200 }, acceptStructure:true, movements:['walk','ride','fly'],affinities:[('life',0.6),('earth',0.2)],name: 'Plaine', winterColor: '#ecf1e3ff',  fallColor: '#98C159', summerColor: '#a5a450ff', autumnColor: '#455e21ff',maxElevation:3,minElevation:2   },
-    FOREST: {  acceptStructure:true,movements:['walk','ride','fly'],affinities:[('wood',0.6),('earth',0.4)], name: 'Forêt', winterColor: '#92ac83ff',  fallColor: '#21a32cff', summerColor: '#6A994E', autumnColor: '#b88a28ff',maxElevation:3,minElevation:2   }, 
-    ENCHANTED_FOREST: {  acceptStructure:true,movements:['walk','ride','fly'],affinities:[('wood',0.8),('dark',0.2),('life',0.2)], name: 'Forêt Enchantée', winterColor: '#7B6094', fallColor: '#7B6094', summerColor: '#7B6094', autumnColor: '#7B6094',maxElevation:3,minElevation:2   },
-    MOUNTAIN: {  acceptStructure:false, movements:['climb','fly'],affinities:[('rock',0.6),('wind',0.4)],name: 'Montagne', winterColor: '#F7F7F7',  fallColor: '#A9A9A9', summerColor: '#A9A9A9', autumnColor: '#A9A9A9',maxElevation:5,minElevation:3  }, 
-    SNOWLAND: {  acceptStructure:true,movements:['walk','ride','fly'], affinities:[('ice',0.8),('earth',0.2)],name: 'Toundra', winterColor: '#F7F7F7',  fallColor: '#F7F7F7', summerColor: '#F7F7F7', autumnColor: '#F7F7F7',maxElevation:2,minElevation:2   },
-    SNOWMOUNTAIN: {  acceptStructure:false, movements:['climb','fly'],affinities:[('ice',0.4),('rock',0.4),('wind',0.2)],name: 'Mont enneigé', winterColor: '#F7F7F7',  fallColor: '#F7F7F7', summerColor: '#F7F7F7', autumnColor: '#F7F7F7',maxElevation:8,minElevation:4  },
-    DESERT: {  acceptStructure:true,movements:['walk','ride','fly'],affinities:[('sand',0.8),('life',0.1),('fire',0.1)], name: 'Désert', winterColor: '#D4A373',  fallColor: '#D4A373', summerColor: '#D4A373', autumnColor: '#D4A373',maxElevation:2,minElevation:2  },
-    RIVER: {  acceptStructure:false,movements:['navigate','swim','fly'],affinities:[('water',0.6),('earth',0.2),('life',0.2)],name: 'Rivière', winterColor: '#97aabdff',  fallColor: '#5A8AB8', summerColor: '#5A8AB8', autumnColor: '#5A8AB8',maxElevation:2,minElevation:2  },
-    SWAMP: { acceptStructure:false, movements:['fly'],affinities:[('water',0.6),('earth',0.2),('dark',0.2)],name: 'Marais', winterColor: '#15521eff',  fallColor: '#15521eff', summerColor: '#15521eff', autumnColor: '#15521eff',maxElevation:1,minElevation:1 }
+
+  // --- Sprite Drawing Functions ---
+  
+  function drawGrasslandFrame(ctx, frame, width, height) {
+      const PIXEL_SCALE = 2;
+      const colors = ['#6A994E', '#588142', '#A5A450'];
+
+      ctx.fillStyle = colors[1];
+      ctx.beginPath();
+      ctx.moveTo(width / 2, 0); ctx.lineTo(width, height / 2); ctx.lineTo(width / 2, height); ctx.lineTo(0, height / 2);
+      ctx.closePath();
+      ctx.fill();
+
+      for (let i = 0; i < 150; i++) {
+          const x = Math.random() * width;
+          const y = (Math.random() * height / 2) + height / 4;
+          const dx = Math.abs(x - width / 2);
+          const dy = Math.abs(y - height / 2);
+          if (dx / (width / 2) + dy / (height / 2) > 1) continue;
+
+          const wave = Math.sin(x / 5 + frame * Math.PI / 2) * PIXEL_SCALE;
+          ctx.fillStyle = colors[i % 2];
+          ctx.fillRect(x + wave, y - PIXEL_SCALE, PIXEL_SCALE, PIXEL_SCALE);
+      }
+  }
+  
+  function drawWaterFrame(ctx, frame, width, height) {
+      const colors = ['#5A8AB8', '#4A7AA8', '#97aabdff'];
+      ctx.fillStyle = colors[0];
+      ctx.beginPath();
+      ctx.moveTo(width / 2, 0); ctx.lineTo(width, height / 2); ctx.lineTo(width / 2, height); ctx.lineTo(0, height / 2);
+      ctx.closePath();
+      ctx.fill();
+      for (let i = 0; i < 3; i++) {
+          ctx.strokeStyle = colors[1];
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          const startY = (height / 4) * (i + 1);
+          const offset = (frame * 0.2) + i * 2;
+          ctx.moveTo(0, startY + Math.sin(offset) * 2);
+          for (let x = 0; x < width; x++) {
+              const y = startY + Math.sin(x * 0.15 + offset) * 2;
+              if (Math.abs(x - width / 2) / (width / 2) + Math.abs(y - height / 2) / (height / 2) < 1) {
+                   ctx.lineTo(x, y);
+              }
+          }
+          ctx.stroke();
+      }
   }
 
-    let grasslandSheet;
-  let grasslandFrame = 0;
-  let lastGrassFrameTime = 0;
+  function drawDeepWaterFrame(ctx, frame, width, height) {
+    const colors = ['#3D5A80', '#2A4A6D', '#1A202C'];
+    ctx.fillStyle = colors[0];
+    ctx.beginPath();
+    ctx.moveTo(width / 2, 0); ctx.lineTo(width, height / 2); ctx.lineTo(width / 2, height); ctx.lineTo(0, height / 2);
+    ctx.closePath();
+    ctx.fill();
+    for (let i = 0; i < 2; i++) {
+        ctx.strokeStyle = colors[1];
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        const startY = (height / 3) * (i + 1);
+        const offset = (frame * 0.1) + i * 3;
+        ctx.moveTo(0, startY + Math.sin(offset) * 1.5);
+        for (let x = 0; x < width; x++) {
+            const y = startY + Math.sin(x * 0.1 + offset) * 1.5;
+            if (Math.abs(x - width / 2) / (width / 2) + Math.abs(y - height / 2) / (height / 2) < 1) {
+                 ctx.lineTo(x, y);
+            }
+        }
+        ctx.stroke();
+    }
+  }
+
+  function drawMountainFrame(ctx, frame, width, height) {
+    const colors = ['#A9A9A9', '#808080', '#696969'];
+    ctx.fillStyle = colors[0];
+    ctx.beginPath();
+    ctx.moveTo(width / 2, 0); ctx.lineTo(width, height / 2); ctx.lineTo(width / 2, height); ctx.lineTo(0, height / 2);
+    ctx.closePath();
+    ctx.fill();
+    for (let i = 0; i < 70; i++) {
+        const x = Math.random() * width;
+        const y = Math.random() * height;
+        if (Math.abs(x - width / 2) / (width / 2) + Math.abs(y - height / 2) / (height / 2) > 1) continue;
+        const w = 2 + Math.random() * 4;
+        const h = 2 + Math.random() * 4;
+        ctx.fillStyle = colors[1 + Math.floor(Math.random() * 2)];
+        ctx.fillRect(x - w / 2, y - h / 2, w, h);
+    }
+  }
+
+  function drawSwampFrame(ctx, frame, width, height) {
+      const colors = ['#526044', '#36402D', '#6A994E'];
+      ctx.fillStyle = colors[1];
+      ctx.beginPath();
+      ctx.moveTo(width / 2, 0); ctx.lineTo(width, height / 2); ctx.lineTo(width / 2, height); ctx.lineTo(0, height / 2);
+      ctx.closePath();
+      ctx.fill();
+
+      for (let i = 0; i < 3; i++) {
+          ctx.strokeStyle = colors[0];
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          const startY = (height / 4) * (i + 1);
+          const offset = (frame * 0.05) + i * 2.5;
+          ctx.moveTo(0, startY + Math.sin(offset) * 1);
+          for (let x = 0; x < width; x++) {
+              const y = startY + Math.sin(x * 0.1 + offset) * 1;
+              if (Math.abs(x - width / 2) / (width / 2) + Math.abs(y - height / 2) / (height / 2) < 1) {
+                   ctx.lineTo(x, y);
+              }
+          }
+          ctx.stroke();
+      }
+  }
+
+  function drawBeachFrame(ctx, frame, width, height) {
+      const colors = ['#E9D9A1', '#D4C092', '#FFFFFF'];
+      ctx.fillStyle = colors[0];
+      ctx.beginPath();
+      ctx.moveTo(width / 2, 0); ctx.lineTo(width, height / 2); ctx.lineTo(width / 2, height); ctx.lineTo(0, height / 2);
+      ctx.closePath();
+      ctx.fill();
+
+      for (let i = 0; i < 10; i++) {
+        const x = Math.random() * width;
+        const y = Math.random() * height;
+        if (Math.abs(x - width / 2) / (width / 2) + Math.abs(y - height / 2) / (height / 2) > 0.9) continue;
+        ctx.fillStyle = colors[2];
+        ctx.fillRect(x, y, 1, 1);
+      }
+  }
+
+  // --- Biome Configuration ---
+  const Biome = {
+    WATER_DEEP: { sprite: null, design: { frames: 8, duration: 250, drawer: drawDeepWaterFrame }, acceptStructure:false, movements:['swim'], affinities:[('water',0.8),('dark',0.2)], name: 'Eau Profonde', winterColor: '#3D5A80', fallColor: '#3D5A80', summerColor: '#3D5A80', autumnColor: '#3D5A80',maxElevation:0,minElevation:0 }, 
+    WATER_SHALLOW: { sprite: null, design: { frames: 6, duration: 150, drawer: drawWaterFrame }, acceptStructure:false,movements:['swim','ride','navigate','fly'], affinities:[('water',0.8),('life',0.2)],name: 'Eau Peu Profonde', winterColor: '#97aabdff', fallColor: '#5A8AB8', summerColor: '#5A8AB8', autumnColor: '#5A8AB8',maxElevation:1,minElevation:1 },
+    BEACH: { sprite: null, design: { frames: 8, duration: 200, drawer: drawBeachFrame }, acceptStructure:true, movements:['walk','ride','fly'],affinities:[('sand',0.8),('water',0.2)],name: 'Sable', winterColor: '#E9D9A1', fallColor: '#E9D9A1', summerColor: '#E9D9A1', autumnColor: '#E9D9A1',maxElevation:2 ,minElevation:2 }, 
+    GRASSLAND: { sprite: null, design: { frames: 4, duration: 200, drawer: drawGrasslandFrame },  acceptStructure:true, movements:['walk','ride','fly'],affinities:[('life',0.6),('earth',0.2)],name: 'Plaine', winterColor: '#ecf1e3ff',  fallColor: '#98C159', summerColor: '#a5a450ff', autumnColor: '#455e21ff',maxElevation:3,minElevation:2   },
+    FOREST: { sprite: null, acceptStructure:true,movements:['walk','ride','fly'],affinities:[('wood',0.6),('earth',0.4)], name: 'Forêt', winterColor: '#92ac83ff',  fallColor: '#21a32cff', summerColor: '#6A994E', autumnColor: '#b88a28ff',maxElevation:3,minElevation:2   }, 
+    ENCHANTED_FOREST: { sprite: null, acceptStructure:true,movements:['walk','ride','fly'],affinities:[('wood',0.8),('dark',0.2),('life',0.2)], name: 'Forêt Enchantée', winterColor: '#7B6094', fallColor: '#7B6094', summerColor: '#7B6094', autumnColor: '#7B6094',maxElevation:3,minElevation:2   },
+    MOUNTAIN: { sprite: null, design: { frames: 1, duration: 99999, drawer: drawMountainFrame }, acceptStructure:false, movements:['climb','fly'],affinities:[('rock',0.6),('wind',0.4)],name: 'Montagne', winterColor: '#F7F7F7',  fallColor: '#A9A9A9', summerColor: '#A9A9A9', autumnColor: '#A9A9A9',maxElevation:5,minElevation:3  }, 
+    SNOWLAND: { sprite: null, acceptStructure:true,movements:['walk','ride','fly'], affinities:[('ice',0.8),('earth',0.2)],name: 'Toundra', winterColor: '#F7F7F7',  fallColor: '#F7F7F7', summerColor: '#F7F7F7', autumnColor: '#F7F7F7',maxElevation:2,minElevation:2   },
+    SNOWMOUNTAIN: { sprite: null, acceptStructure:false, movements:['climb','fly'],affinities:[('ice',0.4),('rock',0.4),('wind',0.2)],name: 'Mont enneigé', winterColor: '#F7F7F7',  fallColor: '#F7F7F7', summerColor: '#F7F7F7', autumnColor: '#F7F7F7',maxElevation:8,minElevation:4  },
+    DESERT: { sprite: null, acceptStructure:true,movements:['walk','ride','fly'],affinities:[('sand',0.8),('life',0.1),('fire',0.1)], name: 'Désert', winterColor: '#D4A373',  fallColor: '#D4A373', summerColor: '#D4A373', autumnColor: '#D4A373',maxElevation:2,minElevation:2  },
+    RIVER: { sprite: null, acceptStructure:false,movements:['navigate','swim','fly'],affinities:[('water',0.6),('earth',0.2),('life',0.2)],name: 'Rivière', winterColor: '#97aabdff',  fallColor: '#5A8AB8', summerColor: '#5A8AB8', autumnColor: '#5A8AB8',maxElevation:2,minElevation:2  },
+    SWAMP: { sprite: null, design: { frames: 10, duration: 300, drawer: drawSwampFrame }, acceptStructure:false, movements:['fly'],affinities:[('water',0.6),('earth',0.2),('dark',0.2)],name: 'Marais', winterColor: '#0b2e10ff',  fallColor: '#0b2e10ff', summerColor: '#0b2e10ff', autumnColor: '#0b2e10ff',maxElevation:1,minElevation:1 }
+  }
 
   const NAME_PREFIXES = ["Chêne", "Sombre", "Pierre", "Haut", "Val", "Mur", "Guet", "Clair"];
   const NAME_SUFFIXES = ["bourg", "fort", "ville", "mont", "port", "bois", "rivage", "gard"];
@@ -26,9 +157,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const RACE = {
     HUMAN: {strength:1,vitality:1,dexterity:1,intelligence:1,wisdom:1,luck:1}
   };
-  
-  
-  
+    
   const Slot = ['head','body','leg','foot','right-hand','left-hand','two-hands','finger1','finger2','neck','purse','backpack','belt1','belt2'];
   
   const ItemType = {
@@ -64,11 +193,32 @@ document.addEventListener('DOMContentLoaded', () => {
   };
   
   
-  const StructureType = {
-    TOWN: { name: 'Ville', population:15, icon: '🗡️', occurence:0.001,design: `<svg width="0" height="0" style="position:absolute; display: none;">   <defs>        <g id="city-svg" viewBox="0 0 100 100">       <defs>         <linearGradient id="stoneGradient" x1="0%" y1="0%" x2="0%" y2="100%">           <stop offset="0%" style="stop-color:#A9A9A9;" />           <stop offset="100%" style="stop-color:#696969;" />         </linearGradient>          <linearGradient id="stoneShadowGradient" x1="0%" y1="0%" x2="0%" y2="100%">           <stop offset="0%" style="stop-color:#808080;" />           <stop offset="100%" style="stop-color:#4A5568;" />         </linearGradient>       </defs>       <!-- Muraille -->       <path d="M 10 95 L 15 70 L 85 70 L 90 95 Z" fill="url(#stoneShadowGradient)" stroke="#1A202C" stroke-width="2" />       <!-- Crénaux muraille -->       <path d="M 15 70 L 15 65 L 25 65 L 25 70 L 35 70 L 35 65 L 45 65 L 45 70 L 55 70 L 55 65 L 65 65 L 65 70 L 75 70 L 75 65 L 85 65 L 85 70 Z" fill="url(#stoneShadowGradient)" stroke="#1A202C" stroke-width="1.5"/>       <!-- Tour gauche -->       <rect x="20" y="30" width="20" height="40" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/>       <rect x="18" y="25" width="24" height="5" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/>       <!-- Tour droite -->       <rect x="60" y="30" width="20" height="40" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/>       <rect x="58" y="25" width="24" height="5" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/>        <!-- Donjon central -->       <rect x="40" y="15" width="20" height="55" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/>       <path d="M 38 15 L 38 10 L 43 10 L 43 15 L 48 15 L 48 10 L 53 10 L 53 15 L 58 15 L 58 10 L 63 10 L 63 15 Z" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="1.5"/>     </g>   </defs> </svg>`},
-    VILLAGE: { name: 'Village', population:5, icon: '🗡️',occurence:0.005, design: `<svg width="0" height="0" style="position:absolute; display: none;">   <defs>     <!-- Définition du Village -->     <g id="village-svg" viewBox="0 0 100 100">       <defs>         <linearGradient id="woodGradient" x1="0%" y1="0%" x2="0%" y2="100%">           <stop offset="0%" style="stop-color:#A0522D;" />           <stop offset="100%" style="stop-color:#8B4513;" />         </linearGradient>         <linearGradient id="thatchGradient" x1="0%" y1="0%" x2="0%" y2="100%">           <stop offset="0%" style="stop-color:#D4A373;" />           <stop offset="100%" style="stop-color:#A0522D;" />         </linearGradient>       </defs>       <!-- Maison principale -->       <rect x="20" y="50" width="60" height="45" fill="url(#woodGradient)" stroke="#1A202C" stroke-width="2"/>       <polygon points="15,50 85,50 50,20" fill="url(#thatchGradient)" stroke="#1A202C" stroke-width="2"/>       <!-- Petite maison derrière -->       <rect x="65" y="60" width="25" height="35" fill="#8B4513" stroke="#1A202C" stroke-width="1.5"/>       <polygon points="62,60 93,60 77.5,40" fill="#A0522D" stroke="#1A202C" stroke-width="1.5"/>       <!-- Fenêtre -->       <rect x="45" y="65" width="10" height="10" fill="#2D3748"/>     </g> 	  </defs> </svg>`},
-    FARM: { name: 'Ferme', population:5, icon: '🗡️',occurence:0.010 },
-    CAMP:{ name: 'Campement', population:2, icon: '⛺',occurence:0.002 },
+  const STRUCTURE_TYPE = {
+    CITY: { name: 'Ville', population: 15, spawnChance: 0.005, svg: () => citySVG },
+    VILLAGE: { name: 'Village', population: 5,  spawnChance: 0.02, svg: () => villageSVG},
+    FARM: { name: 'Ferme', population: 3,  spawnChance: 0.01, svg: () => farmSVG },
+    CAMP: { name: 'Campement', population: 2,  spawnChance: 0.002, svg: () => campSVG },
+  };
+
+  const NPC_TYPES = {
+      VILLAGER: {
+          name: "Habitant",
+          dialogues: [
+              "Bien le bonjour, étranger.", "J'espère que la récolte sera bonne cette année.", "Faites attention aux loups dans la forêt.", "Le forgeron a de nouvelles marchandises, je crois."
+          ]
+      },
+      FARMER: {
+          name: "Fermier",
+          dialogues: [
+              "Le temps est parfait pour les cultures.", "Ces sangliers n'arrêtent pas de saccager mes champs !", "Une bonne terre, c'est tout ce qui compte."
+          ]
+      },
+      BANDIT: {
+          name: "Bandit",
+          dialogues: [
+              "Qu'est-ce que tu regardes ?", "Dégage d'ici avant que je me fâche.", "Ta bourse ou la vie !"
+          ]
+      }
   };
   
   const MONSTER_TYPES = {
@@ -77,36 +227,150 @@ document.addEventListener('DOMContentLoaded', () => {
   };
   
   const ANIMAL_TYPES = {
-    WOLF: { name: 'Loup', svgAsset: () => wolfsSVG, hp: 20, strength: 4, xp: 15, loot: { 'Cuir': 1, 'Os': 1 }, biomes: [Biome.FOREST, Biome.MOUNTAIN, Biome.SNOWLAND], spawnChance: 0.01 },
-    BOAR: { name: 'Sanglier', svgAsset: () => boarSVG, hp: 25, strength: 5, xp: 20, loot: { 'Cuir': 2 }, biomes: [Biome.FOREST, Biome.GRASSLAND], spawnChance: 0.02 },
+    WOLF: { name: 'Loup', movementClass: 'ground', svgAsset: () => wolfPackSVG, hp: 20, strength: 4, xp: 15, loot: { 'Cuir': 1, 'Os': 1 }, biomes: [Biome.FOREST, Biome.MOUNTAIN, Biome.SNOWLAND], spawnChance: 0.01, size: { w: 40, h: 40 }, offset: { x: -20, y: -35 } },
+    BOAR: { name: 'Sanglier', movementClass: 'ground', svgAsset: () => boarSVG, hp: 25, strength: 5, xp: 20, loot: { 'Cuir': 2 }, biomes: [Biome.FOREST, Biome.GRASSLAND], spawnChance: 0.02, size: { w: 30, h: 30 }, offset: { x: -15, y: -28 } },
+    BIRD: { name: 'Aigle', movementClass: 'fly', svgAsset: () => birdSVG, hp: 10, strength: 1, xp: 5, loot: { 'Plume': 1 }, biomes: [Biome.FOREST, Biome.GRASSLAND, Biome.MOUNTAIN, Biome.BEACH], spawnChance: 0.03, size: { w: 45, h: 40 }, offset: { x: -22, y: -45 }, flightHeight: 40 },
   };
   
-  
-  
-  
+  // --- Global Asset Variables ---
+  let forestSVG, villageSVG, citySVG, playerSVG, enchantedForestSVG, swampSVG, wolfPackSVG, boarSVG, birdSVG, farmSVG, campSVG, npcSVG;
+  let geminiApiKey = "";
+
+  // --- QUEST DATABASE ---
+  const QUEST_DATABASE = {
+      'WOLF_MENACE': {
+          title: "La menace des loups",
+          stages: {
+              0: {
+                  text: "Les loups sont devenus bien trop agressifs ces derniers temps. Ils s'approchent du village et effraient les enfants. Pourriez-vous nous aider à chasser quelques-uns d'entre eux ?",
+                  choices: [
+                      { text: "J'accepte de vous aider.", nextStage: 1 },
+                      { text: "Désolé, je n'ai pas le temps.", nextStage: null }
+                  ]
+              },
+              1: {
+                  text: "Merci ! S'il vous plaît, éliminez 3 meutes de loups dans les environs et revenez me voir. Soyez prudent.",
+                  objective: { type: 'kill', target: 'WOLF', count: 3 },
+                  choices: [
+                       { text: "Je suis dessus.", nextStage: null }
+                  ]
+              },
+              2: {
+                   text: "Vous l'avez fait ! Merci, vous avez rendu un grand service au village.",
+                   choices: [
+                       { text: "Ce n'était rien.", nextStage: 3 }
+                   ]
+              },
+              3: {
+                  text: "Voici une petite récompense pour vos efforts. Revenez nous voir quand vous voulez !",
+                  reward: { xp: 100, items: [] },
+                  isEnd: true
+              }
+          }
+      }
+  };
+
+
+  class Sprite {
+      constructor(sheet, frameWidth, frameHeight, frameCount, animationSpeed) {
+          this.sheet = sheet;
+          this.frameWidth = frameWidth;
+          this.frameHeight = frameHeight;
+          this.frameCount = frameCount;
+          this.animationSpeed = animationSpeed;
+          this.currentFrame = 0;
+          this.lastFrameTime = 0;
+      }
+
+      update(currentTime) {
+          if (this.frameCount <= 1) return;
+          if (currentTime - this.lastFrameTime > this.animationSpeed) {
+              this.currentFrame = (this.currentFrame + 1) % this.frameCount;
+              this.lastFrameTime = currentTime;
+          }
+      }
+
+      draw(ctx, dx, dy) {
+          if (!this.sheet) return;
+          const sx = 0;
+          const sy = this.currentFrame * this.frameHeight;
+          ctx.drawImage(this.sheet,
+              sx, sy, this.frameWidth, this.frameHeight,
+              dx, dy, this.frameWidth, this.frameHeight
+          );
+      }
+  }
+
   class Position{
     constructor(x,y,h=0) {
       this.x = x;
       this.y = y;
       this.h = h;
     }
-    setPosition(x, y, h=0) {
-      this.x = x;
-      this.y = y;
-      this.h = h;
-    }
-    
-    getPosition() {
-      return { x: this.x, y: this.y, h: this.h };
-    }
     
     cartToIso() {
       return {
-        x: (this.x - this.y) * 32,
-        y: (this.x + this.y) * 16
+        x: (this.x - this.y) * (TILE_WIDTH / 2),
+        y: (this.x + this.y) * (TILE_HEIGHT / 2)
       }
     }
-    // Méthode de l'objet
+  }
+
+  class Animal {
+      constructor(type, tile) {
+          this.type = type;
+          this.tile = tile;
+          this.lastMoveTime = 0;
+          this.moveCooldown = 2000 + Math.random() * 3000;
+      }
+
+      update(currentTime, gameMap) {
+          if (currentTime - this.lastMoveTime > this.moveCooldown) {
+              this.move(gameMap);
+              this.lastMoveTime = currentTime;
+              this.moveCooldown = 2000 + Math.random() * 3000;
+          }
+      }
+
+      move(gameMap) {
+          const possibleMoves = [ { dx: 0, dy: -1 }, { dx: 0, dy: 1 }, { dx: -1, dy: 0 }, { dx: 1, dy: 0 }];
+          const move = possibleMoves[Math.floor(Math.random() * possibleMoves.length)];
+          const newX = this.tile.position.x + move.dx;
+          const newY = this.tile.position.y + move.dy;
+
+          if (newX >= 0 && newX < gameMap.size && newY >= 0 && newY < gameMap.size) {
+              const targetTile = gameMap.tiles[newY][newX];
+              const canMoveGround = this.type.movementClass === 'ground' && targetTile.biome && (targetTile.biome.movements.includes('walk') || targetTile.biome.movements.includes('climb'));
+              const canFly = this.type.movementClass === 'fly' && targetTile.biome;
+
+              if ((canMoveGround || canFly) && this.type.biomes.includes(targetTile.biome)) {
+                   this.tile = targetTile;
+              }
+          }
+      }
+
+      setDesign(ctx) {
+          if (!this.tile || this.tile.visibility !== 2) return;
+          const svgImage = this.type.svgAsset();
+          if (!svgImage) return;
+
+          const screenPos = this.tile.position.cartToIso();
+          const elevationHeight = this.tile.position.h * ELEVATION_STEP;
+          const flightHeight = this.type.flightHeight || 0;
+          const size = this.type.size || { w: 40, h: 40 };
+          const offset = this.type.offset || { x: -20, y: -35 };
+          
+          ctx.save();
+          ctx.translate(screenPos.x, screenPos.y - elevationHeight - flightHeight);
+          if (flightHeight > 0) {
+              ctx.fillStyle = 'rgba(0,0,0,0.2)';
+              ctx.beginPath();
+              ctx.ellipse(0, flightHeight, 8, 4, 0, 0, 2 * Math.PI);
+              ctx.fill();
+          }
+          ctx.drawImage(svgImage, offset.x, offset.y, size.w, size.h);
+          ctx.restore();
+      }
   }
   
   class Tile {
@@ -115,15 +379,12 @@ document.addEventListener('DOMContentLoaded', () => {
       this.position = new Position(x, y);
       this.biome = null;
       this.structure = null;
+      this.visibility = 0; // 0: Unseen, 1: Seen, 2: Visible
       this.setBiome();
       this.setElevation();
       this.setStructure();
-      //this.setDesign(ctx);
-      //this.forestSvg=null;
-      //this.setSvg();
     }
     
-    // Méthode de l'objet
     setBiome() {
       let scale = 0.05;
       let eRaw = (simplex.noise2D(this.position.x * scale, this.position.y * scale) + 1) / 2;
@@ -141,88 +402,96 @@ document.addEventListener('DOMContentLoaded', () => {
         else this.biome  = Biome.GRASSLAND;
       }
     }
-    setDesign(ctx,currentTime){
-      if (!this.biome) return;
+   
+    setDesign(ctx){
+      if (!this.biome || this.visibility === 0) return;
+
       const screenPos = this.position.cartToIso();
-      const elevationHeight = this.position.h * 8;
-      let baseColor=null;
+      const elevationHeight = this.position.h * ELEVATION_STEP;
+      
       ctx.save();
       ctx.translate(screenPos.x, screenPos.y - elevationHeight);
-      if (currentTime.season == 'winter') {  baseColor = this.biome.winterColor;}
-      if (currentTime.season == 'summer') {  baseColor = this.biome.summerColor;}
-      if (currentTime.season == 'fall') {  baseColor = this.biome.fallColor;}
-      if (currentTime.season == 'autumn') {  baseColor = this.biome.autumnColor;}
+      
+      const baseColor = this.biome.summerColor;
       const shadowColor = shadeColor(baseColor, -30);
       
-      // Right Face
       ctx.fillStyle = shadowColor;
       ctx.beginPath();
-      ctx.moveTo(0, 32); ctx.lineTo(32, 16); ctx.lineTo(32, 16 + elevationHeight); ctx.lineTo(0, 32 + elevationHeight);
+      ctx.moveTo(0, TILE_HEIGHT); ctx.lineTo(TILE_WIDTH / 2, TILE_HEIGHT / 2); ctx.lineTo(TILE_WIDTH / 2, TILE_HEIGHT / 2 + elevationHeight); ctx.lineTo(0, TILE_HEIGHT + elevationHeight);
       ctx.closePath();
       ctx.fill();
       
-      // Left Face
       ctx.fillStyle = shadeColor(shadowColor, -10);
       ctx.beginPath();
-      ctx.moveTo(0, 32); ctx.lineTo(-32, 16); ctx.lineTo(-32, 16 + elevationHeight); ctx.lineTo(0, 32 + elevationHeight);
+      ctx.moveTo(0, TILE_HEIGHT); ctx.lineTo(-TILE_WIDTH / 2, TILE_HEIGHT / 2); ctx.lineTo(-TILE_WIDTH / 2, TILE_HEIGHT / 2 + elevationHeight); ctx.lineTo(0, TILE_HEIGHT + elevationHeight);
       ctx.closePath();
       ctx.fill();
       
-      // Top Face
-      ctx.fillStyle = baseColor;
-      ctx.beginPath();
-      ctx.moveTo(0, 0); ctx.lineTo(32, 16); ctx.lineTo(0, 32); ctx.lineTo(-32, 16);
-      ctx.closePath();
-      ctx.fill();
-      if (this.biome === Biome.FOREST && forestSVG) {
-        ctx.drawImage(forestSVG, -25, -25, 50, 50);
-      } else if (this.biome === Biome.ENCHANTED_FOREST && mforestSVG) {
-        ctx.drawImage(mforestSVG, -25, -25, 50, 50);
-      } else if (this.biome === Biome.SWAMP && swampSVG) {
-        ctx.drawImage(swampSVG, -25, -5, 50, 30);
+      if (this.biome.sprite) {
+          this.biome.sprite.draw(ctx, -TILE_WIDTH / 2, 0);
+      } else {
+        ctx.fillStyle = baseColor;
+        ctx.beginPath();
+        ctx.moveTo(0, 0); ctx.lineTo(TILE_WIDTH / 2, TILE_HEIGHT / 2); ctx.lineTo(0, TILE_HEIGHT); ctx.lineTo(-TILE_WIDTH / 2, TILE_HEIGHT / 2);
+        ctx.closePath();
+        ctx.fill();
       }
-      if  (this.structure) {
-        if (this.structure.type === 'village' && villageSVG) {
-          ctx.drawImage(villageSVG, -20, -16, 40, 40);
-        } else if (this.structure.type === 'city' && citySVG) {
-          ctx.drawImage(citySVG, -24, -28, 48, 48);
-        }
+
+      if(this.visibility === 2) {
+          if (this.biome === Biome.FOREST && forestSVG) {
+            ctx.drawImage(forestSVG, -25, -25, 50, 50);
+          } else if (this.biome === Biome.ENCHANTED_FOREST && enchantedForestSVG) {
+            ctx.drawImage(enchantedForestSVG, -25, -25, 50, 50);
+          } else if (this.biome === Biome.SWAMP && swampSVG) {
+            ctx.drawImage(swampSVG, -25, -5, 50, 30);
+          }
+          
+          if  (this.structure) {
+              const svg = this.structure.type.svg();
+              ctx.drawImage(svg, -20, -20, 40, 40);
+          }
       }
+
+      if (this.visibility === 1) {
+          ctx.fillStyle = 'rgba(0,0,0,0.5)';
+          ctx.beginPath();
+          ctx.moveTo(0, 0); ctx.lineTo(TILE_WIDTH / 2, TILE_HEIGHT / 2); ctx.lineTo(0, TILE_HEIGHT); ctx.lineTo(-TILE_WIDTH / 2, TILE_HEIGHT / 2);
+          ctx.closePath();
+          ctx.fill();
+      }
+      
       ctx.restore();    
     }
     
-    setExplored(explored) {
-      this.explored=explored;
-    }
     setElevation(){
-      if (!this.biome) {
-        console.error("Impossible de définir l'élévation car le biome n'est pas défini pour la tuile", this.position);
-        return;
-      }
+      if (!this.biome) return;
       this.position.h = Math.floor(Math.random() * (this.biome.maxElevation - this.biome.minElevation+ 1) + this.biome.minElevation);
     }
+
     setStructure(){
-      if (!this.biome) {
-        console.error("Impossible de définir une structure car le biome n'est pas défini pour la tuile", this.position);
-        return;
-      }
+      if (!this.biome || !this.biome.acceptStructure) return;
       var rand = seededRandom(this.position.x * 13 + this.position.y * 59);
-      var structureChance = rand();
-      if (structureChance < 0.005 && this.biome.acceptStructure) {
-        this.structure = { type: 'city', name: NAME_PREFIXES[Math.floor(rand() * NAME_PREFIXES.length)] + NAME_SUFFIXES[Math.floor(rand() * NAME_SUFFIXES.length)], population: StructureType.TOWN.population + Math.floor(rand() * 150), buildings: ['Remparts', 'Place Forte (Château)', 'Grand Marché', 'Forge', 'Alchimiste', 'Enchanteur', 'Écurie', 'Ferme', 'Ferme', 'Ferme', 'Ferme', 'Ferme', 'Lieu de Culte', 'Nombreuses Maisons'] };
-      } else if (structureChance < 0.02 && this.biome.acceptStructure) {
-        this.structure = { type: 'village', name: NAME_PREFIXES[Math.floor(rand() * NAME_PREFIXES.length)] + NAME_SUFFIXES[Math.floor(rand() * NAME_SUFFIXES.length)], population: StructureType.VILLAGE.population + Math.floor(rand() * 20), buildings: ['Maison du Chef', 'Marchand', 'Lieu de Culte', 'Ferme', 'Ferme', 'Plusieurs Maisons'] };
+      
+      let chance = rand();
+      let cumulativeChance = 0;
+
+      for(const key in STRUCTURE_TYPE) {
+          const type = STRUCTURE_TYPE[key];
+          cumulativeChance += type.spawnChance;
+          if (chance < cumulativeChance) {
+              this.structure = {
+                  type: type,
+                  name: type.name === 'Campement' ? 'Campement de bandits' : (NAME_PREFIXES[Math.floor(rand() * NAME_PREFIXES.length)] + " " + NAME_SUFFIXES[Math.floor(rand() * NAME_SUFFIXES.length)])
+              };
+              return;
+          }
       }
-      if ( this.biome.acceptStructure && Math.random() < 0.2) {
-        this.structure={type:'farm', name: 'farm', population: 2,  buildings: []}
-        // npcs.push({ x: nx, y: ny, homeX: loc.x, homeY: loc.y, workX: nx, workY: ny, type: 'farmer', icon: '🧑‍🌾' });
-      }  
     }
   }
   class Map {
     constructor(size) {
       this.size = size;
-      this.tiles = null
+      this.tiles = [];
       this.initializeMap();
     }
     
@@ -245,43 +514,35 @@ document.addEventListener('DOMContentLoaded', () => {
     
     tick(){
       this.minute=(this.minute+1) % 60
-      if (this.minute==1) this.hour=(this.hour+1) % 24
-      if (this.hour==1) this.day=(this.day+1) % 30
-      if (this.day==1) {this.month=(this.month+1) % 12;}
-      if (this.month==1) {this.year=(this.year+1); }
-      if (this.month==6 && this.day==21) {this.season='summer'; }
-      if (this.month==9 && this.day==21) {this.season='autumn'; }
-      if (this.month==12 && this.day==21) {this.season='winter'; }
-      if (this.month==3 && this.day==21) {this.season='fall'; }
+      if (this.minute==0) this.hour=(this.hour+1) % 24
+      if (this.hour==0 && this.minute == 0) this.day=(this.day+1) % 31;
+      if (this.day==1 && this.hour == 0 && this.minute == 0) this.month=(this.month+1) % 13;
+      if (this.month==1 && this.day == 1 && this.hour == 0 && this.minute == 0) this.year++;
+      
+      const timeStr = `${this.hour.toString().padStart(2, '0')}:${this.minute.toString().padStart(2, '0')}`;
+      document.getElementById('time-display').textContent = `Jour ${this.day}, ${timeStr}`;
+      document.getElementById('season-display').textContent = this.season;
     }
     
-    wait(nbrHour){
-      for (let i = 0; i < nbrHour; i++) {
-        this.tick();
-      }
-    }
-    setDesign(){
-      let overlayColor = 'rgba(0,0,0,0)';
+    
+    setDesign(ctx){
       let opacity = 0;
       
-      if (this.hour > 20 || this.hour < 6) { // Nuit (20h -> 6h)
-        overlayColor = '#000033';
+      if (this.hour >= 20 || this.hour < 6) { 
         opacity = 0.5;
-      } else if (this.hour > 18) { // Soir (18h -> 20h)
-        overlayColor = '#FF8C00';
-        opacity = 0.3 * ( ((this.hour/24) - 0.75) / 0.08 );
-      } else if (this.hour  < 8) { // Matin (6h -> 8h)
-        overlayColor = '#FFD700';
-        opacity = 0.3 * ( (0.33 - (this.hour/24) ) / 0.08 );
+      } else if (this.hour >= 18) { 
+        opacity = 0.3 * ( (this.hour - 18) / 2 );
+      } else if (this.hour < 8) { 
+        opacity = 0.3 * ( (8 - this.hour) / 2 );
       }
       
-      ctx.fillStyle = overlayColor;
-      ctx.globalAlpha = opacity;
-      document.getElementById('time-display').textContent = `Jour ${this.day}, ${this.hour}:${this.minute}`;
-      document.getElementById('season-display').textContent = this.season;
-      
+      if (opacity > 0) {
+        ctx.fillStyle = '#000033';
+        ctx.globalAlpha = opacity;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.globalAlpha = 1.0;
+      }
     }
-    // Méthode de l'objet
     
   }
   class Attributes {
@@ -293,58 +554,8 @@ document.addEventListener('DOMContentLoaded', () => {
       this.wisdom = race.wisdom;
       this.luck = race.luck;
     }
-    
-    // Méthode de l'objet
-    
-  }
-  class Animal {
-    constructor(type, tile) {
-      this.type = type;
-      this.tile = tile; // The tile the animal is currently on
-      this.lastMoveTime = 0;
-      this.moveCooldown = 2000 + Math.random() * 3000; // Move every 2-5 seconds
-    }
-    
-    update(currentTime, gameMap) {
-      if (currentTime - this.lastMoveTime > this.moveCooldown) {
-        this.move(gameMap);
-        this.lastMoveTime = currentTime;
-        this.moveCooldown = 2000 + Math.random() * 3000;
-      }
-    }
-    
-    move(gameMap) {
-      const possibleMoves = [
-        { dx: 0, dy: -1 }, { dx: 0, dy: 1 }, { dx: -1, dy: 0 }, { dx: 1, dy: 0 },
-      ];
-      
-      const move = possibleMoves[Math.floor(Math.random() * possibleMoves.length)];
-      const newX = this.tile.position.x + move.dx;
-      const newY = this.tile.position.y + move.dy;
-      
-      if (newX >= 0 && newX < gameMap.size && newY >= 0 && newY < gameMap.size) {
-        const targetTile = gameMap.tiles[newY][newX];
-        if (targetTile.biome && (targetTile.biome.movements.includes('walk') || targetTile.biome.movements.includes('climb')) && this.type.biomes.includes(targetTile.biome)) {
-          this.tile = targetTile;
-        }
-      }
-    }
-    setDesign(ctx) {
-      const svgImage = this.type.svgAsset();
-      if (!this.tile || !svgImage) return;
-      
-      const screenPos = this.tile.position.cartToIso();
-      const elevationHeight = this.tile.position.h * 8;
-      
-      const size = this.type.size || { w: 40, h: 40 };
-      const offset = this.type.offset || { x: -20, y: -35 };
-      
-      ctx.save();
-      ctx.translate(screenPos.x, screenPos.y - elevationHeight);
-      ctx.drawImage(svgImage, offset.x, offset.y, size.w, size.h);
-      ctx.restore();
-    }
   }
+  
   class Creature {
     constructor(name,attributes,level,affinities,alignments,tile,species,race,hp,items) {
       this.name = name;
@@ -359,61 +570,96 @@ document.addEventListener('DOMContentLoaded', () => {
       this.items=items;
       this.hp=hp;
     }
-    
-    fight(){
-      
-    }
-    // Méthode de l'objet
-    
   }
+
   class Npc {
-    constructor(name, creature, settlement, equipments) {
-      this.creature = creature;
-      this.settlement = settlement;
-      this.equipments = equipments;
+    constructor(type, homeTile) {
+      this.type = type;
+      this.tile = homeTile;
+      this.homeTile = homeTile;
+      this.lastMoveTime = 0;
+      this.moveCooldown = 3000 + Math.random() * 4000;
+      this.questId = null;
     }
-    
-    talk() {
+
+    assignQuest(questId) {
+        this.questId = questId;
+    }
+
+    update(currentTime, gameMap) {
+      if (currentTime - this.lastMoveTime > this.moveCooldown) {
+        this.move(gameMap);
+        this.lastMoveTime = currentTime;
+      }
+    }
+
+    move(gameMap) {
+      const wanderRadius = 3;
+      const possibleMoves = [];
+      for (let y = -wanderRadius; y <= wanderRadius; y++) {
+        for (let x = -wanderRadius; x <= wanderRadius; x++) {
+          const newX = this.homeTile.position.x + x;
+          const newY = this.homeTile.position.y + y;
+          if (newX >= 0 && newX < gameMap.size && newY >= 0 && newY < gameMap.size) {
+            const targetTile = gameMap.tiles[newY][newX];
+            if(targetTile.biome.movements.includes('walk') && !targetTile.structure) {
+                possibleMoves.push(targetTile);
+            }
+          }
+        }
+      }
+      if(possibleMoves.length > 0) {
+          this.tile = possibleMoves[Math.floor(Math.random() * possibleMoves.length)];
+      }
+    }
+
+    setDesign(ctx) {
+      if (!this.tile || this.tile.visibility !== 2) return;
+
+      const screenPos = this.tile.position.cartToIso();
+      const elevationHeight = this.tile.position.h * ELEVATION_STEP;
       
+      ctx.save();
+      ctx.translate(screenPos.x, screenPos.y - elevationHeight);
+      ctx.drawImage(npcSVG, -25, -50, 50, 60);
+      ctx.restore();
     }
     
-    steal() {
-      
+    getDialogue(questManager) {
+        if(this.questId) {
+            let quest = questManager.getQuest(this.questId);
+            if(quest && quest.status !== 'completed') {
+                return { name: this.type.name, ...quest.getCurrentStage() };
+            }
+        }
+        const randomDialogue = this.type.dialogues[Math.floor(Math.random() * this.type.dialogues.length)];
+        return { name: this.type.name, text: randomDialogue, choices: [] };
     }
-    
-    trade() {
-      
-    }
-    // Méthode de l'objet
-    
   }
   
   class Player {
-    constructor(creature,equipments,playerImage) {
+    constructor(creature,equipments) {
       this.creature=creature;
       this.equipments=equipments;
-      this.color = '#E53E3E';      
-      //this.playerImage = playerImage ;
-      //this.setSvg();
     }
     get position() { 
       return this.creature.tile.position; 
     }
-    
+   
     setDesign(ctx) {
       const tile = this.creature.tile
       if(!tile) return;
       
       const screenPos = tile.position.cartToIso();
-      const elevationHeight = tile.position.h * 8;
+      const elevationHeight = tile.position.h * ELEVATION_STEP;
       
       ctx.save();
       ctx.translate(screenPos.x, screenPos.y - elevationHeight);
       
-      if (playerSVG && playerSVG.complete) {
+      if (playerSVG) {
         ctx.drawImage(playerSVG, -25, -50, 50, 60);
-      } else { // Fallback to circle
-        ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(0, TILE_HEIGHT / 2 - 6, 8, 0, Math.PI * 2); ctx.fill();
+      } else { 
+        ctx.fillStyle = '#E53E3E'; ctx.beginPath(); ctx.arc(0, TILE_HEIGHT / 2 - 6, 8, 0, Math.PI * 2); ctx.fill();
       }
       ctx.restore();
     }
@@ -427,180 +673,278 @@ document.addEventListener('DOMContentLoaded', () => {
         }
       }
     }
-    
-    rename(name) {
-      this.name = name;
-    }
-    
-    equipItem(item,slot) {
-      equipment.equip(item,slot);
-      updateAttribute();
-    }
   }
   
-  class Settlement {
-    constructor(level, affinities, name, alignments, position, structures) {
-      this.level = level;
-      this.affinities = affinities;
-      this.name = name;
-      this.alignments = alignments;
-      this.structures = structures;
+  class Quest {
+    constructor(id, definition) {
+        this.id = id;
+        this.definition = definition;
+        this.currentStage = 0;
+        this.status = 'inactive'; // inactive, active, completed
     }
-    
-    // Méthode de l'objet
-    
-  }
-  class Resource {
-    constructor(resourceType, position) {
-      this.resourceType = resourceType;
-      this.position = position;
+
+    getCurrentStage() {
+        return this.definition.stages[this.currentStage];
     }
-    collect(tile){
-      
-    }
-    collect(creature){
-      // check if creature can collect
-      // transfer resulting items creature.items[]=this.resourceType.item
-      //end object
-    }
-    // Méthode de l'objet
-    
-  }
-  class Equipment {
-    
-    constructor(item,slot) {
-      this.item = item;
-      this.slot = slot;
-    }
-    // Méthode de l'objet
-    equip(slot) {
-      //replace current equipment
-      //check if compatible
-      //check if equipable
-      this.slot = slot;
-    }
-    unequip() {
-      this.slot = null;
-      
+
+    advance(choiceIndex) {
+        const stage = this.getCurrentStage();
+        if(stage.choices && stage.choices[choiceIndex]) {
+            const nextStageIndex = stage.choices[choiceIndex].nextStage;
+            if (nextStageIndex !== null) {
+                this.currentStage = nextStageIndex;
+                 if(this.status === 'inactive') this.status = 'active';
+                 if(this.getCurrentStage().isEnd) {
+                     this.status = 'completed';
+                 }
+            }
+        }
     }
   }
-  class Soul {
-    
-    constructor(name,description) {
-      this.name = name;
-      this.description = description;
-    }
-    // Méthode de l'objet
-    invoke() {
-      //
-      
-    }
-  }
-  class Item {
-    
-    constructor(name,duration,itemType) {
-      this.name = name;
-      if (!Object.values(ItemType).includes(itemType)) {
-        throw new Error('Item type invalide !');
+
+  class QuestManager {
+      constructor(questGenerator) {
+          this.quests = {};
+          this.generator = questGenerator;
       }
-      this.itemType = itemType;
-      if (duration){
-        this.duration = itemType.duration
-      } else {
-        this.duration = duration
+
+      getQuest(questId) {
+          return this.quests[questId];
+      }
+
+      startQuest(questId, questDefinition) {
+          if(!this.quests[questId]) {
+              this.quests[questId] = new Quest(questId, questDefinition);
+          }
+          return this.quests[questId];
       }
       
-    }
-    // Méthode de l'objet
-    throw() {
-      // delete after x Tick 
-    }
-    destroy() {
-      
-    }
-    use(){
-      if (this.duration >1) {
-        this.duration = this.duration-1
-      } 
-      else {
-        this.destroy();
+      async getQuestForNpc(npc) {
+        if(npc.questId && this.quests[npc.questId]) {
+            return this.quests[npc.questId];
+        }
+        
+        try {
+            const questDefinition = await this.generator.generateQuestForNpc(npc);
+            if(questDefinition) {
+                const questId = `GEMINI_${Date.now()}`;
+                npc.assignQuest(questId);
+                return this.startQuest(questId, questDefinition);
+            }
+        } catch(e) {
+            console.error("Gemini quest generation failed, using fallback.", e);
+            const fallbackId = 'WOLF_MENACE';
+            npc.assignQuest(fallbackId);
+            return this.startQuest(fallbackId, QUEST_DATABASE[fallbackId]);
+        }
+        return null;
       }
-    }
   }
   
-  
+  class GeminiQuestGenerator {
+      async generateQuestForNpc(npc) {
+          if (!geminiApiKey) {
+              throw new Error("API key is missing.");
+          }
+
+          const prompt = `Génère une quête simple pour un jeu RPG en 2D isométrique.
+          Le PNJ est un "${npc.type.name}".
+          Il se trouve près d'une structure de type "${npc.homeTile.structure.type.name}" dans un biome de type "${npc.homeTile.biome.name}".
+          
+          Crée une quête avec un titre, et 3 à 4 étapes.
+          La première étape (index 0) doit proposer d'accepter ou de refuser la quête.
+          L'étape suivante (index 1) doit décrire l'objectif. L'objectif doit être simple, comme tuer un certain nombre de monstres ou collecter des objets.
+          La dernière étape doit être la récompense (isEnd: true).
+          
+          Réponds UNIQUEMENT avec un objet JSON valide qui suit le schéma ci-dessous. N'ajoute aucun texte avant ou après le JSON.
+          `;
+          
+          const payload = {
+              contents: [{ parts: [{ text: prompt }] }],
+              generationConfig: {
+                  responseMimeType: "application/json",
+                  responseSchema: {
+                      type: "OBJECT",
+                      properties: {
+                          "title": { "type": "STRING" },
+                          "stages": {
+                              "type": "ARRAY",
+                              "items": {
+                                  "type": "OBJECT",
+                                  "properties": {
+                                      "text": { "type": "STRING" },
+                                      "choices": {
+                                          "type": "ARRAY",
+                                          "items": {
+                                              "type": "OBJECT",
+                                              "properties": {
+                                                  "text": { "type": "STRING" },
+                                                  "nextStage": { "type": ["NUMBER", "NULL"] }
+                                              },
+                                               "required": ["text"]
+                                          }
+                                      },
+                                      "objective": { "type": ["OBJECT", "NULL"], "properties": {"type": {"type": "STRING"}, "target": {"type": "STRING"}, "count": {"type": "NUMBER"}} },
+                                      "reward": { "type": ["OBJECT", "NULL"], "properties": {"xp": {"type": "NUMBER"}, "items": {"type": "ARRAY", "items": { "type": "STRING" }}} },
+                                      "isEnd": { "type": ["BOOLEAN", "NULL"] }
+                                  },
+                                  "required": ["text", "choices"]
+                              }
+                          }
+                      },
+                      "required": ["title", "stages"]
+                  }
+              }
+          };
+
+          const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-05-20:generateContent?key=${geminiApiKey}`;
+          
+          const response = await fetch(apiUrl, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify(payload)
+          });
+          
+          if (!response.ok) {
+              const errorBody = await response.text();
+              console.error("API Error Body:", errorBody);
+              throw new Error(`API call failed with status: ${response.status}`);
+          }
+
+          const result = await response.json();
+          const jsonText = result.candidates?.[0]?.content?.parts?.[0]?.text;
+          if(jsonText) {
+              return JSON.parse(jsonText);
+          }
+          throw new Error("Invalid response from API.");
+      }
+  }
+
   class World {
-    
     constructor(name) {
       this.name = name;
-      this.map = new Map(200)
+      this.map = new Map(200);
       this.currentTime=new Time();
       this.animals = [];
-      this.setAnimals();
-    }
-    // Méthode de l'objet
-    save() {
-      
-    }
-    setAnimals() {
-      console.time('Animal Spawning');
-      for (let y = 0; y < this.map.size; y++) {
-        for (let x = 0; x < this.map.size; x++) {
-          const tile = this.map.tiles[y][x];
-          if (tile.biome && tile.biome.movements.includes('walk')) {
-            for (const key in ANIMAL_TYPES) {
-              const animalType = ANIMAL_TYPES[key];
-              if (animalType.biomes.includes(tile.biome) && Math.random() < animalType.spawnChance) {
-                this.animals.push(new Animal(animalType, tile));
-              }
-            }
-          }
-        }
-      }
-      console.log(`Spawned ${this.animals.length} animals.`);
-      console.timeEnd('Animal Spawning');
+      this.npcs = [];
+      this.questManager = new QuestManager(new GeminiQuestGenerator());
+      this.spawnEntities();
     }
     
+    spawnEntities() {
+        console.time('Entity Spawning');
+        for (let y = 0; y < this.map.size; y++) {
+            for (let x = 0; x < this.map.size; x++) {
+                const tile = this.map.tiles[y][x];
+
+                if(tile.structure) {
+                    const structureType = tile.structure.type;
+                    let npcType = NPC_TYPES.VILLAGER;
+                    if(structureType === STRUCTURE_TYPE.FARM) npcType = NPC_TYPES.FARMER;
+                    if(structureType === STRUCTURE_TYPE.CAMP) npcType = NPC_TYPES.BANDIT;
+
+                    for(let i = 0; i < structureType.population; i++) {
+                        this.npcs.push(new Npc(npcType, tile));
+                    }
+                }
+
+                if (tile.biome) {
+                     for (const key in ANIMAL_TYPES) {
+                        const animalType = ANIMAL_TYPES[key];
+                         if (animalType.biomes.includes(tile.biome) && Math.random() < animalType.spawnChance) {
+                             if(animalType.movementClass === 'ground' && tile.biome.movements.includes('walk')) {
+                                this.animals.push(new Animal(animalType, tile));
+                             } else if (animalType.movementClass === 'fly') {
+                                this.animals.push(new Animal(animalType, tile));
+                             }
+                        }
+                    }
+                }
+            }
+        }
+        console.log(`Spawned ${this.animals.length} animals and ${this.npcs.length} NPCs.`);
+        console.timeEnd('Entity Spawning');
+    }
   }
   class Camera {
-    
     constructor(x=0,y=0,canvas) {
       this.x=x;
       this.y=y;      
       this.canvas = canvas;
     }
-    // Méthode de l'objet
     setCamera(position) {
       var target = position.cartToIso();
       var perspective = position.h * ELEVATION_STEP;
       this.x = this.canvas.width / 2 - target.x;
       this.y = this.canvas.height / 2 - (target.y - perspective);
     }
-    
   }
   class Session {
     
     constructor() {
       this.world = new World('Defiance');
       this.camera = new Camera(0,0, canvas);
+      this.isDialogueActive = false;
       this.setControls();
       this.loop = this.loop.bind(this);
       this.player=null;
       this.setInitial();
     }
-    // Méthode de l'objet
     loop(currentTime) {
-      this.updateAnimals(currentTime);
-      this.handleMovement(currentTime);
-      this.camera.setCamera(this.player.position);
+      this.update(currentTime);
       this.setDesign();
       requestAnimationFrame(this.loop);
     }
-    updateAnimals(currentTime) {
-      this.world.animals.forEach(animal => {
-        animal.update(currentTime, this.world.map);
-      });
+
+    update(currentTime) {
+      if(this.isDialogueActive) return;
+
+      this.handleMovement(currentTime);
+      this.updateVisibility();
+      
+      this.world.animals.forEach(animal => animal.update(currentTime, this.world.map));
+      this.world.npcs.forEach(npc => npc.update(currentTime, this.world.map));
+      
+      this.camera.setCamera(this.player.position);
+      
+      for (const key in Biome) {
+          if (Biome[key].sprite) {
+              Biome[key].sprite.update(currentTime);
+          }
+      }
+
+      this.world.currentTime.tick();
     }
+
+    updateVisibility() {
+        const map = this.world.map;
+        const px = this.player.position.x;
+        const py = this.player.position.y;
+        const radius = VISION_RADIUS;
+        const radiusSq = radius * radius;
+        
+        const viewBox = {
+          minX: Math.max(0, px - radius - 2),
+          maxX: Math.min(map.size - 1, px + radius + 2),
+          minY: Math.max(0, py - radius - 2),
+          maxY: Math.min(map.size - 1, py + radius + 2)
+        };
+
+        for(let y = viewBox.minY; y <= viewBox.maxY; y++) {
+          for(let x = viewBox.minX; x <= viewBox.maxX; x++) {
+            const tile = map.tiles[y][x];
+            if(tile.visibility === 2) tile.visibility = 1;
+
+            const dx = px - x;
+            const dy = py - y;
+            if (dx * dx + dy * dy <= radiusSq) {
+                tile.visibility = 2;
+            }
+          }
+        }
+    }
+
+
     setInitial(){
       let spawnX, spawnY;
       do {
@@ -608,48 +952,99 @@ document.addEventListener('DOMContentLoaded', () => {
         spawnY = Math.floor(Math.random() * this.world.map.size);
       } while (!this.world.map.tiles[spawnY][spawnX].biome || !this.world.map.tiles[spawnY][spawnX].biome.movements.includes('walk') );
       this.player = new Player(new Creature('player',new Attributes(RACE.HUMAN),1,null,null,this.world.map.tiles[spawnY][spawnX],'human',RACE.HUMAN,10,null),);
+      this.updateVisibility();
     }
     setControls() {
-      document.addEventListener('keydown', e => {
-        const key = e.key.toLowerCase();
-        if (key.startsWith('arrow')) { controls[key.replace('arrow', '')] = true; }
-        else if (['w', 'z'].includes(key)) { controls.up = true; }
-        else if (['s'].includes(key)) { controls.down = true; }
-        else if (['a', 'q'].includes(key)) { controls.left = true; }
-        else if (['d'].includes(key)) { controls.right = true; }
-      });
-      document.addEventListener('keyup', e => {
-        const key = e.key.toLowerCase();
-        if (key.startsWith('arrow')) { controls[key.replace('arrow', '')] = false; }
-        else if (['w', 'z'].includes(key)) { controls.up = false; }
-        else if (['s'].includes(key)) { controls.down = false; }
-        else if (['a', 'q'].includes(key)) { controls.left = false; }
-        else if (['d'].includes(key)) { controls.right = false; }
-      });
-      const controlMap = { 'btn-up': 'up', 'btn-down': 'down', 'btn-left': 'left', 'btn-right': 'right' };
-      for (const [id, dir] of Object.entries(controlMap)) {
-        const btn = document.getElementById(id);
-        btn.addEventListener('touchstart', e => { e.preventDefault(); controls[dir] = true; }, { passive: false });
-        btn.addEventListener('touchend', e => { e.preventDefault(); controls[dir] = false; });
-      }
+        document.addEventListener('keydown', e => {
+            const key = e.key.toLowerCase();
+            if (key.startsWith('arrow')) { controls[key.replace('arrow', '')] = true; }
+            else if (['w', 'z'].includes(key)) { controls.up = true; }
+            else if (['s'].includes(key)) { controls.down = true; }
+            else if (['a', 'q'].includes(key)) { controls.left = true; }
+            else if (['d'].includes(key)) { controls.right = true; }
+            else if (key === 'e') { 
+                if(!this.isDialogueActive) this.handleInteraction();
+            }
+        });
+        document.addEventListener('keyup', e => {
+            const key = e.key.toLowerCase();
+            if (key.startsWith('arrow')) { controls[key.replace('arrow', '')] = false; }
+            else if (['w', 'z'].includes(key)) { controls.up = false; }
+            else if (['s'].includes(key)) { controls.down = false; }
+            else if (['a', 'q'].includes(key)) { controls.left = false; }
+            else if (['d'].includes(key)) { controls.right = false; }
+        });
+        const controlMap = { 'btn-up': 'up', 'btn-down': 'down', 'btn-left': 'left', 'btn-right': 'right' };
+        for (const [id, dir] of Object.entries(controlMap)) {
+            const btn = document.getElementById(id);
+            btn.addEventListener('touchstart', e => { e.preventDefault(); controls[dir] = true; }, { passive: false });
+            btn.addEventListener('touchend', e => { e.preventDefault(); controls[dir] = false; });
+        }
+        document.getElementById('btn-action').addEventListener('click', () => { if(!this.isDialogueActive) this.handleInteraction(); });
+        document.getElementById('dialogue-close').addEventListener('click', () => this.hideDialogue());
+        
+        const apiKeyInputDesktop = document.getElementById('apiKeyInputDesktop');
+        const apiKeyInputMobile = document.getElementById('apiKeyInputMobile');
+
+        apiKeyInputDesktop.addEventListener('input', (e) => {
+            geminiApiKey = e.target.value;
+            apiKeyInputMobile.value = geminiApiKey;
+        });
+        apiKeyInputMobile.addEventListener('input', (e) => {
+            geminiApiKey = e.target.value;
+            apiKeyInputDesktop.value = geminiApiKey;
+        });
     }
     setDesign(){
+      ctx.fillStyle = '#000000';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
       
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
       ctx.save();
       ctx.translate(this.camera.x, this.camera.y);
       
-      for (let y = 0; y < this.world.map.size; y++) for (let x = 0; x < this.world.map.size; x++) this.world.map.tiles[y][x].setDesign(ctx,this.world.currentTime);
+      const [startX, endX, startY, endY] = this.getVisibleTileBounds();
+
+      for (let y = startY; y < endY; y++) {
+          for (let x = startX; x < endX; x++) {
+               if (this.world.map.tiles[y] && this.world.map.tiles[y][x]) {
+                  this.world.map.tiles[y][x].setDesign(ctx);
+              }
+          }
+      }
+
       this.world.animals.forEach(animal => animal.setDesign(ctx));
+      this.world.npcs.forEach(npc => npc.setDesign(ctx));
       this.player.setDesign(ctx);
-      this.world.currentTime.setDesign(ctx);
-      ctx.fillRect(this.camera.x * -1, this.camera.y * -1, canvas.width, canvas.height);
-      ctx.globalAlpha = 1.0;
-      //drawFloatingTexts();
       
-      ctx.restore();
-      this.world.currentTime.tick();
+      ctx.restore(); 
+      ctx.save(); 
+      this.world.currentTime.setDesign(ctx);
+      ctx.restore(); 
+
     }
+    
+    getVisibleTileBounds() {
+        const margin = 5; 
+        const viewWidth = canvas.width;
+        const viewHeight = canvas.height;
+
+        const isoToCart = (isoX, isoY) => {
+            const cartX = (isoX / (TILE_WIDTH / 2) + isoY / (TILE_HEIGHT / 2)) / 2;
+            const cartY = (isoY / (TILE_HEIGHT / 2) - isoX / (TILE_WIDTH / 2)) / 2;
+            return { x: Math.floor(cartX), y: Math.floor(cartY) };
+        };
+
+        const topLeft = isoToCart(-this.camera.x, -this.camera.y);
+        const bottomRight = isoToCart(-this.camera.x + viewWidth, -this.camera.y + viewHeight);
+
+        const startX = Math.max(0, topLeft.x - margin);
+        const endX = Math.min(this.world.map.size - 1, bottomRight.x + margin);
+        const startY = Math.max(0, topLeft.y - margin);
+        const endY = Math.min(this.world.map.size - 1, bottomRight.y + margin);
+
+        return [startX, endX, startY, endY];
+    }
+
     handleMovement(currentTime) {
       if (currentTime - lastMoveTime < 150) return;
       let moved = false;
@@ -659,104 +1054,186 @@ document.addEventListener('DOMContentLoaded', () => {
       if (controls.right) { this.player.move(1, 0,this.world.map); moved = true; }
       if(moved) lastMoveTime = currentTime;
     }
+
+    async handleInteraction() {
+        const px = this.player.position.x;
+        const py = this.player.position.y;
+        
+        let targetNpc = null;
+        for (const npc of this.world.npcs) {
+            const dx = Math.abs(npc.tile.position.x - px);
+            const dy = Math.abs(npc.tile.position.y - py);
+            if (dx <= 1 && dy <= 1) {
+                targetNpc = npc;
+                break;
+            }
+        }
+
+        if(targetNpc) {
+            this.showDialogue(targetNpc, {name: targetNpc.type.name, text: "Laissez-moi réfléchir..."});
+            const quest = await this.world.questManager.getQuestForNpc(targetNpc);
+            const dialogueData = targetNpc.getDialogue(this.world.questManager);
+            this.showDialogue(targetNpc, dialogueData);
+        }
+    }
+
+    showDialogue(npc, dialogueData) {
+        this.isDialogueActive = true;
+        const dialogueBox = document.getElementById('dialogue-box');
+        document.getElementById('dialogue-name').textContent = dialogueData.name;
+        document.getElementById('dialogue-text').textContent = dialogueData.text;
+
+        const choicesContainer = document.getElementById('dialogue-choices');
+        choicesContainer.innerHTML = '';
+
+        if(dialogueData.choices && dialogueData.choices.length > 0) {
+            document.getElementById('dialogue-close').classList.add('hidden');
+            dialogueData.choices.forEach((choice, index) => {
+                const button = document.createElement('button');
+                button.textContent = choice.text;
+                button.className = 'quest-choice-btn w-full';
+                button.onclick = () => {
+                    const quest = this.world.questManager.getQuest(npc.questId);
+                    if (quest) {
+                       quest.advance(index);
+                       this.updateQuestLogUI();
+                    }
+                    if(choice.nextStage !== null) {
+                       const nextDialogue = npc.getDialogue(this.world.questManager);
+                       this.showDialogue(npc, nextDialogue);
+                    } else {
+                       this.hideDialogue();
+                    }
+                };
+                choicesContainer.appendChild(button);
+            });
+        } else {
+             document.getElementById('dialogue-close').classList.remove('hidden');
+        }
+
+        dialogueBox.classList.remove('hidden');
+    }
+
+    hideDialogue() {
+        document.getElementById('dialogue-box').classList.add('hidden');
+        this.isDialogueActive = false;
+    }
+    
+    updateQuestLogUI() {
+        const questLogDesktop = document.getElementById('quest-log-desktop');
+        const questLogMobile = document.getElementById('quest-log-mobile');
+        questLogDesktop.innerHTML = '';
+        questLogMobile.innerHTML = '';
+
+        const activeQuests = Object.values(this.world.questManager.quests).filter(q => q.status === 'active');
+
+        if (activeQuests.length === 0) {
+            const noQuestText = '<p class="text-gray-400">Aucune quête active.</p>';
+            questLogDesktop.innerHTML = noQuestText;
+            questLogMobile.innerHTML = noQuestText;
+            return;
+        }
+
+        activeQuests.forEach(quest => {
+            const stage = quest.getCurrentStage();
+            const questElement = document.createElement('div');
+            questElement.innerHTML = `<h4 class="font-bold text-cyan-300">${quest.definition.title}</h4><p class="text-sm text-gray-300">${stage.text}</p>`;
+            questLogDesktop.appendChild(questElement);
+            questLogMobile.appendChild(questElement.cloneNode(true));
+        });
+    }
   }
   
   
-  
-  const controls = { up: false, down: false, left: false, right: false };
+  const controls = { up: false, down: false, left: false, right: false, interact: false };
   const simplex = new SimplexNoise();
   let lastMoveTime = 0;
-  let isGameReady = false;
   const canvas = document.getElementById('gameCanvas');
   const ctx = canvas.getContext('2d');
   const loadingScreen = document.getElementById('loading');
   const TILE_WIDTH = 64;
   const TILE_HEIGHT = 32;
   const ELEVATION_STEP = TILE_HEIGHT / 4;
-  let forestSVG, villageSVG, citySVG, boarSVG,wolfsSVG,swampSVG, playerSVG,mforestSVG;
+  const VISION_RADIUS = 8;
+  
   
   function seededRandom(seed) { 
     let s = seed; 
     return () => { s = (s * 9301 + 49297) % 233280; return s / 233280.0; }; 
   }
   
-  function loadSvgAsImage(gElement) {
-    return new Promise((resolve, reject) => {
-      if (!gElement) {
-        return reject(new Error("SVG <g> element not found."));
-      }
-      
-      const viewBox = gElement.getAttribute('viewBox') || '0 0 100 100';
-      
-      // Create a new, standalone <svg> element in memory
-      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-      svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-      svg.setAttribute('viewBox', viewBox);
-      // Clone the content of the <g> element into the new <svg>
-      svg.innerHTML = gElement.innerHTML;
-      
-      const serializer = new XMLSerializer();
-      const svgString = serializer.serializeToString(svg);
-      const svgBlob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
-      
-      const url = URL.createObjectURL(svgBlob);
-      
-      const img = new Image();
-      img.onload = () => {
-        URL.revokeObjectURL(url);
-        resolve(img);
-      };
-      img.onerror = (err) => {
-        URL.revokeObjectURL(url);
-        reject(new Error('Failed to load SVG as image: ' + err.type));
-      };
-      img.src = url;
-    });
-  }
   function shadeColor(c, p) { 
     let R=parseInt(c.substring(1,3),16),G=parseInt(c.substring(3,5),16),B=parseInt(c.substring(5,7),16);R=parseInt(R*(100+p)/100);G=parseInt(G*(100+p)/100);B=parseInt(B*(100+p)/100);R=(R<255)?R:255;G=(G<255)?G:255;B=(B<255)?B:255;
     return "#"+("0"+R.toString(16)).slice(-2)+("0"+G.toString(16)).slice(-2)+("0"+B.toString(16)).slice(-2); 
   }
   
+  function createAnimatedSheet(width, height, frameCount, drawFrameFn) {
+      const sheetCanvas = document.createElement('canvas');
+      sheetCanvas.width = width;
+      sheetCanvas.height = height * frameCount;
+      const sheetCtx = sheetCanvas.getContext('2d');
+      sheetCtx.imageSmoothingEnabled = false; 
+
+      for (let frame = 0; frame < frameCount; frame++) {
+          sheetCtx.save();
+          sheetCtx.translate(0, frame * height);
+          drawFrameFn(sheetCtx, frame, width, height);
+          sheetCtx.restore();
+      }
+      return sheetCanvas;
+  }
+
+  function loadSvgAsImage(gElement) {
+    return new Promise((resolve, reject) => {
+        if (!gElement) return reject(new Error("SVG <g> element not found."));
+        const viewBox = gElement.getAttribute('viewBox') || '0 0 100 100';
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('viewBox', viewBox);
+        const defs = document.querySelector('svg > defs');
+        if (defs) svg.appendChild(defs.cloneNode(true));
+        svg.appendChild(gElement.cloneNode(true));
+        const svgString = new XMLSerializer().serializeToString(svg);
+        const url = URL.createObjectURL(new Blob([svgString], { type: "image/svg+xml;charset=utf-8" }));
+        const img = new Image();
+        img.onload = () => { URL.revokeObjectURL(url); resolve(img); };
+        img.onerror = (err) => { URL.revokeObjectURL(url); reject(err); };
+        img.src = url;
+    });
+  }
+
+  
   async function initializeGame() {
     canvas.width = canvas.parentElement.clientWidth;
     canvas.height = canvas.parentElement.clientHeight;
     
     try {
-      // Load SVG assets from HTML and convert them to Image objects
-      const forestElement = document.getElementById('forest-svg');
-      const villageElement = document.getElementById('village-svg');
-      const cityElement = document.getElementById('city-svg');
-      const playerElement = document.getElementById('player-svg');
-      const boarElement = document.getElementById('boar-svg');
-      const wolfsElement = document.getElementById('wolf-pack-svg');
-      const swampElement = document.getElementById('swamp-svg');
-      const manaForestElement = document.getElementById('enchanted-forest-svg');
-      //const cityElement = document.getElementById('swamp-svg');
-      
-      [forestSVG, villageSVG, citySVG, boarSVG,wolfsSVG,swampSVG, playerSVG,mforestSVG] = await Promise.all([
-        loadSvgAsImage(forestElement),
-        loadSvgAsImage(villageElement),
-        loadSvgAsImage(cityElement),
-        loadSvgAsImage(boarElement),
-        loadSvgAsImage(wolfsElement),
-        loadSvgAsImage(swampElement),
-        loadSvgAsImage(playerElement),
-        loadSvgAsImage(manaForestElement)
-      ]);
-      
-      console.log("All SVG assets loaded as images.");
-      
-      let session = new Session();
-      loadingScreen.style.display = 'none';
-      session.loop();
-      
+        for (const key in Biome) {
+          const biome = Biome[key];
+          if (biome.design) {
+            const sheet = createAnimatedSheet(TILE_WIDTH, TILE_HEIGHT, biome.design.frames, biome.design.drawer);
+            biome.sprite = new Sprite(sheet, TILE_WIDTH, TILE_HEIGHT, biome.design.frames, biome.design.duration);
+          }
+        }
+        
+        const assetIds = ['forest-svg', 'village-svg', 'city-svg', 'player-svg', 'enchanted-forest-svg', 'swamp-svg', 'wolf-pack-svg', 'boar-svg', 'bird-svg', 'farm-svg', 'camp-svg', 'npc-svg'];
+        const assetElements = assetIds.map(id => document.getElementById(id));
+
+        [forestSVG, villageSVG, citySVG, playerSVG, enchantedForestSVG, swampSVG, wolfPackSVG, boarSVG, birdSVG, farmSVG, campSVG, npcSVG] = await Promise.all(
+            assetElements.map(el => loadSvgAsImage(el))
+        );
+        
+        console.log("All assets loaded.");
+
+        let session = new Session();
+        loadingScreen.style.display = 'none';
+        session.loop();
+
     } catch (error) {
-      console.error("Failed to load SVG assets:", error);
-      loadingScreen.innerHTML = "Error loading assets. Please refresh.";
+        console.error("Failed to load assets:", error);
+        loadingScreen.innerHTML = "Error loading assets. Please refresh.";
     }
   }
   
-  
   initializeGame();
-})
\ No newline at end of file
+});
+
diff --git a/js/scriptalpha.js b/js/scriptalpha.js
index 087ccac..f6373dc 100644
--- a/js/scriptalpha.js
+++ b/js/scriptalpha.js
@@ -1,49 +1,73 @@
 document.addEventListener('DOMContentLoaded', () => {
   const Biome = {
-    WATER_DEEP: { sprite: null, acceptStructure:false, movements:['swim'], affinities:[('water',0.8),('dark',0.2)], name: 'Eau Profonde', winterColor: '#3D5A80', fallColor: '#3D5A80', summerColor: '#3D5A80', autumnColor: '#3D5A80',maxElevation:0,minElevation:0 }, 
-    WATER_SHALLOW: { sprite: null, acceptStructure:false,movements:['swim','ride','navigate','fly'], affinities:[('water',0.8),('life',0.2)],name: 'Eau Peu Profonde', winterColor: '#97aabdff', fallColor: '#5A8AB8', summerColor: '#5A8AB8', autumnColor: '#5A8AB8',maxElevation:1,minElevation:1 },
-    BEACH: { sprite: null, acceptStructure:true, movements:['walk','ride','fly'],affinities:[('sand',0.8),('water',0.2)],name: 'Sable', winterColor: '#E9D9A1', fallColor: '#E9D9A1', summerColor: '#E9D9A1', autumnColor: '#E9D9A1',maxElevation:2 ,minElevation:2 }, 
-    GRASSLAND: { sprite: null,  acceptStructure:true, movements:['walk','ride','fly'],affinities:[('life',0.6),('earth',0.2)],name: 'Plaine', winterColor: '#ecf1e3ff',  fallColor: '#98C159', summerColor: '#a5a450ff', autumnColor: '#455e21ff',maxElevation:3,minElevation:2   },
+    WATER_DEEP: {  sprite:null, design: {frames: 8,duration: 200, drawer: drawDeepWaterFrame}, acceptStructure:false, movements:['swim'], affinities:[('water',0.8),('dark',0.2)], name: 'Eau Profonde', winterColor: '#3D5A80', fallColor: '#3D5A80', summerColor: '#3D5A80', autumnColor: '#3D5A80',maxElevation:0,minElevation:0 }, 
+    WATER_SHALLOW: { sprite:null, design: {frames: 6,duration: 150, drawer: drawWaterFrame}, acceptStructure:false,movements:['swim','ride','navigate','fly'], affinities:[('water',0.8),('life',0.2)],name: 'Eau Peu Profonde', winterColor: '#97aabdff', fallColor: '#5A8AB8', summerColor: '#5A8AB8', autumnColor: '#5A8AB8',maxElevation:1,minElevation:1 },
+    BEACH: { sprite:null, design: {frames: 4,duration: 200, drawer: drawBeachFrame}, acceptStructure:true, movements:['walk','ride','fly'],affinities:[('sand',0.8),('water',0.2)],name: 'Sable', winterColor: '#E9D9A1', fallColor: '#E9D9A1', summerColor: '#E9D9A1', autumnColor: '#E9D9A1',maxElevation:2 ,minElevation:2 }, 
+    GRASSLAND: {sprite:null, design: { frames: 4,duration: 200, drawer: drawGrasslandFrame},  acceptStructure:true, movements:['walk','ride','fly'],affinities:[('life',0.6),('earth',0.2)],name: 'Plaine', winterColor: '#ecf1e3ff',  fallColor: '#98C159', summerColor: '#a5a450ff', autumnColor: '#455e21ff',maxElevation:3,minElevation:2   },
     FOREST: { sprite: null, acceptStructure:true,movements:['walk','ride','fly'],affinities:[('wood',0.6),('earth',0.4)], name: 'Forêt', winterColor: '#92ac83ff',  fallColor: '#21a32cff', summerColor: '#6A994E', autumnColor: '#b88a28ff',maxElevation:3,minElevation:2   }, 
-    ENCHANTED_FOREST: { sprite: null, acceptStructure:true,movements:['walk','ride','fly'],affinities:[('wood',0.8),('dark',0.2),('life',0.2)], name: 'Forêt Enchantée', winterColor: '#7B6094', fallColor: '#7B6094', summerColor: '#7B6094', autumnColor: '#7B6094',maxElevation:3,minElevation:2   },
-    MOUNTAIN: { sprite: null, acceptStructure:false, movements:['climb','fly'],affinities:[('rock',0.6),('wind',0.4)],name: 'Montagne', winterColor: '#F7F7F7',  fallColor: '#A9A9A9', summerColor: '#A9A9A9', autumnColor: '#A9A9A9',maxElevation:5,minElevation:3  }, 
+    ENCHANTED_FOREST: {   sprite: null, acceptStructure:true,movements:['walk','ride','fly'],affinities:[('wood',0.8),('dark',0.2),('life',0.2)], name: 'Forêt Enchantée', winterColor: '#7B6094', fallColor: '#7B6094', summerColor: '#7B6094', autumnColor: '#7B6094',maxElevation:3,minElevation:2   },
+    MOUNTAIN: { sprite:null, design: { frames: 1,duration: 9999, drawer: drawMountainFrame}, acceptStructure:false, movements:['climb','fly'],affinities:[('rock',0.6),('wind',0.4)],name: 'Montagne', winterColor: '#F7F7F7',  fallColor: '#A9A9A9', summerColor: '#A9A9A9', autumnColor: '#A9A9A9',maxElevation:5,minElevation:3  }, 
     SNOWLAND: { sprite: null, acceptStructure:true,movements:['walk','ride','fly'], affinities:[('ice',0.8),('earth',0.2)],name: 'Toundra', winterColor: '#F7F7F7',  fallColor: '#F7F7F7', summerColor: '#F7F7F7', autumnColor: '#F7F7F7',maxElevation:2,minElevation:2   },
     SNOWMOUNTAIN: { sprite: null, acceptStructure:false, movements:['climb','fly'],affinities:[('ice',0.4),('rock',0.4),('wind',0.2)],name: 'Mont enneigé', winterColor: '#F7F7F7',  fallColor: '#F7F7F7', summerColor: '#F7F7F7', autumnColor: '#F7F7F7',maxElevation:8,minElevation:4  },
     DESERT: { sprite: null, acceptStructure:true,movements:['walk','ride','fly'],affinities:[('sand',0.8),('life',0.1),('fire',0.1)], name: 'Désert', winterColor: '#D4A373',  fallColor: '#D4A373', summerColor: '#D4A373', autumnColor: '#D4A373',maxElevation:2,minElevation:2  },
     RIVER: { sprite: null, acceptStructure:false,movements:['navigate','swim','fly'],affinities:[('water',0.6),('earth',0.2),('life',0.2)],name: 'Rivière', winterColor: '#97aabdff',  fallColor: '#5A8AB8', summerColor: '#5A8AB8', autumnColor: '#5A8AB8',maxElevation:2,minElevation:2  },
-    SWAMP: { sprite: null, acceptStructure:false, movements:['fly'],affinities:[('water',0.6),('earth',0.2),('dark',0.2)],name: 'Marais', winterColor: '#0b2e10ff',  fallColor: '#0b2e10ff', summerColor: '#0b2e10ff', autumnColor: '#0b2e10ff',maxElevation:1,minElevation:1 }
+    SWAMP: { sprite:null, design: {  frames: 4,duration: 300, drawer: drawSwampFrame}, acceptStructure:false, movements:['fly'],affinities:[('water',0.6),('earth',0.2),('dark',0.2)],name: 'Marais', winterColor: '#0b2e10ff',  fallColor: '#0b2e10ff', summerColor: '#0b2e10ff', autumnColor: '#0b2e10ff',maxElevation:1,minElevation:1 }
   }
-  const NAME_PREFIXES = ["Chêne", "Sombre", "Pierre", "Haut", "Val", "Mur", "Guet", "Clair"];
-  const NAME_SUFFIXES = ["bourg", "fort", "ville", "mont", "port", "bois", "rivage", "gard"];
   
+   const JOB = {
+      VILLAGER: {
+          name: "Habitant",
+          dialogues: [
+              "Bien le bonjour, étranger.",
+              "J'espère que la récolte sera bonne cette année.",
+              "Faites attention aux loups dans la forêt.",
+              "Le forgeron a de nouvelles marchandises, je crois."
+          ]
+      },      FARMER: {
+          name: "Fermier",
+          dialogues: [
+              "Le temps est parfait pour les cultures.",
+              "Ces sangliers n'arrêtent pas de saccager mes champs !",
+              "Une bonne terre, c'est tout ce qui compte."
+          ]
+      },
+      BANDIT: {
+          name: "Bandit",
+          dialogues: [
+              "Qu'est-ce que tu regardes ?",
+              "Dégage d'ici avant que je me fâche.",
+              "Ta bourse ou la vie !"
+          ]
+      }
+  };
   const Affinities = ['water','fire','sand','rock','dark','life','ice','wood','wind','metal','time','space','lava','light','spirit'];
   
   const RACE = {
     HUMAN: {strength:1,vitality:1,dexterity:1,intelligence:1,wisdom:1,luck:1}
   };
-    
-  const Slot = ['head','body','leg','foot','right-hand','left-hand','two-hands','finger1','finger2','neck','purse','backpack','belt1','belt2'];
   
-  const ItemType = {
+  const SLOT = ['head','body','leg','foot','right-hand','left-hand','two-hands','finger1','finger2','neck','purse','backpack','belt1','belt2'];
+  
+  const ITEM_TYPE = {
     lightWeapon:{slot:['right-hand','left-hand','backpack'],soul:true,enchant:true},
-    heavyWeapon:{slot:('two-hands','backpack'),soul:true,enchant:true},
-    heavyArmor:{slot:('body','backpack'),soul:true,enchant:true},
-    lightArmor:{slot:('body','backpack'),soul:true,enchant:true},
-    shield:{slot:('right-hand','left-hand','backpack'),soul:true,enchant:true},
-    shoes:{slot:('foot','backpack'),soul:true,enchant:true},
-    pant:{slot:('leg','backpack'),soul:true,enchant:true},
-    helmet:{slot:('leg','backpack'),soul:true,enchant:true},
-    potion:{slot:('heal','backpack'),soul:false,enchant:false},
-    throwable:{slot:('belt','backpack'),soul:true,enchant:true},
-    craftMaterial:{slot:('backpack'),soul:false,enchant:false},
-    ring:{slot:('finger1','finger2','backpack'),soul:true,enchant:true},
-    amulet:{slot:('neck','backpack'),soul:true,enchant:true},
-    currency:{slot:('purse'),soul:true,enchant:true},
-    enchantMaterial:{slot:('backpack'),soul:false,enchant:false},
-    mercantMaterial:{slot:('backpack'),soul:false,enchant:false}
+    heavyWeapon:{slot:['two-hands','backpack'],soul:true,enchant:true},
+    heavyArmor:{slot:['body','backpack'],soul:true,enchant:true},
+    lightArmor:{slot:['body','backpack'],soul:true,enchant:true},
+    shield:{slot:['right-hand','left-hand','backpack'],soul:true,enchant:true},
+    shoes:{slot:['foot','backpack'],soul:true,enchant:true},
+    pant:{slot:['leg','backpack'],soul:true,enchant:true},
+    helmet:{slot:['leg','backpack'],soul:true,enchant:true},
+    potion:{slot:['heal','backpack'],soul:false,enchant:false},
+    throwable:{slot:['belt','backpack'],soul:true,enchant:true},
+    craftMaterial:{slot:['backpack'],soul:false,enchant:false},
+    ring:{slot:['finger1','finger2','backpack'],soul:true,enchant:true},
+    amulet:{slot:['neck','backpack'],soul:true,enchant:true},
+    currency:{slot:['purse'],soul:true,enchant:true},
+    enchantMaterial:{slot:['backpack'],soul:false,enchant:false},
+    mercantMaterial:{slot:['backpack'],soul:false,enchant:false}
   }
   
-  const Items = {
+  const ITEMS = {
     'Épée en Bois': { name: 'Épée en Bois', itemType: 'lightWeapon', stats: { strength: 2 }, icon: '🗡️' ,enchantments:[] },
     'Armure de Cuir': { name: 'Armure de Cuir', itemType: 'lightArmor', stats: { vitality: 2 }, icon: '🧥',enchantments:[] },
     'Claymore': { name: 'Claymore', itemType: 'lightArmor', stats: { vitality: 2 }, icon: '🧥',enchantments:['primal'] },
@@ -57,11 +81,20 @@ document.addEventListener('DOMContentLoaded', () => {
   };
   
   
-  const StructureType = {
-    TOWN: { name: 'Ville', population:15, icon: '🗡️', occurence:0.001 },
-    VILLAGE: { name: 'Village', population:5, icon: '🗡️',occurence:0.005 },
-    FARM: { name: 'Ferme', population:5, icon: '🗡️',occurence:0.010 },
-    CAMP:{ name: 'Campement', population:2, icon: '⛺',occurence:0.002 },
+  const STRUCTURE_TYPE = {
+    CASTLE: { name: 'Chateau', population: 15, spawnChance: 0.01, size: { w: 48, h: 48 }, offset: { x: -24, y: -28 } , svgAsset: () => citySVG },
+    HOUSE: { name: 'Maison', population: 5,  spawnChance: 0.02, size: { w: 30, h: 30 }, offset: { x: -20, y: -16 } , svgAsset: () => houseSVG},
+    FARM: { name: 'Ferme', population: 5,  spawnChance: 0.10, size: { w: 30, h: 30 }, offset: { x: -20, y: -16 },  svgAsset: () => farmSVG },
+    CAMP: { name: 'Campement', population: 2,  spawnChance: 0.05, size: { w: 30, h: 30 }, offset: { x: -20, y: -20 } , svgAsset: () => campSVG },
+    MARKET: { name: 'Marché', population: 2,  spawnChance: 0.05, size: { w: 30, h: 30 }, offset: { x: -20, y: -20 } , svgAsset: () => marketSVG },
+    CULT: { name: 'Lieu de culte', population: 2,  spawnChance: 0.05, size: { w: 30, h: 30 }, offset: { x: -20, y: -20 } , svgAsset: () => cultSVG },
+    MINE: { name: 'Mine', population: 2,  spawnChance: 0.05, size: { w: 30, h: 30 }, offset: { x: -20, y: -20 } , svgAsset: () => mineSVG }
+  };
+  const SETTLEMENT_TYPE = {
+    HUMAN_TOWN: { name: 'Ville', population: 100, spawnChance: 0.01, size: 10, structureType:[(STRUCTURE_TYPE.CASTLE,1),(STRUCTURE_TYPE.HOUSE,5),(STRUCTURE_TYPE.MARKET,2),(STRUCTURE_TYPE.CULT,2)] },
+    HUMAN_VILLAGE: { name: 'Village', population: 50,  spawnChance: 0.02, size: 3, structureType:[(STRUCTURE_TYPE.CASTLE,1),(STRUCTURE_TYPE.HOUSE,5)]},
+    DEMON_CAMP: { name: 'Demon camp', population: 5,  spawnChance: 0.10, size: 3, structureType:[(STRUCTURE_TYPE.CULT,1),(STRUCTURE_TYPE.HOUSE,10)] },
+    ORC_BASE: { name: 'Orc base', population: 2,  spawnChance: 0.05, size: 5, structureType:[(STRUCTURE_TYPE.CASTLE,1),(STRUCTURE_TYPE.HOUSE,5)] }
   };
   
   const MONSTER_TYPES = {
@@ -70,44 +103,155 @@ document.addEventListener('DOMContentLoaded', () => {
   };
   
   const ANIMAL_TYPES = {
+    BIRD: { name: 'Oiseau', svgAsset: () => birdSVG, hp: 10, strength: 4, xp: 15, loot: { 'Cuir': 1, 'Os': 1 }, biomes: [Biome.FOREST, Biome.MOUNTAIN, Biome.SNOWMOUNTAIN], spawnChance: 0.01, size: { w: 40, h: 40 }, offset: { x: -20, y: -35 } },
     WOLF: { name: 'Loup', svgAsset: () => wolfPackSVG, hp: 20, strength: 4, xp: 15, loot: { 'Cuir': 1, 'Os': 1 }, biomes: [Biome.FOREST, Biome.MOUNTAIN, Biome.SNOWLAND], spawnChance: 0.01, size: { w: 40, h: 40 }, offset: { x: -20, y: -35 } },
     BOAR: { name: 'Sanglier', svgAsset: () => boarSVG, hp: 25, strength: 5, xp: 20, loot: { 'Cuir': 2 }, biomes: [Biome.FOREST, Biome.GRASSLAND], spawnChance: 0.02, size: { w: 30, h: 30 }, offset: { x: -15, y: -28 } },
   };
   
   // --- Global Asset Variables ---
   let forestSVG, villageSVG, citySVG, playerSVG, enchantedForestSVG, swampSVG, wolfPackSVG, boarSVG;
-
-
+  
+  
   class Sprite {
-      constructor(sheet, frameWidth, frameHeight, frameCount, animationSpeed) {
-          this.sheet = sheet;
-          this.frameWidth = frameWidth;
-          this.frameHeight = frameHeight;
-          this.frameCount = frameCount;
-          this.animationSpeed = animationSpeed;
-          this.currentFrame = 0;
-          this.lastFrameTime = 0;
+    constructor(biome) {
+      this.biome = biome;
+      this.sheet = null;
+      this.frameWidth = TILE_WIDTH;
+      this.frameHeight = TILE_HEIGHT;
+      this.frameCount = this.biome.design.frames;
+      this.animationSpeed = this.biome.design.duration;
+      this.currentFrame = 0;
+      this.lastFrameTime = 0;
+      this.setSheet(this.biome.design.drawer);
+    }
+    
+    update(currentTime) {
+      if (this.frameCount <= 1) return; // Don't animate static sprites
+      if (currentTime - this.lastFrameTime > this.animationSpeed) {
+        this.currentFrame = (this.currentFrame + 1) % this.frameCount;
+        this.lastFrameTime = currentTime;
       }
-
-      update(currentTime) {
-          if (this.frameCount <= 1) return; // Don't animate static sprites
-          if (currentTime - this.lastFrameTime > this.animationSpeed) {
-              this.currentFrame = (this.currentFrame + 1) % this.frameCount;
-              this.lastFrameTime = currentTime;
-          }
-      }
-
-      draw(ctx, dx, dy) {
-          if (!this.sheet) return;
-          const sx = 0;
-          const sy = this.currentFrame * this.frameHeight;
-          ctx.drawImage(this.sheet,
-              sx, sy, this.frameWidth, this.frameHeight,
-              dx, dy, this.frameWidth, this.frameHeight
-          );
+    }
+    
+    draw(ctx, dx, dy) {
+      if (!this.sheet) return;
+      const sx = 0;
+      const sy = this.currentFrame * this.frameHeight;
+      ctx.drawImage(this.sheet,
+        sx, sy, this.frameWidth, this.frameHeight,
+        dx, dy, this.frameWidth, this.frameHeight
+      );
+    }
+    setSheet(drawer) {
+      const sheetCanvas = document.createElement('canvas');
+      sheetCanvas.width = this.frameWidth;
+      sheetCanvas.height = this.frameHeight * this.frameCount;
+      const sheetCtx = sheetCanvas.getContext('2d');
+      sheetCtx.imageSmoothingEnabled = false; 
+      for (let frame = 0; frame < this.frameCount; frame++) {
+        sheetCtx.save();
+        sheetCtx.translate(0, frame * this.frameHeight);
+        drawer(sheetCtx,frame,this.frameWidth,this.frameHeight);
+        sheetCtx.restore();
       }
+      this.sheet= sheetCanvas;
+    }
+  }
+  
+  class structure {
+    
+    constructor(position) {
+      this.position = position;
+      this.type = null;
+      this.name = null;
+      this.population=null;
+      this.setType();
+      this.setName();
+      
+      //this.setPopulation();
+    }
+    setName() {
+      var rand = seededRandom(this.position.x * 13 + this.position.y * 59);
+      const NAME_SUFFIXES = ["bourg", "fort", "ville", "mont", "port", "bois", "rivage", "gard"];
+      this.name= this.type.name+ NAME_SUFFIXES[Math.floor(rand() * NAME_SUFFIXES.length)]
+    }
+    setDesign(ctx) {
+      const svgImage = this.type.svgAsset();
+      
+      if (!svgImage) return;
+      
+      const size = this.type.size || { w: 40, h: 40 };
+      const offset = this.type.offset || { x: -20, y: -35 };
+      ctx.drawImage(svgImage,  offset.x, offset.y, size.w, size.h);
+      
+    }
+    setType() {
+      
+      const types = Object.values(STRUCTURE_TYPE);
+      const weightedTypes = [];
+      
+      // Remplir le tableau pondéré en fonction des occurrences
+      types.forEach(type => {
+        const weight = Math.floor(type.spawnChance * 100); 
+        for (let i = 0; i < weight; i++) {
+          weightedTypes.push(type);
+        }
+      });
+      
+      // Sélectionner un type aléatoire dans le tableau pondéré
+      this.type = weightedTypes[Math.floor(Math.random() * weightedTypes.length)];
+    }
+    
+    setPopulation() {
+      
+      for (let i = 0; i < this.type.population; i++) {
+        //new NPC
+      }
+    }
+    // Méthode de l'objet
+  }
+  class Settlement {
+    
+    constructor() {
+      this.tiles = [];
+      this.structures = [];
+      this.name = null;
+      this.population=null;
+      this.setType();
+      this.setName();
+      
+      //this.setPopulation();
+    }
+    setName() {
+      var rand = seededRandom(this.position.x * 13 + this.position.y * 59);
+      const NAME_SUFFIXES = ["bourg", "fort", "ville", "mont", "port", "bois", "rivage", "gard"];
+      this.name= this.type.name+ NAME_SUFFIXES[Math.floor(rand() * NAME_SUFFIXES.length)]
+    }
+    setType() {
+      
+      const types = Object.values(SETTLEMENT_TYPE);
+      const weightedTypes = [];
+      
+      // Remplir le tableau pondéré en fonction des occurrences
+      types.forEach(type => {
+        const weight = Math.floor(type.spawnChance * 100); 
+        for (let i = 0; i < weight; i++) {
+          weightedTypes.push(type);
+        }
+      });
+      
+      // Sélectionner un type aléatoire dans le tableau pondéré
+      this.type = weightedTypes[Math.floor(Math.random() * weightedTypes.length)];
+    }
+    
+    setPopulation() {
+      
+      for (let i = 0; i < this.type.population; i++) {
+        //new NPC
+      }
+    }
+    // Méthode de l'objet
   }
-
   class Position{
     constructor(x,y,h=0) {
       this.x = x;
@@ -131,52 +275,52 @@ document.addEventListener('DOMContentLoaded', () => {
       }
     }
   }
-
+  
   class Animal {
-      constructor(type, tile) {
-          this.type = type;
-          this.tile = tile;
-          this.lastMoveTime = 0;
-          this.moveCooldown = 2000 + Math.random() * 3000;
+    constructor(type, tile) {
+      this.type = type;
+      this.tile = tile;
+      this.lastMoveTime = 0;
+      this.moveCooldown = 2000 + Math.random() * 3000;
+    }
+    
+    update(currentTime, gameMap) {
+      if (currentTime - this.lastMoveTime > this.moveCooldown) {
+        this.move(gameMap);
+        this.lastMoveTime = currentTime;
+        this.moveCooldown = 2000 + Math.random() * 3000;
       }
-
-      update(currentTime, gameMap) {
-          if (currentTime - this.lastMoveTime > this.moveCooldown) {
-              this.move(gameMap);
-              this.lastMoveTime = currentTime;
-              this.moveCooldown = 2000 + Math.random() * 3000;
-          }
-      }
-
-      move(gameMap) {
-          const possibleMoves = [ { dx: 0, dy: -1 }, { dx: 0, dy: 1 }, { dx: -1, dy: 0 }, { dx: 1, dy: 0 }];
-          const move = possibleMoves[Math.floor(Math.random() * possibleMoves.length)];
-          const newX = this.tile.position.x + move.dx;
-          const newY = this.tile.position.y + move.dy;
-
-          if (newX >= 0 && newX < gameMap.size && newY >= 0 && newY < gameMap.size) {
-              const targetTile = gameMap.tiles[newY][newX];
-              if (targetTile.biome && (targetTile.biome.movements.includes('walk') || targetTile.biome.movements.includes('climb')) && this.type.biomes.includes(targetTile.biome)) {
-                   this.tile = targetTile;
-              }
-          }
-      }
-
-      setDesign(ctx) {
-          if (!this.tile || this.tile.visibility !== 2) return;
-          const svgImage = this.type.svgAsset();
-          if (!svgImage) return;
-
-          const screenPos = this.tile.position.cartToIso();
-          const elevationHeight = this.tile.position.h * ELEVATION_STEP;
-          const size = this.type.size || { w: 40, h: 40 };
-          const offset = this.type.offset || { x: -20, y: -35 };
-          
-          ctx.save();
-          ctx.translate(screenPos.x, screenPos.y - elevationHeight);
-          ctx.drawImage(svgImage, offset.x, offset.y, size.w, size.h);
-          ctx.restore();
+    }
+    
+    move(gameMap) {
+      const possibleMoves = [ { dx: 0, dy: -1 }, { dx: 0, dy: 1 }, { dx: -1, dy: 0 }, { dx: 1, dy: 0 }];
+      const move = possibleMoves[Math.floor(Math.random() * possibleMoves.length)];
+      const newX = this.tile.position.x + move.dx;
+      const newY = this.tile.position.y + move.dy;
+      
+      if (newX >= 0 && newX < gameMap.size && newY >= 0 && newY < gameMap.size) {
+        const targetTile = gameMap.tiles[newY][newX];
+        if (targetTile.biome && (targetTile.biome.movements.includes('walk') || targetTile.biome.movements.includes('climb')) && this.type.biomes.includes(targetTile.biome)) {
+          this.tile = targetTile;
+        }
       }
+    }
+    
+    setDesign(ctx) {
+      if (!this.tile || this.tile.visibility !== 2) return;
+      const svgImage = this.type.svgAsset();
+      if (!svgImage) return;
+      
+      const screenPos = this.tile.position.cartToIso();
+      const elevationHeight = this.tile.position.h * ELEVATION_STEP;
+      const size = this.type.size || { w: 40, h: 40 };
+      const offset = this.type.offset || { x: -20, y: -35 };
+      
+      ctx.save();
+      ctx.translate(screenPos.x, screenPos.y - elevationHeight);
+      ctx.drawImage(svgImage, offset.x, offset.y, size.w, size.h);
+      ctx.restore();
+    }
   }
   
   class Tile {
@@ -208,10 +352,10 @@ document.addEventListener('DOMContentLoaded', () => {
         else this.biome  = Biome.GRASSLAND;
       }
     }
-   
+    
     setDesign(ctx){
       if (!this.biome || this.visibility === 0) return;
-
+      
       const screenPos = this.position.cartToIso();
       const elevationHeight = this.position.h * ELEVATION_STEP;
       
@@ -236,7 +380,7 @@ document.addEventListener('DOMContentLoaded', () => {
       
       // Draw top surface using a sprite if available
       if (this.biome.sprite) {
-          this.biome.sprite.draw(ctx, -TILE_WIDTH / 2, 0);
+        this.biome.sprite.draw(ctx, -TILE_WIDTH / 2, 0);
       } else {
         ctx.fillStyle = baseColor;
         ctx.beginPath();
@@ -244,33 +388,29 @@ document.addEventListener('DOMContentLoaded', () => {
         ctx.closePath();
         ctx.fill();
       }
-
+      
       // Draw features if fully visible
       if(this.visibility === 2) {
-          if (this.biome === Biome.FOREST && forestSVG) {
-            ctx.drawImage(forestSVG, -25, -25, 50, 50);
-          } else if (this.biome === Biome.ENCHANTED_FOREST && enchantedForestSVG) {
-            ctx.drawImage(enchantedForestSVG, -25, -25, 50, 50);
-          } else if (this.biome === Biome.SWAMP && swampSVG) {
-            ctx.drawImage(swampSVG, -25, -5, 50, 30);
-          }
-          
-          if  (this.structure) {
-              if (this.structure.type === 'village' && villageSVG) {
-                ctx.drawImage(villageSVG, -20, -16, 40, 40);
-              } else if (this.structure.type === 'city' && citySVG) {
-                ctx.drawImage(citySVG, -24, -28, 48, 48);
-              }
-          }
+        if (this.biome === Biome.FOREST && forestSVG) {
+          ctx.drawImage(forestSVG, -25, -25, 50, 50);
+        } else if (this.biome === Biome.ENCHANTED_FOREST && enchantedForestSVG) {
+          ctx.drawImage(enchantedForestSVG, -25, -25, 50, 50);
+        } else if (this.biome === Biome.SWAMP && swampSVG) {
+          ctx.drawImage(swampSVG, -25, -5, 50, 30);
+        }
+        
+        if  (this.structure ) {
+          this.structure.setDesign(ctx);
+        }
       }
-
+      
       // Draw fog overlay if seen but not currently visible
       if (this.visibility === 1) {
-          ctx.fillStyle = 'rgba(0,0,0,0.5)';
-          ctx.beginPath();
-          ctx.moveTo(0, 0); ctx.lineTo(TILE_WIDTH / 2, TILE_HEIGHT / 2); ctx.lineTo(0, TILE_HEIGHT); ctx.lineTo(-TILE_WIDTH / 2, TILE_HEIGHT / 2);
-          ctx.closePath();
-          ctx.fill();
+        ctx.fillStyle = 'rgba(0,0,0,0.5)';
+        ctx.beginPath();
+        ctx.moveTo(0, 0); ctx.lineTo(TILE_WIDTH / 2, TILE_HEIGHT / 2); ctx.lineTo(0, TILE_HEIGHT); ctx.lineTo(-TILE_WIDTH / 2, TILE_HEIGHT / 2);
+        ctx.closePath();
+        ctx.fill();
       }
       
       ctx.restore();    
@@ -280,15 +420,12 @@ document.addEventListener('DOMContentLoaded', () => {
       if (!this.biome) return;
       this.position.h = Math.floor(Math.random() * (this.biome.maxElevation - this.biome.minElevation+ 1) + this.biome.minElevation);
     }
-
+    
     setStructure(){
-      if (!this.biome || !this.biome.acceptStructure) return;
       var rand = seededRandom(this.position.x * 13 + this.position.y * 59);
       var structureChance = rand();
-      if (structureChance < 0.005) {
-        this.structure = { type: 'city', name: NAME_PREFIXES[Math.floor(rand() * NAME_PREFIXES.length)] + NAME_SUFFIXES[Math.floor(rand() * NAME_SUFFIXES.length)] };
-      } else if (structureChance < 0.02) {
-        this.structure = { type: 'village', name: NAME_PREFIXES[Math.floor(rand() * NAME_PREFIXES.length)] + NAME_SUFFIXES[Math.floor(rand() * NAME_SUFFIXES.length)] };
+      if (structureChance < 0.01 && this.biome.acceptStructure) {
+        this.structure=new structure(this.position);
       }
     }
   }
@@ -377,10 +514,82 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }
   class Npc {
-    constructor(name, creature, settlement, equipments) {
-      this.creature = creature;
+    constructor(job,creature,settlement,equipments) {
+      this.job = job;
+      this.tile = creature.tile;
       this.settlement = settlement;
-      this.equipments = equipments;
+      this.lastMoveTime = 0;
+      this.moveCooldown = 3000 + Math.random() * 4000;
+      //f (!this.settlement){this.setSettlement()}
+      //if (!this.equipments){this.setEquipments()}
+    }
+
+    setEquipments() {
+      var i=0;
+      const items = Object.values(ITEMS);
+      const weightedTypes = [];
+      var compatibleItem=null;
+      for (const slot in SLOT) {
+        var slotChance = rand();
+        if (slotChance < 0.005) {
+          
+          // Remplir le tableau pondéré en fonction des occurrences
+          items.forEach(item => {
+            if (ITEM_TYPE[item.itemType].slot.includes(slot)){
+              const weight = Math.floor(item.spawnChance * 100); 
+              for (let i = 0; i < weight; i++) {
+                weightedTypes.push(item);
+              }
+            }
+          });
+          // Sélectionner un type aléatoire dans le tableau pondéré
+          compatibleItem = weightedTypes[Math.floor(Math.random() * weightedTypes.length)];
+          this.equipments[i]=new equipment(slot,compatibleItem);
+        }
+      };
+    }
+    update(currentTime, gameMap) {
+      if (currentTime - this.lastMoveTime > this.moveCooldown) {
+        this.move(gameMap);
+        this.lastMoveTime = currentTime;
+      }
+    }
+    
+    move(gameMap) {
+      const wanderRadius = 3;
+      const possibleMoves = [];
+      for (let y = -wanderRadius; y <= wanderRadius; y++) {
+        for (let x = -wanderRadius; x <= wanderRadius; x++) {
+          const newX = this.settlement.position.x + x;
+          const newY = this.settlement.position.y + y;
+          if (newX >= 0 && newX < gameMap.size && newY >= 0 && newY < gameMap.size) {
+            const targetTile = gameMap.tiles[newY][newX];
+            if(targetTile.biome.movements.includes('walk') && !targetTile.structure) {
+              possibleMoves.push(targetTile);
+            }
+          }
+        }
+      }
+      if(possibleMoves.length > 0) {
+        this.tile = possibleMoves[Math.floor(Math.random() * possibleMoves.length)];
+      }
+    }
+    
+    setDesign(ctx) {
+      if (!this.tile || this.tile.visibility !== 2) return;
+      
+      const screenPos = this.tile.position.cartToIso();
+      const elevationHeight = this.tile.position.h * ELEVATION_STEP;
+      
+      ctx.save();
+      ctx.translate(screenPos.x, screenPos.y - elevationHeight);
+      ctx.drawImage(npcSVG, -25, -50, 50, 60);
+      ctx.restore();
+    }
+    
+    interact() {
+      const dialogue = this.type.dialogues[Math.floor(Math.random() * this.type.dialogues.length)];
+      return { name: this.job.name, text: dialogue };
     }
   }
   
@@ -392,7 +601,7 @@ document.addEventListener('DOMContentLoaded', () => {
     get position() { 
       return this.creature.tile.position; 
     }
-   
+    
     setDesign(ctx) {
       const tile = this.creature.tile
       if(!tile) return;
@@ -428,26 +637,47 @@ document.addEventListener('DOMContentLoaded', () => {
       this.map = new Map(200);
       this.currentTime=new Time();
       this.animals = [];
-      this.spawnAnimals();
+            this.npcs = [];
+      this.spawnEntities();
+      
     }
     
-    spawnAnimals() {
-        console.time('Animal Spawning');
-        for (let y = 0; y < this.map.size; y++) {
-            for (let x = 0; x < this.map.size; x++) {
-                const tile = this.map.tiles[y][x];
-                if (tile.biome && tile.biome.movements.includes('walk')) {
-                    for (const key in ANIMAL_TYPES) {
-                        const animalType = ANIMAL_TYPES[key];
-                        if (animalType.biomes.includes(tile.biome) && Math.random() < animalType.spawnChance) {
-                            this.animals.push(new Animal(animalType, tile));
-                        }
-                    }
-                }
+    spawnEntities() {
+      console.time('Entity Spawning');
+      for (let y = 0; y < this.map.size; y++) {
+        for (let x = 0; x < this.map.size; x++) {
+          const tile = this.map.tiles[y][x];
+          
+          // Spawn NPCs in structures
+          if(tile.structure) {
+            const structureType = tile.structure.type;
+            let job = JOB.VILLAGER;
+            if(structureType === STRUCTURE_TYPE.FARM) job = JOB.FARMER;
+            if(structureType === STRUCTURE_TYPE.CAMP) job = JOB.BANDIT;
+            
+            for(let i = 0; i < structureType.population; i++) {
+              this.npcs.push(new Npc(job,new Creature(job.name,null,1,null,null,tile,'HUMAN',null,10,null),tile,null ));
             }
+          }
+          
+
+          // Spawn Animals
+          if (tile.biome) {
+            for (const key in ANIMAL_TYPES) {
+              const animalType = ANIMAL_TYPES[key];
+              if (animalType.biomes.includes(tile.biome) && Math.random() < animalType.spawnChance) {
+                if(animalType.movementClass === 'ground' && tile.biome.movements.includes('walk')) {
+                  this.animals.push(new Animal(animalType, tile));
+                } else if (animalType.movementClass === 'fly') {
+                  this.animals.push(new Animal(animalType, tile));
+                }
+              }
+            }
+          }
         }
-        console.log(`Spawned ${this.animals.length} animals.`);
-        console.timeEnd('Animal Spawning');
+      }
+      console.log(`Spawned ${this.animals.length} animals and ${this.npcs.length} NPCs.`);
+      console.timeEnd('Entity Spawning');
     }
   }
   class Camera {
@@ -478,56 +708,55 @@ document.addEventListener('DOMContentLoaded', () => {
       this.setDesign();
       requestAnimationFrame(this.loop);
     }
-
+    
     update(currentTime) {
       this.handleMovement(currentTime);
       this.updateVisibility();
       
-      this.world.animals.forEach(animal => {
-          animal.update(currentTime, this.world.map);
-      });
+      this.world.animals.forEach(animal => animal.update(currentTime, this.world.map));
+      this.world.npcs.forEach(npc => npc.update(currentTime, this.world.map));
       
       this.camera.setCamera(this.player.position);
       
       // Update all biome sprites
       for (const key in Biome) {
-          if (Biome[key].sprite) {
-              Biome[key].sprite.update(currentTime);
-          }
+        if (Biome[key].sprite) {
+          Biome[key].sprite.update(currentTime);
+        }
       }
-
+      
       this.world.currentTime.tick();
     }
-
+    
     updateVisibility() {
-        const map = this.world.map;
-        const px = this.player.position.x;
-        const py = this.player.position.y;
-        const radius = VISION_RADIUS;
-        const radiusSq = radius * radius;
-        
-        const viewBox = {
-          minX: Math.max(0, px - radius - 2),
-          maxX: Math.min(map.size - 1, px + radius + 2),
-          minY: Math.max(0, py - radius - 2),
-          maxY: Math.min(map.size - 1, py + radius + 2)
-        };
-
-        for(let y = viewBox.minY; y <= viewBox.maxY; y++) {
-          for(let x = viewBox.minX; x <= viewBox.maxX; x++) {
-            const tile = map.tiles[y][x];
-            if(tile.visibility === 2) tile.visibility = 1;
-
-            const dx = px - x;
-            const dy = py - y;
-            if (dx * dx + dy * dy <= radiusSq) {
-                tile.visibility = 2;
-            }
+      const map = this.world.map;
+      const px = this.player.position.x;
+      const py = this.player.position.y;
+      const radius = VISION_RADIUS;
+      const radiusSq = radius * radius;
+      
+      const viewBox = {
+        minX: Math.max(0, px - radius - 2),
+        maxX: Math.min(map.size - 1, px + radius + 2),
+        minY: Math.max(0, py - radius - 2),
+        maxY: Math.min(map.size - 1, py + radius + 2)
+      };
+      
+      for(let y = viewBox.minY; y <= viewBox.maxY; y++) {
+        for(let x = viewBox.minX; x <= viewBox.maxX; x++) {
+          const tile = map.tiles[y][x];
+          if(tile.visibility === 2) tile.visibility = 1;
+          
+          const dx = px - x;
+          const dy = py - y;
+          if (dx * dx + dy * dy <= radiusSq) {
+            tile.visibility = 2;
           }
         }
+      }
     }
-
-
+    
+    
     setInitial(){
       let spawnX, spawnY;
       do {
@@ -569,47 +798,48 @@ document.addEventListener('DOMContentLoaded', () => {
       ctx.translate(this.camera.x, this.camera.y);
       
       const [startX, endX, startY, endY] = this.getVisibleTileBounds();
-
+      
       for (let y = startY; y < endY; y++) {
-          for (let x = startX; x < endX; x++) {
-               if (this.world.map.tiles[y] && this.world.map.tiles[y][x]) {
-                  this.world.map.tiles[y][x].setDesign(ctx);
-              }
+        for (let x = startX; x < endX; x++) {
+          if (this.world.map.tiles[y] && this.world.map.tiles[y][x]) {
+            this.world.map.tiles[y][x].setDesign(ctx);
           }
+        }
       }
-
+      
       this.world.animals.forEach(animal => animal.setDesign(ctx));
+      this.world.npcs.forEach(npc => npc.setDesign(ctx));
       this.player.setDesign(ctx);
       
       ctx.restore(); 
       ctx.save(); 
       this.world.currentTime.setDesign(ctx);
       ctx.restore(); 
-
+      
     }
     
     getVisibleTileBounds() {
-        const margin = 5; 
-        const viewWidth = canvas.width;
-        const viewHeight = canvas.height;
-
-        const isoToCart = (isoX, isoY) => {
-            const cartX = (isoX / (TILE_WIDTH / 2) + isoY / (TILE_HEIGHT / 2)) / 2;
-            const cartY = (isoY / (TILE_HEIGHT / 2) - isoX / (TILE_WIDTH / 2)) / 2;
-            return { x: Math.floor(cartX), y: Math.floor(cartY) };
-        };
-
-        const topLeft = isoToCart(-this.camera.x, -this.camera.y);
-        const bottomRight = isoToCart(-this.camera.x + viewWidth, -this.camera.y + viewHeight);
-
-        const startX = Math.max(0, topLeft.x - margin);
-        const endX = Math.min(this.world.map.size - 1, bottomRight.x + margin);
-        const startY = Math.max(0, topLeft.y - margin);
-        const endY = Math.min(this.world.map.size - 1, bottomRight.y + margin);
-
-        return [startX, endX, startY, endY];
+      const margin = 5; 
+      const viewWidth = canvas.width;
+      const viewHeight = canvas.height;
+      
+      const isoToCart = (isoX, isoY) => {
+        const cartX = (isoX / (TILE_WIDTH / 2) + isoY / (TILE_HEIGHT / 2)) / 2;
+        const cartY = (isoY / (TILE_HEIGHT / 2) - isoX / (TILE_WIDTH / 2)) / 2;
+        return { x: Math.floor(cartX), y: Math.floor(cartY) };
+      };
+      
+      const topLeft = isoToCart(-this.camera.x, -this.camera.y);
+      const bottomRight = isoToCart(-this.camera.x + viewWidth, -this.camera.y + viewHeight);
+      
+      const startX = Math.max(0, topLeft.x - margin);
+      const endX = Math.min(this.world.map.size - 1, bottomRight.x + margin);
+      const startY = Math.max(0, topLeft.y - margin);
+      const endY = Math.min(this.world.map.size - 1, bottomRight.y + margin);
+      
+      return [startX, endX, startY, endY];
     }
-
+    
     handleMovement(currentTime) {
       if (currentTime - lastMoveTime < 150) return;
       let moved = false;
@@ -618,6 +848,41 @@ document.addEventListener('DOMContentLoaded', () => {
       if (controls.left) { this.player.move(-1, 0,this.world.map); moved = true; }
       if (controls.right) { this.player.move(1, 0,this.world.map); moved = true; }
       if(moved) lastMoveTime = currentTime;
+    }
+        handleInteraction() {
+        if (!controls.interact) return;
+        controls.interact = false; // Consume the action
+
+        const px = this.player.position.x;
+        const py = this.player.position.y;
+        
+        let targetNpc = null;
+        for (const npc of this.world.npcs) {
+            const dx = Math.abs(npc.tile.position.x - px);
+            const dy = Math.abs(npc.tile.position.y - py);
+            if (dx <= 1 && dy <= 1) { // Check adjacent tiles
+                targetNpc = npc;
+                break;
+            }
+        }
+
+        if(targetNpc) {
+            const dialogueData = targetNpc.interact();
+            this.showDialogue(dialogueData.name, dialogueData.text);
+        }
+    }
+    
+    showDialogue(name, text) {
+        const dialogueBox = document.getElementById('dialogue-box');
+        document.getElementById('dialogue-name').textContent = name;
+        document.getElementById('dialogue-text').textContent = text;
+        dialogueBox.classList.remove('hidden');
+        this.isDialogueActive = true;
+    }
+
+    hideDialogue() {
+        document.getElementById('dialogue-box').classList.add('hidden');
+        this.isDialogueActive = false;
     }
   }
   
@@ -644,69 +909,53 @@ document.addEventListener('DOMContentLoaded', () => {
     return "#"+("0"+R.toString(16)).slice(-2)+("0"+G.toString(16)).slice(-2)+("0"+B.toString(16)).slice(-2); 
   }
   
-  function createAnimatedSheet(width, height, frameCount, drawFrameFn) {
-      const sheetCanvas = document.createElement('canvas');
-      sheetCanvas.width = width;
-      sheetCanvas.height = height * frameCount;
-      const sheetCtx = sheetCanvas.getContext('2d');
-      sheetCtx.imageSmoothingEnabled = false; 
-
-      for (let frame = 0; frame < frameCount; frame++) {
-          sheetCtx.save();
-          sheetCtx.translate(0, frame * height);
-          drawFrameFn(sheetCtx, frame, width, height);
-          sheetCtx.restore();
-      }
-      return sheetCanvas;
-  }
-
   function drawGrasslandFrame(ctx, frame, width, height) {
-      const PIXEL_SCALE = 2;
-      const colors = ['#6A994E', '#588142', '#A5A450'];
-
-      ctx.fillStyle = colors[1];
-      ctx.beginPath();
-      ctx.moveTo(width / 2, 0); ctx.lineTo(width, height / 2); ctx.lineTo(width / 2, height); ctx.lineTo(0, height / 2);
-      ctx.closePath();
-      ctx.fill();
-
-      for (let i = 0; i < 150; i++) {
-          const x = Math.random() * width;
-          const y = (Math.random() * height / 2) + height / 4;
-          const dx = Math.abs(x - width / 2);
-          const dy = Math.abs(y - height / 2);
-          if (dx / (width / 2) + dy / (height / 2) > 1) continue;
-
-          const wave = Math.sin(x / 5 + frame * Math.PI / 2) * PIXEL_SCALE;
-          ctx.fillStyle = colors[i % 2];
-          ctx.fillRect(x + wave, y - PIXEL_SCALE, PIXEL_SCALE, PIXEL_SCALE);
-      }
+    const PIXEL_SCALE = 2;
+    const colors = ['#6A994E', '#588142', '#A5A450'];
+    
+    ctx.fillStyle = colors[1];
+    ctx.beginPath();
+    ctx.moveTo(width / 2, 0); ctx.lineTo(width, height / 2); ctx.lineTo(width / 2, height); ctx.lineTo(0, height / 2);
+    ctx.closePath();
+    ctx.fill();
+    
+    for (let i = 0; i < 150; i++) {
+      const x = Math.random() * width;
+      const y = (Math.random() * height / 2) + height / 4;
+      const dx = Math.abs(x - width / 2);
+      const dy = Math.abs(y - height / 2);
+      if (dx / (width / 2) + dy / (height / 2) > 1) continue;
+      
+      const wave = Math.sin(x / 5 + frame * Math.PI / 2) * PIXEL_SCALE;
+      ctx.fillStyle = colors[i % 2];
+      ctx.fillRect(x + wave, y - PIXEL_SCALE, PIXEL_SCALE, PIXEL_SCALE);
+    }
   }
   
   function drawWaterFrame(ctx, frame, width, height) {
-      const colors = ['#5A8AB8', '#4A7AA8', '#97aabdff'];
-      ctx.fillStyle = colors[0];
+    const colors = ['#5A8AB8', '#4A7AA8', '#97aabdff'];
+    ctx.fillStyle = colors[0];
+    ctx.beginPath();
+    ctx.moveTo(width / 2, 0); ctx.lineTo(width, height / 2); ctx.lineTo(width / 2, height); ctx.lineTo(0, height / 2);
+    ctx.closePath();
+    ctx.fill();
+    for (let i = 0; i < 3; i++) {
+      ctx.strokeStyle = colors[1];
+      ctx.lineWidth = 1;
       ctx.beginPath();
-      ctx.moveTo(width / 2, 0); ctx.lineTo(width, height / 2); ctx.lineTo(width / 2, height); ctx.lineTo(0, height / 2);
-      ctx.closePath();
-      ctx.fill();
-      for (let i = 0; i < 3; i++) {
-          ctx.strokeStyle = colors[1];
-          ctx.lineWidth = 1;
-          ctx.beginPath();
-          const startY = (height / 4) * (i + 1);
-          const offset = (frame * 0.2) + i * 2;
-          ctx.moveTo(0, startY + Math.sin(offset) * 2);
-          for (let x = 0; x < width; x++) {
-              const y = startY + Math.sin(x * 0.15 + offset) * 2;
-              if (Math.abs(x - width / 2) / (width / 2) + Math.abs(y - height / 2) / (height / 2) < 1) {
-                   ctx.lineTo(x, y);
-              }
-          }
-          ctx.stroke();
+      const startY = (height / 4) * (i + 1);
+      const offset = (frame * 0.2) + i * 2;
+      ctx.moveTo(0, startY + Math.sin(offset) * 2);
+      for (let x = 0; x < width; x++) {
+        const y = startY + Math.sin(x * 0.15 + offset) * 2;
+        if (Math.abs(x - width / 2) / (width / 2) + Math.abs(y - height / 2) / (height / 2) < 1) {
+          ctx.lineTo(x, y);
+        }
       }
+      ctx.stroke();
+    }
   }
-
+  
   function drawDeepWaterFrame(ctx, frame, width, height) {
     const colors = ['#3D5A80', '#2A4A6D', '#1A202C'];
     ctx.fillStyle = colors[0];
@@ -715,22 +964,22 @@ document.addEventListener('DOMContentLoaded', () => {
     ctx.closePath();
     ctx.fill();
     for (let i = 0; i < 2; i++) {
-        ctx.strokeStyle = colors[1];
-        ctx.lineWidth = 2;
-        ctx.beginPath();
-        const startY = (height / 3) * (i + 1);
-        const offset = (frame * 0.1) + i * 3;
-        ctx.moveTo(0, startY + Math.sin(offset) * 1.5);
-        for (let x = 0; x < width; x++) {
-            const y = startY + Math.sin(x * 0.1 + offset) * 1.5;
-            if (Math.abs(x - width / 2) / (width / 2) + Math.abs(y - height / 2) / (height / 2) < 1) {
-                 ctx.lineTo(x, y);
-            }
+      ctx.strokeStyle = colors[1];
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      const startY = (height / 3) * (i + 1);
+      const offset = (frame * 0.1) + i * 3;
+      ctx.moveTo(0, startY + Math.sin(offset) * 1.5);
+      for (let x = 0; x < width; x++) {
+        const y = startY + Math.sin(x * 0.1 + offset) * 1.5;
+        if (Math.abs(x - width / 2) / (width / 2) + Math.abs(y - height / 2) / (height / 2) < 1) {
+          ctx.lineTo(x, y);
         }
-        ctx.stroke();
+      }
+      ctx.stroke();
     }
   }
-
+  
   function drawMountainFrame(ctx, frame, width, height) {
     const colors = ['#A9A9A9', '#808080', '#696969'];
     ctx.fillStyle = colors[0];
@@ -739,63 +988,102 @@ document.addEventListener('DOMContentLoaded', () => {
     ctx.closePath();
     ctx.fill();
     for (let i = 0; i < 70; i++) {
-        const x = Math.random() * width;
-        const y = Math.random() * height;
-        if (Math.abs(x - width / 2) / (width / 2) + Math.abs(y - height / 2) / (height / 2) > 1) continue;
-        const w = 2 + Math.random() * 4;
-        const h = 2 + Math.random() * 4;
-        ctx.fillStyle = colors[1 + Math.floor(Math.random() * 2)];
-        ctx.fillRect(x - w / 2, y - h / 2, w, h);
+      const x = Math.random() * width;
+      const y = Math.random() * height;
+      if (Math.abs(x - width / 2) / (width / 2) + Math.abs(y - height / 2) / (height / 2) > 1) continue;
+      const w = 2 + Math.random() * 4;
+      const h = 2 + Math.random() * 4;
+      ctx.fillStyle = colors[1 + Math.floor(Math.random() * 2)];
+      ctx.fillRect(x - w / 2, y - h / 2, w, h);
+    }
+  }
+  
+  function drawSwampFrame(ctx, frame, width, height) {
+    const colors = ['#526044', '#36402D', '#6A994E'];
+    ctx.fillStyle = colors[1];
+    ctx.beginPath();
+    ctx.moveTo(width / 2, 0); ctx.lineTo(width, height / 2); ctx.lineTo(width / 2, height); ctx.lineTo(0, height / 2);
+    ctx.closePath();
+    ctx.fill();
+    
+    for (let i = 0; i < 3; i++) {
+      ctx.strokeStyle = colors[0];
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      const startY = (height / 4) * (i + 1);
+      const offset = (frame * 0.05) + i * 2.5;
+      ctx.moveTo(0, startY + Math.sin(offset) * 1);
+      for (let x = 0; x < width; x++) {
+        const y = startY + Math.sin(x * 0.1 + offset) * 1;
+        if (Math.abs(x - width / 2) / (width / 2) + Math.abs(y - height / 2) / (height / 2) < 1) {
+          ctx.lineTo(x, y);
+        }
+      }
+      ctx.stroke();
+    }
+  }
+  
+  function drawBeachFrame(ctx, frame, width, height) {
+    const colors = ['#E9D9A1', '#D4C092', '#FFFFFF'];
+    ctx.fillStyle = colors[0];
+    ctx.beginPath();
+    ctx.moveTo(width / 2, 0); ctx.lineTo(width, height / 2); ctx.lineTo(width / 2, height); ctx.lineTo(0, height / 2);
+    ctx.closePath();
+    ctx.fill();
+    
+    for (let i = 0; i < 10; i++) {
+      const x = Math.random() * width;
+      const y = Math.random() * height;
+      if (Math.abs(x - width / 2) / (width / 2) + Math.abs(y - height / 2) / (height / 2) > 0.9) continue;
+      ctx.fillStyle = colors[2];
+      ctx.fillRect(x, y, 1, 1);
     }
   }
-
-
   function loadSvgAsImage(gElement) {
     return new Promise((resolve, reject) => {
-        if (!gElement) return reject(new Error("SVG <g> element not found."));
-        const viewBox = gElement.getAttribute('viewBox') || '0 0 100 100';
-        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.setAttribute('viewBox', viewBox);
-        const defs = document.querySelector('svg > defs');
-        if (defs) svg.appendChild(defs.cloneNode(true));
-        svg.appendChild(gElement.cloneNode(true));
-        const svgString = new XMLSerializer().serializeToString(svg);
-        const url = URL.createObjectURL(new Blob([svgString], { type: "image/svg+xml;charset=utf-8" }));
-        const img = new Image();
-        img.onload = () => { URL.revokeObjectURL(url); resolve(img); };
-        img.onerror = (err) => { URL.revokeObjectURL(url); reject(err); };
-        img.src = url;
+      if (!gElement) return reject(new Error("SVG <g> element not found."));
+      const viewBox = gElement.getAttribute('viewBox') || '0 0 100 100';
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      svg.setAttribute('viewBox', viewBox);
+      const defs = document.querySelector('svg > defs');
+      if (defs) svg.appendChild(defs.cloneNode(true));
+      svg.appendChild(gElement.cloneNode(true));
+      const svgString = new XMLSerializer().serializeToString(svg);
+      const url = URL.createObjectURL(new Blob([svgString], { type: "image/svg+xml;charset=utf-8" }));
+      const img = new Image();
+      img.onload = () => { URL.revokeObjectURL(url); resolve(img); };
+      img.onerror = (err) => { URL.revokeObjectURL(url); reject(err); };
+      img.src = url;
     });
   }
-
+  
   
   async function initializeGame() {
     canvas.width = canvas.parentElement.clientWidth;
     canvas.height = canvas.parentElement.clientHeight;
     
     try {
-        Biome.GRASSLAND.sprite = new Sprite(createAnimatedSheet(TILE_WIDTH, TILE_HEIGHT, 4, drawGrasslandFrame), TILE_WIDTH, TILE_HEIGHT, 4, 200);
-        Biome.WATER_SHALLOW.sprite = new Sprite(createAnimatedSheet(TILE_WIDTH, TILE_HEIGHT, 6, drawWaterFrame), TILE_WIDTH, TILE_HEIGHT, 6, 150);
-        Biome.WATER_DEEP.sprite = new Sprite(createAnimatedSheet(TILE_WIDTH, TILE_HEIGHT, 8, drawDeepWaterFrame), TILE_WIDTH, TILE_HEIGHT, 8, 250);
-        Biome.MOUNTAIN.sprite = new Sprite(createAnimatedSheet(TILE_WIDTH, TILE_HEIGHT, 1, drawMountainFrame), TILE_WIDTH, TILE_HEIGHT, 1, 9999);
-
-
-        const assetIds = ['forest-svg', 'village-svg', 'city-svg', 'player-svg', 'enchanted-forest-svg', 'swamp-svg', 'wolf-pack-svg', 'boar-svg'];
+      for (const key in Biome) {
+        if (Biome[key].design)  { Biome[key].sprite = new Sprite(Biome[key]);}
+      }
+      
+        const assetIds = ['forest-svg', 'village-svg', 'city-svg', 'player-svg', 'enchanted-forest-svg', 'swamp-svg', 'wolf-pack-svg', 'boar-svg', 'bird-svg', 'farm-svg', 'camp-svg', 'npc-svg','house-svg','cult-svg','market-svg','mine-svg'];
         const assetElements = assetIds.map(id => document.getElementById(id));
 
-        [forestSVG, villageSVG, citySVG, playerSVG, enchantedForestSVG, swampSVG, wolfPackSVG, boarSVG] = await Promise.all(
+        [forestSVG, villageSVG, citySVG, playerSVG, enchantedForestSVG, swampSVG, wolfPackSVG, boarSVG, birdSVG, farmSVG, campSVG, npcSVG,houseSVG,cultSVG,marketSVG,mineSVG] = await Promise.all(
             assetElements.map(el => loadSvgAsImage(el))
         );
         
-        console.log("All assets loaded.");
-
-        let session = new Session();
-        loadingScreen.style.display = 'none';
-        session.loop();
-
+      
+      console.log("All assets loaded.");
+      
+      let session = new Session();
+      loadingScreen.style.display = 'none';
+      session.loop();
+      
     } catch (error) {
-        console.error("Failed to load assets:", error);
-        loadingScreen.innerHTML = "Error loading assets. Please refresh.";
+      console.error("Failed to load assets:", error);
+      loadingScreen.innerHTML = "Error loading assets. Please refresh.";
     }
   }
   
