Improve WhackAMole clickable area - click entire hole not just text

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

@@ -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));
         });
     }
 

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