Merge pull request #88 from moritzluedtke/add-tshirt-and-numbers

Added "T-Shirt and Numbers" option

src/components/Players/CardPicker/CardConfigs.ts

@@ -49,6 +49,18 @@ export const tShirtCards: CardConfig[] = [
   { value: -1, displayValue: '-1', color: 'var(--color-background-secondary)' },
 ];
 
+export const tShirtAndNumbersCards: CardConfig[] = [
+  { value: 10, displayValue: 'S', color: '#9EC8FE' },
+  { value: 20, displayValue: 'M', color: '#9EC8FE' },
+  { value: 30, displayValue: 'L', color: '#A3DFF2' },
+  { value: 40, displayValue: 'XL', color: '#A3DFF2' },
+  { value: 50, displayValue: '1', color: '#9DD49A' },
+  { value: 60, displayValue: '2', color: '#9DD49A' },
+  { value: 70, displayValue: '3', color: '#F4DD94' },
+  { value: 80, displayValue: '4', color: '#F4DD94' },
+  { value: 90, displayValue: '5', color: '#F39893' },
+];
+
 export const getCards = (gameType: GameType | undefined): CardConfig[] => {
   switch (gameType) {
     case GameType.Fibonacci:
@@ -57,6 +69,8 @@ export const getCards = (gameType: GameType | undefined): CardConfig[] => {
       return shortFibonacciCards;
     case GameType.TShirt:
       return tShirtCards;
+    case GameType.TShirtAndNumber:
+      return tShirtAndNumbersCards;
     default:
       return fibonacciCards;
   }

src/components/Players/CardPicker/CardPicker.test.tsx

@@ -76,6 +76,24 @@ describe('CardPicker component', () => {
         expect(cardValueElement.length).toBeGreaterThan(0);
       });
   });
+  it('should display correct card values TShirt & Numbers game type', () => {
+    const view = render(
+      <CardPicker
+        game={{ ...mockGame, gameType: GameType.TShirtAndNumber }}
+        players={mockPlayers}
+        currentPlayerId={currentPlayerId}
+      />
+    );
+
+    getCards(GameType.TShirtAndNumber)
+      .filter((a) => a.value >= 0)
+      .forEach((card) => {
+        const cardElement = view.container.querySelector(`#card-${card.displayValue}`);
+        expect(cardElement).toBeInTheDocument();
+        const cardValueElement = screen.queryAllByText(card.displayValue);
+        expect(cardValueElement.length).toBeGreaterThan(0);
+      });
+  });
   it('should update player value when player clicks on a card', () => {
     const currentPlayerId = mockPlayers[0].id;
     const updatePlayerValueSpy = jest.spyOn(playersService, 'updatePlayerValue');

src/components/Poker/CreateGame/CreateGame.test.tsx

@@ -84,7 +84,7 @@ describe('CreateGame component', () => {
     userEvent.clear(userName);
     userEvent.type(userName, 'Rock');
 
-    const tShirt = screen.getByText('T-Shirt', { exact: false });
+    const tShirt = screen.getByText('T-Shirt (XXS, XS, S, M, L, XL, XXL)', { exact: false });
     userEvent.click(tShirt);
 
     const createButton = screen.getByText('Create');
@@ -118,4 +118,26 @@ describe('CreateGame component', () => {
       expect.objectContaining({ createdBy: 'Rock', gameType: 'ShortFibonacci', name: 'Marvels' })
     );
   });
+  it('should be able to create new session of TShirt & Numbers', async () => {
+    render(<CreateGame />);
+    const sessionName = screen.getByPlaceholderText('Enter a session name');
+    userEvent.clear(sessionName);
+    userEvent.type(sessionName, 'Marvels');
+
+    const userName = screen.getByPlaceholderText('Enter your name');
+    userEvent.clear(userName);
+    userEvent.type(userName, 'Rock');
+
+    const tShirt = screen.getByText('T-Shirt & Numbers (S, M, L, XL, 1, 2, 3, 4, 5)', { exact: false });
+    userEvent.click(tShirt);
+
+    const createButton = screen.getByText('Create');
+    userEvent.click(createButton);
+
+    expect(gamesService.addNewGame).toHaveBeenCalled();
+
+    expect(gamesService.addNewGame).toHaveBeenCalledWith(
+        expect.objectContaining({ createdBy: 'Rock', gameType: 'TShirtAndNumber', name: 'Marvels' })
+    );
+  });
 });

src/components/Poker/CreateGame/CreateGame.tsx

@@ -125,6 +125,11 @@ export const CreateGame = () => {
                 control={<Radio color='primary' size='small' />}
                 label='T-Shirt (XXS, XS, S, M, L, XL, XXL)'
               />
+              <FormControlLabel
+                value={GameType.TShirtAndNumber}
+                control={<Radio color='primary' size='small' />}
+                label='T-Shirt & Numbers (S, M, L, XL, 1, 2, 3, 4, 5)'
+              />
             </RadioGroup>
           </CardContent>
           <CardActions className='CreateGameCardAction'>

src/components/Poker/GameController/GameController.test.tsx

@@ -53,6 +53,11 @@ describe('GameController component', () => {
 
     expect(screen.queryByText('Average:')).not.toBeInTheDocument();
   });
+  it('should not display game average for TShirt & Numbers GameType', () => {
+    render(<GameController game={{ ...mockGame, gameType: GameType.TShirtAndNumber }} currentPlayerId={mockCurrentPlayerId} />);
+
+    expect(screen.queryByText('Average:')).not.toBeInTheDocument();
+  });
   it('should display exit option', () => {
     render(<GameController game={mockGame} currentPlayerId={mockCurrentPlayerId} />);
 

src/components/Poker/GameController/GameController.tsx

@@ -52,7 +52,7 @@ export const GameController: React.FC<GameControllerProps> = ({ game, currentPla
             action={
               <div className='GameControllerCardHeaderAverageContainer'>
                 <Typography variant='subtitle1'>{game.gameStatus}</Typography>
-                {game.gameType !== GameType.TShirt && (
+                {game.gameType !== GameType.TShirt && game.gameType !== GameType.TShirtAndNumber && (
                   <>
                     <Divider className='GameControllerDivider' orientation='vertical' flexItem />
                     <Typography variant='subtitle1'>Average:</Typography>

src/types/game.ts

@@ -23,4 +23,5 @@ export enum GameType {
   Fibonacci = 'Fibonacci',
   ShortFibonacci = 'ShortFibonacci',
   TShirt = 'TShirt',
+  TShirtAndNumber = 'TShirtAndNumber',
 }