Merge pull request #116 from awest25/bugs-4-10

Bugs 4-10
bruin-tennis-consulting · Apr 13, 2024 · 470a3a9 · 470a3a9
2 parents 5238295 + 7470cd6
commit 470a3a9
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 77 deletions.
diff --git a/app/(interactive)/matches/[slug]/page.js b/app/(interactive)/matches/[slug]/page.js
@@ -1,7 +1,6 @@
 'use client'
 
 import React, { useState, useEffect } from 'react';
-import Select from 'react-select';
 import { usePathname } from 'next/navigation'
 
 import filterStyles from '../../../styles/FilterList.module.css'
@@ -125,56 +124,13 @@ const MatchPage = () => {
             <div className={styles.titleContainer}>
               <h2>{matchData.name}</h2>
             </div>
-            {/* Options Container */}
-            <div className={filterStyles.optionsContainer}>
-              <svg
-                className={filterStyles.optionsToggle}
-                onClick={() => setShowOptions(!showOptions)}
-                viewBox="0 0 24 24"
-                fill="black"
-                xmlns="http://www.w3.org/2000/svg">
-                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
-                <g id="SVGRepo_iconCarrier">
-                  <path d="M4 18L20 18" stroke="#000000" stroke-width="2" stroke-linecap="round"></path>
-                  <path d="M4 12L20 12" stroke="#000000" stroke-width="2" stroke-linecap="round"></path>
-                  <path d="M4 6L20 6" stroke="#000000" stroke-width="2" stroke-linecap="round"></path>
-                </g>
-              </svg>
-              <div className={filterStyles.optionsList}>
-                {showOptions && (
-                  <>
-                    <div>
-                      <input
-                        type="checkbox"
-                        id="showOptionsCheckbox"
-                        checked={showPercent}
-                        onChange={() => setShowPercent(!showPercent)}
-                      />
-                      <label htmlFor="showOptionsCheckbox">Show Stats</label>
-                    </div>
-                    {showPercent && (
-                      <Select
-                        onChange={(selectedOption) => setShowCount(selectedOption.value === "option2")}
-                        options={[
-                          { value: "option1", label: "Percent" },
-                          { value: "option2", label: "Count" }
-                        ]}
-                        isSearchable={false}
-                      />
-                    )}
-                  </>
-                )}
-              </div>
-            </div>
           </div>
           <div className={styles.mainContent}>
             {/* Video Player */}
             <div className="videoPlayer">
               <div>
                 <VideoPlayer videoId={matchData.videoId} setVideoObject={setVideoObject}/>
               </div>
-
               {/* Score display */}
               <div className="scoreboard">
                 <ScoreBoard names={matchData.name} playData={playingPoint}/>
@@ -196,6 +152,45 @@ const MatchPage = () => {
               <div className='listHolder'>
                 {/* Filter List */}
                 <div className="filterList">
+                  {/* Radio Options */}
+                    <div className={filterStyles.optionsList}>
+                      <div>
+                        <input
+                          type="radio"
+                          id="defaultRadio"
+                          checked={!showCount && !showPercent}
+                          onChange={() => {
+                            setShowPercent(false);
+                            setShowCount(false);
+                          }}
+                        />
+                        <label htmlFor="defaultRadio">Default</label>
+                      </div>
+                      <div>
+                        <input
+                          type="radio"
+                          id="percentRadio"
+                          checked={showPercent}
+                          onChange={() => {
+                            setShowPercent(true);
+                            setShowCount(false);
+                          }}
+                        />
+                        <label htmlFor="percentRadio">Show Percent</label>
+                      </div>
+                      <div>
+                        <input
+                          type="radio"
+                          id="countRadio"
+                          checked={showCount}
+                          onChange={() => {
+                            setShowPercent(false);
+                            setShowCount(true);
+                          }}
+                        />
+                        <label htmlFor="countRadio">Show Count</label>
+                      </div>
+                  </div>
                   <FilterList pointsData={matchData.points} filterList={filterList} setFilterList={setFilterList} showPercent={showPercent} showCount={showCount} />
                 </div>
 

diff --git a/app/components/FilterList.js b/app/components/FilterList.js
@@ -100,12 +100,12 @@ const FilterList = ({ pointsData, filterList, setFilterList, showPercent, showCo
                           {/* Point Percentage */}
 
                           {/* {console.log(value)}  */}
-                          {!showCount && showPercent && value && (
+                          {showPercent && value && (
                             // make a sum
                             <li>{Math.round((countFilteredPointsForValue(key, value) / Math.round(countFilteredPointsTotal(key,value)) /* ERROR IS HERE */ ) * 100)}%</li>                                                    
                           )}
                           {/* Point Count */}
-                          {showCount && showPercent && value && (
+                          {showCount && value && (
                             <li>{countFilteredPointsForValue(key, value)} / {Math.round(countFilteredPointsTotal(key,value)) /* ERROR IS HERE */}</li> 
                           )}                                                 
                         </div>  

diff --git a/app/components/MatchTiles.js b/app/components/MatchTiles.js
@@ -40,11 +40,6 @@ const calculateWinner = (playerOne, playerTwo) => {
   return playerOneTotal > playerTwoTotal;
 };
 
-// Retrieve team information
-const isWomensTeam = (match) => {
-  return match.includes("(W)");
-};
-
 //Retrieve Match Date
 const extractDateFromString = (inputString) => {
   const regexSlash = /\b(\d{1,2}\/\d{1,2}\/\d{2,4})\b/g;
@@ -298,10 +293,10 @@ const MatchTiles = ({
       <div className={styles.matchInfoContainer}>
         <div className={styles.containerTitle}>Matchup</div>
         <div className={styles.containerInfo}>
-          UCLA {isWomensTeam(matchName) && "(Womens)"}
+          {clientTeam}
         </div>
         <div className={styles.containerInfo}>
-          {finalScore[0].opponentTeam} {isWomensTeam(matchName) && "(Womens)"}
+          {opponentTeam}
         </div>
       </div>
     </div>

diff --git a/app/services/nameMap.js b/app/services/nameMap.js
@@ -24,7 +24,7 @@ const nameMap = {
   "rallyCountFreq"         : 'Rally Length',
   "atNetPlayer1"           : 'Player Comes to Net',
   "pointWonBy"             : 'Point Won By',
-  "side"                   : 'Deuce/Ad Side',
+  "side"                   : 'Deuce/Ad Serve',
   "setNum"                 : 'Set Number',
 
   //Group 5: Special Requests

diff --git a/app/styles/FilterList.module.css b/app/styles/FilterList.module.css
@@ -111,31 +111,12 @@
     padding-left: 8px; /* Adjust padding to accommodate the border */
 }
 
-/* Styles for options menu */
-.optionsContainer{
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: flex-end;
-    max-width: 100%;
-    box-sizing: border-box;
-    padding: 2px;
-    margin: 5px 0;
-    background-color: #ffffff;
-}
-
 .optionsList {
     padding: 0;
     list-style-type: none;
     margin: 0;
     display: flex;
-    flex-direction: column;
-}
+    flex-direction: row;
+    justify-content: space-between;
 
-.optionsToggle{
-    color: #333;
-    cursor: pointer;
-    transition: all 0.2s ease-in-out; 
-    height: 30px;
-    width: 30px;
-}
+}
diff --git a/app/styles/MatchTiles.module.css b/app/styles/MatchTiles.module.css
@@ -54,4 +54,9 @@
 .playerSchoolImg {
     width: 1.5em;
     padding: 0;
-}
+}
+
+.playerSchoolImg img {
+    width: 100%; /* Set the width of the image to 100% of its container */
+    height: auto; /* Automatically adjust the height to maintain aspect ratio */
+  }