Update card rotation and display active player in table

beeracademy · May 20, 2024 · 46db8e9 · 46db8e9
1 parent ed21822
commit 46db8e9
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 21 deletions.
diff --git a/src/views/Game/components/CardInventory.tsx b/src/views/Game/components/CardInventory.tsx
@@ -132,7 +132,7 @@ const CardStack = memo((props: { size: number }) => {
             opacity: 0.75,
             backgroundColor: (t) =>
               darken(t.palette.background.paper, (i / props.size) * 0.15),
-            transform: randomRotationBetween(-8, 8),
+            transform: randomRotationBetween(-12, 12),
           }}
         />
       ))}

diff --git a/src/views/Game/components/Table.tsx b/src/views/Game/components/Table.tsx
@@ -1,5 +1,6 @@
 import {
   alpha,
+  Chip,
   Stack,
   Table,
   TableBody,
@@ -45,27 +46,36 @@ const GameTable: FunctionComponent<GameTableProps> = () => {
         <TableHead>
           <TableRow>
             <TableCell>Round</TableCell>
-            {game.players.map((player, i) => (
-              <TableCell
-                key={i}
-                sx={{
-                  color:
-                    gameMetrics.activePlayerIndex === i && !gameMetrics.done
-                      ? "primary.main"
-                      : "text.primary",
+            {game.players.map((player, i) => {
+              const isActive =
+                gameMetrics.activePlayerIndex === i && !gameMetrics.done;
 
-                  fontWeight:
-                    gameMetrics.activePlayerIndex === i && !gameMetrics.done
-                      ? "bold"
-                      : "normal",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap",
-                }}
-              >
-                {player.username}
-              </TableCell>
-            ))}
+              return (
+                <TableCell
+                  key={i}
+                  sx={{
+                    color: isActive ? "primary.main" : "text.primary",
+
+                    fontWeight: isActive ? "bold" : "normal",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                  }}
+                >
+                  {isActive ? (
+                    <Chip
+                      label={player.username}
+                      color="primary"
+                      sx={{
+                        borderRadius: (t) => `${t.shape.borderRadius}px `,
+                      }}
+                    />
+                  ) : (
+                    <>{player.username}</>
+                  )}
+                </TableCell>
+              );
+            })}
           </TableRow>
         </TableHead>
         <TableBody>