zeroed-some/bashamole / bff1dc9

Browse files

death anim

Authored by espadonne
SHA
bff1dc90ff2126fcefc162742cd7f1bb98b99350
Parents
2148300
Tree
c174c21

3 changed files

StatusFile+-
M frontend/src/app/globals.css 16 0
M frontend/src/components/Game.tsx 10 1
M frontend/src/components/TreeVisualizer.tsx 8 5
frontend/src/app/globals.cssmodified
@@ -61,4 +61,20 @@ body {
6161
 @keyframes blink {
6262
   0%, 50% { opacity: 1; }
6363
   51%, 100% { opacity: 0; }
64
+}
65
+
66
+/* Mole falling animation */
67
+@keyframes moleFall {
68
+  0% {
69
+    transform: translateY(0);
70
+    opacity: 1;
71
+  }
72
+  100% {
73
+    transform: translateY(800px);
74
+    opacity: 0;
75
+  }
76
+}
77
+
78
+.mole-death {
79
+  animation: moleFall 1.5s ease-in forwards;
6480
 }
frontend/src/components/Game.tsxmodified
@@ -36,6 +36,7 @@ const Game: React.FC = () => {
3636
   const [terminalMinimized, setTerminalMinimized] = useState(true);
3737
   const [hasPlayedIntro, setHasPlayedIntro] = useState(false);
3838
   const [isDarkMode, setIsDarkMode] = useState(true);
39
+  const [moleKilled, setMoleKilled] = useState(false);
3940
4041
   const terminalRef = useRef<HTMLDivElement>(null);
4142
   const inputRef = useRef<HTMLInputElement>(null);
@@ -105,6 +106,7 @@ const Game: React.FC = () => {
105106
       setShowHints(false);
106107
       setTerminalMinimized(true); // Keep terminal minimized on new game
107108
       setHasPlayedIntro(false); // Reset intro for new game
109
+      setMoleKilled(false); // Reset mole killed state
108110
     } catch (error) {
109111
       setGameState({
110112
         ...gameState,
@@ -183,6 +185,7 @@ const Game: React.FC = () => {
183185
184186
       // Check if game won
185187
       if (response.game_won) {
188
+        // First, show the mole
186189
         setGameState(prev => ({
187190
           ...prev,
188191
           tree: prev.tree ? {
@@ -191,6 +194,11 @@ const Game: React.FC = () => {
191194
             tree_data: updateTreeDataToShowMole(prev.tree!.tree_data, prev.tree!.player_location),
192195
           } : null,
193196
         }));
197
+
198
+        // Then trigger the falling animation after a short delay
199
+        setTimeout(() => {
200
+          setMoleKilled(true);
201
+        }, 200);
194202
       }
195203
196204
       setCommand('');
@@ -315,6 +323,7 @@ const Game: React.FC = () => {
315323
           onNodeClick={handleNodeClick}
316324
           playIntro={!hasPlayedIntro}
317325
           isDarkMode={isDarkMode}
326
+          moleKilled={moleKilled}
318327
         />
319328
       </div>
320329
@@ -366,7 +375,7 @@ const Game: React.FC = () => {
366375
         {!terminalMinimized && (
367376
           <div
368377
             ref={terminalRef}
369
-            className={`${terminalColors.content} p-4 font-terminal text-base h-[350px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-700`}
378
+            className={`${terminalColors.content} p-4 font-terminal text-base h-[300px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-700`}
370379
             onClick={() => inputRef.current?.focus()}
371380
           >
372381
             {commandHistory.map((entry, index) => (
frontend/src/components/TreeVisualizer.tsxmodified
@@ -11,6 +11,7 @@ interface TreeVisualizerProps {
1111
   onNodeClick?: (path: string) => void;
1212
   playIntro?: boolean;
1313
   isDarkMode?: boolean;
14
+  moleKilled?: boolean;
1415
 }
1516
1617
 const TreeVisualizer: React.FC<TreeVisualizerProps> = ({
@@ -19,6 +20,7 @@ const TreeVisualizer: React.FC<TreeVisualizerProps> = ({
1920
   onNodeClick,
2021
   playIntro = true,
2122
   isDarkMode = true,
23
+  moleKilled = false,
2224
 }) => {
2325
   const svgRef = useRef<SVGSVGElement>(null);
2426
   const containerRef = useRef<HTMLDivElement>(null);
@@ -67,7 +69,7 @@ const TreeVisualizer: React.FC<TreeVisualizerProps> = ({
6769
   const LAYOUT_CONFIG = {
6870
     nodeSpacing: 120,
6971
     margin: { top: 100, right: 150, bottom: 100, left: 150 },
70
-    viewBoxMultiplier: 2,
72
+    viewBoxMultiplier: 2.5,
7173
     minHeight: 1200,
7274
     grid: {
7375
       size: 40,
@@ -84,7 +86,7 @@ const TreeVisualizer: React.FC<TreeVisualizerProps> = ({
8486
     defaultScale: 3,
8587
     fullTreeScale: 0.8,
8688
     treePadding: 200,
87
-    nudgeOffset: { x: 0.1, y: 0.2 }
89
+    nudgeOffset: { x: 0.15, y: 0.2 }
8890
   };
8991
9092
   const LINK_CONFIG = {
@@ -472,7 +474,7 @@ const TreeVisualizer: React.FC<TreeVisualizerProps> = ({
472474
         .attr('dur', ANIMATION_CONFIG.celebration.duration)
473475
         .attr('repeatCount', ANIMATION_CONFIG.celebration.repeatCount);
474476
475
-      // Add mole SVG directly on the node
477
+      // Add mole SVG with falling animation when killed
476478
       moleGroup
477479
         .append('image')
478480
         .attr('xlink:href', ICON_CONFIG.paths.mole)
@@ -480,7 +482,8 @@ const TreeVisualizer: React.FC<TreeVisualizerProps> = ({
480482
         .attr('height', ICON_CONFIG.size)
481483
         .attr('x', ICON_CONFIG.offset)
482484
         .attr('y', ICON_CONFIG.offset)
483
-        .style('pointer-events', 'none');
485
+        .style('pointer-events', 'none')
486
+        .classed('mole-death', moleKilled);
484487
     }
485488
486489
     // Add zoom and pan behavior
@@ -567,7 +570,7 @@ const TreeVisualizer: React.FC<TreeVisualizerProps> = ({
567570
       }
568571
     }
569572
570
-  }, [treeData, playerLocation, onNodeClick, playIntro, isDarkMode]);
573
+  }, [treeData, playerLocation, onNodeClick, playIntro, isDarkMode, moleKilled]);
571574
572575
   return (
573576
     <div ref={containerRef} className="w-full h-full">