From 9286b2819213f6b3f00dd05736ce0ac7e8e4a1fb Mon Sep 17 00:00:00 2001
From: Pierre Wessman <4029607+pierrewessman@users.noreply.github.com>
Date: Fri, 19 Sep 2025 11:07:50 +0200
Subject: [PATCH] Make hit effect size configurable and adjust visual styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add size parameter to drawHitEffect() with proportional inner/outer radii
- Reduce hit effect duration from 500ms to 200ms for faster animation
- Change hit effect color to semi-transparent black and reduce size to 10

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/engine/game-engine.js |  2 +-
 src/systems/renderer.js   | 15 +++++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/engine/game-engine.js b/src/engine/game-engine.js
index e3f7d2e..bc3bd20 100644
--- a/src/engine/game-engine.js
+++ b/src/engine/game-engine.js
@@ -220,7 +220,7 @@ class GameEngine {
             this.addEffect({
                 type: 'hit',
                 position: player1.position.lerp(player2.position, 0.5),
-                duration: 500,
+                duration: 200,
                 startTime: Date.now()
             });
         }
diff --git a/src/systems/renderer.js b/src/systems/renderer.js
index c6b052e..321a314 100644
--- a/src/systems/renderer.js
+++ b/src/systems/renderer.js
@@ -214,7 +214,7 @@ class Renderer {
                 this.drawGoalEffect(position);
                 break;
             case 'hit':
-                this.drawHitEffect(position, color);
+                this.drawHitEffect(position, '#00000038', 10);
                 break;
             case 'save':
                 this.drawSaveEffect(position);
@@ -241,16 +241,19 @@ class Renderer {
         }
     }
 
-    drawHitEffect(position, color) {
+    drawHitEffect(position, color, size = 25) {
         this.ctx.strokeStyle = color;
         this.ctx.lineWidth = 4;
 
+        const innerRadius = size * 0.4;
+        const outerRadius = size;
+
         for (let i = 0; i < 6; i++) {
             const angle = (i / 6) * Math.PI * 2;
-            const startX = position.x + Math.cos(angle) * 10;
-            const startY = position.y + Math.sin(angle) * 10;
-            const endX = position.x + Math.cos(angle) * 25;
-            const endY = position.y + Math.sin(angle) * 25;
+            const startX = position.x + Math.cos(angle) * innerRadius;
+            const startY = position.y + Math.sin(angle) * innerRadius;
+            const endX = position.x + Math.cos(angle) * outerRadius;
+            const endY = position.y + Math.sin(angle) * outerRadius;
 
             this.ctx.beginPath();
             this.ctx.moveTo(startX, startY);