Tailwind (should merge after cleanup)

application/package.json

@@ -37,15 +37,22 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
+    "@headlessui/react": "^2.2.0",
     "@types/express": "^4.17.21",
     "@types/qrcode": "^1.5.5",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
+    "clsx": "^2.1.1",
     "eslint": "^9.9.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
+    "framer-motion": "^11.12.0",
     "globals": "^15.9.0",
+    "lucide-react": "^0.462.0",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.15",
     "typescript": "^5.5.4",
     "typescript-eslint": "^8.0.1",
     "vite": "^5.4.1"

application/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

application/src/App.tsx

@@ -1,7 +1,7 @@
-import React from "react";
-import "./App.css";
-
+import React, { useEffect } from "react";
 import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
+import { motion } from "framer-motion";
+import { ClipboardList, Users, Scan, ChevronRight, BarChart } from "lucide-react";
 import ScouterTab from "./scouter/ScoutingTab";
 import MatchList from "./scouter/MatchList";
 import ScanningTab from "./scouter/scanner/ScanningTab";
@@ -10,66 +10,76 @@ import TeamTab from "./strategy/TeamTab";
 
 function getHiddenImage(path: string) {
   return (
-    <div
-      style={{
-        backgroundImage: 'url("' + path + '")',
-        width: 0,
-        height: 0,
-      }}
-    >
-    </div>
+    <div className="hidden" style={{ backgroundImage: `url(${path})` }} />
   );
 }
 
+const NavLink = ({ to, children, icon: Icon }: { to: string; children: React.ReactNode; icon: React.ComponentType<any> }) => (
+  <Link 
+    to={to} 
+    className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-primary-50 hover:text-primary-600 rounded-md transition-all dark:text-dark-text dark:hover:bg-dark-card dark:hover:text-primary-400"
+  >
+    <Icon className="w-5 h-5" />
+    <span>{children}</span>
+    <ChevronRight className="w-4 h-4 ml-auto" />
+  </Link>
+);
+
 export function renderScouterNavBar() {
   return (
-      <nav className="nav-bar">
-        {getHiddenImage("./src/assets/Crescendo Map.png")}
-        {getHiddenImage("./src/assets/Blue Auto Map.png")}
-        {getHiddenImage("./src/assets/Red Auto Map.png")}
-        <ul>
-          <li>
-            <Link to="/">Match List</Link>
-          </li>
-          <li>
-            <Link to="/ScouterTab">Scout Game</Link>
-          </li>
-          <li>
-            <Link to="/ScannerTab">Scan Match</Link>
-          </li>
-        </ul>
-      </nav>
+    <motion.nav 
+      initial={{ opacity: 0, y: -20 }}
+      animate={{ opacity: 1, y: 0 }}
+      className="max-w-md mx-auto bg-white shadow-md rounded-lg p-4 m-4 dark:bg-dark-card dark:border dark:border-dark-border"
+    >
+      {getHiddenImage("./src/assets/Crescendo Map.png")}
+      {getHiddenImage("./src/assets/Blue Auto Map.png")}
+      {getHiddenImage("./src/assets/Red Auto Map.png")}
+      <div className="space-y-2">
+        <NavLink to="/" icon={ClipboardList}>Match List</NavLink>
+        <NavLink to="/ScouterTab" icon={Users}>Scout Game</NavLink>
+        <NavLink to="/ScannerTab" icon={Scan}>Scan Match</NavLink>
+      </div>
+    </motion.nav>
   );
 }
 
 export function renderStrategyNavBar() {
   return (
-    <nav className="nav-bar">
-      <ul>
-        <li>
-          <Link to="/TeamTab">Team Data</Link>
-        </li>
-        <li>
-          <Link to="/GeneralTab">General</Link>
-        </li>
-      </ul>
-    </nav>
+    <motion.nav 
+      initial={{ opacity: 0, y: -20 }}
+      animate={{ opacity: 1, y: 0 }}
+      className="max-w-md mx-auto bg-white shadow-md rounded-lg p-4 m-4 dark:bg-dark-card dark:border dark:border-dark-border"
+    >
+      <div className="space-y-2">
+        <NavLink to="/TeamTab" icon={BarChart}>Team Data</NavLink>
+        <NavLink to="/GeneralTab" icon={BarChart}>General</NavLink>
+      </div>
+    </motion.nav>
   );
 }
 
-const App: React.FC = () => {
-
+function App() {
+  useEffect(() => {
+    // Enable dark mode by default
+    document.documentElement.classList.add('dark');
+  }, []);
+
   return (
     <BrowserRouter>
-      <Routes>
-        <Route path="/ScannerTab" Component={ScanningTab} />
-        <Route path="/" Component={MatchList} />
-        <Route path="/ScouterTab" Component={ScouterTab} />
-        <Route path="/TeamTab" Component={TeamTab} />
-        <Route path="/GeneralTab" Component={GeneralTab} />
-      </Routes>
+      <div className="min-h-screen bg-gray-50 dark:bg-dark-bg flex flex-col items-center justify-center">
+        <div className="w-full max-w-4xl mx-auto px-4">
+          <Routes>
+            <Route path="/" element={<MatchList />} />
+            <Route path="/ScouterTab" element={<ScouterTab />} />
+            <Route path="/ScannerTab" element={<ScanningTab />} />
+            <Route path="/TeamTab" element={<TeamTab />} />
+            <Route path="/GeneralTab" element={<GeneralTab />} />
+          </Routes>
+        </div>
+      </div>
     </BrowserRouter>
-  ); 
-};
+  );
+}
 
 export default App;

application/src/TeamData.ts

@@ -1,3 +1,5 @@
+import { SectionData } from "./strategy/charts/PieChart";
+import { DataPoint, PassingPoint } from "./strategy/charts/MapChart"
 export class TeamData {
   public readonly matches: Record<string, Record<string, string>>;
   [key: string]: any;
@@ -14,7 +16,10 @@ export class TeamData {
         return (
           points.filter((point) => {
             if (data === "Pass" && point[0]) {
-              return  point[0]["data"] === "Pass" && point[0]["successfulness"] === succesfulness;
+              return (
+                point[0]["data"] === "Pass" &&
+                point[0]["successfulness"] === succesfulness
+              );
             }
             return (
               point["data"] === data &&
@@ -78,14 +83,17 @@ export class TeamData {
     return dataSet;
   }
 
-  getAsPie(data: string, colorMap: Record<string, string>) {
-    const dataSet: Record<string, [number, string]> = {};
+  getAsPie(
+    data: string,
+    colorMap: Record<string, string>
+  ): Record<string, SectionData> {
+    const dataSet: Record<string, SectionData> = {};
     Object.entries(this.matches).forEach(([_, match]) => {
       const dataValue = match[data];
       if (!dataSet[dataValue]) {
-        dataSet[dataValue] = [0, colorMap[dataValue]];
+        dataSet[dataValue] = { color: colorMap[dataValue], label: 0 };
       }
-      dataSet[dataValue][0]++;
+      dataSet[dataValue].label++;
     });
     return dataSet;
   }
@@ -100,4 +108,20 @@ export class TeamData {
     });
     return (sum1 / (sum1 + sum2)) * 100;
   }
+  getComments(): [string, string][] {
+    return Object.values(this.matches)
+      .map((match) => [match["Comment"], match["Qual"]])
+      .filter(([comment, qual]) => comment !== "") as [string, string][];
+  }
+
+  getAllPoints() {
+    let points: (DataPoint | PassingPoint)[] = [];
+    Object.values(this.matches).forEach((match) => {
+      const mapPoints: (DataPoint | PassingPoint)[] = JSON.parse(
+        match[TeamData.mapName + "/Points"]
+      );
+      points = [...points, ...mapPoints];
+    });
+    return points;
+  }
 }