make endscreen and temporarily mount in GameScreen

Author: Frivridna

code/src/components/EndScreen.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useSelector} from 'react-redux'
+import "nes.css/css/nes.min.css"
+
+const EndScreen = () => {
+  const lastDescription = useSelector((store) => store.games.gameStatus)
+
+  return (
+      <EndContainer>
+          <div class="nes-container is-rounded is-dark">
+              <Header>{lastDescription.description}</Header>
+              <CssCredit>CSS from <a href="https://nostalgic-css.github.io/NES.css/">Ness.css</a> 
+              </CssCredit>
+          </div>
+      </EndContainer>
+  )
+}
+
+const EndContainer = styled.section `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-style: inset;
+  margin: 0 auto;
+`
+const Header = styled.h1`
+  font-size: 18px;
+  letter-spacing: 1px;
+`
+const CssCredit = styled.p`
+  margin-top: 50px;
+`
+export default EndScreen

code/src/components/GameScreen.js

@@ -4,12 +4,12 @@ import styled from 'styled-components/macro'
 
 import { games, CarryOnGame } from '../reducers/games'
 import { Container } from '../styling/GlobalStyling'
+import EndScreen from './EndScreen'
 
 const GameScreen = () => {
   const userName = useSelector(store => store.games.username)
   const actions = useSelector(store => store.games.gameStatus.actions)
   const history = useSelector(store => store.games.history)
-  // console.log(history) // history is object
 
   const dispatch = useDispatch()
 
@@ -20,7 +20,11 @@ const GameScreen = () => {
   //enables you to read the value of a property located deep within 
   //a chain of connected objects without having to check that each reference 
   //in the chain is valid.
-
+/*   if (actions.length === 0) {
+    return (
+        <EndScreen />
+    )
+} */
   return (
     <Container>
       <h3>{userName.description}</h3>
@@ -42,6 +46,7 @@ const GameScreen = () => {
       >
         Go back
       </button>
+      <EndScreen />
     </Container>
   )
 }