Added instanciated client + Mock client

client/src/App.tsx

+import React from 'react'
+import Home from './Home/Home'
+import Client from './utils/Client'
+
+function App () {
+  const client = new Client()
+
+  return (
+    <Home client={client} />
+  )
+}
+
+export default App

client/src/Home/Home.test.tsx

 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import Home from './Home'
+import Client from '../utils/Client'
+
+// Create mock for Client
+jest.mock('../utils/Client')
 
 test('renders learn react link', () => {
-  render(<Home />)
+  const client = new Client()
+
+  render(<Home client={client} />)
   const linkElement = screen.getByText(/learn react/i)
   expect(linkElement).toBeInTheDocument()
 })

client/src/Home/Home.tsx

@@ -2,8 +2,12 @@ import React from 'react'
 import { Container } from 'react-bootstrap'
 import { GameState } from '../utils/types'
 import GameLobby from '../components/GameLobby'
+import IClient from '../utils/IClient'
 
-const Home = () => {
+interface Props {
+  client: IClient
+}
+const Home: React.FC<Props> = ({ client }) => {
   return (
     <Container className='flex-column align-items-center' style={{ height: '100%' }}>
       <div className='d-flex justify-content-center' style={{ width: '100%', height: '33%' }}>
@@ -14,6 +18,7 @@ const Home = () => {
         <GameLobby
           status={GameState.WAITING}
           nbPlayers={0}
+          client={client}
         />
       </div>
     </Container>

client/src/components/GameLobby.stories.tsx

@@ -11,13 +11,13 @@ export default {
     status: {
       options: [GameState.WAITING, GameState.FULL, GameState.STARTED]
     }
-  },
-  args: {
-    status: GameState.FULL,
-    nbPlayers: 0
   }
 } as ComponentMeta<typeof GameLobby>
 
 const Template: ComponentStory<typeof GameLobby> = (args) => <GameLobby {...args} />
 
 export const Default = Template.bind({})
+Default.args = {
+  status: GameState.FULL,
+  nbPlayers: 10
+}

client/src/components/GameLobby.tsx

 import React, { useState } from 'react'
-import { Badge, Button, Card } from 'react-bootstrap'
+import { Badge, Button, Card, Form } from 'react-bootstrap'
+import IClient from '../utils/IClient'
 import { GameState } from '../utils/types'
 
 interface Props {
   status: GameState
   nbPlayers: number
+  client: IClient
 }
-const GameLobby: React.FC<Props> = ({ status, nbPlayers }) => {
+const GameLobby: React.FC<Props> = ({ status, nbPlayers, client }) => {
   const [joinForm, setJoinForm] = useState(false)
+  const [username, setUsername] = useState('')
+
+  // Join a game
+  const submitJoinForm = () => {
+    client.joinGame(username)
+  }
 
   return (
     <Card className='col-md-4'>
       <Card.Title className='d-flex justify-content-between px-2 pt-1'><div>7 Wonders Game</div><Badge>{status}</Badge></Card.Title>
       <Card.Body>
-        <div><strong>{nbPlayers}</strong> players</div>
-
         {
           joinForm
             ? (
-              <div>
-
-              </div>
+              <Form>
+                <Form.Group className="mb-3" controlId="username">
+                  <Form.Label>Username</Form.Label>
+                  <Form.Control
+                    type="text"
+                    placeholder="Username"
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                  />
+                </Form.Group>
+                <div className='mt-2 d-flex justify-content-end'>
+                  <Button variant="outline-primary" className='me-2' onClick={() => setJoinForm(false)}>Cancel</Button>
+                  <Button variant="primary" onClick={submitJoinForm}>Join</Button>
+                </div>
+              </Form>
             )
             : (
-              <div className='mt-2 d-flex justify-content-end'>
-                <Button variant="primary" onClick={() => setJoinForm(true)}>Join</Button>
+              <div>
+                <div><strong>{nbPlayers}</strong> players</div>
+                <div className='mt-2 d-flex justify-content-end'>
+                  <Button variant="primary" onClick={() => setJoinForm(true)}>Join</Button>
+                </div>
               </div>
             )
         }

client/src/index.tsx

 import React from 'react'
 import ReactDOM from 'react-dom'
 import 'bootstrap/dist/css/bootstrap.min.css'
-import Home from './Home/Home'
 import reportWebVitals from './reportWebVitals'
+import App from './App'
 
 ReactDOM.render(
   <React.StrictMode>
-    <Home />
+    <App />
   </React.StrictMode>,
   document.getElementById('root')
 )

client/src/utils/Client.test.ts

-import { Client } from './Client'
+import Client from './Client'
 
 describe('class Client', () => {
   describe('construct', () => {

client/src/utils/Client.ts

-import { IClient } from './IClient'
+import IClient from './IClient'
 import { Action, Card, GameState } from './types'
 
-export class Client implements IClient {
+export default class Client implements IClient {
   refreshGameState (): [GameState, number] {
     // TODO
     return [GameState.WAITING, 0]

client/src/utils/ClientMiddleware.test.ts

-import { ClientMiddleware } from './ClientMiddleware'
+import ClientMiddleware from './ClientMiddleware'
 
 describe('class Client', () => {
   describe('construct', () => {

client/src/utils/ClientMiddleware.ts

-import { IClient } from './IClient'
-import { IClientMiddleware } from './IClientMiddleware'
+import IClient from './IClient'
+import IClientMiddleware from './IClientMiddleware'
 import { GameState, Action, Card } from './types'
 
-export class ClientMiddleware implements IClientMiddleware {
+export default class ClientMiddleware implements IClientMiddleware {
   constructor (client: IClient) {
 
   }

client/src/utils/IClient.ts

 import { Action, Card, GameState, Resource } from './types'
 
-export interface IClient {
+export default interface IClient {
   /**
    * Refresh local lobby
    * @returns Status of the Game, and number of connected players

client/src/utils/IClientMiddleware.ts

 import { Action, Card, GameState, Resource } from './types'
 
-export interface IClientMiddleware {
+export default interface IClientMiddleware {
   joinGame(userName: string): void
 
   getGameState (): [GameState, number]