Technigo · AntoniaGranit · Apr 25, 2023 · Apr 25, 2023 · Apr 25, 2023 · Apr 25, 2023
diff --git a/code/package-lock.json b/code/package-lock.json
diff --git a/code/package.json b/code/package.json
@@ -4,14 +4,18 @@
   "private": true,
   "dependencies": {
     "@babel/eslint-parser": "^7.18.9",
+    "@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",
+    "redux": "^4.2.1",
+    "styled-components": "^5.3.10"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/code/public/index.html b/code/public/index.html
@@ -2,18 +2,17 @@
 <html lang="en">
 
   <head>
+    <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=Cutive+Mono&family=Press+Start+2P&display=swap" rel="stylesheet">
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      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`.
-    -->
-    <title>Technigo React App</title>
+    <meta property="og:title" content="The Maze">       
+    <meta property="og:description" content="Labyrinth Project by Ajmal, Sara and Antonia">
+    <meta property="og:image" content="https://i.postimg.cc/kMw1Fpqc/startBg.png">
+
+    <title>The Maze</title>
   </head>
 
   <body>

diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,21 @@
-import React from 'react'
+import React from 'react';
+import { Provider } from 'react-redux';
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
+import { Game } from 'reducers/Game';
+import { AppStart } from 'components/AppStart';
 
 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}>
+      <div>
+        <AppStart />
+      </div>
+    </Provider>
   )
 }
+
diff --git a/code/src/components/AppStart.js b/code/src/components/AppStart.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { StartGame } from 'components/StartGame';
+import { GameScreen } from 'components/GameScreen';
+
+export const AppStart = () => {
+  const username = useSelector((store) => store.game.username);
+
+  return (
+    <div>
+      {username === '' ? <StartGame /> : <GameScreen />}
+    </div>
+  );
+};
diff --git a/code/src/components/EndGame.js b/code/src/components/EndGame.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Game } from 'reducers/Game';
+import { Button } from '../styles/Button';
+import { GameScreenSection, GameSection } from '../styles/Sections';
+
+export const EndGame = () => {
+  const gameStep = useSelector((store) => store.game.response);
+  const dispatch = useDispatch();
+  const onRestartGame = () => {
+    dispatch(Game.actions.restartGame())
+  };
+
+  return (
+    <GameScreenSection>
+      <GameSection>
+        <p> {gameStep.description} </p>
+        <Button type="button" onClick={onRestartGame}>Restart Game!</Button>
+      </GameSection>
+    </GameScreenSection>
+  )
+}
diff --git a/code/src/components/GameScreen.css b/code/src/components/GameScreen.css
@@ -0,0 +1,16 @@
+p {
+    text-align: center;
+}
+h2 {
+    text-align: center;
+}
+
+
+@media (max-width : 428px)  {
+    p {
+        font-size: 8px;
+    }
+    h2 {
+        font-size: 8px;
+    }
+}
diff --git a/code/src/components/GameScreen.js b/code/src/components/GameScreen.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { getStory } from 'reducers/Game';
+import { Loading } from './Loading';
+import { EndGame } from './EndGame';
+import { DirectionButton } from '../styles/Button';
+import './GameScreen.css';
+import { GameScreenSection, GameSection } from '../styles/Sections';
+
+export const GameScreen = () => {
+  const dispatch = useDispatch();
+  const gameStep = useSelector((store) => store.game.response);
+  const loading = useSelector((store) => store.game.loading);
+  const actions = useSelector((store) => store.game.response.actions);
+
+  const onClickNextStep = (direction) => {
+    dispatch(getStory(direction))
+  };
+
+  if (loading) {
+    return <Loading />
+  }
+
+  if (actions && actions.length === 0) {
+    return <EndGame />
+  }
+
+  return (
+    <GameScreenSection>
+      <GameSection>
+        <p> {gameStep.description} </p>
+      </GameSection>
+      <section>
+        {gameStep.actions.map((singleStep) => {
+          return (
+            <GameSection key={singleStep.direction}>
+              <h2> {singleStep.description} </h2>
+              <DirectionButton
+                type="button"
+                onClick={() => onClickNextStep(singleStep.direction)}>
+                {singleStep.direction}
+              </DirectionButton>
+            </GameSection>
+          )
+        })}
+      </section>
+    </GameScreenSection>
+  )
+}
diff --git a/code/src/components/Loading.css b/code/src/components/Loading.css
@@ -0,0 +1,20 @@
+.loadingScreen {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    width: 100%;
+    background-image: url(../components/img/forest.gif);
+    background-size: cover;
+}
+
+.runner {
+scale: 70%;
+}
+
+@media (max-width : 428px)  {
+    .loadingText {
+        scale: 45%;
+    }
+}
+
diff --git a/code/src/components/Loading.js b/code/src/components/Loading.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+import running from './img/running.gif';
+import loader from './img/loader.gif';
+import './Loading.css';
+
+const LoadingSection = styled.section`
+display: flex;
+height: 100vh;
+background-color: none;
+`
+
+const LoadingText = styled.h1`
+
+
+  @media (min-width: 770px) {
+    font-size: 80px;
+}`
+
+export const Loading = () => {
+  return (
+    <LoadingSection>
+      <div className="loadingScreen">
+        <LoadingText className="loadingText"><img className="loader" src={loader} alt="loader" /></LoadingText>
+        <img className="runner" src={running} alt="running" />
+      </div>
+    </LoadingSection>
+  )
+}
diff --git a/code/src/components/StartGame.css b/code/src/components/StartGame.css
@@ -0,0 +1,15 @@
+#usernameForm {
+    font-family: "Press Start 2P";
+    text-align: center;
+    font-size: 16px;
+}
+
+@media (max-width : 428px)  {
+    .usernameForm {
+        scale: 55%;
+    }
+    #usernameForm {
+        font-size: 16px;
+    }    
+
+}
diff --git a/code/src/components/StartGame.js b/code/src/components/StartGame.js
@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Game, startGame } from 'reducers/Game';
+import { Loading } from './Loading';
+import { Button } from '../styles/Button';
+import { StartScreenSection, GameSection, Form } from '../styles/Sections';
+import './StartGame.css';
+
+export const StartGame = () => {
+  const [inputValue, setInputValue] = useState('');
+  const dispatch = useDispatch();
+  const loading = useSelector((store) => store.game.loading);
+
+  const onAddUsername = (event) => {
+    event.preventDefault();
+    dispatch(Game.actions.setUsername(inputValue));
+    dispatch(startGame());
+  };
+
+  if (loading) {
+    return <Loading />
+  }
+  return (
+    <StartScreenSection>
+      <GameSection>
+        <p>From right to left, and to and fro,
+        Caught in a labyrinth you go,
+        And turn, and turn, and turn again,
+        To solve the mystery, but in vain;
+        </p>
+        <p>
+        Stand still, and breathe, and take from me
+        A clue, that soon shall set you free!
+        Not Ariadne, if you met her,
+        Herself could serve you with a better.
+        </p>
+        <p>
+        You enter d easily--find where--
+        And make with ease your exit there!
+          <br />
+        by William Cowper
+        </p>
+        <Form
+          className="UsernameForm"
+          onSubmit={onAddUsername}>
+          <label htmlFor="usernameForm" className="usernameForm">
+            <input
+              id="usernameForm"
+              value={inputValue}
+              onChange={(event) => setInputValue(event.target.value)}
+              type="text"
+              required
+              placeholder="READY PLAYER 1"
+              style={{
+                background: 'transparent',
+                padding: '20px 30px 20px 30px',
+                font: 'Press Start 2P',
+                border: '2px solid black',
+                margin: '5px'
+              }} />
+          </label>
+          <Button
+            type="submit">
+            Start Game!
+          </Button>
+        </Form>
+      </GameSection>
+    </StartScreenSection>
+  )
+}
diff --git a/code/src/components/img/cave.gif b/code/src/components/img/cave.gif
diff --git a/code/src/components/img/forest.gif b/code/src/components/img/forest.gif
diff --git a/code/src/components/img/loader.gif b/code/src/components/img/loader.gif
diff --git a/code/src/components/img/mario.png b/code/src/components/img/mario.png
diff --git a/code/src/components/img/maze.png b/code/src/components/img/maze.png
diff --git a/code/src/components/img/running.gif b/code/src/components/img/running.gif
diff --git a/code/src/components/img/startBg.png b/code/src/components/img/startBg.png
diff --git a/code/src/index.css b/code/src/index.css
@@ -10,4 +10,4 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
-}
+}
diff --git a/code/src/index.js b/code/src/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import './index.css';
+import './reset.css';
 import { App } from './App';
 
 const container = document.getElementById('root');
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,4 +10,4 @@ body { @@
     code {
       font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
         monospace;
-    }
+    }