`da833f2`

endless mode

Authored by

espadonne 11 months ago

SHA: da833f28e14d40ff4133b4a4cae620292f8d77b8
Parents: bff1dc9
Tree: 9434518

8 changed files

Status	File	+	-
A	`backend/apps/trees/migrations/0003_filesystemtree_active_moles_and_more.py`	63	0
A	`backend/apps/trees/migrations/0004_remove_filesystemtree_active_moles_and_more.py`	53	0
A	`backend/apps/trees/migrations/0005_filesystemtree_moles_killed_and_more.py`	38	0
M	`backend/apps/trees/models.py`	156	1
M	`backend/apps/trees/serializers.py`	11	4
M	`backend/apps/trees/views.py`	61	9
M	`frontend/src/components/Game.tsx`	151	34
M	`frontend/src/lib/api.ts`	13	0

backend/apps/trees/migrations/0003_filesystemtree_active_moles_and_more.pyadded

 +# Generated by Django 5.2.3 on 2025-06-15 05:16
++
 +from django.db import migrations, models
++
++
 +class Migration(migrations.Migration):
++
 +    dependencies = [
 +        ("trees", "0002_filesystemtree_directory_stack_and_more"),
 +    ]
++
 +    operations = [
 +        migrations.AddField(
 +            model_name="filesystemtree",
 +            name="active_moles",
 +            field=models.JSONField(default=list),
 +        ),
 +        migrations.AddField(
 +            model_name="filesystemtree",
 +            name="difficulty_level",
 +            field=models.IntegerField(default=1),
 +        ),
 +        migrations.AddField(
 +            model_name="filesystemtree",
 +            name="game_mode",
 +            field=models.CharField(default="single", max_length=20),
 +        ),
 +        migrations.AddField(
 +            model_name="filesystemtree",
 +            name="max_moles_percentage",
 +            field=models.FloatField(default=0.15),
 +        ),
 +        migrations.AddField(
 +            model_name="filesystemtree",
 +            name="mole_spawn_interval",
 +            field=models.FloatField(default=30.0),
 +        ),
 +        migrations.AddField(
 +            model_name="filesystemtree",
 +            name="mole_type_weights",
 +            field=models.JSONField(default=dict),
 +        ),
 +        migrations.AddField(
 +            model_name="filesystemtree",
 +            name="next_mole_spawn",
 +            field=models.DateTimeField(blank=True, null=True),
 +        ),
 +        migrations.AddField(
 +            model_name="gamesession",
 +            name="moles_caught",
 +            field=models.IntegerField(default=0),
 +        ),
 +        migrations.AddField(
 +            model_name="gamesession",
 +            name="moles_escaped",
 +            field=models.IntegerField(default=0),
 +        ),
 +        migrations.AddField(
 +            model_name="gamesession",
 +            name="score",
 +            field=models.IntegerField(default=0),
 +        ),
 +    ]

backend/apps/trees/migrations/0004_remove_filesystemtree_active_moles_and_more.pyadded

 +# Generated by Django 5.2.3 on 2025-06-15 05:51
++
 +from django.db import migrations
++
++
 +class Migration(migrations.Migration):
++
 +    dependencies = [
 +        ("trees", "0003_filesystemtree_active_moles_and_more"),
 +    ]
++
 +    operations = [
 +        migrations.RemoveField(
 +            model_name="filesystemtree",
 +            name="active_moles",
 +        ),
 +        migrations.RemoveField(
 +            model_name="filesystemtree",
 +            name="difficulty_level",
 +        ),
 +        migrations.RemoveField(
 +            model_name="filesystemtree",
 +            name="game_mode",
 +        ),
 +        migrations.RemoveField(
 +            model_name="filesystemtree",
 +            name="max_moles_percentage",
 +        ),
 +        migrations.RemoveField(
 +            model_name="filesystemtree",
 +            name="mole_spawn_interval",
 +        ),
 +        migrations.RemoveField(
 +            model_name="filesystemtree",
 +            name="mole_type_weights",
 +        ),
 +        migrations.RemoveField(
 +            model_name="filesystemtree",
 +            name="next_mole_spawn",
 +        ),
 +        migrations.RemoveField(
 +            model_name="gamesession",
 +            name="moles_caught",
 +        ),
 +        migrations.RemoveField(
 +            model_name="gamesession",
 +            name="moles_escaped",
 +        ),
 +        migrations.RemoveField(
 +            model_name="gamesession",
 +            name="score",
 +        ),
 +    ]

backend/apps/trees/migrations/0005_filesystemtree_moles_killed_and_more.pyadded

 +# Generated by Django 5.2.3 on 2025-06-15 18:15
++
 +from django.db import migrations, models
++
++
 +class Migration(migrations.Migration):
++
 +    dependencies = [
 +        ("trees", "0004_remove_filesystemtree_active_moles_and_more"),
 +    ]
++
 +    operations = [
 +        migrations.AddField(
 +            model_name="filesystemtree",
 +            name="moles_killed",
 +            field=models.IntegerField(default=0),
 +        ),
 +        migrations.AddField(
 +            model_name="filesystemtree",
 +            name="total_commands",
 +            field=models.IntegerField(default=0),
 +        ),
 +        migrations.AddField(
 +            model_name="filesystemtree",
 +            name="total_directories_visited",
 +            field=models.IntegerField(default=0),
 +        ),
 +        migrations.AddField(
 +            model_name="gamesession",
 +            name="mole_stats",
 +            field=models.JSONField(default=list),
 +        ),
 +        migrations.AddField(
 +            model_name="gamesession",
 +            name="moles_killed",
 +            field=models.IntegerField(default=0),
 +        ),
 +    ]

backend/apps/trees/models.pymodified

  import json
  import random
  import string
 +import math
  class FileSystemTree(models.Model):
      """A complete filesystem tree for a game session"""
      directory_stack = models.JSONField(default=list)  # For pushd/popd
      home_directory = models.CharField(max_length=500, default="/home")  # Player's home
 +    # Game statistics
 +    moles_killed = models.IntegerField(default=0)
 +    total_commands = models.IntegerField(default=0)
 +    total_directories_visited = models.IntegerField(default=0)
++
      # Cached tree structure
      tree_data = models.JSONField(null=True, blank=True)
              mole_dir = random.choice(candidates)
              self.mole_location = mole_dir.path
 +    def spawn_new_mole(self):
 +        """Spawn a new mole after the current one is killed"""
 +        # Get all possible spawn locations (any directory)
 +        all_directories = DirectoryNode.objects.filter(tree=self).exclude(path="/")
++
 +        if all_directories.exists():
 +            # Randomly select a new location
 +            new_mole_dir = random.choice(all_directories)
 +            self.mole_location = new_mole_dir.path
++
 +            # Update the cached tree data
 +            self.cache_tree()
 +            self.save()
++
 +            return True
 +        return False
++
 +    def get_mole_direction(self):
 +        """Get the relative direction from player to mole in the tree structure"""
 +        if not self.mole_location or not self.player_location:
 +            return None
++
 +        # Build paths to compare
 +        player_parts = self.player_location.split('/')
 +        mole_parts = self.mole_location.split('/')
++
 +        # Remove empty strings from split
 +        player_parts = [p for p in player_parts if p]
 +        mole_parts = [p for p in mole_parts if p]
++
 +        # If player is at root, special handling
 +        if not player_parts:
 +            player_parts = ['']
++
 +        # Find common ancestor
 +        common_depth = 0
 +        for i in range(min(len(player_parts), len(mole_parts))):
 +            if player_parts[i] == mole_parts[i]:
 +                common_depth += 1
 +            else:
 +                break
++
 +        # Determine relative position
 +        player_depth = len(player_parts)
 +        mole_depth = len(mole_parts)
++
 +        # Calculate tree-based direction
 +        if self.mole_location == self.player_location:
 +            return {"direction": "here", "angle": 0}
++
 +        # Mole is in a parent directory (need to go up)
 +        if common_depth == mole_depth and mole_depth < player_depth:
 +            return {"direction": "up", "angle": 270}  # Up in tree
++
 +        # Mole is in a child directory (need to go down)
 +        if common_depth == player_depth and mole_depth > player_depth:
 +            # It's directly below us
 +            return {"direction": "down", "angle": 90}  # Down in tree
++
 +        # Mole is in a sibling or cousin branch
 +        if common_depth < player_depth:
 +            # Need to go up first, then sideways
 +            # Determine left or right based on alphabetical order of diverging paths
 +            if common_depth < len(mole_parts) and common_depth < len(player_parts):
 +                if mole_parts[common_depth] < player_parts[common_depth]:
 +                    return {"direction": "up-left", "angle": 225}
 +                else:
 +                    return {"direction": "up-right", "angle": 315}
 +            return {"direction": "up", "angle": 270}
 +        else:
 +            # At same level or need to go down and sideways
 +            if common_depth < len(mole_parts):
 +                # Determine left or right based on tree structure
 +                # This is a simplification - in reality we'd need to check the actual tree layout
 +                if mole_parts[common_depth] < (player_parts[common_depth] if common_depth < len(player_parts) else 'z'):
 +                    return {"direction": "left", "angle": 180}
 +                else:
 +                    return {"direction": "right", "angle": 0}
 +            return {"direction": "down", "angle": 90}
++
 +    def calculate_path_distance(self, from_path, to_path):
 +        """Calculate the minimum number of cd commands needed to go from one path to another"""
 +        if from_path == to_path:
 +            return 0
++
 +        from_parts = from_path.split('/')
 +        to_parts = to_path.split('/')
++
 +        # Remove empty strings
 +        from_parts = [p for p in from_parts if p]
 +        to_parts = [p for p in to_parts if p]
++
 +        # Find common ancestor depth
 +        common_depth = 0
 +        for i in range(min(len(from_parts), len(to_parts))):
 +            if from_parts[i] == to_parts[i]:
 +                common_depth += 1
 +            else:
 +                break
++
 +        # Calculate moves needed
 +        moves_up = len(from_parts) - common_depth
 +        moves_down = len(to_parts) - common_depth
++
 +        return moves_up + moves_down
++
      def _set_random_start_position(self):
          """Set a random starting position for the player"""
          # Get all directories that could be valid starting positions
              # Save previous location before moving
              self.previous_location = self.player_location
              self.player_location = new_path
 +            self.total_directories_visited += 1
              self.save()
              return True, f"Moved to {self.player_location}"
          else:
          # Save current location as previous (for cd -)
          self.previous_location = self.player_location
          self.player_location = target_dir
 +        self.total_directories_visited += 1
          self.save()
          return True, f"Popped and moved to {self.player_location}"
      commands_used = models.IntegerField(default=0)
      directories_visited = models.IntegerField(default=0)
      time_taken = models.DurationField(null=True, blank=True)
 +    moles_killed = models.IntegerField(default=0)
++
 +    # Per-mole tracking
 +    mole_stats = models.JSONField(default=list)  # List of {mole_number, location, commands, time, distance}
      # Command history
      command_history = models.JSONField(default=list)
              'timestamp': str(timezone.now())
          })
          self.commands_used += 1
 -        self.save()
 +        self.save()
++
 +    def record_mole_kill(self, mole_location, commands_for_mole, time_for_mole, distance_traveled):
 +        """Record statistics for a mole kill"""
 +        self.moles_killed += 1
 +        self.mole_stats.append({
 +            'mole_number': self.moles_killed,
 +            'location': mole_location,
 +            'commands': commands_for_mole,
 +            'time': str(time_for_mole),
 +            'distance': distance_traveled
 +        })
 +        self.save()
++
 +    def calculate_score(self):
 +        """Calculate a score based on performance"""
 +        if self.moles_killed == 0:
 +            return 0
++
 +        # Base score per mole
 +        base_score = 1000
++
 +        # Calculate average performance
 +        total_commands = sum(stat['commands'] for stat in self.mole_stats)
 +        avg_commands = total_commands / self.moles_killed if self.moles_killed > 0 else 0
++
 +        # Score formula (rough draft)
 +        # More moles = better
 +        # Fewer commands = better
 +        # Less time = better (when we implement timing)
 +        score = self.moles_killed * base_score
++
 +        # Efficiency bonus (fewer commands is better)
 +        if avg_commands > 0:
 +            efficiency_multiplier = max(0.5, min(2.0, 10 / avg_commands))
 +            score *= efficiency_multiplier
++
 +        return int(score)

backend/apps/trees/serializers.pymodified

          fields = [
              'id', 'name', 'created_at', 'seed',
              'player_location', 'is_completed', 'completed_at',
 -            'tree_data', 'total_directories'
 +            'tree_data', 'total_directories', 'moles_killed',
 +            'total_commands', 'total_directories_visited'
+         ]
 -        read_only_fields = ['created_at', 'tree_data', 'total_directories']
 +        read_only_fields = ['created_at', 'tree_data', 'total_directories', 'moles_killed']
      def get_total_directories(self, obj):
          return obj.nodes.count()
  class GameSessionSerializer(serializers.ModelSerializer):
      tree_name = serializers.CharField(source='tree.name', read_only=True)
 +    score = serializers.SerializerMethodField()
      class Meta:
          model = GameSession
          fields = [
              'id', 'tree', 'tree_name', 'player_name',
              'started_at', 'completed_at', 'commands_used',
 -            'directories_visited', 'time_taken', 'command_history'
 +            'directories_visited', 'time_taken', 'command_history',
 +            'moles_killed', 'mole_stats', 'score'
+         ]
          read_only_fields = [
 -            'started_at', 'completed_at', 'time_taken', 'command_history'
 +            'started_at', 'completed_at', 'time_taken', 'command_history',
 +            'mole_stats', 'score'
+         ]
++
 +    def get_score(self, obj):
 +        return obj.calculate_score()
  class GameCommandSerializer(serializers.Serializer):

backend/apps/trees/views.pymodified

                      "command": "killall moles",
                      "description": "Eliminate moles when in the same directory",
                      "examples": ["killall moles"]
 +                },
 +                {
 +                    "command": "score",
 +                    "description": "Show current score and moles killed",
 +                    "examples": ["score"]
+                 }
              ],
              "special_paths": [
                  status=status.HTTP_400_BAD_REQUEST
+             )
 +        # Track commands for tree
 +        tree.total_commands += 1
 +        tree.save()
++
          # Get session if provided
          session = None
 +        commands_before_mole = tree.total_commands  # Track for scoring
++
          if session_id:
              try:
                  session = GameSession.objects.get(id=session_id, tree=tree)
                  session.add_command(command)
 +                commands_before_mole = session.commands_used
              except GameSession.DoesNotExist:
                  pass
              'command': command,
              'success': False,
              'output': '',
 -            'current_path': tree.player_location
 +            'current_path': tree.player_location,
 +            'mole_spawned': False,
 +            'mole_direction': None,
 +            'score': 0
+         }
          if cmd == 'cd':
          elif cmd == 'killall' and len(parts) > 1 and parts[1] == 'moles':
              if tree.check_win_condition():
 -                tree.is_completed = True
 -                tree.completed_at = timezone.now()
 +                # Track old mole location for stats
 +                old_mole_location = tree.mole_location
++
 +                # Update mole kill count
 +                tree.moles_killed += 1
                  tree.save()
 +                # Record stats for session
                  if session:
 -                    session.completed_at = timezone.now()
 -                    session.time_taken = session.completed_at - session.started_at
 -                    session.save()
 +                    # Calculate commands used for this mole
 +                    commands_for_mole = session.commands_used - commands_before_mole + 1  # +1 for killall
++
 +                    # Calculate time (simplified for now - would need to track per-mole start time)
 +                    time_for_mole = timezone.now() - session.started_at
++
 +                    # Calculate distance traveled (simplified - just the path distance)
 +                    distance = tree.calculate_path_distance(tree.home_directory, old_mole_location)
++
 +                    session.record_mole_kill(
 +                        old_mole_location,
 +                        commands_for_mole,
 +                        time_for_mole,
 +                        distance
 +                    )
 +                    response_data['score'] = session.calculate_score()
 -                response_data['output'] = "🎉 Congratulations! You found and eliminated the mole!"
 -                response_data['success'] = True
 -                response_data['game_won'] = True
 +                # Spawn new mole
 +                if tree.spawn_new_mole():
 +                    mole_direction = tree.get_mole_direction()
++
 +                    response_data['output'] = f"🎉 You eliminated the mole! (Total moles killed: {tree.moles_killed})\n🐭 A new mole has appeared somewhere in the filesystem!"
 +                    response_data['success'] = True
 +                    response_data['mole_spawned'] = True
 +                    response_data['mole_direction'] = mole_direction
 +                    response_data['moles_killed'] = tree.moles_killed
 +                    response_data['new_mole_location'] = tree.mole_location  # Add this!
 +                else:
 +                    response_data['output'] = "🎉 You eliminated the mole! Unable to spawn new mole."
 +                    response_data['success'] = True
              else:
                  response_data['output'] = "No moles found in this directory."
                  response_data['success'] = True
 +        elif cmd == 'score':
 +            # New command to check current score
 +            if session:
 +                response_data['output'] = f"Score: {session.calculate_score()} | Moles killed: {session.moles_killed}"
 +                response_data['score'] = session.calculate_score()
 +            else:
 +                response_data['output'] = "No active session to score."
 +            response_data['success'] = True
++
          elif cmd == 'help':
              response_data['output'] = """Available commands:
  cd <directory>    - Change directory (supports ~, -, and ..)
  echo <text>       - Display text (supports $HOME, $PWD, $OLDPWD)
  tree [-L depth]   - Display directory tree (use -L to limit depth)
  killall moles     - Eliminate moles (when in the same directory)
 +score             - Show current score and moles killed
  help              - Show this help message
  Special paths:

frontend/src/components/Game.tsxmodified

 -'use client';
 +"use client";
 -// src/components/Game.tsx
  import React, { useState, useEffect, useRef } from 'react';
  import TreeVisualizer from './TreeVisualizer';
 -import { gameApi, FileSystemTree, FHSDirectory, CommandReferenceResponse } from '@/lib/api';
 +import { gameApi, FileSystemTree, FHSDirectory, CommandReferenceResponse, MoleDirection } from '@/lib/api';
  interface CommandHistoryEntry {
    command: string;
    const [hasPlayedIntro, setHasPlayedIntro] = useState(false);
    const [isDarkMode, setIsDarkMode] = useState(true);
    const [moleKilled, setMoleKilled] = useState(false);
 +  const [moleDirection, setMoleDirection] = useState<MoleDirection | null>(null);
 +  const [score, setScore] = useState(0);
 +  const [molesKilled, setMolesKilled] = useState(0);
    const terminalRef = useRef<HTMLDivElement>(null);
    const inputRef = useRef<HTMLInputElement>(null);
          error: null,
        });
 +      // Reset game state
 +      setScore(0);
 +      setMolesKilled(0);
 +      setMoleDirection(null);
++
        // Create a more dynamic starting message based on random location
        const startLocation = response.tree.player_location;
        const homeDir = response.home_directory || '/home';
          }));
+       }
 -      // Check if game won
 -      if (response.game_won) {
 -        // First, show the mole
 +      // Check if a new mole was spawned
 +      if (response.mole_spawned) {
 +        // First, show the killed mole briefly
 +        setGameState(prev => ({
 +          ...prev,
 +          tree: prev.tree ? {
 +            ...prev.tree,
 +            tree_data: updateTreeDataToShowMole(prev.tree!.tree_data, prev.tree!.player_location),
 +          } : null,
 +        }));
++
 +        // Trigger falling animation
 +        setMoleKilled(true);
++
 +        // After animation, update tree with new mole location
 +        setTimeout(() => {
 +          setMoleKilled(false);
++
 +          // Update tree to show new mole location
 +          if (response.new_mole_location && gameState.tree) {
 +            const treeWithNewMole = updateTreeDataToShowMole(
 +              removeMoleFromTree(gameState.tree.tree_data),
 +              response.new_mole_location
 +            );
++
 +            setGameState(prev => ({
 +              ...prev,
 +              tree: prev.tree ? {
 +                ...prev.tree,
 +                tree_data: treeWithNewMole,
 +              } : null,
 +            }));
 +          }
++
 +          // Set new mole direction
 +          if (response.mole_direction) {
 +            setMoleDirection(response.mole_direction);
 +            // Hide direction indicator after 5 seconds
 +            setTimeout(() => {
 +              setMoleDirection(null);
 +            }, 5000);
 +          }
 +        }, 1500); // Wait for falling animation
++
 +        // Update score and moles killed
 +        if (response.score !== undefined) setScore(response.score);
 +        if (response.moles_killed !== undefined) setMolesKilled(response.moles_killed);
 +      }
++
 +      // Legacy: Check if game won (for old backend compatibility)
 +      if (response.game_won && !response.mole_spawned) {
          setGameState(prev => ({
            ...prev,
            tree: prev.tree ? {
            } : null,
          }));
 -        // Then trigger the falling animation after a short delay
          setTimeout(() => {
            setMoleKilled(true);
          }, 200);
        }]);
      } finally {
        setExecuting(false);
 -      // Focus will be restored by useEffect
+     }
    };
 -  // Update tree data to show mole when game is won
 +  // Update tree data to show mole when found
    const updateTreeDataToShowMole = (treeData: any, molePath: string): any => {
      if (treeData.path === molePath) {
        return { ...treeData, has_mole: true };
      return treeData;
    };
 +  // Remove mole from tree data
 +  const removeMoleFromTree = (treeData: any): any => {
 +    return {
 +      ...treeData,
 +      has_mole: false,
 +      children: treeData.children ? treeData.children.map((child: any) => removeMoleFromTree(child)) : []
 +    };
 +  };
++
    // Handle node click in visualizer
    const handleNodeClick = (path: string) => {
      executeCommand(`cd ${path}`);
    // Mark intro as played after first render
    useEffect(() => {
      if (gameState.tree && !hasPlayedIntro) {
 -      // Set timeout to mark intro as played after animation completes
        const timer = setTimeout(() => {
          setHasPlayedIntro(true);
 -      }, 6500); // Total intro duration
 +      }, 10000); // Add a buffer to ensure animation completes (9.3s + buffer)
        return () => clearTimeout(timer);
+     }
    }, [gameState.tree, hasPlayedIntro]);
 +  // Get position for mole direction indicator
 +  const getMoleIndicatorPosition = (direction: string) => {
 +    const positions: Record<string, string> = {
 +      'up': 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-full -mt-8',
 +      'down': 'bottom-20 left-1/2 -translate-x-1/2',
 +      'left': 'top-1/2 left-8 -translate-y-1/2',
 +      'right': 'top-1/2 right-8 -translate-y-1/2',
 +      'up-left': 'top-20 left-8',
 +      'up-right': 'top-20 right-8',
 +      'down-left': 'bottom-20 left-8',
 +      'down-right': 'bottom-20 right-8',
 +    };
 +    return positions[direction] || positions['up'];
 +  };
++
 +  // Get rotation for arrow based on angle
 +  const getArrowRotation = (angle: number) => {
 +    return `rotate(${angle}deg)`;
 +  };
++
    // Terminal color scheme based on dark/light mode
    const terminalColors = isDarkMode ? {
      frame: 'bg-stone-200 border-stone-300',
          />
        </div>
 +      {/* Mole Direction Indicator */}
 +      {moleDirection && (
 +        <div
 +          className={`absolute ${getMoleIndicatorPosition(moleDirection.direction)} z-40 animate-pulse`}
 +          style={{
 +            animation: 'pulse 2s ease-in-out infinite, fadeIn 0.5s ease-out'
 +          }}
 +        >
 +          <div className="bg-red-600/90 backdrop-blur-sm border-2 border-red-400 rounded-lg p-3 shadow-2xl flex items-center gap-2">
 +            <img
 +              src="/mole.svg"
 +              alt="Mole"
 +              className="w-8 h-8"
 +            />
 +            <div
 +              className="text-white text-2xl"
 +              style={{ transform: getArrowRotation(moleDirection.angle) }}
 +            >
 +              →
 +            </div>
 +          </div>
 +        </div>
 +      )}
++
 +      {/* Score Display - Top Right */}
 +      {molesKilled > 0 && (
 +        <div className="absolute top-4 right-4 bg-black/80 backdrop-blur-sm border border-green-500 rounded-lg p-3 shadow-2xl z-30">
 +          <div className="text-green-400 font-terminal text-sm">
 +            <div>Score: {score}</div>
 +            <div>Moles: {molesKilled}</div>
 +          </div>
 +        </div>
 +      )}
++
        {/* Floating Terminal - Top Left */}
        <div className={`absolute top-4 left-4 ${terminalColors.frame} rounded-lg shadow-2xl border transition-all duration-300 z-30 ${
          terminalMinimized ? 'w-80' : 'w-[700px]'
+               >
                  <span className="text-[8px] font-bold text-gray-900 absolute">×</span>
                </button>
 -              {gameState.tree && !gameState.tree.is_completed ? (
 -                <button
 -                  onClick={getHints}
 -                  className="w-3.5 h-3.5 bg-yellow-500 hover:bg-yellow-400 rounded-full flex items-center justify-center transition-colors relative"
 -                  title="Get Hint"
 -                >
 -                  <span className="text-[9px] font-bold text-gray-900 absolute">?</span>
 -                </button>
 -              ) : (
 -                <div className="w-3.5 h-3.5 bg-yellow-500 rounded-full"></div>
 -              )}
 +              <button
 +                onClick={getHints}
 +                className="w-3.5 h-3.5 bg-yellow-500 hover:bg-yellow-400 rounded-full flex items-center justify-center transition-colors relative"
 +                title="Get Hint"
 +              >
 +                <span className="text-[9px] font-bold text-gray-900 absolute">?</span>
 +              </button>
                <button
                  onClick={getFHSReference}
                  className="w-3.5 h-3.5 bg-green-500 hover:bg-green-400 rounded-full flex items-center justify-center transition-colors relative"
                          executeCommand(command);
+                       }
                      }}
 -                    disabled={executing || gameState.tree?.is_completed}
 +                    disabled={executing}
                      className="absolute inset-0 w-full bg-transparent text-transparent outline-none caret-transparent font-terminal"
                      placeholder=""
                      autoFocus
          )}
        </div>
 -      {/* Hints Popup - Now positioned relative to terminal */}
 +      {/* Hints Popup */}
        {showHints && hints.length > 0 && (
          <div className="absolute top-16 left-4 bg-yellow-900/95 backdrop-blur-sm border border-yellow-600 rounded-lg p-4 max-w-md z-40 shadow-2xl">
            <button
          </div>
        )}
 -      {/* Bottom Game Bar - Updated with blue shade */}
 +      {/* Bottom Game Bar */}
        <div className={`absolute bottom-0 left-0 right-0 ${isDarkMode ? 'bg-slate-800/90' : 'bg-blue-50/90'} backdrop-blur-sm border-t ${isDarkMode ? 'border-slate-700' : 'border-blue-200'} p-3 z-20`}>
          <div className="max-w-7xl mx-auto flex justify-between items-center px-4">
            <div className="flex items-center gap-4">
            </div>
            <div className="flex items-center gap-3">
 -            {gameState.tree.is_completed ? (
 -              <div className="text-green-600 dark:text-green-400 font-bold animate-pulse">
 -                You found a mole!
 -              </div>
 -            ) : (
 -              <div className={`text-xs ${isDarkMode ? 'text-slate-400' : 'text-blue-700'}`}>
 -                click adjacent nodes or use the terminal
 -              </div>
 -            )}
 +            <div className={`text-xs ${isDarkMode ? 'text-slate-400' : 'text-blue-700'}`}>
 +              click adjacent nodes or use the terminal
 +            </div>
              <button
                onClick={startNewGame}
                className={`px-3 py-1.5 ${isDarkMode ? 'bg-slate-700 hover:bg-slate-600' : 'bg-blue-200 hover:bg-blue-300'} ${isDarkMode ? 'text-white' : 'text-blue-900'} text-sm rounded transition`}
            </div>
          </div>
        </div>
++
 +      {/* Custom styles for animations */}
 +      <style jsx>{`
 +        @keyframes fadeIn {
 +          from { opacity: 0; transform: scale(0.8); }
 +          to { opacity: 1; transform: scale(1); }
 +        }
 +        @keyframes pulse {
 +          0%, 100% { opacity: 0.9; transform: scale(1); }
 +          50% { opacity: 1; transform: scale(1.05); }
 +        }
 +      `}</style>
      </div>
    );
  };

frontend/src/lib/api.tsmodified

    completed_at: string | null;
    tree_data: TreeNode;
    total_directories: number;
 +  moles_killed?: number;
 +  total_commands?: number;
 +  total_directories_visited?: number;
 +}
++
 +export interface MoleDirection {
 +  direction: string;
 +  angle: number;
+ }
  export interface CommandResponse {
    output: string;
    current_path: string;
    game_won?: boolean;
 +  mole_spawned?: boolean;
 +  mole_direction?: MoleDirection | null;
 +  score?: number;
 +  moles_killed?: number;
 +  new_mole_location?: string;
+ }
  export interface GameCreationResponse {