Skip to content

Commit a576ea6

Browse files
NathanYJiangNathanYJiang
committed
Merge DashboardTile into MatchTiles (#402)
- Moved DashboardTile logic (mobile abbreviation, winner calculations) into MatchTiles component - Consolidated responsive tile CSS rules using .isDashboard wrapper - Updated DashTileContainer to use MatchTiles exclusively - Removed obsolete DashboardTile component and corresponding CSS
1 parent 6e6e801 commit a576ea6

3 files changed

Lines changed: 157 additions & 11 deletions

File tree

‎app/components/DashTileContainer.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import DashboardTile from '@/app/components/DashboardTile'
2+
import MatchTiles from '@/app/components/MatchTiles'
33
import styles from '@/app/styles/Dashboard.module.css'
44

55
const DashTileContainer = ({ matches, matchType, onTileClick, cols = 3 }) => {
@@ -20,7 +20,7 @@ const DashTileContainer = ({ matches, matchType, onTileClick, cols = 3 }) => {
2020
className={styles.tileWrapper}
2121
onClick={() => onTileClick(match.videoID || match.id)}
2222
>
23-
<DashboardTile
23+
<MatchTiles
2424
matchName={`${match.opponent} ${match.date}`}
2525
clientTeam={match.teams.clientTeam}
2626
opponentTeam={match.teams.opponentTeam}
@@ -40,6 +40,8 @@ const DashTileContainer = ({ matches, matchType, onTileClick, cols = 3 }) => {
4040
)}
4141
isUnfinished={false}
4242
isTagged={match.published}
43+
isDashboard={true}
44+
displaySections={{ score: true, info: false, matchup: false }}
4345
/>
4446
</div>
4547
))}

‎app/components/MatchTiles.js‎

Lines changed: 59 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react'
1+
import React, { useState, useEffect } from 'react'
22
import Image from 'next/image'
33
import styles from '@/app/styles/MatchTiles.module.css'
44
import { useTeamLogos } from '@/app/hooks/useTeamLogos'
@@ -30,16 +30,57 @@ const MatchTiles = ({
3030
player2UTR,
3131
isUnfinished,
3232
tagged = { status: false },
33-
displaySections = { score: true, info: true, matchup: true } // default all true
33+
isTagged = false,
34+
displaySections = { score: true, info: true, matchup: true }, // default all true
35+
isDashboard = false
3436
}) => {
3537
const { clientLogo, opponentLogo, loading } = useTeamLogos(
3638
clientTeam,
3739
opponentTeam
3840
)
3941

42+
const [isMobile, setIsMobile] = useState(false)
43+
44+
useEffect(() => {
45+
const handleResize = () => setIsMobile(window.innerWidth <= 768)
46+
handleResize()
47+
window.addEventListener('resize', handleResize)
48+
return () => window.removeEventListener('resize', handleResize)
49+
}, [])
50+
51+
const formatName = (name) => {
52+
if (!name) return ''
53+
const [first, ...rest] = name.split(' ')
54+
const last = rest.pop()
55+
return isMobile && last ? `${first} ${last[0]}.` : name
56+
}
57+
4058
// to calculate the opacity
4159
const player1Opacity = isOpaque(player1FinalScores, player2FinalScores)
4260

61+
// Get match winner from Opacity Array
62+
const player1Wins = player1Opacity.filter(Boolean).length
63+
const player2Wins = player1Opacity.length - player1Wins // Total length - player1Wins
64+
const player1IsWinner = player1Wins > player2Wins
65+
const player2IsWinner = player2Wins > player1Wins
66+
67+
const renderNameOpacity = (playerName, utr, didWin, isUnfinishedLocal) => {
68+
return (
69+
<div
70+
style={{
71+
opacity: isUnfinishedLocal ? '40%' : didWin ? '100%' : '40%',
72+
display: 'flex',
73+
alignItems: 'center'
74+
}}
75+
>
76+
{playerName} {isUnfinishedLocal && '(UF)'}
77+
{utr && ` (${utr})`}
78+
</div>
79+
)
80+
}
81+
82+
const actuallyTagged = isTagged || tagged?.status
83+
4384
if (loading) {
4485
return <div>Loading logos...</div>
4586
}
@@ -95,11 +136,13 @@ const MatchTiles = ({
95136
}
96137

97138
return (
98-
<div className={styles.matchTilesContainer}>
139+
<div
140+
className={`${styles.matchTilesContainer} ${isDashboard ? styles.isDashboard : ''}`}
141+
>
99142
<div className={styles.matchInfoContainer}>
100143
<div className={styles.matchTopLine}>
101144
<div className={styles.containerTitle}>Final Score</div>
102-
{tagged.status && (
145+
{actuallyTagged && (
103146
<div className={styles.containerTagged}>Tagged</div>
104147
)}
105148
</div>
@@ -121,8 +164,12 @@ const MatchTiles = ({
121164
/>
122165
</div>
123166
<div className={styles.playerInfoName}>
124-
{player1Name} {isUnfinished && '(UF)'}
125-
{player1UTR && `(${player1UTR})`}
167+
{renderNameOpacity(
168+
formatName(player1Name),
169+
player1UTR,
170+
player1IsWinner,
171+
isUnfinished
172+
)}
126173
</div>
127174
<div className={styles.playerInfoScore}>
128175
{player1FinalScores.map((score, index) =>
@@ -148,7 +195,12 @@ const MatchTiles = ({
148195
/>
149196
</div>
150197
<div className={styles.playerInfoName}>
151-
{player2Name} {player2UTR && `(${player2UTR})`}
198+
{renderNameOpacity(
199+
formatName(player2Name),
200+
player2UTR,
201+
player2IsWinner,
202+
false
203+
)}
152204
</div>
153205
<div className={styles.playerInfoScore}>
154206
{player2FinalScores.map((score, index) =>

‎app/styles/MatchTiles.module.css‎

Lines changed: 94 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,14 +60,14 @@
6060
font-weight: 600;
6161
overflow: hidden;
6262
white-space: nowrap;
63+
text-overflow: ellipsis;
6364
}
6465

6566
.playerInfoScore {
66-
position: absolute;
6767
display: flex;
6868
font-size: 1.5vw;
6969
font-weight: 600;
70-
padding-left: 22.6vw;
70+
margin-left: auto;
7171
letter-spacing: 0.5vw;
7272
}
7373

@@ -91,3 +91,95 @@
9191
align-items: center; /* Center the image horizontally */
9292
overflow: hidden; /* Ensure the image doesn't overflow the container */
9393
}
94+
95+
/* Dashboard Overrides */
96+
.isDashboard {
97+
width: 100% !important;
98+
padding-top: 1vw !important;
99+
}
100+
101+
.isDashboard .matchInfoContainer {
102+
width: 100% !important;
103+
margin: 0 !important;
104+
padding: 0.8vw !important;
105+
}
106+
107+
.isDashboard .matchInfoContainer:hover {
108+
cursor: pointer;
109+
transform: translateY(-2px);
110+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
111+
transition:
112+
transform 0.2s ease-in-out,
113+
box-shadow 0.2s ease-in-out;
114+
}
115+
116+
.isDashboard .containerTitle {
117+
font-size: 1vw !important;
118+
padding-bottom: 0.4vw !important;
119+
}
120+
121+
.isDashboard .containerTagged {
122+
font-size: 0.7vw !important;
123+
padding: 0.2vw 0.5vw !important;
124+
border-radius: 0.6vw !important;
125+
}
126+
127+
.isDashboard .playerInfo {
128+
font-size: 1.3vw !important;
129+
padding-bottom: 0.4vw !important;
130+
align-items: center !important;
131+
}
132+
133+
.isDashboard .playerInfoName {
134+
font-size: 1.3vw !important;
135+
padding-left: 0.8vw !important;
136+
}
137+
138+
.isDashboard .playerInfoScore {
139+
font-size: 1.3vw !important;
140+
letter-spacing: 0.4vw !important;
141+
}
142+
143+
.isDashboard .playerSchoolImgcontainerhome,
144+
.isDashboard .playerSchoolImgcontainer {
145+
width: 40px !important;
146+
height: 30px !important;
147+
max-width: none !important;
148+
max-height: none !important;
149+
padding: 0 !important;
150+
}
151+
152+
@media (max-width: 768px) {
153+
.isDashboard .matchInfoContainer {
154+
border-radius: 10px !important;
155+
padding-top: 12px !important;
156+
padding-bottom: 12px !important;
157+
padding-left: 10px !important;
158+
}
159+
.isDashboard .containerTitle {
160+
font-size: 3.5vw !important;
161+
font-weight: 400 !important;
162+
}
163+
.isDashboard .containerTagged {
164+
font-size: 8px !important;
165+
padding: 4px 8px !important;
166+
border-radius: 4px !important;
167+
}
168+
.isDashboard .playerInfo {
169+
font-size: 1vw !important;
170+
}
171+
.isDashboard .playerInfoName {
172+
font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
173+
padding-left: 6px !important;
174+
}
175+
.isDashboard .playerInfoScore {
176+
font-size: 4vw !important;
177+
letter-spacing: 5px !important;
178+
}
179+
.isDashboard .playerSchoolImgcontainerhome,
180+
.isDashboard .playerSchoolImgcontainer {
181+
width: 20px !important;
182+
height: 20px !important;
183+
}
184+
}
185+

0 commit comments

Comments
 (0)