Cette 3 powerfull spells that cost mana to be cast and create button to use them - Follow Up Deployment

index.html

@@ -89,6 +89,12 @@
       box-shadow: 0 0 10px var(--enemy-color);
       position: relative;
     }
+    
+    .boss-cell {
+      background-color: #d64045;
+      box-shadow: 0 0 15px #ff0000;
+      animation: pulse 0.5s infinite;
+    }
     .enemy::before {
       content: attr(data-emoji);
       position: absolute;
@@ -376,6 +382,21 @@
           </div>
         </div>
         
+        <div class="bg-gray-800 p-4 rounded-lg mb-4">
+          <h2 class="text-xl font-bold mb-2 text-yellow-400">Spells</h2>
+          <div class="grid grid-cols-3 gap-2 mb-4">
+            <button id="fireballBtn" class="px-2 py-1 bg-red-800 hover:bg-red-700 rounded flex items-center justify-center">
+              <i class="fas fa-fire mr-1"></i>Fireball (15 MP)
+            </button>
+            <button id="healBtn" class="px-2 py-1 bg-green-800 hover:bg-green-700 rounded flex items-center justify-center">
+              <i class="fas fa-heart mr-1"></i>Heal (20 MP)
+            </button>
+            <button id="lightningBtn" class="px-2 py-1 bg-blue-800 hover:bg-blue-700 rounded flex items-center justify-center">
+              <i class="fas fa-bolt mr-1"></i>Lightning (25 MP)
+            </button>
+          </div>
+        </div>
+        
         <div class="bg-gray-800 p-4 rounded-lg">
           <h2 class="text-xl font-bold mb-2 text-yellow-400">Game Log</h2>
           <div id="gameLog" class="h-32 overflow-y-auto text-sm bg-gray-900 p-2 rounded">
@@ -512,7 +533,11 @@
       { name: "Dragonnet", minLevel: 6, health: 40, damage: 9.5, xp: 50, emoji: "🐉" },
       { name: "Wyvern", minLevel: 7, health: 50, damage: 11.5, xp: 60, emoji: "🦅" },
       { name: "Dragon", minLevel: 8, health: 70, damage: 14.5, xp: 80, emoji: "🐲" },
-      { name: "Beholder", minLevel: 9, health: 100, damage: 19.5, xp: 100, emoji: "👁️" }
+      { name: "Beholder", minLevel: 9, health: 100, damage: 19.5, xp: 100, emoji: "👁️" },
+      // Boss types (stats réduites)
+      { name: "Roi Squelette", minLevel: 4, health: 40, damage: 5, xp: 100, emoji: "💀👑", boss: true },
+      { name: "Dragon Ancien", minLevel: 8, health: 90, damage: 12, xp: 200, emoji: "🐉🔥", boss: true },
+      { name: "Seigneur des Ténèbres", minLevel: 12, health: 150, damage: 20, xp: 300, emoji: "👹🌑", boss: true }
     ];
 
     let player = { 
@@ -618,7 +643,46 @@
       dungeon[player.y][player.x] = 'player';
       
       // Add enemies in rooms (avoid first room)
-      for (let i = 0; i < 5 + player.level; i++) {
+      const enemyCount = 5 + player.level;
+      
+      // Add a boss every 4 levels
+      if (player.level % 4 === 0) {
+        const possibleBosses = enemyTypes.filter(e => e.boss && e.minLevel <= player.level);
+        if (possibleBosses.length > 0) {
+          const bossType = possibleBosses[Math.floor(Math.random() * possibleBosses.length)];
+          const bossRoom = rooms[rooms.length - 1]; // Boss in last room
+          
+          // Boss occupies 2x2 space
+          const x = bossRoom.x + Math.floor(bossRoom.width / 2) - 1;
+          const y = bossRoom.y + Math.floor(bossRoom.height / 2) - 1;
+          
+          enemies.push({
+            x, y,
+            name: bossType.name,
+            emoji: bossType.emoji,
+            health: bossType.health * (1 + (player.level / 4)),
+            damage: bossType.damage * (1 + (player.level / 8)),
+            xp: bossType.xp * (1 + (player.level / 4)),
+            isBoss: true,
+            width: 2,
+            height: 2
+          });
+          
+          // Mark boss cells
+          for (let dy = 0; dy < 2; dy++) {
+            for (let dx = 0; dx < 2; dx++) {
+              if (y + dy < SIZE && x + dx < SIZE) {
+                dungeon[y + dy][x + dx] = 'enemy';
+              }
+            }
+          }
+          
+          addLogMessage(`A powerful ${bossType.name} awaits in the depths!`, 'red');
+        }
+      }
+      
+      // Add regular enemies
+      for (let i = 0; i < enemyCount; i++) {
         let room;
         do {
           room = rooms[Math.floor(Math.random() * rooms.length)];
@@ -627,20 +691,25 @@
         const x = room.x + 1 + Math.floor(Math.random() * (room.width - 2));
         const y = room.y + 1 + Math.floor(Math.random() * (room.height - 2));
         
-        // Get possible enemies for current level
-        const possibleEnemies = enemyTypes.filter(e => e.minLevel <= player.level);
-        const enemyType = possibleEnemies[Math.floor(Math.random() * possibleEnemies.length)];
-        
-        enemies.push({ 
-          x, 
-          y, 
-          name: enemyType.name,
-          emoji: enemyType.emoji,
-          health: enemyType.health * (1 + player.level * 0.2),
-          damage: enemyType.damage * (1 + player.level * 0.1),
-          xp: enemyType.xp * (1 + player.level * 0.1)
-        });
-        dungeon[y][x] = 'enemy';
+        // Get possible enemies for current level (excluding bosses)
+        const possibleEnemies = enemyTypes.filter(e => !e.boss && e.minLevel <= player.level);
+        if (possibleEnemies.length > 0) {
+          const enemyType = possibleEnemies[Math.floor(Math.random() * possibleEnemies.length)];
+          
+          enemies.push({ 
+            x, 
+            y, 
+            name: enemyType.name,
+            emoji: enemyType.emoji,
+            health: enemyType.health * (1 + player.level * 0.2),
+            damage: enemyType.damage * (1 + player.level * 0.1),
+            xp: enemyType.xp * (1 + player.level * 0.1),
+            isBoss: false,
+            width: 1,
+            height: 1
+          });
+          dungeon[y][x] = 'enemy';
+        }
       }
       
       // Add items in rooms
@@ -696,9 +765,18 @@
           if (isVisible || (x === player.x && y === player.y)) {
             div.classList.add('cell', dungeon[y][x]);
             if (dungeon[y][x] === 'enemy') {
-              const enemy = enemies.find(e => e.x === x && e.y === y);
+              const enemy = enemies.find(e => 
+                x >= e.x && x < e.x + (e.width || 1) && 
+                y >= e.y && y < e.y + (e.height || 1)
+              );
               if (enemy) {
-                div.setAttribute('data-emoji', enemy.emoji);
+                // Only show emoji on first cell of boss
+                if ((!enemy.isBoss) || (x === enemy.x && y === enemy.y)) {
+                  div.setAttribute('data-emoji', enemy.emoji);
+                }
+                if (enemy.isBoss) {
+                  div.classList.add('boss-cell');
+                }
               }
             }
           } else {
@@ -710,6 +788,51 @@
       }
     }
 
+    function renderInventory() {
+      const inventoryEl = document.getElementById('inventory');
+      inventoryEl.innerHTML = '';
+      
+      player.inventory.forEach((item, index) => {
+        const itemEl = document.createElement('div');
+        itemEl.className = `bg-gray-700 p-2 rounded text-center tooltip cursor-pointer hover:bg-gray-600`;
+        itemEl.innerHTML = `
+          <i class="fas ${item.icon} text-${item.color || 'gray-400'}"></i>
+          <span class="tooltip-text">${item.name}${item.damage ? ` (${item.damage} damage)` : ''}${item.defense ? ` (${item.defense} defense)` : ''}${item.heal ? ` (Heals ${item.heal} HP)` : ''}${item.restore ? ` (Restores ${item.restore} MP)` : ''}</span>
+        `;
+        
+        itemEl.addEventListener('click', () => useItem(index));
+        inventoryEl.appendChild(itemEl);
+      });
+    }
+
+    function useItem(index) {
+      const item = player.inventory[index];
+      
+      if (item.heal) {
+        player.health = Math.min(player.maxHealth, player.health + item.heal);
+        addLogMessage(`Used ${item.name}! +${item.heal} HP`, 'green');
+        player.inventory.splice(index, 1);
+      } 
+      else if (item.restore) {
+        player.mana = Math.min(player.maxMana, player.mana + item.restore);
+        addLogMessage(`Used ${item.name}! +${item.restore} MP`, 'blue');
+        player.inventory.splice(index, 1);
+      }
+      else if (item.damage) {
+        player.attack += item.damage;
+        addLogMessage(`Equipped ${item.name}! +${item.damage} attack`, 'yellow');
+        player.inventory.splice(index, 1);
+      }
+      else if (item.defense) {
+        player.defense += item.defense;
+        addLogMessage(`Equipped ${item.name}! +${item.defense} defense`, 'purple');
+        player.inventory.splice(index, 1);
+      }
+      
+      updateStats();
+      renderInventory();
+    }
+
     function updateStats() {
       healthEl.textContent = `${player.health}/${player.maxHealth}`;
       manaEl.textContent = `${player.mana}/${player.maxMana}`;
@@ -765,7 +888,11 @@
           const enemy = enemies[enemyIndex];
           
           // Player attacks enemy
-          const playerDamage = Math.max(1, player.attack - Math.floor(enemy.damage / 2));
+          let playerDamage = Math.max(1, player.attack - Math.floor(enemy.damage / 2));
+          // Bosses take reduced damage
+          if (enemy.isBoss) {
+            playerDamage = Math.max(1, Math.floor(playerDamage * 0.7));
+          }
           enemy.health -= playerDamage;
           addLogMessage(`You hit the ${enemy.name} for ${playerDamage} damage!`, 'yellow');
           
@@ -797,6 +924,13 @@
             if (player.xp >= player.level * 100) {
               levelUp();
             }
+            
+            // If boss was defeated, advance to next level
+            if (enemy.isBoss) {
+              player.level++;
+              addLogMessage(`You defeated the boss! Moving to level ${player.level}`, 'purple');
+              initGame();
+            }
           }
           
           updateStats();
@@ -842,10 +976,21 @@
         }
       }
       else if (targetCell === 'exit') {
-        // Advance to next level
-        player.level++;
-        addLogMessage(`You found the exit! Moving to level ${player.level}`, 'purple');
-        showLevelComplete();
+        // Check if boss was defeated before allowing exit
+        const bossDefeated = !enemies.some(e => e.isBoss);
+        if (bossDefeated) {
+          // Advance to next level
+          const nextLevel = player.level + 1;
+          if (nextLevel <= 20) { // Maximum dungeon level
+            player.level = nextLevel;
+            addLogMessage(`You found the exit! Moving to level ${player.level}`, 'purple');
+            showLevelComplete();
+          } else {
+            addLogMessage("You need to complete previous levels first!", 'red');
+          }
+        } else {
+          addLogMessage("You must defeat the boss before using the exit!", 'red');
+        }
       }
       
       // Check if player died from this attack
@@ -878,9 +1023,12 @@
     });
 
     function initGame() {
+      // Ensure level is at least 1
+      player.level = Math.max(1, player.level);
       generateDungeon();
       renderDungeon();
       updateStats();
+      renderInventory();
       addLogMessage(`Entering dungeon level ${player.level}...`, 'yellow');
     }
 
@@ -894,7 +1042,7 @@
         mana: 50, 
         maxMana: 50,
         xp: 0,
-        level: 1,
+        level: 1, // Always start at level 1
         attack: 5,
         defense: 3,
         inventory: [
@@ -957,12 +1105,111 @@
     moveLeft.addEventListener('click', () => movePlayer(-1, 0));
     moveRight.addEventListener('click', () => movePlayer(1, 0));
 
+    function castFireball() {
+      if (player.mana < 15) {
+        addLogMessage("Not enough mana for Fireball!", "red");
+        return;
+      }
+      
+      player.mana -= 15;
+      const damage = 15 + player.level * 2;
+      
+      // Find all enemies in range (3 cells)
+      const inRange = enemies.filter(e => {
+        const dx = Math.abs(e.x - player.x);
+        const dy = Math.abs(e.y - player.y);
+        return dx <= 3 && dy <= 3;
+      });
+      
+      if (inRange.length === 0) {
+        addLogMessage("Fireball fizzles - no enemies in range!", "red");
+        return;
+      }
+      
+      inRange.forEach(enemy => {
+        enemy.health -= damage;
+        addLogMessage(`Fireball hits ${enemy.name} for ${damage} damage!`, "orange");
+        
+        if (enemy.health <= 0) {
+          addLogMessage(`${enemy.name} was incinerated! +${Math.floor(enemy.xp)} XP`, "green");
+          player.xp += enemy.xp;
+          enemies.splice(enemies.indexOf(enemy), 1);
+          dungeon[enemy.y][enemy.x] = 'floor';
+        }
+      });
+      
+      updateStats();
+      renderDungeon();
+    }
+
+    function castHeal() {
+      if (player.mana < 20) {
+        addLogMessage("Not enough mana for Heal!", "red");
+        return;
+      }
+      
+      player.mana -= 20;
+      const healAmount = 30 + player.level * 3;
+      player.health = Math.min(player.maxHealth, player.health + healAmount);
+      addLogMessage(`Healing magic restores ${healAmount} HP!`, "green");
+      
+      updateStats();
+    }
+
+    function castLightning() {
+      if (player.mana < 25) {
+        addLogMessage("Not enough mana for Lightning!", "red");
+        return;
+      }
+      
+      player.mana -= 25;
+      
+      // Find closest enemy
+      let closestEnemy = null;
+      let minDist = Infinity;
+      
+      enemies.forEach(enemy => {
+        const dx = Math.abs(enemy.x - player.x);
+        const dy = Math.abs(enemy.y - player.y);
+        const dist = dx + dy;
+        
+        if (dist < minDist) {
+          minDist = dist;
+          closestEnemy = enemy;
+        }
+      });
+      
+      if (!closestEnemy) {
+        addLogMessage("Lightning fizzles - no enemies found!", "red");
+        return;
+      }
+      
+      const damage = 30 + player.level * 3;
+      closestEnemy.health -= damage;
+      addLogMessage(`Lightning strikes ${closestEnemy.name} for ${damage} damage!`, "yellow");
+      
+      if (closestEnemy.health <= 0) {
+        addLogMessage(`${closestEnemy.name} was electrocuted! +${Math.floor(closestEnemy.xp)} XP`, "green");
+        player.xp += closestEnemy.xp;
+        enemies.splice(enemies.indexOf(closestEnemy), 1);
+        dungeon[closestEnemy.y][closestEnemy.x] = 'floor';
+      }
+      
+      updateStats();
+      renderDungeon();
+    }
+
     function gameOver() {
       deathLevelEl.textContent = player.level;
       gameOverModal.style.display = 'flex';
       addLogMessage("You have died! Game over.", 'red');
     }
 
+    // Spell buttons
+    document.getElementById('fireballBtn').addEventListener('click', castFireball);
+    document.getElementById('healBtn').addEventListener('click', castHeal);
+    document.getElementById('lightningBtn').addEventListener('click', castLightning);
+
     restartGame.addEventListener('click', () => {
       gameOverModal.style.display = 'none';
       document.getElementById('newGame').click(); // Trigger new game