From 53c36e6fc36a9a2fdbd8074802cbb4408c275681 Mon Sep 17 00:00:00 2001
From: Gavin Corkins <gavincorkins@gmail.com>
Date: Tue, 19 May 2026 16:54:07 -0400
Subject: [PATCH] Add REBUILT game mode indicators and fix results differential
 data

- Add gameConfig.ts with GAME_MODE constant to control game-specific features
- Add AllianceIndicators component showing shift status and RP progress (Energized, Supercharged, Traversal) for REBUILT game mode
- Update MatchView to read RP/shift files and display AllianceIndicators when GAME_MODE is REBUILT
- Update overlayState to persist differentialData so it survives page navigation
- Fix Results screen to read differentialData from overlay state instead of in-memory tracker, ensuring the points differential graph displays correctly after match ends
---
 next.config.ts                                |   2 +-
 package-lock.json                             |   2 +-
 src/app/lib/gameConfig.ts                     |   1 +
 src/app/lib/overlayState.ts                   |   2 +
 .../overlay/components/AllianceIndicators.tsx |  61 ++
 src/app/overlay/components/MatchView.tsx      | 584 +++++++++---------
 src/app/overlay/components/Results.tsx        |  10 +-
 7 files changed, 363 insertions(+), 299 deletions(-)
 create mode 100644 src/app/lib/gameConfig.ts
 create mode 100644 src/app/overlay/components/AllianceIndicators.tsx

diff --git a/next.config.ts b/next.config.ts
index ebd91da..a2888ed 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -5,4 +5,4 @@ const nextConfig: NextConfig = {
   devIndicators: false,
 };
 
-export default nextConfig;
+export default nextConfig;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 9730c32..225002e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6180,4 +6180,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/app/lib/gameConfig.ts b/src/app/lib/gameConfig.ts
new file mode 100644
index 0000000..ec5ba9c
--- /dev/null
+++ b/src/app/lib/gameConfig.ts
@@ -0,0 +1 @@
+export const GAME_MODE: string = 'REBUILT';
\ No newline at end of file
diff --git a/src/app/lib/overlayState.ts b/src/app/lib/overlayState.ts
index 6bfb4b8..286521c 100644
--- a/src/app/lib/overlayState.ts
+++ b/src/app/lib/overlayState.ts
@@ -55,6 +55,7 @@ export interface OverlayState {
   field2BlueSecondaryColor?: string;
   field2AllianceBranding?: boolean;
   field2FlippedTeams?: boolean;
+  differentialData?: { redScore: number; blueScore: number; differential: number; gameTime: string; timestamp: number }[];
 }
 
 const defaultState: OverlayState = {
@@ -98,6 +99,7 @@ const defaultState: OverlayState = {
   field2BlueSeriesScore: 0,
   field2AllianceBranding: false,
   field2FlippedTeams: false,
+  differentialData: [],
 };
 
 export const getOverlayState = async (): Promise<OverlayState> => {
diff --git a/src/app/overlay/components/AllianceIndicators.tsx b/src/app/overlay/components/AllianceIndicators.tsx
new file mode 100644
index 0000000..0371c31
--- /dev/null
+++ b/src/app/overlay/components/AllianceIndicators.tsx
@@ -0,0 +1,61 @@
+interface AllianceIndicatorsProps {
+  isRed: boolean | undefined;
+  hubActive: boolean;
+  energized: boolean;
+  supercharged: boolean;
+  traversal: boolean;
+  align: 'left' | 'right';
+}
+
+export default function AllianceIndicators({
+  isRed, hubActive, energized, supercharged, traversal, align
+}: AllianceIndicatorsProps) {
+  const activeBg = isRed ? 'bg-red-500/80' : 'bg-blue-500/80';
+  const inactiveBg = 'bg-gray-700/50';
+
+  const rps = [
+    { label: '⚡', name: 'Energized',    active: energized },
+    { label: '⚡⚡', name: 'Supercharged', active: supercharged },
+    { label: '🏔', name: 'Traversal',    active: traversal },
+  ];
+
+  return (
+    <div className={`flex flex-col gap-1 items-${align === 'left' ? 'end' : 'start'}`}>
+      {/* Shift arrow */}
+      <div className={`flex items-center gap-1 mb-1 ${align === 'right' ? 'flex-row-reverse' : ''}`}>
+        <span className={`text-xs font-bold uppercase tracking-wide transition-all duration-500 ${
+          hubActive
+            ? isRed
+              ? 'text-red-400 drop-shadow-[0_0_8px_rgba(248,113,113,0.9)]'
+              : 'text-blue-400 drop-shadow-[0_0_8px_rgba(96,165,250,0.9)]'
+            : 'text-gray-600'
+        }`}>Shift</span>
+        <span className={`text-xl transition-all duration-500 ${
+          hubActive
+            ? isRed
+              ? 'text-red-400 drop-shadow-[0_0_8px_rgba(248,113,113,0.9)]'
+              : 'text-blue-400 drop-shadow-[0_0_8px_rgba(96,165,250,0.9)]'
+            : 'text-gray-700'
+        }`}>
+          {align === 'left' ? '◀' : '▶'}
+        </span>
+      </div>
+
+      {/* RP indicators */}
+      <div className={`flex gap-1 ${align === 'right' ? 'flex-row-reverse' : ''}`}>
+        {rps.map(rp => (
+          <div
+            key={rp.name}
+            title={rp.name}
+            className={`flex flex-col items-center px-2 py-1 rounded text-xs font-bold transition-all duration-300 ${
+              rp.active ? activeBg + ' text-white' : inactiveBg + ' text-gray-500'
+            }`}
+          >
+            <span>{rp.label}</span>
+            <span className="text-[10px] leading-tight">{rp.name.slice(0, 5)}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/overlay/components/MatchView.tsx b/src/app/overlay/components/MatchView.tsx
index 6332214..4b04c09 100644
--- a/src/app/overlay/components/MatchView.tsx
+++ b/src/app/overlay/components/MatchView.tsx
@@ -3,6 +3,9 @@ import { useEffect, useState, useMemo } from "react";
 import Image from "next/image";
 import { pointsDifferentialTracker } from "../../lib/pointsDifferentialTracker";
 import { Team, loadTeams } from "../../lib/teams";
+import { setOverlayState } from "../../lib/overlayState";
+import AllianceIndicators from './AllianceIndicators';
+import { GAME_MODE } from '../../lib/gameConfig';
 
 interface MatchViewProps {
   state: OverlayState;
@@ -10,257 +13,255 @@ interface MatchViewProps {
 }
 
 export default function MatchView({ state, currentTime }: MatchViewProps) {
+
+  // ─── UI State ───────────────────────────────────────────────────────────────
+  const isRebuilt = GAME_MODE === 'REBUILT';
   const [isVisible, setIsVisible] = useState(false);
+  const [showAutonomous, setShowAutonomous] = useState(false);
+  const [showTimer, setShowTimer] = useState(false);
+  const [gameState, setGameState] = useState<string>('');
+  const [teams, setTeams] = useState<Team[]>([]);
+
+  // ─── Score Animation State ───────────────────────────────────────────────────
   const [prevScores, setPrevScores] = useState({ red: state.redScore, blue: state.blueScore });
   const [scoreChanged, setScoreChanged] = useState({ red: false, blue: false });
   const [animatingScores, setAnimatingScores] = useState({ red: state.redScore, blue: state.blueScore });
+
+  // ─── OPR Animation State ─────────────────────────────────────────────────────
   const [prevOPR, setPrevOPR] = useState({ red: state.redOPR, blue: state.blueOPR });
   const [oprChanged, setOprChanged] = useState({ red: new Set<string>(), blue: new Set<string>() });
   const [animatingOPR, setAnimatingOPR] = useState({ red: state.redOPR, blue: state.blueOPR });
-  const [showAutonomous, setShowAutonomous] = useState(false);
-  const [gameState, setGameState] = useState<string>('');
-  const [showTimer, setShowTimer] = useState(false);
-  const [teams, setTeams] = useState<Team[]>([]);
-  // Memoize sorted OPR arrays to prevent unnecessary re-calculations
-  const sortedRedOPR = useMemo(() => {
-    return [...animatingOPR.red]
-      .filter(player => player.username && player.username.trim() !== '')
-      .sort((a, b) => b.score - a.score)
-      .slice(0, 3);
-  }, [animatingOPR.red]);
-  
-  const sortedBlueOPR = useMemo(() => {
-    return [...animatingOPR.blue]
-      .filter(player => player.username && player.username.trim() !== '')
-      .sort((a, b) => b.score - a.score)
-      .slice(0, 3);
-  }, [animatingOPR.blue]);
 
+  // ─── RP / Shift State ────────────────────────────────────────────────────────
+  const [autoFuelRed, setAutoFuelRed] = useState(0);
+  const [autoFuelBlue, setAutoFuelBlue] = useState(0);
+  const [totalFuelRed, setTotalFuelRed] = useState(0);
+  const [totalFuelBlue, setTotalFuelBlue] = useState(0);
+  const [towerPointsRed, setTowerPointsRed] = useState(0);
+  const [towerPointsBlue, setTowerPointsBlue] = useState(0);
 
-  // Get teams by ID
-  const redTeam = useMemo(() => 
-    teams.find(t => t.id === state.redTeamId),
-    [teams, state.redTeamId]
-  );
-  
-  const blueTeam = useMemo(() => 
-    teams.find(t => t.id === state.blueTeamId),
-    [teams, state.blueTeamId]
-  );
-
-  // Swap team data and components when flipped
-  const leftTeam = useMemo(() => 
-    state.flippedTeams ? blueTeam : redTeam,
-    [state.flippedTeams, redTeam, blueTeam]
-  );
-  
-  const rightTeam = useMemo(() => 
-    state.flippedTeams ? redTeam : blueTeam,
-    [state.flippedTeams, redTeam, blueTeam]
-  );
-
-
-  const leftOPR = useMemo(() => 
-    state.flippedTeams ? sortedBlueOPR : sortedRedOPR,
-    [state.flippedTeams, sortedRedOPR, sortedBlueOPR]
-  );
-  
-  const rightOPR = useMemo(() => 
-    state.flippedTeams ? sortedRedOPR : sortedBlueOPR,
-    [state.flippedTeams, sortedRedOPR, sortedBlueOPR]
-  );
+  // ─── Helpers ─────────────────────────────────────────────────────────────────
+  const parseTimeToSeconds = (timeStr: string): number => {
+    const [minutes, seconds] = timeStr.split(':').map(Number);
+    return (minutes || 0) * 60 + (seconds || 0);
+  };
 
-  const leftOPRChanged = useMemo(() => 
-    state.flippedTeams ? oprChanged.blue : oprChanged.red,
-    [state.flippedTeams, oprChanged.red, oprChanged.blue]
-  );
-  
-  const rightOPRChanged = useMemo(() => 
-    state.flippedTeams ? oprChanged.red : oprChanged.blue,
-    [state.flippedTeams, oprChanged.red, oprChanged.blue]
+  // ─── Memoized OPR Arrays ─────────────────────────────────────────────────────
+  const sortedRedOPR = useMemo(() =>
+    [...animatingOPR.red]
+      .filter(p => p.username && p.username.trim() !== '')
+      .sort((a, b) => b.score - a.score)
+      .slice(0, 3),
+    [animatingOPR.red]
   );
 
-  const leftAnimatingScore = useMemo(() => 
-    state.flippedTeams ? animatingScores.blue : animatingScores.red,
-    [state.flippedTeams, animatingScores.red, animatingScores.blue]
-  );
-  
-  const rightAnimatingScore = useMemo(() => 
-    state.flippedTeams ? animatingScores.red : animatingScores.blue,
-    [state.flippedTeams, animatingScores.red, animatingScores.blue]
+  const sortedBlueOPR = useMemo(() =>
+    [...animatingOPR.blue]
+      .filter(p => p.username && p.username.trim() !== '')
+      .sort((a, b) => b.score - a.score)
+      .slice(0, 3),
+    [animatingOPR.blue]
   );
 
-  const leftScoreChanged = useMemo(() => 
-    state.flippedTeams ? scoreChanged.blue : scoreChanged.red,
-    [state.flippedTeams, scoreChanged.red, scoreChanged.blue]
-  );
-  
-  const rightScoreChanged = useMemo(() => 
-    state.flippedTeams ? scoreChanged.red : scoreChanged.blue,
-    [state.flippedTeams, scoreChanged.red, scoreChanged.blue]
+  // ─── Team Lookups ─────────────────────────────────────────────────────────────
+  const redTeam = useMemo(() =>
+    teams.find(t => t.id === state.redTeamId),
+    [teams, state.redTeamId]
   );
 
-  const leftAllianceName = useMemo(() => 
-    state.flippedTeams ? state.blueAllianceName : state.redAllianceName,
-    [state.flippedTeams, state.redAllianceName, state.blueAllianceName]
-  );
-  
-  const rightAllianceName = useMemo(() => 
-    state.flippedTeams ? state.redAllianceName : state.blueAllianceName,
-    [state.flippedTeams, state.redAllianceName, state.blueAllianceName]
+  const blueTeam = useMemo(() =>
+    teams.find(t => t.id === state.blueTeamId),
+    [teams, state.blueTeamId]
   );
 
+  // ─── Flip-aware Derived Values ───────────────────────────────────────────────
   const leftIsRed = !state.flippedTeams;
-  const rightIsRed = state.flippedTeams;
-
-  // Parse time string to seconds
-  const parseTimeToSeconds = (timeStr: string): number => {
-    const [minutes, seconds] = timeStr.split(':').map(Number);
-    return (minutes || 0) * 60 + (seconds || 0);
-  };
+  const rightIsRed = !!state.flippedTeams;
+
+  const leftTeam          = state.flippedTeams ? blueTeam        : redTeam;
+  const rightTeam         = state.flippedTeams ? redTeam         : blueTeam;
+  const leftOPR           = state.flippedTeams ? sortedBlueOPR   : sortedRedOPR;
+  const rightOPR          = state.flippedTeams ? sortedRedOPR    : sortedBlueOPR;
+  const leftOPRChanged    = state.flippedTeams ? oprChanged.blue  : oprChanged.red;
+  const rightOPRChanged   = state.flippedTeams ? oprChanged.red   : oprChanged.blue;
+  const leftAnimatingScore  = state.flippedTeams ? animatingScores.blue : animatingScores.red;
+  const rightAnimatingScore = state.flippedTeams ? animatingScores.red  : animatingScores.blue;
+  const leftScoreChanged  = state.flippedTeams ? scoreChanged.blue : scoreChanged.red;
+  const rightScoreChanged = state.flippedTeams ? scoreChanged.red  : scoreChanged.blue;
+  const leftAllianceName  = state.flippedTeams ? state.blueAllianceName : state.redAllianceName;
+  const rightAllianceName = state.flippedTeams ? state.redAllianceName  : state.blueAllianceName;
+
+  // ─── RP / Shift Computed Values ──────────────────────────────────────────────
+  const autoWinner: 'red' | 'blue' | null = useMemo(() =>
+    autoFuelRed > autoFuelBlue ? 'red' :
+    autoFuelBlue > autoFuelRed ? 'blue' : null,
+    [autoFuelRed, autoFuelBlue]
+  );
 
-  // Determine timer color based on time
+  const totalSeconds = parseTimeToSeconds(state.matchTime);
+
+  const redHubActive = useMemo(() => {
+    if (totalSeconds === 0) return false;
+    if (totalSeconds > 140) return true;  // AUTO
+    if (totalSeconds > 130) return true;  // TRANSITION
+    if (totalSeconds > 105) return autoWinner === 'blue';  // SHIFT 1
+    if (totalSeconds > 80)  return autoWinner !== 'blue';  // SHIFT 2
+    if (totalSeconds > 55)  return autoWinner === 'blue';  // SHIFT 3
+    if (totalSeconds > 30)  return autoWinner !== 'blue';  // SHIFT 4
+    return true; // END GAME
+  }, [totalSeconds, autoWinner]);
+
+  const blueHubActive = useMemo(() => {
+    if (totalSeconds === 0) return false;
+    if (totalSeconds > 140) return true;
+    if (totalSeconds > 130) return true;
+    if (totalSeconds > 105) return autoWinner !== 'blue';  // SHIFT 1
+    if (totalSeconds > 80)  return autoWinner === 'blue';  // SHIFT 2
+    if (totalSeconds > 55)  return autoWinner !== 'blue';  // SHIFT 3
+    if (totalSeconds > 30)  return autoWinner === 'blue';  // SHIFT 4
+    return true;
+  }, [totalSeconds, autoWinner]);
+
+  const redEnergized    = totalFuelRed >= 360;
+  const redSupercharged = totalFuelRed >= 500;
+  const redTraversal    = towerPointsRed >= 25;
+  const blueEnergized    = totalFuelBlue >= 360;
+  const blueSupercharged = totalFuelBlue >= 500;
+  const blueTraversal    = towerPointsBlue >= 25;
+
+  const leftHubActive     = state.flippedTeams ? blueHubActive    : redHubActive;
+  const rightHubActive    = state.flippedTeams ? redHubActive     : blueHubActive;
+  const leftEnergized     = state.flippedTeams ? blueEnergized    : redEnergized;
+  const leftSupercharged  = state.flippedTeams ? blueSupercharged : redSupercharged;
+  const leftTraversal     = state.flippedTeams ? blueTraversal    : redTraversal;
+  const rightEnergized    = state.flippedTeams ? redEnergized     : blueEnergized;
+  const rightSupercharged = state.flippedTeams ? redSupercharged  : blueSupercharged;
+  const rightTraversal    = state.flippedTeams ? redTraversal     : blueTraversal;
+
+  // ─── Timer Color ─────────────────────────────────────────────────────────────
   const getTimerColor = useMemo(() => {
-    const totalSeconds = parseTimeToSeconds(state.matchTime);
     if (totalSeconds === 0) return 'text-red-500';
     if (totalSeconds <= 30) return 'text-yellow-400';
-    if (totalSeconds <= 150 && totalSeconds > 135) return 'text-green-400'; // Auto period
+    if (totalSeconds <= 160 && totalSeconds > 140) return 'text-green-400';
     return 'text-white';
-  }, [state.matchTime]);
+  }, [totalSeconds]);
 
-  // Load teams data
+  // Load teams
   useEffect(() => {
     loadTeams().then(setTeams);
   }, []);
 
+  // Entrance animation
   useEffect(() => {
-    // Entrance animation with delay
-    const timer = setTimeout(() => {
-      setIsVisible(true);
-    }, 100);
-
+    const timer = setTimeout(() => setIsVisible(true), 100);
     return () => clearTimeout(timer);
   }, []);
 
+  // Auto banner
   useEffect(() => {
-    // Autonomous period animation
-    const totalSeconds = parseTimeToSeconds(state.matchTime);
-    if (totalSeconds <= 150 && totalSeconds > 135) { // 2:30 to 2:15
-      setShowAutonomous(true);
-    } else {
-      setShowAutonomous(false);
-    }
+    const secs = parseTimeToSeconds(state.matchTime);
+    setShowAutonomous(secs <= 160 && secs > 145);
   }, [state.matchTime]);
 
+  // Game state polling
   useEffect(() => {
-    // Read GameState.txt for debugging
-    if (state.gameFileLocation) {
-      const readGameState = async () => {
-        try {
-          const response = await fetch(`/api/read-file?path=${encodeURIComponent(state.gameFileLocation + '/GameState.txt')}`, {
-            cache: 'no-store',
-            headers: { 'Cache-Control': 'no-cache' }
-          });
-          if (response.ok) {
-            const text = await response.text();
-            const trimmedState = text.trim();
-            setGameState(trimmedState);
-            // Show/hide timer based on game state
-            setShowTimer(trimmedState !== 'FINISHED');
-            
-            // Start/stop differential tracking based on game state
-            if (trimmedState !== 'FINISHED' && !pointsDifferentialTracker.isActive()) {
-              pointsDifferentialTracker.startLogging(state.gameFileLocation);
-            } else if (trimmedState === 'FINISHED' && pointsDifferentialTracker.isActive()) {
-              pointsDifferentialTracker.stopLogging();
-            }
-          }
-        } catch {
-          setGameState('Error reading GameState.txt');
-          // If we can't read the game state, show the timer by default
-          setShowTimer(true);
-        }
-      };
-      
-      readGameState();
-      const interval = setInterval(readGameState, 100);
-      return () => clearInterval(interval);
-    } else {
-      // If no game file location, show timer by default
+    if (!state.gameFileLocation) {
       setShowTimer(true);
       setGameState('');
+      return;
     }
+
+    const readGameState = async () => {
+      try {
+        const response = await fetch(
+          `/api/read-file?path=${encodeURIComponent(state.gameFileLocation + '/GameState.txt')}`,
+          { cache: 'no-store', headers: { 'Cache-Control': 'no-cache' } }
+        );
+        if (response.ok) {
+          const trimmedState = (await response.text()).trim();
+          setGameState(trimmedState);
+          setShowTimer(trimmedState !== 'FINISHED');
+
+          if (trimmedState !== 'FINISHED' && !pointsDifferentialTracker.isActive()) {
+            pointsDifferentialTracker.startLogging(state.gameFileLocation);
+          } else if (trimmedState === 'FINISHED' && pointsDifferentialTracker.isActive()) {
+            pointsDifferentialTracker.stopLogging();
+            setOverlayState({ differentialData: pointsDifferentialTracker.getData() });
+          }
+        }
+      } catch {
+        setGameState('Error reading GameState.txt');
+        setShowTimer(true);
+      }
+    };
+
+    readGameState();
+    const interval = setInterval(readGameState, 100);
+    return () => clearInterval(interval);
   }, [state.gameFileLocation]);
 
+  // Score animation
   useEffect(() => {
-    // Score change animation
     if (prevScores.red !== state.redScore) {
       setScoreChanged(prev => ({ ...prev, red: true }));
       setAnimatingScores(prev => ({ ...prev, red: state.redScore }));
       setTimeout(() => setScoreChanged(prev => ({ ...prev, red: false })), 500);
     }
-    
     if (prevScores.blue !== state.blueScore) {
       setScoreChanged(prev => ({ ...prev, blue: true }));
       setAnimatingScores(prev => ({ ...prev, blue: state.blueScore }));
       setTimeout(() => setScoreChanged(prev => ({ ...prev, blue: false })), 500);
     }
-    
-    // Log points differential when scores change
     pointsDifferentialTracker.logPoint(state.redScore, state.blueScore, state.matchTime, gameState);
-    
     setPrevScores({ red: state.redScore, blue: state.blueScore });
   }, [state.redScore, state.blueScore, state.matchTime, gameState]);
 
+  // OPR animation
   useEffect(() => {
-    // Update animating OPR to match current state
     setAnimatingOPR({ red: state.redOPR, blue: state.blueOPR });
-    
-    // OPR change animation
+
     const animateOPRChanges = (alliance: 'red' | 'blue') => {
       const currentOPR = state[alliance === 'red' ? 'redOPR' : 'blueOPR'];
       const prevOPRData = prevOPR[alliance];
       const changedPlayers = new Set<string>();
-      
+
       currentOPR.forEach((player, index) => {
         const prevPlayer = prevOPRData[index];
         if (prevPlayer && prevPlayer.username === player.username && prevPlayer.score !== player.score) {
           changedPlayers.add(player.username);
-          
-          // Animate from old score to new score
+
           const startScore = prevPlayer.score;
           const endScore = player.score;
           const startTime = Date.now();
           const duration = 200;
-          
+
           const animateScore = () => {
             const elapsed = Date.now() - startTime;
             const progress = Math.min(elapsed / duration, 1);
-            
             const easeOutCubic = 1 - Math.pow(1 - progress, 3);
             const currentScore = Math.round(startScore + (endScore - startScore) * easeOutCubic);
-            
+
             setAnimatingOPR(prev => ({
               ...prev,
-              [alliance]: prev[alliance].map(p => 
+              [alliance]: prev[alliance].map(p =>
                 p.username === player.username ? { ...p, score: currentScore } : p
               )
             }));
-            
+
             if (progress < 1) {
               requestAnimationFrame(animateScore);
             } else {
               setOprChanged(prev => ({
                 ...prev,
-                [alliance]: new Set([...prev[alliance]].filter(name => name !== player.username))
+                [alliance]: new Set([...prev[alliance]].filter(n => n !== player.username))
               }));
             }
           };
-          
+
           requestAnimationFrame(animateScore);
         }
       });
-      
+
       if (changedPlayers.size > 0) {
         setOprChanged(prev => ({
           ...prev,
@@ -268,65 +269,97 @@ export default function MatchView({ state, currentTime }: MatchViewProps) {
         }));
       }
     };
-    
+
     animateOPRChanges('red');
     animateOPRChanges('blue');
-    
     setPrevOPR({ red: state.redOPR, blue: state.blueOPR });
   }, [state.redOPR, state.blueOPR]);
 
+  // RP file polling (REBUILT only)
+  useEffect(() => {
+    if (!isRebuilt) return;
+    if (!state.gameFileLocation || !state.gameFileLocation.trim()) return;
+
+    const read = (file: string) =>
+      fetch(`/api/read-file?path=${encodeURIComponent(state.gameFileLocation + '/' + file)}`, {
+        cache: 'no-store', headers: { 'Cache-Control': 'no-cache' }
+      })
+      .then(r => r.ok ? r.text() : '0')
+      .then(t => parseFloat(t.trim()) || 0)
+      .catch(() => 0);
+
+    const readRPFiles = async () => {
+      const [autoFR, autoFB, teleFR, teleFB, endR, endB, autoL1R, autoL1B] = await Promise.all([
+        read('Auto_Fuel_R.txt'),
+        read('Auto_Fuel_B.txt'),
+        read('Tele_Fuel_R.txt'),
+        read('Tele_Fuel_B.txt'),
+        read('End_R.txt'),
+        read('End_B.txt'),
+        read('Auto_lvl_1_R.txt'),
+        read('Auto_lvl_1_B.txt'),
+      ]);
+
+      setAutoFuelRed(autoFR);
+      setAutoFuelBlue(autoFB);
+      setTotalFuelRed(autoFR + teleFR);
+      setTotalFuelBlue(autoFB + teleFB);
+      setTowerPointsRed(endR + autoL1R * 15);
+      setTowerPointsBlue(endB + autoL1B * 15);
+    };
+
+    readRPFiles();
+    const interval = setInterval(readRPFiles, 500);
+    return () => clearInterval(interval);
+  }, [isRebuilt, state.gameFileLocation]);
 
+  // ─── Render ──────────────────────────────────────────────────────────────────
   return (
     <>
       <div className="absolute top-4 left-4 bg-gray-900/85 backdrop-blur-sm rounded-lg p-3 border border-white/30 animate-fade-in">
-        <div className="text-lg font-bold">
-          {state.matchTitle}
-        </div>
+        <div className="text-lg font-bold">{state.matchTitle}</div>
         {state.matchNumber && state.matchNumber.trim() && (
-          <div className="text-sm text-white/80 mt-1">
-            {state.matchNumber}
-          </div>
+          <div className="text-sm text-white/80 mt-1">{state.matchNumber}</div>
         )}
       </div>
 
       <div className="absolute top-4 right-4 flex flex-col gap-2">
         <div className="bg-gray-900/85 backdrop-blur-sm rounded-lg p-3 border border-white/30 animate-fade-in">
-          <div className="text-sm font-mono">
-            {currentTime}
-          </div>
+          <div className="text-sm font-mono">{currentTime}</div>
         </div>
-        
       </div>
 
-
       <div className={`absolute bottom-4 left-4 right-4 transition-all duration-700 ease-out ${
         isVisible ? 'translate-y-0 opacity-100' : 'translate-y-full opacity-0'
       }`}>
         <div className="flex flex-col items-center gap-2">
+
           {/* Timer Container */}
-          <div className={`relative transition-all duration-700 ${showTimer ? 'translate-y-0 opacity-100' : 'translate-y-full opacity-0'}`}>
-            {/* Autonomous Animation - Above timer */}
+          <div className={`relative transition-all duration-700 ${
+            showTimer ? 'translate-y-0 opacity-100' : 'translate-y-full opacity-0'
+          }`}>
             <div className={`absolute bottom-full left-1/2 -translate-x-1/2 mb-2 bg-green-600/90 rounded-lg px-6 py-2 transition-all duration-700 ${
               showAutonomous ? 'translate-y-0 opacity-100' : 'translate-y-full opacity-0'
             }`}>
               <span className="text-lg font-bold text-white">AUTO</span>
             </div>
-            
             <div className="bg-gray-900/85 backdrop-blur-sm rounded-lg px-8 py-3 border border-white/30">
-              <div className={`text-6xl font-bold font-mono animate-pulse transition-colors duration-300 ${getTimerColor}`}>{state.matchTime}</div>
+              <div className={`text-6xl font-bold font-mono animate-pulse transition-colors duration-300 ${getTimerColor}`}>
+                {state.matchTime}
+              </div>
             </div>
           </div>
-          
+
           {/* Score Container */}
-          <div 
+          <div
             className="backdrop-blur-sm rounded-lg p-6 border border-white/30 shadow-2xl w-full relative"
             style={{
               background: state.allianceBranding && state.redPrimaryColor && state.bluePrimaryColor
-                ? `linear-gradient(135deg, 
-                    ${state.redPrimaryColor}40 0%, 
-                    ${state.redSecondaryColor || state.redPrimaryColor}25 30%, 
-                    rgba(17, 24, 39, 0.85) 50%, 
-                    ${state.blueSecondaryColor || state.bluePrimaryColor}25 70%, 
+                ? `linear-gradient(135deg,
+                    ${state.redPrimaryColor}40 0%,
+                    ${state.redSecondaryColor || state.redPrimaryColor}25 30%,
+                    rgba(17, 24, 39, 0.85) 50%,
+                    ${state.blueSecondaryColor || state.bluePrimaryColor}25 70%,
                     ${state.bluePrimaryColor}40 100%)`
                 : 'rgba(17, 24, 39, 0.85)'
             }}
@@ -334,31 +367,24 @@ export default function MatchView({ state, currentTime }: MatchViewProps) {
             {/* Team Logos */}
             {state.allianceBranding && (
               <>
-                {/* Left Side Logo */}
                 {leftTeam?.logo && (
                   <div className="absolute left-0 top-0 bottom-0 w-80 z-15 rounded-lg overflow-hidden">
                     <Image
                       src={`/Team_Logos/${leftTeam.logo}`}
                       alt={`${leftAllianceName} Logo`}
                       fill
-                      style={{ 
-                        objectFit: 'contain' 
-                      }}
+                      style={{ objectFit: 'contain' }}
                       className="drop-shadow-lg"
                     />
                   </div>
                 )}
-                
-                {/* Right Side Logo */}
                 {rightTeam?.logo && (
                   <div className="absolute right-0 top-0 bottom-0 w-80 z-15 rounded-lg overflow-hidden">
                     <Image
                       src={`/Team_Logos/${rightTeam.logo}`}
                       alt={`${rightAllianceName} Logo`}
                       fill
-                      style={{ 
-                        objectFit: 'contain' 
-                      }}
+                      style={{ objectFit: 'contain' }}
                       className="drop-shadow-lg"
                     />
                   </div>
@@ -366,7 +392,7 @@ export default function MatchView({ state, currentTime }: MatchViewProps) {
               </>
             )}
 
-            {/* Logo centered */}
+            {/* Center Logo */}
             <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-24 h-24 z-10">
               <Image
                 src="/assets/src-light-logo.png"
@@ -376,68 +402,88 @@ export default function MatchView({ state, currentTime }: MatchViewProps) {
                 className="drop-shadow-lg"
               />
             </div>
-            
+
             <div className="flex items-center justify-center">
+
               {/* Left side */}
               <div className="flex items-center justify-end gap-4 flex-1">
-                {/* Left Alliance OPR */}
+                {/* Left OPR */}
                 <div className={`text-sm opacity-90 space-y-2 text-right ${leftIsRed ? 'text-red-100' : 'text-blue-100'}`}>
                   {leftOPR.map((player, index) => (
-                    <div 
-                      key={player.username || `left-player-${index}`} 
-                      className="flex items-center justify-end gap-2"
-                    >
+                    <div key={player.username || `left-player-${index}`} className="flex items-center justify-end gap-2">
                       <span className="truncate max-w-[120px]">{player.username}</span>
                       <span className={`font-mono px-3 py-1.5 rounded text-sm ${
                         leftIsRed ? 'bg-red-700/50' : 'bg-blue-700/50'
-                      } ${
-                        leftOPRChanged.has(player.username) ? 'animate-score-text-change' : ''
-                      }`}>{player.score}</span>
+                      } ${leftOPRChanged.has(player.username) ? 'animate-score-text-change' : ''}`}>
+                        {player.score}
+                      </span>
                     </div>
                   ))}
                 </div>
-                
-                {/* Left Score */}
-                <div className={`rounded-lg p-8 text-center min-w-[180px] mr-16 ${
-                  leftIsRed ? 'bg-red-600/80 animate-red-glow' : 'bg-blue-600/80 animate-blue-glow'
-                }`}>
-                  <div className={`text-6xl font-mono font-bold text-white ${
-                    leftScoreChanged ? 'animate-score-text-change' : ''
-                  }`}>{leftAnimatingScore}</div>
+
+                {/* Left Score + Indicators */}
+                <div className="flex flex-col items-end gap-2 mr-16">
+                  {isRebuilt && (
+                    <AllianceIndicators
+                      isRed={leftIsRed}
+                      hubActive={leftHubActive}
+                      energized={leftEnergized}
+                      supercharged={leftSupercharged}
+                      traversal={leftTraversal}
+                      align="left"
+                    />
+                  )}
+                  <div className={`rounded-lg p-8 text-center min-w-[180px] ${
+                    leftIsRed ? 'bg-red-600/80 animate-red-glow' : 'bg-blue-600/80 animate-blue-glow'
+                  }`}>
+                    <div className={`text-6xl font-mono font-bold text-white ${
+                      leftScoreChanged ? 'animate-score-text-change' : ''
+                    }`}>{leftAnimatingScore}</div>
+                  </div>
                 </div>
               </div>
-              
-              {/* Center logo space */}
+
+              {/* Center space */}
               <div className="w-24"></div>
-              
+
               {/* Right side */}
               <div className="flex items-center justify-start gap-4 flex-1">
-                {/* Right Score */}
-                <div className={`rounded-lg p-8 text-center min-w-[180px] ml-16 ${
-                  rightIsRed ? 'bg-red-600/80 animate-red-glow' : 'bg-blue-600/80 animate-blue-glow'
-                }`}>
-                  <div className={`text-6xl font-mono font-bold text-white ${
-                    rightScoreChanged ? 'animate-score-text-change' : ''
-                  }`}>{rightAnimatingScore}</div>
+                {/* Right Score + Indicators */}
+                <div className="flex flex-col items-start gap-2 ml-16">
+                  {isRebuilt && (
+                    <AllianceIndicators
+                      isRed={rightIsRed}
+                      hubActive={rightHubActive}
+                      energized={rightEnergized}
+                      supercharged={rightSupercharged}
+                      traversal={rightTraversal}
+                      align="right"
+                    />
+                  )}
+                  <div className={`rounded-lg p-8 text-center min-w-[180px] ${
+                    rightIsRed ? 'bg-red-600/80 animate-red-glow' : 'bg-blue-600/80 animate-blue-glow'
+                  }`}>
+                    <div className={`text-6xl font-mono font-bold text-white ${
+                      rightScoreChanged ? 'animate-score-text-change' : ''
+                    }`}>{rightAnimatingScore}</div>
+                  </div>
                 </div>
-                
-                {/* Right Alliance OPR */}
+
+                {/* Right OPR */}
                 <div className={`text-sm opacity-90 space-y-2 text-left ${rightIsRed ? 'text-red-100' : 'text-blue-100'}`}>
                   {rightOPR.map((player, index) => (
-                    <div 
-                      key={player.username || `right-player-${index}`} 
-                      className="flex items-center justify-start gap-2"
-                    >
+                    <div key={player.username || `right-player-${index}`} className="flex items-center justify-start gap-2">
                       <span className={`font-mono px-3 py-1.5 rounded text-sm ${
                         rightIsRed ? 'bg-red-700/50' : 'bg-blue-700/50'
-                      } ${
-                        rightOPRChanged.has(player.username) ? 'animate-score-text-change' : ''
-                      }`}>{player.score}</span>
+                      } ${rightOPRChanged.has(player.username) ? 'animate-score-text-change' : ''}`}>
+                        {player.score}
+                      </span>
                       <span className="truncate max-w-[120px]">{player.username}</span>
                     </div>
                   ))}
                 </div>
               </div>
+
             </div>
           </div>
         </div>
@@ -445,79 +491,31 @@ export default function MatchView({ state, currentTime }: MatchViewProps) {
 
       <style jsx>{`
         @keyframes fade-in {
-          from {
-            opacity: 0;
-            transform: translateY(-20px);
-          }
-          to {
-            opacity: 1;
-            transform: translateY(0);
-          }
+          from { opacity: 0; transform: translateY(-20px); }
+          to { opacity: 1; transform: translateY(0); }
         }
-
         @keyframes score-text-change {
-          0% { 
-            transform: scale(1);
-            text-shadow: 0 0 0px rgba(255, 255, 255, 0);
-          }
-          50% { 
-            transform: scale(1.1);
-            text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(255, 255, 255, 0.6);
-          }
-          100% { 
-            transform: scale(1);
-            text-shadow: 0 0 0px rgba(255, 255, 255, 0);
-          }
-        }
-
-        .animate-fade-in {
-          animation: fade-in 0.5s ease-out;
+          0%   { transform: scale(1);   text-shadow: 0 0 0px rgba(255,255,255,0); }
+          50%  { transform: scale(1.1); text-shadow: 0 0 20px rgba(255,255,255,0.8), 0 0 40px rgba(255,255,255,0.6); }
+          100% { transform: scale(1);   text-shadow: 0 0 0px rgba(255,255,255,0); }
         }
-
-        .animate-score-text-change {
-          animation: score-text-change 0.5s ease-out;
-        }
-
         @keyframes red-glow {
-          0%, 100% { 
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-          }
-          50% { 
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 0 30px rgba(239, 68, 68, 0.6), 0 0 60px rgba(239, 68, 68, 0.3);
-          }
+          0%, 100% { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); }
+          50%       { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06), 0 0 30px rgba(239,68,68,0.6), 0 0 60px rgba(239,68,68,0.3); }
         }
-
         @keyframes blue-glow {
-          0%, 100% { 
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-          }
-          50% { 
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 0 30px rgba(59, 130, 246, 0.6), 0 0 60px rgba(59, 130, 246, 0.3);
-          }
-        }
-
-        .animate-red-glow {
-          animation: red-glow 3s ease-in-out infinite;
+          0%, 100% { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); }
+          50%       { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06), 0 0 30px rgba(59,130,246,0.6), 0 0 60px rgba(59,130,246,0.3); }
         }
-
-        .animate-blue-glow {
-          animation: blue-glow 3s ease-in-out infinite;
-        }
-
         @keyframes pulse-border {
-          0%, 100% { 
-            border-opacity: 0.8;
-            filter: brightness(1);
-          }
-          50% { 
-            border-opacity: 1;
-            filter: brightness(1.3);
-          }
-        }
-
-        .animate-pulse-border {
-          animation: pulse-border 2s ease-in-out infinite;
+          0%, 100% { filter: brightness(1); }
+          50%       { filter: brightness(1.3); }
         }
+        .animate-fade-in          { animation: fade-in 0.5s ease-out; }
+        .animate-score-text-change { animation: score-text-change 0.5s ease-out; }
+        .animate-red-glow          { animation: red-glow 3s ease-in-out infinite; }
+        .animate-blue-glow         { animation: blue-glow 3s ease-in-out infinite; }
+        .animate-pulse-border      { animation: pulse-border 2s ease-in-out infinite; }
       `}</style>
     </>
   );
diff --git a/src/app/overlay/components/Results.tsx b/src/app/overlay/components/Results.tsx
index 019fe73..2c9d62b 100644
--- a/src/app/overlay/components/Results.tsx
+++ b/src/app/overlay/components/Results.tsx
@@ -63,13 +63,15 @@ export default function Results({ state }: ResultsProps) {
 
 
   useEffect(() => {
-    // Show immediately, no delay
     setIsVisible(true);
-
-    // Get differential data from tracker
-    setDifferentialData(pointsDifferentialTracker.getData());
   }, []);
 
+  useEffect(() => {
+    if (state.differentialData && state.differentialData.length > 0) {
+      setDifferentialData(state.differentialData);
+    }
+  }, [state.differentialData]);
+
   useEffect(() => {
     // Read files in background after render
     if (state.gameFileLocation) {