`0c04181`

refactor stable

Authored by mfwolffe <wolffemf@dukes.jmu.edu> 11 months ago

SHA: 0c04181d951bcbf38e81b48396ff15c13f690a90
Parents: f52610e
Tree: d096d43

5 changed files

Status	File	+	-
M	`frontend/src/app/layout.tsx`	1	1
M	`frontend/src/components/Game.tsx`	96	447
A	`frontend/src/components/GameStatus.tsx`	111	0
A	`frontend/src/components/HelpModals.tsx`	194	0
A	`frontend/src/components/Terminal.tsx`	195	0

frontend/src/app/layout.tsxmodified


 });
 
 export const metadata: Metadata = {
+  title: "bashamole",
   description: "A game to practice Unix navigation by hunting moles in the filesystem",
   icons: {
     icon: [

frontend/src/components/Game.tsxmodified

  "use client";
--import React, { useState, useEffect, useRef } from 'react';
++import React, { useState, useEffect } from 'react';
--import Image from 'next/image';
  import TreeVisualizer from './TreeVisualizer';
--import TimerDisplay from './TimerDisplay';
++import Terminal from './Terminal';
++import HelpModals from './HelpModals';
++import GameStatus from './GameStatus';
  import { gameApi, FileSystemTree, FHSDirectory, CommandReferenceResponse, MoleDirection, TreeNode } from '@/lib/api';
  interface CommandHistoryEntry {
    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);
--  // Auto-scroll terminal to bottom
++  // Canvas background color - always dark mode
--  useEffect(() => {
++  const canvasBackground = 'bg-gray-900';
--    if (terminalRef.current) {
--      terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
--    }
--  }, [commandHistory]);
--
--  // Auto-focus input after command execution
--  useEffect(() => {
--    if (!executing && inputRef.current && !terminalMinimized) {
--      inputRef.current.focus();
--    }
--  }, [executing, terminalMinimized]);
    // Start a new game
    const startNewGame = async () => {
      executeCommand(`cd ${path}`);
    };
++  // Handle timer expiration
++  const handleTimerExpire = async () => {
++    if (gameState.tree) {
++      try {
++        const response = await gameApi.checkTimer(gameState.tree.id, gameState.sessionId || undefined);
++        if (response.mole_escaped) {
++          // Build the escape message
++          let escapeMessage = response.message || 'The mole escaped!';
++
++          // Add distance info for new mole if available
++          if (response.escape_data?.timer_reason) {
++            escapeMessage += `\nNew mole detected ${response.escape_data.timer_reason}!`;
++          }
++
++          // Update command history with escape message
++          setCommandHistory(prev => [...prev, {
++            command: 'Mole escaped!',
++            output: escapeMessage,
++            success: false,
++          }]);
++
++          // Update mole direction if provided
++          if (response.escape_data?.new_location) {
++            // Update tree to show new mole location
++            const treeWithNewMole = updateTreeDataToShowMole(
++              removeMoleFromTree(gameState.tree.tree_data),
++              response.escape_data.new_location
++            );
++
++            setGameState(prev => ({
++              ...prev,
++              tree: prev.tree ? {
++                ...prev.tree,
++                tree_data: treeWithNewMole,
++              } : null,
++            }));
++
++            // Show mole direction indicator if provided
++            if (response.escape_data?.mole_direction) {
++              setMoleDirection(response.escape_data.mole_direction);
++              // Hide direction indicator after 5 seconds
++              setTimeout(() => {
++                setMoleDirection(null);
++              }, 5000);
++            }
++          }
++        }
++      } catch (error) {
++        console.error('Failed to check timer:', error);
++      }
++    }
++  };
++
    // Start game on mount
    useEffect(() => {
      startNewGame();
+     }
    }, [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 - always dark mode
--  const terminalColors = {
--    frame: 'bg-stone-200 border-stone-300',
--    header: 'bg-stone-300 border-stone-400',
--    headerText: 'text-stone-900',
--    content: 'bg-black',
--    closeButton: 'text-stone-700 hover:text-stone-900'
--  };
--
--  // Canvas background color - always dark mode
--  const canvasBackground = 'bg-gray-900';
--
    if (gameState.loading) {
      return (
        <div className={`flex items-center justify-center min-h-screen ${canvasBackground} text-gray-900 dark:text-white`}>
          />
        </div>
--      {/* Mole Direction Indicator */}
++      {/* Game Status (Timer, Score, Direction Indicator) */}
--      {moleDirection && (
++      <GameStatus
--        <div
++        gameTreeId={gameState.tree?.id || null}
--          className={`absolute ${getMoleIndicatorPosition(moleDirection.direction)} z-40 animate-pulse`}
++        sessionId={gameState.sessionId}
--          style={{
++        onTimerExpire={handleTimerExpire}
--            animation: 'pulse 2s ease-in-out infinite, fadeIn 0.5s ease-out'
++        score={score}
--          }}
++        molesKilled={molesKilled}
--        >
++        moleDirection={moleDirection}
--          <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">
++      />
--            <Image
++
--              src="/mole.svg"
++      {/* Terminal */}
--              alt="Mole"
++      <Terminal
--              width={32}
++        commandHistory={commandHistory}
--              height={32}
++        command={command}
--              className="w-8 h-8"
++        setCommand={setCommand}
--            />
++        executeCommand={executeCommand}
--            <div
++        executing={executing}
--              className="text-white text-2xl"
++        currentPath={gameState.tree?.player_location || '~'}
--              style={{ transform: getArrowRotation(moleDirection.angle) }}
++        terminalMinimized={terminalMinimized}
--            >
++        setTerminalMinimized={setTerminalMinimized}
--              →
++        onGetCommandReference={getCommandReference}
--            </div>
++        onGetHints={getHints}
--          </div>
++        onGetFHSReference={getFHSReference}
--        </div>
++      />
--      )}
++
--
++      {/* Help Modals */}
--      {/* Score and Timer Display - Top Right */}
++      <HelpModals
--      <div className="absolute top-4 right-4 flex flex-col gap-3 z-30">
++        showHints={showHints}
--        {/* Timer */}
++        setShowHints={setShowHints}
--        <TimerDisplay
++        hints={hints}
--          gameTreeId={gameState.tree?.id || null}
++        showFHS={showFHS}
--          sessionId={gameState.sessionId}
++        setShowFHS={setShowFHS}
--          onTimerExpire={async () => {
++        fhsDirs={fhsDirs}
--            // Handle timer expiration - check for mole escape
++        showCommands={showCommands}
--            if (gameState.tree) {
++        setShowCommands={setShowCommands}
--              try {
++        commandRef={commandRef}
--                const response = await gameApi.checkTimer(gameState.tree.id, gameState.sessionId || undefined);
++      />
--                if (response.mole_escaped) {
--                  // Build the escape message
--                  let escapeMessage = response.message || 'The mole escaped!';
--
--                  // Add distance info for new mole if available
--                  if (response.escape_data?.timer_reason) {
--                    escapeMessage += `\nNew mole detected ${response.escape_data.timer_reason}!`;
--                  }
--
--                  // Update command history with escape message
--                  setCommandHistory(prev => [...prev, {
--                    command: 'Mole escaped!',
--                    output: escapeMessage,
--                    success: false,
--                  }]);
--
--                  // Update mole direction if provided
--                  if (response.escape_data?.new_location) {
--                    // Update tree to show new mole location
--                    const treeWithNewMole = updateTreeDataToShowMole(
--                      removeMoleFromTree(gameState.tree.tree_data),
--                      response.escape_data.new_location
--                    );
--
--                    setGameState(prev => ({
--                      ...prev,
--                      tree: prev.tree ? {
--                        ...prev.tree,
--                        tree_data: treeWithNewMole,
--                      } : null,
--                    }));
--
--                    // Show mole direction indicator if provided
--                    if (response.escape_data?.mole_direction) {
--                      setMoleDirection(response.escape_data.mole_direction);
--                      // Hide direction indicator after 5 seconds
--                      setTimeout(() => {
--                        setMoleDirection(null);
--                      }, 5000);
--                    }
--                  }
--                }
--              } catch (error) {
--                console.error('Failed to check timer:', error);
--              }
--            }
--          }}
--        />
--
--        {/* Score */}
--        {molesKilled > 0 && (
--          <div className="bg-black/80 backdrop-blur-sm border border-green-500 rounded-lg p-3 shadow-2xl">
--            <div className="text-green-400 font-terminal text-sm">
--              <div>Score: {score}</div>
--              <div>Moles: {molesKilled}</div>
--            </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]'
--      }`}>
--        {/* Terminal Header */}
--        <div className={`flex items-center justify-between ${terminalColors.header} px-4 py-2 rounded-t-lg border-b`}>
--          <div className="flex items-center gap-2">
--            <div className="flex gap-1.5">
--              <button
--                onClick={getCommandReference}
--                className="w-3.5 h-3.5 bg-red-500 hover:bg-red-400 rounded-full flex items-center justify-center transition-colors relative"
--                title="Command Reference"
--              >
--                <span className="text-[8px] font-bold text-gray-900 absolute">×</span>
--              </button>
--              <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"
--                title="FHS Directory Reference"
--              >
--                <span className="text-[9px] font-bold text-gray-900 absolute">/</span>
--              </button>
--            </div>
--            <h3 className={`text-sm font-medium ${terminalColors.headerText} ml-2`}>bash</h3>
--          </div>
--          <button
--            onClick={() => setTerminalMinimized(!terminalMinimized)}
--            className={`${terminalColors.closeButton} transition`}
--          >
--            {terminalMinimized ? '▼' : '▲'}
--          </button>
--        </div>
--
--        {/* Terminal Content */}
--        {!terminalMinimized && (
--          <div
--            ref={terminalRef}
--            className={`${terminalColors.content} p-4 font-terminal text-base h-[300px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-700`}
--            onClick={() => inputRef.current?.focus()}
--          >
--            {commandHistory.map((entry, index) => (
--              <div key={index} className="mb-1">
--                <div className="flex items-start font-terminal">
--                  <span className="text-green-400">groundskeeper@molehill</span>
--                  <span className="text-gray-400 mx-1">::</span>
--                  <span className="text-blue-400">{entry.command.startsWith('Hunt started!') ? '~' : gameState.tree?.player_location || '~'}</span>
--                  <span className="text-gray-400 ml-1">$</span>
--                  <span className={`ml-2 ${entry.command.startsWith('Hunt started!') ? 'text-yellow-400' : 'text-gray-300'}`}>
--                    {entry.command.startsWith('Hunt started!') ? '' : entry.command}
--                  </span>
--                </div>
--                {entry.output && (
--                  <div className={`${entry.success ? 'text-gray-300' : 'text-red-400'} ml-0 mt-1 font-terminal whitespace-pre-wrap`}>
--                    {entry.output.split('\n').map((line, i) => {
--                      // Special coloring for mole detection messages
--                      let lineClass = '';
--                      if (line.includes('New mole detected')) {
--                        lineClass = 'text-yellow-400';
--                      } else if (line.includes('⚠️')) {
--                        // Timer warnings
--                        if (line.includes('CRITICAL')) {
--                          lineClass = 'text-red-500';
--                        } else if (line.includes('ALERT')) {
--                          lineClass = 'text-orange-400';
--                        } else if (line.includes('WARNING')) {
--                          lineClass = 'text-yellow-400';
--                        }
--                      }
--
--                      return (
--                        <div key={i} className={lineClass || ''}>
--                          {line}
--                        </div>
--                      );
--                    })}
--                  </div>
--                )}
--              </div>
--            ))}
--
--            {/* Current input line */}
--            <div className="flex items-start font-terminal">
--              <span className="text-green-400">groundskeeper@molehill</span>
--              <span className="text-gray-400 mx-1">::</span>
--              <span className="text-blue-400">{gameState.tree?.player_location || '~'}</span>
--              <span className="text-gray-400 ml-1">$</span>
--              <div className="flex-1 ml-2">
--                <div className="relative inline-block">
--                  <span className="text-gray-300 font-terminal">{command}</span>
--                  <span
--                    className="text-gray-300 font-terminal"
--                    style={{
--                      animation: 'blink 1s step-end infinite'
--                    }}
--                  >
--                    _
--                  </span>
--                  <input
--                    ref={inputRef}
--                    type="text"
--                    value={command}
--                    onChange={(e) => setCommand(e.target.value)}
--                    onKeyDown={(e) => {
--                      if (e.key === 'Enter') {
--                        e.preventDefault();
--                        executeCommand(command);
--                      }
--                    }}
--                    disabled={executing}
--                    className="absolute inset-0 w-full bg-transparent text-transparent outline-none caret-transparent font-terminal"
--                    placeholder=""
--                    autoFocus
--                    spellCheck={false}
--                    autoComplete="off"
--                    autoCorrect="off"
--                    autoCapitalize="off"
--                  />
--                </div>
--              </div>
--            </div>
--          </div>
--        )}
--      </div>
--
--      {/* 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
--            onClick={() => setShowHints(false)}
--            className="absolute top-2 right-2 text-yellow-400 hover:text-yellow-300"
--          >
--            ✕
--          </button>
--          <h3 className="text-yellow-400 font-bold mb-2">Hints:</h3>
--          {hints.map((hint, index) => (
--            <p key={index} className="text-yellow-200 text-sm">{hint}</p>
--          ))}
--        </div>
--      )}
--
--      {/* FHS Reference Modal */}
--      {showFHS && (
--        <div className="absolute top-16 left-4 bg-green-900/95 backdrop-blur-sm border border-green-600 rounded-lg p-6 max-w-2xl z-40 shadow-2xl">
--          <button
--            onClick={() => setShowFHS(false)}
--            className="absolute top-3 right-3 text-green-400 hover:text-green-300"
--          >
--            ✕
--          </button>
--          <h3 className="text-green-400 font-bold mb-4 text-lg">Filesystem Hierarchy Standard (FHS)</h3>
--          <div className="grid grid-cols-1 gap-2 max-h-96 overflow-y-auto">
--            {fhsDirs.map((dir, index) => (
--              <div key={index} className="flex items-start gap-3">
--                <code className="text-green-300 font-terminal text-sm font-bold min-w-[80px]">{dir.path}</code>
--                <span className="text-green-200 text-sm">{dir.desc}</span>
--              </div>
--            ))}
--          </div>
--        </div>
--      )}
--
--      {/* Command Reference Modal */}
--      {showCommands && commandRef && (
--        <div className="absolute top-16 left-4 bg-red-900/95 backdrop-blur-sm border border-red-600 rounded-lg p-6 max-w-2xl max-h-[80vh] overflow-y-auto z-40 shadow-2xl">
--          <button
--            onClick={() => setShowCommands(false)}
--            className="absolute top-3 right-3 text-red-400 hover:text-red-300"
--          >
--            ✕
--          </button>
--          <h3 className="text-red-400 font-bold mb-4 text-lg">Command Reference</h3>
--
--          <div className="space-y-6">
--            {/* Navigation Commands */}
--            <div>
--              <h4 className="text-red-300 font-semibold mb-3">Navigation Commands</h4>
--              <div className="space-y-3">
--                {commandRef.navigation.map((cmd, index) => (
--                  <div key={index} className="border-l-2 border-red-700 pl-3">
--                    <div className="flex items-start gap-3">
--                      <code className="text-red-200 font-terminal text-sm">{cmd.command}</code>
--                      <span className="text-red-100 text-sm">- {cmd.description}</span>
--                    </div>
--                    {cmd.examples && (
--                      <div className="mt-1">
--                        <span className="text-red-300 text-xs">Examples: </span>
--                        <code className="text-red-200 text-xs">{cmd.examples.join(', ')}</code>
--                      </div>
--                    )}
--                  </div>
--                ))}
--              </div>
--            </div>
--
--            {/* Exploration Commands */}
--            <div>
--              <h4 className="text-red-300 font-semibold mb-3">Exploration Commands</h4>
--              <div className="space-y-3">
--                {commandRef.exploration.map((cmd, index) => (
--                  <div key={index} className="border-l-2 border-red-700 pl-3">
--                    <div className="flex items-start gap-3">
--                      <code className="text-red-200 font-terminal text-sm">{cmd.command}</code>
--                      <span className="text-red-100 text-sm">- {cmd.description}</span>
--                    </div>
--                    {cmd.options && (
--                      <div className="mt-1 ml-4">
--                        {Object.entries(cmd.options).map(([opt, desc]) => (
--                          <div key={opt} className="text-xs">
--                            <code className="text-red-300">{opt}</code>
--                            <span className="text-red-200 ml-2">{desc}</span>
--                          </div>
--                        ))}
--                      </div>
--                    )}
--                  </div>
--                ))}
--              </div>
--            </div>
--
--            {/* Utility Commands */}
--            <div>
--              <h4 className="text-red-300 font-semibold mb-3">Utility Commands</h4>
--              <div className="space-y-3">
--                {commandRef.utility.map((cmd, index) => (
--                  <div key={index} className="border-l-2 border-red-700 pl-3">
--                    <div className="flex items-start gap-3">
--                      <code className="text-red-200 font-terminal text-sm">{cmd.command}</code>
--                      <span className="text-red-100 text-sm">- {cmd.description}</span>
--                    </div>
--                    {cmd.variables && (
--                      <div className="mt-1 ml-4">
--                        {Object.entries(cmd.variables).map(([variable, desc]) => (
--                          <div key={variable} className="text-xs">
--                            <code className="text-red-300">{variable}</code>
--                            <span className="text-red-200 ml-2">{desc}</span>
--                          </div>
--                        ))}
--                      </div>
--                    )}
--                  </div>
--                ))}
--              </div>
--            </div>
--
--            {/* Game Commands */}
--            <div>
--              <h4 className="text-red-300 font-semibold mb-3">Game Commands</h4>
--              <div className="space-y-3">
--                {commandRef.game.map((cmd, index) => (
--                  <div key={index} className="border-l-2 border-red-700 pl-3">
--                    <div className="flex items-start gap-3">
--                      <code className="text-red-200 font-terminal text-sm">{cmd.command}</code>
--                      <span className="text-red-100 text-sm">- {cmd.description}</span>
--                    </div>
--                  </div>
--                ))}
--              </div>
--            </div>
--
--            {/* Special Paths */}
--            <div>
--              <h4 className="text-red-300 font-semibold mb-3">Special Paths</h4>
--              <div className="space-y-3">
--                {commandRef.special_paths.map((path, index) => (
--                  <div key={index} className="border-l-2 border-red-700 pl-3">
--                    <div className="flex items-start gap-3">
--                      <code className="text-red-200 font-terminal text-sm">{path.path}</code>
--                      <span className="text-red-100 text-sm">- {path.description}</span>
--                    </div>
--                    <div className="mt-1">
--                      <span className="text-red-300 text-xs">Examples: </span>
--                      <code className="text-red-200 text-xs">{path.examples.join(', ')}</code>
--                    </div>
--                  </div>
--                ))}
--              </div>
--            </div>
--          </div>
--        </div>
--      )}
        {/* Bottom Game Bar */}
        <div className="absolute bottom-0 left-0 right-0 bg-slate-800/90 backdrop-blur-sm border-t border-slate-700 p-3 z-20">
            </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/components/GameStatus.tsxadded

++import React from 'react';
++import Image from 'next/image';
++import TimerDisplay from './TimerDisplay';
++import { MoleDirection } from '@/lib/api';
++
++interface GameStatusProps {
++  // Timer props
++  gameTreeId: number | null;
++  sessionId: number | null;
++  onTimerExpire: () => Promise<void>;
++
++  // Score props
++  score: number;
++  molesKilled: number;
++
++  // Direction indicator props
++  moleDirection: MoleDirection | null;
++}
++
++const GameStatus: React.FC<GameStatusProps> = ({
++  gameTreeId,
++  sessionId,
++  onTimerExpire,
++  score,
++  molesKilled,
++  moleDirection,
++}) => {
++  // 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)`;
++  };
++
++  return (
++    <>
++      {/* 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">
++            <Image
++              src="/mole.svg"
++              alt="Mole"
++              width={32}
++              height={32}
++              className="w-8 h-8"
++            />
++            <div
++              className="text-white text-2xl"
++              style={{ transform: getArrowRotation(moleDirection.angle) }}
++            >
++              →
++            </div>
++          </div>
++        </div>
++      )}
++
++      {/* Score and Timer Display - Top Right */}
++      <div className="absolute top-4 right-4 flex flex-col gap-3 z-30">
++        {/* Timer */}
++        <TimerDisplay
++          gameTreeId={gameTreeId}
++          sessionId={sessionId}
++          onTimerExpire={onTimerExpire}
++        />
++
++        {/* Score */}
++        {molesKilled > 0 && (
++          <div className="bg-black/80 backdrop-blur-sm border border-green-500 rounded-lg p-3 shadow-2xl">
++            <div className="text-green-400 font-terminal text-sm">
++              <div>Score: {score}</div>
++              <div>Moles: {molesKilled}</div>
++            </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>
++    </>
++  );
++};
++
++export default GameStatus;

frontend/src/components/HelpModals.tsxadded

++import React from 'react';
++import { FHSDirectory, CommandReferenceResponse } from '@/lib/api';
++
++interface HelpModalsProps {
++  // Hints Modal
++  showHints: boolean;
++  setShowHints: (val: boolean) => void;
++  hints: string[];
++
++  // FHS Modal
++  showFHS: boolean;
++  setShowFHS: (val: boolean) => void;
++  fhsDirs: FHSDirectory[];
++
++  // Commands Modal
++  showCommands: boolean;
++  setShowCommands: (val: boolean) => void;
++  commandRef: CommandReferenceResponse | null;
++}
++
++const HelpModals: React.FC<HelpModalsProps> = ({
++  showHints,
++  setShowHints,
++  hints,
++  showFHS,
++  setShowFHS,
++  fhsDirs,
++  showCommands,
++  setShowCommands,
++  commandRef,
++}) => {
++  return (
++    <>
++      {/* 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
++            onClick={() => setShowHints(false)}
++            className="absolute top-2 right-2 text-yellow-400 hover:text-yellow-300"
++          >
++            ✕
++          </button>
++          <h3 className="text-yellow-400 font-bold mb-2">Hints:</h3>
++          {hints.map((hint, index) => (
++            <p key={index} className="text-yellow-200 text-sm">{hint}</p>
++          ))}
++        </div>
++      )}
++
++      {/* FHS Reference Modal */}
++      {showFHS && (
++        <div className="absolute top-16 left-4 bg-green-900/95 backdrop-blur-sm border border-green-600 rounded-lg p-6 max-w-2xl z-40 shadow-2xl">
++          <button
++            onClick={() => setShowFHS(false)}
++            className="absolute top-3 right-3 text-green-400 hover:text-green-300"
++          >
++            ✕
++          </button>
++          <h3 className="text-green-400 font-bold mb-4 text-lg">Filesystem Hierarchy Standard (FHS)</h3>
++          <div className="grid grid-cols-1 gap-2 max-h-96 overflow-y-auto">
++            {fhsDirs.map((dir, index) => (
++              <div key={index} className="flex items-start gap-3">
++                <code className="text-green-300 font-terminal text-sm font-bold min-w-[80px]">{dir.path}</code>
++                <span className="text-green-200 text-sm">{dir.desc}</span>
++              </div>
++            ))}
++          </div>
++        </div>
++      )}
++
++      {/* Command Reference Modal */}
++      {showCommands && commandRef && (
++        <div className="absolute top-16 left-4 bg-red-900/95 backdrop-blur-sm border border-red-600 rounded-lg p-6 max-w-2xl max-h-[80vh] overflow-y-auto z-40 shadow-2xl">
++          <button
++            onClick={() => setShowCommands(false)}
++            className="absolute top-3 right-3 text-red-400 hover:text-red-300"
++          >
++            ✕
++          </button>
++          <h3 className="text-red-400 font-bold mb-4 text-lg">Command Reference</h3>
++
++          <div className="space-y-6">
++            {/* Navigation Commands */}
++            <div>
++              <h4 className="text-red-300 font-semibold mb-3">Navigation Commands</h4>
++              <div className="space-y-3">
++                {commandRef.navigation.map((cmd, index) => (
++                  <div key={index} className="border-l-2 border-red-700 pl-3">
++                    <div className="flex items-start gap-3">
++                      <code className="text-red-200 font-terminal text-sm">{cmd.command}</code>
++                      <span className="text-red-100 text-sm">- {cmd.description}</span>
++                    </div>
++                    {cmd.examples && (
++                      <div className="mt-1">
++                        <span className="text-red-300 text-xs">Examples: </span>
++                        <code className="text-red-200 text-xs">{cmd.examples.join(', ')}</code>
++                      </div>
++                    )}
++                  </div>
++                ))}
++              </div>
++            </div>
++
++            {/* Exploration Commands */}
++            <div>
++              <h4 className="text-red-300 font-semibold mb-3">Exploration Commands</h4>
++              <div className="space-y-3">
++                {commandRef.exploration.map((cmd, index) => (
++                  <div key={index} className="border-l-2 border-red-700 pl-3">
++                    <div className="flex items-start gap-3">
++                      <code className="text-red-200 font-terminal text-sm">{cmd.command}</code>
++                      <span className="text-red-100 text-sm">- {cmd.description}</span>
++                    </div>
++                    {cmd.options && (
++                      <div className="mt-1 ml-4">
++                        {Object.entries(cmd.options).map(([opt, desc]) => (
++                          <div key={opt} className="text-xs">
++                            <code className="text-red-300">{opt}</code>
++                            <span className="text-red-200 ml-2">{desc}</span>
++                          </div>
++                        ))}
++                      </div>
++                    )}
++                  </div>
++                ))}
++              </div>
++            </div>
++
++            {/* Utility Commands */}
++            <div>
++              <h4 className="text-red-300 font-semibold mb-3">Utility Commands</h4>
++              <div className="space-y-3">
++                {commandRef.utility.map((cmd, index) => (
++                  <div key={index} className="border-l-2 border-red-700 pl-3">
++                    <div className="flex items-start gap-3">
++                      <code className="text-red-200 font-terminal text-sm">{cmd.command}</code>
++                      <span className="text-red-100 text-sm">- {cmd.description}</span>
++                    </div>
++                    {cmd.variables && (
++                      <div className="mt-1 ml-4">
++                        {Object.entries(cmd.variables).map(([variable, desc]) => (
++                          <div key={variable} className="text-xs">
++                            <code className="text-red-300">{variable}</code>
++                            <span className="text-red-200 ml-2">{desc}</span>
++                          </div>
++                        ))}
++                      </div>
++                    )}
++                  </div>
++                ))}
++              </div>
++            </div>
++
++            {/* Game Commands */}
++            <div>
++              <h4 className="text-red-300 font-semibold mb-3">Game Commands</h4>
++              <div className="space-y-3">
++                {commandRef.game.map((cmd, index) => (
++                  <div key={index} className="border-l-2 border-red-700 pl-3">
++                    <div className="flex items-start gap-3">
++                      <code className="text-red-200 font-terminal text-sm">{cmd.command}</code>
++                      <span className="text-red-100 text-sm">- {cmd.description}</span>
++                    </div>
++                  </div>
++                ))}
++              </div>
++            </div>
++
++            {/* Special Paths */}
++            <div>
++              <h4 className="text-red-300 font-semibold mb-3">Special Paths</h4>
++              <div className="space-y-3">
++                {commandRef.special_paths.map((path, index) => (
++                  <div key={index} className="border-l-2 border-red-700 pl-3">
++                    <div className="flex items-start gap-3">
++                      <code className="text-red-200 font-terminal text-sm">{path.path}</code>
++                      <span className="text-red-100 text-sm">- {path.description}</span>
++                    </div>
++                    <div className="mt-1">
++                      <span className="text-red-300 text-xs">Examples: </span>
++                      <code className="text-red-200 text-xs">{path.examples.join(', ')}</code>
++                    </div>
++                  </div>
++                ))}
++              </div>
++            </div>
++          </div>
++        </div>
++      )}
++    </>
++  );
++};
++
++export default HelpModals;

frontend/src/components/Terminal.tsxadded

++import React, { useRef, useEffect } from 'react';
++
++interface CommandHistoryEntry {
++  command: string;
++  output: string;
++  success: boolean;
++}
++
++interface TerminalProps {
++  commandHistory: CommandHistoryEntry[];
++  command: string;
++  setCommand: (cmd: string) => void;
++  executeCommand: (cmd: string) => void;
++  executing: boolean;
++  currentPath: string;
++  terminalMinimized: boolean;
++  setTerminalMinimized: (val: boolean) => void;
++  onGetCommandReference: () => void;
++  onGetHints: () => void;
++  onGetFHSReference: () => void;
++}
++
++const Terminal: React.FC<TerminalProps> = ({
++  commandHistory,
++  command,
++  setCommand,
++  executeCommand,
++  executing,
++  currentPath,
++  terminalMinimized,
++  setTerminalMinimized,
++  onGetCommandReference,
++  onGetHints,
++  onGetFHSReference,
++}) => {
++  const terminalRef = useRef<HTMLDivElement>(null);
++  const inputRef = useRef<HTMLInputElement>(null);
++
++  // Auto-scroll terminal to bottom
++  useEffect(() => {
++    if (terminalRef.current) {
++      terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
++    }
++  }, [commandHistory]);
++
++  // Auto-focus input after command execution
++  useEffect(() => {
++    if (!executing && inputRef.current && !terminalMinimized) {
++      inputRef.current.focus();
++    }
++  }, [executing, terminalMinimized]);
++
++  // Terminal color scheme - always dark mode
++  const terminalColors = {
++    frame: 'bg-stone-200 border-stone-300',
++    header: 'bg-stone-300 border-stone-400',
++    headerText: 'text-stone-900',
++    content: 'bg-black',
++    closeButton: 'text-stone-700 hover:text-stone-900'
++  };
++
++  return (
++    <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]'
++    }`}>
++      {/* Terminal Header */}
++      <div className={`flex items-center justify-between ${terminalColors.header} px-4 py-2 rounded-t-lg border-b`}>
++        <div className="flex items-center gap-2">
++          <div className="flex gap-1.5">
++            <button
++              onClick={onGetCommandReference}
++              className="w-3.5 h-3.5 bg-red-500 hover:bg-red-400 rounded-full flex items-center justify-center transition-colors relative"
++              title="Command Reference"
++            >
++              <span className="text-[8px] font-bold text-gray-900 absolute">×</span>
++            </button>
++            <button
++              onClick={onGetHints}
++              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={onGetFHSReference}
++              className="w-3.5 h-3.5 bg-green-500 hover:bg-green-400 rounded-full flex items-center justify-center transition-colors relative"
++              title="FHS Directory Reference"
++            >
++              <span className="text-[9px] font-bold text-gray-900 absolute">/</span>
++            </button>
++          </div>
++          <h3 className={`text-sm font-medium ${terminalColors.headerText} ml-2`}>bash</h3>
++        </div>
++        <button
++          onClick={() => setTerminalMinimized(!terminalMinimized)}
++          className={`${terminalColors.closeButton} transition`}
++        >
++          {terminalMinimized ? '▼' : '▲'}
++        </button>
++      </div>
++
++      {/* Terminal Content */}
++      {!terminalMinimized && (
++        <div
++          ref={terminalRef}
++          className={`${terminalColors.content} p-4 font-terminal text-base h-[300px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-700`}
++          onClick={() => inputRef.current?.focus()}
++        >
++          {commandHistory.map((entry, index) => (
++            <div key={index} className="mb-1">
++              <div className="flex items-start font-terminal">
++                <span className="text-green-400">groundskeeper@molehill</span>
++                <span className="text-gray-400 mx-1">::</span>
++                <span className="text-blue-400">{entry.command.startsWith('Hunt started!') ? '~' : currentPath}</span>
++                <span className="text-gray-400 ml-1">$</span>
++                <span className={`ml-2 ${entry.command.startsWith('Hunt started!') ? 'text-yellow-400' : 'text-gray-300'}`}>
++                  {entry.command.startsWith('Hunt started!') ? '' : entry.command}
++                </span>
++              </div>
++              {entry.output && (
++                <div className={`${entry.success ? 'text-gray-300' : 'text-red-400'} ml-0 mt-1 font-terminal whitespace-pre-wrap`}>
++                  {entry.output.split('\n').map((line, i) => {
++                    // Special coloring for mole detection messages
++                    let lineClass = '';
++                    if (line.includes('New mole detected')) {
++                      lineClass = 'text-yellow-400';
++                    } else if (line.includes('⚠️')) {
++                      // Timer warnings
++                      if (line.includes('CRITICAL')) {
++                        lineClass = 'text-red-500';
++                      } else if (line.includes('ALERT')) {
++                        lineClass = 'text-orange-400';
++                      } else if (line.includes('WARNING')) {
++                        lineClass = 'text-yellow-400';
++                      }
++                    }
++
++                    return (
++                      <div key={i} className={lineClass || ''}>
++                        {line}
++                      </div>
++                    );
++                  })}
++                </div>
++              )}
++            </div>
++          ))}
++
++          {/* Current input line */}
++          <div className="flex items-start font-terminal">
++            <span className="text-green-400">groundskeeper@molehill</span>
++            <span className="text-gray-400 mx-1">::</span>
++            <span className="text-blue-400">{currentPath}</span>
++            <span className="text-gray-400 ml-1">$</span>
++            <div className="flex-1 ml-2">
++              <div className="relative inline-block">
++                <span className="text-gray-300 font-terminal">{command}</span>
++                <span
++                  className="text-gray-300 font-terminal"
++                  style={{
++                    animation: 'blink 1s step-end infinite'
++                  }}
++                >
++                  _
++                </span>
++                <input
++                  ref={inputRef}
++                  type="text"
++                  value={command}
++                  onChange={(e) => setCommand(e.target.value)}
++                  onKeyDown={(e) => {
++                    if (e.key === 'Enter') {
++                      e.preventDefault();
++                      executeCommand(command);
++                    }
++                  }}
++                  disabled={executing}
++                  className="absolute inset-0 w-full bg-transparent text-transparent outline-none caret-transparent font-terminal"
++                  placeholder=""
++                  autoFocus
++                  spellCheck={false}
++                  autoComplete="off"
++                  autoCorrect="off"
++                  autoCapitalize="off"
++                />
++              </div>
++            </div>
++          </div>
++        </div>
++      )}
++    </div>
++  );
++};
++
++export default Terminal;

`@@ -11,7 +11,7 @@` const spaceMono = Anonymous_Pro({
11	});	11	});
12		12
13	export const metadata: Metadata = {	13	export const metadata: Metadata = {
14	- title: "Bashamole",	14	+ title: "bashamole",
15	description: "A game to practice Unix navigation by hunting moles in the filesystem",	15	description: "A game to practice Unix navigation by hunting moles in the filesystem",
16	icons: {	16	icons: {
17	icon: [	17	icon: [