Refactor game and login components

beeracademy · May 22, 2024 · 16873e7 · 16873e7
1 parent ab4823c
commit 16873e7
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 23 deletions.
diff --git a/src/views/Game/components/Header.tsx b/src/views/Game/components/Header.tsx
@@ -158,7 +158,8 @@ const Header: FunctionComponent = () => {
               },
             }}
           >
-            Round {gameMetrics.currentRound} / {game.numberOfRounds}
+            Round {gameMetrics.currentRound.toString().padStart(2, "0")}/
+            {game.numberOfRounds}
           </Typography>
           <Stack
             sx={{
@@ -187,7 +188,8 @@ const Header: FunctionComponent = () => {
               },
             }}
           >
-            Card {gameMetrics.numberOfCardsDrawn} / {gameMetrics.numberOfCards}
+            Card {gameMetrics.numberOfCardsDrawn.toString().padStart(2, "0")}/
+            {gameMetrics.numberOfCards}
           </Typography>
         </Stack>
 

diff --git a/src/views/Login/New/components/PlayerItem.tsx b/src/views/Login/New/components/PlayerItem.tsx
@@ -163,27 +163,29 @@ const PlayerItem: FunctionComponent<PlayerItemProps> = (props) => {
             </>
           )}
 
-          {disabled ? (
-            <Avatar
-              sx={{
-                width: 56,
-                height: 56,
-                borderRadius: 0,
-              }}
-              src={player.avatar}
-            >
-              <CircularProgress color="inherit" size={24} />
-            </Avatar>
-          ) : (
-            <Avatar
-              sx={{
-                width: 56,
-                height: 56,
-                borderRadius: 0,
-              }}
-              src={player.avatar}
-            />
-          )}
+          <Conditional value={!isOffline}>
+            {disabled ? (
+              <Avatar
+                sx={{
+                  width: 56,
+                  height: 56,
+                  borderRadius: 0,
+                }}
+                src={player.avatar}
+              >
+                <CircularProgress color="inherit" size={24} />
+              </Avatar>
+            ) : (
+              <Avatar
+                sx={{
+                  width: 56,
+                  height: 56,
+                  borderRadius: 0,
+                }}
+                src={player.avatar}
+              />
+            )}
+          </Conditional>
         </Stack>
       </Box>