Created new page with page state

client/src/App.tsx

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

client/src/pages/GameWaiting/GameWaiting.tsx

+import React from 'react'
+
+export default function GameWaiting () {
+  return (
+    <div>
+    </div>
+  )
+}

client/src/Home/Home.tsx → client/src/pages/Home/Home.tsx

 import React from 'react'
 import { Container } from 'react-bootstrap'
-import { GameState } from '../utils/types'
-import GameLobby from '../components/GameLobby'
-import IClient from '../utils/Client/IClient'
+import GameLobby from '../../components/GameLobby'
+import IClient from '../../utils/Client/IClient'
+import { GameState } from '../../utils/types'
 
 interface Props {
   client: IClient

client/src/utils/Client/Client.ts

 import IClient from './IClient'
-import { Action, Card, GameState } from '../types'
+import { Action, Card, GameDTO, GameState } from '../types'
 
 export default class Client implements IClient {
   refreshGameState (): [GameState, number] {
@@ -20,6 +20,11 @@ export default class Client implements IClient {
     // TODO
   }
 
+  refreshGameClient (game: GameDTO, handedCards: Card[]): void {
+    // TODO
+    throw new Error('Method not implemented.')
+  }
+
   /**
    * Check if card needs player to buy resources from neighbors
    * @param card Card to play

client/src/utils/Client/ClientMock.ts

+import IClient from './IClient'
+import { Action, Card, GameDTO, GameState } from '../types'
+import { pageName } from '../../App'
+
+export default class Client implements IClient {
+  /**
+   * Change App's displayed page
+   */
+  private setPage: (page: pageName) => void
+
+  constructor (setPage: (page: pageName) => void) {
+    this.setPage = setPage
+  }
+
+  refreshGameState (): [GameState, number] {
+    // TODO
+    return [GameState.WAITING, 0]
+  }
+
+  joinGame (userName: string) {
+    // TODO
+  }
+
+  playCard (card: Card, action: Action) {
+    // TODO
+    return false
+  }
+
+  refreshGame () {
+    // TODO
+  }
+
+  refreshGameClient (game: GameDTO, handedCards: Card[]): void {
+    // TODO
+    throw new Error('Method not implemented.')
+  }
+
+  /**
+   * Check if card needs player to buy resources from neighbors
+   * @param card Card to play
+   */
+  private canPlayCard (card: Card) {
+    // TODO
+  }
+}

client/src/utils/Client/IClient.ts

-import { Action, Card, GameState, Resource } from '../types'
+import { Action, Card, GameDTO, GameState, Resource } from '../types'
 
 export default interface IClient {
   /**
@@ -27,4 +27,10 @@ export default interface IClient {
    * @param buyFromNeighbors From who buy which resource
    */
   playCard(card: Card, action: Action, buyFromNeighbors: Map<string, Resource[]>): boolean
+
+  /**
+   * Refresh displayed games
+   * @param game new Game with content
+   */
+  refreshGameClient (game: GameDTO, handedCards: Card[]): void
 }

client/src/utils/ClientMiddleware/ClientMiddleware.ts

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

client/src/utils/ClientMiddleware/ClientMiddlewareMock.ts

+import IClient from '../Client/IClient'
+import IClientMiddleware from './IClientMiddleware'
+import { GameState, Action, Card } from '../types'
+
+export default class ClientMiddlewareMock implements IClientMiddleware {
+  private client: IClient
+
+  constructor (client: IClient) {
+    this.client = client
+  }
+
+  getGameState (): [GameState, number] {
+    return [GameState.WAITING, 0]
+  }
+
+  joinGame (userName: string) {
+    // TODO
+  }
+
+  playCard (card: Card, action: Action) {
+    // TODO
+    return false
+  }
+
+  /**
+   * Check if card needs player to buy resources from neighbors
+   * @param card Card to play
+   */
+  private canPlayCard (card: Card) {
+    // TODO
+  }
+}

client/src/utils/types.ts

@@ -16,6 +16,14 @@ export interface Card {
 
 }
 
+/**
+ * All the Data contained in the Game
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface GameDTO {
+
+}
+
 /**
  * Action to do with the played card
  */

docs/modules/conception/partials/interfaces-diagrams/client-interfaces.puml

@@ -6,6 +6,8 @@ interface IClient {
   + playCard(card: Card, action: Action): boolean
   ' Resources have to be bought from neighbors (PlayerID, Resource, Quantity)
   + playCard(card: Card, action: Action, buyFromNeighbors: Map<String, Resource[*]>): boolean
+  ' Refresh displayed games
+  refreshGameClient (game: GameDTO, handedCards: Card[*]): void
 }
 
 class Client implements IClient {
@@ -33,8 +35,6 @@ interface IClientMiddleware {
   + playCard(card: Card, action: Action, buyFromNeighbors: Map<String, Resource[*]>): boolean
 }
 class ClientMiddleware implements IClientMiddleware {
-  ' Start and Connect the Websocket
-  + <<create>> ClientMiddleware(Client client)
   ' Constant
   - server: ServerMiddleware
   ' Variables