From dbd97dcfd4a838a03f99a43d4b7ad87daa8056f7 Mon Sep 17 00:00:00 2001
From: Daithi Hearn <daithi.hearn@gmail.com>
Date: Thu, 18 May 2023 08:50:43 +0200
Subject: [PATCH 1/3] Fixing single player leaderboard on mobile

---
 src/components/Leaderboard/SinglesLeaderboard.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/Leaderboard/SinglesLeaderboard.tsx b/src/components/Leaderboard/SinglesLeaderboard.tsx
index 181e95b..3279fc7 100644
--- 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>
     )
 }
 

From 29083664d462072d716e8f1d7e22008b0ae5cc64 Mon Sep 17 00:00:00 2001
From: Daithi Hearn <daithi.hearn@gmail.com>
Date: Thu, 18 May 2023 09:06:37 +0200
Subject: [PATCH 2/3] Mobile style improvements

---
 .../Game/Actions/ActionsWrapper.tsx           |  2 +-
 .../Game/Actions/ThrowCardsWarningModal.tsx   |  2 +-
 src/components/Game/PlayerCard.tsx            |  5 +-
 src/components/Game/PlayersAndCards.tsx       | 52 +++++++++++++------
 src/pages/Game/_game.scss                     | 13 ++---
 5 files changed, 46 insertions(+), 28 deletions(-)

diff --git a/src/components/Game/Actions/ActionsWrapper.tsx b/src/components/Game/Actions/ActionsWrapper.tsx
index 7cfabfa..bdf24a2 100644
--- 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
index 9f40a87..ea59058 100644
--- 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
index b020e44..65c83e3 100644
--- 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
index 610c410..b84c13f 100644
--- 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/pages/Game/_game.scss b/src/pages/Game/_game.scss
index 5d4ca67..3e0ede8 100644
--- 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;

From 910b3695916787c76ae6d299bbf351c453ecc570 Mon Sep 17 00:00:00 2001
From: Daithi Hearn <daithi.hearn@gmail.com>
Date: Thu, 18 May 2023 09:07:07 +0200
Subject: [PATCH 3/3] Updating version

---
 package.json         | 2 +-
 public/manifest.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index cd30e2e..646541e 100644
--- 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
index 4298657..367035b 100644
--- 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",