zeroed-some/bashamole / 26c8702

Browse files

fix mole animation firing late

Authored by mfwolffe <wolffemf@dukes.jmu.edu>
SHA
26c8702a73ab9c9363681e302122c8e1583d9d78
Parents
cfbe36b
Tree
a3747a3

1 changed file

StatusFile+-
M frontend/src/components/Game.tsx 21 19
frontend/src/components/Game.tsxmodified
@@ -54,32 +54,34 @@ const Game: React.FC = () => {
5454
   const handleMoleKilled = useCallback((response: CommandResponse) => {
5555
     if (!gameState.tree) return;
5656
57
-    // First, show the killed mole briefly
58
-    updateTreeData((tree) =>
57
+    // First, show the killed mole at the player's current location (where it was killed)
58
+    updateTreeData((tree) =>
5959
       updateTreeDataToShowMole(tree, gameState.tree!.player_location)
6060
     );
61
-
62
-    // Trigger falling animation
61
+
62
+    // Trigger falling animation on the current mole
6363
     setMoleKilled(true);
64
-
65
-    // After animation, update tree with new mole location
64
+
65
+    // After animation completes, remove old mole and show new mole
6666
     setTimeout(() => {
6767
       setMoleKilled(false);
68
-
69
-      // Update tree to show new mole location
68
+
69
+      // Now update tree to remove old mole and show new mole location
7070
       if (response.new_mole_location) {
7171
         updateTreeData((tree) => {
72
+          // First remove all moles from the tree
7273
           const cleanTree = removeMoleFromTree(tree);
74
+          // Then add the new mole at its new location
7375
           return updateTreeDataToShowMole(cleanTree, response.new_mole_location!);
7476
         });
7577
       }
76
-
78
+
7779
       // Set new mole direction
7880
       if (response.mole_direction) {
7981
         setMoleDirection(response.mole_direction);
8082
       }
81
-    }, 1500); // Wait for falling animation
82
-
83
+    }, 1500); // Wait for falling animation to complete
84
+
8385
     // Update score and moles killed
8486
     if (response.score !== undefined && response.moles_killed !== undefined) {
8587
       updateScore(response.score, response.moles_killed);
@@ -122,7 +124,7 @@ const Game: React.FC = () => {
122124
     const startLocation = response.tree.player_location;
123125
     const homeDir = response.home_directory || '/home';
124126
     let locationContext = '';
125
-
127
+
126128
     if (startLocation.startsWith('/home')) {
127129
       locationContext = "You've been dropped in someone's home directory. ";
128130
     } else if (startLocation.startsWith('/usr')) {
@@ -134,13 +136,13 @@ const Game: React.FC = () => {
134136
     } else {
135137
       locationContext = "You've been placed somewhere in the filesystem. ";
136138
     }
137
-
139
+
138140
     // Add timer info to starting message
139141
     let timerInfo = '';
140142
     if (response.initial_timer && response.timer_reason) {
141143
       timerInfo = `\nTimer: ${response.initial_timer}s (mole is ${response.timer_reason})`;
142144
     }
143
-
145
+
144146
     addToHistory({
145147
       command: 'Hunt started!',
146148
       output: `${response.mole_hint}\n${locationContext}Your home directory is ${homeDir}.\nUse 'pwd' to see where you are, 'cd ~' to go home.${timerInfo}\nType "help" for available commands.`,
@@ -157,19 +159,19 @@ const Game: React.FC = () => {
157159
       if (response.mole_escaped) {
158160
         // Build the escape message
159161
         let escapeMessage = response.message || 'The mole escaped!';
160
-
162
+
161163
         // Add distance info for new mole if available
162164
         if (response.escape_data?.timer_reason) {
163165
           escapeMessage += `\nNew mole detected ${response.escape_data.timer_reason}!`;
164166
         }
165
-
167
+
166168
         // Update command history with escape message
167169
         addToHistory({
168170
           command: 'Mole escaped!',
169171
           output: escapeMessage,
170172
           success: false,
171173
         });
172
-
174
+
173175
         // Update mole direction if provided
174176
         if (response.escape_data?.new_location) {
175177
           // Update tree to show new mole location
@@ -177,7 +179,7 @@ const Game: React.FC = () => {
177179
             const cleanTree = removeMoleFromTree(tree);
178180
             return updateTreeDataToShowMole(cleanTree, response.escape_data!.new_location);
179181
           });
180
-
182
+
181183
           // Show mole direction indicator if provided
182184
           if (response.escape_data?.mole_direction) {
183185
             setMoleDirection(response.escape_data.mole_direction);
@@ -324,7 +326,7 @@ const Game: React.FC = () => {
324326
               amole
325327
             </h1>
326328
           </div>
327
-
329
+
328330
           <div className="flex items-center gap-3">
329331
             <div className="text-xs text-slate-400">
330332
               click adjacent nodes or use the terminal