feat(color): colorizing the box component (#133)

src/ui/game/component/GameBox/index.tsx

@@ -1,4 +1,5 @@
 import { GameBoxCenteredProps, GameBoxDefaultProps, GameBoxType, Props } from './type';
+import { CardColor } from '../../../../api/src/constant/card-color.enum';
 import { App } from '../../../AppContext';
 import { Box } from '@mantine/core';
 import { RFC } from '@app/ui/type';
@@ -7,6 +8,7 @@ import { useContext } from 'react';
 
 export const GameBox : RFC<Props> = ({
     type = GameBoxType.Default,
+    color = CardColor.Black,
     size = 'md',
     children,
 }) => {
@@ -24,7 +26,9 @@ export const GameBox : RFC<Props> = ({
     switch(type) {
         case GameBoxType.Default:
             return (
-                <Box {...commonProps}>
+                <Box
+                    c={color}
+                    {...commonProps}>
                     {children}
                 </Box>
             );
@@ -33,6 +37,7 @@ export const GameBox : RFC<Props> = ({
             return (
                 <Box
                     {...commonProps}
+                    c={color}
                     ta='center'>
                     {children}
                 </Box>

src/ui/game/component/GameBox/type.tsx

@@ -1,10 +1,13 @@
+import { CardColor } from '../../../../api/src/constant/card-color.enum';
 import { MantineSize } from "@mantine/core";
 
+
 export type GameBoxSize = Extract<MantineSize, 'sm' | 'md' | 'lg'>;
 
 export type Props = React.PropsWithChildren<{
-    type ?: GameBoxType;
-    size ?: GameBoxSize;
+    color ?: CardColor;
+    type  ?: GameBoxType;
+    size  ?: GameBoxSize;
 }>;
 
 type GameBoxCustom =  Omit<Props, 'type'>;

src/ui/game/component/GameDev/index.tsx

@@ -1,33 +1,27 @@
-
+import { GameTextType } from '../GameText/type';
 import { GameStack } from '../GameStack';
 import { GameText } from '../GameText';
-import { GameTextType } from '../GameText/type';
 
 
-export const GameDev = () => {
+export const GameDev = () =>
+    <GameStack>
+        <GameText size='sm'>
+            <GameText
+                type={GameTextType.Title}
+                size='lg'>
+                {'CrudeCards is Open Source'}
+            </GameText>
+            <a
+                href='https://github.com/dandonahoe/crude-cards'
+                style={{
+                    textDecoration : 'underline',
+                    color          : 'white',
 
-    return (
-        <GameStack>
+                }}>
+                {'Browse the GitHub Repo.'}
+            </a>
             <GameText size='sm'>
-                <GameText
-                    size='lg'
-                    type={GameTextType.Title}>
-                    {'CrudeCards is Open Source'}
-                </GameText>
-                <a
-                    href='https://github.com/dandonahoe/crude-cards'
-                    style={{
-                        color          : 'white',
-                        textDecoration : 'underline',
-                    }}>
-                    {'Browse the GitHub Repo.'}
-                </a>
-                <GameText size='sm'>
-                    {'Or don\'t, nerd.'}
-                </GameText>
+                {'Or don\'t, nerd.'}
             </GameText>
-
-        </GameStack>
-    );
-}
-
+        </GameText>
+    </GameStack>

src/ui/game/component/GameFoe/index.tsx

@@ -6,6 +6,6 @@ import { Props } from './type';
 export const GameFoe : RFC<Props> = ({
     player,
 }) =>
-    <GameText>
+    <GameText size='sm'>
         {player.username}
     </GameText>

src/ui/game/screen/GameLobby/FoeList.tsx

@@ -1,6 +1,8 @@
 import { GameCardCentered, GameCardChildren } from "../../component/GameCard"
 import { CardColor } from '../../../../api/src/constant/card-color.enum';
+import { GameStack } from "../../component/GameStack";
 import { GameText } from "../../component/GameText"
+import { GameBox } from "../../component/GameBox";
 import { GameFoe } from "../../component/GameFoe"
 import { FoeListProps } from "./type"
 import { List } from "@mantine/core"
@@ -20,17 +22,21 @@ export const FoeList : RFC<FoeListProps> = ({
         )
 
     return (
-        <GameCardChildren color={CardColor.White}>
-            <GameText>
-                {'Other Players'}
-            </GameText>
-            <List>
-                {foes.map(player => (
-                    <List.Item key={player.id}>
-                        <GameFoe player={player} />
-                    </List.Item>
-                ))}
-            </List>
+        <GameCardChildren color={CardColor.Black}>
+            <GameBox color={CardColor.White}>
+                <GameStack>
+                    <GameText size='md'>
+                        {'Other Players'}
+                    </GameText>
+                    <List>
+                        {foes.map(player => (
+                            <List.Item key={player.id}>
+                                <GameFoe player={player} />
+                            </List.Item>
+                    ))}
+                    </List>
+                </GameStack>
+            </GameBox>
         </GameCardChildren>
     )
 }