added history

code/src/components/CurrentStep.js

@@ -6,6 +6,7 @@ import { useNavigate } from 'react-router-dom'
 
 import { game } from '../reducers/game'
 import { Loader } from './Loader'
+import { History } from './History'
 
 const Container = styled.div`
   display: flex;
@@ -99,23 +100,25 @@ export const CurrentStep = () => {
               <ButtonContainer key={action.direction}>
                 <p>{action.description}</p>
                 <Button onClick={() => dispatch(nextStep(action))}>
-                  Go{' '}
-                  {action.direction === 'North'
-                    ? action.direction + ' ⬆' //&#8593;
-                    : action.direction === 'South'
-                    ? action.direction + ' ⬇' //&#8595;
-                    : action.direction === 'West'
-                    ? action.direction + ' ⬅' //&#8594;
-                    : action.direction === 'East'
-                    ? action.direction + ' ➡' //&#8592;
-                    : ''}
+                  {'Go ' +
+                    action.direction +
+                    (action.direction === 'North'
+                      ? ' ⬆' //&#8593;
+                      : action.direction === 'South'
+                      ? ' ⬇' //&#8595;
+                      : action.direction === 'West'
+                      ? ' ⬅' //&#8594;
+                      : action.direction === 'East'
+                      ? ' ➡' //&#8592;
+                      : '')}
                 </Button>
               </ButtonContainer>
             )
           })}
         </Container>
       )}
       <StartOverButton onClick={onRestart}>Start over</StartOverButton>
+      <History />
     </GameContainer>
   )
 }

code/src/components/History.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { nextStep } from 'reducers/game'
+import styled from 'styled-components'
+
+const HistoryContainer = styled.div`
+  position: fixed;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  margin: 10px;
+  bottom: 0;
+`
+const Button = styled.button`
+  width: 40px;
+  height: 40px;
+`
+
+export const History = () => {
+  const dispatch = useDispatch()
+  const history = useSelector(store => store.game.history)
+  return (
+    <HistoryContainer>
+      {history?.map(action => (
+        <Button type='button' onClick={() => dispatch(nextStep(action))}>
+          {action.direction === 'North'
+            ? ' ⬆' //&#8593;
+            : action.direction === 'South'
+            ? ' ⬇' //&#8595;
+            : action.direction === 'West'
+            ? ' ⬅' //&#8594;
+            : action.direction === 'East'
+            ? ' ➡' //&#8592;
+            : ''}
+        </Button>
+      ))}
+    </HistoryContainer>
+  )
+}

code/src/components/StartPage.js

@@ -67,9 +67,7 @@ export const StartPage = () => {
     <div>
       <Container>
         <HeaderImage src={labyrith} />
-
         <SmallHeader>What's your name?</SmallHeader>
-
         <Input
           type='text'
           value={input}

code/src/index.css

@@ -1,12 +1,17 @@
 body {
   margin: 20px;
-  font-family: "IBM Plex Mono", monospace;
+  font-family: 'IBM Plex Mono', monospace;
   color: black;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+input[type='text'],
+select:focus,
+textarea {
+  font-size: 16px;
 }

code/src/reducers/game.js

@@ -6,7 +6,7 @@ import { ui } from './ui'
 const initialState = {
   username: '',
   currentStep: {},
-  steps: [],
+  history: [],
 }
 
 export const game = createSlice({
@@ -19,9 +19,9 @@ export const game = createSlice({
     setCurrentStep: (store, action) => {
       store.currentStep = { ...action.payload }
     },
-    setSteps: (store, action) => {
-      const newSteps = [...store.steps, action.payload]
-      store.steps = [...newSteps]
+    addHistory: (store, action) => {
+      const newHistory = [...store.history, action.payload]
+      store.history = [...newHistory]
     },
     restartGame: () => {
       return initialState
@@ -31,9 +31,9 @@ export const game = createSlice({
 
 export const startGame = input => {
   return dispatch => {
+    dispatch(ui.actions.setLoading(true))
     const newUser = input + uniqid()
     dispatch(game.actions.createUser(newUser))
-    dispatch(ui.actions.setLoading(true))
 
     const options = {
       method: 'POST',
@@ -59,7 +59,7 @@ export const startGame = input => {
 export const nextStep = action => {
   return (dispatch, getState) => {
     dispatch(ui.actions.setLoading(true))
-    dispatch(game.actions.setSteps(action.direction))
+    dispatch(game.actions.addHistory(action))
     const options = {
       method: 'POST',
       headers: {
@@ -85,7 +85,6 @@ export const nextStep = action => {
 
 export const navigateWithKeys = action => {
   return (dispatch, getState) => {
-    dispatch(game.actions.setSteps(action.direction))
     let nextAction = undefined
     if (action.key === 'ArrowUp') {
       nextAction = getState().game.currentStep.actions.find(action => action.direction === 'North')
@@ -97,7 +96,6 @@ export const navigateWithKeys = action => {
       nextAction = getState().game.currentStep.actions.find(action => action.direction === 'East')
     }
     if (nextAction) {
-      console.log(nextAction)
       dispatch(nextStep(nextAction))
     }
   }

code/src/store/setupStore.js

@@ -4,20 +4,16 @@ import thunkMiddleware from 'redux-thunk'
 import { rootReducer } from 'reducers/rootReducer'
 
 export const setupStore = preloadedState => {
-  const middlewares = [thunkMiddleware]
-  const middlewareEnhancer = applyMiddleware(...middlewares)
-
-  const enhancers = [
-    middlewareEnhancer,
-    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
-  ]
-  const composedEnhancers = compose(...enhancers)
-
-  const store = createStore(rootReducer, preloadedState, composedEnhancers)
-
-  // if (process.env.NODE_ENV !== 'production' && module.hot) {
-  //   module.hot.accept('./reducers', () => store.replaceReducer(rootReducer))
-  // }
+  const composedEnhancers =
+    (process.env.NODE_ENV !== 'production' &&
+      typeof window !== 'undefined' &&
+      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ||
+    compose
+  const store = createStore(
+    rootReducer,
+    preloadedState,
+    composedEnhancers(applyMiddleware(thunkMiddleware))
+  )
 
   return store
 }