From de3267c21d058bcae876d37911ade82788c1871f Mon Sep 17 00:00:00 2001
From: StillHammer <alexistrouve.pro@gmail.com>
Date: Mon, 13 Oct 2025 15:34:23 +0800
Subject: [PATCH] Improve WhackAMole clickable area - click entire hole not
 just text
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Issue: Players found it difficult to click precisely on the mole text,
especially on mobile or with fast-paced gameplay.

Fix:
- Changed click event from hole.mole (text only) to hole.element (entire hole circle)
- Makes the entire circular hole clickable, not just the word
- Much easier to target, especially on small screens
- Applied to both WhackAMole and WhackAMoleHard

Changes:
- src/games/WhackAMole.js:719 - Click on hole.element instead of hole.mole
- src/games/WhackAMoleHard.js:862 - Click on hole.element instead of hole.mole

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/games/WhackAMole.js     |  5 +++--
 src/games/WhackAMoleHard.js | 24 +++++++++++++++---------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/games/WhackAMole.js b/src/games/WhackAMole.js
index 675530c..2aadb7d 100644
--- a/src/games/WhackAMole.js
+++ b/src/games/WhackAMole.js
@@ -713,9 +713,10 @@ class WhackAMole extends Module {
             });
         }
 
-        // Mole clicks
+        // Mole clicks - click on hole OR mole text
         this._holes.forEach((hole, index) => {
-            hole.mole.addEventListener('click', () => this._hitMole(index));
+            // Click on the entire hole (easier to target)
+            hole.element.addEventListener('click', () => this._hitMole(index));
         });
     }
 
diff --git a/src/games/WhackAMoleHard.js b/src/games/WhackAMoleHard.js
index 30938f7..d8fc11b 100644
--- a/src/games/WhackAMoleHard.js
+++ b/src/games/WhackAMoleHard.js
@@ -11,13 +11,18 @@ import Module from '../core/Module.js';
  */
 class WhackAMoleHard extends Module {
     constructor(name, dependencies, config = {}) {
-        super(name, ['eventBus']);
+        super(name || 'whack-a-mole-hard', ['eventBus']);
 
         // Validate dependencies
         if (!dependencies.eventBus) {
             throw new Error('WhackAMoleHard requires EventBus dependency');
         }
 
+        // Ensure name is always defined
+        if (!this.name) {
+            this.name = 'whack-a-mole-hard';
+        }
+
         this._eventBus = dependencies.eventBus;
         this._content = dependencies.content;
         this._config = {
@@ -851,9 +856,10 @@ class WhackAMoleHard extends Module {
         this._container.querySelector('#pause-btn').addEventListener('click', () => this._pause());
         this._container.querySelector('#restart-btn').addEventListener('click', () => this._restart());
 
-        // Mole clicks
+        // Mole clicks - click on hole OR mole text
         this._holes.forEach((hole, index) => {
-            hole.mole.addEventListener('click', () => this._hitMole(index));
+            // Click on the entire hole (easier to target)
+            hole.element.addEventListener('click', () => this._hitMole(index));
         });
     }
 
@@ -879,7 +885,7 @@ class WhackAMoleHard extends Module {
             mode: this._gameMode,
             vocabulary: this._vocabulary.length,
             difficulty: 'hard'
-        });
+        }, this.name);
     }
 
     _pause() {
@@ -894,7 +900,7 @@ class WhackAMoleHard extends Module {
 
         this._showFeedback('Game paused', 'info');
 
-        this._eventBus.emit('whack-hard:game-paused', { score: this._score });
+        this._eventBus.emit('whack-hard:game-paused', { score: this._score }, this.name);
     }
 
     _restart() {
@@ -1128,7 +1134,7 @@ class WhackAMoleHard extends Module {
             this._eventBus.emit('whack-hard:correct-hit', {
                 word: hole.word,
                 score: this._score
-            });
+            }, this.name);
 
         } else {
             // Wrong answer
@@ -1141,7 +1147,7 @@ class WhackAMoleHard extends Module {
                 expected: this._targetWord,
                 actual: hole.word,
                 errors: this._errors
-            });
+            }, this.name);
         }
 
         this._updateUI();
@@ -1177,7 +1183,7 @@ class WhackAMoleHard extends Module {
 
         this._container.querySelector('#target-word').textContent = this._targetWord.translation;
 
-        this._eventBus.emit('whack-hard:new-target', { target: this._targetWord });
+        this._eventBus.emit('whack-hard:new-target', { target: this._targetWord }, this.name);
     }
 
     _getRandomWord() {
@@ -1397,7 +1403,7 @@ class WhackAMoleHard extends Module {
             errors: this._errors,
             timeLeft: this._timeLeft,
             mode: this._gameMode
-        });
+        }, this.name);
     }
 
     // Event handlers