Skip to content

Commit

Permalink
Merge pull request #349 from flickmatch/players-formations-branch
Browse files Browse the repository at this point in the history 
Hard code Players formations in admin mode for san jose
  • Loading branch information
@abhimanyu-fm
abhimanyu-fm authored Dec 18, 2024
2 parents d0e62d0 + 6cf8622 commit 5b65506
Show file tree
Hide file tree
Showing 12 changed files with 548 additions and 113 deletions.
194 changes: 138 additions & 56 deletions react-fm/package-lock.json
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions react-fm/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"notistack": "^2.0.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-draggable": "^4.4.6",
"react-error-boundary": "^3.1.4",
"react-ga": "^3.3.1",
"react-helmet-async": "^1.3.0",
Expand Down
Binary file added react-fm/public/ground-3d-cropped.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added react-fm/public/ground-portrait.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 9 additions & 3 deletions react-fm/src/pages/eventPage/EventPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,8 +168,14 @@ const EventPage: React.FC = () => {
return cityData?.city;
}

const renderPlayer = (player: PlayerDetail | null | undefined, i: number) => (
<PlayerDetails displayName={player ? player.displayName : 'Add Name'} index={i} key={i} />
const renderPlayer = (player: PlayerDetail | null | undefined, i: number, dummyData: boolean) => (
<PlayerDetails
displayName={player ? player.displayName : 'Add Name'}
index={i}
key={i}
points={player?.points}
dummyData={dummyData}
/>
);

if (loading) {
Expand Down Expand Up @@ -280,7 +286,7 @@ const EventPage: React.FC = () => {
{Array.from({ length: event?.reservedPlayersCount || 0 }, (_, i) => {
const player =
i < reservedPlayersCount(event) || 0 ? event?.reservedPlayersList[i] : null;
return renderPlayer(player, i);
return renderPlayer(player, i, event.dummyData);
})}
</Grid>
</Box>
Expand Down
2 changes: 2 additions & 0 deletions react-fm/src/pages/eventPage/EventPage.types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
type PlayerDetail = {
displayName: string;
points?: { x: number; y: number };
};

type Event = {
Expand All @@ -20,6 +21,7 @@ type Event = {
date: string;
time: string;
waitListPlayers: WaitListPlayerList[];
dummyData: boolean;
credits?: number;
};

Expand Down
104 changes: 87 additions & 17 deletions react-fm/src/pages/matchQueues/GamesList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,8 +82,15 @@ export const GamesList: FC<event> = ({ gameEvent, cityName, cityNameId, addPlaye
}
}, []);

const renderPlayer = (player: ReservedPlayerDetails | null, i: number) => (
<PlayerDetails displayName={player ? player.displayName : 'Add Name'} index={i} key={i} />
const renderPlayer = (player: ReservedPlayerDetails | null, i: number, dummyData: boolean) => (
<PlayerDetails
displayName={player ? player.displayName : 'Add Name'}
index={i}
key={i}
points={player?.points}
mobilePoints={player?.mobilePoints}
dummyData={dummyData}
/>
);

const teamA = (teamAColor: string) => (
Expand Down Expand Up @@ -181,7 +188,7 @@ export const GamesList: FC<event> = ({ gameEvent, cityName, cityNameId, addPlaye
className={
highLighted && window.location.hash.substring(1) === playingEvent.uniqueEventId
? styles.blink
: ''
: styles.accordionDetailsContainer
}
>
<Box className={styles.box} sx={{ flexGrow: 1 }}>
Expand Down Expand Up @@ -216,36 +223,99 @@ export const GamesList: FC<event> = ({ gameEvent, cityName, cityNameId, addPlaye
i < playingEvent.reservedPlayersList.length
? playingEvent.reservedPlayersList[i]
: null;
return renderPlayer(player, i);
return renderPlayer(player, i, playingEvent.dummyData);
})}
</Grid>

<Typography className={styles.versus}>v/s</Typography>
{teamB(playingEvent?.team2Color || 'Black')}

<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
<Grid container spacing={{ xs: 2, md: 4 }} columns={{ xs: 4, sm: 8, md: 12 }}>
{Array.from({ length: playingEvent.reservedPlayersCount / 2 }, (_, i) => {
const player =
i < playingEvent.reservedPlayersList.length
? playingEvent.reservedPlayersList[
i + playingEvent.reservedPlayersCount / 2
]
: null;
return renderPlayer(player, i + playingEvent.reservedPlayersCount / 2);
return renderPlayer(
player,
i + playingEvent.reservedPlayersCount / 2,
playingEvent.dummyData,
);
})}
</Grid>
</Box>
) : (
<Box>
<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
{Array.from({ length: playingEvent.reservedPlayersCount }, (_, i) => {
const player =
i < playingEvent.reservedPlayersList.length
? playingEvent.reservedPlayersList[i]
: null;
return renderPlayer(player, i);
})}
</Grid>
</Box>
<>
{userState.login.isAdmin && playingEvent.dummyData && isPortrait ? (
// <Box
// className={
// isPortrait
// ? styles.portraitPlayersNameComponent
// : styles.playersNameComponent
// }
// >
// <Grid container spacing={{ xs: 2, md: 1 }} columns={{ xs: 4, sm: 8, md: 12 }}>
// {Array.from({ length: playingEvent.reservedPlayersCount }, (_, i) => {
// const player =
// i < playingEvent.reservedPlayersList.length
// ? playingEvent.reservedPlayersList[i]
// : null;
// return renderPlayer(player, i);
// })}
// </Grid>
// </Box>
<Box style={{ width: 100 }}>
{/* <Box style={{ display: isPortrait ? 'none' : 'flex' }}>
{Array.from({ length: playingEvent.reservedPlayersCount }, (_, i) => {
const player =
i < playingEvent.reservedPlayersList.length
? playingEvent.reservedPlayersList[i]
: null;
return renderPlayer(player, i, playingEvent.dummyData);
})}
</Box> */}
</Box>
) : (
<Box>
<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
{Array.from({ length: playingEvent.reservedPlayersCount }, (_, i) => {
const player =
i < playingEvent.reservedPlayersList.length
? playingEvent.reservedPlayersList[i]
: null;
return renderPlayer(player, i, playingEvent.dummyData);
})}
</Grid>
</Box>
)}
{userState.login.isAdmin && playingEvent.dummyData && isPortrait ? (
<Box
className={
isPortrait
? styles.portraitGroundImageContainer
: styles.groundImageContainer
}
>
<Box className={styles.dragContainer}>
{Array.from({ length: playingEvent.reservedPlayersCount }, (_, i) => {
const player =
i < playingEvent.reservedPlayersList.length
? playingEvent.reservedPlayersList[i]
: null;
return renderPlayer(player, i, playingEvent.dummyData);
})}
</Box>
<img
src={isPortrait ? 'ground-portrait.jpeg' : '/ground-3d-cropped.jpeg'}
alt="ground"
height={750}
className={isPortrait ? styles.portraitGroundImage : styles.groundImage}
/>
</Box>
) : null}
</>
)}
</Box>
</AccordionDetails>
Expand Down
47 changes: 43 additions & 4 deletions react-fm/src/pages/matchQueues/Queue.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@ body {
}

.container {
width: 80%;
width: 85%;
margin: auto;
margin-top: 30px;
}

.mobileContainer {
width: 90%;
width: 100%;
margin: auto;
margin-top: 30px;
}
Expand Down Expand Up @@ -78,9 +78,14 @@ body {
color: #4ce95a;
}

.accordionDetailsContainer {
padding: 0px;
}

.box {
margin-top: 20px;
margin-left: 25px;
//margin-left: 25px;
position: relative;
}

.reservedPlayersContainer {
Expand All @@ -104,9 +109,10 @@ body {
.reservedPlayers,
.waitListPlayers {
color: #4ce95a;
margin-bottom: 15px;
margin-bottom: 30px;
font-size: 20px;
font-weight: 600;
margin-left: 35px;
}

.skeletonContainer {
Expand Down Expand Up @@ -191,3 +197,36 @@ body {
opacity: 1;
}
}

.playersNameComponent {
width: 100%;
}

.groundImage {
height: auto;
width: 100%;
}

.dragContainer {
position: absolute;
z-index: 9999;
width: 100%;
height: 100%;
}

////////////// for mobile

.portraitPlayersNameComponent {
z-index: 9999;
width: 100%;
}

.portraitGroundImageContainer {
height: 100%;
width: 100%;
}

.portraitGroundImage {
height: 100%;
width: 100%;
}
58 changes: 57 additions & 1 deletion react-fm/src/pages/matchQueues/data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -338,7 +338,7 @@ const dummyData = {
time: '7:00PM-8:00PM',
dummyData: true,
venueName: 'Vista Montana Park',
reservedPlayersCount: 18,
reservedPlayersCount: 22,
waitListPlayersCount: 9,
venueLocationLink: 'https://goo.gl/maps/ivkhHaXWM3RBTJ5r9',
team_division: false,
Expand All @@ -348,57 +348,113 @@ const dummyData = {
reservedPlayersList: [
{
displayName: 'Chen',
points: { x: 3, y: 46 },
mobilePoints: { x: 46, y: 3 },
},
{
displayName: 'Pablo',
points: { x: 20, y: 10 },
mobilePoints: { x: 6, y: 12 },
},
{
displayName: 'Feng',
points: { x: 20, y: 30 },
mobilePoints: { x: 30, y: 12 },
},
{
displayName: 'Leo',
points: { x: 20, y: 60 },
mobilePoints: { x: 63, y: 12 },
},
{
displayName: 'Himesh',
points: { x: 20, y: 80 },
mobilePoints: { x: 84, y: 12 },
},
{
displayName: 'Arturito',
points: { x: 27, y: 10 },
mobilePoints: { x: 6, y: 20 },
},
{
displayName: 'Diego',
points: { x: 27, y: 30 },
mobilePoints: { x: 30, y: 20 },
},
{
displayName: 'Mateo',
points: { x: 27, y: 60 },
mobilePoints: { x: 63, y: 20 },
},
{
displayName: 'Rafael',
points: { x: 27, y: 80 },
mobilePoints: { x: 84, y: 20 },
},
{
displayName: 'Shahin',
points: { x: 35, y: 21 },
mobilePoints: { x: 30, y: 28 },
},
{
displayName: 'Eva',
points: { x: 35, y: 67 },
mobilePoints: { x: 63, y: 28 },
},
{
displayName: 'Astva',
points: { x: 47, y: 21 },
mobilePoints: { x: 30, y: 52 },
},
{
displayName: 'Rishi',
points: { x: 47, y: 67 },
mobilePoints: { x: 63, y: 52 },
},
{
displayName: 'Frank',
points: { x: 56, y: 10 },
mobilePoints: { x: 6, y: 60 },
},
{
displayName: 'Ahmad',
points: { x: 56, y: 30 },
mobilePoints: { x: 30, y: 60 },
},
{
displayName: 'Luca',
points: { x: 56, y: 60 },
mobilePoints: { x: 63, y: 60 },
},
{
displayName: 'Dario',
points: { x: 56, y: 80 },
mobilePoints: { x: 84, y: 60 },
},
{
displayName: 'Bianca',
points: { x: 63, y: 10 },
mobilePoints: { x: 6, y: 68 },
},
{
displayName: 'Sharan',
points: { x: 63, y: 30 },
mobilePoints: { x: 30, y: 68 },
},
{
displayName: 'Ferruro',
points: { x: 63, y: 60 },
mobilePoints: { x: 63, y: 68 },
},
{
displayName: 'Sahil',
points: { x: 63, y: 80 },
mobilePoints: { x: 84, y: 68 },
},
{
displayName: 'Hitesh',
points: { x: 79, y: 46 },
mobilePoints: { x: 46, y: 78 },
},
],
waitListPlayers: [
Expand Down
Loading

0 comments on commit 5b65506

Please sign in to comment.