`ce66300`

frontend leaderboard

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

SHA: ce663003a5532ef56bbe6fad85d05d173ba680c2
Parents: fbe7527
Tree: d1432aa

4 changed files

Status	File	+	-
M	`frontend/src/components/Game.tsx`	28	3
A	`frontend/src/components/GameOverModal.tsx`	208	0
M	`frontend/src/hooks/useCommandExecution.ts`	47	63
M	`frontend/src/lib/api.ts`	60	32

frontend/src/components/Game.tsxmodified

  "use client";
 -import React, { useEffect, useCallback } from 'react';
 +import React, { useEffect, useCallback, useState } from 'react';
  import TreeVisualizer from './TreeVisualizer';
  import Terminal from './Terminal';
  import HelpModals from './HelpModals';
  import GameStatus from './GameStatus';
 -import { gameApi, CommandResponse } from '@/lib/api';
 +import GameOverModal from './GameOverModal';
 +import { gameApi, CommandResponse, GameStats } from '@/lib/api';
  // Import our custom hooks
  import { useGameState } from '@/hooks/useGameState';
    const { updateTreeDataToShowMole, removeMoleFromTree } = useTreeUtils();
 +  // Game over modal state
 +  const [showGameOver, setShowGameOver] = useState(false);
 +  const [finalStats, setFinalStats] = useState<GameStats | null>(null);
++
    // Handle mole kill animation and updates
    const handleMoleKilled = useCallback((response: CommandResponse) => {
      if (!gameState.tree) return;
      gameState.sessionId,
      updatePlayerLocation,
      handleMoleKilled,
 -    updateTreeData
 +    updateTreeData,
 +    (stats) => {  // Add this callback for game completion
 +      setFinalStats(stats);
 +      setShowGameOver(true);
 +    }
    );
    // Wrap executeCommand to clear the command input
      executeCommand(`cd ${path}`);
    }, [executeCommand]);
 +  // Handler for starting a new game from the modal
 +  const handleNewGameFromModal = () => {
 +    setShowGameOver(false);
 +    setFinalStats(null);
 +    initializeGame();
 +  };
++
    // Start game on mount
    useEffect(() => {
      initializeGame();
        {/* Help Modals */}
        <HelpModals {...helpModals} />
 +      {/* Game Over Modal */}
 +      <GameOverModal
 +        isOpen={showGameOver}
 +        gameStats={finalStats}
 +        sessionId={gameState.sessionId}
 +        onClose={() => setShowGameOver(false)}
 +        onNewGame={handleNewGameFromModal}
 +      />
++
        {/* 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 className="max-w-7xl mx-auto flex justify-between items-center px-4">

frontend/src/components/GameOverModal.tsxadded

 +import React, { useState, useEffect } from 'react';
 +import { GameStats, LeaderboardEntry, gameApi } from '@/lib/api';
++
 +interface GameOverModalProps {
 +  isOpen: boolean;
 +  gameStats: GameStats | null;
 +  sessionId: number | null;
 +  onClose: () => void;
 +  onNewGame: () => void;
 +}
++
 +const GameOverModal: React.FC<GameOverModalProps> = ({
 +  isOpen,
 +  gameStats,
 +  sessionId,
 +  onClose,
 +  onNewGame,
 +}) => {
 +  const [playerName, setPlayerName] = useState('');
 +  const [submitted, setSubmitted] = useState(false);
 +  const [leaderboard, setLeaderboard] = useState<LeaderboardEntry[]>([]);
 +  const [leaderboardPosition, setLeaderboardPosition] = useState<number | null>(null);
 +  const [showLeaderboard, setShowLeaderboard] = useState(false);
 +  const [loading, setLoading] = useState(false);
++
 +  useEffect(() => {
 +    if (isOpen && !submitted) {
 +      // Load leaderboard when modal opens
 +      loadLeaderboard();
 +    }
 +  }, [isOpen, submitted]);
++
 +  const loadLeaderboard = async () => {
 +    try {
 +      const response = await gameApi.getLeaderboard();
 +      setLeaderboard(response.leaderboard);
 +    } catch (error) {
 +      console.error('Failed to load leaderboard:', error);
 +    }
 +  };
++
 +  const handleSubmit = async (e: React.FormEvent | React.MouseEvent) => {
 +    e.preventDefault();
 +    if (!sessionId || submitted) return;
++
 +    setLoading(true);
 +    try {
 +      const response = await gameApi.savePlayerName(
 +        sessionId,
 +        playerName.trim() || 'Anonymous'
 +      );
 +      setLeaderboardPosition(response.leaderboard_position);
 +      setSubmitted(true);
 +      await loadLeaderboard();
 +      setShowLeaderboard(true);
 +    } catch (error) {
 +      console.error('Failed to save score:', error);
 +    } finally {
 +      setLoading(false);
 +    }
 +  };
++
 +  if (!isOpen || !gameStats) return null;
++
 +  return (
 +    <div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50">
 +      <div className="bg-gray-900 border-2 border-green-500 rounded-lg p-8 max-w-2xl w-full mx-4 shadow-2xl">
 +        {/* Header */}
 +        <h2 className="text-3xl font-bold text-green-400 mb-6 text-center font-terminal">
 +          GAME OVER
 +        </h2>
++
 +        {/* Score Display */}
 +        {!showLeaderboard && (
 +          <>
 +            <div className="bg-black/50 border border-green-500/50 rounded-lg p-6 mb-6">
 +              <div className="grid grid-cols-2 gap-4 text-green-300 font-terminal">
 +                <div>
 +                  <span className="text-gray-500">Final Score:</span>
 +                  <div className="text-2xl font-bold text-green-400">{gameStats.score}</div>
 +                </div>
 +                <div>
 +                  <span className="text-gray-500">Moles Killed:</span>
 +                  <div className="text-2xl font-bold">{gameStats.moles_killed}</div>
 +                </div>
 +                <div>
 +                  <span className="text-gray-500">Moles Escaped:</span>
 +                  <div className="text-xl text-red-400">{gameStats.moles_escaped}</div>
 +                </div>
 +                <div>
 +                  <span className="text-gray-500">Commands Used:</span>
 +                  <div className="text-xl">{gameStats.commands_used}</div>
 +                </div>
 +                <div className="col-span-2">
 +                  <span className="text-gray-500">Time Played:</span>
 +                  <div className="text-xl">{gameStats.time_taken}</div>
 +                </div>
 +              </div>
 +            </div>
++
 +            {/* Name Input */}
 +            {!submitted ? (
 +              <div className="mb-6">
 +                <label className="block text-green-400 mb-2 font-terminal">
 +                  Enter your name for the leaderboard:
 +                </label>
 +                <div className="flex gap-2">
 +                  <input
 +                    type="text"
 +                    value={playerName}
 +                    onChange={(e) => setPlayerName(e.target.value)}
 +                    onKeyDown={(e) => {
 +                      if (e.key === 'Enter') {
 +                        e.preventDefault();
 +                        handleSubmit(e);
 +                      }
 +                    }}
 +                    placeholder="Anonymous"
 +                    maxLength={20}
 +                    className="flex-1 bg-black border border-green-500 text-green-300 px-4 py-2 rounded font-terminal focus:outline-none focus:border-green-400"
 +                    autoFocus
 +                    disabled={loading}
 +                  />
 +                  <button
 +                    onClick={handleSubmit}
 +                    disabled={loading}
 +                    className="px-6 py-2 bg-green-600 hover:bg-green-700 text-white rounded font-terminal transition disabled:opacity-50"
 +                  >
 +                    {loading ? 'Saving...' : 'Submit'}
 +                  </button>
 +                </div>
 +              </div>
 +            ) : (
 +              <div className="text-center mb-6">
 +                <p className="text-green-400 font-terminal text-lg">
 +                  Score saved! You ranked #{leaderboardPosition}
 +                </p>
 +                <button
 +                  onClick={() => setShowLeaderboard(true)}
 +                  className="mt-2 text-green-300 hover:text-green-200 underline font-terminal"
 +                >
 +                  View Leaderboard
 +                </button>
 +              </div>
 +            )}
 +          </>
 +        )}
++
 +        {/* Leaderboard */}
 +        {showLeaderboard && (
 +          <div className="bg-black/50 border border-green-500/50 rounded-lg p-4 mb-6 max-h-96 overflow-y-auto">
 +            <h3 className="text-xl font-bold text-green-400 mb-4 font-terminal">Top Scores</h3>
 +            <div className="space-y-2">
 +              {leaderboard.map((entry) => (
 +                <div
 +                  key={`${entry.player_name}-${entry.completed_at}`}
 +                  className={`flex justify-between items-center p-2 rounded ${
 +                    entry.score === gameStats.score && submitted
 +                      ? 'bg-green-900/50 border border-green-500'
 +                      : 'hover:bg-gray-800/50'
 +                  }`}
 +                >
 +                  <div className="flex items-center gap-4 font-terminal">
 +                    <span className="text-green-500 font-bold w-8">#{entry.rank}</span>
 +                    <span className="text-green-300">{entry.player_name}</span>
 +                  </div>
 +                  <div className="flex items-center gap-6 text-sm font-terminal">
 +                    <span className="text-green-400">{entry.score} pts</span>
 +                    <span className="text-gray-500">{entry.moles_killed} moles</span>
 +                    <span className="text-gray-600">{entry.commands_used} cmds</span>
 +                  </div>
 +                </div>
 +              ))}
 +            </div>
 +          </div>
 +        )}
++
 +        {/* Action Buttons */}
 +        <div className="flex justify-center gap-4">
 +          <button
 +            onClick={onNewGame}
 +            className="px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg font-terminal transition transform hover:scale-105"
 +          >
 +            New Game
 +          </button>
 +          {!showLeaderboard && submitted && (
 +            <button
 +              onClick={() => setShowLeaderboard(true)}
 +              className="px-6 py-3 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-terminal transition"
 +            >
 +              View Leaderboard
 +            </button>
 +          )}
 +          {showLeaderboard && (
 +            <button
 +              onClick={() => setShowLeaderboard(false)}
 +              className="px-6 py-3 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-terminal transition"
 +            >
 +              Back to Score
 +            </button>
 +          )}
 +        </div>
 +      </div>
 +    </div>
 +  );
 +};
++
 +export default GameOverModal;

frontend/src/hooks/useCommandExecution.tsmodified

 +// src/hooks/useCommandExecution.ts
  import { useState, useCallback } from 'react';
 -import { gameApi, CommandResponse, TreeNode } from '@/lib/api';
+-
 -interface CommandExecutionState {
 -  executing: boolean;
 -  commandHistory: CommandHistoryEntry[];
 -}
 +import { gameApi, CommandResponse, TreeNode, GameStats } from '@/lib/api';
  interface CommandHistoryEntry {
    command: string;
+ }
  export const useCommandExecution = (
 -  gameTreeId: number | null,
 +  treeId: number | null,
    sessionId: number | null,
 -  onLocationChange?: (newPath: string) => void,
 -  onMoleKilled?: (response: CommandResponse) => void,
 -  onTreeUpdate?: (updater: (tree: TreeNode) => TreeNode) => void
 +  onLocationChange: (newLocation: string) => void,
 +  onMoleKilled: (response: CommandResponse) => void,
 +  onTreeUpdate: (updater: (tree: TreeNode) => TreeNode) => void,
 +  onGameComplete?: (stats: GameStats) => void
  ) => {
 -  const [state, setState] = useState<CommandExecutionState>({
 -    executing: false,
 -    commandHistory: [],
 -  });
 +  const [executing, setExecuting] = useState(false);
 +  const [commandHistory, setCommandHistory] = useState<CommandHistoryEntry[]>([]);
    const addToHistory = useCallback((entry: CommandHistoryEntry) => {
 -    setState(prev => ({
 -      ...prev,
 -      commandHistory: [...prev.commandHistory, entry],
 -    }));
 +    setCommandHistory(prev => [...prev, entry]);
    }, []);
    const clearHistory = useCallback(() => {
 -    setState(prev => ({
 -      ...prev,
 -      commandHistory: [],
 -    }));
 +    setCommandHistory([]);
    }, []);
    const executeCommand = useCallback(async (cmd: string) => {
 -    if (!gameTreeId || !cmd.trim() || state.executing) return;
+-
 -    setState(prev => ({ ...prev, executing: true }));
 +    if (!treeId || !cmd.trim() || executing) return;
 +    setExecuting(true);
      try {
 -      const response = await gameApi.executeCommand(
 -        gameTreeId,
 -        cmd,
 -        sessionId || undefined
 -      );
 +      const response = await gameApi.executeCommand(treeId, cmd, sessionId || undefined);
        // Build output with timer warnings
 -      let fullOutput = response.output;
+-
 -      // Add timer warnings if present
 +      let output = response.output;
        if (response.timer_warnings && response.timer_warnings.length > 0) {
 -        const warnings = response.timer_warnings.map(w =>
 -          `⚠️ ${w.level}: ${w.message}`
 -        ).join('\n');
 -        fullOutput = warnings + (fullOutput ? '\n' + fullOutput : '');
 +        const warnings = response.timer_warnings.map(w => `⚠️ ${w.level}: ${w.message}`).join('\n');
 +        output = warnings + (output ? '\n' + output : '');
+       }
 -      // Add to command history
        addToHistory({
          command: cmd,
 -        output: fullOutput,
 +        output,
          success: response.success,
        });
 -      // Handle location change
 -      if (response.current_path && onLocationChange) {
 +      // Update player location if it changed
 +      if (response.current_path) {
          onLocationChange(response.current_path);
+       }
 -      // Handle mole spawning
 -      if (response.mole_spawned && onMoleKilled) {
 -        // Format the output to include timer info on new line
 -        if (response.timer_reason && !response.output.includes('New mole detected')) {
 -          response.output += `\nNew mole detected ${response.timer_reason}!`;
 -        }
 +      // Handle mole killed
 +      if (response.mole_spawned) {
          onMoleKilled(response);
+       }
 -      // Legacy: Handle game won
 -      if (response.game_won && !response.mole_spawned && onTreeUpdate) {
 -        onTreeUpdate((tree) => ({
 -          ...tree,
 -          has_mole: true,
 -        }));
 +      // Handle game completion
 +      if (response.game_completed && response.final_stats && onGameComplete) {
 +        onGameComplete(response.final_stats);
+       }
 -      return response;
 -    } catch {
 +      // Handle mole location updates in tree
 +      if (response.new_mole_location) {
 +        onTreeUpdate((tree) => {
 +          const updateMoleInTree = (node: TreeNode, molePath: string): TreeNode => {
 +            return {
 +              ...node,
 +              has_mole: node.path === molePath,
 +              children: node.children.map(child => updateMoleInTree(child, molePath))
 +            };
 +          };
 +          return updateMoleInTree(tree, response.new_mole_location);
 +        });
 +      }
 +    } catch (error) {
 +      console.error('Command execution failed:', error);
        addToHistory({
          command: cmd,
 -        output: 'Error: Failed to execute command. Check your connection.',
 +        output: 'Error: Failed to execute command',
          success: false,
        });
 -      return null;
      } finally {
 -      setState(prev => ({ ...prev, executing: false }));
 +      setExecuting(false);
+     }
 -  }, [gameTreeId, sessionId, state.executing, addToHistory, onLocationChange, onMoleKilled, onTreeUpdate]);
 +  }, [treeId, sessionId, executing, onLocationChange, onMoleKilled, onTreeUpdate, onGameComplete, addToHistory]);
    return {
 -    executing: state.executing,
 -    commandHistory: state.commandHistory,
 +    executing,
 +    commandHistory,
      executeCommand,
      addToHistory,
      clearHistory,

frontend/src/lib/api.tsmodified

    angle: number;
+ }
 +export interface TimerWarning {
 +  level: string;
 +  message: string;
 +}
++
 +export interface GameStats {
 +  score: number;
 +  moles_killed: number;
 +  moles_escaped: number;
 +  commands_used: number;
 +  time_taken: string;
 +  directories_visited: number;
 +}
++
  export interface CommandResponse {
    command: string;
    success: boolean;
    score?: number;
    moles_killed?: number;
    new_mole_location?: string;
 +  timer_remaining?: number;
 +  timer_warnings?: TimerWarning[];
 +  new_timer?: number;
 +  timer_reason?: string;
 +  timer_distance?: number;
 +  game_completed?: boolean;
 +  session_completed?: boolean;
 +  final_stats?: GameStats;
+ }
  export interface GameCreationResponse {
    session_id: number;
    mole_hint: string;
    home_directory: string;
 +  initial_timer?: number;
 +  timer_reason?: string;
 +  timer_distance?: number;
+ }
  export interface HintResponse {
    special_paths: SpecialPath[];
+ }
 -export interface TimerWarning {
 -  level: string;
 -  message: string;
 -}
+-
 -export interface CommandResponse {
 -  command: string;
 -  success: boolean;
 -  output: string;
 -  current_path: string;
 -  game_won?: boolean;
 -  mole_spawned?: boolean;
 -  mole_direction?: MoleDirection | null;
 -  score?: number;
 -  moles_killed?: number;
 -  new_mole_location?: string;
 -  timer_remaining?: number;
 -  timer_warnings?: TimerWarning[];
 -  new_timer?: number;
 -  timer_reason?: string;
 -  timer_distance?: number;
 -}
+-
  export interface TimerStatusResponse {
    remaining: number;
    total: number;
    message?: string;
+ }
 -export interface GameCreationResponse {
 -  tree: FileSystemTree;
 -  session_id: number;
 -  mole_hint: string;
 -  home_directory: string;
 -  initial_timer?: number;
 -  timer_reason?: string;
 -  timer_distance?: number;
 +export interface LeaderboardEntry {
 +  rank: number;
 +  player_name: string;
 +  score: number;
 +  moles_killed: number;
 +  moles_escaped: number;
 +  commands_used: number;
 +  time_taken: string;
 +  completed_at: string;
 +}
++
 +export interface LeaderboardResponse {
 +  leaderboard: LeaderboardEntry[];
 +  total_games: number;
 +}
++
 +export interface SavePlayerNameResponse {
 +  success: boolean;
 +  player_name: string;
 +  score: number;
 +  leaderboard_position: number;
+ }
  export const gameApi = {
      const response = await api.get(url + params);
      return response.data;
    },
++
 +  savePlayerName: async (sessionId: number, playerName: string): Promise<SavePlayerNameResponse> => {
 +    const response = await api.post('/trees/game-sessions/save_player_name/', {
 +      session_id: sessionId,
 +      player_name: playerName,
 +    });
 +    return response.data;
 +  },
++
 +  getLeaderboard: async (): Promise<LeaderboardResponse> => {
 +    const response = await api.get('/trees/game-sessions/leaderboard/');
 +    return response.data;
 +  },
  };