From ed3d4ed050920472442b4ad42d8ee78d20115a67 Mon Sep 17 00:00:00 2001
From: ritzz26 <ritagarwalrit@gmail.com>
Date: Fri, 8 Mar 2024 20:02:46 -0800
Subject: [PATCH 01/38] working extended list with correct css

---
 app/(interactive)/matches/[slug]/page.js |  4 ++
 app/components/ExtendedList.js           | 71 ++++++++++++++++++++++++
 app/styles/ExtendedList.module.css       |  0
 app/styles/Match.module.css              | 13 +++++
 4 files changed, 88 insertions(+)
 create mode 100644 app/components/ExtendedList.js
 create mode 100644 app/styles/ExtendedList.module.css

diff --git a/app/(interactive)/matches/[slug]/page.js b/app/(interactive)/matches/[slug]/page.js
index 0bfe295..7c0b826 100644
--- a/app/(interactive)/matches/[slug]/page.js
+++ b/app/(interactive)/matches/[slug]/page.js
@@ -10,6 +10,7 @@ import VideoPlayer from '../../../components/VideoPlayer';
 import FilterList from '../../../components/FilterList';
 import PointsList from '../../../components/PointsList';
 import ScoreBoard from '../../../components/ScoreBoard';
+import ExtendedList from '../../../components/ExtendedList';
 
 import { collection, getDocs } from 'firebase/firestore';
 import { db } from '../../../services/initializeFirebase';
@@ -204,6 +205,9 @@ const MatchPage = () => {
               </div>
             </div>
           </div>
+          <div className={styles.ExtendedList}>
+            <ExtendedList pointsData={returnFilteredPoints()} />
+          </div>
           <br></br>
           {matchData.pdfUrl && <iframe className={styles.pdfView} src={matchData.pdfUrl} width="90%" height="1550" />}
           <br></br>
diff --git a/app/components/ExtendedList.js b/app/components/ExtendedList.js
new file mode 100644
index 0000000..1da638a
--- /dev/null
+++ b/app/components/ExtendedList.js
@@ -0,0 +1,71 @@
+import React, { useEffect } from 'react';
+import styles from '../styles/ExtendedList.module.css';
+
+//create a table with dynamic width and height
+function createDynamicTable(data) {
+    const table = document.createElement("table");
+    table.style.width = "100%";
+    table.classList.add("dynamic-table");
+
+    const thead = document.createElement("thead");
+    const headerRow = document.createElement("tr");
+
+    //TABLE HEADER, TBD, USING KEYS FOR NOW
+    let keys = ["serverName", "setScore", "gameScore", "pointScore", "pointWonBy", "lastShotResult", "rallyCount"];
+    let keys_headers = ["Server", "Set Score", "Game Score", "Point", "Point Winner", "Last Shot Type", "Duration"];
+    keys_headers.forEach((key) => {
+        const th = document.createElement("th");
+        th.textContent = key;
+        th.style.fontSize = '16px';
+        th.style.textAlign= 'center';
+        th.style.padding = "8px";
+        headerRow.appendChild(th);
+    });
+
+    thead.appendChild(headerRow);
+    table.appendChild(thead);
+
+    //ADD DIV?
+    const tbody = document.createElement("tbody");
+
+    data.forEach((item) => {
+        const row = document.createElement("tr");
+        keys.forEach((key) => {
+            const td = document.createElement("td");
+            td.textContent = item[key];
+            td.style.fontSize='20px';
+            td.style.textAlign= 'center';
+            td.style.padding = "8px";
+            row.appendChild(td);
+        });
+
+        tbody.appendChild(row);
+    });
+
+    table.appendChild(tbody);
+
+    return table;
+}
+
+const ExtendedList = ({ pointsData, onPointSelect }) => {
+    useEffect(() => {
+        const tableContainer = document.getElementById("table-container");
+        const dynamicTable = createDynamicTable(pointsData);
+        const tableWrapper = document.createElement("div");
+        tableWrapper.classList.add(styles.tableContainer); 
+        tableWrapper.appendChild(dynamicTable);
+        tableContainer.appendChild(tableWrapper);
+        return () => {
+            if (tableContainer && tableWrapper) {
+                tableContainer.removeChild(tableWrapper);
+            }
+        };
+    }, [pointsData]);
+
+    return (
+        <div id="table-container" className={styles.tableContainer}>
+        </div>
+    );
+};
+
+export default ExtendedList;
diff --git a/app/styles/ExtendedList.module.css b/app/styles/ExtendedList.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/app/styles/Match.module.css b/app/styles/Match.module.css
index 59f0f31..aa8c85e 100644
--- a/app/styles/Match.module.css
+++ b/app/styles/Match.module.css
@@ -127,4 +127,17 @@
     transition:
       color 0.15s ease,
       border-color 0.15s ease;
+  }
+
+  .ExtendedList{
+    width: 80%;
+    border: 1px solid #eaeaea;
+    border-radius: 10px;
+    padding: 1.5rem;
+    text-align: left;
+    color: inherit;
+    text-decoration: none;
+    transition:
+      color 0.15s ease,
+      border-color 0.15s ease;
   }
\ No newline at end of file

From 453683a7e5596a8b7680829fc549184bbb429ef8 Mon Sep 17 00:00:00 2001
From: ritzz26 <ritagarwalrit@gmail.com>
Date: Sat, 30 Mar 2024 15:56:59 -0700
Subject: [PATCH 02/38] Working points list, need to fix some kinks on mobile
 and add logos

---
 app/components/ExtendedList.js | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/app/components/ExtendedList.js b/app/components/ExtendedList.js
index 1da638a..7fe34c5 100644
--- a/app/components/ExtendedList.js
+++ b/app/components/ExtendedList.js
@@ -3,6 +3,7 @@ import styles from '../styles/ExtendedList.module.css';
 
 //create a table with dynamic width and height
 function createDynamicTable(data) {
+    console.log(data);
     const table = document.createElement("table");
     table.style.width = "100%";
     table.classList.add("dynamic-table");
@@ -16,9 +17,9 @@ function createDynamicTable(data) {
     keys_headers.forEach((key) => {
         const th = document.createElement("th");
         th.textContent = key;
-        th.style.fontSize = '16px';
-        th.style.textAlign= 'center';
-        th.style.padding = "8px";
+        th.style.fontSize = '20px';
+        th.style.fontWeight = 'normal';
+        th.style.textAlign= 'left';
         headerRow.appendChild(th);
     });
 
@@ -31,10 +32,17 @@ function createDynamicTable(data) {
     data.forEach((item) => {
         const row = document.createElement("tr");
         keys.forEach((key) => {
-            const td = document.createElement("td");
+            const td = document.createElement("td");            
             td.textContent = item[key];
+            if(item[key] == item['player1Name']){
+                td.content = <img src = {data.clientLogo}></img>
+            }
+            else{
+                td.content = <img src = {data.opponentLogo}></img>
+            }
             td.style.fontSize='20px';
-            td.style.textAlign= 'center';
+            td.style.fontWeight = 'bold';
+            td.style.textAlign= 'left';
             td.style.padding = "8px";
             row.appendChild(td);
         });

From 972adf82f06137bd5d04c72ca0c502e4df3cc2fc Mon Sep 17 00:00:00 2001
From: ritzz26 <ritagarwalrit@gmail.com>
Date: Tue, 2 Apr 2024 00:10:53 -0700
Subject: [PATCH 03/38] line and spacing

---
 app/components/ExtendedList.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/components/ExtendedList.js b/app/components/ExtendedList.js
index 7fe34c5..60da60e 100644
--- a/app/components/ExtendedList.js
+++ b/app/components/ExtendedList.js
@@ -29,7 +29,7 @@ function createDynamicTable(data) {
     //ADD DIV?
     const tbody = document.createElement("tbody");
 
-    data.forEach((item) => {
+    data.forEach((item, index) => {
         const row = document.createElement("tr");
         keys.forEach((key) => {
             const td = document.createElement("td");            
@@ -44,9 +44,13 @@ function createDynamicTable(data) {
             td.style.fontWeight = 'bold';
             td.style.textAlign= 'left';
             td.style.padding = "8px";
+            td.style.borderBottom="solid 0.2px #EDEDED";
+            td.style.padding = "20px";
             row.appendChild(td);
         });
-
+        // if (index !== data.length - 1) {
+            // row.style.border='5px';
+        // }
         tbody.appendChild(row);
     });
 

From 72dc706b368c10397115017b2de542fb191d1e49 Mon Sep 17 00:00:00 2001
From: ritzz26 <ritagarwalrit@gmail.com>
Date: Fri, 5 Apr 2024 17:01:35 -0700
Subject: [PATCH 04/38] added logos and visuals

---
 app/(interactive)/matches/[slug]/page.js |  3 +-
 app/components/ExtendedList.js           | 47 ++++++++++++++----------
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/app/(interactive)/matches/[slug]/page.js b/app/(interactive)/matches/[slug]/page.js
index 7c0b826..6f96683 100644
--- a/app/(interactive)/matches/[slug]/page.js
+++ b/app/(interactive)/matches/[slug]/page.js
@@ -36,6 +36,7 @@ const MatchPage = () => {
   const [playingPoint, setPlayingPoint] = useState(null);
 
   // const router = useRouter();
+  console.log(matchData)
   const pathname = usePathname()
   const videoId = pathname.substring(pathname.lastIndexOf('/') + 1);
 
@@ -206,7 +207,7 @@ const MatchPage = () => {
             </div>
           </div>
           <div className={styles.ExtendedList}>
-            <ExtendedList pointsData={returnFilteredPoints()} />
+            <ExtendedList pointsData={returnFilteredPoints()} client ={matchData.clientLogo} opp = {matchData.opponentLogo} />
           </div>
           <br></br>
           {matchData.pdfUrl && <iframe className={styles.pdfView} src={matchData.pdfUrl} width="90%" height="1550" />}
diff --git a/app/components/ExtendedList.js b/app/components/ExtendedList.js
index 60da60e..d6687c5 100644
--- a/app/components/ExtendedList.js
+++ b/app/components/ExtendedList.js
@@ -2,8 +2,7 @@ import React, { useEffect } from 'react';
 import styles from '../styles/ExtendedList.module.css';
 
 //create a table with dynamic width and height
-function createDynamicTable(data) {
-    console.log(data);
+function createDynamicTable(data, client, opp) {
     const table = document.createElement("table");
     table.style.width = "100%";
     table.classList.add("dynamic-table");
@@ -12,8 +11,8 @@ function createDynamicTable(data) {
     const headerRow = document.createElement("tr");
 
     //TABLE HEADER, TBD, USING KEYS FOR NOW
-    let keys = ["serverName", "setScore", "gameScore", "pointScore", "pointWonBy", "lastShotResult", "rallyCount"];
-    let keys_headers = ["Server", "Set Score", "Game Score", "Point", "Point Winner", "Last Shot Type", "Duration"];
+    let keys = ["", "serverName", "setScore", "gameScore", "pointScore", "pointWonBy", "lastShotResult", "rallyCount"];
+    let keys_headers = ["", "Server", "Set Score", "Game Score", "Point", "Point Winner", "Last Shot Type", "Duration"];
     keys_headers.forEach((key) => {
         const th = document.createElement("th");
         th.textContent = key;
@@ -27,25 +26,35 @@ function createDynamicTable(data) {
     table.appendChild(thead);
 
     //ADD DIV?
+    console.log(data)
+    console.log(client)
+    console.log(opp)
     const tbody = document.createElement("tbody");
-
-    data.forEach((item, index) => {
+    data.forEach((item) => {
         const row = document.createElement("tr");
-        keys.forEach((key) => {
+        keys.forEach((key, index) => {
             const td = document.createElement("td");            
-            td.textContent = item[key];
-            if(item[key] == item['player1Name']){
-                td.content = <img src = {data.clientLogo}></img>
+            const img = document.createElement("img");
+            if(index==0){
+            console.log(item['player1Name'])
+                if(item['player1Name']===item['serverName']){
+                    img.src = client;
+                }
+                else{
+                    img.src = opp;
+                }
+                img.width="35";
+                td.appendChild(img);
             }
             else{
-                td.content = <img src = {data.opponentLogo}></img>
-            }
+                td.textContent = item[key];
             td.style.fontSize='20px';
             td.style.fontWeight = 'bold';
             td.style.textAlign= 'left';
             td.style.padding = "8px";
             td.style.borderBottom="solid 0.2px #EDEDED";
             td.style.padding = "20px";
+            }
             row.appendChild(td);
         });
         // if (index !== data.length - 1) {
@@ -59,19 +68,19 @@ function createDynamicTable(data) {
     return table;
 }
 
-const ExtendedList = ({ pointsData, onPointSelect }) => {
+const ExtendedList = ({ pointsData, client, opp }) => {
     useEffect(() => {
         const tableContainer = document.getElementById("table-container");
-        const dynamicTable = createDynamicTable(pointsData);
+        const dynamicTable = createDynamicTable(pointsData, client, opp);
         const tableWrapper = document.createElement("div");
         tableWrapper.classList.add(styles.tableContainer); 
         tableWrapper.appendChild(dynamicTable);
         tableContainer.appendChild(tableWrapper);
-        return () => {
-            if (tableContainer && tableWrapper) {
-                tableContainer.removeChild(tableWrapper);
-            }
-        };
+        // return () => {
+        //     if (tableContainer && tableWrapper) {
+        //         tableContainer.removeChild(tableWrapper);
+        //     }
+        // };
     }, [pointsData]);
 
     return (

From d756939a5b50a25d4c48d289bf98d45b05f55766 Mon Sep 17 00:00:00 2001
From: ritzz26 <ritagarwalrit@gmail.com>
Date: Fri, 5 Apr 2024 17:02:30 -0700
Subject: [PATCH 05/38] legacy comment

---
 app/components/ExtendedList.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/components/ExtendedList.js b/app/components/ExtendedList.js
index d6687c5..ddf2aee 100644
--- a/app/components/ExtendedList.js
+++ b/app/components/ExtendedList.js
@@ -25,16 +25,13 @@ function createDynamicTable(data, client, opp) {
     thead.appendChild(headerRow);
     table.appendChild(thead);
 
-    //ADD DIV?
-    console.log(data)
-    console.log(client)
-    console.log(opp)
     const tbody = document.createElement("tbody");
     data.forEach((item) => {
         const row = document.createElement("tr");
         keys.forEach((key, index) => {
             const td = document.createElement("td");            
             const img = document.createElement("img");
+            //NOTE: the player1 is always client historically. THIS CODE IS LEGACY CHANGE IF NEEDED
             if(index==0){
             console.log(item['player1Name'])
                 if(item['player1Name']===item['serverName']){

From 2f4fc41de0e49b86ffb366d16b4ddd217cb587f7 Mon Sep 17 00:00:00 2001
From: Alex West <awest2025@ucla.edu>
Date: Tue, 16 Apr 2024 21:33:13 -0700
Subject: [PATCH 06/38] added tennis court SVG

---
 app/(interactive)/tag-match/[slug]/page.js |  26 ++---
 app/components/TennisCourtSVG.js           | 114 +++++++++++++++++++++
 2 files changed, 125 insertions(+), 15 deletions(-)
 create mode 100644 app/components/TennisCourtSVG.js

diff --git a/app/(interactive)/tag-match/[slug]/page.js b/app/(interactive)/tag-match/[slug]/page.js
index 0c36114..e061200 100644
--- a/app/(interactive)/tag-match/[slug]/page.js
+++ b/app/(interactive)/tag-match/[slug]/page.js
@@ -8,6 +8,7 @@ import styles from '../../../styles/TagMatch.module.css';
 import { usePathname } from 'next/navigation'
 import getMatchInfo from '../../../services/getMatchInfo.js';
 import updateMatchDocument from '../../../services/updateMatchDocument.js';
+import TennisCourtSVG from '@/app/components/TennisCourtSVG';
 
 export default function TagMatch() {
   // const router = useRouter();
@@ -355,23 +356,23 @@ export default function TagMatch() {
     const courtWidthInInches = 432; // The court is 36 feet wide, or 432 inches
     const courtHeightInInches = 936; // The court is 78 feet long, or 936 inches
 
-    // Get the bounding rectangle of the target (image)
-    const rect = event.target.getBoundingClientRect();
+    // Get the bounding rectangle of the SVG container
+    const rect = event.currentTarget.getBoundingClientRect();
 
-    const widthOfCourt = rect.right - rect.left;
-    const heightOfCourt = rect.bottom - rect.top;
+    const widthOfCourt = rect.width; // Using rect.width is more reliable
+    const heightOfCourt = rect.height;
 
-    // Calculate the click position relative to the image
+    // Calculate the click position relative to the SVG container
     const x = event.clientX - rect.left;
     const y = event.clientY - rect.top;
 
-    // Calculate the click position relative to the court
+    // Calculate the click position in inches
     const xInches = Math.round((x / widthOfCourt) * courtWidthInInches);
     const yInches = Math.round((y / heightOfCourt) * courtHeightInInches);
 
     console.log("xInches: " + xInches + " yInches: " + yInches);
-    return { 'x': xInches, 'y': yInches };
-  }
+    return { x: xInches, y: yInches };
+  };
 
 
   return (
@@ -394,10 +395,7 @@ export default function TagMatch() {
             return button.courtImage === true ? (
               <div>
                 <p>{button.label}</p>
-                <img
-                  src="/images/Tennis_Court_Full.png"
-                  alt="tennis court"
-                  onClick={(event) => {
+                <TennisCourtSVG className={styles.courtImage} handleImageClick={(event) => {
                     setPopUp([])
                     saveToHistory();
                     let data = handleImageClick(event); // returns data.x and data.y coordinates
@@ -406,9 +404,7 @@ export default function TagMatch() {
                     data.videoTimestamp = getVideoTimestamp();
                     button.action(data);
                     showPopUp()
-                  }}
-                  style={{ width: "10%" }}
-                />
+                  }} />
               </div>
             ) : (
               <button className={styles.customButton} key={index} onClick={() => {
diff --git a/app/components/TennisCourtSVG.js b/app/components/TennisCourtSVG.js
new file mode 100644
index 0000000..b4ff61e
--- /dev/null
+++ b/app/components/TennisCourtSVG.js
@@ -0,0 +1,114 @@
+import React from 'react';
+
+const TennisCourtSVG = ({ handleImageClick }) => {
+  return (
+    <svg onClick={handleImageClick} width="480" height="900" style={{ border: '4px solid red' }}>
+      {/* Background */}
+      <rect x="0" y="450" width="480" height="450" fill="lightgray" />
+      <rect x="0" y="0" width="480" height="450" fill="lightgray" />
+
+      {/* Top half of the court */}
+      <rect x="60" y="60" width="45" height="390" fill="lightblue" />
+      <rect x="105" y="60" width="270" height="180" fill="lightblue" />
+      <rect x="375" y="60" width="45" height="390" fill="lightblue" />
+      <rect x="105" y="240" width="135" height="210" fill="lightblue" />
+      <rect x="240" y="240" width="135" height="210" fill="lightblue" />
+
+      {/* Bottom half of the court, mirrored from the top half */}
+      <rect x="60" y="450" width="45" height="390" fill="lightblue" />
+      <rect x="105" y="660" width="270" height="180" fill="lightblue" />
+      <rect x="375" y="450" width="45" height="390" fill="lightblue" />
+      <rect x="105" y="450" width="135" height="210" fill="lightblue" />
+      <rect x="240" y="450" width="135" height="210" fill="lightblue" />
+
+      {/* T lines and center lines */}
+      <line x1="105" y1="240" x2="375" y2="240" stroke="white" stroke-width="2" />
+      <line x1="105" y1="660" x2="375" y2="660" stroke="white" stroke-width="2" />
+      <line x1="240" y1="240" x2="240" y2="450" stroke="white" stroke-width="2" />
+      <line x1="240" y1="450" x2="240" y2="660" stroke="white" stroke-width="2" />
+
+      {/* Alley lines */}
+      <line x1="105" y1="60" x2="105" y2="450" stroke="white" stroke-width="2" />
+      <line x1="375" y1="60" x2="375" y2="450" stroke="white" stroke-width="2" />
+      <line x1="105" y1="450" x2="105" y2="840" stroke="white" stroke-width="2" />
+      <line x1="375" y1="450" x2="375" y2="840" stroke="white" stroke-width="2" />
+
+      {/* Outside alley lines */}
+      <line x1="60" y1="60" x2="60" y2="450" stroke="white" stroke-width="2" />
+      <line x1="420" y1="60" x2="420" y2="450" stroke="white" stroke-width="2" />
+      <line x1="60" y1="840" x2="60" y2="450" stroke="white" stroke-width="2" />
+      <line x1="420" y1="840" x2="420" y2="450" stroke="white" stroke-width="2" />
+
+      {/* Top and Bottom lines */}
+      <line x1="60" y1="60" x2="420" y2="60" stroke="white" stroke-width="2" />
+      <line x1="60" y1="840" x2="420" y2="840" stroke="white" stroke-width="2" />
+
+      {/* Net Line */}
+      <line className="gray-hoverable" x1="30" y1="450" x2="450" y2="450" stroke="black" stroke-width="4" />
+
+      <style>
+        {`
+          rect:hover { fill: green; }
+          .gray-hoverable:hover { stroke: darkgray; }
+        `}
+      </style>
+    </svg>
+  );
+}
+
+export default TennisCourtSVG;
+
+
+/*
+ *  HTML version
+ */
+
+/*
+<svg width="480" height="900" style="border: 4px solid red;">
+<!-- Background out -->
+<rect x="0" y="450" width="480" height="450" fill="lightgray" /> <!-- Top background -->
+<rect x="0" y="0" width="480" height="450" fill="lightgray" /> <!-- Bottom background -->
+
+<!-- Top half of the court -->
+<rect x="60" y="60" width="45" height="390" fill="lightblue" /> <!-- Top left alley -->
+<rect x="105" y="60" width="270" height="180" fill="lightblue" /> <!-- Top upper middle -->
+<rect x="375" y="60" width="45" height="390" fill="lightblue" /> <!-- Top right alley -->
+<rect x="105" y="240" width="135" height="210" fill="lightblue" /> <!-- Top left middle -->
+<rect x="240" y="240" width="135" height="210" fill="lightblue" /> <!-- Top right middle -->
+
+<!-- Bottom half of the court, mirrored from the top half -->
+<rect x="60" y="450" width="45" height="390" fill="lightblue" /> <!-- Bottom left alley -->
+<rect x="105" y="660" width="270" height="180" fill="lightblue" /> <!-- Bottom upper middle -->
+<rect x="375" y="450" width="45" height="390" fill="lightblue" /> <!-- Bottom right alley -->
+<rect x="105" y="450" width="135" height="210" fill="lightblue" /> <!-- Bottom left middle -->
+<rect x="240" y="450" width="135" height="210" fill="lightblue" /> <!-- Bottom right middle -->
+
+<!-- T lines -->
+<line x1="105" y1="240" x2="375" y2="240" stroke="white" stroke-width="2" />
+<line x1="105" y1="660" x2="375" y2="660" stroke="white" stroke-width="2" /> <!-- Mirrored T line -->
+<line x1="240" y1="240" x2="240" y2="450" stroke="white" stroke-width="2" />
+<line x1="240" y1="450" x2="240" y2="660" stroke="white" stroke-width="2" /> <!-- Mirrored center line -->
+
+<!-- Alley lines -->
+<line x1="105" y1="60" x2="105" y2="450" stroke="white" stroke-width="2" />
+<line x1="375" y1="60" x2="375" y2="450" stroke="white" stroke-width="2" />
+<line x1="105" y1="450" x2="105" y2="840" stroke="white" stroke-width="2" /> <!-- Mirrored alley line -->
+<line x1="375" y1="450" x2="375" y2="840" stroke="white" stroke-width="2" /> <!-- Mirrored alley line -->
+
+<line x1="60" y1="60" x2="60" y2="450" stroke="white" stroke-width="2" /> <!-- Top left outside alley -->
+<line x1="420" y1="60" x2="420" y2="450" stroke="white" stroke-width="2" /> <!-- Top right outside alley -->
+<line x1="60" y1="840" x2="60" y2="450" stroke="white" stroke-width="2" /> <!-- Bottom left outside alley -->
+<line x1="420" y1="840" x2="420" y2="450" stroke="white" stroke-width="2" /> <!-- Bottom right outside alley -->
+
+<!-- Top and Bottom lines -->
+<line x1="60" y1="60" x2="420" y2="60" stroke="white" stroke-width="2" />
+<line x1="60" y1="840" x2="420" y2="840" stroke="white" stroke-width="2" />
+
+<!-- Net Line -->
+<line class="gray-hoverable" x1="30" y1="450" x2="450" y2="450" stroke="black" stroke-width="4" />
+<style>
+    rect:hover { fill: green; }
+    .gray-hoverable:hover { fill: darkgray; stroke: darkgray; }
+</style>
+</svg>
+*/
\ No newline at end of file

From 529ff4716aa3a7e4dac01564b5301625fc461951 Mon Sep 17 00:00:00 2001
From: ritzz26 <ritagarwalrit@gmail.com>
Date: Thu, 18 Apr 2024 00:28:04 -0700
Subject: [PATCH 07/38] fixed the DOM structure

---
 app/components/ExtendedList.js     | 110 +++++++++--------------------
 app/styles/ExtendedList.module.css |  33 +++++++++
 2 files changed, 66 insertions(+), 77 deletions(-)

diff --git a/app/components/ExtendedList.js b/app/components/ExtendedList.js
index ddf2aee..3a4703e 100644
--- a/app/components/ExtendedList.js
+++ b/app/components/ExtendedList.js
@@ -1,87 +1,43 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import styles from '../styles/ExtendedList.module.css';
+import playButtonImage from '../play_circle.jpg';
 
-//create a table with dynamic width and height
-function createDynamicTable(data, client, opp) {
-    const table = document.createElement("table");
-    table.style.width = "100%";
-    table.classList.add("dynamic-table");
-
-    const thead = document.createElement("thead");
-    const headerRow = document.createElement("tr");
-
-    //TABLE HEADER, TBD, USING KEYS FOR NOW
+const ExtendedList = ({ pointsData, client_logo, opponent_logo }) => {
     let keys = ["", "serverName", "setScore", "gameScore", "pointScore", "pointWonBy", "lastShotResult", "rallyCount"];
     let keys_headers = ["", "Server", "Set Score", "Game Score", "Point", "Point Winner", "Last Shot Type", "Duration"];
-    keys_headers.forEach((key) => {
-        const th = document.createElement("th");
-        th.textContent = key;
-        th.style.fontSize = '20px';
-        th.style.fontWeight = 'normal';
-        th.style.textAlign= 'left';
-        headerRow.appendChild(th);
-    });
-
-    thead.appendChild(headerRow);
-    table.appendChild(thead);
-
-    const tbody = document.createElement("tbody");
-    data.forEach((item) => {
-        const row = document.createElement("tr");
-        keys.forEach((key, index) => {
-            const td = document.createElement("td");            
-            const img = document.createElement("img");
-            //NOTE: the player1 is always client historically. THIS CODE IS LEGACY CHANGE IF NEEDED
-            if(index==0){
-            console.log(item['player1Name'])
-                if(item['player1Name']===item['serverName']){
-                    img.src = client;
-                }
-                else{
-                    img.src = opp;
-                }
-                img.width="35";
-                td.appendChild(img);
-            }
-            else{
-                td.textContent = item[key];
-            td.style.fontSize='20px';
-            td.style.fontWeight = 'bold';
-            td.style.textAlign= 'left';
-            td.style.padding = "8px";
-            td.style.borderBottom="solid 0.2px #EDEDED";
-            td.style.padding = "20px";
-            }
-            row.appendChild(td);
-        });
-        // if (index !== data.length - 1) {
-            // row.style.border='5px';
-        // }
-        tbody.appendChild(row);
-    });
-
-    table.appendChild(tbody);
-
-    return table;
-}
-
-const ExtendedList = ({ pointsData, client, opp }) => {
-    useEffect(() => {
-        const tableContainer = document.getElementById("table-container");
-        const dynamicTable = createDynamicTable(pointsData, client, opp);
-        const tableWrapper = document.createElement("div");
-        tableWrapper.classList.add(styles.tableContainer); 
-        tableWrapper.appendChild(dynamicTable);
-        tableContainer.appendChild(tableWrapper);
-        // return () => {
-        //     if (tableContainer && tableWrapper) {
-        //         tableContainer.removeChild(tableWrapper);
-        //     }
-        // };
-    }, [pointsData]);
+    
 
     return (
         <div id="table-container" className={styles.tableContainer}>
+            <table className={styles.table}>
+                <thead>
+                    <tr>
+                        {keys_headers.map((key, index) => (
+                            <th className={styles.TH} key={index}>{key}</th>
+                        ))}
+                    </tr>
+                </thead>
+                <tbody>
+                    {pointsData.map((item, rowIndex) => (
+                        <tr key={rowIndex}>
+                            {keys.map((key, cellIndex) => (
+                                <td className={styles.TD} key={cellIndex}>
+                                    {cellIndex === 0 ? (
+                                        <img src={item['player1Name'] === item['serverName'] ? client_logo : opponent_logo} className={styles.IMG}/>
+                                    ) : (
+                                        item[key]
+                                    )}
+                                </td>
+                            ))}
+                            <td>
+                                <button className={styles.button}>
+                                    <img src={playButtonImage} className={styles.playButton} />
+                                </button>
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
         </div>
     );
 };
diff --git a/app/styles/ExtendedList.module.css b/app/styles/ExtendedList.module.css
index e69de29..4df3719 100644
--- a/app/styles/ExtendedList.module.css
+++ b/app/styles/ExtendedList.module.css
@@ -0,0 +1,33 @@
+.table{
+    width: 100%;
+}
+
+.TH{
+    font-size: 18px;
+    font-weight: normal;
+    text-align: center;
+    color: grey;
+}
+
+.IMG{
+    width: 35;
+    text-align: center !important; 
+}
+
+.TD{
+    font-size: 20px;
+    font-weight: bold;
+    text-align: right;
+    padding: 8px;
+    border-bottom: solid 0.2px #EDEDED;
+}
+
+.button{
+    background-color: white;
+    border: none;
+}
+.playButton{
+    width: 20px;
+    height: 20px;
+}
+

From 5637b08a7afa69ea59d587f44ece0498483f0a9a Mon Sep 17 00:00:00 2001
From: ritzz26 <ritagarwalrit@gmail.com>
Date: Thu, 18 Apr 2024 00:38:00 -0700
Subject: [PATCH 08/38] fixed logo

---
 app/(interactive)/matches/[slug]/page.js |   2 +-
 app/components/ExtendedList.js           |  49 ++++++++++++++++++++++-
 app/components/play_button.png           | Bin 0 -> 11647 bytes
 3 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 app/components/play_button.png

diff --git a/app/(interactive)/matches/[slug]/page.js b/app/(interactive)/matches/[slug]/page.js
index 30a1058..4d52b89 100644
--- a/app/(interactive)/matches/[slug]/page.js
+++ b/app/(interactive)/matches/[slug]/page.js
@@ -209,7 +209,7 @@ const MatchPage = () => {
             </div>
           </div>
           <div className={styles.ExtendedList}>
-            <ExtendedList pointsData={returnFilteredPoints()} client ={matchData.clientLogo} opp = {matchData.opponentLogo} />
+            <ExtendedList pointsData={returnFilteredPoints()} clientTeam={matchData.clientTeam} opponentTeam={matchData.opponentTeam} />
           </div>
           <br></br>
           {matchData.pdfUrl && <iframe className={styles.pdfView} src={matchData.pdfUrl} width="90%" height="1550" />}
diff --git a/app/components/ExtendedList.js b/app/components/ExtendedList.js
index 3a4703e..3be3b05 100644
--- a/app/components/ExtendedList.js
+++ b/app/components/ExtendedList.js
@@ -1,8 +1,55 @@
 import React from 'react';
 import styles from '../styles/ExtendedList.module.css';
 import playButtonImage from '../play_circle.jpg';
+import getTeams from '@/app/services/getTeams.js';
 
-const ExtendedList = ({ pointsData, client_logo, opponent_logo }) => {
+const Logos = ({
+    clientTeam,
+    opponentTeam,
+  }) => {
+    const [clientLogo, setClientLogo] = useState('');
+    const [opponentLogo, setOpponentLogo] = useState('');
+    const [isUnfinished, setIsUnfinished] = useState(false);
+  
+    useEffect(() => {
+      const fetchLogos = async () => {
+        try {
+          console.log(clientTeam);
+          console.log(opponentTeam);
+          const allTeams = await getTeams();
+          const clientLogoURL = allTeams.find((team) => team.name === clientTeam).logoUrl;
+          const opponentLogoURL = allTeams.find((team) => team.name === opponentTeam).logoUrl;
+          setClientLogo(clientLogoURL);
+          setOpponentLogo(opponentLogoURL);
+        } catch (error) {
+          console.error('Error fetching data:', error);
+        }
+      };
+  
+      fetchLogos();
+    });}
+
+const ExtendedList = ({ pointsData, clientTeam, opponentTeam }) => {
+    const [client_logo, setClientLogo] = useState('');
+    const [opponent_logo, setOpponentLogo] = useState('');
+  
+    useEffect(() => {
+      const fetchLogos = async () => {
+        try {
+          console.log(clientTeam);
+          console.log(opponentTeam);
+          const allTeams = await getTeams();
+          const clientLogoURL = allTeams.find((team) => team.name === clientTeam).logoUrl;
+          const opponentLogoURL = allTeams.find((team) => team.name === opponentTeam).logoUrl;
+          setClientLogo(clientLogoURL);
+          setOpponentLogo(opponentLogoURL);
+        } catch (error) {
+          console.error('Error fetching data:', error);
+        }
+      };
+  
+      fetchLogos();
+    });
     let keys = ["", "serverName", "setScore", "gameScore", "pointScore", "pointWonBy", "lastShotResult", "rallyCount"];
     let keys_headers = ["", "Server", "Set Score", "Game Score", "Point", "Point Winner", "Last Shot Type", "Duration"];
     
diff --git a/app/components/play_button.png b/app/components/play_button.png
new file mode 100644
index 0000000000000000000000000000000000000000..1e6b25d79049faf6e2e9d0db238e4aa1ee302f50
GIT binary patch
literal 11647
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
E4;_-GW&i*H

literal 0
HcmV?d00001


From b70661d9681092848fa042d6978423cd09a86ae9 Mon Sep 17 00:00:00 2001
From: ritzz26 <ritagarwalrit@gmail.com>
Date: Thu, 18 Apr 2024 00:48:44 -0700
Subject: [PATCH 09/38] added logos

---
 app/components/ExtendedList.js     | 6 ++----
 app/styles/ExtendedList.module.css | 6 ++++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/components/ExtendedList.js b/app/components/ExtendedList.js
index 3be3b05..fb8d707 100644
--- a/app/components/ExtendedList.js
+++ b/app/components/ExtendedList.js
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useEffect, useState } from "react";
 import styles from '../styles/ExtendedList.module.css';
-import playButtonImage from '../play_circle.jpg';
+import playButtonImage from './play_button.png';
 import getTeams from '@/app/services/getTeams.js';
 
 const Logos = ({
@@ -14,8 +14,6 @@ const Logos = ({
     useEffect(() => {
       const fetchLogos = async () => {
         try {
-          console.log(clientTeam);
-          console.log(opponentTeam);
           const allTeams = await getTeams();
           const clientLogoURL = allTeams.find((team) => team.name === clientTeam).logoUrl;
           const opponentLogoURL = allTeams.find((team) => team.name === opponentTeam).logoUrl;
diff --git a/app/styles/ExtendedList.module.css b/app/styles/ExtendedList.module.css
index 4df3719..462da6d 100644
--- a/app/styles/ExtendedList.module.css
+++ b/app/styles/ExtendedList.module.css
@@ -10,8 +10,10 @@
 }
 
 .IMG{
-    width: 35;
-    text-align: center !important; 
+    max-width: 50px; /* Adjust the width as needed */
+    height: auto; /* Ensures the aspect ratio is maintained */
+    display: block; /* Removes extra space around the image */
+    width: 100%;
 }
 
 .TD{

From 1dba719447f93c78ccb873a6f10b4bf30d184d24 Mon Sep 17 00:00:00 2001
From: ritzz26 <ritagarwalrit@gmail.com>
Date: Thu, 18 Apr 2024 00:53:52 -0700
Subject: [PATCH 10/38] minor styling

---
 app/styles/ExtendedList.module.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/styles/ExtendedList.module.css b/app/styles/ExtendedList.module.css
index 462da6d..665553f 100644
--- a/app/styles/ExtendedList.module.css
+++ b/app/styles/ExtendedList.module.css
@@ -3,10 +3,11 @@
 }
 
 .TH{
-    font-size: 18px;
+    font-size: 16px;
     font-weight: normal;
     text-align: center;
     color: grey;
+    padding-left: 5px;
 }
 
 .IMG{

From 0d898a8a38e72d4184e3945ba6e3a8d5f7a22abd Mon Sep 17 00:00:00 2001
From: ritzz26 <ritagarwalrit@gmail.com>
Date: Thu, 18 Apr 2024 15:38:23 -0700
Subject: [PATCH 11/38] added play button from krish point list

---
 app/components/ExtendedList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/ExtendedList.js b/app/components/ExtendedList.js
index fb8d707..c3d897a 100644
--- a/app/components/ExtendedList.js
+++ b/app/components/ExtendedList.js
@@ -76,7 +76,7 @@ const ExtendedList = ({ pointsData, clientTeam, opponentTeam }) => {
                             ))}
                             <td>
                                 <button className={styles.button}>
-                                    <img src={playButtonImage} className={styles.playButton} />
+                                <img src="https://icons.veryicon.com/png/o/miscellaneous/food-time/play-video-1.png" alt="Play Icon" style={{ maxWidth: '30px', height: 'auto', minWidth: '30px' }} />
                                 </button>
                             </td>
                         </tr>

From 4276904aa64f41913deeff8cb976f0db20c6662d Mon Sep 17 00:00:00 2001
From: ritzz26 <ritagarwalrit@gmail.com>
Date: Thu, 18 Apr 2024 22:54:50 -0700
Subject: [PATCH 12/38] added button scroll functionality and fixed some
 styling

---
 app/components/ExtendedList.js     | 37 ++++++++----------------------
 app/styles/ExtendedList.module.css |  8 +++----
 app/styles/Match.module.css        |  2 +-
 3 files changed, 14 insertions(+), 33 deletions(-)

diff --git a/app/components/ExtendedList.js b/app/components/ExtendedList.js
index c3d897a..82ab1b3 100644
--- a/app/components/ExtendedList.js
+++ b/app/components/ExtendedList.js
@@ -3,30 +3,6 @@ import styles from '../styles/ExtendedList.module.css';
 import playButtonImage from './play_button.png';
 import getTeams from '@/app/services/getTeams.js';
 
-const Logos = ({
-    clientTeam,
-    opponentTeam,
-  }) => {
-    const [clientLogo, setClientLogo] = useState('');
-    const [opponentLogo, setOpponentLogo] = useState('');
-    const [isUnfinished, setIsUnfinished] = useState(false);
-  
-    useEffect(() => {
-      const fetchLogos = async () => {
-        try {
-          const allTeams = await getTeams();
-          const clientLogoURL = allTeams.find((team) => team.name === clientTeam).logoUrl;
-          const opponentLogoURL = allTeams.find((team) => team.name === opponentTeam).logoUrl;
-          setClientLogo(clientLogoURL);
-          setOpponentLogo(opponentLogoURL);
-        } catch (error) {
-          console.error('Error fetching data:', error);
-        }
-      };
-  
-      fetchLogos();
-    });}
-
 const ExtendedList = ({ pointsData, clientTeam, opponentTeam }) => {
     const [client_logo, setClientLogo] = useState('');
     const [opponent_logo, setOpponentLogo] = useState('');
@@ -34,8 +10,6 @@ const ExtendedList = ({ pointsData, clientTeam, opponentTeam }) => {
     useEffect(() => {
       const fetchLogos = async () => {
         try {
-          console.log(clientTeam);
-          console.log(opponentTeam);
           const allTeams = await getTeams();
           const clientLogoURL = allTeams.find((team) => team.name === clientTeam).logoUrl;
           const opponentLogoURL = allTeams.find((team) => team.name === opponentTeam).logoUrl;
@@ -49,9 +23,16 @@ const ExtendedList = ({ pointsData, clientTeam, opponentTeam }) => {
       fetchLogos();
     });
     let keys = ["", "serverName", "setScore", "gameScore", "pointScore", "pointWonBy", "lastShotResult", "rallyCount"];
-    let keys_headers = ["", "Server", "Set Score", "Game Score", "Point", "Point Winner", "Last Shot Type", "Duration"];
+    let keys_headers = ["Server", "", "Set Score", "Game Score", "Point", "Point Winner", "Last Shot Type", "Duration"];
     
 
+    const Scroll=()=>{
+      window.scrollTo({
+        top: 100,
+        behavior: "smooth"
+    });
+    }
+
     return (
         <div id="table-container" className={styles.tableContainer}>
             <table className={styles.table}>
@@ -75,7 +56,7 @@ const ExtendedList = ({ pointsData, clientTeam, opponentTeam }) => {
                                 </td>
                             ))}
                             <td>
-                                <button className={styles.button}>
+                                <button className={styles.button} onClick={Scroll}>
                                 <img src="https://icons.veryicon.com/png/o/miscellaneous/food-time/play-video-1.png" alt="Play Icon" style={{ maxWidth: '30px', height: 'auto', minWidth: '30px' }} />
                                 </button>
                             </td>
diff --git a/app/styles/ExtendedList.module.css b/app/styles/ExtendedList.module.css
index 665553f..e37bc6b 100644
--- a/app/styles/ExtendedList.module.css
+++ b/app/styles/ExtendedList.module.css
@@ -4,8 +4,8 @@
 
 .TH{
     font-size: 16px;
-    font-weight: normal;
-    text-align: center;
+    font-weight: 500;
+    text-align: left;
     color: grey;
     padding-left: 5px;
 }
@@ -19,8 +19,8 @@
 
 .TD{
     font-size: 20px;
-    font-weight: bold;
-    text-align: right;
+    font-weight: 700;
+    text-align: left;
     padding: 8px;
     border-bottom: solid 0.2px #EDEDED;
 }
diff --git a/app/styles/Match.module.css b/app/styles/Match.module.css
index aa8c85e..64eb376 100644
--- a/app/styles/Match.module.css
+++ b/app/styles/Match.module.css
@@ -130,7 +130,7 @@
   }
 
   .ExtendedList{
-    width: 80%;
+    width:100%;
     border: 1px solid #eaeaea;
     border-radius: 10px;
     padding: 1.5rem;

From 3e618d0d1923f5aeac38511d068b0a6b26cd848f Mon Sep 17 00:00:00 2001
From: ritzz26 <ritagarwalrit@gmail.com>
Date: Thu, 18 Apr 2024 22:58:15 -0700
Subject: [PATCH 13/38] added pointer

---
 app/styles/ExtendedList.module.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/styles/ExtendedList.module.css b/app/styles/ExtendedList.module.css
index e37bc6b..551e5e5 100644
--- a/app/styles/ExtendedList.module.css
+++ b/app/styles/ExtendedList.module.css
@@ -29,6 +29,9 @@
     background-color: white;
     border: none;
 }
+.button img {
+    cursor: pointer;
+}
 .playButton{
     width: 20px;
     height: 20px;

From 9b371f9dc5cc627796fedc1be4e8a02a90d35fc3 Mon Sep 17 00:00:00 2001
From: ritzz26 <ritagarwalrit@gmail.com>
Date: Thu, 18 Apr 2024 23:06:20 -0700
Subject: [PATCH 14/38] added pointseek and scroll. TODO styling

---
 app/(interactive)/matches/[slug]/page.js | 2 +-
 app/components/ExtendedList.js           | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/(interactive)/matches/[slug]/page.js b/app/(interactive)/matches/[slug]/page.js
index 1905534..952b127 100644
--- a/app/(interactive)/matches/[slug]/page.js
+++ b/app/(interactive)/matches/[slug]/page.js
@@ -204,7 +204,7 @@ const MatchPage = () => {
             </div>
           </div>
           <div className={styles.ExtendedList}>
-            <ExtendedList pointsData={returnFilteredPoints()} clientTeam={matchData.clientTeam} opponentTeam={matchData.opponentTeam} />
+            <ExtendedList pointsData={returnFilteredPoints()} clientTeam={matchData.clientTeam} opponentTeam={matchData.opponentTeam} onPointSelect={handleJumpToTime}/>
           </div>
           <br></br>
           {matchData.pdfUrl && <iframe className={styles.pdfView} src={matchData.pdfUrl} width="90%" height="1550" />}
diff --git a/app/components/ExtendedList.js b/app/components/ExtendedList.js
index 82ab1b3..c219ffd 100644
--- a/app/components/ExtendedList.js
+++ b/app/components/ExtendedList.js
@@ -3,7 +3,7 @@ import styles from '../styles/ExtendedList.module.css';
 import playButtonImage from './play_button.png';
 import getTeams from '@/app/services/getTeams.js';
 
-const ExtendedList = ({ pointsData, clientTeam, opponentTeam }) => {
+const ExtendedList = ({ pointsData, clientTeam, opponentTeam, onPointSelect }) => {
     const [client_logo, setClientLogo] = useState('');
     const [opponent_logo, setOpponentLogo] = useState('');
   
@@ -26,7 +26,8 @@ const ExtendedList = ({ pointsData, clientTeam, opponentTeam }) => {
     let keys_headers = ["Server", "", "Set Score", "Game Score", "Point", "Point Winner", "Last Shot Type", "Duration"];
     
 
-    const Scroll=()=>{
+    const Scroll=(point)=>{
+      onPointSelect(point.Position);
       window.scrollTo({
         top: 100,
         behavior: "smooth"
@@ -56,7 +57,7 @@ const ExtendedList = ({ pointsData, clientTeam, opponentTeam }) => {
                                 </td>
                             ))}
                             <td>
-                                <button className={styles.button} onClick={Scroll}>
+                                <button className={styles.button} onClick={() => Scroll(item)}>
                                 <img src="https://icons.veryicon.com/png/o/miscellaneous/food-time/play-video-1.png" alt="Play Icon" style={{ maxWidth: '30px', height: 'auto', minWidth: '30px' }} />
                                 </button>
                             </td>

From 0b68877ea7b99046bb011f746d7d028222f52ee7 Mon Sep 17 00:00:00 2001
From: ritzz26 <ritagarwalrit@gmail.com>
Date: Fri, 19 Apr 2024 17:03:55 -0700
Subject: [PATCH 15/38] added point type and spacing

---
 app/components/ExtendedList.js     | 60 +++++++++++++++++++++++++++++-
 app/styles/ExtendedList.module.css | 11 ++++--
 2 files changed, 65 insertions(+), 6 deletions(-)

diff --git a/app/components/ExtendedList.js b/app/components/ExtendedList.js
index c219ffd..c9a600c 100644
--- a/app/components/ExtendedList.js
+++ b/app/components/ExtendedList.js
@@ -2,6 +2,9 @@ import React, { useEffect, useState } from "react";
 import styles from '../styles/ExtendedList.module.css';
 import playButtonImage from './play_button.png';
 import getTeams from '@/app/services/getTeams.js';
+import { ReactComponent as RedSvg } from './Red.svg';
+import { ReactComponent as YellowSvg } from './Yellow.svg';
+import { ReactComponent as GreenSvg } from './Green.svg';
 
 const ExtendedList = ({ pointsData, clientTeam, opponentTeam, onPointSelect }) => {
     const [client_logo, setClientLogo] = useState('');
@@ -52,13 +55,66 @@ const ExtendedList = ({ pointsData, clientTeam, opponentTeam, onPointSelect }) =
                                     {cellIndex === 0 ? (
                                         <img src={item['player1Name'] === item['serverName'] ? client_logo : opponent_logo} className={styles.IMG}/>
                                     ) : (
-                                        item[key]
+                                        <div style={{ display: 'flex', alignItems: 'center' }}>
+                                            {cellIndex === keys.length - 2 ? (
+                                                <>
+                                                    {item['lastShotResult'] === 'Winner' && (
+                                                        <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                        <circle cx="9" cy="9.96338" r="9" fill="url(#paint0_radial_95_406)"/>
+                                                        <circle cx="9" cy="9.96338" r="3" fill="#76E696"/>
+                                                        <defs>
+                                                        <radialGradient id="paint0_radial_95_406" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9 9.96338) rotate(90) scale(9)">
+                                                        <stop stop-color="white"/>
+                                                        <stop offset="1" stop-color="#DCF6E4"/>
+                                                        </radialGradient>
+                                                        </defs>
+                                                        </svg>
+                                                        
+                                                    )}
+                                                    {item['lastShotResult'] === 'Error' && (
+                                                        <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                        <circle cx="9" cy="9.96338" r="9" fill="url(#paint0_radial_95_660)"/>
+                                                        <circle cx="9" cy="9.96338" r="3" fill="#F7AB1C"/>
+                                                        <defs>
+                                                        <radialGradient id="paint0_radial_95_660" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9 9.96338) rotate(90) scale(9)">
+                                                        <stop stop-color="white"/>
+                                                        <stop offset="1" stop-color="#FFEBCD"/>
+                                                        </radialGradient>
+                                                        </defs>
+                                                        </svg>
+                                                        
+                                                    )}
+                                                    {item['lastShotResult'] === 'Double Fault' && (
+                                                        <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                        <circle cx="9" cy="9.96338" r="9" fill="url(#paint0_radial_95_656)"/>
+                                                        <circle cx="9" cy="9.96338" r="3" fill="#FF866B"/>
+                                                        <defs>
+                                                        <radialGradient id="paint0_radial_95_656" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9 9.96338) rotate(90) scale(9)">
+                                                        <stop stop-color="white"/>
+                                                        <stop offset="1" stop-color="#FFEDEA"/>
+                                                        </radialGradient>
+                                                        </defs>
+                                                        </svg>
+                                                    )}
+                                                    <span style={{ marginLeft: '4px' }}>{item['lastShotResult']}</span>
+                                                </>
+                                            ) : (
+                                                item[key]
+                                            )}
+                                        </div>
                                     )}
                                 </td>
                             ))}
+
                             <td>
                                 <button className={styles.button} onClick={() => Scroll(item)}>
-                                <img src="https://icons.veryicon.com/png/o/miscellaneous/food-time/play-video-1.png" alt="Play Icon" style={{ maxWidth: '30px', height: 'auto', minWidth: '30px' }} />
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 30" x="0px" y="0px" style={{ width: '50px', height: '30px' }}>
+                                        <title>play circle</title>
+                                        <g data-name="play circle">
+                                            <path d="M12,24A12,12,0,1,1,24,12,12,12,0,0,1,12,24ZM12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Z" stroke="grey" fill="grey" />
+                                            <path d="M9,17 L16,12 L9,7 Z" fill="grey"/>
+                                        </g>
+                                    </svg>
                                 </button>
                             </td>
                         </tr>
diff --git a/app/styles/ExtendedList.module.css b/app/styles/ExtendedList.module.css
index 551e5e5..f97444d 100644
--- a/app/styles/ExtendedList.module.css
+++ b/app/styles/ExtendedList.module.css
@@ -11,17 +11,20 @@
 }
 
 .IMG{
-    max-width: 50px; /* Adjust the width as needed */
+    max-width: 35px; /* Adjust the width as needed */
     height: auto; /* Ensures the aspect ratio is maintained */
     display: block; /* Removes extra space around the image */
     width: 100%;
 }
+/* a little smaller on the images */
 
 .TD{
-    font-size: 20px;
-    font-weight: 700;
+    font-size: 18px;
+    font-weight: 600;
     text-align: left;
-    padding: 8px;
+    padding: 10px;
+    padding-top: 20px;
+    padding-bottom: 20px;
     border-bottom: solid 0.2px #EDEDED;
 }
 

From 29f776c5d3ea069fa9349c993972f103b9f4f52b Mon Sep 17 00:00:00 2001
From: ritzz26 <ritagarwalrit@gmail.com>
Date: Fri, 19 Apr 2024 17:24:39 -0700
Subject: [PATCH 16/38] dynamic response

---
 app/components/ExtendedList.js     |  6 +----
 app/styles/ExtendedList.module.css | 38 +++++++++++++++++-------------
 2 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/app/components/ExtendedList.js b/app/components/ExtendedList.js
index c9a600c..3ea63e8 100644
--- a/app/components/ExtendedList.js
+++ b/app/components/ExtendedList.js
@@ -2,9 +2,6 @@ import React, { useEffect, useState } from "react";
 import styles from '../styles/ExtendedList.module.css';
 import playButtonImage from './play_button.png';
 import getTeams from '@/app/services/getTeams.js';
-import { ReactComponent as RedSvg } from './Red.svg';
-import { ReactComponent as YellowSvg } from './Yellow.svg';
-import { ReactComponent as GreenSvg } from './Green.svg';
 
 const ExtendedList = ({ pointsData, clientTeam, opponentTeam, onPointSelect }) => {
     const [client_logo, setClientLogo] = useState('');
@@ -106,10 +103,9 @@ const ExtendedList = ({ pointsData, clientTeam, opponentTeam, onPointSelect }) =
                                 </td>
                             ))}
 
-                            <td>
+                            <td className={styles.TD2}>
                                 <button className={styles.button} onClick={() => Scroll(item)}>
                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 30" x="0px" y="0px" style={{ width: '50px', height: '30px' }}>
-                                        <title>play circle</title>
                                         <g data-name="play circle">
                                             <path d="M12,24A12,12,0,1,1,24,12,12,12,0,0,1,12,24ZM12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Z" stroke="grey" fill="grey" />
                                             <path d="M9,17 L16,12 L9,7 Z" fill="grey"/>
diff --git a/app/styles/ExtendedList.module.css b/app/styles/ExtendedList.module.css
index f97444d..b4d026d 100644
--- a/app/styles/ExtendedList.module.css
+++ b/app/styles/ExtendedList.module.css
@@ -3,40 +3,46 @@
 }
 
 .TH{
-    font-size: 16px;
+    font-size: 1vw;
     font-weight: 500;
     text-align: left;
     color: grey;
-    padding-left: 5px;
+    padding-left: 0.25vw;
 }
 
 .IMG{
-    max-width: 35px; /* Adjust the width as needed */
-    height: auto; /* Ensures the aspect ratio is maintained */
-    display: block; /* Removes extra space around the image */
+    max-width: 2.7vw;
+    height: auto; 
+    display: block; 
     width: 100%;
 }
-/* a little smaller on the images */
+
 
 .TD{
-    font-size: 18px;
+    font-size: 1.4vw;
+    font-weight: 600;
+    text-align: left;
+    padding: 0.8vw;
+    padding-top: 3.6vh;
+    padding-bottom: 3.6vh;
+    border-bottom: solid 0.02vw #EDEDED;
+}
+
+.TD2{
+    font-size: 1.4vw;
     font-weight: 600;
     text-align: left;
-    padding: 10px;
-    padding-top: 20px;
-    padding-bottom: 20px;
-    border-bottom: solid 0.2px #EDEDED;
+    padding-top: 3.6vh;
+    padding-bottom: 3.6vh;
+    border-bottom: solid 0.02vw #EDEDED;
 }
 
 .button{
     background-color: white;
     border: none;
 }
-.button img {
+.button svg {
     cursor: pointer;
-}
-.playButton{
-    width: 20px;
-    height: 20px;
+    padding-right: 2.3vw;
 }
 

From 8a1c43e6684817c96df6bde370b6a2949ec1f96c Mon Sep 17 00:00:00 2001
From: ritzz26 <ritagarwalrit@gmail.com>
Date: Fri, 19 Apr 2024 17:32:53 -0700
Subject: [PATCH 17/38] changed play button svg and used viewport mapping

---
 app/components/ExtendedList.js     | 16 ++++++++++------
 app/styles/ExtendedList.module.css |  1 -
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/app/components/ExtendedList.js b/app/components/ExtendedList.js
index 3ea63e8..22ddae0 100644
--- a/app/components/ExtendedList.js
+++ b/app/components/ExtendedList.js
@@ -105,12 +105,16 @@ const ExtendedList = ({ pointsData, clientTeam, opponentTeam, onPointSelect }) =
 
                             <td className={styles.TD2}>
                                 <button className={styles.button} onClick={() => Scroll(item)}>
-                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 30" x="0px" y="0px" style={{ width: '50px', height: '30px' }}>
-                                        <g data-name="play circle">
-                                            <path d="M12,24A12,12,0,1,1,24,12,12,12,0,0,1,12,24ZM12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Z" stroke="grey" fill="grey" />
-                                            <path d="M9,17 L16,12 L9,7 Z" fill="grey"/>
-                                        </g>
-                                    </svg>
+                                <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <g opacity="0.4">
+                                    <mask id="mask0_95_468" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="25">
+                                    <rect x="0.191406" y="0.93457" width="24" height="24" fill="#D9D9D9"/>
+                                    </mask>
+                                    <g mask="url(#mask0_95_468)">
+                                    <path d="M9.69043 17.4346L16.6904 12.9346L9.69043 8.43457V17.4346ZM12.1904 22.9346C10.8071 22.9346 9.50709 22.6721 8.29043 22.1471C7.07376 21.6221 6.01543 20.9096 5.11543 20.0096C4.21543 19.1096 3.50293 18.0512 2.97793 16.8346C2.45293 15.6179 2.19043 14.3179 2.19043 12.9346C2.19043 11.5512 2.45293 10.2512 2.97793 9.03457C3.50293 7.8179 4.21543 6.75957 5.11543 5.85957C6.01543 4.95957 7.07376 4.24707 8.29043 3.72207C9.50709 3.19707 10.8071 2.93457 12.1904 2.93457C13.5738 2.93457 14.8738 3.19707 16.0904 3.72207C17.3071 4.24707 18.3654 4.95957 19.2654 5.85957C20.1654 6.75957 20.8779 7.8179 21.4029 9.03457C21.9279 10.2512 22.1904 11.5512 22.1904 12.9346C22.1904 14.3179 21.9279 15.6179 21.4029 16.8346C20.8779 18.0512 20.1654 19.1096 19.2654 20.0096C18.3654 20.9096 17.3071 21.6221 16.0904 22.1471C14.8738 22.6721 13.5738 22.9346 12.1904 22.9346ZM12.1904 20.9346C14.4238 20.9346 16.3154 20.1596 17.8654 18.6096C19.4154 17.0596 20.1904 15.1679 20.1904 12.9346C20.1904 10.7012 19.4154 8.80957 17.8654 7.25957C16.3154 5.70957 14.4238 4.93457 12.1904 4.93457C9.9571 4.93457 8.06543 5.70957 6.51543 7.25957C4.96543 8.80957 4.19043 10.7012 4.19043 12.9346C4.19043 15.1679 4.96543 17.0596 6.51543 18.6096C8.06543 20.1596 9.9571 20.9346 12.1904 20.9346Z" fill="#1C1B1F"/>
+                                    </g>
+                                    </g>
+                                    </svg>
                                 </button>
                             </td>
                         </tr>
diff --git a/app/styles/ExtendedList.module.css b/app/styles/ExtendedList.module.css
index b4d026d..84ebeef 100644
--- a/app/styles/ExtendedList.module.css
+++ b/app/styles/ExtendedList.module.css
@@ -43,6 +43,5 @@
 }
 .button svg {
     cursor: pointer;
-    padding-right: 2.3vw;
 }
 

From c6e8875077064017e1d36dc0dd0d353ffbc813b0 Mon Sep 17 00:00:00 2001
From: Alex West <awest2025@ucla.edu>
Date: Fri, 19 Apr 2024 18:09:28 -0700
Subject: [PATCH 18/38] resized court with viewBox

---
 app/components/TennisCourtSVG.js | 84 ++++++++++++++++----------------
 app/styles/TagMatch.module.css   |  6 +++
 2 files changed, 48 insertions(+), 42 deletions(-)

diff --git a/app/components/TennisCourtSVG.js b/app/components/TennisCourtSVG.js
index b4ff61e..413de8a 100644
--- a/app/components/TennisCourtSVG.js
+++ b/app/components/TennisCourtSVG.js
@@ -2,49 +2,49 @@ import React from 'react';
 
 const TennisCourtSVG = ({ handleImageClick }) => {
   return (
-    <svg onClick={handleImageClick} width="480" height="900" style={{ border: '4px solid red' }}>
+    <svg onClick={handleImageClick} width="600" height="1080" viewBox="0 0 600 1080" style={{ border: '4px solid red', width: 'auto', height: '30rem' }}>
       {/* Background */}
-      <rect x="0" y="450" width="480" height="450" fill="lightgray" />
-      <rect x="0" y="0" width="480" height="450" fill="lightgray" />
-
-      {/* Top half of the court */}
-      <rect x="60" y="60" width="45" height="390" fill="lightblue" />
-      <rect x="105" y="60" width="270" height="180" fill="lightblue" />
-      <rect x="375" y="60" width="45" height="390" fill="lightblue" />
-      <rect x="105" y="240" width="135" height="210" fill="lightblue" />
-      <rect x="240" y="240" width="135" height="210" fill="lightblue" />
-
-      {/* Bottom half of the court, mirrored from the top half */}
-      <rect x="60" y="450" width="45" height="390" fill="lightblue" />
-      <rect x="105" y="660" width="270" height="180" fill="lightblue" />
-      <rect x="375" y="450" width="45" height="390" fill="lightblue" />
-      <rect x="105" y="450" width="135" height="210" fill="lightblue" />
-      <rect x="240" y="450" width="135" height="210" fill="lightblue" />
-
-      {/* T lines and center lines */}
-      <line x1="105" y1="240" x2="375" y2="240" stroke="white" stroke-width="2" />
-      <line x1="105" y1="660" x2="375" y2="660" stroke="white" stroke-width="2" />
-      <line x1="240" y1="240" x2="240" y2="450" stroke="white" stroke-width="2" />
-      <line x1="240" y1="450" x2="240" y2="660" stroke="white" stroke-width="2" />
-
-      {/* Alley lines */}
-      <line x1="105" y1="60" x2="105" y2="450" stroke="white" stroke-width="2" />
-      <line x1="375" y1="60" x2="375" y2="450" stroke="white" stroke-width="2" />
-      <line x1="105" y1="450" x2="105" y2="840" stroke="white" stroke-width="2" />
-      <line x1="375" y1="450" x2="375" y2="840" stroke="white" stroke-width="2" />
-
-      {/* Outside alley lines */}
-      <line x1="60" y1="60" x2="60" y2="450" stroke="white" stroke-width="2" />
-      <line x1="420" y1="60" x2="420" y2="450" stroke="white" stroke-width="2" />
-      <line x1="60" y1="840" x2="60" y2="450" stroke="white" stroke-width="2" />
-      <line x1="420" y1="840" x2="420" y2="450" stroke="white" stroke-width="2" />
-
-      {/* Top and Bottom lines */}
-      <line x1="60" y1="60" x2="420" y2="60" stroke="white" stroke-width="2" />
-      <line x1="60" y1="840" x2="420" y2="840" stroke="white" stroke-width="2" />
-
-      {/* Net Line */}
-      <line className="gray-hoverable" x1="30" y1="450" x2="450" y2="450" stroke="black" stroke-width="4" />
+      <rect x="0" y="540" width="600" height="540" fill="lightgray" />
+      <rect x="0" y="0" width="600" height="540" fill="lightgray" />
+
+        {/* Top half of the court */}
+        <rect x="120" y="150" width="45" height="390" fill="lightblue" />
+        <rect x="165" y="150" width="270" height="180" fill="lightblue" />
+        <rect x="435" y="150" width="45" height="390" fill="lightblue" />
+        <rect x="165" y="330" width="135" height="210" fill="lightblue" />
+        <rect x="300" y="330" width="135" height="210" fill="lightblue" />
+
+        {/* Bottom half of the court, mirrored from the top half */}
+        <rect x="120" y="540" width="45" height="390" fill="lightblue" />
+        <rect x="165" y="750" width="270" height="180" fill="lightblue" />
+        <rect x="435" y="540" width="45" height="390" fill="lightblue" />
+        <rect x="165" y="540" width="135" height="210" fill="lightblue" />
+        <rect x="300" y="540" width="135" height="210" fill="lightblue" />
+
+        {/* T lines and center lines */}
+        <line x1="165" y1="330" x2="435" y2="330" stroke="white" stroke-width="2" />
+        <line x1="165" y1="750" x2="435" y2="750" stroke="white" stroke-width="2" />
+        <line x1="300" y1="330" x2="300" y2="540" stroke="white" stroke-width="2" />
+        <line x1="300" y1="540" x2="300" y2="750" stroke="white" stroke-width="2" />
+
+        {/* Alley lines */}
+        <line x1="165" y1="150" x2="165" y2="540" stroke="white" stroke-width="2" />
+        <line x1="435" y1="150" x2="435" y2="540" stroke="white" stroke-width="2" />
+        <line x1="165" y1="540" x2="165" y2="930" stroke="white" stroke-width="2" />
+        <line x1="435" y1="540" x2="435" y2="930" stroke="white" stroke-width="2" />
+
+        {/* Outside alley lines */}
+        <line x1="120" y1="150" x2="120" y2="540" stroke="white" stroke-width="2" />
+        <line x1="480" y1="150" x2="480" y2="540" stroke="white" stroke-width="2" />
+        <line x1="120" y1="930" x2="120" y2="540" stroke="white" stroke-width="2" />
+        <line x1="480" y1="930" x2="480" y2="540" stroke="white" stroke-width="2" />
+
+        {/* Top and Bottom lines */}
+        <line x1="120" y1="150" x2="480" y2="150" stroke="white" stroke-width="2" />
+        <line x1="120" y1="930" x2="480" y2="930" stroke="white" stroke-width="2" />
+
+        {/* Net Line */}
+        <line className="gray-hoverable" x1="90" y1="540" x2="510" y2="540" stroke="black" stroke-width="4" />
 
       <style>
         {`
diff --git a/app/styles/TagMatch.module.css b/app/styles/TagMatch.module.css
index 738e563..0216f4a 100644
--- a/app/styles/TagMatch.module.css
+++ b/app/styles/TagMatch.module.css
@@ -31,3 +31,9 @@
     transform: translateX(-50%);
     
 }
+
+.courtImage {
+    width: 50%;
+    height: 50%;
+    /* object-fit: cover; */
+}
\ No newline at end of file

From d7c61785aa87e20119c255d1833e80fefa2e641a Mon Sep 17 00:00:00 2001
From: Leo Cardozo <leonardocardozo14@gmail.com>
Date: Thu, 25 Apr 2024 12:16:30 -0700
Subject: [PATCH 19/38] fixing bugs/updateActiveIndex

---
 app/services/taggerButtonData.js | 300 ++++++++++++++++---------------
 1 file changed, 157 insertions(+), 143 deletions(-)

diff --git a/app/services/taggerButtonData.js b/app/services/taggerButtonData.js
index 065a593..d8442cf 100644
--- a/app/services/taggerButtonData.js
+++ b/app/services/taggerButtonData.js
@@ -817,8 +817,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             label: '40-40 (Ad Side)',
             action: () => {
                 updateActiveRow('pointScore', '40-40');
-                updateActiveRow('gameScore', data.table[data.table.length - 1]['gameScore']);
-                updateActiveRow('setScore', data.table[data.table.length - 1]['setScore']);
+                updateActiveRow('gameScore', data.table[data.activeRowIndex - 1]['gameScore']);
+                updateActiveRow('setScore', data.table[data.activeRowIndex - 1]['setScore']);
                 updateActiveRow('isPointStart', 1);
                 updateActiveRow('shotInRally', 1);
                 updateActiveRow('side', 'Ad');
@@ -830,8 +830,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             label: '40-40 (Deuce Side)',
             action: () => {
                 updateActiveRow('pointScore', '40-40');
-                updateActiveRow('gameScore', data.table[data.table.length - 1]['gameScore']);
-                updateActiveRow('setScore', data.table[data.table.length - 1]['setScore']);
+                updateActiveRow('gameScore', data.table[data.activeRowIndex - 1]['gameScore']);
+                updateActiveRow('setScore', data.table[data.activeRowIndex - 1]['setScore']);
                 updateActiveRow('isPointStart', 1);
                 updateActiveRow('shotInRally', 1);
                 updateActiveRow('side', 'Deuce');
@@ -855,11 +855,10 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             label: 'Select First Serve Position',
             action: (data) => {
                 updateActiveRow('firstServeXCoord', data.x);
-                updateActiveRow('firstServeYCoord', data.y);
-                
+                updateActiveRow('firstServeYCoord', data.y);  
                 // Depending on coordinates, fill location of serve, etc...
-                if (data.table[data.table.length - 1]['serverFarNear'] == 'Near') {
-                    if ((data.table[data.table.length - 1])['side'] == 'Deuce') // split by side
+                if (data.table[data.activeRowIndex]['serverFarNear'] == 'Near') {
+                    if ((data.table[data.activeRowIndex])['side'] == 'Deuce') // split by side
                     {
                             // Assuming coordinate range of x: 75 -215, y: 220-470
                         if (data.x >= 75 & data.x < 121)
@@ -868,8 +867,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                             if (data.y >= 220 & data.y <= 470)
                             {
                                 updateActiveRow('firstServeIn', '1');
-                                if (data.table[data.table.length - 1]['isAce'] == '1') {
-                                    ace(data.table[data.table.length - 1]['serverName']);
+                                if (data.table[data.activeRowIndex]['isAce'] == '1') {
+                                    ace(data.table[data.activeRowIndex]['serverName']);
                                     if (serverScore == 0 && returnerScore == 0) {
                                         setCurrentPage('ServerName');
                                     }
@@ -879,8 +878,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                                         setCurrentPage('PointScore');
                                     }
                                     else {
-                                        updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                                        updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                                         updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                                         updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                                         updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -907,8 +906,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                             if (data.y >= 220 & data.y <= 470)
                             {
                                 updateActiveRow('firstServeIn', '1');
-                                if (data.table[data.table.length - 1]['isAce'] == '1') {
-                                    ace(data.table[data.table.length - 1]['serverName']);
+                                if (data.table[data.activeRowIndex]['isAce'] == '1') {
+                                    ace(data.table[data.activeRowIndex]['serverName']);
                                     if (serverScore == 0 && returnerScore == 0) {
                                         setCurrentPage('ServerName');
                                     }
@@ -918,8 +917,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                                         setCurrentPage('PointScore');
                                     }
                                     else {
-                                        updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                                        updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                                         updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                                         updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                                         updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -946,8 +945,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                             if (data.y >= 220 & data.y <= 470)
                             {
                                 updateActiveRow('firstServeIn', '1');
-                                if (data.table[data.table.length - 1]['isAce'] == '1') {
-                                    ace(data.table[data.table.length - 1]['serverName']);
+                                if (data.table[data.activeRowIndex]['isAce'] == '1') {
+                                    ace(data.table[data.activeRowIndex]['serverName']);
                                     if (serverScore == 0 && returnerScore == 0) {
                                         setCurrentPage('ServerName');
                                     }
@@ -957,8 +956,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                                         setCurrentPage('PointScore');
                                     }
                                     else {
-                                        updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                                        updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                                         updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                                         updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                                         updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1001,8 +1000,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         if (data.y >= 220 & data.y <= 470)
                         {
                             updateActiveRow('firstServeIn', '1');
-                            if (data.table[data.table.length - 1]['isAce'] == '1') {
-                                ace(data.table[data.table.length - 1]['serverName']);
+                            if (data.table[data.activeRowIndex]['isAce'] == '1') {
+                                ace(data.table[data.activeRowIndex]['serverName']);
                                 if (serverScore == 0 && returnerScore == 0) {
                                     setCurrentPage('ServerName');
                                 }
@@ -1012,8 +1011,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                                     setCurrentPage('PointScore');
                                 }
                                 else {
-                                    updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                                    updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                                    updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                                    updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                                     updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                                     updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                                     updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1040,8 +1039,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         if (data.y >= 220 & data.y <= 470)
                         {
                             updateActiveRow('firstServeIn', '1');
-                            if (data.table[data.table.length - 1]['isAce'] == '1') {
-                                ace(data.table[data.table.length - 1]['serverName']);
+                            if (data.table[data.activeRowIndex]['isAce'] == '1') {
+                                ace(data.table[data.activeRowIndex]['serverName']);
                                 if (serverScore == 0 && returnerScore == 0) {
                                     setCurrentPage('ServerName');
                                 }
@@ -1051,8 +1050,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                                     setCurrentPage('PointScore');
                                 }
                                 else {
-                                    updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                                    updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                                    updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                                    updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                                     updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                                     updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                                     updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1079,8 +1078,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         if (data.y >= 220 & data.y <= 470)
                         {
                             updateActiveRow('firstServeIn', '1');
-                            if (data.table[data.table.length - 1]['isAce'] == '1') {
-                                ace(data.table[data.table.length - 1]['serverName']);
+                            if (data.table[data.activeRowIndex]['isAce'] == '1') {
+                                ace(data.table[data.activeRowIndex]['serverName']);
                                 if (serverScore == 0 && returnerScore == 0) {
                                     setCurrentPage('ServerName');
                                 }
@@ -1090,8 +1089,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                                     setCurrentPage('PointScore');
                                 }
                                 else {
-                                    updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                                    updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                                    updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                                    updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                                     updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                                     updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                                     updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1130,7 +1129,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             // FAR SIDE
             else
             {
-                if ((data.table[data.table.length - 1])['side'] == 'Ad') // split by side
+                if ((data.table[data.activeRowIndex])['side'] == 'Ad') // split by side
                 {
                     // Assuming coordinate range of x: 75 -215, y: 470-723
                 if (data.x >= 75 & data.x < 121)
@@ -1139,8 +1138,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                     if (data.y >= 470 & data.y <= 723)
                     {
                         updateActiveRow('firstServeIn', '1');
-                        if (data.table[data.table.length - 1]['isAce'] == '1') {
-                            ace(data.table[data.table.length - 1]['serverName']);
+                        if (data.table[data.activeRowIndex]['isAce'] == '1') {
+                            ace(data.table[data.activeRowIndex]['serverName']);
                             if (serverScore == 0 && returnerScore == 0) {
                                 setCurrentPage('ServerName');
                             }
@@ -1150,8 +1149,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                                 setCurrentPage('PointScore');
                             }
                             else {
-                                updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                                updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                                updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                                updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                                 updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                                 updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                                 updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1178,8 +1177,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                     if (data.y >= 470 & data.y <= 723)
                     {
                         updateActiveRow('firstServeIn', '1');
-                        if (data.table[data.table.length - 1]['isAce'] == '1') {
-                            ace(data.table[data.table.length - 1]['serverName']);
+                        if (data.table[data.activeRowIndex]['isAce'] == '1') {
+                            ace(data.table[data.activeRowIndex]['serverName']);
                             if (serverScore == 0 && returnerScore == 0) {
                                 setCurrentPage('ServerName');
                             }
@@ -1189,8 +1188,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                                 setCurrentPage('PointScore');
                             }
                             else {
-                                updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                                updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                                updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                                updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                                 updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                                 updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                                 updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1217,8 +1216,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                     if (data.y >= 470 & data.y <= 723)
                     {
                         updateActiveRow('firstServeIn', '1');
-                        if (data.table[data.table.length - 1]['isAce'] == '1') {
-                            ace(data.table[data.table.length - 1]['serverName']);
+                        if (data.table[data.activeRowIndex]['isAce'] == '1') {
+                            ace(data.table[data.activeRowIndex]['serverName']);
                             if (serverScore == 0 && returnerScore == 0) {
                                 setCurrentPage('ServerName');
                             }
@@ -1228,8 +1227,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                                 setCurrentPage('PointScore');
                             }
                             else {
-                                updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                                updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                                updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                                updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                                 updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                                 updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                                 updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1272,8 +1271,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                     if (data.y >= 470 & data.y <= 723)
                     {
                         updateActiveRow('firstServeIn', '1');
-                        if (data.table[data.table.length - 1]['isAce'] == '1') {
-                            ace(data.table[data.table.length - 1]['serverName']);
+                        if (data.table[data.activeRowIndex]['isAce'] == '1') {
+                            ace(data.table[data.activeRowIndex]['serverName']);
                             if (serverScore == 0 && returnerScore == 0) {
                                 setCurrentPage('ServerName');
                             }
@@ -1283,8 +1282,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                                 setCurrentPage('PointScore');
                             }
                             else {
-                                updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                                updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                                updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                                updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                                 updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                                 updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                                 updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1311,8 +1310,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                     if (data.y >= 470 & data.y <= 723)
                     {
                         updateActiveRow('firstServeIn', '1');
-                        if (data.table[data.table.length - 1]['isAce'] == '1') {
-                            ace(data.table[data.table.length - 1]['serverName']);
+                        if (data.table[data.activeRowIndex]['isAce'] == '1') {
+                            ace(data.table[data.activeRowIndex]['serverName']);
                             if (serverScore == 0 && returnerScore == 0) {
                                 setCurrentPage('ServerName');
                             }
@@ -1322,8 +1321,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                                 setCurrentPage('PointScore');
                             }
                             else {
-                                updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                                updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                                updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                                updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                                 updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                                 updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                                 updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1350,8 +1349,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                     if (data.y >= 470 & data.y <= 723)
                     {
                         updateActiveRow('firstServeIn', '1');
-                        if (data.table[data.table.length - 1]['isAce'] == '1') {
-                            ace(data.table[data.table.length - 1]['serverName']);
+                        if (data.table[data.activeRowIndex]['isAce'] == '1') {
+                            ace(data.table[data.activeRowIndex]['serverName']);
                             if (serverScore == 0 && returnerScore == 0) {
                                 setCurrentPage('ServerName');
                             }
@@ -1361,8 +1360,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                                 setCurrentPage('PointScore');
                             }
                             else {
-                                updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                                updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                                updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                                updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                                 updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                                 updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                                 updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1408,9 +1407,11 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
         action: (data) => {
             updateActiveRow('secondServeXCoord', data.x);
             updateActiveRow('secondServeYCoord', data.y);
+            console.log(data.x);
+            console.log(data.y);
             // Depending on coordinates, fill location of serve, etc...
-            if (data.table[data.table.length - 1]['serverFarNear'] == 'Near') {
-            if ((data.table[data.table.length - 1])['side'] == 'Deuce') // split by side
+            if (data.table[data.activeRowIndex]['serverFarNear'] == 'Near') {
+            if ((data.table[data.activeRowIndex])['side'] == 'Deuce') // split by side
             {
                 // Assuming coordinate range of x: 75 -215, y: 220-470
             if (data.x >= 75 & data.x < 121)
@@ -1424,7 +1425,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 else
                 {
                     updateActiveRow('secondServeIn', '0');
-                    doubleFault(data.table[data.table.length - 1]['serverName']);
+                    doubleFault(data.table[data.activeRowIndex]['serverName']);
                     if (serverScore == 0 && returnerScore == 0) {
                         setCurrentPage('ServerName');
                     }
@@ -1434,8 +1435,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('PointScore');
                     }
                     else {
-                        updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                        updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                         updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                         updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                         updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1458,7 +1459,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 else
                 {
                     updateActiveRow('secondServeIn', '0');
-                    doubleFault(data.table[data.table.length - 1]['serverName']);
+                    doubleFault(data.table[data.activeRowIndex]['serverName']);
                     if (serverScore == 0 && returnerScore == 0) {
                         setCurrentPage('ServerName');
                     }
@@ -1468,8 +1469,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('PointScore');
                     }
                     else {
-                        updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                        updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                         updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                         updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                         updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1492,7 +1493,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 else
                 {
                     updateActiveRow('secondServeIn', '0');
-                    doubleFault(data.table[data.table.length - 1]['serverName']);
+                    doubleFault(data.table[data.activeRowIndex]['serverName']);
                     if (serverScore == 0 && returnerScore == 0) {
                         setCurrentPage('ServerName');
                     }
@@ -1502,8 +1503,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('PointScore');
                     }
                     else {
-                        updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                        updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                         updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                         updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                         updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1526,7 +1527,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 {
                     updateActiveRow('secondServeZone', 'Wide')
                 }
-                doubleFault(data.table[data.table.length - 1]['serverName']);
+                doubleFault(data.table[data.activeRowIndex]['serverName']);
                 if (serverScore == 0 && returnerScore == 0) {
                     setCurrentPage('ServerName');
                 }
@@ -1536,8 +1537,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                     setCurrentPage('PointScore');
                 }
                 else {
-                    updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                    updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                    updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                    updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                     updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                     updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                     updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1562,7 +1563,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 else
                 {
                     updateActiveRow('secondServeIn', '0');
-                    doubleFault(data.table[data.table.length - 1]['serverName']);
+                    doubleFault(data.table[data.activeRowIndex]['serverName']);
                     if (serverScore == 0 && returnerScore == 0) {
                         setCurrentPage('ServerName');
                     }
@@ -1572,8 +1573,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('PointScore');
                     }
                     else {
-                        updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                        updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                         updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                         updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                         updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1596,7 +1597,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 else
                 {
                     updateActiveRow('secondServeIn', '0');
-                    doubleFault(data.table[data.table.length - 1]['serverName']);
+                    doubleFault(data.table[data.activeRowIndex]['serverName']);
                     if (serverScore == 0 && returnerScore == 0) {
                         setCurrentPage('ServerName');
                     }
@@ -1606,8 +1607,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('PointScore');
                     }
                     else {
-                        updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                        updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                         updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                         updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                         updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1630,7 +1631,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 else
                 {
                     updateActiveRow('secondServeIn', '0');
-                    doubleFault(data.table[data.table.length - 1]['serverName']);
+                    doubleFault(data.table[data.activeRowIndex]['serverName']);
                     if (serverScore == 0 && returnerScore == 0) {
                         setCurrentPage('ServerName');
                     }
@@ -1640,8 +1641,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('PointScore');
                     }
                     else {
-                        updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                        updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                         updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                         updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                         updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1664,7 +1665,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 {
                     updateActiveRow('secondServeZone', 'Wide')
                 }
-                doubleFault(data.table[data.table.length - 1]['serverName']);
+                doubleFault(data.table[data.activeRowIndex]['serverName']);
                 if (serverScore == 0 && returnerScore == 0) {
                     setCurrentPage('ServerName');
                 }
@@ -1674,8 +1675,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                     setCurrentPage('PointScore');
                 }
                 else {
-                    updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                    updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                    updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                    updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                     updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                     updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                     updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1691,7 +1692,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
         // FAR SIDE
         else
         {
-            if ((data.table[data.table.length - 1])['side'] == 'Ad') // split by side
+            if ((data.table[data.activeRowIndex])['side'] == 'Ad') // split by side
             {
                 // Assuming coordinate range of x: 75 -215, y: 470-723
             if (data.x >= 75 & data.x < 121)
@@ -1705,7 +1706,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 else
                 {
                     updateActiveRow('secondServeIn', '0');
-                    doubleFault(data.table[data.table.length - 1]['serverName']);
+                    doubleFault(data.table[data.activeRowIndex]['serverName']);
                     if (serverScore == 0 && returnerScore == 0) {
                         setCurrentPage('ServerName');
                     }
@@ -1715,8 +1716,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('PointScore');
                     }
                     else {
-                        updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                        updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                         updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                         updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                         updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1740,7 +1741,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 {
                     updateActiveRow('secondServeIn', '0');
                     addNewRow();
-                    doubleFault(data.table[data.table.length - 1]['serverName']);
+                    doubleFault(data.table[data.activeRowIndex]['serverName']);
                     if (serverScore == 0 && returnerScore == 0) {
                         setCurrentPage('ServerName');
                     }
@@ -1750,8 +1751,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('PointScore');
                     }
                     else {
-                        updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                        updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                         updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                         updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                         updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1774,7 +1775,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 else
                 {
                     updateActiveRow('secondServeIn', '0');
-                    doubleFault(data.table[data.table.length - 1]['serverName']);
+                    doubleFault(data.table[data.activeRowIndex]['serverName']);
                     if (serverScore == 0 && returnerScore == 0) {
                         setCurrentPage('ServerName');
                     }
@@ -1784,8 +1785,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('PointScore');
                     }
                     else {
-                        updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                        updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                         updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                         updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                         updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1808,7 +1809,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 {
                     updateActiveRow('secondServeZone', 'Wide')
                 }
-                doubleFault(data.table[data.table.length - 1]['serverName']);
+                doubleFault(data.table[data.activeRowIndex]['serverName']);
                 if (serverScore == 0 && returnerScore == 0) {
                     setCurrentPage('ServerName');
                 }
@@ -1818,8 +1819,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                     setCurrentPage('PointScore');
                 }
                 else {
-                    updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                    updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                    updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                    updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                     updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                     updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                     updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1844,7 +1845,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 else
                 {
                     updateActiveRow('secondServeIn', '0');
-                    doubleFault(data.table[data.table.length - 1]['serverName']);
+                    doubleFault(data.table[data.activeRowIndex]['serverName']);
                     if (serverScore == 0 && returnerScore == 0) {
                         setCurrentPage('ServerName');
                     }
@@ -1854,8 +1855,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('PointScore');
                     }
                     else {
-                        updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                        updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                         updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                         updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                         updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1878,7 +1879,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 else
                 {
                     updateActiveRow('secondServeIn', '0');
-                    doubleFault(data.table[data.table.length - 1]['serverName']);
+                    doubleFault(data.table[data.activeRowIndex]['serverName']);
                     if (serverScore == 0 && returnerScore == 0) {
                         setCurrentPage('ServerName');
                     }
@@ -1888,8 +1889,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('PointScore');
                     }
                     else {
-                        updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                        updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                         updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                         updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                         updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1912,7 +1913,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 else
                 {
                     updateActiveRow('secondServeIn', '0');
-                    doubleFault(data.table[data.table.length - 1]['serverName']);
+                    doubleFault(data.table[data.activeRowIndex]['serverName']);
                     if (serverScore == 0 && returnerScore == 0) {
                         setCurrentPage('ServerName');
                     }
@@ -1922,8 +1923,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('PointScore');
                     }
                     else {
-                        updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                        updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                         updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                         updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                         updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1946,7 +1947,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 {
                     updateActiveRow('secondServeZone', 'Wide')
                 }
-                doubleFault(data.table[data.table.length - 1]['serverName']);
+                doubleFault(data.table[data.activeRowIndex]['serverName']);
             if (serverScore == 0 && returnerScore == 0) {
                 setCurrentPage('ServerName');
             }
@@ -1956,8 +1957,8 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 setCurrentPage('PointScore');
             }
             else {
-                updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                updateActiveRow('serverFarNear', data.table[data.activeRowIndex]['serverFarNear']);
+                updateActiveRow('serverName', data.table[data.activeRowIndex]['serverName']);
                 updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                 updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                 updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1982,14 +1983,26 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 addNewRow();
                 updateActiveRow('shotContactX', data.x);
                 updateActiveRow('shotContactY', data.y);
-                updateActiveRow('shotInRally', parseInt(data.table[data.table.length - 1]['shotInRally']) + 1);
+                if (data.activeRowIndex > 0) {
+                updateActiveRow('shotInRally', parseInt(data.table[data.activeRowIndex]['shotInRally']) + 1);
                 // Need to copy down: pointScore, gameScore, setScore, serverName, serverSide
-                updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
-                updateActiveRow('pointScore', data.table[data.table.length - 1]['pointScore']);
-                updateActiveRow('gameScore', data.table[data.table.length - 1]['gameScore']);
-                updateActiveRow('setScore', data.table[data.table.length - 1]['setScore']);
-                updateActiveRow('tiebreakScore', data.table[data.table.length - 1]['tiebreakScore']);
-                updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
+                updateActiveRow('serverName', data.table[data.activeRowIndex]['serverName']);
+                updateActiveRow('pointScore', data.table[data.activeRowIndex]['pointScore']);
+                updateActiveRow('gameScore', data.table[data.activeRowIndex]['gameScore']);
+                updateActiveRow('setScore', data.table[data.activeRowIndex]['setScore']);
+                updateActiveRow('tiebreakScore', data.table[data.activeRowIndex]['tiebreakScore']);
+                updateActiveRow('serverFarNear', data.table[data.activeRowIndex]['serverFarNear']);
+                }
+                else {
+                    updateActiveRow('shotInRally', parseInt(data.table[0]['shotInRally']) + 1);
+                    // Need to copy down: pointScore, gameScore, setScore, serverName, serverSide
+                    updateActiveRow('serverName', data.table[0]['serverName']);
+                    updateActiveRow('pointScore', data.table[0]['pointScore']);
+                    updateActiveRow('gameScore', data.table[0]['gameScore']);
+                    updateActiveRow('setScore', data.table[0]['setScore']);
+                    updateActiveRow('tiebreakScore', data.table[0]['tiebreakScore']);
+                    updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);  
+                }
                 if (data.y < 471) 
                 { // assuming 470 is halfway point
                     if (data.x < 215) 
@@ -2127,32 +2140,33 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             action: (data) => {
                 updateActiveRow('shotLocationX', data.x);
                 updateActiveRow('shotLocationY', data.y);
+                console.log(data.table[data.activeRowIndex]["shotDirection"]);
                 // assuming 215 is halfway point
-                if (data.x > 215 & data.table[data.table.length - 1]["shotContactX"] > 215) {
+                if (data.x > 215 & data.table[data.activeRowIndex]["shotContactX"] > 215) {
                     updateActiveRow('shotDirection', "Down the Line");
                 }
-                else if (data.x <= 215 & data.table[data.table.length - 1]["shotContactX"] > 215) {
+                else if (data.x <= 215 & data.table[data.activeRowIndex]["shotContactX"] > 215) {
                     updateActiveRow('shotDirection', "Crosscourt");
                 }
-                else if (data.x > 215 & data.table[data.table.length - 1]["shotContactX"] <= 215) {
+                else if (data.x > 215 & data.table[data.activeRowIndex]["shotContactX"] <= 215) {
                     updateActiveRow('shotDirection', "Crosscourt");
                 }
                 else {
                     updateActiveRow('shotDirection', "Down the Line");
                 }
-                if (data.table[data.table.length - 1]["isPointEnd"] == '1') {
-                    serverScore =  parseInt(data.table[data.table.length - 1]['pointScore'].split("-")[0]);
-                    returnerScore =  parseInt(data.table[data.table.length - 1]['pointScore'].split("-")[1]);
-                    player1GameScore =  parseInt(data.table[data.table.length - 1]['gameScore'].split("-")[0]);
-                    player2GameScore = parseInt(data.table[data.table.length - 1]['gameScore'].split("-")[1]); 
-                    player1SetScore =  parseInt(data.table[data.table.length - 1]['setScore'].split("-")[0]);
-                    player2SetScore = parseInt(data.table[data.table.length - 1]['setScore'].split("-")[1]);
+                if (data.table[data.activeRowIndex]["isPointEnd"] == '1') {
+                    serverScore =  parseInt(data.table[data.activeRowIndex]['pointScore'].split("-")[0]);
+                    returnerScore =  parseInt(data.table[data.activeRowIndex]['pointScore'].split("-")[1]);
+                    player1GameScore =  parseInt(data.table[data.activeRowIndex]['gameScore'].split("-")[0]);
+                    player2GameScore = parseInt(data.table[data.activeRowIndex]['gameScore'].split("-")[1]); 
+                    player1SetScore =  parseInt(data.table[data.activeRowIndex]['setScore'].split("-")[0]);
+                    player2SetScore = parseInt(data.table[data.activeRowIndex]['setScore'].split("-")[1]);
                     if (player1GameScore == 6 && player2GameScore == 6) {
-                        player1TiebreakScore = parseInt(data.table[data.table.length - 1]['tiebreakScore'].split("-")[0]);
-                        player2TiebreakScore = parseInt(data.table[data.table.length - 1]['tiebreakScore'].split("-")[1]);
-                        updateTiebreakScore(parseInt(data.table[data.table.length - 1]["shotInRally"]), 
-                        data.table[data.table.length - 1]["isWinner"], 
-                        data.table[data.table.length - 1]["serverName"]);
+                        player1TiebreakScore = parseInt(data.table[data.activeRowIndex]['tiebreakScore'].split("-")[0]);
+                        player2TiebreakScore = parseInt(data.table[data.activeRowIndex]['tiebreakScore'].split("-")[1]);
+                        updateTiebreakScore(parseInt(data.table[data.activeRowIndex]["shotInRally"]), 
+                        data.table[data.activeRowIndex]["isWinner"], 
+                        data.table[data.activeRowIndex]["serverName"]);
                         if (player1TiebreakScore >= 7 && (player1TiebreakScore - player2TiebreakScore) >= 2 ) {
                             player1SetScore += 1;
                             player1GameScore = 0;
@@ -2170,11 +2184,11 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                             setCurrentPage('ServerName');
                         }
                         else {
-                            updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                            updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                            updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                            updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
                             updateActiveRow('tiebreakScore', player1TiebreakScore + '-' + player2TiebreakScore);
-                            updateActiveRow('gameScore', data.table[data.table.length - 1]['gameScore']);
-                            updateActiveRow('setScore', data.table[data.table.length - 1]['setScore']);
+                            updateActiveRow('gameScore', data.table[data.activeRowIndex - 1]['gameScore']);
+                            updateActiveRow('setScore', data.table[data.activeRowIndex - 1]['setScore']);
                             updateActiveRow('isPointStart', 1);
                             updateActiveRow('shotInRally', 1);
                             updateActiveRow('side', chooseSide());
@@ -2182,9 +2196,9 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         }
                     }   
                     else {
-                        updateScore(parseInt(data.table[data.table.length - 1]["shotInRally"]), 
-                        data.table[data.table.length - 1]["isWinner"], 
-                        data.table[data.table.length - 1]["serverName"]);
+                        updateScore(parseInt(data.table[data.activeRowIndex]["shotInRally"]), 
+                        data.table[data.activeRowIndex]["isWinner"], 
+                        data.table[data.activeRowIndex]["serverName"]);
                     if (serverScore == 0 && returnerScore == 0) {
                         if (player1GameScore >= 6) {
                          if (player1GameScore - player2GameScore >= 2) {
@@ -2205,16 +2219,16 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                     else {
                         addNewRow();
                     if (serverScore == 40 && returnerScore == 40) {
-                        updateActiveRow('serverName', data.table[data.table.length - 1]['serverName'])
-                        updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear'])
+                        updateActiveRow('serverName', data.table[data.activeRowIndex]['serverName'])
+                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex]['serverFarNear'])
                         setCurrentPage('PointScore');
                     }
                     else {
-                        updateActiveRow('serverFarNear', data.table[data.table.length - 1]['serverFarNear']);
-                        updateActiveRow('serverName', data.table[data.table.length - 1]['serverName']);
+                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex]['serverFarNear']);
+                        updateActiveRow('serverName', data.table[data.activeRowIndex]['serverName']);
                         updateActiveRow('pointScore', serverScore + '-' + returnerScore);
-                        updateActiveRow('gameScore', data.table[data.table.length - 1]['gameScore']);
-                        updateActiveRow('setScore', data.table[data.table.length - 1]['setScore']);
+                        updateActiveRow('gameScore', data.table[data.activeRowIndex]['gameScore']);
+                        updateActiveRow('setScore', data.table[data.activeRowIndex]['setScore']);
                         updateActiveRow('isPointStart', 1);
                         updateActiveRow('shotInRally', 1);
                         updateActiveRow('side', chooseSide());

From 9a9f6d0246e0b38844c1eeb118f6377561cad99b Mon Sep 17 00:00:00 2001
From: Alex West <awest2025@ucla.edu>
Date: Thu, 25 Apr 2024 15:58:31 -0700
Subject: [PATCH 20/38] Changed the name of "duration" to "shot count"

---
 app/components/ExtendedList.js |   3 +--
 app/components/play_button.png | Bin 11647 -> 0 bytes
 2 files changed, 1 insertion(+), 2 deletions(-)
 delete mode 100644 app/components/play_button.png

diff --git a/app/components/ExtendedList.js b/app/components/ExtendedList.js
index 22ddae0..3ed8207 100644
--- a/app/components/ExtendedList.js
+++ b/app/components/ExtendedList.js
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
 import styles from '../styles/ExtendedList.module.css';
-import playButtonImage from './play_button.png';
 import getTeams from '@/app/services/getTeams.js';
 
 const ExtendedList = ({ pointsData, clientTeam, opponentTeam, onPointSelect }) => {
@@ -23,7 +22,7 @@ const ExtendedList = ({ pointsData, clientTeam, opponentTeam, onPointSelect }) =
       fetchLogos();
     });
     let keys = ["", "serverName", "setScore", "gameScore", "pointScore", "pointWonBy", "lastShotResult", "rallyCount"];
-    let keys_headers = ["Server", "", "Set Score", "Game Score", "Point", "Point Winner", "Last Shot Type", "Duration"];
+    let keys_headers = ["Server", "", "Set Score", "Game Score", "Point", "Point Winner", "Last Shot Type", "Shot Count"];
     
 
     const Scroll=(point)=>{
diff --git a/app/components/play_button.png b/app/components/play_button.png
deleted file mode 100644
index 1e6b25d79049faf6e2e9d0db238e4aa1ee302f50..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 11647
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
E4;_-GW&i*H


From 1f2e7c5ddfe7e97134b1119cb91af65884814d1a Mon Sep 17 00:00:00 2001
From: ritzz26 <ritagarwalrit@gmail.com>
Date: Fri, 26 Apr 2024 16:49:57 -0700
Subject: [PATCH 21/38] svg modularization and borders

---
 app/components/ExtendedList.js     | 37 +++++-------------------------
 app/styles/ExtendedList.module.css |  4 ++--
 public/DoubleFault.js              | 16 +++++++++++++
 public/Error.js                    | 16 +++++++++++++
 public/Winner.js                   | 16 +++++++++++++
 5 files changed, 56 insertions(+), 33 deletions(-)
 create mode 100644 public/DoubleFault.js
 create mode 100644 public/Error.js
 create mode 100644 public/Winner.js

diff --git a/app/components/ExtendedList.js b/app/components/ExtendedList.js
index 22ddae0..1ed0939 100644
--- a/app/components/ExtendedList.js
+++ b/app/components/ExtendedList.js
@@ -2,6 +2,9 @@ import React, { useEffect, useState } from "react";
 import styles from '../styles/ExtendedList.module.css';
 import playButtonImage from './play_button.png';
 import getTeams from '@/app/services/getTeams.js';
+import Winner from '../../public/Winner.js';
+import Error from '../../public/Error.js';
+import DoubleFault from "@/public/DoubleFault";
 
 const ExtendedList = ({ pointsData, clientTeam, opponentTeam, onPointSelect }) => {
     const [client_logo, setClientLogo] = useState('');
@@ -56,42 +59,14 @@ const ExtendedList = ({ pointsData, clientTeam, opponentTeam, onPointSelect }) =
                                             {cellIndex === keys.length - 2 ? (
                                                 <>
                                                     {item['lastShotResult'] === 'Winner' && (
-                                                        <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                                        <circle cx="9" cy="9.96338" r="9" fill="url(#paint0_radial_95_406)"/>
-                                                        <circle cx="9" cy="9.96338" r="3" fill="#76E696"/>
-                                                        <defs>
-                                                        <radialGradient id="paint0_radial_95_406" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9 9.96338) rotate(90) scale(9)">
-                                                        <stop stop-color="white"/>
-                                                        <stop offset="1" stop-color="#DCF6E4"/>
-                                                        </radialGradient>
-                                                        </defs>
-                                                        </svg>
-                                                        
+                                                        <Winner/>
                                                     )}
                                                     {item['lastShotResult'] === 'Error' && (
-                                                        <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                                        <circle cx="9" cy="9.96338" r="9" fill="url(#paint0_radial_95_660)"/>
-                                                        <circle cx="9" cy="9.96338" r="3" fill="#F7AB1C"/>
-                                                        <defs>
-                                                        <radialGradient id="paint0_radial_95_660" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9 9.96338) rotate(90) scale(9)">
-                                                        <stop stop-color="white"/>
-                                                        <stop offset="1" stop-color="#FFEBCD"/>
-                                                        </radialGradient>
-                                                        </defs>
-                                                        </svg>
+                                                        <Error/>
                                                         
                                                     )}
                                                     {item['lastShotResult'] === 'Double Fault' && (
-                                                        <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                                        <circle cx="9" cy="9.96338" r="9" fill="url(#paint0_radial_95_656)"/>
-                                                        <circle cx="9" cy="9.96338" r="3" fill="#FF866B"/>
-                                                        <defs>
-                                                        <radialGradient id="paint0_radial_95_656" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9 9.96338) rotate(90) scale(9)">
-                                                        <stop stop-color="white"/>
-                                                        <stop offset="1" stop-color="#FFEDEA"/>
-                                                        </radialGradient>
-                                                        </defs>
-                                                        </svg>
+                                                        <DoubleFault/>
                                                     )}
                                                     <span style={{ marginLeft: '4px' }}>{item['lastShotResult']}</span>
                                                 </>
diff --git a/app/styles/ExtendedList.module.css b/app/styles/ExtendedList.module.css
index 84ebeef..75b1973 100644
--- a/app/styles/ExtendedList.module.css
+++ b/app/styles/ExtendedList.module.css
@@ -25,7 +25,7 @@
     padding: 0.8vw;
     padding-top: 3.6vh;
     padding-bottom: 3.6vh;
-    border-bottom: solid 0.02vw #EDEDED;
+    border-bottom: solid 0.2vw #EDEDED;
 }
 
 .TD2{
@@ -34,7 +34,7 @@
     text-align: left;
     padding-top: 3.6vh;
     padding-bottom: 3.6vh;
-    border-bottom: solid 0.02vw #EDEDED;
+    border-bottom: solid 0.2vw #EDEDED;
 }
 
 .button{
diff --git a/public/DoubleFault.js b/public/DoubleFault.js
new file mode 100644
index 0000000..40c84a4
--- /dev/null
+++ b/public/DoubleFault.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+const DoubleFaultSVG = () => (
+  <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="9" cy="9.96338" r="9" fill="url(#paint0_radial_95_656)" />
+    <circle cx="9" cy="9.96338" r="3" fill="#FF866B" />
+    <defs>
+      <radialGradient id="paint0_radial_95_656" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9 9.96338) rotate(90) scale(9)">
+        <stop stopColor="white" />
+        <stop offset="1" stopColor="#FFEDEA" />
+      </radialGradient>
+    </defs>
+  </svg>
+);
+
+export default DoubleFaultSVG;
diff --git a/public/Error.js b/public/Error.js
new file mode 100644
index 0000000..8ee8314
--- /dev/null
+++ b/public/Error.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+const ErrorSVG = () => (
+  <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="9" cy="9.96338" r="9" fill="url(#paint0_radial_95_660)" />
+    <circle cx="9" cy="9.96338" r="3" fill="#F7AB1C" />
+    <defs>
+      <radialGradient id="paint0_radial_95_660" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9 9.96338) rotate(90) scale(9)">
+        <stop stopColor="white" />
+        <stop offset="1" stopColor="#FFEBCD" />
+      </radialGradient>
+    </defs>
+  </svg>
+);
+
+export default ErrorSVG;
diff --git a/public/Winner.js b/public/Winner.js
new file mode 100644
index 0000000..52e477f
--- /dev/null
+++ b/public/Winner.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+const WinnerSVG = () => (
+  <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="9" cy="9.96338" r="9" fill="url(#paint0_radial_95_406)" />
+    <circle cx="9" cy="9.96338" r="3" fill="#76E696" />
+    <defs>
+      <radialGradient id="paint0_radial_95_406" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9 9.96338) rotate(90) scale(9)">
+        <stop stopColor="white" />
+        <stop offset="1" stopColor="#DCF6E4" />
+      </radialGradient>
+    </defs>
+  </svg>
+);
+
+export default WinnerSVG;

From ad639a222b311e6b4d300d07858550a3902941e5 Mon Sep 17 00:00:00 2001
From: ritzz26 <ritagarwalrit@gmail.com>
Date: Fri, 26 Apr 2024 17:34:46 -0700
Subject: [PATCH 22/38] added view detailed list

---
 app/(interactive)/matches/[slug]/page.js | 10 ++++++++++
 app/components/PointsList.js             |  7 ++++---
 app/styles/Match.module.css              | 19 +++++++++++++++++++
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/app/(interactive)/matches/[slug]/page.js b/app/(interactive)/matches/[slug]/page.js
index 8f8d441..2c89cbd 100644
--- a/app/(interactive)/matches/[slug]/page.js
+++ b/app/(interactive)/matches/[slug]/page.js
@@ -116,6 +116,13 @@ const MatchPage = () => {
     setFilterList(updatedFilterList);
   };
 
+  const scrolltolist=()=>{
+    window.scrollTo({
+      top: 900,
+      behavior: "smooth"
+  });
+  }
+
   const sortedFilterList = filterList.sort((a, b) => a[0].localeCompare(b[0]));
 
   return (
@@ -198,6 +205,9 @@ const MatchPage = () => {
                   <div className="pointsList">
                     <PointsList pointsData={returnFilteredPoints()} onPointSelect={handleJumpToTime} clientTeam={matchData.clientTeam} opponentTeam={matchData.opponentTeam}/>
                   </div>
+                  <div style={{ padding: '0.5vw', paddingLeft: '5vw' }}>
+                  <button className={styles.buttonn} onClick={() => scrolltolist()}>View Detailed List</button>
+                </div>
                   {/* Score display */}
                   <div className="scoreboard">
                     <ScoreBoard names={matchData.name} playData={playingPoint} {...matchSetScores}/>
diff --git a/app/components/PointsList.js b/app/components/PointsList.js
index 8c3422a..2469c1e 100644
--- a/app/components/PointsList.js
+++ b/app/components/PointsList.js
@@ -34,7 +34,7 @@ const PointsList = ({ pointsData, onPointSelect, clientTeam, opponentTeam }) =>
     return { set: '', gameScore: '', pointScore: '', serverName: '' };
   };
 
-  const displayedPoints = expanded ? pointsData : pointsData.slice(0, 5);
+  const displayedPoints = pointsData;
 
   return (
     <div>
@@ -81,7 +81,8 @@ const PointsList = ({ pointsData, onPointSelect, clientTeam, opponentTeam }) =>
               </tr>
             );
           })}
-          {!expanded && pointsData.length > 4 && (
+          
+          {/* {!expanded && pointsData.length > 4 && (
             <tr>
               <td colSpan="5" >
                 <div style={{ padding: '0.5vw' }}>
@@ -98,7 +99,7 @@ const PointsList = ({ pointsData, onPointSelect, clientTeam, opponentTeam }) =>
                 </div>
               </td>
             </tr>
-          )}
+          )} */}
         </tbody>
       </table>
     </div>
diff --git a/app/styles/Match.module.css b/app/styles/Match.module.css
index 64eb376..1f228ca 100644
--- a/app/styles/Match.module.css
+++ b/app/styles/Match.module.css
@@ -140,4 +140,23 @@
     transition:
       color 0.15s ease,
       border-color 0.15s ease;
+  }
+
+  .buttonn {
+    align : center;
+    padding: 0.625vw 2.5vw; /* Adjust padding using viewport units */
+    cursor: pointer;
+    background-color: #fafafa;
+    border: none; /* Remove the default border */
+    border-left: 0.313vw solid #b0b0b0; /* Adjust border width using viewport units */
+    border-bottom: 0.313vw solid #b0b0b0; /* Adjust border width using viewport units */
+    font-weight: 400;
+    font-size: 1.3vw; /* Adjust font size using viewport units */
+    line-height: 1.0vw;
+    border-radius: 0.25vw; /* Adjust border radius using viewport units */
+  }
+  
+  .buttonn:hover {
+    background-color: #e9ecef;
+    border-color: #b8c2cc;
   }
\ No newline at end of file

From c7f32a8554b834352963fe0355a1591b549391ac Mon Sep 17 00:00:00 2001
From: Alex West <awest2025@ucla.edu>
Date: Mon, 29 Apr 2024 16:44:59 -0700
Subject: [PATCH 23/38] fixed stale state bug with updateActiveRow

---
 app/(interactive)/tag-match/[slug]/page.js | 40 +++++++++++-----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/app/(interactive)/tag-match/[slug]/page.js b/app/(interactive)/tag-match/[slug]/page.js
index 0c36114..23a8fe8 100644
--- a/app/(interactive)/tag-match/[slug]/page.js
+++ b/app/(interactive)/tag-match/[slug]/page.js
@@ -147,27 +147,27 @@ export default function TagMatch() {
   }
 
   const addNewRowAndSync = () => {
-    pullAndPushRows();
+    setTableState(oldTableState => {
+      pullAndPushRows(oldTableState.rows, null);
 
-    let newTimestamp = getVideoTimestamp();
+      let newTimestamp = getVideoTimestamp();
 
-    // Create a new row object with the required structure
-    const newRow = columnNames.reduce((acc, columnName) => {
-      // Check if a row already exists with the new timestamp
-      let existingRow = tableState.rows.find(row => row.pointStartTime === newTimestamp);
+      // Create a new row object with the required structure
+      const newRow = columnNames.reduce((acc, columnName) => {
+        // Check if a row already exists with the new timestamp
+        let existingRow = tableState.rows.find(row => row.pointStartTime === newTimestamp);
 
-      while (existingRow !== undefined) {
-        // If a row already exists, increment the timestamp by 1
-        newTimestamp += 1;
-        existingRow = tableState.rows.find(row => row.pointStartTime === newTimestamp);
-      }
+        while (existingRow !== undefined) {
+          // If a row already exists, increment the timestamp by 1
+          newTimestamp += 1;
+          existingRow = tableState.rows.find(row => row.pointStartTime === newTimestamp);
+        }
 
-      acc[columnName] = columnName === 'pointStartTime' ? newTimestamp : '';
-      return acc;
-    }, {});
+        acc[columnName] = columnName === 'pointStartTime' ? newTimestamp : '';
+        return acc;
+      }, {});
 
-    // Add new row and sort
-    setTableState(oldTableState => {
+      // Add new row and sort
       const updatedTable = [...oldTableState.rows, newRow];
       // Sort the table by 'pointStartTime'
       updatedTable.sort((a, b) => a.pointStartTime - b.pointStartTime);
@@ -188,7 +188,7 @@ export default function TagMatch() {
       const newActiveRowIndex = rowIndex === oldTableState.activeRowIndex ? oldTableState.activeRowIndex - 1 : oldTableState.activeRowIndex;
       return { rows: updatedTable, activeRowIndex: newActiveRowIndex };
     });
-    pullAndPushRows(rowToDeleteTimestamp);
+    pullAndPushRows(tableState.rows, rowToDeleteTimestamp);
   }
 
 
@@ -249,9 +249,9 @@ export default function TagMatch() {
   }, [displayPopUp]);
 
 
-  const pullAndPushRows = async (rowToDeleteTimestamp = null) => {
+  const pullAndPushRows = async (rowState, rowToDeleteTimestamp = null) => {
     try {
-      const tableSnapshot = [...tableState.rows]; // Snapshot of the table before fetching updates
+      const tableSnapshot = [...rowState]; // Snapshot of the table before fetching updates
       // Fetch the current document state from the database
       const matchDocument = await getMatchInfo(matchId);
       const incomingRows = matchDocument.points ?? [];
@@ -308,7 +308,7 @@ export default function TagMatch() {
 
   // Toggle the publushed state of the match
   const togglePublish = async () => {
-    pullAndPushRows();
+    pullAndPushRows(tableState.rows, null);
     try {
       await updateMatchDocument(matchId, {
         published: !isPublished

From 94f7f8fceba3ac7b373b3ced62046d589e7e4a79 Mon Sep 17 00:00:00 2001
From: Alex West <awest2025@ucla.edu>
Date: Mon, 29 Apr 2024 17:43:06 -0700
Subject: [PATCH 24/38] made coordinates inches starting at center

---
 app/(interactive)/tag-match/[slug]/page.js | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/(interactive)/tag-match/[slug]/page.js b/app/(interactive)/tag-match/[slug]/page.js
index e061200..8d7631d 100644
--- a/app/(interactive)/tag-match/[slug]/page.js
+++ b/app/(interactive)/tag-match/[slug]/page.js
@@ -354,7 +354,13 @@ export default function TagMatch() {
 
   const handleImageClick = (event) => {
     const courtWidthInInches = 432; // The court is 36 feet wide, or 432 inches
-    const courtHeightInInches = 936; // The court is 78 feet long, or 936 inches
+    // const courtHeightInInches = 936; // The court is 78 feet long, or 936 inches
+    
+    // The current SVG has the actual in width of the court as 360 out of 600 total
+    // The height is 780 out of 1080 total
+    // This makes the ratio 0.6 for width and 0.7222 for height
+    const xRatio = 0.6;
+    // const yRatio = 0.7222;
 
     // Get the bounding rectangle of the SVG container
     const rect = event.currentTarget.getBoundingClientRect();
@@ -362,13 +368,19 @@ export default function TagMatch() {
     const widthOfCourt = rect.width; // Using rect.width is more reliable
     const heightOfCourt = rect.height;
 
+    const inchesPerPixel = courtWidthInInches / (widthOfCourt * xRatio); // This is slightly wrong bc it rounds at some point?
+
     // Calculate the click position relative to the SVG container
     const x = event.clientX - rect.left;
     const y = event.clientY - rect.top;
 
+    // Find how far from the center the click was
+    const xFromCenter = x - widthOfCourt / 2;
+    const yFromCenter = y - heightOfCourt / 2;
+
     // Calculate the click position in inches
-    const xInches = Math.round((x / widthOfCourt) * courtWidthInInches);
-    const yInches = Math.round((y / heightOfCourt) * courtHeightInInches);
+    const xInches = Math.round(xFromCenter * inchesPerPixel);
+    const yInches = Math.round(yFromCenter * inchesPerPixel) * -1;
 
     console.log("xInches: " + xInches + " yInches: " + yInches);
     return { x: xInches, y: yInches };

From 61653abf16305651f61781dcb1480f8609f1adc6 Mon Sep 17 00:00:00 2001
From: Alex West <awest2025@ucla.edu>
Date: Tue, 30 Apr 2024 01:09:11 -0700
Subject: [PATCH 25/38] added serve court with 6 sections

---
 app/(interactive)/tag-match/[slug]/page.js |  4 ++--
 app/components/TennisCourtSVG.js           | 22 +++++++++++++++++++++-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/app/(interactive)/tag-match/[slug]/page.js b/app/(interactive)/tag-match/[slug]/page.js
index 8d7631d..3e07c61 100644
--- a/app/(interactive)/tag-match/[slug]/page.js
+++ b/app/(interactive)/tag-match/[slug]/page.js
@@ -404,10 +404,10 @@ export default function TagMatch() {
         <div>
           <p>{currentPage}</p>
           {buttonData[currentPage].map((button, index) => {
-            return button.courtImage === true ? (
+            return button.courtImage ? (
               <div>
                 <p>{button.label}</p>
-                <TennisCourtSVG className={styles.courtImage} handleImageClick={(event) => {
+                <TennisCourtSVG className={styles.courtImage} courtType={button.courtImage} handleImageClick={(event) => {
                     setPopUp([])
                     saveToHistory();
                     let data = handleImageClick(event); // returns data.x and data.y coordinates
diff --git a/app/components/TennisCourtSVG.js b/app/components/TennisCourtSVG.js
index 413de8a..59e2c6f 100644
--- a/app/components/TennisCourtSVG.js
+++ b/app/components/TennisCourtSVG.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const TennisCourtSVG = ({ handleImageClick }) => {
+const TennisCourtSVG = ({ handleImageClick, courtType }) => {
   return (
     <svg onClick={handleImageClick} width="600" height="1080" viewBox="0 0 600 1080" style={{ border: '4px solid red', width: 'auto', height: '30rem' }}>
       {/* Background */}
@@ -21,6 +21,26 @@ const TennisCourtSVG = ({ handleImageClick }) => {
         <rect x="165" y="540" width="135" height="210" fill="lightblue" />
         <rect x="300" y="540" width="135" height="210" fill="lightblue" />
 
+        {/* Optional service sections top half */}
+        {/* Optional service sections bottom half */}
+        {(courtType === 'serve') && (
+          <>
+            <rect x="165" y="330" width="45" height="210" fill="lightblue" />
+            <rect x="210" y="330" width="45" height="210" fill="lightblue" />
+            <rect x="255" y="330" width="45" height="210" fill="lightblue" />
+            <rect x="300" y="330" width="45" height="210" fill="lightblue" />
+            <rect x="345" y="330" width="45" height="210" fill="lightblue" />
+            <rect x="390" y="330" width="45" height="210" fill="lightblue" />
+
+            <rect x="165" y="540" width="45" height="210" fill="lightblue" />
+            <rect x="210" y="540" width="45" height="210" fill="lightblue" />
+            <rect x="255" y="540" width="45" height="210" fill="lightblue" />
+            <rect x="300" y="540" width="45" height="210" fill="lightblue" />
+            <rect x="345" y="540" width="45" height="210" fill="lightblue" />
+            <rect x="390" y="540" width="45" height="210" fill="lightblue" />
+          </>
+        )}
+
         {/* T lines and center lines */}
         <line x1="165" y1="330" x2="435" y2="330" stroke="white" stroke-width="2" />
         <line x1="165" y1="750" x2="435" y2="750" stroke="white" stroke-width="2" />

From 321cc117092b2237ce8a5310ca104e1adc3774a8 Mon Sep 17 00:00:00 2001
From: Alex West <awest2025@ucla.edu>
Date: Tue, 30 Apr 2024 01:38:14 -0700
Subject: [PATCH 26/38] added metadata passing to button data

---
 app/(interactive)/tag-match/[slug]/page.js | 15 +++++++++--
 app/components/TennisCourtSVG.js           | 30 +++++++++++-----------
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/app/(interactive)/tag-match/[slug]/page.js b/app/(interactive)/tag-match/[slug]/page.js
index fc354c4..e7189e0 100644
--- a/app/(interactive)/tag-match/[slug]/page.js
+++ b/app/(interactive)/tag-match/[slug]/page.js
@@ -21,6 +21,8 @@ export default function TagMatch() {
   const [currentPage, setCurrentPage] = useState('ServerName'); // TODO: the default should continue from what was filled in last
   const [taggerHistory, setTaggerHistory] = useState([]); // Array to hold the history of states
   const [isPublished, setIsPublished] = useState(false); // TODO: impliment this functionality (only show published matches)
+  const [matchMetadata, setMatchMetadata] = useState({});
+
   const [popUp, setPopUp] = useState([]);
   const [isVisible, setIsVisible] = useState(false);
   const [displayPopUp, setDisplayPopUp] = useState(false);
@@ -49,6 +51,10 @@ export default function TagMatch() {
           return { ...oldTableState, rows: [] };
         });
       }
+
+      // Set the metadata to matchDocument but without the 'points'
+      const { points, ...metadata } = matchDocument;
+      setMatchMetadata(metadata);
     });
   }, [matchId]);
 
@@ -353,6 +359,7 @@ export default function TagMatch() {
   const buttonData = getTaggerButtonData(updateActiveRow, addNewRowAndSync, setCurrentPage);
 
   const handleImageClick = (event) => {
+    console.log("event: ", event);
     const courtWidthInInches = 432; // The court is 36 feet wide, or 432 inches
     // const courtHeightInInches = 936; // The court is 78 feet long, or 936 inches
     
@@ -410,7 +417,11 @@ export default function TagMatch() {
                 <TennisCourtSVG className={styles.courtImage} courtType={button.courtImage} handleImageClick={(event) => {
                     setPopUp([])
                     saveToHistory();
-                    let data = handleImageClick(event); // returns data.x and data.y coordinates
+                    let data = matchMetadata;
+                    // add data.x and data.y to the data object
+                    const { x, y } = handleImageClick(event);
+                    data.x = x;
+                    data.y = y;
                     data.table = tableState.rows;
                     data.activeRowIndex = tableState.activeRowIndex;
                     data.videoTimestamp = getVideoTimestamp();
@@ -422,7 +433,7 @@ export default function TagMatch() {
               <button className={styles.customButton} key={index} onClick={() => {
                 setPopUp([])
                 saveToHistory();
-                let data = {};
+                let data = matchMetadata;
                 data.table = tableState.rows;
                 data.activeRowIndex = tableState.activeRowIndex;
                 data.videoTimestamp = getVideoTimestamp();
diff --git a/app/components/TennisCourtSVG.js b/app/components/TennisCourtSVG.js
index 59e2c6f..48322e5 100644
--- a/app/components/TennisCourtSVG.js
+++ b/app/components/TennisCourtSVG.js
@@ -42,29 +42,29 @@ const TennisCourtSVG = ({ handleImageClick, courtType }) => {
         )}
 
         {/* T lines and center lines */}
-        <line x1="165" y1="330" x2="435" y2="330" stroke="white" stroke-width="2" />
-        <line x1="165" y1="750" x2="435" y2="750" stroke="white" stroke-width="2" />
-        <line x1="300" y1="330" x2="300" y2="540" stroke="white" stroke-width="2" />
-        <line x1="300" y1="540" x2="300" y2="750" stroke="white" stroke-width="2" />
+        <line x1="165" y1="330" x2="435" y2="330" stroke="white" strokeWidth="2" />
+        <line x1="165" y1="750" x2="435" y2="750" stroke="white" strokeWidth="2" />
+        <line x1="300" y1="330" x2="300" y2="540" stroke="white" strokeWidth="2" />
+        <line x1="300" y1="540" x2="300" y2="750" stroke="white" strokeWidth="2" />
 
         {/* Alley lines */}
-        <line x1="165" y1="150" x2="165" y2="540" stroke="white" stroke-width="2" />
-        <line x1="435" y1="150" x2="435" y2="540" stroke="white" stroke-width="2" />
-        <line x1="165" y1="540" x2="165" y2="930" stroke="white" stroke-width="2" />
-        <line x1="435" y1="540" x2="435" y2="930" stroke="white" stroke-width="2" />
+        <line x1="165" y1="150" x2="165" y2="540" stroke="white" strokeWidth="2" />
+        <line x1="435" y1="150" x2="435" y2="540" stroke="white" strokeWidth="2" />
+        <line x1="165" y1="540" x2="165" y2="930" stroke="white" strokeWidth="2" />
+        <line x1="435" y1="540" x2="435" y2="930" stroke="white" strokeWidth="2" />
 
         {/* Outside alley lines */}
-        <line x1="120" y1="150" x2="120" y2="540" stroke="white" stroke-width="2" />
-        <line x1="480" y1="150" x2="480" y2="540" stroke="white" stroke-width="2" />
-        <line x1="120" y1="930" x2="120" y2="540" stroke="white" stroke-width="2" />
-        <line x1="480" y1="930" x2="480" y2="540" stroke="white" stroke-width="2" />
+        <line x1="120" y1="150" x2="120" y2="540" stroke="white" strokeWidth="2" />
+        <line x1="480" y1="150" x2="480" y2="540" stroke="white" strokeWidth="2" />
+        <line x1="120" y1="930" x2="120" y2="540" stroke="white" strokeWidth="2" />
+        <line x1="480" y1="930" x2="480" y2="540" stroke="white" strokeWidth="2" />
 
         {/* Top and Bottom lines */}
-        <line x1="120" y1="150" x2="480" y2="150" stroke="white" stroke-width="2" />
-        <line x1="120" y1="930" x2="480" y2="930" stroke="white" stroke-width="2" />
+        <line x1="120" y1="150" x2="480" y2="150" stroke="white" strokeWidth="2" />
+        <line x1="120" y1="930" x2="480" y2="930" stroke="white" strokeWidth="2" />
 
         {/* Net Line */}
-        <line className="gray-hoverable" x1="90" y1="540" x2="510" y2="540" stroke="black" stroke-width="4" />
+        <line className="gray-hoverable" x1="90" y1="540" x2="510" y2="540" stroke="black" strokeWidth="4" />
 
       <style>
         {`

From 3963512ee995fe6bc6cb54fde57e38ef16e1331c Mon Sep 17 00:00:00 2001
From: Alex West <awest2025@ucla.edu>
Date: Tue, 30 Apr 2024 01:45:21 -0700
Subject: [PATCH 27/38] improved documentation of taggerButtonData

---
 app/services/taggerButtonData.js | 47 ++++++++++++++------------------
 1 file changed, 21 insertions(+), 26 deletions(-)

diff --git a/app/services/taggerButtonData.js b/app/services/taggerButtonData.js
index d8442cf..4fe1e4e 100644
--- a/app/services/taggerButtonData.js
+++ b/app/services/taggerButtonData.js
@@ -4,38 +4,33 @@ The 'getTaggerButtonData' function generates a JSON object used for creating a d
 
 Structure:
 - Each button object has a 'label' property, which specifies the text to be displayed on the button.
-- The 'action' property of each button is a function that handles all logic for the button and can call the following functions (passed from tag-match.js) in any amount/order:
-  - 'updateLastRow': This action adds a value to a specified column in the last row of the table. The column name is the first argument, and the value to add is the second argument.
-  - 'setCurrentPage': This action updates the 'currentPage' state with the name of the page passed as an argument.
-  - 'addNewRow': Calling this function with no arguments adds a new row to the table.
-  - All table data is stored in the 'data' argument of the action function, accessed with 'data.table'.
+- The 'action' property of each button is a function that handles all logic for the button. It can call various functions passed from tag-match.js, such as 'updateLastRow', 'setCurrentPage', and 'addNewRow'.
 
-For images it's a little different:
-    - To bring in a court image, the following property must be set: { courtImage: true }
-    - The label sits above the image
-    - The action takes a data argument
-    - The x coordinate is stored in: data.x
-    - The y coordinate is sotred in: data.y
-You can then use this x and y coordinate to update the table.
+Data Handling:
+- All table data is stored in the 'data' argument of the action function, accessible with 'data.table'.
+- For image-based interaction, set the 'courtImage' property to 'serve' or 'standard' to specify how the court image should be split.
+- Coordinates are captured in 'data.x' and 'data.y'. Use these to update table entries based on user interactions.
 
-For example, if the coordinates are really high, you know the serve was long, and you write the logic to record it:
-if (data.y > 800) {
-    updateLastRow('isErrorLong', '1'); // sets the isErrorLong column to '1' for the last row
-}
+Example Logic:
+- Update the last row based on serve coordinates:
+  if (data.y > 800) {
+    updateLastRow('isErrorLong', '1'); // Marks the serve as long
+  }
 
-Other examples:
-updateLastRow('pointScore', '0-0'); // sets the pointScore column to '0-0' for the last row
-setCurrentPage('FirstServeResult'); // sets the currentPage to 'FirstServeResult'
-newRow(); // adds a new row to the table
+- Update scores and state transitions:
+  updateLastRow('pointScore', '0-0'); // sets the pointScore column to '0-0' for the last row
+  setCurrentPage('FirstServeResult'); // transitions to the First Serve Result page
+  newRow(); // adds a new row to the table
 
-Available properties of `data`:
-data.x
-data.y
-data.table
-data.activeRowIndex
-data.videoTimestamp
+Additional Properties of 'data':
+- data.x (only for image data)
+- data.y (only for image data)
+- data.table
+- data.activeRowIndex
+- data.videoTimestamp
 
 ======== Developed by Alex West ======== */
+
 var serverScore = 0;
 var returnerScore = 0;
 var player1SetScore = 0;

From f9c670e7f7c81f0edfa609dfd94b007d6e861517 Mon Sep 17 00:00:00 2001
From: Alex West <awest2025@ucla.edu>
Date: Tue, 30 Apr 2024 02:18:18 -0700
Subject: [PATCH 28/38] added line to documentation

---
 app/services/taggerButtonData.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/services/taggerButtonData.js b/app/services/taggerButtonData.js
index 4fe1e4e..020c636 100644
--- a/app/services/taggerButtonData.js
+++ b/app/services/taggerButtonData.js
@@ -28,6 +28,7 @@ Additional Properties of 'data':
 - data.table
 - data.activeRowIndex
 - data.videoTimestamp
+- Every other property in the match document on the server is also available in 'data', such as 'data.videoId', 'data.clientTeam', etc.
 
 ======== Developed by Alex West ======== */
 

From e3c03563e3eba23f7ad67ed3ad51700be363774a Mon Sep 17 00:00:00 2001
From: Frederick Zhang <frederickzhang@ucla.edu>
Date: Mon, 6 May 2024 16:08:33 -0700
Subject: [PATCH 29/38] chronological order

- looks messy but it's ok because it's a temp fix.
- when we move to the new data storage format, we can simply use the date field
---
 app/components/SearchDropdown.js | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/app/components/SearchDropdown.js b/app/components/SearchDropdown.js
index 0d4868c..9cfb1dd 100644
--- a/app/components/SearchDropdown.js
+++ b/app/components/SearchDropdown.js
@@ -22,11 +22,33 @@ const SearchDropdown = () => {
         .filter((doc) => doc.data().published)
         .map((doc) => {
           const data = doc.data();
+          const name = data.name;
+          const dateRegex = /(\d{1,2})\/(\d{1,2})\/(\d{2})/;
+          const match = name.match(dateRegex);
+            
+          let extractedDate = null;
+          if (match) {
+            const month = parseInt(match[1], 10);
+            const day = parseInt(match[2], 10);
+            const year = parseInt(match[3], 10);
+
+            // Assuming year 2000 is the base, adjust if needed
+            const fullYear = year < 50 ? 2000 + year : 1900 + year;
+
+            extractedDate = new Date(fullYear, month - 1, day);
+          }
+
           return {
-            value: doc.id, // Use 'value' to adhere to react-select convention
-            label: data.name
+            value: doc.id,
+            label: name,
+            date: extractedDate
           };
+        })
+        .sort((a, b) => {
+          if (!a.date || !b.date) return 1; // no date is last
+          return b.date - a.date; // Sort by date
         });
+      console.log(matches)
       setDropdownData(matches);
             
       // Find the selected match based on the URL and set it as selected

From 7bb5eea020fbc6bde8131411813d29f5794b80ac Mon Sep 17 00:00:00 2001
From: Frederick Zhang <frederickzhang@ucla.edu>
Date: Mon, 6 May 2024 16:09:34 -0700
Subject: [PATCH 30/38] remove console.log

---
 app/components/SearchDropdown.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/SearchDropdown.js b/app/components/SearchDropdown.js
index 9cfb1dd..c3dc20f 100644
--- a/app/components/SearchDropdown.js
+++ b/app/components/SearchDropdown.js
@@ -48,7 +48,6 @@ const SearchDropdown = () => {
           if (!a.date || !b.date) return 1; // no date is last
           return b.date - a.date; // Sort by date
         });
-      console.log(matches)
       setDropdownData(matches);
             
       // Find the selected match based on the URL and set it as selected

From ca2996b3a69709bd79c65e201f3b8c5592a7683a Mon Sep 17 00:00:00 2001
From: ritzz26 <ritagarwalrit@gmail.com>
Date: Thu, 9 May 2024 18:25:31 -0700
Subject: [PATCH 31/38] changes as requested

---
 app/(interactive)/matches/[slug]/page.js | 40 ++++++++++++++--------
 app/components/ExtendedList.js           | 37 +++++++++------------
 app/styles/ExtendedList.module.css       |  8 +++--
 app/styles/Match.module.css              | 42 ++++++++++++++++++++++++
 public/PlayButton.js                     | 16 +++++++++
 public/playbutton.svg                    |  6 ----
 6 files changed, 104 insertions(+), 45 deletions(-)
 create mode 100644 public/PlayButton.js
 delete mode 100644 public/playbutton.svg

diff --git a/app/(interactive)/matches/[slug]/page.js b/app/(interactive)/matches/[slug]/page.js
index 2c89cbd..850a7ba 100644
--- a/app/(interactive)/matches/[slug]/page.js
+++ b/app/(interactive)/matches/[slug]/page.js
@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { usePathname } from 'next/navigation'
 
 import filterStyles from '../../../styles/FilterList.module.css'
@@ -35,6 +35,9 @@ const MatchPage = () => {
   const [showPercent, setShowPercent] = useState(false);
   const [showCount, setShowCount] = useState(false);
   const [playingPoint, setPlayingPoint] = useState(null);
+  const [showPDF, setShowPDF] = useState(false);
+  const tableRef = useRef(null);
+  const iframeRef = useRef(null);
 
   const matchSetScores = matchData ? extractSetScores(matchData.points) : {};
 
@@ -117,11 +120,18 @@ const MatchPage = () => {
   };
 
   const scrolltolist=()=>{
-    window.scrollTo({
-      top: 900,
-      behavior: "smooth"
-  });
+    if (tableRef.current) {
+      tableRef.current.scrollIntoView({ behavior: "smooth" });
   }
+  };
+
+  const togglePDF = () => {
+    setShowPDF(false);
+  };
+
+  const togglePoints = () => {
+    setShowPDF(true);
+  };
 
   const sortedFilterList = filterList.sort((a, b) => a[0].localeCompare(b[0]));
 
@@ -139,7 +149,7 @@ const MatchPage = () => {
           <div className={styles.mainContent}>
             {/* Video Player */}
             <div className="videoPlayer">
-              <div>
+              <div ref={iframeRef}>
                 <VideoPlayer videoId={matchData.videoId} setVideoObject={setVideoObject} />
               </div>
             </div>
@@ -213,18 +223,20 @@ const MatchPage = () => {
                     <ScoreBoard names={matchData.name} playData={playingPoint} {...matchSetScores}/>
                   </div>
                 </div>
-
-              
-                
               </div>
             </div>
           </div>
-          <div className={styles.ExtendedList}>
-            <ExtendedList pointsData={returnFilteredPoints()} clientTeam={matchData.clientTeam} opponentTeam={matchData.opponentTeam} onPointSelect={handleJumpToTime}/>
+          <div className={styles.toggle}>
+              <button onClick={() =>togglePDF()} className={showPDF ? styles.toggle_buttona_inactive : styles.toggle_buttona_active}>Points</button>
+              <button onClick={() =>togglePoints()} className={showPDF ? styles.toggle_buttonb_active : styles.toggle_buttonb_inactive}>Key Stats & Visuals</button>
+            {showPDF ? (
+              <iframe className={styles.pdfView} src={matchData.pdfUrl} width="90%" height="1550" />
+            ) : (
+              <div ref={tableRef} className={styles.ExtendedList}>
+                <ExtendedList pointsData={returnFilteredPoints()} clientTeam={matchData.clientTeam} opponentTeam={matchData.opponentTeam} onPointSelect={handleJumpToTime} iframe = {iframeRef}/>
+              </div>
+            )} 
           </div>
-          <br></br>
-          {matchData.pdfUrl && <iframe className={styles.pdfView} src={matchData.pdfUrl} width="90%" height="1550" />}
-          <br></br>
         </>
       )}
 
diff --git a/app/components/ExtendedList.js b/app/components/ExtendedList.js
index 2695a8d..f189565 100644
--- a/app/components/ExtendedList.js
+++ b/app/components/ExtendedList.js
@@ -1,14 +1,15 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState} from "react";
 import styles from '../styles/ExtendedList.module.css';
 import getTeams from '@/app/services/getTeams.js';
 import Winner from '../../public/Winner.js';
 import Error from '../../public/Error.js';
-import DoubleFault from "@/public/DoubleFault";
+import DoubleFault from "../../public/DoubleFault";
+import PlayButton from "../../public/PlayButton";
 
-const ExtendedList = ({ pointsData, clientTeam, opponentTeam, onPointSelect }) => {
+const ExtendedList = ({ pointsData, clientTeam, opponentTeam, onPointSelect, iframe }) => {
     const [client_logo, setClientLogo] = useState('');
     const [opponent_logo, setOpponentLogo] = useState('');
-  
+
     useEffect(() => {
       const fetchLogos = async () => {
         try {
@@ -26,21 +27,21 @@ const ExtendedList = ({ pointsData, clientTeam, opponentTeam, onPointSelect }) =
     });
     let keys = ["", "serverName", "setScore", "gameScore", "pointScore", "pointWonBy", "lastShotResult", "rallyCount"];
     let keys_headers = ["Server", "", "Set Score", "Game Score", "Point", "Point Winner", "Last Shot Type", "Shot Count"];
-    
+
 
     const Scroll=(point)=>{
+        // useref
       onPointSelect(point.Position);
-      window.scrollTo({
-        top: 100,
-        behavior: "smooth"
-    });
+      if (iframe.current) {
+        iframe.current.scrollIntoView({ behavior: "smooth" });
+    }
     }
 
     return (
         <div id="table-container" className={styles.tableContainer}>
             <table className={styles.table}>
                 <thead>
-                    <tr>
+                    <tr className={styles.TR}>
                         {keys_headers.map((key, index) => (
                             <th className={styles.TH} key={index}>{key}</th>
                         ))}
@@ -48,7 +49,7 @@ const ExtendedList = ({ pointsData, clientTeam, opponentTeam, onPointSelect }) =
                 </thead>
                 <tbody>
                     {pointsData.map((item, rowIndex) => (
-                        <tr key={rowIndex}>
+                        <tr className={styles.TR}>
                             {keys.map((key, cellIndex) => (
                                 <td className={styles.TD} key={cellIndex}>
                                     {cellIndex === 0 ? (
@@ -64,8 +65,9 @@ const ExtendedList = ({ pointsData, clientTeam, opponentTeam, onPointSelect }) =
                                                         <Error/>
                                                         
                                                     )}
-                                                    {item['lastShotResult'] === 'Double Fault' && (
+                                                    {item['lastShotResult'] === 'DoubleFault' && (
                                                         <DoubleFault/>
+                                                        
                                                     )}
                                                     <span style={{ marginLeft: '4px' }}>{item['lastShotResult']}</span>
                                                 </>
@@ -79,16 +81,7 @@ const ExtendedList = ({ pointsData, clientTeam, opponentTeam, onPointSelect }) =
 
                             <td className={styles.TD2}>
                                 <button className={styles.button} onClick={() => Scroll(item)}>
-                                <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                    <g opacity="0.4">
-                                    <mask id="mask0_95_468" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="25">
-                                    <rect x="0.191406" y="0.93457" width="24" height="24" fill="#D9D9D9"/>
-                                    </mask>
-                                    <g mask="url(#mask0_95_468)">
-                                    <path d="M9.69043 17.4346L16.6904 12.9346L9.69043 8.43457V17.4346ZM12.1904 22.9346C10.8071 22.9346 9.50709 22.6721 8.29043 22.1471C7.07376 21.6221 6.01543 20.9096 5.11543 20.0096C4.21543 19.1096 3.50293 18.0512 2.97793 16.8346C2.45293 15.6179 2.19043 14.3179 2.19043 12.9346C2.19043 11.5512 2.45293 10.2512 2.97793 9.03457C3.50293 7.8179 4.21543 6.75957 5.11543 5.85957C6.01543 4.95957 7.07376 4.24707 8.29043 3.72207C9.50709 3.19707 10.8071 2.93457 12.1904 2.93457C13.5738 2.93457 14.8738 3.19707 16.0904 3.72207C17.3071 4.24707 18.3654 4.95957 19.2654 5.85957C20.1654 6.75957 20.8779 7.8179 21.4029 9.03457C21.9279 10.2512 22.1904 11.5512 22.1904 12.9346C22.1904 14.3179 21.9279 15.6179 21.4029 16.8346C20.8779 18.0512 20.1654 19.1096 19.2654 20.0096C18.3654 20.9096 17.3071 21.6221 16.0904 22.1471C14.8738 22.6721 13.5738 22.9346 12.1904 22.9346ZM12.1904 20.9346C14.4238 20.9346 16.3154 20.1596 17.8654 18.6096C19.4154 17.0596 20.1904 15.1679 20.1904 12.9346C20.1904 10.7012 19.4154 8.80957 17.8654 7.25957C16.3154 5.70957 14.4238 4.93457 12.1904 4.93457C9.9571 4.93457 8.06543 5.70957 6.51543 7.25957C4.96543 8.80957 4.19043 10.7012 4.19043 12.9346C4.19043 15.1679 4.96543 17.0596 6.51543 18.6096C8.06543 20.1596 9.9571 20.9346 12.1904 20.9346Z" fill="#1C1B1F"/>
-                                    </g>
-                                    </g>
-                                    </svg>
+                                <PlayButton/>
                                 </button>
                             </td>
                         </tr>
diff --git a/app/styles/ExtendedList.module.css b/app/styles/ExtendedList.module.css
index 75b1973..ab0db8b 100644
--- a/app/styles/ExtendedList.module.css
+++ b/app/styles/ExtendedList.module.css
@@ -1,5 +1,6 @@
 .table{
     width: 100%;
+    border-collapse: collapse; 
 }
 
 .TH{
@@ -10,6 +11,10 @@
     padding-left: 0.25vw;
 }
 
+.TR{
+    border-bottom: solid 0.2vw #EDEDED;
+}
+
 .IMG{
     max-width: 2.7vw;
     height: auto; 
@@ -17,7 +22,6 @@
     width: 100%;
 }
 
-
 .TD{
     font-size: 1.4vw;
     font-weight: 600;
@@ -25,7 +29,6 @@
     padding: 0.8vw;
     padding-top: 3.6vh;
     padding-bottom: 3.6vh;
-    border-bottom: solid 0.2vw #EDEDED;
 }
 
 .TD2{
@@ -34,7 +37,6 @@
     text-align: left;
     padding-top: 3.6vh;
     padding-bottom: 3.6vh;
-    border-bottom: solid 0.2vw #EDEDED;
 }
 
 .button{
diff --git a/app/styles/Match.module.css b/app/styles/Match.module.css
index 1f228ca..1f34e7c 100644
--- a/app/styles/Match.module.css
+++ b/app/styles/Match.module.css
@@ -133,6 +133,7 @@
     width:100%;
     border: 1px solid #eaeaea;
     border-radius: 10px;
+    border-top-left-radius: 0% !important;
     padding: 1.5rem;
     text-align: left;
     color: inherit;
@@ -159,4 +160,45 @@
   .buttonn:hover {
     background-color: #e9ecef;
     border-color: #b8c2cc;
+  }
+
+  .toggle {
+    width: 90%;
+  }
+
+  .toggle_buttona_active{
+    font-size: 1vw;
+    width: 10vw;
+    height: 5vh;
+    background-color: #fafafa;
+    border-top-left-radius: 10px;
+    border: 1px solid #eaeaea;
+  }
+
+  .toggle_buttona_inactive{
+    font-size: 1vw;
+    width: 10vw;
+    height: 5vh;
+    background-color: #FAF1EA;
+    border-top-left-radius: 10px;
+    border: 1px solid #eaeaea;
+  }
+
+  /* increase size of buttons */
+  .toggle_buttonb_active{
+    font-size: 1vw;
+    width: 10vw;
+    height: 5vh;
+    background-color: #fafafa;
+    border-top-right-radius: 10px;
+    border: 1px solid #eaeaea;
+  }
+
+  .toggle_buttonb_inactive{
+    font-size: 1vw;
+    width: 10vw;
+    height: 5vh;
+    background-color: #FAF1EA;
+    border-top-right-radius: 10px;
+    border: 1px solid #eaeaea;
   }
\ No newline at end of file
diff --git a/public/PlayButton.js b/public/PlayButton.js
new file mode 100644
index 0000000..429de1a
--- /dev/null
+++ b/public/PlayButton.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+const PlayButton = () => (
+    <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g opacity="0.4">
+    <mask id="mask0_95_468" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="25">
+    <rect x="0.191406" y="0.93457" width="24" height="24" fill="#D9D9D9"/>
+    </mask>
+    <g mask="url(#mask0_95_468)">
+    <path d="M9.69043 17.4346L16.6904 12.9346L9.69043 8.43457V17.4346ZM12.1904 22.9346C10.8071 22.9346 9.50709 22.6721 8.29043 22.1471C7.07376 21.6221 6.01543 20.9096 5.11543 20.0096C4.21543 19.1096 3.50293 18.0512 2.97793 16.8346C2.45293 15.6179 2.19043 14.3179 2.19043 12.9346C2.19043 11.5512 2.45293 10.2512 2.97793 9.03457C3.50293 7.8179 4.21543 6.75957 5.11543 5.85957C6.01543 4.95957 7.07376 4.24707 8.29043 3.72207C9.50709 3.19707 10.8071 2.93457 12.1904 2.93457C13.5738 2.93457 14.8738 3.19707 16.0904 3.72207C17.3071 4.24707 18.3654 4.95957 19.2654 5.85957C20.1654 6.75957 20.8779 7.8179 21.4029 9.03457C21.9279 10.2512 22.1904 11.5512 22.1904 12.9346C22.1904 14.3179 21.9279 15.6179 21.4029 16.8346C20.8779 18.0512 20.1654 19.1096 19.2654 20.0096C18.3654 20.9096 17.3071 21.6221 16.0904 22.1471C14.8738 22.6721 13.5738 22.9346 12.1904 22.9346ZM12.1904 20.9346C14.4238 20.9346 16.3154 20.1596 17.8654 18.6096C19.4154 17.0596 20.1904 15.1679 20.1904 12.9346C20.1904 10.7012 19.4154 8.80957 17.8654 7.25957C16.3154 5.70957 14.4238 4.93457 12.1904 4.93457C9.9571 4.93457 8.06543 5.70957 6.51543 7.25957C4.96543 8.80957 4.19043 10.7012 4.19043 12.9346C4.19043 15.1679 4.96543 17.0596 6.51543 18.6096C8.06543 20.1596 9.9571 20.9346 12.1904 20.9346Z" fill="#1C1B1F"/>
+    </g>
+    </g>
+    </svg>
+);
+
+export default PlayButton;
diff --git a/public/playbutton.svg b/public/playbutton.svg
deleted file mode 100644
index 55507ae..0000000
--- a/public/playbutton.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="481px" height="519px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
-<g><path style="opacity:0.993" fill="#9b9b9b" d="M 228.5,56.5 C 293.847,54.9764 346.68,79.6431 387,130.5C 426.5,187.345 433.5,248.012 408,312.5C 377.194,377.338 326.027,413.838 254.5,422C 188.574,425.443 135.074,401.609 94,350.5C 48.0125,283.627 44.6792,214.627 84,143.5C 118.242,91.6191 166.408,62.6191 228.5,56.5 Z M 225.5,81.5 C 283.69,78.5255 330.856,99.5255 367,144.5C 400.13,191.467 407.13,242.134 388,296.5C 359.895,360.915 310.562,394.915 240,398.5C 169.438,394.915 120.105,360.915 92,296.5C 71.4765,236.966 81.1432,182.966 121,134.5C 149.351,104.241 184.184,86.5739 225.5,81.5 Z"/></g>
-<g><path style="opacity:0.999" fill="#9a9a9a" d="M 182.5,148.5 C 192.056,148.306 201.056,150.472 209.5,155C 244.336,175.586 279.336,195.919 314.5,216C 330.981,229.017 333.147,243.851 321,260.5C 316.101,264.699 310.934,268.532 305.5,272C 274.575,289.267 243.908,306.934 213.5,325C 203.82,331.753 193.154,334.42 181.5,333C 168.264,328.742 161.097,319.575 160,305.5C 159.333,262.5 159.333,219.5 160,176.5C 161.586,162.11 169.086,152.777 182.5,148.5 Z"/></g>
-</svg>

From 9e7566f0b21f9929059123b4acf56f95c4b5f648 Mon Sep 17 00:00:00 2001
From: Leo Cardozo <leonardocardozo14@gmail.com>
Date: Thu, 9 May 2024 19:07:59 -0700
Subject: [PATCH 32/38] updating serve logic with coordinates

---
 app/services/taggerButtonData.js | 624 ++++++++++++++++---------
 package-lock.json                | 753 +++++++++++++++++++++----------
 package.json                     |   3 +-
 3 files changed, 930 insertions(+), 450 deletions(-)

diff --git a/app/services/taggerButtonData.js b/app/services/taggerButtonData.js
index 020c636..fd1c980 100644
--- a/app/services/taggerButtonData.js
+++ b/app/services/taggerButtonData.js
@@ -847,7 +847,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
         }
     },
     {
-            courtImage: true,
+            courtImage: 'serve',
             label: 'Select First Serve Position',
             action: (data) => {
                 updateActiveRow('firstServeXCoord', data.x);
@@ -856,11 +856,11 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 if (data.table[data.activeRowIndex]['serverFarNear'] == 'Near') {
                     if ((data.table[data.activeRowIndex])['side'] == 'Deuce') // split by side
                     {
-                            // Assuming coordinate range of x: 75 -215, y: 220-470
-                        if (data.x >= 75 & data.x < 121)
+                            // Assuming coordinate range of x: 0-(-157), y: 0-245
+                        if (data.x >= -157 & data.x < -101)
                         {
                             updateActiveRow('firstServeZone', 'Wide');
-                            if (data.y >= 220 & data.y <= 470)
+                            if (data.y >= 10 & data.y <= 245)
                             {
                                 updateActiveRow('firstServeIn', '1');
                                 if (data.table[data.activeRowIndex]['isAce'] == '1') {
@@ -896,10 +896,10 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                                 setCurrentPage('SecondServe');
                             }
                         }
-                        else if (data.x >= 121 & data.x <= 168)
+                        else if (data.x >= -101 & data.x <= -54)
                         {
                             updateActiveRow('firstServeZone', 'Body');
-                            if (data.y >= 220 & data.y <= 470)
+                            if (data.y >= 10 & data.y <= 245)
                             {
                                 updateActiveRow('firstServeIn', '1');
                                 if (data.table[data.activeRowIndex]['isAce'] == '1') {
@@ -935,10 +935,10 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                                 setCurrentPage('SecondServe');
                             }
                         }
-                        else if (data.x > 168 & data.x <= 215)
+                        else if (data.x > -54 & data.x <= 0)
                         {
                             updateActiveRow('firstServeZone', 'T');
-                            if (data.y >= 220 & data.y <= 470)
+                            if (data.y >= 10 & data.y <= 245)
                             {
                                 updateActiveRow('firstServeIn', '1');
                                 if (data.table[data.activeRowIndex]['isAce'] == '1') {
@@ -977,7 +977,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         else
                         {
                             updateActiveRow('firstServeIn', '0');
-                            if (data.x > 215) 
+                            if (data.x > 0) 
                             {
                                 updateActiveRow('firstServeZone', 'T');
                             }
@@ -989,11 +989,11 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         }
                     }
             else // wide and T inverted for Ad side
-                {  // Assuming coordinate range of x: 215-350, y: 220-470
-                    if (data.x >= 215 & data.x < 260)
+                {  // Assuming coordinate range of x: 0-157, y: 0-245
+                    if (data.x >= 0 & data.x < 55)
                     {
                         updateActiveRow('firstServeZone', 'T');
-                        if (data.y >= 220 & data.y <= 470)
+                        if (data.y >= 10 & data.y <= 245)
                         {
                             updateActiveRow('firstServeIn', '1');
                             if (data.table[data.activeRowIndex]['isAce'] == '1') {
@@ -1029,10 +1029,10 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                             setCurrentPage('SecondServe');
                         }
                     }
-                    else if (data.x >= 260 & data.x <= 305)
+                    else if (data.x >= 55 & data.x <= 105)
                     {
                         updateActiveRow('firstServeZone', 'Body');
-                        if (data.y >= 220 & data.y <= 470)
+                        if (data.y >= 10 & data.y <= 245)
                         {
                             updateActiveRow('firstServeIn', '1');
                             if (data.table[data.activeRowIndex]['isAce'] == '1') {
@@ -1068,10 +1068,10 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                             setCurrentPage('SecondServe');
                         }
                     }
-                    else if (data.x > 305 & data.x <= 350)
+                    else if (data.x > 105 & data.x <= 157)
                     {
                         updateActiveRow('firstServeZone', 'Wide');
-                        if (data.y >= 220 & data.y <= 470)
+                        if (data.y >= 10 & data.y <= 245)
                         {
                             updateActiveRow('firstServeIn', '1');
                             if (data.table[data.activeRowIndex]['isAce'] == '1') {
@@ -1110,7 +1110,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                     else
                     {
                         updateActiveRow('firstServeIn', '0');
-                        if (data.x > 215) 
+                        if (data.x < 0) 
                         {
                             updateActiveRow('firstServeZone', 'T');
                         }
@@ -1127,11 +1127,11 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             {
                 if ((data.table[data.activeRowIndex])['side'] == 'Ad') // split by side
                 {
-                    // Assuming coordinate range of x: 75 -215, y: 470-723
-                if (data.x >= 75 & data.x < 121)
+                // Assuming coordinate range of x: 0-(-157), y: 0-245
+                if (data.x >= -157 & data.x < -105)
                 {
                     updateActiveRow('firstServeZone', 'Wide');
-                    if (data.y >= 470 & data.y <= 723)
+                    if (data.y >= 0 & data.y <= 245)
                     {
                         updateActiveRow('firstServeIn', '1');
                         if (data.table[data.activeRowIndex]['isAce'] == '1') {
@@ -1167,10 +1167,10 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('SecondServe');
                     }
                 }
-                else if (data.x >= 121 & data.x <= 168)
+                else if (data.x >= -105 & data.x <= -52)
                 {
                     updateActiveRow('firstServeZone', 'Body');
-                    if (data.y >= 470 & data.y <= 723)
+                    if (data.y >= 0 & data.y <= 245)
                     {
                         updateActiveRow('firstServeIn', '1');
                         if (data.table[data.activeRowIndex]['isAce'] == '1') {
@@ -1206,10 +1206,10 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('SecondServe');
                     }
                 }
-                else if (data.x > 168 & data.x <= 215)
+                else if (data.x > -52 & data.x < 0)
                 {
                     updateActiveRow('firstServeZone', 'T');
-                    if (data.y >= 470 & data.y <= 723)
+                    if (data.y >= 0 & data.y <= 245)
                     {
                         updateActiveRow('firstServeIn', '1');
                         if (data.table[data.activeRowIndex]['isAce'] == '1') {
@@ -1248,7 +1248,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 else
                 {
                     updateActiveRow('firstServeIn', '0');
-                    if (data.x > 215) 
+                    if (data.x > 0) 
                     {
                         updateActiveRow('firstServeZone', 'T');
                     }
@@ -1260,11 +1260,11 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 }
             }
             else // wide and T inverted for Deuce side
-            {  // Assuming coordinate range of x: 215-350, y: 470-723
-                if (data.x >= 215 & data.x < 260)
+            {  // Assuming coordinate range of x: 0-157, y: 0-245
+                if (data.x >= 0 & data.x < 50)
                 {
                     updateActiveRow('firstServeZone', 'T');
-                    if (data.y >= 470 & data.y <= 723)
+                    if (data.y < 0 & data.y >= -245)
                     {
                         updateActiveRow('firstServeIn', '1');
                         if (data.table[data.activeRowIndex]['isAce'] == '1') {
@@ -1300,10 +1300,10 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('SecondServe');
                     }
                 }
-                else if (data.x >= 260 & data.x <= 305)
+                else if (data.x >= 50 & data.x <= 105)
                 {
                     updateActiveRow('firstServeZone', 'Body');
-                    if (data.y >= 470 & data.y <= 723)
+                    if (data.y < 0 & data.y >= -245)
                     {
                         updateActiveRow('firstServeIn', '1');
                         if (data.table[data.activeRowIndex]['isAce'] == '1') {
@@ -1339,10 +1339,10 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('SecondServe');
                     }
                 }
-                else if (data.x > 305 & data.x <= 350)
+                else if (data.x > 105 & data.x <= 157)
                 {
                     updateActiveRow('firstServeZone', 'Wide');
-                    if (data.y >= 470 & data.y <= 723)
+                    if (data.y < 0 & data.y >= -245)
                     {
                         updateActiveRow('firstServeIn', '1');
                         if (data.table[data.activeRowIndex]['isAce'] == '1') {
@@ -1381,7 +1381,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 else
                 {
                     updateActiveRow('firstServeIn', '0');
-                    if (data.x >= 215 & data.x < 260) 
+                    if (data.x <= 0) 
                     {
                         updateActiveRow('firstServeZone', 'T');
                     }
@@ -1398,7 +1398,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
     ],
     'SecondServe': [
         {
-        courtImage: true,
+        courtImage: 'serve',
         label: 'Select Second Serve Position',
         action: (data) => {
             updateActiveRow('secondServeXCoord', data.x);
@@ -1409,11 +1409,11 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             if (data.table[data.activeRowIndex]['serverFarNear'] == 'Near') {
             if ((data.table[data.activeRowIndex])['side'] == 'Deuce') // split by side
             {
-                // Assuming coordinate range of x: 75 -215, y: 220-470
-            if (data.x >= 75 & data.x < 121)
+            // Assuming coordinate range of x: 0-(-157), y: 0-245
+            if (data.x >= -157 & data.x < -101)
             {
                 updateActiveRow('secondServeZone', 'Wide');
-                if (data.y >= 220 & data.y <= 470)
+                if (data.y >= 0 & data.y <= 245)
                 {
                     updateActiveRow('secondServeIn', '1');
                     setCurrentPage('GroundstrokeContact');
@@ -1431,23 +1431,36 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('PointScore');
                     }
                     else {
-                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
-                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
-                        updateActiveRow('pointScore', serverScore + '-' + returnerScore);
-                        updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
-                        updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
-                        updateActiveRow('isPointStart', 1);
-                        updateActiveRow('shotInRally', 1);
-                        updateActiveRow('side', chooseSide());
-                        setCurrentPage('FirstServe');  
+                        if (data.activeRowIndex > 0) {
+                            updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                            updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                            updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                            updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                            updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                            updateActiveRow('isPointStart', 1);
+                            updateActiveRow('shotInRally', 1);
+                            updateActiveRow('side', chooseSide());
+                            setCurrentPage('FirstServe'); 
+                        }
+                        else {
+                            updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                            updateActiveRow('serverName', data.table[0]['serverName']);
+                            updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                            updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                            updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                            updateActiveRow('isPointStart', 1);
+                            updateActiveRow('shotInRally', 1);
+                            updateActiveRow('side', chooseSide());
+                            setCurrentPage('FirstServe'); 
+                        } 
                     }   
                 }
                 }
             }
-            else if (data.x >= 121 & data.x <= 168)
+            else if (data.x >= -101 & data.x <= -54)
             {
                 updateActiveRow('secondServeZone', 'Body');
-                if (data.y >= 220 & data.y <= 470)
+                if (data.y >= 0 & data.y <= 245)
                 {
                     updateActiveRow('secondServeIn', '1');
                     setCurrentPage('GroundstrokeContact');
@@ -1465,23 +1478,36 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('PointScore');
                     }
                     else {
-                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
-                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
-                        updateActiveRow('pointScore', serverScore + '-' + returnerScore);
-                        updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
-                        updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
-                        updateActiveRow('isPointStart', 1);
-                        updateActiveRow('shotInRally', 1);
-                        updateActiveRow('side', chooseSide());
-                        setCurrentPage('FirstServe');  
+                        if (data.activeRowIndex > 0) {
+                            updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                            updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                            updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                            updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                            updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                            updateActiveRow('isPointStart', 1);
+                            updateActiveRow('shotInRally', 1);
+                            updateActiveRow('side', chooseSide());
+                            setCurrentPage('FirstServe'); 
+                        }
+                        else {
+                            updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                            updateActiveRow('serverName', data.table[0]['serverName']);
+                            updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                            updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                            updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                            updateActiveRow('isPointStart', 1);
+                            updateActiveRow('shotInRally', 1);
+                            updateActiveRow('side', chooseSide());
+                            setCurrentPage('FirstServe'); 
+                        } 
                     }   
                 }
                 }
             }
-            else if (data.x > 168 & data.x <= 215)
+            else if (data.x > -54 & data.x <= 0)
             {
                 updateActiveRow('secondServeZone', 'T');
-                if (data.y >= 220 & data.y <= 470)
+                if (data.y >= 0 & data.y <= 245)
                 {
                     updateActiveRow('secondServeIn', '1');
                     setCurrentPage('GroundstrokeContact');
@@ -1499,15 +1525,28 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('PointScore');
                     }
                     else {
-                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
-                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
-                        updateActiveRow('pointScore', serverScore + '-' + returnerScore);
-                        updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
-                        updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
-                        updateActiveRow('isPointStart', 1);
-                        updateActiveRow('shotInRally', 1);
-                        updateActiveRow('side', chooseSide());
-                        setCurrentPage('FirstServe');  
+                        if (data.activeRowIndex > 0) {
+                            updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                            updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                            updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                            updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                            updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                            updateActiveRow('isPointStart', 1);
+                            updateActiveRow('shotInRally', 1);
+                            updateActiveRow('side', chooseSide());
+                            setCurrentPage('FirstServe');  
+                        }
+                        else {
+                            updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                            updateActiveRow('serverName', data.table[0]['serverName']);
+                            updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                            updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                            updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                            updateActiveRow('isPointStart', 1);
+                            updateActiveRow('shotInRally', 1);
+                            updateActiveRow('side', chooseSide());
+                            setCurrentPage('FirstServe');   
+                        }
                     }   
                 }
                 }
@@ -1515,7 +1554,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             else
             {
                 updateActiveRow('secondServeIn', '0');
-                if (data.x > 215) 
+                if (data.x > 0) 
                 {
                     updateActiveRow('secondServeZone', 'T');
                 }
@@ -1533,25 +1572,38 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                     setCurrentPage('PointScore');
                 }
                 else {
-                    updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
-                    updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
-                    updateActiveRow('pointScore', serverScore + '-' + returnerScore);
-                    updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
-                    updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
-                    updateActiveRow('isPointStart', 1);
-                    updateActiveRow('shotInRally', 1);
-                    updateActiveRow('side', chooseSide());
-                    setCurrentPage('FirstServe');  
+                    if (data.activeRowIndex > 0) {
+                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                        updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                        updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                        updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                        updateActiveRow('isPointStart', 1);
+                        updateActiveRow('shotInRally', 1);
+                        updateActiveRow('side', chooseSide());
+                        setCurrentPage('FirstServe');  
+                    }
+                    else {
+                            updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                            updateActiveRow('serverName', data.table[0]['serverName']);
+                            updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                            updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                            updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                            updateActiveRow('isPointStart', 1);
+                            updateActiveRow('shotInRally', 1);
+                            updateActiveRow('side', chooseSide());
+                            setCurrentPage('FirstServe');  
+                    }
                 }   
             }
             }
         }
         else // wide and T inverted for Ad side
-        {  // Assuming coordinate range of x: 215-350, y: 220-470
-            if (data.x >= 215 & data.x < 260)
+        {  // Assuming coordinate range of x: 0-157, y: 0-245
+            if (data.x >= 0 & data.x < 55)
             {
                 updateActiveRow('secondServeZone', 'T');
-                if (data.y >= 220 & data.y <= 470)
+                if (data.y >= 0 & data.y <= 245)
                 {
                     updateActiveRow('secondServeIn', '1');
                     setCurrentPage('GroundstrokeContact');
@@ -1569,23 +1621,36 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('PointScore');
                     }
                     else {
-                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
-                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
-                        updateActiveRow('pointScore', serverScore + '-' + returnerScore);
-                        updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
-                        updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
-                        updateActiveRow('isPointStart', 1);
-                        updateActiveRow('shotInRally', 1);
-                        updateActiveRow('side', chooseSide());
-                        setCurrentPage('FirstServe');  
+                        if (data.activeRowIndex > 0) {
+                            updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                            updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                            updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                            updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                            updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                            updateActiveRow('isPointStart', 1);
+                            updateActiveRow('shotInRally', 1);
+                            updateActiveRow('side', chooseSide());
+                            setCurrentPage('FirstServe');  
+                        }
+                        else {
+                                updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                                updateActiveRow('serverName', data.table[0]['serverName']);
+                                updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                                updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                                updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                                updateActiveRow('isPointStart', 1);
+                                updateActiveRow('shotInRally', 1);
+                                updateActiveRow('side', chooseSide());
+                                setCurrentPage('FirstServe');  
+                        } 
                     }   
                 }
                 }
             }
-            else if (data.x >= 260 & data.x <= 305)
+            else if (data.x >= 55 & data.x <= 105)
             {
                 updateActiveRow('secondServeZone', 'Body');
-                if (data.y >= 220 & data.y <= 470)
+                if (data.y >= 0 & data.y <= 245)
                 {
                     updateActiveRow('secondServeIn', '1');
                     setCurrentPage('GroundstrokeContact');
@@ -1603,23 +1668,36 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('PointScore');
                     }
                     else {
-                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
-                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
-                        updateActiveRow('pointScore', serverScore + '-' + returnerScore);
-                        updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
-                        updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
-                        updateActiveRow('isPointStart', 1);
-                        updateActiveRow('shotInRally', 1);
-                        updateActiveRow('side', chooseSide());
-                        setCurrentPage('FirstServe');  
+                        if (data.activeRowIndex > 0) {
+                            updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                            updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                            updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                            updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                            updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                            updateActiveRow('isPointStart', 1);
+                            updateActiveRow('shotInRally', 1);
+                            updateActiveRow('side', chooseSide());
+                            setCurrentPage('FirstServe');  
+                        }
+                        else {
+                                updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                                updateActiveRow('serverName', data.table[0]['serverName']);
+                                updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                                updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                                updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                                updateActiveRow('isPointStart', 1);
+                                updateActiveRow('shotInRally', 1);
+                                updateActiveRow('side', chooseSide());
+                                setCurrentPage('FirstServe');  
+                        }
                     }   
                 }
                 }
             }
-            else if (data.x > 305 & data.x <= 350)
+            else if (data.x > 105 & data.x <= 157)
             {
                 updateActiveRow('secondServeZone', 'Wide');
-                if (data.y >= 220 & data.y <= 470)
+                if (data.y >= 0 & data.y <= 245)
                 {
                     updateActiveRow('secondServeIn', '1');
                     setCurrentPage('GroundstrokeContact');
@@ -1637,15 +1715,28 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('PointScore');
                     }
                     else {
-                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
-                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
-                        updateActiveRow('pointScore', serverScore + '-' + returnerScore);
-                        updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
-                        updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
-                        updateActiveRow('isPointStart', 1);
-                        updateActiveRow('shotInRally', 1);
-                        updateActiveRow('side', chooseSide());
-                        setCurrentPage('FirstServe');  
+                        if (data.activeRowIndex > 0) {
+                            updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                            updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                            updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                            updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                            updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                            updateActiveRow('isPointStart', 1);
+                            updateActiveRow('shotInRally', 1);
+                            updateActiveRow('side', chooseSide());
+                            setCurrentPage('FirstServe');  
+                        }
+                        else {
+                                updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                                updateActiveRow('serverName', data.table[0]['serverName']);
+                                updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                                updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                                updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                                updateActiveRow('isPointStart', 1);
+                                updateActiveRow('shotInRally', 1);
+                                updateActiveRow('side', chooseSide());
+                                setCurrentPage('FirstServe');  
+                        }
                     }   
                 }
                 }
@@ -1653,7 +1744,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             else
             {
                 updateActiveRow('secondServeIn', '0');
-                if (data.x > 215) 
+                if (data.x < 0) 
                 {
                     updateActiveRow('secondServeZone', 'T');
                 }
@@ -1671,15 +1762,28 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                     setCurrentPage('PointScore');
                 }
                 else {
-                    updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
-                    updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
-                    updateActiveRow('pointScore', serverScore + '-' + returnerScore);
-                    updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
-                    updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
-                    updateActiveRow('isPointStart', 1);
-                    updateActiveRow('shotInRally', 1);
-                    updateActiveRow('side', chooseSide());
-                    setCurrentPage('FirstServe');  
+                    if (data.activeRowIndex > 0) {
+                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                        updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                        updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                        updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                        updateActiveRow('isPointStart', 1);
+                        updateActiveRow('shotInRally', 1);
+                        updateActiveRow('side', chooseSide());
+                        setCurrentPage('FirstServe');  
+                    }
+                    else {
+                            updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                            updateActiveRow('serverName', data.table[0]['serverName']);
+                            updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                            updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                            updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                            updateActiveRow('isPointStart', 1);
+                            updateActiveRow('shotInRally', 1);
+                            updateActiveRow('side', chooseSide());
+                            setCurrentPage('FirstServe');  
+                    }
                 }   
             }
             }   
@@ -1691,10 +1795,10 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             if ((data.table[data.activeRowIndex])['side'] == 'Ad') // split by side
             {
                 // Assuming coordinate range of x: 75 -215, y: 470-723
-            if (data.x >= 75 & data.x < 121)
+            if (data.x >= -157 & data.x < -105)
             {
                 updateActiveRow('secondServeZone', 'Wide');
-                if (data.y >= 470 & data.y <= 723)
+                if (data.y >= 0 & data.y <= 245)
                 {
                     updateActiveRow('secondServeIn', '1');
                     setCurrentPage('GroundstrokeContact');
@@ -1712,23 +1816,36 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('PointScore');
                     }
                     else {
-                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
-                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
-                        updateActiveRow('pointScore', serverScore + '-' + returnerScore);
-                        updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
-                        updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
-                        updateActiveRow('isPointStart', 1);
-                        updateActiveRow('shotInRally', 1);
-                        updateActiveRow('side', chooseSide());
-                        setCurrentPage('FirstServe');  
+                        if (data.activeRowIndex > 0) {
+                            updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                            updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                            updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                            updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                            updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                            updateActiveRow('isPointStart', 1);
+                            updateActiveRow('shotInRally', 1);
+                            updateActiveRow('side', chooseSide());
+                            setCurrentPage('FirstServe');  
+                        }
+                        else {
+                                updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                                updateActiveRow('serverName', data.table[0]['serverName']);
+                                updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                                updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                                updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                                updateActiveRow('isPointStart', 1);
+                                updateActiveRow('shotInRally', 1);
+                                updateActiveRow('side', chooseSide());
+                                setCurrentPage('FirstServe');  
+                        } 
                     }   
                 }
                 }
             }
-            else if (data.x >= 121 & data.x <= 168)
+            else if (data.x >= -105 & data.x <= -52)
             {
                 updateActiveRow('secondServeZone', 'Body');
-                if (data.y >= 470 & data.y <= 723)
+                if (data.y >= 0 & data.y <= 245)
                 {
                     updateActiveRow('secondServeIn', '1');
                     setCurrentPage('GroundstrokeContact');
@@ -1747,23 +1864,36 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('PointScore');
                     }
                     else {
-                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
-                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
-                        updateActiveRow('pointScore', serverScore + '-' + returnerScore);
-                        updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
-                        updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
-                        updateActiveRow('isPointStart', 1);
-                        updateActiveRow('shotInRally', 1);
-                        updateActiveRow('side', chooseSide());
-                        setCurrentPage('FirstServe');  
+                        if (data.activeRowIndex > 0) {
+                            updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                            updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                            updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                            updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                            updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                            updateActiveRow('isPointStart', 1);
+                            updateActiveRow('shotInRally', 1);
+                            updateActiveRow('side', chooseSide());
+                            setCurrentPage('FirstServe');  
+                        }
+                        else {
+                                updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                                updateActiveRow('serverName', data.table[0]['serverName']);
+                                updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                                updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                                updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                                updateActiveRow('isPointStart', 1);
+                                updateActiveRow('shotInRally', 1);
+                                updateActiveRow('side', chooseSide());
+                                setCurrentPage('FirstServe');  
+                        }  
                     }   
                 }
                 }
             }
-            else if (data.x > 168 & data.x <= 215)
+            else if (data.x > -52 & data.x < 0)
             {
                 updateActiveRow('secondServeZone', 'T');
-                if (data.y >= 470 & data.y <= 723)
+                if (data.y >= 0 & data.y <= 245)
                 {
                     updateActiveRow('secondServeIn', '1');
                     setCurrentPage('GroundstrokeContact');
@@ -1781,15 +1911,28 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('PointScore');
                     }
                     else {
-                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
-                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
-                        updateActiveRow('pointScore', serverScore + '-' + returnerScore);
-                        updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
-                        updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
-                        updateActiveRow('isPointStart', 1);
-                        updateActiveRow('shotInRally', 1);
-                        updateActiveRow('side', chooseSide());
-                        setCurrentPage('FirstServe');  
+                        if (data.activeRowIndex > 0) {
+                            updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                            updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                            updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                            updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                            updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                            updateActiveRow('isPointStart', 1);
+                            updateActiveRow('shotInRally', 1);
+                            updateActiveRow('side', chooseSide());
+                            setCurrentPage('FirstServe');  
+                        }
+                        else {
+                                updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                                updateActiveRow('serverName', data.table[0]['serverName']);
+                                updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                                updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                                updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                                updateActiveRow('isPointStart', 1);
+                                updateActiveRow('shotInRally', 1);
+                                updateActiveRow('side', chooseSide());
+                                setCurrentPage('FirstServe');  
+                        }
                     }   
                 }
                 }
@@ -1797,7 +1940,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             else
             {
                 updateActiveRow('secondServeIn', '0');
-                if (data.x > 215) 
+                if (data.x < 0) 
                 {
                     updateActiveRow('secondServeZone', 'T');
                 }
@@ -1815,25 +1958,38 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                     setCurrentPage('PointScore');
                 }
                 else {
-                    updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
-                    updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
-                    updateActiveRow('pointScore', serverScore + '-' + returnerScore);
-                    updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
-                    updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
-                    updateActiveRow('isPointStart', 1);
-                    updateActiveRow('shotInRally', 1);
-                    updateActiveRow('side', chooseSide());
-                    setCurrentPage('FirstServe');  
+                    if (data.activeRowIndex > 0) {
+                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                        updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                        updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                        updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                        updateActiveRow('isPointStart', 1);
+                        updateActiveRow('shotInRally', 1);
+                        updateActiveRow('side', chooseSide());
+                        setCurrentPage('FirstServe');  
+                    }
+                    else {
+                            updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                            updateActiveRow('serverName', data.table[0]['serverName']);
+                            updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                            updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                            updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                            updateActiveRow('isPointStart', 1);
+                            updateActiveRow('shotInRally', 1);
+                            updateActiveRow('side', chooseSide());
+                            setCurrentPage('FirstServe');  
+                    }
                 }   
             }
             }
         }
         else // wide and T inverted for Deuce side
         {  // Assuming coordinate range of x: 215-350, y: 470-723
-            if (data.x >= 215 & data.x < 260)
+            if (data.x >= 0 & data.x < 50)
             {
                 updateActiveRow('secondServeZone', 'T');
-                if (data.y >= 470 & data.y <= 723)
+                if (data.y < 0 & data.y >= -245)
                 {
                     updateActiveRow('secondServeIn', '1');
                     setCurrentPage('GroundstrokeContact');
@@ -1851,23 +2007,36 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('PointScore');
                     }
                     else {
-                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
-                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
-                        updateActiveRow('pointScore', serverScore + '-' + returnerScore);
-                        updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
-                        updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
-                        updateActiveRow('isPointStart', 1);
-                        updateActiveRow('shotInRally', 1);
-                        updateActiveRow('side', chooseSide());
-                        setCurrentPage('FirstServe');  
+                        if (data.activeRowIndex > 0) {
+                            updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                            updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                            updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                            updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                            updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                            updateActiveRow('isPointStart', 1);
+                            updateActiveRow('shotInRally', 1);
+                            updateActiveRow('side', chooseSide());
+                            setCurrentPage('FirstServe');  
+                        }
+                        else {
+                                updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                                updateActiveRow('serverName', data.table[0]['serverName']);
+                                updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                                updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                                updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                                updateActiveRow('isPointStart', 1);
+                                updateActiveRow('shotInRally', 1);
+                                updateActiveRow('side', chooseSide());
+                                setCurrentPage('FirstServe');  
+                        }  
                     }   
                 }
                 }
             }
-            else if (data.x >= 260 & data.x <= 305)
+            else if (data.x >= 50 & data.x <= 105)
             {
                 updateActiveRow('secondServeZone', 'Body');
-                if (data.y >= 470 & data.y <= 723)
+                if (data.y < 0 & data.y >= -245)
                 {
                     updateActiveRow('secondServeIn', '1');
                     setCurrentPage('GroundstrokeContact');
@@ -1885,23 +2054,36 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('PointScore');
                     }
                     else {
-                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
-                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
-                        updateActiveRow('pointScore', serverScore + '-' + returnerScore);
-                        updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
-                        updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
-                        updateActiveRow('isPointStart', 1);
-                        updateActiveRow('shotInRally', 1);
-                        updateActiveRow('side', chooseSide());
-                        setCurrentPage('FirstServe');  
+                        if (data.activeRowIndex > 0) {
+                            updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                            updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                            updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                            updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                            updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                            updateActiveRow('isPointStart', 1);
+                            updateActiveRow('shotInRally', 1);
+                            updateActiveRow('side', chooseSide());
+                            setCurrentPage('FirstServe');  
+                        }
+                        else {
+                                updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                                updateActiveRow('serverName', data.table[0]['serverName']);
+                                updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                                updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                                updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                                updateActiveRow('isPointStart', 1);
+                                updateActiveRow('shotInRally', 1);
+                                updateActiveRow('side', chooseSide());
+                                setCurrentPage('FirstServe');  
+                        } 
                     }   
                 }
                 }
             }
-            else if (data.x > 305 & data.x <= 350)
+            else if (data.x > 105 & data.x <= 157)
             {
                 updateActiveRow('secondServeZone', 'Wide');
-                if (data.y >= 470 & data.y <= 723)
+                if (data.y < 0 & data.y >= -245)
                 {
                     updateActiveRow('secondServeIn', '1');
                     setCurrentPage('GroundstrokeContact');
@@ -1919,15 +2101,28 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                         setCurrentPage('PointScore');
                     }
                     else {
-                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
-                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
-                        updateActiveRow('pointScore', serverScore + '-' + returnerScore);
-                        updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
-                        updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
-                        updateActiveRow('isPointStart', 1);
-                        updateActiveRow('shotInRally', 1);
-                        updateActiveRow('side', chooseSide());
-                        setCurrentPage('FirstServe');  
+                        if (data.activeRowIndex > 0) {
+                            updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                            updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                            updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                            updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                            updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                            updateActiveRow('isPointStart', 1);
+                            updateActiveRow('shotInRally', 1);
+                            updateActiveRow('side', chooseSide());
+                            setCurrentPage('FirstServe');  
+                        }
+                        else {
+                                updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                                updateActiveRow('serverName', data.table[0]['serverName']);
+                                updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                                updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                                updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                                updateActiveRow('isPointStart', 1);
+                                updateActiveRow('shotInRally', 1);
+                                updateActiveRow('side', chooseSide());
+                                setCurrentPage('FirstServe');  
+                        }
                     }   
                 }
                 }
@@ -1935,7 +2130,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             else
             {
                 updateActiveRow('secondServeIn', '0');
-                if (data.x >= 215 & data.x <= 260) 
+                if (data.x < 0) 
                 {
                     updateActiveRow('secondServeZone', 'T');
                 }
@@ -1953,15 +2148,28 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 setCurrentPage('PointScore');
             }
             else {
-                updateActiveRow('serverFarNear', data.table[data.activeRowIndex]['serverFarNear']);
-                updateActiveRow('serverName', data.table[data.activeRowIndex]['serverName']);
-                updateActiveRow('pointScore', serverScore + '-' + returnerScore);
-                updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
-                updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
-                updateActiveRow('isPointStart', 1);
-                updateActiveRow('shotInRally', 1);
-                updateActiveRow('side', chooseSide());
-                setCurrentPage('FirstServe');  
+                if (data.activeRowIndex > 0) {
+                    updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                    updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                    updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                    updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                    updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                    updateActiveRow('isPointStart', 1);
+                    updateActiveRow('shotInRally', 1);
+                    updateActiveRow('side', chooseSide());
+                    setCurrentPage('FirstServe');  
+                }
+                else {
+                        updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                        updateActiveRow('serverName', data.table[0]['serverName']);
+                        updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                        updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
+                        updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
+                        updateActiveRow('isPointStart', 1);
+                        updateActiveRow('shotInRally', 1);
+                        updateActiveRow('side', chooseSide());
+                        setCurrentPage('FirstServe');  
+                } 
             }   
         }
             }   
diff --git a/package-lock.json b/package-lock.json
index 6733f95..69adf4f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,8 @@
         "next": "^14.1.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-select": "^5.8.0"
+        "react-select": "^5.8.0",
+        "youtube-captions-scraper": "^2.0.3"
       },
       "devDependencies": {
         "eslint": "^8",
@@ -1718,6 +1719,11 @@
       "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
       "dev": true
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -1742,6 +1748,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -1934,6 +1950,17 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2093,6 +2120,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -2914,6 +2949,25 @@
       "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -2939,6 +2993,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3247,6 +3314,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "bin": {
+        "he": "bin/he"
+      }
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -3856,6 +3931,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "node_modules/lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -3919,6 +3999,25 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -4376,6 +4475,11 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -5001,6 +5105,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/striptags": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/striptags/-/striptags-3.2.0.tgz",
+      "integrity": "sha512-g45ZOGzHDMe2bdYMdIvdAfCQkCTDMGBazSw1ypMowwGIee7ZQ5dU0rBJ8Jqgl+jAKIv4dbeE1jscZq9wid1Tkw=="
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
@@ -5570,6 +5679,17 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/youtube-captions-scraper": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/youtube-captions-scraper/-/youtube-captions-scraper-2.0.3.tgz",
+      "integrity": "sha512-XT6U5wFq35P5G99M+2uwNzJFkmGUrb38u8lMMQkv9PpfTOtG8Lpotka7jEqbDnQBshDw6/hgLQV597/tldiyUg==",
+      "dependencies": {
+        "axios": "^1.6.7",
+        "he": "^1.1.1",
+        "lodash": "^4.17.4",
+        "striptags": "^3.1.0"
+      }
     }
   },
   "dependencies": {
@@ -5719,17 +5839,17 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz",
-      "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==",
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.0.tgz",
+      "integrity": "sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==",
       "requires": {
         "regenerator-runtime": "^0.14.0"
       }
     },
     "@babel/types": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz",
-      "integrity": "sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==",
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz",
+      "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
       "requires": {
         "@babel/helper-string-parser": "^7.23.4",
         "@babel/helper-validator-identifier": "^7.22.20",
@@ -5862,15 +5982,15 @@
       }
     },
     "@eslint/js": {
-      "version": "8.56.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.56.0.tgz",
-      "integrity": "sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==",
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
+      "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
       "dev": true
     },
     "@fastify/busboy": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.0.tgz",
-      "integrity": "sha512-+KpH+QxZU7O4675t3mnkQKcZZg56u+K/Ct2K+N2AZYNVK8kyeo/bI18tI8aPm3tvNNRyTWfj6s5tnGNlcbQRsA=="
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.1.tgz",
+      "integrity": "sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA=="
     },
     "@firebase/analytics": {
       "version": "0.10.1",
@@ -5902,9 +6022,9 @@
       "integrity": "sha512-iRP+QKI2+oz3UAh4nPEq14CsEjrjD6a5+fuypjScisAh9kXKFvdJOZJDwk7kikLvWVLGEs9+kIUS4LPQV7VZVw=="
     },
     "@firebase/app": {
-      "version": "0.9.27",
-      "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.9.27.tgz",
-      "integrity": "sha512-p2Dvl1ge4kRsyK5+wWcmdAIE9MSwZ0pDKAYB51LZgZuz6wciUZk4E1yAEdkfQlRxuHehn+Ol9WP5Qk2XQZiHGg==",
+      "version": "0.9.29",
+      "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.9.29.tgz",
+      "integrity": "sha512-HbKTjfmILklasIu/ij6zKnFf3SgLYXkBDVN7leJfVGmohl+zA7Ig+eXM1ZkT1pyBJ8FTYR+mlOJer/lNEnUCtw==",
       "requires": {
         "@firebase/component": "0.6.5",
         "@firebase/logger": "0.4.0",
@@ -5948,11 +6068,11 @@
       "integrity": "sha512-uwSUj32Mlubybw7tedRzR24RP8M8JUVR3NPiMk3/Z4bCmgEKTlQBwMXrehDAZ2wF+TsBq0SN1c6ema71U/JPyQ=="
     },
     "@firebase/app-compat": {
-      "version": "0.2.27",
-      "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.2.27.tgz",
-      "integrity": "sha512-SYlqocfUDKPHR6MSFC8hree0BTiWFu5o8wbf6zFlYXyG41w7TcHp4wJi4H/EL5V6cM4kxwruXTJtqXX/fRAZtw==",
+      "version": "0.2.29",
+      "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.2.29.tgz",
+      "integrity": "sha512-NqUdegXJfwphx9i/2bOE2CTZ55TC9bbDg+iwkxVShsPBJhD3CzQJkFhoDz4ccfbJaKZGsqjY3fisgX5kbDROnA==",
       "requires": {
-        "@firebase/app": "0.9.27",
+        "@firebase/app": "0.9.29",
         "@firebase/component": "0.6.5",
         "@firebase/logger": "0.4.0",
         "@firebase/util": "1.9.4",
@@ -5965,28 +6085,28 @@
       "integrity": "sha512-AeweANOIo0Mb8GiYm3xhTEBVCmPwTYAu9Hcd2qSkLuga/6+j9b1Jskl5bpiSQWy9eJ/j5pavxj6eYogmnuzm+Q=="
     },
     "@firebase/auth": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-1.6.0.tgz",
-      "integrity": "sha512-Qhl35eJTV6BwvuueTPCY6x8kUlYyzALtjp/Ws0X3fw3AnjVVfuVb7oQ3Xh5VPVfMFhaIuUAd1KXwcAuIklkSDw==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-1.6.2.tgz",
+      "integrity": "sha512-BFo/Nj1AAbKLbFiUyXCcnT/bSqMJicFOgdTAKzlXvCul7+eUE29vWmzd1g59O3iKAxvv3+fbQYjQVJpNTTHIyw==",
       "requires": {
         "@firebase/component": "0.6.5",
         "@firebase/logger": "0.4.0",
         "@firebase/util": "1.9.4",
         "tslib": "^2.1.0",
-        "undici": "5.26.5"
+        "undici": "5.28.3"
       }
     },
     "@firebase/auth-compat": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/@firebase/auth-compat/-/auth-compat-0.5.2.tgz",
-      "integrity": "sha512-pRgje5BPCNR1vXyvGOVXwOHtv88A2WooXfklI8sV7/jWi03ExFqNfpJT26GUo/oD39NoKJ3Kt6rD5gVvdV7lMw==",
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-compat/-/auth-compat-0.5.4.tgz",
+      "integrity": "sha512-EtRVW9s0YsuJv3GnOGDoLUW3Pp9f3HcqWA2WK92E30Qa0FEVRwCSRLVQwn9td+SLVY3AP9gi/auC1q3osd4yCg==",
       "requires": {
-        "@firebase/auth": "1.6.0",
+        "@firebase/auth": "1.6.2",
         "@firebase/auth-types": "0.12.0",
         "@firebase/component": "0.6.5",
         "@firebase/util": "1.9.4",
         "tslib": "^2.1.0",
-        "undici": "5.26.5"
+        "undici": "5.28.3"
       }
     },
     "@firebase/auth-interop-types": {
@@ -6046,9 +6166,9 @@
       }
     },
     "@firebase/firestore": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-4.4.2.tgz",
-      "integrity": "sha512-YaX6ypa/RzU6OkxzUQlpSxwhOIWdTraCNz7sMsbaSEjjl/pj/QvX6TqjkdWGzuBYh2S6rz7ErhDO0g39oZZw/g==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-4.5.0.tgz",
+      "integrity": "sha512-rXS6v4HbsN6vZQlq2fLW1ZHb+J5SnS+8Zqb/McbKFIrGYjPUZo5CyO75mkgtlR1tCYAwCebaqoEWb6JHgZv/ww==",
       "requires": {
         "@firebase/component": "0.6.5",
         "@firebase/logger": "0.4.0",
@@ -6057,16 +6177,16 @@
         "@grpc/grpc-js": "~1.9.0",
         "@grpc/proto-loader": "^0.7.8",
         "tslib": "^2.1.0",
-        "undici": "5.26.5"
+        "undici": "5.28.3"
       }
     },
     "@firebase/firestore-compat": {
-      "version": "0.3.25",
-      "resolved": "https://registry.npmjs.org/@firebase/firestore-compat/-/firestore-compat-0.3.25.tgz",
-      "integrity": "sha512-+xI7WmsgZCBhMn/+uhDKcg+lsOUJ9FJyt5PGTzkFPbCsozWfeQZ7eVnfPh0rMkUOf0yIQ924RIe04gwvEIbcoQ==",
+      "version": "0.3.27",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-compat/-/firestore-compat-0.3.27.tgz",
+      "integrity": "sha512-gY2q0fCDJvPg/IurZQbBM7MIVjxA1/LsvfgFOubUTrex5KTY9qm4/2V2R79eAs8Q+b4B8soDtlEjk6L8BW1Crw==",
       "requires": {
         "@firebase/component": "0.6.5",
-        "@firebase/firestore": "4.4.2",
+        "@firebase/firestore": "4.5.0",
         "@firebase/firestore-types": "3.0.0",
         "@firebase/util": "1.9.4",
         "tslib": "^2.1.0"
@@ -6079,9 +6199,9 @@
       "requires": {}
     },
     "@firebase/functions": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/@firebase/functions/-/functions-0.11.1.tgz",
-      "integrity": "sha512-3uUa1hB79Gmy6E1gHTfzoHeZolBeHc/I/n3+lOCDe6BOos9AHmzRjKygcFE/7VA2FJjitCE0K+OHI6+OuoY8fQ==",
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/@firebase/functions/-/functions-0.11.2.tgz",
+      "integrity": "sha512-2NULTYOZbu0rXczwfYdqQH0w1FmmYrKjTy1YPQSHLCAkMBdfewoKmVm4Lyo2vRn0H9ZndciLY7NszKDFt9MKCQ==",
       "requires": {
         "@firebase/app-check-interop-types": "0.3.0",
         "@firebase/auth-interop-types": "0.2.1",
@@ -6089,16 +6209,16 @@
         "@firebase/messaging-interop-types": "0.2.0",
         "@firebase/util": "1.9.4",
         "tslib": "^2.1.0",
-        "undici": "5.26.5"
+        "undici": "5.28.3"
       }
     },
     "@firebase/functions-compat": {
-      "version": "0.3.7",
-      "resolved": "https://registry.npmjs.org/@firebase/functions-compat/-/functions-compat-0.3.7.tgz",
-      "integrity": "sha512-uXe6Kmku5lNogp3OpPBcOJbSvnaCOn+YxS3zlXKNU6Q/NLwcvO3RY1zwYyctCos2RemEw3KEQ7YdzcECXjHWLw==",
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/@firebase/functions-compat/-/functions-compat-0.3.8.tgz",
+      "integrity": "sha512-VDHSw6UOu8RxfgAY/q8e+Jn+9Fh60Fc28yck0yfMsi2e0BiWgonIMWkFspFGGLgOJebTHl+hc+9v91rhzU6xlg==",
       "requires": {
         "@firebase/component": "0.6.5",
-        "@firebase/functions": "0.11.1",
+        "@firebase/functions": "0.11.2",
         "@firebase/functions-types": "0.6.0",
         "@firebase/util": "1.9.4",
         "tslib": "^2.1.0"
@@ -6236,23 +6356,23 @@
       "integrity": "sha512-RtEH4vdcbXZuZWRZbIRmQVBNsE7VDQpet2qFvq6vwKLBIQRQR5Kh58M4ok3A3US8Sr3rubYnaGqZSurCwI8uMA=="
     },
     "@firebase/storage": {
-      "version": "0.12.1",
-      "resolved": "https://registry.npmjs.org/@firebase/storage/-/storage-0.12.1.tgz",
-      "integrity": "sha512-KJ5NV7FUh54TeTlEjdkTTX60ciCKOp9EqlbLnpdcXUYRJg0Z4810TXbilPc1z7fTIG4iPjtdi95bGE9n4dBX8A==",
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/@firebase/storage/-/storage-0.12.2.tgz",
+      "integrity": "sha512-MzanOBcxDx9oOwDaDPMuiYxd6CxcN1xZm+os5uNE3C1itbRKLhM9rzpODDKWzcbnHHFtXk3Q3lsK/d3Xa1WYYw==",
       "requires": {
         "@firebase/component": "0.6.5",
         "@firebase/util": "1.9.4",
         "tslib": "^2.1.0",
-        "undici": "5.26.5"
+        "undici": "5.28.3"
       }
     },
     "@firebase/storage-compat": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@firebase/storage-compat/-/storage-compat-0.3.4.tgz",
-      "integrity": "sha512-Y0m5e2gS/wB9Ioth2X/Sgz76vcxvqgQrCmfa9qwhss/N31kxY2Gks6Frv0nrE18AjVfcSmcfDitqUwxcMOTRSg==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@firebase/storage-compat/-/storage-compat-0.3.5.tgz",
+      "integrity": "sha512-5dJXfY5NxCF5NAk4dLvJqC+m6cgcf0Fr29nrMHwhwI34pBheQq2PdRZqALsqZCES9dnHTuFNlqGQDpLr+Ph4rw==",
       "requires": {
         "@firebase/component": "0.6.5",
-        "@firebase/storage": "0.12.1",
+        "@firebase/storage": "0.12.2",
         "@firebase/storage-types": "0.8.0",
         "@firebase/util": "1.9.4",
         "tslib": "^2.1.0"
@@ -6374,9 +6494,9 @@
       }
     },
     "@next/env": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.0.tgz",
-      "integrity": "sha512-Py8zIo+02ht82brwwhTg36iogzFqGLPXlRGKQw5s+qP/kMNc4MAyDeEwBKDijk6zTIbegEgu8Qy7C1LboslQAw=="
+      "version": "14.1.3",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.3.tgz",
+      "integrity": "sha512-VhgXTvrgeBRxNPjyfBsDIMvgsKDxjlpw4IAUsHCX8Gjl1vtHUYRT3+xfQ/wwvLPDd/6kqfLqk9Pt4+7gysuCKQ=="
     },
     "@next/eslint-plugin-next": {
       "version": "14.1.0",
@@ -6388,57 +6508,57 @@
       }
     },
     "@next/swc-darwin-arm64": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.1.0.tgz",
-      "integrity": "sha512-nUDn7TOGcIeyQni6lZHfzNoo9S0euXnu0jhsbMOmMJUBfgsnESdjN97kM7cBqQxZa8L/bM9om/S5/1dzCrW6wQ==",
+      "version": "14.1.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.1.3.tgz",
+      "integrity": "sha512-LALu0yIBPRiG9ANrD5ncB3pjpO0Gli9ZLhxdOu6ZUNf3x1r3ea1rd9Q+4xxUkGrUXLqKVK9/lDkpYIJaCJ6AHQ==",
       "optional": true
     },
     "@next/swc-darwin-x64": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.1.0.tgz",
-      "integrity": "sha512-1jgudN5haWxiAl3O1ljUS2GfupPmcftu2RYJqZiMJmmbBT5M1XDffjUtRUzP4W3cBHsrvkfOFdQ71hAreNQP6g==",
+      "version": "14.1.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.1.3.tgz",
+      "integrity": "sha512-E/9WQeXxkqw2dfcn5UcjApFgUq73jqNKaE5bysDm58hEUdUGedVrnRhblhJM7HbCZNhtVl0j+6TXsK0PuzXTCg==",
       "optional": true
     },
     "@next/swc-linux-arm64-gnu": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.1.0.tgz",
-      "integrity": "sha512-RHo7Tcj+jllXUbK7xk2NyIDod3YcCPDZxj1WLIYxd709BQ7WuRYl3OWUNG+WUfqeQBds6kvZYlc42NJJTNi4tQ==",
+      "version": "14.1.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.1.3.tgz",
+      "integrity": "sha512-USArX9B+3rZSXYLFvgy0NVWQgqh6LHWDmMt38O4lmiJNQcwazeI6xRvSsliDLKt+78KChVacNiwvOMbl6g6BBw==",
       "optional": true
     },
     "@next/swc-linux-arm64-musl": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.1.0.tgz",
-      "integrity": "sha512-v6kP8sHYxjO8RwHmWMJSq7VZP2nYCkRVQ0qolh2l6xroe9QjbgV8siTbduED4u0hlk0+tjS6/Tuy4n5XCp+l6g==",
+      "version": "14.1.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.1.3.tgz",
+      "integrity": "sha512-esk1RkRBLSIEp1qaQXv1+s6ZdYzuVCnDAZySpa62iFTMGTisCyNQmqyCTL9P+cLJ4N9FKCI3ojtSfsyPHJDQNw==",
       "optional": true
     },
     "@next/swc-linux-x64-gnu": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.1.0.tgz",
-      "integrity": "sha512-zJ2pnoFYB1F4vmEVlb/eSe+VH679zT1VdXlZKX+pE66grOgjmKJHKacf82g/sWE4MQ4Rk2FMBCRnX+l6/TVYzQ==",
+      "version": "14.1.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.1.3.tgz",
+      "integrity": "sha512-8uOgRlYEYiKo0L8YGeS+3TudHVDWDjPVDUcST+z+dUzgBbTEwSSIaSgF/vkcC1T/iwl4QX9iuUyUdQEl0Kxalg==",
       "optional": true
     },
     "@next/swc-linux-x64-musl": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.1.0.tgz",
-      "integrity": "sha512-rbaIYFt2X9YZBSbH/CwGAjbBG2/MrACCVu2X0+kSykHzHnYH5FjHxwXLkcoJ10cX0aWCEynpu+rP76x0914atg==",
+      "version": "14.1.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.1.3.tgz",
+      "integrity": "sha512-DX2zqz05ziElLoxskgHasaJBREC5Y9TJcbR2LYqu4r7naff25B4iXkfXWfcp69uD75/0URmmoSgT8JclJtrBoQ==",
       "optional": true
     },
     "@next/swc-win32-arm64-msvc": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.1.0.tgz",
-      "integrity": "sha512-o1N5TsYc8f/HpGt39OUQpQ9AKIGApd3QLueu7hXk//2xq5Z9OxmV6sQfNp8C7qYmiOlHYODOGqNNa0e9jvchGQ==",
+      "version": "14.1.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.1.3.tgz",
+      "integrity": "sha512-HjssFsCdsD4GHstXSQxsi2l70F/5FsRTRQp8xNgmQs15SxUfUJRvSI9qKny/jLkY3gLgiCR3+6A7wzzK0DBlfA==",
       "optional": true
     },
     "@next/swc-win32-ia32-msvc": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.1.0.tgz",
-      "integrity": "sha512-XXIuB1DBRCFwNO6EEzCTMHT5pauwaSj4SWs7CYnME57eaReAKBXCnkUE80p/pAZcewm7hs+vGvNqDPacEXHVkw==",
+      "version": "14.1.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.1.3.tgz",
+      "integrity": "sha512-DRuxD5axfDM1/Ue4VahwSxl1O5rn61hX8/sF0HY8y0iCbpqdxw3rB3QasdHn/LJ6Wb2y5DoWzXcz3L1Cr+Thrw==",
       "optional": true
     },
     "@next/swc-win32-x64-msvc": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.1.0.tgz",
-      "integrity": "sha512-9WEbVRRAqJ3YFVqEZIxUqkiO8l1nool1LmNxygr5HWF8AcSYsEpneUDhmjUVJEzO2A04+oPtZdombzzPPkTtgg==",
+      "version": "14.1.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.1.3.tgz",
+      "integrity": "sha512-uC2DaDoWH7h1P/aJ4Fok3Xiw6P0Lo4ez7NbowW2VGNXw/Xv6tOuLUcxhBYZxsSUJtpeknCi8/fvnSpyCFp4Rcg==",
       "optional": true
     },
     "@nodelib/fs.scandir": {
@@ -6549,9 +6669,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "20.11.21",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.21.tgz",
-      "integrity": "sha512-/ySDLGscFPNasfqStUuWWPfL78jompfIoVzLJPVVAHBh6rpG68+pI2Gk+fNLeI8/f1yPYL4s46EleVIc20F1Ow==",
+      "version": "20.11.28",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.28.tgz",
+      "integrity": "sha512-M/GPWVS2wLkSkNHVeLkrF2fD5Lx5UC4PxA0uZcKc6QqbIQUJyW1jVjueJYi1z8n0I5PxYrtpnPnWglE+y9A0KA==",
       "requires": {
         "undici-types": "~5.26.4"
       }
@@ -6567,9 +6687,9 @@
       "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
     },
     "@types/react": {
-      "version": "18.2.60",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.60.tgz",
-      "integrity": "sha512-dfiPj9+k20jJrLGOu9Nf6eqxm2EyJRrq2NvwOFsfbb7sFExZ9WELPs67UImHj3Ayxg8ruTtKtNnbjaF8olPq0A==",
+      "version": "18.2.66",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.66.tgz",
+      "integrity": "sha512-OYTmMI4UigXeFMF/j4uv0lBBEbongSgptPrHBxqME44h9+yNov+oL6Z3ocJKo0WyXR84sQUNeyIp9MRfckvZpg==",
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -6765,6 +6885,19 @@
         "is-string": "^1.0.7"
       }
     },
+    "array.prototype.findlast": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.4.tgz",
+      "integrity": "sha512-BMtLxpV+8BD+6ZPFIWmnUBpQoy+A+ujcg4rhp2iwCRJYA7PEh2MS4NL3lz8EiDlLrJPp2hg9qWihr5pd//jcGw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.22.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      }
+    },
     "array.prototype.findlastindex": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.4.tgz",
@@ -6802,6 +6935,18 @@
         "es-shim-unscopables": "^1.0.0"
       }
     },
+    "array.prototype.toreversed": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.toreversed/-/array.prototype.toreversed-1.1.2.tgz",
+      "integrity": "sha512-wwDCoT4Ck4Cz7sLtgUmzR5UV3YF5mFHUlbChCzZBQZ+0m2cl/DH3tKgvphv1nKgFsJ48oCSg6p91q2Vm0I/ZMA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0"
+      }
+    },
     "array.prototype.tosorted": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.3.tgz",
@@ -6837,14 +6982,10 @@
       "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
       "dev": true
     },
-    "asynciterator.prototype": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/asynciterator.prototype/-/asynciterator.prototype-1.0.0.tgz",
-      "integrity": "sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==",
-      "dev": true,
-      "requires": {
-        "has-symbols": "^1.0.3"
-      }
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "available-typed-arrays": {
       "version": "1.0.7",
@@ -6861,6 +7002,16 @@
       "integrity": "sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==",
       "dev": true
     },
+    "axios": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "requires": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -6932,9 +7083,9 @@
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
     },
     "caniuse-lite": {
-      "version": "1.0.30001588",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001588.tgz",
-      "integrity": "sha512-+hVY9jE44uKLkH0SrUTqxjxqNTOWHsbnQDIKjwkZ3lNTzUUVdBLBGXtj/q5Mp5u98r3droaZAewQuEDzjQdZlQ=="
+      "version": "1.0.30001597",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001597.tgz",
+      "integrity": "sha512-7LjJvmQU6Sj7bL0j5b5WY/3n7utXUJvAe1lxhsHDbLmwX9mdL86Yjtr+5SRCyf8qME4M7pU2hswj0FpyBVCv9w=="
     },
     "chalk": {
       "version": "4.1.2",
@@ -7001,6 +7152,14 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -7046,6 +7205,39 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
+    "data-view-buffer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
+      "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      }
+    },
+    "data-view-byte-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz",
+      "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      }
+    },
+    "data-view-byte-offset": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz",
+      "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      }
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -7083,6 +7275,11 @@
         "object-keys": "^1.1.1"
       }
     },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
     "dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -7129,9 +7326,9 @@
       "dev": true
     },
     "enhanced-resolve": {
-      "version": "5.15.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz",
-      "integrity": "sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==",
+      "version": "5.16.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz",
+      "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==",
       "dev": true,
       "requires": {
         "graceful-fs": "^4.2.4",
@@ -7147,18 +7344,21 @@
       }
     },
     "es-abstract": {
-      "version": "1.22.4",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.4.tgz",
-      "integrity": "sha512-vZYJlk2u6qHYxBOTjAeg7qUxHdNfih64Uu2J8QqWgXZ2cri0ZpJAkzDUK/q593+mvKwlxyaxr6F1Q+3LKoQRgg==",
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.0.tgz",
+      "integrity": "sha512-vmuE7Uoevk2xkwu5Gwa7RfJk/ebVV6xRv7KuZNbUglmJHhWPMbLL20ztreVpBbdxBZijETx3Aml3NssX4SFMvQ==",
       "dev": true,
       "requires": {
         "array-buffer-byte-length": "^1.0.1",
         "arraybuffer.prototype.slice": "^1.0.3",
-        "available-typed-arrays": "^1.0.6",
+        "available-typed-arrays": "^1.0.7",
         "call-bind": "^1.0.7",
+        "data-view-buffer": "^1.0.1",
+        "data-view-byte-length": "^1.0.0",
+        "data-view-byte-offset": "^1.0.0",
         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
-        "es-set-tostringtag": "^2.0.2",
+        "es-set-tostringtag": "^2.0.3",
         "es-to-primitive": "^1.2.1",
         "function.prototype.name": "^1.1.6",
         "get-intrinsic": "^1.2.4",
@@ -7166,15 +7366,16 @@
         "globalthis": "^1.0.3",
         "gopd": "^1.0.1",
         "has-property-descriptors": "^1.0.2",
-        "has-proto": "^1.0.1",
+        "has-proto": "^1.0.3",
         "has-symbols": "^1.0.3",
         "hasown": "^2.0.1",
         "internal-slot": "^1.0.7",
         "is-array-buffer": "^3.0.4",
         "is-callable": "^1.2.7",
-        "is-negative-zero": "^2.0.2",
+        "is-data-view": "^1.0.1",
+        "is-negative-zero": "^2.0.3",
         "is-regex": "^1.1.4",
-        "is-shared-array-buffer": "^1.0.2",
+        "is-shared-array-buffer": "^1.0.3",
         "is-string": "^1.0.7",
         "is-typed-array": "^1.1.13",
         "is-weakref": "^1.0.2",
@@ -7187,10 +7388,10 @@
         "string.prototype.trim": "^1.2.8",
         "string.prototype.trimend": "^1.0.7",
         "string.prototype.trimstart": "^1.0.7",
-        "typed-array-buffer": "^1.0.1",
-        "typed-array-byte-length": "^1.0.0",
-        "typed-array-byte-offset": "^1.0.0",
-        "typed-array-length": "^1.0.4",
+        "typed-array-buffer": "^1.0.2",
+        "typed-array-byte-length": "^1.0.1",
+        "typed-array-byte-offset": "^1.0.2",
+        "typed-array-length": "^1.0.5",
         "unbox-primitive": "^1.0.2",
         "which-typed-array": "^1.1.14"
       }
@@ -7217,26 +7418,25 @@
       "dev": true
     },
     "es-iterator-helpers": {
-      "version": "1.0.17",
-      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.17.tgz",
-      "integrity": "sha512-lh7BsUqelv4KUbR5a/ZTaGGIMLCjPGPqJ6q+Oq24YP0RdyptX1uzm4vvaqzk7Zx3bpl/76YLTTDj9L7uYQ92oQ==",
+      "version": "1.0.18",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.18.tgz",
+      "integrity": "sha512-scxAJaewsahbqTYrGKJihhViaM6DDZDDoucfvzNbK0pOren1g/daDQ3IAhzn+1G14rBG7w+i5N+qul60++zlKA==",
       "dev": true,
       "requires": {
-        "asynciterator.prototype": "^1.0.0",
         "call-bind": "^1.0.7",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.22.4",
+        "es-abstract": "^1.23.0",
         "es-errors": "^1.3.0",
-        "es-set-tostringtag": "^2.0.2",
+        "es-set-tostringtag": "^2.0.3",
         "function-bind": "^1.1.2",
         "get-intrinsic": "^1.2.4",
         "globalthis": "^1.0.3",
         "has-property-descriptors": "^1.0.2",
-        "has-proto": "^1.0.1",
+        "has-proto": "^1.0.3",
         "has-symbols": "^1.0.3",
         "internal-slot": "^1.0.7",
         "iterator.prototype": "^1.1.2",
-        "safe-array-concat": "^1.1.0"
+        "safe-array-concat": "^1.1.2"
       }
     },
     "es-set-tostringtag": {
@@ -7281,16 +7481,16 @@
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
     },
     "eslint": {
-      "version": "8.56.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.56.0.tgz",
-      "integrity": "sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==",
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
+      "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
       "dev": true,
       "requires": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
         "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.56.0",
-        "@humanwhocodes/config-array": "^0.11.13",
+        "@eslint/js": "8.57.0",
+        "@humanwhocodes/config-array": "^0.11.14",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
         "@ungap/structured-clone": "^1.2.0",
@@ -7381,9 +7581,9 @@
       }
     },
     "eslint-module-utils": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.8.0.tgz",
-      "integrity": "sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.8.1.tgz",
+      "integrity": "sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==",
       "dev": true,
       "requires": {
         "debug": "^3.2.7"
@@ -7476,27 +7676,29 @@
       }
     },
     "eslint-plugin-react": {
-      "version": "7.33.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz",
-      "integrity": "sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==",
+      "version": "7.34.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.34.1.tgz",
+      "integrity": "sha512-N97CxlouPT1AHt8Jn0mhhN2RrADlUAsk1/atcT2KyA/l9Q/E6ll7OIGwNumFmWfZ9skV3XXccYS19h80rHtgkw==",
       "dev": true,
       "requires": {
-        "array-includes": "^3.1.6",
-        "array.prototype.flatmap": "^1.3.1",
-        "array.prototype.tosorted": "^1.1.1",
+        "array-includes": "^3.1.7",
+        "array.prototype.findlast": "^1.2.4",
+        "array.prototype.flatmap": "^1.3.2",
+        "array.prototype.toreversed": "^1.1.2",
+        "array.prototype.tosorted": "^1.1.3",
         "doctrine": "^2.1.0",
-        "es-iterator-helpers": "^1.0.12",
+        "es-iterator-helpers": "^1.0.17",
         "estraverse": "^5.3.0",
         "jsx-ast-utils": "^2.4.1 || ^3.0.0",
         "minimatch": "^3.1.2",
-        "object.entries": "^1.1.6",
-        "object.fromentries": "^2.0.6",
-        "object.hasown": "^1.1.2",
-        "object.values": "^1.1.6",
+        "object.entries": "^1.1.7",
+        "object.fromentries": "^2.0.7",
+        "object.hasown": "^1.1.3",
+        "object.values": "^1.1.7",
         "prop-types": "^15.8.1",
-        "resolve": "^2.0.0-next.4",
+        "resolve": "^2.0.0-next.5",
         "semver": "^6.3.1",
-        "string.prototype.matchall": "^4.0.8"
+        "string.prototype.matchall": "^4.0.10"
       },
       "dependencies": {
         "doctrine": {
@@ -7684,25 +7886,25 @@
       }
     },
     "firebase": {
-      "version": "10.8.0",
-      "resolved": "https://registry.npmjs.org/firebase/-/firebase-10.8.0.tgz",
-      "integrity": "sha512-UJpC24vw8JFuHEOQyArBGKTUd7+kohLISCzHyn0M/prP0KOTx2io1eyLliEid330QqnWI7FOlPxoU97qecCSfQ==",
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/firebase/-/firebase-10.9.0.tgz",
+      "integrity": "sha512-R8rDU3mg2dq0uPOoZ5Nc3BeZTbXxBPJS8HcZLtnV0f5/YrmpNsHngzmMHRVB+91T+ViJGVL/42dV23gS9w9ccw==",
       "requires": {
         "@firebase/analytics": "0.10.1",
         "@firebase/analytics-compat": "0.2.7",
-        "@firebase/app": "0.9.27",
+        "@firebase/app": "0.9.29",
         "@firebase/app-check": "0.8.2",
         "@firebase/app-check-compat": "0.3.9",
-        "@firebase/app-compat": "0.2.27",
+        "@firebase/app-compat": "0.2.29",
         "@firebase/app-types": "0.9.0",
-        "@firebase/auth": "1.6.0",
-        "@firebase/auth-compat": "0.5.2",
+        "@firebase/auth": "1.6.2",
+        "@firebase/auth-compat": "0.5.4",
         "@firebase/database": "1.0.3",
         "@firebase/database-compat": "1.0.3",
-        "@firebase/firestore": "4.4.2",
-        "@firebase/firestore-compat": "0.3.25",
-        "@firebase/functions": "0.11.1",
-        "@firebase/functions-compat": "0.3.7",
+        "@firebase/firestore": "4.5.0",
+        "@firebase/firestore-compat": "0.3.27",
+        "@firebase/functions": "0.11.2",
+        "@firebase/functions-compat": "0.3.8",
         "@firebase/installations": "0.6.5",
         "@firebase/installations-compat": "0.2.5",
         "@firebase/messaging": "0.12.6",
@@ -7711,8 +7913,8 @@
         "@firebase/performance-compat": "0.2.5",
         "@firebase/remote-config": "0.4.5",
         "@firebase/remote-config-compat": "0.2.5",
-        "@firebase/storage": "0.12.1",
-        "@firebase/storage-compat": "0.3.4",
+        "@firebase/storage": "0.12.2",
+        "@firebase/storage-compat": "0.3.5",
         "@firebase/util": "1.9.4"
       }
     },
@@ -7728,11 +7930,16 @@
       }
     },
     "flatted": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.0.tgz",
-      "integrity": "sha512-noqGuLw158+DuD9UPRKHpJ2hGxpFyDlYYrfM0mWt4XhT4n0lwzTLh70Tkdyy4kyTmyTT9Bv7bWAJqw7cgkEXDg==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
+      "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
       "dev": true
     },
+    "follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA=="
+    },
     "for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -7752,6 +7959,16 @@
         "signal-exit": "^4.0.1"
       }
     },
+    "form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -7811,9 +8028,9 @@
       }
     },
     "get-tsconfig": {
-      "version": "4.7.2",
-      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.2.tgz",
-      "integrity": "sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==",
+      "version": "4.7.3",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.3.tgz",
+      "integrity": "sha512-ZvkrzoUA0PQZM6fy6+/Hce561s+faD1rsNwhnO5FelNjyy7EMGJ3Rz1AQ8GYDWjhRs/7dBLOEJvhK8MiEJOAFg==",
       "dev": true,
       "requires": {
         "resolve-pkg-maps": "^1.0.0"
@@ -7956,13 +8173,18 @@
       }
     },
     "hasown": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.1.tgz",
-      "integrity": "sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
       "requires": {
         "function-bind": "^1.1.2"
       }
     },
+    "he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
+    },
     "hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -8086,6 +8308,15 @@
         "hasown": "^2.0.0"
       }
     },
+    "is-data-view": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.1.tgz",
+      "integrity": "sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==",
+      "dev": true,
+      "requires": {
+        "is-typed-array": "^1.1.13"
+      }
+    },
     "is-date-object": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
@@ -8134,9 +8365,9 @@
       }
     },
     "is-map": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
-      "integrity": "sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
       "dev": true
     },
     "is-negative-zero": {
@@ -8177,18 +8408,18 @@
       }
     },
     "is-set": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.2.tgz",
-      "integrity": "sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
       "dev": true
     },
     "is-shared-array-buffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
-      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.2"
+        "call-bind": "^1.0.7"
       }
     },
     "is-string": {
@@ -8219,9 +8450,9 @@
       }
     },
     "is-weakmap": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
-      "integrity": "sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
       "dev": true
     },
     "is-weakref": {
@@ -8234,13 +8465,13 @@
       }
     },
     "is-weakset": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.2.tgz",
-      "integrity": "sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.3.tgz",
+      "integrity": "sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.1"
+        "call-bind": "^1.0.7",
+        "get-intrinsic": "^1.2.4"
       }
     },
     "isarray": {
@@ -8384,6 +8615,11 @@
         "p-locate": "^5.0.0"
       }
     },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -8435,6 +8671,19 @@
         "picomatch": "^2.3.1"
       }
     },
+    "mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
+    },
+    "mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "requires": {
+        "mime-db": "1.52.0"
+      }
+    },
     "minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -8474,20 +8723,20 @@
       "dev": true
     },
     "next": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/next/-/next-14.1.0.tgz",
-      "integrity": "sha512-wlzrsbfeSU48YQBjZhDzOwhWhGsy+uQycR8bHAOt1LY1bn3zZEcDyHQOEoN3aWzQ8LHCAJ1nqrWCc9XF2+O45Q==",
-      "requires": {
-        "@next/env": "14.1.0",
-        "@next/swc-darwin-arm64": "14.1.0",
-        "@next/swc-darwin-x64": "14.1.0",
-        "@next/swc-linux-arm64-gnu": "14.1.0",
-        "@next/swc-linux-arm64-musl": "14.1.0",
-        "@next/swc-linux-x64-gnu": "14.1.0",
-        "@next/swc-linux-x64-musl": "14.1.0",
-        "@next/swc-win32-arm64-msvc": "14.1.0",
-        "@next/swc-win32-ia32-msvc": "14.1.0",
-        "@next/swc-win32-x64-msvc": "14.1.0",
+      "version": "14.1.3",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.1.3.tgz",
+      "integrity": "sha512-oexgMV2MapI0UIWiXKkixF8J8ORxpy64OuJ/J9oVUmIthXOUCcuVEZX+dtpgq7wIfIqtBwQsKEDXejcjTsan9g==",
+      "requires": {
+        "@next/env": "14.1.3",
+        "@next/swc-darwin-arm64": "14.1.3",
+        "@next/swc-darwin-x64": "14.1.3",
+        "@next/swc-linux-arm64-gnu": "14.1.3",
+        "@next/swc-linux-arm64-musl": "14.1.3",
+        "@next/swc-linux-x64-gnu": "14.1.3",
+        "@next/swc-linux-x64-musl": "14.1.3",
+        "@next/swc-win32-arm64-msvc": "14.1.3",
+        "@next/swc-win32-ia32-msvc": "14.1.3",
+        "@next/swc-win32-x64-msvc": "14.1.3",
         "@swc/helpers": "0.5.2",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001579",
@@ -8741,6 +8990,11 @@
         "long": "^5.0.0"
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -8901,13 +9155,13 @@
       }
     },
     "safe-array-concat": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.0.tgz",
-      "integrity": "sha512-ZdQ0Jeb9Ofti4hbt5lX3T2JcAamT9hfzYU1MNB+z/jaEbB6wfFfPIR/zEORmZqobkCCJhSjodobH6WHNmJ97dg==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.2.tgz",
+      "integrity": "sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.5",
-        "get-intrinsic": "^1.2.2",
+        "call-bind": "^1.0.7",
+        "get-intrinsic": "^1.2.4",
         "has-symbols": "^1.0.3",
         "isarray": "^2.0.5"
       }
@@ -8957,17 +9211,17 @@
       }
     },
     "set-function-length": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.1.tgz",
-      "integrity": "sha512-j4t6ccc+VsKwYHso+kElc5neZpjtq9EnRICFZtWyBsLojhmeF/ZBd/elqm22WJh/BziDe/SBiOeAt0m2mfLD0g==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
       "dev": true,
       "requires": {
-        "define-data-property": "^1.1.2",
+        "define-data-property": "^1.1.4",
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.3",
+        "get-intrinsic": "^1.2.4",
         "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.1"
+        "has-property-descriptors": "^1.0.2"
       }
     },
     "set-function-name": {
@@ -8998,12 +9252,12 @@
       "dev": true
     },
     "side-channel": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.5.tgz",
-      "integrity": "sha512-QcgiIWV4WV7qWExbN5llt6frQB/lBven9pqliLXfGPB+K9ZYXxDozp0wLkHS24kWCm+6YXH/f0HhnObZnZOBnQ==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.6",
+        "call-bind": "^1.0.7",
         "es-errors": "^1.3.0",
         "get-intrinsic": "^1.2.4",
         "object-inspect": "^1.13.1"
@@ -9162,6 +9416,11 @@
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true
     },
+    "striptags": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/striptags/-/striptags-3.2.0.tgz",
+      "integrity": "sha512-g45ZOGzHDMe2bdYMdIvdAfCQkCTDMGBazSw1ypMowwGIee7ZQ5dU0rBJ8Jqgl+jAKIv4dbeE1jscZq9wid1Tkw=="
+    },
     "styled-jsx": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
@@ -9216,9 +9475,9 @@
       }
     },
     "ts-api-utils": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.2.1.tgz",
-      "integrity": "sha512-RIYA36cJn2WiH9Hy77hdF9r7oEwxAtB/TS9/S4Qd90Ap4z5FSiin5zEiTL44OII1Y3IIlEvxwxFUVgrHSZ/UpA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
+      "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
       "dev": true,
       "requires": {}
     },
@@ -9266,15 +9525,16 @@
       }
     },
     "typed-array-byte-length": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz",
-      "integrity": "sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz",
+      "integrity": "sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.2",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
-        "has-proto": "^1.0.1",
-        "is-typed-array": "^1.1.10"
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
       }
     },
     "typed-array-byte-offset": {
@@ -9306,9 +9566,9 @@
       }
     },
     "typescript": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
-      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz",
+      "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==",
       "dev": true,
       "peer": true
     },
@@ -9325,9 +9585,9 @@
       }
     },
     "undici": {
-      "version": "5.26.5",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-5.26.5.tgz",
-      "integrity": "sha512-cSb4bPFd5qgR7qr2jYAi0hlX9n5YKK2ONKkLFkxl+v/9BvC0sOpZjBHDBSXc5lWAf5ty9oZdRXytBIHzgUcerw==",
+      "version": "5.28.3",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.28.3.tgz",
+      "integrity": "sha512-3ItfzbrhDlINjaP0duwnNsKpDQk3acHI3gVJ1z4fmwMK31k5G9OVIAMLSIaP6w4FaGkaAkN6zaQO9LUvZ1t7VA==",
       "requires": {
         "@fastify/busboy": "^2.0.0"
       }
@@ -9410,28 +9670,28 @@
       }
     },
     "which-collection": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.1.tgz",
-      "integrity": "sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
       "dev": true,
       "requires": {
-        "is-map": "^2.0.1",
-        "is-set": "^2.0.1",
-        "is-weakmap": "^2.0.1",
-        "is-weakset": "^2.0.1"
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
       }
     },
     "which-typed-array": {
-      "version": "1.1.14",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.14.tgz",
-      "integrity": "sha512-VnXFiIW8yNn9kIHN88xvZ4yOWchftKDsRJ8fEPacX/wl1lOvBrhsJ/OeJCXq7B0AaijRuqgzSKalJoPk+D8MPg==",
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
+      "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
       "dev": true,
       "requires": {
-        "available-typed-arrays": "^1.0.6",
-        "call-bind": "^1.0.5",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
         "gopd": "^1.0.1",
-        "has-tostringtag": "^1.0.1"
+        "has-tostringtag": "^1.0.2"
       }
     },
     "wrap-ansi": {
@@ -9561,6 +9821,17 @@
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "dev": true
+    },
+    "youtube-captions-scraper": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/youtube-captions-scraper/-/youtube-captions-scraper-2.0.3.tgz",
+      "integrity": "sha512-XT6U5wFq35P5G99M+2uwNzJFkmGUrb38u8lMMQkv9PpfTOtG8Lpotka7jEqbDnQBshDw6/hgLQV597/tldiyUg==",
+      "requires": {
+        "axios": "^1.6.7",
+        "he": "^1.1.1",
+        "lodash": "^4.17.4",
+        "striptags": "^3.1.0"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index a061778..4acdc57 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,8 @@
     "next": "^14.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-select": "^5.8.0"
+    "react-select": "^5.8.0",
+    "youtube-captions-scraper": "^2.0.3"
   },
   "devDependencies": {
     "eslint": "^8",

From bb538641ba535287518540fb84ed9bf97e26122e Mon Sep 17 00:00:00 2001
From: Leo Cardozo <leonardocardozo14@gmail.com>
Date: Fri, 10 May 2024 14:35:28 -0700
Subject: [PATCH 33/38] fixing bugs, added more automation

---
 app/services/taggerButtonData.js | 469 ++++++++++++++-----------------
 1 file changed, 213 insertions(+), 256 deletions(-)

diff --git a/app/services/taggerButtonData.js b/app/services/taggerButtonData.js
index fd1c980..986c787 100644
--- a/app/services/taggerButtonData.js
+++ b/app/services/taggerButtonData.js
@@ -38,8 +38,6 @@ var player1SetScore = 0;
 var player2SetScore = 0;
 var player1GameScore = 0;
 var player2GameScore = 0;
-var player1TiebreakScore = 0;
-var player2TiebreakScore = 0;
 
 function updateScore(shotInRally, isWinner, serverName) {
 if ((shotInRally % 2 == 0) &
@@ -199,38 +197,48 @@ function updateTiebreakScore(shotInRally, isWinner, serverName) {
     if ((shotInRally % 2 == 0) &
     isWinner == '1') {
         if (serverName == 'Player1') {
-            player2TiebreakScore += 1;
+            returnerScore += 1;
         }
         else {
-            player1TiebreakScore += 1;
+            serverScore += 1;
         }
     }
     else if ((shotInRally % 2 == 0)) {
         if (serverName == 'Player1') {
-            player1TiebreakScore += 1;
+            serverScore += 1;
         }
         else {
-            player2TiebreakScore += 1;
+            returnerScore += 1;
         }
     }
     else if ((shotInRally % 2 == 1) & 
     isWinner == '1') {
         if (serverName == 'Player1') {
-            player1TiebreakScore += 1;
+            serverScore += 1;
         }
         else {
-            player2TiebreakScore += 1;
+            returnerScore += 1;
         }
     }
     else  {
         if (serverName == 'Player1') {
-            player2TiebreakScore += 1;
+            returnerScore += 1;
         }
         else {
-            player1TiebreakScore += 1;
+            serverScore += 1;
         }
     }
 }
+function chooseTiebreakSide() {
+ if ((serverScore + returnerScore) % 2 == 0) {
+            return "Deuce";
+        }
+else
+        {
+            return "Ad";
+    }
+
+}
 // function endPoint() {
 //     if (serverScore == 40 && returnerScore == 40) {
 //         setCurrentPage('PointScore');
@@ -578,6 +586,24 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             }
         },
     ],
+    'ServerNameTiebreak': [
+        {
+            label: 'Player1',
+            action: () => {
+                addNewRow();
+                updateActiveRow('serverName', 'Player1');
+                setCurrentPage('ServerSideTiebreak')
+            }
+        },
+        {
+            label: 'Player2',
+            action: () => {
+                addNewRow();
+                updateActiveRow('serverName', 'Player2');
+                setCurrentPage('ServerSideTiebreak')
+            }
+        },
+    ],
     'ServerSide': [
         {
             label: 'NearSide',
@@ -608,210 +634,37 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             }
         },
     ],
+    'ServerSideTiebreak': [
+        {
+            label: 'NearSide',
+            action: () => {
+                updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                updateActiveRow('gameScore', data.table[data.activeRowIndex - 1]['gameScore']);
+                updateActiveRow('setScore', data.table[data.activeRowIndex - 1]['setScore']);
+                updateActiveRow('isPointStart', 1);
+                updateActiveRow('shotInRally', 1);
+                updateActiveRow('side', chooseTiebreakSide());
+                setCurrentPage('FirstServe');
+            }
+        },
+        {
+            label: 'FarSide',
+            action: () => {
+                updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                updateActiveRow('pointScore', serverScore + '-' + returnerScore);
+                updateActiveRow('gameScore', data.table[data.activeRowIndex - 1]['gameScore']);
+                updateActiveRow('setScore', data.table[data.activeRowIndex - 1]['setScore']);
+                updateActiveRow('isPointStart', 1);
+                updateActiveRow('shotInRally', 1);
+                updateActiveRow('side', chooseTiebreakSide());
+                setCurrentPage('FirstServe');
+            }
+        },
+    ],
     'PointScore': [
-        // {
-        //     label: '0-0',
-        //     action: (data) => {
-        //         addNewRow();
-        //         updateLastRow('pointScore', '0-0');
-        //         updateLastRow('gameScore', player1GameScore + '-' + player2GameScore);
-        //         updateLastRow('setScore', player1SetScore + '-' + player2SetScore);
-        //         updateLastRow('isPointStart', 1);
-        //         updateLastRow('shotInRally', 1);
-        //         updateLastRow('side', 'Deuce');
-        //         setCurrentPage('FirstServe');
-        //         console.log(data.table[data.table.length - 1]); // logs the last row of the table
-        //     }
-        // },
-        // {
-        //     label: '15-0',
-        //     action: () => {
-        //         addNewRow();
-        //         updateLastRow('pointScore', '15-0');
-        //         updateLastRow('gameScore', player1GameScore + '-' + player2GameScore);
-        //         updateLastRow('setScore', player1SetScore + '-' + player2SetScore);
-        //         updateLastRow('isPointStart', 1);
-        //         updateLastRow('shotInRally', 1);
-        //         updateLastRow('side', 'Ad');
-        //         setCurrentPage('FirstServe');
-        //     }
-        // },
-        // {
-        //     label: '30-0',
-        //     action: () => {
-        //         addNewRow();
-        //         updateLastRow('pointScore', '30-0');
-        //         updateLastRow('gameScore', player1GameScore + '-' + player2GameScore);
-        //         updateLastRow('setScore', player1SetScore + '-' + player2SetScore);
-        //         updateLastRow('isPointStart', 1);
-        //         updateLastRow('shotInRally', 1);
-        //         updateLastRow('side', 'Deuce');
-        //         setCurrentPage('FirstServe');
-        //     }
-        // },
-        // {
-        //     label: '40-0',
-        //     action: () => {
-        //         addNewRow();
-        //         updateLastRow('pointScore', '40-0');
-        //         updateLastRow('gameScore', player1GameScore + '-' + player2GameScore);
-        //         updateLastRow('setScore', player1SetScore + '-' + player2SetScore);
-        //         updateLastRow('isPointStart', 1);
-        //         updateLastRow('shotInRally', 1);
-        //         updateLastRow('side', 'Ad');
-        //         setCurrentPage('FirstServe');
-        //     }
-        // },
-        // // Add additional buttons based on the image
-        // {
-        //     label: '0-15',
-        //     action: () => {
-        //         addNewRow();
-        //         updateLastRow('pointScore', '0-15');
-        //         updateLastRow('gameScore', player1GameScore + '-' + player2GameScore);
-        //         updateLastRow('setScore', player1SetScore + '-' + player2SetScore);
-        //         updateLastRow('isPointStart', 1);
-        //         updateLastRow('shotInRally', 1);
-        //         updateLastRow('side', 'Ad');
-        //         setCurrentPage('FirstServe');
-        //     }
-        // },
-        // {
-        //     label: '15-15',
-        //     action: () => {
-        //         addNewRow();
-        //         updateLastRow('pointScore', '15-15');
-        //         updateLastRow('gameScore', player1GameScore + '-' + player2GameScore);
-        //         updateLastRow('setScore', player1SetScore + '-' + player2SetScore);
-        //         updateLastRow('isPointStart', 1);
-        //         updateLastRow('shotInRally', 1);
-        //         updateLastRow('side', 'Deuce');
-        //         setCurrentPage('FirstServe');
-        //     }
-        // },
-        // {
-        //     label: '30-15',
-        //     action: () => {
-        //         addNewRow();
-        //         updateLastRow('pointScore', '30-15');
-        //         updateLastRow('gameScore', player1GameScore + '-' + player2GameScore);
-        //         updateLastRow('setScore', player1SetScore + '-' + player2SetScore);
-        //         updateLastRow('isPointStart', 1);
-        //         updateLastRow('shotInRally', 1);
-        //         updateLastRow('side', 'Ad');
-        //         setCurrentPage('FirstServe');
-        //     }
-        // },
-        // {
-        //     label: '40-15',
-        //     action: () => {
-        //         addNewRow();
-        //         updateLastRow('pointScore', '40-15');
-        //         updateLastRow('gameScore', player1GameScore + '-' + player2GameScore);
-        //         updateLastRow('setScore', player1SetScore + '-' + player2SetScore);
-        //         updateLastRow('isPointStart', 1);
-        //         updateLastRow('shotInRally', 1);
-        //         updateLastRow('side', 'Deuce');
-        //         setCurrentPage('FirstServe');
-        //     }
-        // },
-        // {
-        //     label: '0-30',
-        //     action: () => {
-        //         addNewRow();
-        //         updateLastRow('pointScore', '0-30');
-        //         updateLastRow('gameScore', player1GameScore + '-' + player2GameScore);
-        //         updateLastRow('setScore', player1SetScore + '-' + player2SetScore);
-        //         updateLastRow('isPointStart', 1);
-        //         updateLastRow('shotInRally', 1);
-        //         updateLastRow('side', 'Deuce');
-        //         setCurrentPage('FirstServe');
-        //     }
-        // },
-        // {
-        //     label: '15-30',
-        //     action: () => {
-        //         addNewRow();
-        //         updateLastRow('pointScore', '15-30');
-        //         updateLastRow('gameScore', player1GameScore + '-' + player2GameScore);
-        //         updateLastRow('setScore', player1SetScore + '-' + player2SetScore);
-        //         updateLastRow('isPointStart', 1);
-        //         updateLastRow('shotInRally', 1);
-        //         updateLastRow('side', 'Ad');
-        //         setCurrentPage('FirstServe');
-        //     }
-        // },
-        // {
-        //     label: '30-30',
-        //     action: () => {
-        //         addNewRow();
-        //         updateLastRow('pointScore', '30-30');
-        //         updateLastRow('gameScore', player1GameScore + '-' + player2GameScore);
-        //         updateLastRow('setScore', player1SetScore + '-' + player2SetScore);
-        //         updateLastRow('isPointStart', 1);
-        //         updateLastRow('shotInRally', 1);
-        //         updateLastRow('side', 'Deuce');
-        //         setCurrentPage('FirstServe');
-        //     }
-        // },
-        // {
-        //     label: '40-30',
-        //     action: () => {
-        //         addNewRow();
-        //         updateLastRow('pointScore', '40-30');
-        //         updateLastRow('gameScore', player1GameScore + '-' + player2GameScore);
-        //         updateLastRow('setScore', player1SetScore + '-' + player2SetScore);
-        //         updateLastRow('isPointStart', 1);
-        //         updateLastRow('shotInRally', 1);
-        //         updateLastRow('side', 'Ad');
-        //         setCurrentPage('FirstServe');
-        //     }
-        // },
-        // {
-        //     label: '0-40',
-        //     action: () => {
-        //         addNewRow();
-        //         updateLastRow('pointScore', '0-40');
-        //         updateLastRow('gameScore', player1GameScore + '-' + player2GameScore);
-        //         updateLastRow('setScore', player1SetScore + '-' + player2SetScore);
-        //         updateLastRow('isPointStart', 1);
-        //         updateLastRow('shotInRally', 1);
-        //         updateLastRow('side', 'Ad');
-        //         updateLastRow('isBreakPoint', 1);
-        //         setCurrentPage('FirstServe');
-        //     }
-        // },
-        // {
-        //     label: '15-40',
-        //     action: () => {
-        //         addNewRow();
-        //         updateLastRow('pointScore', '15-40');
-        //         updateLastRow('gameScore', player1GameScore + '-' + player2GameScore);
-        //         updateLastRow('setScore', player1SetScore + '-' + player2SetScore);
-        //         updateLastRow('isPointStart', 1);
-        //         updateLastRow('shotInRally', 1);
-        //         updateLastRow('side', 'Deuce');
-        //         updateLastRow('isBreakPoint', 1);
-        //         setCurrentPage('FirstServe');
-        //     }
-        // },
-        // {
-        //     label: '30-40',
-        //     action: () => {
-        //         addNewRow();
-        //         updateLastRow('pointScore', '30-40');
-        //         updateLastRow('gameScore', player1GameScore + '-' + player2GameScore);
-        //         updateLastRow('setScore', player1SetScore + '-' + player2SetScore);
-        //         updateLastRow('isPointStart', 1);
-        //         updateLastRow('shotInRally', 1);
-        //         updateLastRow('side', 'Ad');
-        //         updateLastRow('isBreakPoint', 1);
-        //         setCurrentPage('FirstServe');
-        //     }
-        // },
         {
             label: '40-40 (Ad Side)',
-            action: () => {
+            action: (data) => {
                 updateActiveRow('pointScore', '40-40');
                 updateActiveRow('gameScore', data.table[data.activeRowIndex - 1]['gameScore']);
                 updateActiveRow('setScore', data.table[data.activeRowIndex - 1]['setScore']);
@@ -824,7 +677,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
         },
         {
             label: '40-40 (Deuce Side)',
-            action: () => {
+            action: (data) => {
                 updateActiveRow('pointScore', '40-40');
                 updateActiveRow('gameScore', data.table[data.activeRowIndex - 1]['gameScore']);
                 updateActiveRow('setScore', data.table[data.activeRowIndex - 1]['setScore']);
@@ -874,8 +727,15 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                                         setCurrentPage('PointScore');
                                     }
                                     else {
+                                        if (data.activeRowIndex > 0)
+                                        {
                                         updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
                                         updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                                        }
+                                        else {
+                                            updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                                            updateActiveRow('serverName', data.table[0]['serverName']); 
+                                        }
                                         updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                                         updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                                         updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -913,8 +773,15 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                                         setCurrentPage('PointScore');
                                     }
                                     else {
+                                        if (data.activeRowIndex > 0)
+                                        {
                                         updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
                                         updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                                        }
+                                        else {
+                                            updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                                            updateActiveRow('serverName', data.table[0]['serverName']); 
+                                        }
                                         updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                                         updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                                         updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -952,8 +819,15 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                                         setCurrentPage('PointScore');
                                     }
                                     else {
+                                        if (data.activeRowIndex > 0)
+                                        {
                                         updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
                                         updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                                        }
+                                        else {
+                                            updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                                            updateActiveRow('serverName', data.table[0]['serverName']); 
+                                        }
                                         updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                                         updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                                         updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1007,8 +881,15 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                                     setCurrentPage('PointScore');
                                 }
                                 else {
+                                    if (data.activeRowIndex > 0)
+                                    {
                                     updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
                                     updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                                    }
+                                    else {
+                                        updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                                        updateActiveRow('serverName', data.table[0]['serverName']); 
+                                    }
                                     updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                                     updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                                     updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1046,8 +927,15 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                                     setCurrentPage('PointScore');
                                 }
                                 else {
+                                    if (data.activeRowIndex > 0)
+                                    {
                                     updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
                                     updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                                    }
+                                    else {
+                                        updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                                        updateActiveRow('serverName', data.table[0]['serverName']); 
+                                    }
                                     updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                                     updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                                     updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1131,7 +1019,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 if (data.x >= -157 & data.x < -105)
                 {
                     updateActiveRow('firstServeZone', 'Wide');
-                    if (data.y >= 0 & data.y <= 245)
+                    if (data.y >= 10 & data.y <= 245)
                     {
                         updateActiveRow('firstServeIn', '1');
                         if (data.table[data.activeRowIndex]['isAce'] == '1') {
@@ -1145,8 +1033,15 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                                 setCurrentPage('PointScore');
                             }
                             else {
+                                if (data.activeRowIndex > 0)
+                                {
                                 updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
                                 updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                                }
+                                else {
+                                    updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                                    updateActiveRow('serverName', data.table[0]['serverName']); 
+                                }
                                 updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                                 updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                                 updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1170,7 +1065,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 else if (data.x >= -105 & data.x <= -52)
                 {
                     updateActiveRow('firstServeZone', 'Body');
-                    if (data.y >= 0 & data.y <= 245)
+                    if (data.y >= 10 & data.y <= 245)
                     {
                         updateActiveRow('firstServeIn', '1');
                         if (data.table[data.activeRowIndex]['isAce'] == '1') {
@@ -1184,8 +1079,15 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                                 setCurrentPage('PointScore');
                             }
                             else {
+                                if (data.activeRowIndex > 0)
+                                {
                                 updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
                                 updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                                }
+                                else {
+                                    updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                                    updateActiveRow('serverName', data.table[0]['serverName']); 
+                                }
                                 updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                                 updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                                 updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1209,7 +1111,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 else if (data.x > -52 & data.x < 0)
                 {
                     updateActiveRow('firstServeZone', 'T');
-                    if (data.y >= 0 & data.y <= 245)
+                    if (data.y >= 10 & data.y <= 245)
                     {
                         updateActiveRow('firstServeIn', '1');
                         if (data.table[data.activeRowIndex]['isAce'] == '1') {
@@ -1223,8 +1125,15 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                                 setCurrentPage('PointScore');
                             }
                             else {
+                                if (data.activeRowIndex > 0)
+                                {
                                 updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
                                 updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                                }
+                                else {
+                                    updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                                    updateActiveRow('serverName', data.table[0]['serverName']); 
+                                }
                                 updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                                 updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                                 updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1264,7 +1173,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 if (data.x >= 0 & data.x < 50)
                 {
                     updateActiveRow('firstServeZone', 'T');
-                    if (data.y < 0 & data.y >= -245)
+                    if (data.y <= 10 & data.y >= -245)
                     {
                         updateActiveRow('firstServeIn', '1');
                         if (data.table[data.activeRowIndex]['isAce'] == '1') {
@@ -1278,8 +1187,15 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                                 setCurrentPage('PointScore');
                             }
                             else {
+                                if (data.activeRowIndex > 0)
+                                {
                                 updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
                                 updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                                }
+                                else {
+                                    updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                                    updateActiveRow('serverName', data.table[0]['serverName']); 
+                                }
                                 updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                                 updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                                 updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1303,7 +1219,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 else if (data.x >= 50 & data.x <= 105)
                 {
                     updateActiveRow('firstServeZone', 'Body');
-                    if (data.y < 0 & data.y >= -245)
+                    if (data.y <= 10 & data.y >= -245)
                     {
                         updateActiveRow('firstServeIn', '1');
                         if (data.table[data.activeRowIndex]['isAce'] == '1') {
@@ -1317,8 +1233,15 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                                 setCurrentPage('PointScore');
                             }
                             else {
-                                updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
-                                updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                                if (data.activeRowIndex > 0)
+                                        {
+                                        updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
+                                        updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                                        }
+                                        else {
+                                            updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                                            updateActiveRow('serverName', data.table[0]['serverName']); 
+                                        }
                                 updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                                 updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                                 updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1342,7 +1265,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 else if (data.x > 105 & data.x <= 157)
                 {
                     updateActiveRow('firstServeZone', 'Wide');
-                    if (data.y < 0 & data.y >= -245)
+                    if (data.y <= 10 & data.y >= -245)
                     {
                         updateActiveRow('firstServeIn', '1');
                         if (data.table[data.activeRowIndex]['isAce'] == '1') {
@@ -1356,8 +1279,15 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                                 setCurrentPage('PointScore');
                             }
                             else {
+                                if (data.activeRowIndex > 0)
+                                {
                                 updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
                                 updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
+                                }
+                                else {
+                                    updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);
+                                    updateActiveRow('serverName', data.table[0]['serverName']); 
+                                }
                                 updateActiveRow('pointScore', serverScore + '-' + returnerScore);
                                 updateActiveRow('gameScore', player1GameScore + '-' + player2GameScore);
                                 updateActiveRow('setScore', player1SetScore + '-' + player2SetScore);
@@ -1413,7 +1343,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             if (data.x >= -157 & data.x < -101)
             {
                 updateActiveRow('secondServeZone', 'Wide');
-                if (data.y >= 0 & data.y <= 245)
+                if (data.y >= 10 & data.y <= 245)
                 {
                     updateActiveRow('secondServeIn', '1');
                     setCurrentPage('GroundstrokeContact');
@@ -1460,7 +1390,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             else if (data.x >= -101 & data.x <= -54)
             {
                 updateActiveRow('secondServeZone', 'Body');
-                if (data.y >= 0 & data.y <= 245)
+                if (data.y >= 10 & data.y <= 245)
                 {
                     updateActiveRow('secondServeIn', '1');
                     setCurrentPage('GroundstrokeContact');
@@ -1507,7 +1437,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             else if (data.x > -54 & data.x <= 0)
             {
                 updateActiveRow('secondServeZone', 'T');
-                if (data.y >= 0 & data.y <= 245)
+                if (data.y >= 10 & data.y <= 245)
                 {
                     updateActiveRow('secondServeIn', '1');
                     setCurrentPage('GroundstrokeContact');
@@ -1603,7 +1533,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             if (data.x >= 0 & data.x < 55)
             {
                 updateActiveRow('secondServeZone', 'T');
-                if (data.y >= 0 & data.y <= 245)
+                if (data.y >= 10 & data.y <= 245)
                 {
                     updateActiveRow('secondServeIn', '1');
                     setCurrentPage('GroundstrokeContact');
@@ -1650,7 +1580,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             else if (data.x >= 55 & data.x <= 105)
             {
                 updateActiveRow('secondServeZone', 'Body');
-                if (data.y >= 0 & data.y <= 245)
+                if (data.y >= 10 & data.y <= 245)
                 {
                     updateActiveRow('secondServeIn', '1');
                     setCurrentPage('GroundstrokeContact');
@@ -1697,7 +1627,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             else if (data.x > 105 & data.x <= 157)
             {
                 updateActiveRow('secondServeZone', 'Wide');
-                if (data.y >= 0 & data.y <= 245)
+                if (data.y >= 10 & data.y <= 245)
                 {
                     updateActiveRow('secondServeIn', '1');
                     setCurrentPage('GroundstrokeContact');
@@ -1798,7 +1728,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             if (data.x >= -157 & data.x < -105)
             {
                 updateActiveRow('secondServeZone', 'Wide');
-                if (data.y >= 0 & data.y <= 245)
+                if (data.y >= 10 & data.y <= 245)
                 {
                     updateActiveRow('secondServeIn', '1');
                     setCurrentPage('GroundstrokeContact');
@@ -1845,7 +1775,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             else if (data.x >= -105 & data.x <= -52)
             {
                 updateActiveRow('secondServeZone', 'Body');
-                if (data.y >= 0 & data.y <= 245)
+                if (data.y >= 10 & data.y <= 245)
                 {
                     updateActiveRow('secondServeIn', '1');
                     setCurrentPage('GroundstrokeContact');
@@ -1893,7 +1823,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             else if (data.x > -52 & data.x < 0)
             {
                 updateActiveRow('secondServeZone', 'T');
-                if (data.y >= 0 & data.y <= 245)
+                if (data.y >= 10 & data.y <= 245)
                 {
                     updateActiveRow('secondServeIn', '1');
                     setCurrentPage('GroundstrokeContact');
@@ -1989,7 +1919,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             if (data.x >= 0 & data.x < 50)
             {
                 updateActiveRow('secondServeZone', 'T');
-                if (data.y < 0 & data.y >= -245)
+                if (data.y <= 10 & data.y >= -245)
                 {
                     updateActiveRow('secondServeIn', '1');
                     setCurrentPage('GroundstrokeContact');
@@ -2036,7 +1966,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             else if (data.x >= 50 & data.x <= 105)
             {
                 updateActiveRow('secondServeZone', 'Body');
-                if (data.y < 0 & data.y >= -245)
+                if (data.y <= 10 & data.y >= -245)
                 {
                     updateActiveRow('secondServeIn', '1');
                     setCurrentPage('GroundstrokeContact');
@@ -2083,7 +2013,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             else if (data.x > 105 & data.x <= 157)
             {
                 updateActiveRow('secondServeZone', 'Wide');
-                if (data.y < 0 & data.y >= -245)
+                if (data.y <= 10 & data.y >= -245)
                 {
                     updateActiveRow('secondServeIn', '1');
                     setCurrentPage('GroundstrokeContact');
@@ -2344,21 +2274,59 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
             action: (data) => {
                 updateActiveRow('shotLocationX', data.x);
                 updateActiveRow('shotLocationY', data.y);
-                console.log(data.table[data.activeRowIndex]["shotDirection"]);
-                // assuming 215 is halfway point
-                if (data.x > 215 & data.table[data.activeRowIndex]["shotContactX"] > 215) {
+                // assuming 0 is halfway point
+                if (data.x <= 0 & data.table[data.activeRowIndex]["shotContactX"] <= 0) {
                     updateActiveRow('shotDirection', "Down the Line");
                 }
-                else if (data.x <= 215 & data.table[data.activeRowIndex]["shotContactX"] > 215) {
+                else if (data.x <= 0 & data.table[data.activeRowIndex]["shotContactX"] > 0) {
                     updateActiveRow('shotDirection', "Crosscourt");
                 }
-                else if (data.x > 215 & data.table[data.activeRowIndex]["shotContactX"] <= 215) {
+                else if (data.x >= 0 & data.table[data.activeRowIndex]["shotContactX"] < 0) {
                     updateActiveRow('shotDirection', "Crosscourt");
                 }
                 else {
                     updateActiveRow('shotDirection', "Down the Line");
                 }
-                if (data.table[data.activeRowIndex]["isPointEnd"] == '1') {
+                if (data.table[data.activeRowIndex]["shotContactY"] >= 0) {
+                    if (data.y >= 0) {
+                        updateActiveRow('isErrorNet', '1');
+                        updateActiveRow('isPointEnd', '1');
+                    }
+                    if (data.x > 157) {
+                        updateActiveRow('isErrorWideL', '1');
+                        updateActiveRow('isPointEnd', '1');
+                    }
+                    if (data.x < -157) {
+                        updateActiveRow('isErrorWideR', '1');
+                        updateActiveRow('isPointEnd', '1');
+                    }
+                    if (data.y < -455) {
+                        updateActiveRow('isErrorLong', '1');
+                        updateActiveRow('isPointEnd', '1');
+                    }
+
+                }
+                else {
+                    if (data.y <= 0) {
+                        updateActiveRow('isErrorNet', '1');
+                        updateActiveRow('isPointEnd', '1');
+                    }
+                    if (data.x < -157) {
+                        updateActiveRow('isErrorWideL', '1');
+                        updateActiveRow('isPointEnd', '1');
+                    }
+                    if (data.x > 157) {
+                        updateActiveRow('isErrorWideR', '1');
+                        updateActiveRow('isPointEnd', '1');
+                    }
+                    if (data.y > 455) {
+                        updateActiveRow('isErrorLong', '1');
+                        updateActiveRow('isPointEnd', '1');
+                    }
+                }
+
+                if ((data.table[data.activeRowIndex]["shotContactY"] >= 0 & ((data.y >= 0 || data.y <-455) || (data.x > 157 || data.x < -157))) ||
+                (data.table[data.activeRowIndex]["shotContactY"] < 0 & ((data.y <= 0 || data.y > 455) || (data.x > 157 || data.x < -157)))) {
                     serverScore =  parseInt(data.table[data.activeRowIndex]['pointScore'].split("-")[0]);
                     returnerScore =  parseInt(data.table[data.activeRowIndex]['pointScore'].split("-")[1]);
                     player1GameScore =  parseInt(data.table[data.activeRowIndex]['gameScore'].split("-")[0]);
@@ -2366,37 +2334,27 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                     player1SetScore =  parseInt(data.table[data.activeRowIndex]['setScore'].split("-")[0]);
                     player2SetScore = parseInt(data.table[data.activeRowIndex]['setScore'].split("-")[1]);
                     if (player1GameScore == 6 && player2GameScore == 6) {
-                        player1TiebreakScore = parseInt(data.table[data.activeRowIndex]['tiebreakScore'].split("-")[0]);
-                        player2TiebreakScore = parseInt(data.table[data.activeRowIndex]['tiebreakScore'].split("-")[1]);
                         updateTiebreakScore(parseInt(data.table[data.activeRowIndex]["shotInRally"]), 
                         data.table[data.activeRowIndex]["isWinner"], 
                         data.table[data.activeRowIndex]["serverName"]);
-                        if (player1TiebreakScore >= 7 && (player1TiebreakScore - player2TiebreakScore) >= 2 ) {
+                        if (serverScore >= 7 && (serverScore - returnerScore) >= 2 ) {
                             player1SetScore += 1;
                             player1GameScore = 0;
                             player2GameScore = 0;
-                            player1TiebreakScore = 0;
-                            player2TiebreakScore = 0;
+                            serverScore = 0;
+                            returnerScore = 0;
                             setCurrentPage('ServerName');
                         }
-                        else if (player2TiebreakScore >= 7 && (player2TiebreakScore - player1TiebreakScore) >= 2 ) {
+                        else if (returnerScore >= 7 && (returnerScore - serverScore) >= 2 ) {
                             player1SetScore += 1;
                             player1GameScore = 0;
                             player2GameScore = 0;
-                            player1TiebreakScore = 0;
-                            player2TiebreakScore = 0;
+                            returnerScore = 0;
+                            serverScore = 0;
                             setCurrentPage('ServerName');
                         }
                         else {
-                            updateActiveRow('serverFarNear', data.table[data.activeRowIndex - 1]['serverFarNear']);
-                            updateActiveRow('serverName', data.table[data.activeRowIndex - 1]['serverName']);
-                            updateActiveRow('tiebreakScore', player1TiebreakScore + '-' + player2TiebreakScore);
-                            updateActiveRow('gameScore', data.table[data.activeRowIndex - 1]['gameScore']);
-                            updateActiveRow('setScore', data.table[data.activeRowIndex - 1]['setScore']);
-                            updateActiveRow('isPointStart', 1);
-                            updateActiveRow('shotInRally', 1);
-                            updateActiveRow('side', chooseSide());
-                            setCurrentPage('FirstServe');
+                            setCurrentPage('ServerName');
                         }
                     }   
                     else {
@@ -2456,7 +2414,6 @@ export const columnNames = [
     'pointScore',
     'gameScore',
     'setScore',
-    'tiebreakScore',
     'isPointStart',
     'pointStartTime',
     'isPointEnd',

From 5806e5364f7e004774acde3d6a5361a3b6574ab6 Mon Sep 17 00:00:00 2001
From: Leo Cardozo <leonardocardozo14@gmail.com>
Date: Fri, 10 May 2024 14:38:58 -0700
Subject: [PATCH 34/38] updated tiebreak logic

---
 app/services/taggerButtonData.js | 33 +++++---------------------------
 1 file changed, 5 insertions(+), 28 deletions(-)

diff --git a/app/services/taggerButtonData.js b/app/services/taggerButtonData.js
index 986c787..0a50fea 100644
--- a/app/services/taggerButtonData.js
+++ b/app/services/taggerButtonData.js
@@ -2240,34 +2240,6 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 updateActiveRow('isPointEnd', '1');
             }
         },
-        {
-            label: 'ErrorWideLeft',
-            action: () => {
-                updateActiveRow('isErrorWideL', '1');
-                updateActiveRow('isPointEnd', '1');
-            }
-        },
-        {
-            label: 'ErrorWideRight',
-            action: () => {
-                updateActiveRow('isErrorWideR', '1');
-                updateActiveRow('isPointEnd', '1');
-            }
-        },
-        {
-            label: 'ErrorLong',
-            action: () => {
-                updateActiveRow('isErrorLong', '1');
-                updateActiveRow('isPointEnd', '1');
-            }
-        },
-        {
-            label: 'ErrorNet',
-            action: () => {
-                updateActiveRow('isErrorNet', '1');
-                updateActiveRow('isPointEnd', '1');
-            }
-        },
         {
             courtImage: true,
             label: 'Select Shot Result Location',
@@ -2354,6 +2326,11 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                             setCurrentPage('ServerName');
                         }
                         else {
+                            if ((serverScore + returnerScore) % 2 == 1) { // need to switch scores cuz server switches
+                                var tempServeScore = serverScore;
+                                serverScore = returnerScore;
+                                returnerScore = tempServeScore;
+                            }
                             setCurrentPage('ServerName');
                         }
                     }   

From 6a2a54f28382a83da16210fbd56d2ff0e950ab98 Mon Sep 17 00:00:00 2001
From: Leo Cardozo <leonardocardozo14@gmail.com>
Date: Fri, 10 May 2024 14:47:34 -0700
Subject: [PATCH 35/38] updated side with updated coordinates

---
 app/services/taggerButtonData.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/services/taggerButtonData.js b/app/services/taggerButtonData.js
index 0a50fea..adba5df 100644
--- a/app/services/taggerButtonData.js
+++ b/app/services/taggerButtonData.js
@@ -2137,9 +2137,9 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                     updateActiveRow('tiebreakScore', data.table[0]['tiebreakScore']);
                     updateActiveRow('serverFarNear', data.table[0]['serverFarNear']);  
                 }
-                if (data.y < 471) 
-                { // assuming 470 is halfway point
-                    if (data.x < 215) 
+                if (data.y > 0) 
+                { // assuming 0 is halfway point
+                    if (data.x < 0) 
                     {
                         updateActiveRow('side', 'Deuce');
                         setCurrentPage('GroundstrokeShotInfo')
@@ -2152,7 +2152,7 @@ export const getTaggerButtonData = (updateActiveRow, addNewRow, setCurrentPage)
                 }
                 else
                 {
-                    if (data.x < 215) 
+                    if (data.x < 0) 
                     {
                         updateActiveRow('side', 'Ad');
                         setCurrentPage('GroundstrokeShotInfo')

From cdeec92ac2080cef035a37abb5d20b7f13a3b5df Mon Sep 17 00:00:00 2001
From: Alex West <awest2025@ucla.edu>
Date: Sun, 12 May 2024 23:13:55 -0700
Subject: [PATCH 36/38] fixed 0 not showing up

---
 app/(interactive)/tag-match/[slug]/page.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/(interactive)/tag-match/[slug]/page.js b/app/(interactive)/tag-match/[slug]/page.js
index e7189e0..3a9696b 100644
--- a/app/(interactive)/tag-match/[slug]/page.js
+++ b/app/(interactive)/tag-match/[slug]/page.js
@@ -386,8 +386,12 @@ export default function TagMatch() {
     const yFromCenter = y - heightOfCourt / 2;
 
     // Calculate the click position in inches
-    const xInches = Math.round(xFromCenter * inchesPerPixel);
-    const yInches = Math.round(yFromCenter * inchesPerPixel) * -1;
+    let xInches = Math.round(xFromCenter * inchesPerPixel);
+    let yInches = Math.round(yFromCenter * inchesPerPixel) * -1;
+
+    // Convert -0 to 0
+    xInches = Object.is(xInches, -0) ? 0 : xInches;
+    yInches = Object.is(yInches, -0) ? 0 : yInches;
 
     console.log("xInches: " + xInches + " yInches: " + yInches);
     return { x: xInches, y: yInches };
@@ -426,7 +430,7 @@ export default function TagMatch() {
                     data.activeRowIndex = tableState.activeRowIndex;
                     data.videoTimestamp = getVideoTimestamp();
                     button.action(data);
-                    showPopUp()
+                    showPopUp();
                   }} />
               </div>
             ) : (
@@ -438,7 +442,7 @@ export default function TagMatch() {
                 data.activeRowIndex = tableState.activeRowIndex;
                 data.videoTimestamp = getVideoTimestamp();
                 button.action(data);
-                showPopUp()
+                showPopUp();
               }}>
                 {button.label}
               </button>
@@ -484,7 +488,7 @@ export default function TagMatch() {
                 <td key={colIndex}>
                   <input
                     type="text"
-                    value={row[columnName] || ''}
+                    value={row[columnName] === undefined || row[columnName] === null ? '' : row[columnName]}
                     onChange={(event) => {
                       saveToHistory(); // Save the current state to history first
                       changeRowValue(rowIndex, columnName, event.target.value); // Then handle the change

From 260f224056e33fbab088ec458092694f24713df4 Mon Sep 17 00:00:00 2001
From: Alex West <awest2025@ucla.edu>
Date: Mon, 13 May 2024 01:15:47 -0700
Subject: [PATCH 37/38] fixed issues with ExtendedList style

---
 app/(interactive)/matches/[slug]/page.js |  8 +++----
 app/components/ExtendedList.js           |  2 +-
 app/styles/ExtendedList.module.css       |  3 ++-
 app/styles/Match.module.css              | 30 ++++++++++++++++--------
 4 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/app/(interactive)/matches/[slug]/page.js b/app/(interactive)/matches/[slug]/page.js
index 850a7ba..cb31dec 100644
--- a/app/(interactive)/matches/[slug]/page.js
+++ b/app/(interactive)/matches/[slug]/page.js
@@ -119,7 +119,7 @@ const MatchPage = () => {
     setFilterList(updatedFilterList);
   };
 
-  const scrolltolist=()=>{
+  const scrollToDetailedList=()=>{
     if (tableRef.current) {
       tableRef.current.scrollIntoView({ behavior: "smooth" });
   }
@@ -216,7 +216,7 @@ const MatchPage = () => {
                     <PointsList pointsData={returnFilteredPoints()} onPointSelect={handleJumpToTime} clientTeam={matchData.clientTeam} opponentTeam={matchData.opponentTeam}/>
                   </div>
                   <div style={{ padding: '0.5vw', paddingLeft: '5vw' }}>
-                  <button className={styles.buttonn} onClick={() => scrolltolist()}>View Detailed List</button>
+                  <button className={styles.viewDetailedListButton} onClick={() => scrollToDetailedList()}>View Detailed List</button>
                 </div>
                   {/* Score display */}
                   <div className="scoreboard">
@@ -227,8 +227,8 @@ const MatchPage = () => {
             </div>
           </div>
           <div className={styles.toggle}>
-              <button onClick={() =>togglePDF()} className={showPDF ? styles.toggle_buttona_inactive : styles.toggle_buttona_active}>Points</button>
-              <button onClick={() =>togglePoints()} className={showPDF ? styles.toggle_buttonb_active : styles.toggle_buttonb_inactive}>Key Stats & Visuals</button>
+              <button onClick={() => togglePDF()} className={showPDF ? styles.toggle_buttona_inactive : styles.toggle_buttona_active}>Points</button>
+              <button onClick={() => togglePoints()} className={showPDF ? styles.toggle_buttonb_active : styles.toggle_buttonb_inactive}>Key Stats & Visuals</button>
             {showPDF ? (
               <iframe className={styles.pdfView} src={matchData.pdfUrl} width="90%" height="1550" />
             ) : (
diff --git a/app/components/ExtendedList.js b/app/components/ExtendedList.js
index f189565..c68f100 100644
--- a/app/components/ExtendedList.js
+++ b/app/components/ExtendedList.js
@@ -26,7 +26,7 @@ const ExtendedList = ({ pointsData, clientTeam, opponentTeam, onPointSelect, ifr
       fetchLogos();
     });
     let keys = ["", "serverName", "setScore", "gameScore", "pointScore", "pointWonBy", "lastShotResult", "rallyCount"];
-    let keys_headers = ["Server", "", "Set Score", "Game Score", "Point", "Point Winner", "Last Shot Type", "Shot Count"];
+    let keys_headers = ["Server", "", "Set Score", "Game Score", "Point", "Point Winner", "Last Shot Type", "Shot Count", ""];
 
 
     const Scroll=(point)=>{
diff --git a/app/styles/ExtendedList.module.css b/app/styles/ExtendedList.module.css
index ab0db8b..a98c8cf 100644
--- a/app/styles/ExtendedList.module.css
+++ b/app/styles/ExtendedList.module.css
@@ -9,10 +9,11 @@
     text-align: left;
     color: grey;
     padding-left: 0.25vw;
+    padding-bottom: 1vw;
 }
 
 .TR{
-    border-bottom: solid 0.2vw #EDEDED;
+    border-bottom: solid 0.1vw #EDEDED;
 }
 
 .IMG{
diff --git a/app/styles/Match.module.css b/app/styles/Match.module.css
index 1f34e7c..8f90cf5 100644
--- a/app/styles/Match.module.css
+++ b/app/styles/Match.module.css
@@ -6,6 +6,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    box-sizing: border-box;
   }
   
   .title a {
@@ -120,7 +121,8 @@
     width: 100%;
     border: 1px solid #eaeaea;
     border-radius: 10px;
-    padding: 1.5rem;
+    border-top-left-radius: 0% !important;
+    /* padding: 1.5rem; */
     text-align: left;
     color: inherit;
     text-decoration: none;
@@ -143,21 +145,21 @@
       border-color 0.15s ease;
   }
 
-  .buttonn {
-    align : center;
+  .viewDetailedListButton {
     padding: 0.625vw 2.5vw; /* Adjust padding using viewport units */
     cursor: pointer;
     background-color: #fafafa;
     border: none; /* Remove the default border */
-    border-left: 0.313vw solid #b0b0b0; /* Adjust border width using viewport units */
-    border-bottom: 0.313vw solid #b0b0b0; /* Adjust border width using viewport units */
+    /* border-left: 0.313vw solid #b0b0b0; /* Adjust border width using viewport units */
+    /* border-bottom: 0.313vw solid #b0b0b0; /* Adjust border width using viewport units */
+    border: 1px solid #eaeaea;
     font-weight: 400;
     font-size: 1.3vw; /* Adjust font size using viewport units */
     line-height: 1.0vw;
     border-radius: 0.25vw; /* Adjust border radius using viewport units */
   }
   
-  .buttonn:hover {
+  .viewDetailedListButton:hover {
     background-color: #e9ecef;
     border-color: #b8c2cc;
   }
@@ -173,32 +175,40 @@
     background-color: #fafafa;
     border-top-left-radius: 10px;
     border: 1px solid #eaeaea;
+    cursor: pointer;
+    font-weight: bold;
   }
 
   .toggle_buttona_inactive{
     font-size: 1vw;
     width: 10vw;
     height: 5vh;
-    background-color: #FAF1EA;
+    background-color: #ffffff;
     border-top-left-radius: 10px;
     border: 1px solid #eaeaea;
+    cursor: pointer;
+    font-weight: bold;
   }
 
   /* increase size of buttons */
   .toggle_buttonb_active{
     font-size: 1vw;
-    width: 10vw;
+    width: 12vw;
     height: 5vh;
     background-color: #fafafa;
     border-top-right-radius: 10px;
     border: 1px solid #eaeaea;
+    cursor: pointer;
+    font-weight: bold;
   }
 
   .toggle_buttonb_inactive{
     font-size: 1vw;
-    width: 10vw;
+    width: 12vw;
     height: 5vh;
-    background-color: #FAF1EA;
+    background-color: #ffffff;
     border-top-right-radius: 10px;
     border: 1px solid #eaeaea;
+    cursor: pointer;
+    font-weight: bold;
   }
\ No newline at end of file

From 2f7b27c19eb234fd9312a503e9f90f3385ee4767 Mon Sep 17 00:00:00 2001
From: Alex West <awest2025@ucla.edu>
Date: Mon, 13 May 2024 01:27:09 -0700
Subject: [PATCH 38/38] fixed border styling

---
 app/(interactive)/matches/[slug]/page.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/(interactive)/matches/[slug]/page.js b/app/(interactive)/matches/[slug]/page.js
index cb31dec..eae4684 100644
--- a/app/(interactive)/matches/[slug]/page.js
+++ b/app/(interactive)/matches/[slug]/page.js
@@ -272,7 +272,7 @@ const MatchPage = () => {
           margin-top: 0;
           padding: 1vw;
           margin-left: 1vw;
-          border: 0.1vw solid #ddd;
+          border: 1px solid #ddd;
           border-radius: 1.5vw;
           overflow-y: auto;
           height: 30vw;
@@ -281,12 +281,14 @@ const MatchPage = () => {
 
         .filterList {
           flex: 2; // Takes up 1/3 of the space
-          margin-top: 0rem;
-          padding: 1rem;
+          margin-top: 0;
+          padding: 1vw;
+          margin-left: 1vw;
           border: 1px solid #ddd;
-          border-radius: 15px;
+          border-radius: 1.5vw;
           overflow-y: auto;
-          height: 350px;
+          height: 30vw;
+          background: linear-gradient(to bottom, #ffffff, #fafafa); 
         }
         .jumpList {
           width: 325px;