1 files changed, 50 insertions, 1 deletions
diff --git a/html/broughlike/index.html b/html/broughlike/index.html
index cb1326c..cebc5cf 100644
--- a/html/broughlike/index.html
+++ b/html/broughlike/index.html
@@ -20,10 +20,41 @@
             margin: 0 auto;
             background-color: #f0f0f0;
         }
+        @keyframes shake {
+            0% { transform: translate(0.5px, 0.5px) rotate(0deg); }
+            10% { transform: translate(-0.5px, -1px) rotate(-0.5deg); }
+            20% { transform: translate(-1.5px, 0px) rotate(0.5deg); }
+            30% { transform: translate(1.5px, 1px) rotate(0deg); }
+            40% { transform: translate(0.5px, -0.5px) rotate(0.5deg); }
+            50% { transform: translate(-0.5px, 1px) rotate(-0.5deg); }
+            60% { transform: translate(-1.5px, 0.5px) rotate(0deg); }
+            70% { transform: translate(1.5px, 0.5px) rotate(-0.5deg); }
+            80% { transform: translate(-0.5px, -0.5px) rotate(0.5deg); }
+            90% { transform: translate(0.5px, 1px) rotate(0deg); }
+            100% { transform: translate(0.5px, -1px) rotate(-0.5deg); }
+        }
+        .shake {
+            animation: shake 0.5s;
+            animation-iteration-count: 1;
+        }
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 0.5em;
+            background-color: #f0f0f0;
+        }
+        .toggleShake {
+            padding: 0.75em;
+            margin: 0.5em;
+        }
     </style>
 </head>
 <body>
-    <p><a href="about.html">About</a></p>
+    <div class="header">
+        <p><a href="about.html">About</a></p>
+        <button class="toggleShake" id="toggleShake" onclick="toggleShake()">Turn Shake Off</button>
+    </div>
     <canvas id="gameCanvas"></canvas>
     <script>
 
@@ -441,6 +472,20 @@
             return [];
         }
 
+        let combatAnimationEnabled = true;
+        function toggleShake() {
+            combatAnimationEnabled = !combatAnimationEnabled;
+            document.getElementById('toggleShake').textContent = combatAnimationEnabled ? 'Turn Shake Off' : 'Turn Shake On';
+        }
+
+        function combatAnimation() {
+            const canvas = document.getElementById('gameCanvas');
+            canvas.classList.add('shake');
+            canvas.addEventListener('animationend', () => {
+                canvas.classList.remove('shake');
+            }, { once: true });
+        }
+
         function handleDamage(player, enemy) {
             const enemyMisses = Math.random() < 0.5; // 50% chance the enemy misses you
             const cellX = player.x;
@@ -460,6 +505,10 @@
             addCombatDots(cellX, cellY, COLORS.combatDotEnemy); // Add dots for enemy damage
             console.log("Player hit! Enemy health: " + enemy.health);
 
+            if (combatAnimationEnabled) {
+                combatAnimation(); // Trigger the shake animation
+            }
+
             if (enemy.health <= 0) {
                 player.killCount++;
                 enemies = enemies.filter(e => e !== enemy);