Merge pull request #165 from daithihearn/mobile-style

Mobile style
daithihearn · May 18, 2023 · f36506b · f36506b
2 parents ed2a382 + 910b369
commit f36506b
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "frontend",
-    "version": "7.0.0",
+    "version": "7.0.1",
     "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.0",
+  "version": "7.0.1",
   "icons": [
     {
       "src": "./assets/favicon.png",

diff --git a/src/components/Game/Actions/ActionsWrapper.tsx b/src/components/Game/Actions/ActionsWrapper.tsx
@@ -18,7 +18,7 @@ const ActionsWrapper = () => {
     const isCalled = useAppSelector(getIsRoundCalled)
 
     return (
-        <CardContent className="buttonArea">
+        <CardContent className="button-area">
             <MuiButtonGroup size="large" variant="contained">
                 {isCalling && <Calling />}
                 {isBuying && <Buying />}

diff --git a/src/components/Game/Actions/ThrowCardsWarningModal.tsx b/src/components/Game/Actions/ThrowCardsWarningModal.tsx
@@ -67,7 +67,7 @@ const ThrowCardsWarningModal: React.FC<ModalOpts> = ({
                         ))}
                     </CardContent>
 
-                    <CardContent className="buttonArea">
+                    <CardContent className="button-area">
                         <ButtonGroup size="large">
                             <Button
                                 variant="contained"

diff --git a/src/components/Game/PlayerCard.tsx b/src/components/Game/PlayerCard.tsx
@@ -203,10 +203,7 @@ const PlayerCard: React.FC<PlayerRowI> = ({ player, className }) => {
     if (!profile) return null
 
     return (
-        <Grid
-            item
-            key={`playercard_col_${player.id}`}
-            className="player-column">
+        <Grid item key={`playercard_col_${player.id}`} xs={12}>
             <Card className="no-shadow">
                 <CardMedia
                     image={profile.picture}

diff --git a/src/components/Game/PlayersAndCards.tsx b/src/components/Game/PlayersAndCards.tsx
@@ -19,24 +19,44 @@ const PlayersAndCards = () => {
         [players],
     )
 
+    // Calculate xs based on number of players
+    // 2 players: xs=6
+    // 3 players: xs=4
+    // 4 players: xs=3
+    // 5 players: xs=2
+    // 6 players: xs=2
+    const xs = useMemo(() => {
+        switch (sortedPlayers.length) {
+            case 2:
+                return 6
+            case 3:
+                return 4
+            case 4:
+                return 3
+            case 5:
+            case 6:
+                return 2
+            default:
+                return 12
+        }
+    }, [sortedPlayers.length])
+
     return (
         <CardContent>
-            <Container>
-                <Grid container spacing={2}>
-                    {sortedPlayers.map((player, index) => (
-                        <Grid item key={`playercard_${player.id}`} xs>
-                            <PlayerCard
-                                player={player}
-                                className={
-                                    sortedPlayers.length === 6
-                                        ? `image-team${(index % 3) + 1}-filter`
-                                        : ""
-                                }
-                            />
-                        </Grid>
-                    ))}
-                </Grid>
-            </Container>
+            <Grid container>
+                {sortedPlayers.map((player, index) => (
+                    <Grid item key={`playercard_${player.id}`} xs={xs}>
+                        <PlayerCard
+                            player={player}
+                            className={
+                                sortedPlayers.length === 6
+                                    ? `image-team${(index % 3) + 1}-filter`
+                                    : ""
+                            }
+                        />
+                    </Grid>
+                ))}
+            </Grid>
         </CardContent>
     )
 }

diff --git a/src/components/Leaderboard/SinglesLeaderboard.tsx b/src/components/Leaderboard/SinglesLeaderboard.tsx
@@ -10,6 +10,7 @@ import {
     ListItemIcon,
     ListItemText,
     ListItemSecondaryAction,
+    Box,
 } from "@mui/material"
 
 interface LeaderboardItem {
@@ -75,8 +76,8 @@ const SinglesLeaderboard = () => {
     }
 
     return (
-        <React.Fragment>
-            <List sx={{ width: "500px" }}>
+        <Box>
+            <List>
                 {leaderboardData.map((item, index) => (
                     <ListItem key={index}>
                         <ListItemIcon>
@@ -90,7 +91,7 @@ const SinglesLeaderboard = () => {
                         <ListItemText
                             primary={`Score: ${item.score}`}
                             secondary={`Rings: ${item.rings} Bought: ${item.cardsBought}`}
-                            sx={{ textAlign: "center", fontWeight: "bold" }}
+                            sx={{ textAlign: "center", width: "100px" }}
                         />
 
                         <ListItemSecondaryAction>
@@ -107,7 +108,7 @@ const SinglesLeaderboard = () => {
                     </ListItem>
                 ))}
             </List>
-        </React.Fragment>
+        </Box>
     )
 }
 

diff --git a/src/pages/Game/_game.scss b/src/pages/Game/_game.scss
@@ -69,11 +69,6 @@
     max-height: 60px;
 }
 
-.player-column {
-    padding-left: 0;
-    padding-right: 0;
-}
-
 .card-transparent {
     background-color: transparent;
 }
@@ -147,7 +142,7 @@
     min-height: 90px;
 }
 
-.buttonArea {
+.button-area {
     min-height: 75px;
 }
 
@@ -174,12 +169,18 @@
 }
 
 @media (min-width: 576px) {
+
     .modal-dialog {
         max-width: 540px;
     }
 }
 
 @media (max-width: 420px) {
+    .score-text {
+        width: 2em;
+        display: inline-block;
+    }
+
     .card-img-overlay {
         padding-left: 0;
         top: 1rem;