Skip to content

Commit

Permalink
Merge pull request #267 from bruin-tennis-consulting/245-v2-scoreboar…
Browse files Browse the repository at this point in the history 
…d-correct-bolding

Fixed the bolding issue for Scoreboard,Dashboard, and MatchTiles
  • Loading branch information
@Fredenck
Fredenck authored Jan 17, 2025
2 parents 20ffbd8 + 40b6c56 commit 61ac2bd
Show file tree
Hide file tree
Showing 3 changed files with 172 additions and 197 deletions.
154 changes: 63 additions & 91 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 @@ -33,11 +20,62 @@ const DashboardTile = ({
const [clientLogo, setClientLogo] = useState(null)
const [opponentLogo, setOpponentLogo] = useState(null)

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
})
}

// Calculate opacity map before rendering
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%'

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>
) : (
Expand All @@ -47,97 +85,31 @@ const DashboardTile = ({
<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`} />

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}
style={{
opacity:
isUnfinished ||
!calculateWinner(player1FinalScores, player2FinalScores)
? '40%'
: '100%'
}}
>
<div className={styles.playerInfoName}>
{player1Name} {isUnfinished && '(UF)'}
</div>
<div
className={styles.playerInfoScore}
style={{
opacity:
isUnfinished ||
!calculateWinner(player1FinalScores, player2FinalScores)
? '40%'
: '100%'
}}
>
{player1FinalScores.map(
(score, index) =>
!isNaN(score.score) && (
<div key={index} style={{ position: 'relative' }}>
{score.score}
{player1TieScores[index] && (
<sup
style={{
position: 'absolute',
fontSize: '0.6em',
top: '-0.3em',
left: '0.9em',
letterSpacing: '1vw'
}}
>
{player1TieScores[index]}
</sup>
)}
</div>
)
<div className={styles.playerInfoScore}>
{player1FinalScores.map((score, index) =>
renderScore(score, index, true, player1TieScores)
)}
</div>
</div>

{/* 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}
style={{
opacity: calculateWinner(player1FinalScores, player2FinalScores)
? '40%'
: '100%'
}}
>
{player2Name}
</div>
<div
className={styles.playerInfoScore}
style={{
opacity: calculateWinner(player1FinalScores, player2FinalScores)
? '40%'
: '100%'
}}
>
{player2FinalScores.map(
(score, index) =>
!isNaN(score.score) && (
<div key={index} style={{ position: 'relative' }}>
{score.score}
{player2TieScores[index] && (
<sup
style={{
position: 'absolute',
fontSize: '0.6em',
top: '-0.3em',
left: '0.9em',
letterSpacing: '1vw'
}}
>
{player2TieScores[index]}
</sup>
)}
</div>
)
<div className={styles.playerInfoName}>{player2Name}</div>
<div className={styles.playerInfoScore}>
{player2FinalScores.map((score, index) =>
renderScore(score, index, false, player2TieScores)
)}
</div>
</div>
Expand Down
151 changes: 61 additions & 90 deletions app/components/MatchTiles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,15 @@ 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 MatchTiles = ({
Expand All @@ -35,6 +33,9 @@ const MatchTiles = ({
const [clientLogo, setClientLogo] = useState('')
const [opponentLogo, setOpponentLogo] = useState('')

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

useEffect(() => {
const fetchLogos = async () => {
try {
Expand All @@ -55,6 +56,44 @@ const MatchTiles = ({
fetchLogos()
}, [clientTeam, opponentTeam])

// 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 (
<div className={styles.matchTilesContainer}>
<div className={styles.matchInfoContainer}>
Expand All @@ -64,102 +103,34 @@ const MatchTiles = ({
<div className={styles.containerTagged}>Tagged</div>
)}
</div>
{/* Player Information */}
{/* Player 1 Information */}
<div className={styles.playerInfo}>
<div className={styles.playerSchoolImgcontainerhome}>
<img src={clientLogo} alt={`${clientTeam} logo`} />

Check warning on line 109 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}
style={{
opacity:
isUnfinished ||
!calculateWinner(player1FinalScores, player2FinalScores)
? '40%'
: '100%'
}}
>
<div className={styles.playerInfoName}>
{player1Name} {isUnfinished && '(UF)'}
</div>
<div
className={styles.playerInfoScore}
style={{
opacity:
isUnfinished ||
!calculateWinner(player1FinalScores, player2FinalScores)
? '40%'
: '100%'
}}
>
{player1FinalScores.map(
(score, index) =>
!isNaN(score.score) && (
<div key={index} style={{ position: 'relative' }}>
{score.score}
{player1TieScores[index] && (
<sup
style={{
position: 'absolute',
fontSize: '0.6em',
top: '-0.3em',
left: '0.9em',
letterSpacing: '1vw'
}}
>
{player1TieScores[index]}
</sup>
)}
</div>
)
<div className={styles.playerInfoScore}>
{player1FinalScores.map((score, index) =>
renderScore(score, index, true, player1TieScores)
)}
</div>
</div>
{/* Player 2 Information */}
<div className={styles.playerInfo}>
<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}
style={{
opacity: calculateWinner(player1FinalScores, player2FinalScores)
? '40%'
: '100%'
}}
>
{player2Name}
</div>
<div
className={styles.playerInfoScore}
style={{
opacity: calculateWinner(player1FinalScores, player2FinalScores)
? '40%'
: '100%'
}}
>
{player2FinalScores.map(
(score, index) =>
!isNaN(score.score) && (
<div key={index} style={{ position: 'relative' }}>
{score.score}
{player2TieScores[index] && (
<sup
style={{
position: 'absolute',
fontSize: '0.6em',
top: '-0.3em',
left: '0.9em',
letterSpacing: '1vw'
}}
>
{player2TieScores[index]}
</sup>
)}
</div>
)
<div className={styles.playerInfoName}>{player2Name}</div>
<div className={styles.playerInfoScore}>
{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 61ac2bd

Please sign in to comment.