Implementing a rejoin button on home page

client/src/components/screens/HomePage.jsx

@@ -1,5 +1,51 @@
 import React from 'react';
+import styled from 'styled-components';
 import GameCreationForm from '../util/GameCreationForm';
 import { dispatch } from '../../domain/gameStore';
+import { getGameInfoFromLocalStorage } from '../../domain/localStorageMethods';
+import DelayedButton from '../util/DelayedButton';
 
-export default () => <GameCreationForm afterCreate={gameId => dispatch.goToLobby(gameId)}/>;
+const Container = styled.div`
+  height: 100%;
+  margin-top: 30vh;
+  margin-bottom: 10vh;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const RejoinLabel = styled.span`
+  margin-bottom: 0.5em;
+`;
+
+const RejoinContainer = styled.div`
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-end;
+  align-items: center;
+`;
+
+export default () => {
+  const { gameId, playerName, playerId } = getGameInfoFromLocalStorage();
+  const rejoin = (gameId && playerName && playerId)
+    ? (
+      <RejoinContainer>
+        <RejoinLabel>Looks like you were in a game before that you didn't finish!</RejoinLabel>
+        <DelayedButton 
+          onEnd={() => dispatch.rejoinGame(gameId, playerName, playerId)}
+          countDownFormatter={rem => `Rejoining in ${rem}s...`}
+        >
+          Rejoin Game?
+        </DelayedButton>
+      </RejoinContainer>
+    )
+    : null;
+
+  return (
+    <Container>
+      <GameCreationForm afterCreate={gameId => dispatch.goToLobby(gameId)}/>
+      {rejoin}
+    </Container>
+  )
+};