inlining the HeaderAndFooter logic

client/src/components/Game.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import styled from "styled-components";
 import {
   PRE_GAME,
   PRE_ROUND,
@@ -13,8 +14,8 @@ import GamePanel from "./screens/GamePanel";
 import RoundSummary from "./screens/RoundSummary";
 import PlayerScores from "./screens/PlayerScores";
 import { useGameState, dispatch } from "../domain/gameStore";
-import HeaderAndFooter from "./util/HeaderAndFooter";
 import useDirectGameLinks from "../hooks/useDirectGameLinks";
+import ApiInfo from "./util/ApiInfo";
 
 const componentMap = {
   [PRE_GAME]: HomePage,
@@ -39,6 +40,25 @@ const paramRouter = {
   summary: dispatch.goToSummary,
 }
 
+const Container = styled.div`
+  display: block;
+  text-align: center;
+`
+
+const Header = () => (
+  <Container>
+    <p>TerrAssumptions!</p>
+    <hr/>
+  </Container>
+)
+
+const Footer = () => (
+  <Container>
+    <hr/>
+    <ApiInfo/>
+  </Container>
+)
+
 const Game = () => {
   const gameState = useGameState();
 
@@ -46,8 +66,8 @@ const Game = () => {
 
   const Screen = componentMap[gameState];
   return needsHeaderFooter[gameState]
-    ? <HeaderAndFooter><Screen /></HeaderAndFooter>
-    : <Screen />;
+    ? <><Header/><Screen/><Footer/></>
+    : <Screen/>;
 }
 
 export default Game;

client/src/components/util/HeaderAndFooter.jsx

@@ -1,22 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import ApiInfo from "./ApiInfo";
-
-const Container = styled.div`
-  display: block;
-  text-align: center;
-`
-
-export default ({ children}) => (
-  <>
-    <Container>
-      <p>TerrAssumptions!</p>
-      <hr/>
-    </Container>
-    {children}
-    <Container>
-      <hr/>
-      <ApiInfo/>
-    </Container>
-  </>
-);