`6ea57e5`

frontend progression, timer, api

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

SHA: 6ea57e5667056293c39adfcaf64e9976d497c5a9
Parents: 49d9fb6
Tree: d7f0f4a

3 changed files

Status	File	+	-
M	`frontend/src/components/Game.tsx`	116	13
A	`frontend/src/components/TimerDisplay.tsx`	98	0
M	`frontend/src/lib/api.ts`	75	0

frontend/src/components/Game.tsxmodified

  import React, { useState, useEffect, useRef } from 'react';
  import Image from 'next/image';
  import TreeVisualizer from './TreeVisualizer';
 +import TimerDisplay from './TimerDisplay';
  import { gameApi, FileSystemTree, FHSDirectory, CommandReferenceResponse, MoleDirection, TreeNode } from '@/lib/api';
  interface CommandHistoryEntry {
          locationContext = "You've been placed somewhere in the filesystem. ";
+       }
 +      // Add timer info to starting message
 +      let timerInfo = '';
 +      if (response.initial_timer && response.timer_reason) {
 +        timerInfo = `\nTimer: ${response.initial_timer}s (mole is ${response.timer_reason})`;
 +      }
++
        setCommandHistory([{
          command: 'Hunt started!',
 -        output: `${response.mole_hint}\n${locationContext}Your home directory is ${homeDir}.\nUse 'pwd' to see where you are, 'cd ~' to go home.\nType "help" for available commands.`,
 +        output: `${response.mole_hint}\n${locationContext}Your home directory is ${homeDir}.\nUse 'pwd' to see where you are, 'cd ~' to go home.${timerInfo}\nType "help" for available commands.`,
          success: true,
        }]);
        setHints([]);
          gameState.sessionId || undefined
        );
 +      // Build output with timer warnings
 +      let fullOutput = response.output;
++
 +      // Add timer warnings if present
 +      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 : '');
 +      }
++
        // Update command history
        setCommandHistory(prev => [...prev, {
          command: cmd,
 -        output: response.output,
 +        output: fullOutput,
          success: response.success,
        }]);
          // Update score and moles killed
          if (response.score !== undefined) setScore(response.score);
          if (response.moles_killed !== undefined) setMolesKilled(response.moles_killed);
++
 +        // 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}!`;
 +        }
+       }
        // Legacy: Check if game won (for old backend compatibility)
          </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>
 +      {/* Score and Timer Display - Top Right */}
 +      <div className="absolute top-4 right-4 flex flex-col gap-3 z-30">
 +        {/* Timer */}
 +        <TimerDisplay
 +          gameTreeId={gameState.tree?.id || null}
 +          sessionId={gameState.sessionId}
 +          onTimerExpire={async () => {
 +            // Handle timer expiration - check for mole escape
 +            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);
 +              }
 +            }
 +          }}
 +        />
++
 +        {/* 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>
 -      )}
 +        )}
 +      </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 ${
                  </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) => (
 -                      <div key={i}>{line}</div>
 -                    ))}
 +                    {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>

frontend/src/components/TimerDisplay.tsxadded

 +import React, { useEffect, useState } from 'react';
++
 +interface TimerDisplayProps {
 +  gameTreeId: number | null;
 +  sessionId: number | null;
 +  onTimerExpire?: () => void;
 +}
++
 +const TimerDisplay: React.FC<TimerDisplayProps> = ({
 +  gameTreeId,
 +  sessionId,
 +  onTimerExpire
 +}) => {
 +  const [timerData, setTimerData] = useState({
 +    remaining: 60,
 +    warningLevel: null as string | null,
 +    expired: false,
 +    paused: false
 +  });
++
 +  useEffect(() => {
 +    if (!gameTreeId) return;
++
 +    const checkTimer = async () => {
 +      try {
 +        const response = await fetch(
 +          `${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api'}/trees/filesystem-trees/${gameTreeId}/timer_status/`
 +        );
++
 +        if (response.ok) {
 +          const data = await response.json();
 +          setTimerData({
 +            remaining: data.remaining,
 +            warningLevel: data.warning_level,
 +            expired: data.expired,
 +            paused: data.paused
 +          });
++
 +          // Notify parent if timer expired
 +          if (data.expired && onTimerExpire) {
 +            onTimerExpire();
 +          }
 +        }
 +      } catch (error) {
 +        console.error('Failed to check timer:', error);
 +      }
 +    };
++
 +    // Check immediately
 +    checkTimer();
++
 +    // Then check every second
 +    const interval = setInterval(checkTimer, 1000);
++
 +    return () => clearInterval(interval);
 +  }, [gameTreeId, sessionId, onTimerExpire]);
++
 +  // Determine display based on warning level
 +  let borderColor = 'border-green-500';
 +  let textColor = 'text-green-400';
 +  let statusMessage = null;
 +  let pulseAnimation = '';
++
 +  if (timerData.expired || timerData.remaining <= 0) {
 +    borderColor = 'border-red-600';
 +    textColor = 'text-red-600';
 +    statusMessage = 'Escaped!';
 +  } else if (timerData.warningLevel === 'critical') {
 +    borderColor = 'border-red-500';
 +    textColor = 'text-red-400';
 +    statusMessage = 'Escaping!';
 +    pulseAnimation = 'animate-pulse';
 +  } else if (timerData.warningLevel === 'alert') {
 +    borderColor = 'border-orange-500';
 +    textColor = 'text-orange-400';
 +    statusMessage = 'Burrowing!';
 +  } else if (timerData.warningLevel === 'warning') {
 +    borderColor = 'border-yellow-500';
 +    textColor = 'text-yellow-400';
 +    statusMessage = 'Alert!';
 +  }
++
 +  return (
 +    <div className={`bg-black/80 backdrop-blur-sm border ${borderColor} rounded-lg p-3 shadow-2xl ${pulseAnimation}`}>
 +      <div className={`${textColor} font-terminal text-sm`}>
 +        <div className="flex items-center justify-between">
 +          <span>Time:</span>
 +          <span className="font-bold">{Math.max(0, timerData.remaining)}s</span>
 +        </div>
 +        {statusMessage && (
 +          <div className="text-center text-xs mt-1">{statusMessage}</div>
 +        )}
 +      </div>
 +    </div>
 +  );
 +};
++
 +export default TimerDisplay;

frontend/src/lib/api.tsmodified

    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;
 +  percentage: number;
 +  warning_level: string | null;
 +  expired: boolean;
 +  paused: boolean;
 +}
++
 +export interface EscapeData {
 +  escaped: boolean;
 +  old_location: string;
 +  new_location: string;
 +  total_escapes: number;
 +  new_timer: number;
 +  timer_reason: string;
 +  distance: number;
 +  mole_direction?: MoleDirection | null;
 +}
++
 +export interface CheckTimerResponse {
 +  timer_remaining: number;
 +  timer_expired: boolean;
 +  mole_location: string;
 +  timer_paused: boolean;
 +  mole_escaped?: boolean;
 +  escape_data?: EscapeData;
 +  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 const gameApi = {
    createGame: async (playerName: string = 'Anonymous'): Promise<GameCreationResponse> => {
      const response = await api.post('/trees/filesystem-trees/create_game/', {
      const response = await api.get('/trees/filesystem-trees/command_reference/');
      return response.data;
    },
++
 +    getTimerStatus: async (treeId: number): Promise<TimerStatusResponse> => {
 +    const response = await api.get(`/trees/filesystem-trees/${treeId}/timer_status/`);
 +    return response.data;
 +  },
++
 +  checkTimer: async (treeId: number, sessionId?: number): Promise<CheckTimerResponse> => {
 +    const url = `/trees/filesystem-trees/${treeId}/check_timer/`;
 +    const params = sessionId ? `?session_id=${sessionId}` : '';
 +    const response = await api.get(url + params);
 +    return response.data;
 +  },
  };