Skip to content

Commit

Permalink
remove outdated functinons
Browse files Browse the repository at this point in the history
  • Loading branch information
@Fredenck
Fredenck committed Jan 17, 2025
1 parent e59a3f4 commit 40b6c56
Show file tree
Hide file tree
Showing 3 changed files with 164 additions and 175 deletions.
167 changes: 79 additions & 88 deletions app/components/DashboardTile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,6 @@ import styles from '@/app/styles/DashboardTile.module.css'

import { useData } from '@/app/DataProvider'

// Calculate winner of match
const calculateWinner = (player1, player2) => {
const player1Total = player1.reduce(
(total, current) => (!isNaN(current.score) ? total + current.score : total),
0
)
const player2Total = player2.reduce(
(total, current) => (!isNaN(current.score) ? total + current.score : total),
0
)
return player1Total > player2Total
}

const DashboardTile = ({
clientTeam,
opponentTeam,
Expand All @@ -35,96 +22,100 @@ const DashboardTile = ({

const isOpaque = (player1Scores, player2Scores) => {
return player1Scores.map((score, index) => {
const player1Score = !isNaN(score.score) ? score.score : 0;
const player2Score = !isNaN(player2Scores[index]?.score) ? player2Scores[index].score : 0;
return player1Score > player2Score;
});
};
const player1Score = !isNaN(score.score) ? score.score : 0
const player2Score = !isNaN(player2Scores[index]?.score)
? player2Scores[index].score
: 0
return player1Score > player2Score
})
}

// Calculate opacity map before rendering
const player1Opacity = isOpaque(player1FinalScores, player2FinalScores);
const player1Opacity = isOpaque(player1FinalScores, player2FinalScores)

useEffect(() => {
setClientLogo(logos[clientTeam])
setOpponentLogo(logos[opponentTeam])
}, [clientTeam, opponentTeam, logos])

// Render function for scores
const renderScore = (score, index, isPlayer1, tieScores) => {
const opacity = isPlayer1 ?
(player1Opacity[index] ? '100%' : '40%') :
(!player1Opacity[index] ? '100%' : '40%');
// Render function for scores
const renderScore = (score, index, isPlayer1, tieScores) => {
const opacity = isPlayer1
? player1Opacity[index]
? '100%'
: '40%'
: !player1Opacity[index]
? '100%'
: '40%'

return (
!isNaN(score.score) && (
<div
key={index}
style={{
position: 'relative',
opacity
}}
>
{score.score}
{tieScores[index] && (
<sup
style={{
position: 'absolute',
fontSize: '0.6em',
top: '-0.3em',
left: '0.9em',
letterSpacing: '1vw'
}}
>
{tieScores[index]}
</sup>
)}
</div>
)
);
};

return loading ? (
<p>Loading ...</p>
) : (
<div className={styles.dashTilesContainer}>
<div className={styles.matchInfoContainer}>
<div className={styles.containerHeader}>
<div className={styles.containerTitle}>Final Score</div>
{isTagged && <div className={styles.taggedBadge}>Tagged</div>}
</div>

{/* Player 1 */}
<div className={styles.playerInfo}>
<div className={styles.playerSchoolImgcontainerhome}>
<img src={clientLogo} alt={`${clientTeam} logo`} />
</div>
<div className={styles.playerInfoName}>
{player1Name} {isUnfinished && '(UF)'}
</div>
<div className={styles.playerInfoScore}>
{player1FinalScores.map((score, index) =>
renderScore(score, index, true, player1TieScores)
return (
!isNaN(score.score) && (
<div
key={index}
style={{
position: 'relative',
opacity
}}
>
{score.score}
{tieScores[index] && (
<sup
style={{
position: 'absolute',
fontSize: '0.6em',
top: '-0.3em',
left: '0.9em',
letterSpacing: '1vw'
}}
>
{tieScores[index]}
</sup>
)}
</div>
</div>
)
)
}

{/* Player 2 */}
<div className={styles.playerInfo}>
<div className={styles.playerSchoolImgcontainer}>
<img src={opponentLogo} alt={`${opponentTeam} logo`} />
return loading ? (
<p>Loading ...</p>
) : (
<div className={styles.dashTilesContainer}>
<div className={styles.matchInfoContainer}>
<div className={styles.containerHeader}>
<div className={styles.containerTitle}>Final Score</div>
{isTagged && <div className={styles.taggedBadge}>Tagged</div>}
</div>
<div className={styles.playerInfoName}>
{player2Name}

{/* Player 1 */}
<div className={styles.playerInfo}>
<div className={styles.playerSchoolImgcontainerhome}>
<img src={clientLogo} alt={`${clientTeam} logo`} />

Check warning on line 92 in app/components/DashboardTile.js

View workflow job for this annotation

GitHub Actions / lint 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
</div>
<div className={styles.playerInfoName}>
{player1Name} {isUnfinished && '(UF)'}
</div>
<div className={styles.playerInfoScore}>
{player1FinalScores.map((score, index) =>
renderScore(score, index, true, player1TieScores)
)}
</div>
</div>
<div className={styles.playerInfoScore}>
{player2FinalScores.map((score, index) =>
renderScore(score, index, false, player2TieScores)
)}

{/* Player 2 */}
<div className={styles.playerInfo}>
<div className={styles.playerSchoolImgcontainer}>
<img src={opponentLogo} alt={`${opponentTeam} logo`} />

Check warning on line 107 in app/components/DashboardTile.js

View workflow job for this annotation

GitHub Actions / lint 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
</div>
<div className={styles.playerInfoName}>{player2Name}</div>
<div className={styles.playerInfoScore}>
{player2FinalScores.map((score, index) =>
renderScore(score, index, false, player2TieScores)
)}
</div>
</div>
</div>
</div>
</div>
);
};
)
}

export default DashboardTile;
export default DashboardTile
102 changes: 46 additions & 56 deletions app/components/MatchTiles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,16 @@ import React, { useEffect, useState } from 'react'
import styles from '@/app/styles/MatchTiles.module.css'
import getTeams from '@/app/services/getTeams.js'

// Calculate winner of match
const calculateWinner = (player1, player2) => {
const player1Total = player1.reduce(
(total, current) => (!isNaN(current.score) ? total + current.score : total),
0
)
const player2Total = player2.reduce(
(total, current) => (!isNaN(current.score) ? total + current.score : total),
0
)
return player1Total > player2Total
}

// Calculate opacity for individual scores
const isOpaque = (player1Scores, player2Scores) => {
return player1Scores.map((score, index) => {
const player1Score = !isNaN(score.score) ? score.score : 0;
const player2Score = !isNaN(player2Scores[index]?.score) ? player2Scores[index].score : 0;
return player1Score > player2Score;
});
};
const player1Score = !isNaN(score.score) ? score.score : 0
const player2Score = !isNaN(player2Scores[index]?.score)
? player2Scores[index].score
: 0
return player1Score > player2Score
})
}

const MatchTiles = ({
// matchName,
Expand All @@ -44,8 +33,8 @@ const MatchTiles = ({
const [clientLogo, setClientLogo] = useState('')
const [opponentLogo, setOpponentLogo] = useState('')

// to calculate the opcaity
const player1Opacity = isOpaque(player1FinalScores, player2FinalScores);
// to calculate the opcaity
const player1Opacity = isOpaque(player1FinalScores, player2FinalScores)

useEffect(() => {
const fetchLogos = async () => {
Expand All @@ -69,35 +58,41 @@ const MatchTiles = ({

// Render function for scores
const renderScore = (score, index, isPlayer1, tieScores) => {
const opacity = isPlayer1 ?
(player1Opacity[index] ? '100%' : '40%') :
(!player1Opacity[index] ? '100%' : '40%');
const opacity = isPlayer1
? player1Opacity[index]
? '100%'
: '40%'
: !player1Opacity[index]
? '100%'
: '40%'

return !isNaN(score.score) && (
<div
key={index}
style={{
position: 'relative',
opacity
}}
>
{score.score}
{tieScores[index] && (
<sup
style={{
position: 'absolute',
fontSize: '0.6em',
top: '-0.3em',
left: '0.9em',
letterSpacing: '1vw'
}}
>
{tieScores[index]}
</sup>
)}
</div>
);
};
return (
!isNaN(score.score) && (
<div
key={index}
style={{
position: 'relative',
opacity
}}
>
{score.score}
{tieScores[index] && (
<sup
style={{
position: 'absolute',
fontSize: '0.6em',
top: '-0.3em',
left: '0.9em',
letterSpacing: '1vw'
}}
>
{tieScores[index]}
</sup>
)}
</div>
)
)
}

return (
<div className={styles.matchTilesContainer}>
Expand All @@ -117,7 +112,7 @@ const MatchTiles = ({
{player1Name} {isUnfinished && '(UF)'}
</div>
<div className={styles.playerInfoScore}>
{player1FinalScores.map((score, index) =>
{player1FinalScores.map((score, index) =>
renderScore(score, index, true, player1TieScores)
)}
</div>
Expand All @@ -127,20 +122,15 @@ const MatchTiles = ({
<div className={styles.playerSchoolImgcontainer}>
<img src={opponentLogo} alt={`${opponentTeam} logo`} />

Check warning on line 123 in app/components/MatchTiles.js

View workflow job for this annotation

GitHub Actions / lint 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
</div>
<div className={styles.playerInfoName}>
{player2Name}
</div>
<div className={styles.playerInfoName}>{player2Name}</div>
<div className={styles.playerInfoScore}>
{player2FinalScores.map((score, index) =>
{player2FinalScores.map((score, index) =>
renderScore(score, index, false, player2TieScores)
)}
</div>
</div>
</div>




{/* Match Location */}
{displaySections.info && (
<div className={styles.matchInfoContainer}>
Expand Down
Loading

0 comments on commit 40b6c56

Please sign in to comment.