Skip to content

Commit 4eceed6

Browse files
NathanYJiangNathanYJiang
committed
shrinking top title bar & changing point ui
1 parent 117d5bd commit 4eceed6

5 files changed

Lines changed: 622 additions & 243 deletions

File tree

‎app/components/MatchTiles.js‎

Lines changed: 115 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@ const MatchTiles = ({
3030
player2UTR,
3131
isUnfinished,
3232
tagged = { status: false },
33-
displaySections = { score: true, info: true, matchup: true } // default all true
33+
displaySections = { score: true, info: true, matchup: true }, // default all true
34+
compact = false
3435
}) => {
3536
const { clientLogo, opponentLogo, loading } = useTeamLogos(
3637
clientTeam,
@@ -88,6 +89,119 @@ const MatchTiles = ({
8889
)
8990
}
9091

92+
if (compact) {
93+
return (
94+
<div className={styles.compactContainer}>
95+
{/* Player 1 */}
96+
<div className={styles.compactPlayerSide}>
97+
<div className={styles.compactLogo}>
98+
<Image
99+
src={clientLogo || '/images/default-logo.svg'}
100+
alt={`${clientTeam} logo`}
101+
width={35}
102+
height={35}
103+
style={{ objectFit: 'contain', width: '100%', height: '100%' }}
104+
onError={(e) => {
105+
if (e.target.src !== '/images/default-logo.svg')
106+
e.target.src = '/images/default-logo.svg'
107+
else e.target.style.display = 'none'
108+
}}
109+
/>
110+
</div>
111+
<div className={styles.compactPlayerName}>
112+
{player1Name}
113+
{isUnfinished && ' (UF)'}
114+
{player1UTR && ` (${player1UTR})`}
115+
</div>
116+
<div className={styles.compactScores}>
117+
{player1FinalScores.map((score, index) =>
118+
!isNaN(score.score) ? (
119+
<div
120+
key={index}
121+
className={styles.compactScoreVal}
122+
style={{ opacity: player1Opacity[index] ? 1 : 0.4 }}
123+
>
124+
{score.score}
125+
{player1TieScores[index] && (
126+
<sup
127+
style={{
128+
position: 'absolute',
129+
fontSize: '0.6em',
130+
top: '-0.3em',
131+
left: '0.9em'
132+
}}
133+
>
134+
{player1TieScores[index]}
135+
</sup>
136+
)}
137+
</div>
138+
) : null
139+
)}
140+
</div>
141+
</div>
142+
143+
<div className={styles.compactVs}>vs</div>
144+
145+
{/* Player 2 */}
146+
<div
147+
className={`${styles.compactPlayerSide} ${styles.compactPlayerSideRight}`}
148+
>
149+
<div className={styles.compactScores}>
150+
{player2FinalScores.map((score, index) =>
151+
!isNaN(score.score) ? (
152+
<div
153+
key={index}
154+
className={styles.compactScoreVal}
155+
style={{ opacity: !player1Opacity[index] ? 1 : 0.4 }}
156+
>
157+
{score.score}
158+
{player2TieScores[index] && (
159+
<sup
160+
style={{
161+
position: 'absolute',
162+
fontSize: '0.6em',
163+
top: '-0.3em',
164+
left: '0.9em'
165+
}}
166+
>
167+
{player2TieScores[index]}
168+
</sup>
169+
)}
170+
</div>
171+
) : null
172+
)}
173+
</div>
174+
<div className={styles.compactPlayerName}>
175+
{player2Name}
176+
{player2UTR && ` (${player2UTR})`}
177+
</div>
178+
<div className={styles.compactLogo}>
179+
<Image
180+
src={opponentLogo || '/images/default-logo.svg'}
181+
alt={`${opponentTeam} logo`}
182+
width={35}
183+
height={35}
184+
style={{ objectFit: 'contain', width: '100%', height: '100%' }}
185+
onError={(e) => {
186+
if (e.target.src !== '/images/default-logo.svg')
187+
e.target.src = '/images/default-logo.svg'
188+
else e.target.style.display = 'none'
189+
}}
190+
/>
191+
</div>
192+
</div>
193+
194+
{/* Meta */}
195+
{(date || matchDetails) && (
196+
<div className={styles.compactMeta}>
197+
{date && <span>{date}</span>}
198+
{matchDetails && <span>{matchDetails}</span>}
199+
</div>
200+
)}
201+
</div>
202+
)
203+
}
204+
91205
return (
92206
<div className={styles.matchTilesContainer}>
93207
<div className={styles.matchInfoContainer}>

0 commit comments

Comments
 (0)