`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';
++import { gameApi, CommandResponse, TreeNode, GameStats } from '@/lib/api';
--
--interface CommandExecutionState {
--  executing: boolean;
--  commandHistory: CommandHistoryEntry[];
--}
  interface CommandHistoryEntry {
    command: string;
+ }
  export const useCommandExecution = (
--  gameTreeId: number | null,
++  treeId: number | null,
    sessionId: number | null,
--  onLocationChange?: (newPath: string) => void,
++  onLocationChange: (newLocation: string) => void,
--  onMoleKilled?: (response: CommandResponse) => void,
++  onMoleKilled: (response: CommandResponse) => void,
--  onTreeUpdate?: (updater: (tree: TreeNode) => TreeNode) => void
++  onTreeUpdate: (updater: (tree: TreeNode) => TreeNode) => void,
++  onGameComplete?: (stats: GameStats) => void
  ) => {
--  const [state, setState] = useState<CommandExecutionState>({
++  const [executing, setExecuting] = useState(false);
--    executing: false,
++  const [commandHistory, setCommandHistory] = useState<CommandHistoryEntry[]>([]);
--    commandHistory: [],
--  });
    const addToHistory = useCallback((entry: CommandHistoryEntry) => {
--    setState(prev => ({
++    setCommandHistory(prev => [...prev, entry]);
--      ...prev,
--      commandHistory: [...prev.commandHistory, entry],
--    }));
    }, []);
    const clearHistory = useCallback(() => {
--    setState(prev => ({
++    setCommandHistory([]);
--      ...prev,
--      commandHistory: [],
--    }));
    }, []);
    const executeCommand = useCallback(async (cmd: string) => {
--    if (!gameTreeId || !cmd.trim() || state.executing) return;
++    if (!treeId || !cmd.trim() || executing) return;
--    setState(prev => ({ ...prev, executing: true }));
++    setExecuting(true);
--
      try {
--      const response = await gameApi.executeCommand(
++      const response = await gameApi.executeCommand(treeId, cmd, sessionId || undefined);
--        gameTreeId,
--        cmd,
--        sessionId || undefined
--      );
--
--      // Build output with timer warnings
--      let fullOutput = response.output;
--      // Add timer warnings if present
++      // Build output with timer warnings
++      let output = response.output;
        if (response.timer_warnings && response.timer_warnings.length > 0) {
--        const warnings = response.timer_warnings.map(w =>
++        const warnings = response.timer_warnings.map(w => `⚠️ ${w.level}: ${w.message}`).join('\n');
--          `⚠️ ${w.level}: ${w.message}`
++        output = warnings + (output ? '\n' + output : '');
--        ).join('\n');
--        fullOutput = warnings + (fullOutput ? '\n' + fullOutput : '');
+       }
--
++
--      // Add to command history
        addToHistory({
          command: cmd,
--        output: fullOutput,
++        output,
          success: response.success,
        });
--      // Handle location change
++      // Update player location if it changed
--      if (response.current_path && onLocationChange) {
++      if (response.current_path) {
          onLocationChange(response.current_path);
+       }
--      // Handle mole spawning
++      // Handle mole killed
--      if (response.mole_spawned && onMoleKilled) {
++      if (response.mole_spawned) {
--        // 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}!`;
--        }
          onMoleKilled(response);
+       }
--      // Legacy: Handle game won
++      // Handle game completion
--      if (response.game_won && !response.mole_spawned && onTreeUpdate) {
++      if (response.game_completed && response.final_stats && onGameComplete) {
--        onTreeUpdate((tree) => ({
++        onGameComplete(response.final_stats);
--          ...tree,
--          has_mole: true,
--        }));
+       }
--      return response;
++      // Handle mole location updates in tree
--    } catch {
++      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,
++    executing,
--    commandHistory: state.commandHistory,
++    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 {
++export interface LeaderboardEntry {
--  tree: FileSystemTree;
++  rank: number;
--  session_id: number;
++  player_name: string;
--  mole_hint: string;
++  score: number;
--  home_directory: string;
++  moles_killed: number;
--  initial_timer?: number;
++  moles_escaped: number;
--  timer_reason?: string;
++  commands_used: number;
--  timer_distance?: 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 = {
      return response.data;
    },
--    getTimerStatus: async (treeId: number): Promise<TimerStatusResponse> => {
++  getTimerStatus: async (treeId: number): Promise<TimerStatusResponse> => {
      const response = await api.get(`/trees/filesystem-trees/${treeId}/timer_status/`);
      return response.data;
    },
      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;
++  },
  };