1 files changed, 20 insertions, 5 deletions
diff --git a/html/broughlike/index.html b/html/broughlike/index.html
index 9afeb07..ef547e7 100644
--- a/html/broughlike/index.html
+++ b/html/broughlike/index.html
@@ -227,18 +227,33 @@
             });
         }
 
+        function drawCharacterBorder(x, y, radius, damageTaken) {
+            const dashLength = 5;
+            const gapLength = Math.max(1, damageTaken * 2); // More damage, larger gaps
+
+            ctx.lineWidth = 2;
+            ctx.strokeStyle = '#2d2d2d';
+            ctx.setLineDash([dashLength, gapLength]);
+            ctx.beginPath();
+            ctx.arc(x, y, radius, 0, 2 * Math.PI);
+            ctx.stroke();
+            ctx.setLineDash([]); // Reset to a solid line
+        }
+
         function drawEnemies() {
             enemies.forEach(enemy => {
                 const x = enemy.x * tileSize + tileSize / 2;
                 const y = enemy.y * tileSize + tileSize / 2;
                 const opacity = enemy.health / MAX_ENEMY_HEALTH; // Opacity based on health
+                const radius = tileSize / 3;
+                const damageTaken = MAX_ENEMY_HEALTH - enemy.health;
+
                 ctx.beginPath();
-                ctx.arc(x, y, tileSize / 3, 0, 2 * Math.PI);
+                ctx.arc(x, y, radius, 0, 2 * Math.PI);
                 ctx.fillStyle = `${COLORS.enemy}${opacity})`;
                 ctx.fill();
-                ctx.lineWidth = 2;
-                ctx.strokeStyle = '#2d2d2d';
-                ctx.stroke();
+
+                drawCharacterBorder(x, y, radius, damageTaken);
             });
         }
 
@@ -375,7 +390,7 @@
                 player.totalDamageTaken++;
                 addCombatDots(cellX, cellY, COLORS.combatDotPlayer); // Add dots for player damage
                 console.log("Enemy hit! Player health: " + player.health);
-            } else {
+            } else {                
                 console.log("Enemy missed!");
             }