added league history page

asc/src/App.js

@@ -6,52 +6,27 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { ScoreProvider } from './context/ScoreContext';
 import GameSetup from './components/GameSetup';
 import ScoreTracker from './components/ScoreTracker';
+import History from './components/History';  // Ensure this is imported
 
 const App = () => {
-  // Theme state
   const [mode, setMode] = useState(() => {
-    try {
+    const savedMode = localStorage.getItem('themeMode') || 'light';
-      const savedMode = localStorage.getItem('themeMode');
+    return savedMode;
-      return savedMode || 'light';
-    } catch (e) {
-      return 'light';
-    }
   });
 
-  // Save theme preference to localStorage
-  useEffect(() => {
-    localStorage.setItem('themeMode', mode);
-  }, [mode]);
-
   const theme = useMemo(
-    () =>
+    () => createTheme({ palette: { mode } }),
-      createTheme({
-        palette: {
-          mode,
-        },
-      }),
     [mode],
   );
 
-  const toggleTheme = () => {
+  const toggleTheme = () => setMode(prevMode => (prevMode === 'light' ? 'dark' : 'light'));
-    setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
-  };
 
   return (
     <ThemeProvider theme={theme}>
       <ScoreProvider>
         <BrowserRouter>
           <CssBaseline />
-          <Container 
+          <Container maxWidth="lg" sx={{ minHeight: '100vh', pb: 4 }}>
-            maxWidth="lg" 
-            sx={{ 
-              minHeight: '100vh',
-              bgcolor: 'background.default',
-              color: 'text.primary',
-              pb: 4
-            }}
-          >
-            {/* Theme Toggle Button */}
             <IconButton 
               onClick={toggleTheme} 
               color="inherit" 
@@ -60,10 +35,10 @@ const App = () => {
               {mode === 'dark' ? <Brightness7 /> : <Brightness4 />}
             </IconButton>
 
-            {/* Routes for navigation */}
             <Routes>
               <Route path="/" element={<GameSetup />} />
               <Route path="/score" element={<ScoreTracker />} />
+              <Route path="/history" element={<History />} />  {/* Add History route */}
             </Routes>
           </Container>
         </BrowserRouter>

asc/src/App.old.js

@@ -0,0 +1,75 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import { CssBaseline, Container, IconButton } from '@mui/material';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { Brightness7, Brightness4 } from '@mui/icons-material';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { ScoreProvider } from './context/ScoreContext';
+import GameSetup from './components/GameSetup';
+import ScoreTracker from './components/ScoreTracker';
+
+const App = () => {
+  // Theme state
+  const [mode, setMode] = useState(() => {
+    try {
+      const savedMode = localStorage.getItem('themeMode');
+      return savedMode || 'light';
+    } catch (e) {
+      return 'light';
+    }
+  });
+
+  // Save theme preference to localStorage
+  useEffect(() => {
+    localStorage.setItem('themeMode', mode);
+  }, [mode]);
+
+  const theme = useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode,
+        },
+      }),
+    [mode],
+  );
+
+  const toggleTheme = () => {
+    setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
+  };
+
+  return (
+    <ThemeProvider theme={theme}>
+      <ScoreProvider>
+        <BrowserRouter>
+          <CssBaseline />
+          <Container 
+            maxWidth="lg" 
+            sx={{ 
+              minHeight: '100vh',
+              bgcolor: 'background.default',
+              color: 'text.primary',
+              pb: 4
+            }}
+          >
+            {/* Theme Toggle Button */}
+            <IconButton 
+              onClick={toggleTheme} 
+              color="inherit" 
+              sx={{ position: 'absolute', top: 16, right: 16 }}
+            >
+              {mode === 'dark' ? <Brightness7 /> : <Brightness4 />}
+            </IconButton>
+
+            {/* Routes for navigation */}
+            <Routes>
+              <Route path="/" element={<GameSetup />} />
+              <Route path="/score" element={<ScoreTracker />} />
+            </Routes>
+          </Container>
+        </BrowserRouter>
+      </ScoreProvider>
+    </ThemeProvider>
+  );
+};
+
+export default App;

asc/src/components/ScoreTracker.js

@@ -17,7 +17,6 @@ import {
   TableHead,
   TableRow,
   Divider,
-  ButtonGroup,
   LinearProgress
 } from '@mui/material';
 import { Remove } from '@mui/icons-material';
@@ -34,6 +33,17 @@ const ScoreTracker = () => {
   // Local state to track total arrows
   const [totalArrows, setTotalArrows] = useState(0);
 
+// Navigate to History page after last round
+  useEffect(() => {
+    if (state.currentGame && state.currentGame.ends) {
+      const maxRounds = state.currentGame.gameType === '450' ? 16 : 12;
+      if (state.currentGame.ends.length >= maxRounds) {
+        navigate('/history');
+      }
+    }
+  }, [state.currentGame, navigate]);
+
+
   // Check if we have an active game, if not redirect to setup
   useEffect(() => {
     if (!state.currentGame || !state.currentGame.gameType) {