Skip to content

Commit

Permalink
fixed linting bullshit
Browse files Browse the repository at this point in the history
  • Loading branch information
@awest25
awest25 committed May 14, 2024
1 parent c7bd9d0 commit 3c66938
Show file tree
Hide file tree
Showing 6 changed files with 2,230 additions and 2,386 deletions.
22 changes: 11 additions & 11 deletions app/(interactive)/matches/[slug]/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,10 +119,10 @@ const MatchPage = () => {
setFilterList(updatedFilterList);
};

const scrollToDetailedList=()=>{
const scrollToDetailedList = () => {
if (tableRef.current) {
tableRef.current.scrollIntoView({ behavior: "smooth" });
}
}
};

const togglePDF = () => {
Expand All @@ -140,7 +140,7 @@ const MatchPage = () => {
{/* Main Content Area */}
{matchData && (
<>
<MatchTiles matchName={matchData.name} clientTeam={matchData.clientTeam} opponentTeam={matchData.opponentTeam} matchDetails={matchData.matchDetails} {...matchSetScores}/>
<MatchTiles matchName={matchData.name} clientTeam={matchData.clientTeam} opponentTeam={matchData.opponentTeam} matchDetails={matchData.matchDetails} {...matchSetScores} />
<div className={styles.headerRow}>
<div className={styles.titleContainer}>
<h2>{matchData.name}</h2>
Expand Down Expand Up @@ -213,29 +213,29 @@ const MatchPage = () => {
<div className='jumpList'>
{/* Points List */}
<div className="pointsList">
<PointsList pointsData={returnFilteredPoints()} onPointSelect={handleJumpToTime} clientTeam={matchData.clientTeam} opponentTeam={matchData.opponentTeam}/>
<PointsList pointsData={returnFilteredPoints()} onPointSelect={handleJumpToTime} clientTeam={matchData.clientTeam} opponentTeam={matchData.opponentTeam} />
</div>
<div style={{ padding: '0.5vw', paddingLeft: '5vw' }}>
<button className={styles.viewDetailedListButton} onClick={() => scrollToDetailedList()}>View Detailed List</button>
</div>
<button className={styles.viewDetailedListButton} onClick={() => scrollToDetailedList()}>View Detailed List</button>
</div>
{/* Score display */}
<div className="scoreboard">
<ScoreBoard names={matchData.name} playData={playingPoint} {...matchSetScores}/>
<ScoreBoard names={matchData.name} playData={playingPoint} {...matchSetScores} />
</div>
</div>
</div>
</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" />
) : (
<div ref={tableRef} className={styles.ExtendedList}>
<ExtendedList pointsData={returnFilteredPoints()} clientTeam={matchData.clientTeam} opponentTeam={matchData.opponentTeam} onPointSelect={handleJumpToTime} iframe = {iframeRef}/>
<ExtendedList pointsData={returnFilteredPoints()} clientTeam={matchData.clientTeam} opponentTeam={matchData.opponentTeam} onPointSelect={handleJumpToTime} iframe={iframeRef} />
</div>
)}
)}
</div>
</>
)}
Expand Down
29 changes: 15 additions & 14 deletions app/(interactive)/tag-match/[slug]/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ export default function TagMatch() {
}

// Set the metadata to matchDocument but without the 'points'
// eslint-disable-next-line no-unused-vars
const { points, ...metadata } = matchDocument;
setMatchMetadata(metadata);
});
Expand Down Expand Up @@ -362,7 +363,7 @@ export default function TagMatch() {
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

// 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
Expand Down Expand Up @@ -419,19 +420,19 @@ export default function TagMatch() {
<div>
<p>{button.label}</p>
<TennisCourtSVG className={styles.courtImage} courtType={button.courtImage} handleImageClick={(event) => {
setPopUp([])
saveToHistory();
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();
button.action(data);
showPopUp();
}} />
setPopUp([])
saveToHistory();
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();
button.action(data);
showPopUp();
}} />
</div>
) : (
<button className={styles.customButton} key={index} onClick={() => {
Expand Down
156 changes: 78 additions & 78 deletions app/components/ExtendedList.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
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';
Expand All @@ -7,89 +7,89 @@ import DoubleFault from "../../public/DoubleFault";
import PlayButton from "../../public/PlayButton";

const ExtendedList = ({ pointsData, clientTeam, opponentTeam, onPointSelect, iframe }) => {
const [client_logo, setClientLogo] = useState('');
const [opponent_logo, setOpponentLogo] = useState('');
const [client_logo, setClientLogo] = useState('');
const [opponent_logo, setOpponentLogo] = useState('');

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();
});
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", ""];
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();
});
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);
if (iframe.current) {
iframe.current.scrollIntoView({ behavior: "smooth" });
}

const Scroll = (point) => {
// useref
onPointSelect(point.Position);
if (iframe.current) {
iframe.current.scrollIntoView({ behavior: "smooth" });
}
}

return (
<div id="table-container" className={styles.tableContainer}>
<table className={styles.table}>
<thead>
<tr className={styles.TR}>
{keys_headers.map((key, index) => (
<th className={styles.TH} key={index}>{key}</th>
))}
</tr>
</thead>
<tbody>
{pointsData.map((item, rowIndex) => (
<tr className={styles.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} />
) : (
<div style={{ display: 'flex', alignItems: 'center' }}>
{cellIndex === keys.length - 2 ? (
<>
{item['lastShotResult'] === 'Winner' && (
<Winner />
)}
{item['lastShotResult'] === 'Error' && (
<Error />

)}
{item['lastShotResult'] === 'DoubleFault' && (
<DoubleFault />

return (
<div id="table-container" className={styles.tableContainer}>
<table className={styles.table}>
<thead>
<tr className={styles.TR}>
{keys_headers.map((key, index) => (
<th className={styles.TH} key={index}>{key}</th>
))}
</tr>
</thead>
<tbody>
{pointsData.map((item, rowIndex) => (
<tr className={styles.TR}>
{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}/>
) : (
<div style={{ display: 'flex', alignItems: 'center' }}>
{cellIndex === keys.length - 2 ? (
<>
{item['lastShotResult'] === 'Winner' && (
<Winner/>
)}
{item['lastShotResult'] === 'Error' && (
<Error/>

)}
{item['lastShotResult'] === 'DoubleFault' && (
<DoubleFault/>

)}
<span style={{ marginLeft: '4px' }}>{item['lastShotResult']}</span>
</>
) : (
item[key]
)}
</div>
)}
</td>
))}
)}
<span style={{ marginLeft: '4px' }}>{item['lastShotResult']}</span>
</>
) : (
item[key]
)}
</div>
)}
</td>
))}

<td className={styles.TD2}>
<button className={styles.button} onClick={() => Scroll(item)}>
<PlayButton/>
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
);
<td className={styles.TD2}>
<button className={styles.button} onClick={() => Scroll(item)}>
<PlayButton />
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
);
};

export default ExtendedList;
32 changes: 0 additions & 32 deletions app/components/PointsList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import styles from '../styles/PointsList.module.css';
import getTeams from '@/app/services/getTeams.js';

const PointsList = ({ pointsData, onPointSelect, clientTeam, opponentTeam }) => {
const [expanded, setExpanded] = useState(false);
const [clientLogo, setClientLogo] = useState('');
const [opponentLogo, setOpponentLogo] = useState('');

Expand Down Expand Up @@ -66,40 +65,9 @@ const PointsList = ({ pointsData, onPointSelect, clientTeam, opponentTeam }) =>
<td><b style={{ fontSize: '1em' }}>{set}</b></td>
<td><b style={{ fontSize: '1em' }}>{gameScore}</b></td>
<td><b style={{ fontSize: '1em', whiteSpace: 'nowrap', width: '20%' }}>{pointScore}</b></td>
<td>
{/* <svg width="2.7vw" height="2.7vw" 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> */}
</td>
</tr>
);
})}

{/* {!expanded && pointsData.length > 4 && (
<tr>
<td colSpan="5" >
<div style={{ padding: '0.5vw' }}>
<button className={styles.buttonn} onClick={() => setExpanded(true)}>Expand</button>
</div>
</td>
</tr>
)}
{expanded && (
<tr>
<td colSpan="5">
<div style={{ padding: '0.5vw' }}>
<button className={styles.buttonn} onClick={() => setExpanded(false)}>Collapse</button>
</div>
</td>
</tr>
)} */}
</tbody>
</table>
</div>
Expand Down
Loading

0 comments on commit 3c66938

Please sign in to comment.