Waiting page

client/src/App.tsx

-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import GameWaiting from './pages/GameWaiting/GameWaiting'
 import Home from './pages/Home/Home'
 import ClientMock from './utils/Client/ClientMock'
@@ -6,19 +6,16 @@ import ClientMock from './utils/Client/ClientMock'
 export type pageName = 'home' | 'game-waiting' | 'game-playing'
 
 function App () {
-  const [page, setPage] = useState<pageName>('home')
+  // const [page, setPage] = useState<pageName>('home')
+  const [page, setPage] = useState<pageName>('game-waiting')
 
   const client = new ClientMock(setPage)
 
-  useEffect(() => {
-    console.log(page)
-  }, [page])
-
   return (
     <div>
       {
         page === 'game-waiting'
-          ? <GameWaiting />
+          ? <GameWaiting game={client.getGame()} />
           : <Home client={client} />
       }
     </div>

client/src/pages/GameWaiting/GameWaiting.tsx

 import React from 'react'
+import { Button, Container, ListGroup, Navbar } from 'react-bootstrap'
+import { GameDTO } from '../../utils/types'
 
-export default function GameWaiting () {
+interface Props {
+  game: GameDTO
+}
+const GameWaiting: React.FC<Props> = ({ game }) => {
   return (
     <div>
+      <Navbar bg='light' className='border-bottom'>
+        <Container>
+          <Navbar.Brand>7 Wonders</Navbar.Brand>
+          <div className='d-flex justify-content-between align-items-center' style={{ width: '100%' }}>
+            <div><strong>{game.playersPublic.length}</strong> players</div>
+            <Button variant='outline-danger'>Exit game</Button>
+          </div>
+        </Container>
+      </Navbar>
+
+      <Container>
+        <h2 className='mt-3'>Players list:</h2>
+        <ListGroup className=' col-md-4'>
+          {
+            game.playersPublic.map(({ userName }, i) => (
+              <ListGroup.Item key={i}>{userName}</ListGroup.Item>
+            ))
+          }
+        </ListGroup>
+      </Container>
     </div>
   )
 }
+
+export default GameWaiting

client/src/pages/Home/Home.stories.tsx

+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import Home from './Home'
+
+export default {
+  title: 'Page Home',
+  component: Home
+} as ComponentMeta<typeof Home>
+
+const Template: ComponentStory<typeof Home> = (args) => <Home {...args} />
+
+export const Default = Template.bind({})

client/src/pages/Home/Home.test.tsx

 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import Home from './Home'
-import Client from '../utils/Client/Client'
+import Client from '../../utils/Client/Client'
 
 // Create mock for Client
 jest.mock('../utils/Client/Client')

client/src/utils/Client/ClientMock.ts

 import IClient from './IClient'
-import { Action, Card, GameDTO, GameState } from '../types'
+import { Action, Card, GameDTO, GameState, PlayerDTO } from '../types'
 import { pageName } from '../../App'
 
 export default class Client implements IClient {
@@ -13,7 +13,6 @@ export default class Client implements IClient {
   }
 
   refreshGameState (): [GameState, number] {
-    // TODO
     return [GameState.WAITING, 0]
   }
 
@@ -43,4 +42,37 @@ export default class Client implements IClient {
   private canPlayCard (card: Card) {
     // TODO
   }
+
+  getGame (): GameDTO {
+    const players: PlayerDTO[] = [{
+      userID: '0',
+      userName: 'User1',
+      wonder: {},
+      resources: new Map(),
+      builtCards: [],
+      victoryPoints: 0,
+      defeatPoints: 0,
+      conflictPoints: 0,
+      money: 0
+    },
+    {
+      userID: '0',
+      userName: 'User2',
+      wonder: {},
+      resources: new Map(),
+      builtCards: [],
+      victoryPoints: 0,
+      defeatPoints: 0,
+      conflictPoints: 0,
+      money: 0
+    }]
+
+    return {
+      currentAge: 1,
+      gameTurn: 1,
+      currentAgeCards: [],
+      gameState: GameState.WAITING,
+      playersPublic: players
+    } as GameDTO
+  }
 }

client/src/utils/types.ts

@@ -21,7 +21,7 @@ export interface Wonder {
 
 }
 
-interface PlayerDTO {
+export interface PlayerDTO {
   userID: string
   userName: string
   wonder: Wonder