Merge pull request #167 from daithihearn/ui-enhancements-2

UI Improvements
daithihearn · May 19, 2023 · b8b3682 · b8b3682
2 parents 348a2c4 + 4161c76
commit b8b3682
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "frontend",
-    "version": "7.0.4",
+    "version": "7.0.5",
     "description": "React frontend for the Cards 110",
     "author": "Daithi Hearn",
     "license": "MIT",

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,7 +1,7 @@
 {
   "short_name": "Cards 110",
   "name": "Cards 110",
-  "version": "7.0.4",
+  "version": "7.0.5",
   "icons": [
     {
       "src": "./assets/favicon.png",

diff --git a/src/components/Header/NavBar.tsx b/src/components/Header/NavBar.tsx
@@ -50,6 +50,9 @@ const NavBar = () => {
         if (!gameId) {
             return
         }
+        handleClose()
+        handleCloseDeleteGameModal()
+
         dispatch(GameService.deleteGame(gameId))
             .then(() => {
                 enqueueSnackbar("Game deleted")
@@ -178,7 +181,7 @@ const NavBar = () => {
                         onClick={handleCloseDeleteGameModal}>
                         No
                     </Button>
-                    <Button color="primary" onClick={deleteGame}>
+                    <Button color="secondary" onClick={deleteGame}>
                         Yes
                     </Button>
                 </DialogActions>

diff --git a/src/components/Leaderboard/DoublesLeaderboard.tsx b/src/components/Leaderboard/DoublesLeaderboard.tsx
@@ -12,6 +12,9 @@ import {
     Avatar,
     ListItemText,
     ListItemSecondaryAction,
+    Box,
+    Grid,
+    Typography,
 } from "@mui/material"
 
 interface LeaderBoardPlayer {
@@ -104,36 +107,54 @@ const DoublesLeaderboard = () => {
     }
 
     return (
-        <React.Fragment>
-            <List>
-                {leaderboardData.map((item, index) => (
-                    <ListItem key={index}>
-                        <ListItemIcon>
-                            <img
-                                alt={item.player1.name}
-                                src={item.player1.picture}
-                                className="avatar-large"
-                            />
-                        </ListItemIcon>
-                        <ListItemIcon>
-                            <img
-                                alt={item.player2.name}
-                                src={item.player2.picture}
-                                className="avatar-large"
-                            />
-                        </ListItemIcon>
-                        <ListItemText
-                            primary={`Score: ${item.score}, Rings: ${item.rings}`}
-                            sx={{ textAlign: "center", fontWeight: "bold" }}
+        <Box>
+            {leaderboardData.map((item, index) => (
+                <Grid
+                    container
+                    alignItems="center"
+                    key={item.teamId}
+                    sx={{ minWidth: "300px" }}>
+                    <Grid item xs={3} sx={{ textAlign: "center" }}>
+                        <img
+                            alt={item.player1.name}
+                            src={item.player1.picture}
+                            className="avatar"
                         />
+                        {isGameActive && item.player1.cardsBought && (
+                            <Typography sx={{ textAlign: "center" }}>
+                                Bought({item.player1.cardsBought})
+                            </Typography>
+                        )}
+                    </Grid>
+                    <Grid item xs={3} sx={{ textAlign: "center" }}>
+                        <img
+                            alt={item.player2.name}
+                            src={item.player2.picture}
+                            className="avatar"
+                        />
+                        {isGameActive && item.player2.cardsBought && (
+                            <Typography sx={{ textAlign: "center" }}>
+                                Bought({item.player2.cardsBought})
+                            </Typography>
+                        )}
+                    </Grid>
+
+                    <Grid item xs={3}>
+                        <Typography sx={{ textAlign: "center" }}>
+                            Score({item.score})
+                        </Typography>
+
+                        <Typography sx={{ textAlign: "center" }}>
+                            Rings({item.rings})
+                        </Typography>
+                    </Grid>
 
-                        <ListItemSecondaryAction>
-                            {item.winner && <VictoryIcon />}
-                        </ListItemSecondaryAction>
-                    </ListItem>
-                ))}
-            </List>
-        </React.Fragment>
+                    <Grid item xs={3} sx={{ textAlign: "right" }}>
+                        {item.winner ? <VictoryIcon /> : null}
+                    </Grid>
+                </Grid>
+            ))}
+        </Box>
     )
 }
 

diff --git a/src/components/Leaderboard/SinglesLeaderboard.tsx b/src/components/Leaderboard/SinglesLeaderboard.tsx
@@ -70,8 +70,12 @@ const SinglesLeaderboard = () => {
 
     return (
         <Box>
-            {leaderboardData.map((item, index) => (
-                <Grid container alignItems="center" key={item.name}>
+            {leaderboardData.map(item => (
+                <Grid
+                    container
+                    alignItems="center"
+                    key={item.name}
+                    sx={{ minWidth: "300px" }}>
                     <Grid item xs={4} sx={{ textAlign: "left" }}>
                         <img
                             alt={item.name}
@@ -82,12 +86,16 @@ const SinglesLeaderboard = () => {
 
                     <Grid item xs={4}>
                         <Typography sx={{ textAlign: "center" }}>
-                            Score({item.score}) Rings({item.rings})
+                            Score({item.score})
+                        </Typography>
+
+                        <Typography sx={{ textAlign: "center" }}>
+                            Rings({item.rings})
                         </Typography>
 
                         {isGameActive && (
                             <Typography sx={{ textAlign: "center" }}>
-                                Cards Bought({item.cardsBought})
+                                Bought({item.cardsBought})
                             </Typography>
                         )}
                     </Grid>