added spaceship Lottie

code/public/index.html

@@ -13,6 +13,10 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Montserrat:wght@600;800&family=Teko&display=swap" rel="stylesheet">
+
     <title>Technigo React App</title>
   </head>
 

code/src/components/Game.js

@@ -1,7 +1,9 @@
+/* disable-eslint */
+
 import React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { fetchTwo, gameFetch } from 'reducers/gameFetch'
-import { LevelCard, Description, DirectionButton, Background } from 'lib/Level'
+import { LevelCard, Description, Background, DescriptionCard } from 'lib/Level'
 import { StarterPage } from './StarterPage'
 
 export const Game = () => {
@@ -15,47 +17,32 @@ export const Game = () => {
   const onRestartButton = () => {
     dispatch(gameFetch.actions.restartGame());
   };
-  /*   const CoordinateList = {
-    level1: '0,0',
-    level2: '0,1',
-    level3: '1,1',
-    level4: '1,2',
-    level5: '0,2',
-    level6: '0,3',
-    level7: '1,3'
-  }; */
-
-  const onLoadImages = () => {
-    if (coordinates === '') {
-      return '.images/start.png'
-    } else if (coordinates === '0,0') {
-      return '.images/level1.png'
-    } else if (coordinates === '0,1') {
-      return '.images/level2.png'
-    }
-  }
 
   return (
-    <Background style={{ backgroundImage: `url(${onLoadImages})` }}>
-      <LevelCard>
-        {coordinates === '' && (<StarterPage />)}
-        {coordinates === '1,3' && (<button type="button" onClick={onRestartButton}>Restart</button>)}
-        <p>{gameData.description}</p>
-        {gameActions && gameActions.map((item) => {
-          return (
-            <div key={item.direction}>
-              <Description>{item.description}</Description>
-              <DirectionButton
-                direction={item.direction}
-                type="button"
-                onClick={() => dispatch(fetchTwo(item.direction))}>
-                {item.direction}
-              </DirectionButton>
-            </div>
-          );
-        })}
-      </LevelCard>
-    </Background>
+    <>
+      {coordinates === 'starter-page' && (<StarterPage />)}
+      {coordinates !== 'starter-page' && (
+        <Background coordinates={coordinates}>
+          <LevelCard>
+            {coordinates === '1,3' && (<button type="button" onClick={onRestartButton}>Restart</button>)}
+            <Description>{gameData.description}</Description>
+            {gameActions && gameActions.map((item) => {
+              return (
+                <DescriptionCard key={item.direction}>
+                  <Description>{item.description}</Description>
+                  <button
+                    direction={item.direction}
+                    type="button"
+                    className="left"
+                    onClick={() => dispatch(fetchTwo(item.direction))}>
+                    {item.direction}
+                  </button>
+                </DescriptionCard>
+              );
+            })}
+          </LevelCard>
+        </Background>)}
+    </>
   )
 }
 

code/src/components/StarterPage.js

@@ -1,6 +1,9 @@
 import React, { useState } from 'react';
 import { gameFetch, fetchOne } from 'reducers/gameFetch';
 import { useDispatch } from 'react-redux';
+import { StartBackground, SpaceButton, GreetingText, StarterForm } from 'lib/Level';
+import { Player } from '@lottiefiles/react-lottie-player';
+import startgame from 'images/arrow-button.png';
 
 export const StarterPage = () => {
   const dispatch = useDispatch();
@@ -15,21 +18,36 @@ export const StarterPage = () => {
   };
 
   return (
-    <div>
+    <StartBackground>
       {submitted ? (
-        <h1>Hello, {userName}!</h1>
+        <GreetingText>Hello, {userName}!</GreetingText>
       ) : (
-        <form onSubmit={onSubmitUserName}>
-          <label htmlFor={userName}>
-            <input
-              type="text"
-              value={userName}
-              onChange={(e) => setUserName(e.target.value)} />
-          </label>
-          <button type="submit">Submit</button>
-        </form>
+        <>
+          <StarterForm onSubmit={onSubmitUserName}>
+            <label htmlFor={userName}>
+              <input
+                className="input"
+                type="text"
+                value={userName}
+                onChange={(e) => setUserName(e.target.value)}
+                placeholder="Enter Name" />
+            </label>
+
+            <SpaceButton type="submit">
+              <img src={startgame} alt="startbutton" />
+            </SpaceButton>
+          </StarterForm>
+
+          <Player
+            src="https://assets2.lottiefiles.com/packages/lf20_cgbjomca.json"
+            className="player"
+            loop
+            autoplay
+            speed={1}
+            style={{ width: '150px', height: '150px' }} />
+        </>
       )}
-    </div>
+    </StartBackground>
   );
 };
 

code/src/index.css

@@ -1,8 +1,6 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  font-family: 'Bebas Neue', cursive;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -11,3 +9,38 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.input{
+border-radius: 5px;
+width: 250px;
+height: 30px;
+font-size: 25px;
+}
+
+.left {
+  position: relative;
+  width: var(--size-arrow);
+  height: var(--size-arrow);
+  margin: 40px;
+  background: transparent;
+  border: 0;
+  border-left: var(--stroke-arrow) var(--style-arrow) var(--color-arrow);
+  border-bottom: var(--stroke-arrow) var(--style-arrow) var(--color-arrow);
+  cursor: pointer;
+  transform: rotate(  45deg);
+}
+.left::before {
+  position: absolute;
+  left: 0;
+  top: calc(var(--size-arrow) - var(--stroke-arrow) * 1.5);
+  clip-path: polygon(0 50%, calc(var(--stroke-arrow) / 2) 0, 100% 0, 100% 100%, calc(var(--stroke-arrow) / 2) 100%);
+  width: calc(var(--size-arrow) * 1.2);
+  height: 0;
+  border-top: var(--stroke-arrow) var(--style-arrow) var(--color-arrow);
+  transform-origin: 0 50%;
+  transform: rotate(-45deg);
+  content: '';
+}
+
+.left:hover  { opacity: 0.75; }
+.left:active { opacity: 0.5; }

code/src/lib/Level.js

@@ -1,10 +1,39 @@
+/* eslint-disable no-nested-ternary */
 import styled from 'styled-components';
+import start from 'images/start.png'
+import image1 from 'images/level1.png'
+import image2 from 'images/level2.png'
+import image3 from 'images/level3.png'
+import image4 from 'images/level4.png'
+import image5 from 'images/level5.png'
+import image6 from 'images/level6.png'
+import image7 from 'images/level7.png'
 
 export const Background = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url(${(props) => (props.coordinates === undefined || props.coordinates === '0,0' ? image1 : props.coordinates === '1,0' ? image2 : props.coordinates === '1,1' ? image3 : props.coordinates === '0,1' ? image4 : props.coordinates === '0,2' ? image5 : props.coordinates === '0,3' ? image6 : props.coordinates === '1,3' ? image7 : '')})
+`
 
+export const StartBackground = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url(${start})
 `
+
 export const LevelCard = styled.div`
-  border: 2px solid purple;
   padding: 0 20px;
   position: relative;
   width: 100%;
@@ -14,10 +43,49 @@ export const LevelCard = styled.div`
   justify-content: center;
   flex-direction: column;
 `
+export const DescriptionCard = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+`
 export const Description = styled.p`
+  font-family: 'Teko', sans-serif;
   padding: 20px;
+  width: 80%;
+  border-radius: 6px;
+  color: #FFFAF0;
+  background: rgb(151 71 255 / 70%);
+  font-weight: 800;
+  font-size: 24px;
+  line-height:  27px;
+  letter-spacing: 1px;
+`
+
+export const GreetingText = styled.h1`
+  color: white;
+  font-size: 60px;
+  letter-spacing: 1px;
 `
 
 export const DirectionButton = styled.button`
   background: #9747FF;
+`
+
+export const SpaceButton = styled.button`
+width:150px;
+    background: none;
+    border:none;
+    display: flex;
+
+    img{
+      width: 50%;
+      padding: 10px;
+    }
+  `
+
+export const StarterForm = styled.form`
+    display: flex;
+    justify-content: center;
+    align-items: center;
 `

code/src/reducers/gameFetch.js

@@ -6,7 +6,7 @@ const initialState = {
   description: '',
   actions: [],
   loading: false,
-  coordinates: ''
+  coordinates: 'starter-page'
 }
 
 export const gameFetch = createSlice({