Project Labyrinth

code/package.json

@@ -4,14 +4,18 @@
   "private": true,
   "dependencies": {
     "@babel/eslint-parser": "^7.18.9",
+    "@lottiefiles/react-lottie-player": "^3.5.3",
+    "@reduxjs/toolkit": "^1.9.5",
     "eslint": "^8.21.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.5",
+    "styled-components": "^5.3.10"
   },
   "scripts": {
     "start": "react-scripts start",

code/src/App.js

@@ -1,9 +1,18 @@
-import React from 'react'
+import React from 'react';
+import { Provider } from 'react-redux';
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
+import { StartScreen } from 'components/StartScreen.js';
+import game from 'reducers/game.js';
 
 export const App = () => {
+  const reducer = combineReducers({
+    game: game.reducer
+  })
+
+  const store = configureStore({ reducer })
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
+    <Provider store={store}>
+      <StartScreen />
+    </Provider>
   )
-}
+}

code/src/components/Directions.js

@@ -0,0 +1,30 @@
+// import React, { useState } from 'react'
+// import { useSelector, useDispatch } from 'react-redux'
+// import { actionsGame } from 'reducers/game.js'
+
+// export const Directions = () => {
+//   const actions = useSelector((store) => store.game.actions)
+//   const [isActive, setActive] = useState('false')
+
+//   const dispatch = useDispatch()
+
+//   const toggleDisplay = () => {
+//     setActive(!isActive);
+//   }
+
+//   return (
+//     <>
+//       <button className={isActive ? null : 'instructions-btn'} type="button" onClick={toggleDisplay}>Click here to see directions</button>
+//       {actions.map((action) => {
+//         return (
+//           <div className={isActive ? 'hidden-instructions' : 'instructions'}>
+//             <p>{action.description}</p>
+//             <button type="button" onClick={() => dispatch(actionsGame(action.type, action.direction))}> Go {action.direction}</button>
+//           </div>
+//         )
+//       })}
+//     </>
+//   )
+// }
+
+// export default Directions

code/src/components/GameContent.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { actionsGame } from 'reducers/game';
+// import { Map } from './Map.js'
+
+export const GameContent = () => {
+  const { actions, coordinates } = useSelector((store) => store.game.position)
+  // const { description, actions, coordinates } = useSelector((store) => store.game.position)
+  const dispatch = useDispatch()
+  const username = useSelector((store) => store.game.username)
+
+  const onDirectionBtnClick = (direction) => {
+    dispatch(actionsGame(direction))
+  }
+
+  const onRestartBtnClick = () => {
+    return (
+      window.location.reload()
+    )
+  }
+
+  return (
+    <div className="name-content-container">
+      <player>
+        <h2>{username}</h2>
+        <button type="button" onClick={onRestartBtnClick}>Restart game
+        </button>
+      </player>
+      <div className="game-container">
+        <div className="navigation-container">
+          <div className="actions-container">
+            {actions.map((singleAction) => (
+              <section className="action-move">
+                <p>{singleAction.description}</p>
+                <button
+                  // buttonText={`Go ${singleAction.direction}`}
+                  type="button"
+                  onClick={() => onDirectionBtnClick(singleAction.direction)}>Button
+                </button>
+              </section>
+            ))}
+          </div>
+        </div>
+        {/* <Map coordinates={coordinates} /> */}
+        <p>coordinates={coordinates}</p>
+      </div>
+    </div>
+  )
+}
+
+/* const GameContent = () => {
+  const direction = useSelector((store) => store.game.direction)
+  const loadingState = useSelector((store) => store.loading.load)
+
+  if (loadingState) {
+    return (
+      <Loading />
+    )
+  }
+  return (
+    <div direction={direction}>
+      {direction === '' && <StartScreen />}
+      {direction !== '' && <GameScreen />}
+    </div>
+  )
+}
+*/
+
+export default GameContent

code/src/components/GameScreen.js

@@ -0,0 +1,53 @@
+// import TypeIt from 'typeit-react';
+import React, { useState } from 'react';
+import game, { startGame } from 'reducers/game.js';
+import { useDispatch } from 'react-redux';
+
+export const GameScreen = () => {
+  const [userNameInputValue, setUserNameInputValue] = useState('')
+  const dispatch = useDispatch()
+
+  const onFormSubmit = (event) => {
+    event.preventDefault();
+    dispatch(game.actions.setUsername(userNameInputValue))
+    dispatch(startGame())
+  }
+
+  return (
+    <form onSubmit={(event) => onFormSubmit(event)}>
+      <h1>Please enter your name:
+      </h1>
+      <label htmlFor="username">
+        <input
+          id="username"
+          type="text"
+          placeholder="Please enter name"
+          value={userNameInputValue}
+          onChange={(event) => setUserNameInputValue(event.target.value)} />
+        <button type="submit" onClick={onFormSubmit}>Start the game</button>
+      </label>
+    </form>
+  )
+}
+
+// export const GameScreen = () => {
+//   const description = useSelector((store) => store.game.description)
+//   const direction = useSelector((store) => store.game.direction)
+//   const dispatch = useDispatch()
+
+//   const restart = () => {
+//     dispatch(game.actions.setUsername(''))
+//     window.location.reload()
+//   }
+//   return (
+//     <GameCard>
+//       <TypeIt>{description}</TypeIt>
+//       <FlexDiv>
+//         {direction !== '1,3' && <Directions />}
+//         <button className="restart-btn" type="button" onClick={restart}>Restart</button>
+//       </FlexDiv>
+//     </GameCard>
+//   )
+// }
+
+// export default GameScreen

code/src/components/Loading.js

@@ -0,0 +1,43 @@
+// import { Player } from '@lottie-react';
+import React from 'react';
+// import { Player, Controls } from '@lottiefiles/react-lottie-player';
+import { Player } from '@lottiefiles/react-lottie-player'
+
+export const Loading = () => {
+  return (
+    <div className="loading-container">
+      <Player
+        autoplay
+        loop
+        src="https://assets2.lottiefiles.com/packages/lf20_rwbbf6ns.json">
+        {/* {style={{ height: '150px', width: '150px' }} */}
+        {/* <Controls visible={false} buttons={['play', 'repeat', 'frame', 'debug']} /> */}
+      </Player>
+    </div>
+  )
+}
+
+// const Loading = () => {
+//   return (
+//     <div
+//       src="https://assets8.lottiefiles.com/packages/lf20_3e0g4gjg.json"
+//       className="Player"
+//       autoPlay
+//       speed={2}
+//       style={{ height: '300px', width: '300px' }} />
+//   )
+// }
+
+// export default Loading
+
+// import React from 'react';
+// import { Player } from '@lottiefiles/react-lottie-player';
+// const Loading = () => (
+//   <Player
+//     autoplay
+//     loop
+//     src="https://assets10.lottiefiles.com/packages/lf20_q7uarxsb.json"
+//     style={{ height: '300px', width: '300px' }} />
+// )
+
+// export default Loading;

code/src/components/StartScreen.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+// import { Player } from '@lottiefiles/react-lottie-player';
+import { Loading } from './Loading.js';
+import { GameScreen } from './GameScreen.js';
+import { GameContent } from './GameContent.js';
+
+export const StartScreen = () => {
+  const isUserNameProvided = useSelector((store) => store.game.username)
+  const isLoading = useSelector((store) => store.game.loading)
+
+  return (
+    <div className="start-screen-container">
+      {isLoading ? <Loading /> : (<> {isUserNameProvided === '' ? <GameScreen /> : <GameContent />} </>)}
+    </div>
+  )
+}

code/src/components/StylesGlobal.js

@@ -0,0 +1,20 @@
+// export const GlobalStyles = createGlobalStyle`
+// `
+
+// export const Outerwrapper = styled.div`
+// width: 100%;
+// height: 100%;
+// display: flex;
+// align-items:center;
+// justify-content: center;
+// background-size: cover;
+// background-image: url(${(props) => (props.directions === '' ? Start : props.directions === '0,0' ? Zero : props.directions === '1,0' ? One : props.directions === '1,1' ? OneOne : props.directions === '0,1' ? ZeroOne : props.directions === '0,2' ? ZeroTwo : props.directions === '0,3' ? ZeroThree : props.directions === '1,3' ? OneThree : Start)})
+// `
+
+// export const Innerwrapper = styled.div`
+//   margin: 0 auto;
+//   width: 80%;
+//   height: 100%;
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;

code/src/reducers/game.js

@@ -0,0 +1,93 @@
+import { createSlice } from '@reduxjs/toolkit';
+// import loading from './loading';
+
+// const initialState = {
+//   username: '',
+//   //   description: '',
+//   //   direction: '',
+//   position: '',
+//   loading: false // should it be placed here?
+// //   actions: []
+// }
+
+const game = createSlice({
+  name: 'game',
+  initialState: {
+    username: '',
+    position: '',
+    loading: false
+  },
+  reducers: {
+    // an action to save the joke to global state
+    setUsername: (store, action) => {
+      store.username = action.payload;
+    },
+    setLoading: (store, action) => {
+      store.loading = action.payload;
+    },
+    setPosition: (store, action) => {
+      store.position = action.payload;
+    }
+  }
+});
+
+// a thunk to handle api call
+// https://labyrinth.technigo.io/start
+// https://labyrinth.technigo.io/action
+// start game
+export const startGame = () => {
+  return (dispatch, getState) => {
+    // set loading to true
+    // dispatch(loading.actions.setLoading(true))
+    dispatch(game.actions.setLoading(true))
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        username: getState().game.username
+      })
+    };
+    // what replaces jokes.category?
+    fetch('https://labyrinth.technigo.io/start', options)
+      .then((response) => response.json())
+      // below, json = data
+      .then((json) => {
+        console.log(json)
+        // get the data from the api - save it as the joke in global state
+        // set loading to false
+        dispatch(game.actions.setPosition(json))
+      })
+      .catch((error) => console.error(error))
+      .finally(() => dispatch(game.actions.setLoading(false)))
+  }
+}
+// export const actionsGame = (type, direction) => {
+
+export const actionsGame = (direction) => {
+  return (dispatch, getState) => {
+    dispatch(game.actions.setLoading(true))
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        username: getState().loading.username,
+        type: 'move',
+        direction
+      })
+    }
+    fetch('https://labyrinth.technigo.io/action', options)
+      .then((response) => response.json())
+      .then((json) => {
+        console.log(json)
+        dispatch(game.actions.setPosition(json))
+      })
+      .catch((error) => console.error(error))
+      .finally(() => dispatch(game.actions.setLoading(false)))
+  }
+}
+
+export default game

code/src/reducers/loading.js

@@ -0,0 +1,15 @@
+// import { createSlice } from '@reduxjs/toolkit'
+
+// export const loading = createSlice({
+//   name: 'loading',
+//   initialState: {
+//     load: false
+//   },
+//   reducers: {
+//     setLoading: (state, action) => {
+//       state.load = action.payload
+//     }
+//   }
+// })
+
+// export default loading