Moving header and footer out as a separate wrapper component, so it does not show up during the game

client/src/App.css

@@ -12,6 +12,14 @@
   text-align: center;
 }
 
+.header {
+  display: block;
+}
+
+.footer {
+  display: block;
+}
+
 .click-to-copy {
   position: relative;
   display: inline-flex;
@@ -97,6 +105,7 @@
 }
 
 .pre-round {
+  flex: 1;
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
@@ -118,6 +127,7 @@
 }
 
 .round-summary {
+  flex: 1;
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-around;

client/src/App.js

@@ -7,15 +7,7 @@ import './App.css';
 const App = () => {
   return (
     <div className="App">
-      <div className="header">
-        <p>TerrAssumptions!</p>
-        <hr/>
-      </div>
       <Game/>
-      <div className="footer">
-        <hr/>
-        <ApiInfo/>
-      </div>
     </div>
   );
 }

client/src/components/game.component/game.jsx

@@ -7,6 +7,7 @@ import {
   POST_GAME,
   ERROR,
 } from "./game-state.enum";
+import HeaderAndFooter from "../util/header-and-footer.component";
 import PreGame from '../screens/pre-game.component';
 import PreRound from '../screens/pre-round.component';
 import GamePanelContainer from "../screens/game-panel.component";
@@ -27,10 +28,14 @@ const Game = () => {
 
   switch (state.gameState) {
     case PRE_GAME:
-      return <PreGame
-        initPlayerName={state.playerName}
-        onGameJoined={({ gameId, playerName }) => setGameStateAnd(PRE_ROUND, { gameId, playerName })}
-      />
+      return (
+        <HeaderAndFooter>
+          <PreGame
+            initPlayerName={state.playerName}
+            onGameJoined={({ gameId, playerName }) => setGameStateAnd(PRE_ROUND, { gameId, playerName })}
+          />
+        </HeaderAndFooter>
+      );
     case PRE_ROUND:
       return <PreRound
         gameId={state.gameId}
@@ -50,10 +55,14 @@ const Game = () => {
         onNext={() => setGameState(IN_ROUND)}
       />
     case POST_GAME:
-      return <PlayerScoresContainer
-        gameId={state.gameId}
-        onReturnToStart={() => setGameState(PRE_GAME)}
-      />
+      return (
+        <HeaderAndFooter>
+          <PlayerScoresContainer
+            gameId={state.gameId}
+            onReturnToStart={() => setGameState(PRE_GAME)}
+          />
+        </HeaderAndFooter>
+      );
     case ERROR:
       // TODO - would be nice to hook this into the sub-components, maybe with a HOC?
       return <p>Application encountered unrecoverable error, please refresh the page.</p>

client/src/components/util/header-and-footer.component.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import ApiInfo from "./api-info.component";
+
+export default props => (
+  <>
+    <div className="header">
+      <p>TerrAssumptions!</p>
+      <hr/>
+    </div>
+    {props.children}
+    <div className="footer">
+      <hr/>
+      <ApiInfo/>
+    </div>
+  </>
+);