constructorlabs · DavidGridley · Nov 1, 2018 · Nov 2, 2018 · Nov 2, 2018 · Nov 2, 2018
diff --git a/README.md b/README.md
@@ -33,31 +33,31 @@ See [https://opentdb.com/api\_config.php](https://opentdb.com/api_config.php) fo
 
 ## Instructions
 
-* Fork and clone this repo. Run `npm install` to get all dependencies.
+<!-- * Fork and clone this repo. Run `npm install` to get all dependencies.
 
 * Load the first question automatically at the beginning using `componentDidMount` and display it to the user. Alongside buttons for the answers.
 
 * If the user clicks a correct answer, notify the user and increment the score by 1. On an incorrect answer, notify the user and reset the score to 0. You are welcome to use an alternative scoring system if you prefer.
 
 * If the user answers the question correctly load the next question.
 
-* Each correct answer should increment the score. It's up to you how you want to score answers. You could apply a different score for different difficulty grades. After each correct answer display the next question
+* Each correct answer should increment the score. It's up to you how you want to score answers. You could apply a different score for different difficulty grades. After each correct answer display the next question -->
 
-* Make the app responsive and look good at all screen sizes.
+<!-- * ------ Make the app responsive and look good at all screen sizes. -->
 
 ## Stretch goals - feel free to pick
 
-* Show the user a 'happy' animated gif on a correct answer and a 'sad' gif on incorrect answer.
+<!-- * Show the user a 'happy' animated gif on a correct answer and a 'sad' gif on incorrect answer. -->
 
 * Allow user to select question category
 
-* Allow user to select difficulty level
+<!-- * Allow user to select difficulty level -->
 
 * Add some unit tests
 
-* Implement a scoring system that gives higher scores for more difficult questions
+<!-- * Implement a scoring system that gives higher scores for more difficult questions -->
 
-* Create a high score table. When a user finishes the game, for example answers a question incorrectly, allow them to enter their name and add it along with score to a high score table.
+<!-- * Create a high score table. When a user finishes the game, for example answers a question incorrectly, allow them to enter their name and add it along with score to a high score table. -->
 
 * Display statistics about player performance such as total questions played, average score, most popular category, category with highest percentage of correct etc.
 
@@ -71,7 +71,7 @@ See [https://opentdb.com/api\_config.php](https://opentdb.com/api_config.php) fo
 * Make frequent commits
 * Create a pull request at the end
 
-## Redux getting started guide
+<!-- ## Redux getting started guide
 
 ![](/redux.png)
 
@@ -100,4 +100,4 @@ If you are using planning to use Redux, use the steps below to help you get star
 
 - Implement `mapStateToProps` in `QuestionContainer` which should take the `question` from reducer state and pass it as a `question` prop to the `Question` component. Add a console.log to `mapStateToProps` which outputs `Step 6 - calling mapStateToProps in QuestionContainer`.
 
-- Add some conditional rendering that checks if the question object received as `props` is not just an empty object to ensure it can be rendered without errors.
+- Add some conditional rendering that checks if the question object received as `props` is not just an empty object to ensure it can be rendered without errors. -->
diff --git a/index.html b/index.html
@@ -1,13 +1,19 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>Redux intro</title>
-    <link rel="stylesheet" type="text/css" href="style.css">
-  </head>
-  <body>
-    <div id="root">
-
-    </div>
-    <script src="dist/bundle.js"></script>
-  </body>
-</html>
+
+<head>
+  <title>Quizness Time</title>
+  <link rel="stylesheet" type="text/css" href="style.css">
+  <link href="https://fonts.googleapis.com/css?family=Encode+Sans+Condensed|Lobster" rel="stylesheet">
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+</head>
+
+<body>
+  <div id="root">
+
+  </div>
+  <script src="dist/bundle.js"></script>
+</body>
+
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,12 +20,14 @@
     "classnames": "^2.2.6",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
+    "he": "^1.2.0",
     "prop-types": "^15.6.2",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-redux": "^5.0.7",
     "redux": "^4.0.0",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "shuffle-array": "^1.0.1"
   },
   "devDependencies": {
     "babel-jest": "^22.4.1",

diff --git a/src/actions/index.js b/src/actions/index.js
@@ -1,5 +1,97 @@
-export function fetchQuestion(){
-  return function(dispatch){
+import shuffle from "shuffle-array";
 
+export function fetchQuestion(difficulty) {
+  return function(dispatch) {
+    fetch(`https://opentdb.com/api.php?amount=1&type=multiple${difficulty}`)
+      .then(response => response.json())
+      .then(result => {
+        const questionObj = result.results[0];
+        dispatch(receiveQuestion(questionObj));
+      })
+      .catch(error => console.log(error));
+  };
+}
+
+export function receiveQuestion(question) {
+  question.answerArr = shuffle(
+    question.incorrect_answers.concat(question.correct_answer)
+  );
+  return {
+    type: "RECEIVE_QUESTION",
+    question,
+    correct: ""
+  };
+}
+
+export function receiveAnswer(answer, question, quizDifficulty) {
+  const correctAnswer = question.correct_answer;
+  if (answer === correctAnswer) {
+    return {
+      type: "CORRECT_ANSWER",
+      quizDifficulty,
+      questionDifficulty: question.difficulty
+    };
+  } else {
+    return {
+      type: "INCORRECT_ANSWER"
+    };
+  }
+}
+
+export function receiveView(view) {
+  return {
+    type: "RECEIVE_VIEW",
+    view
+  };
+}
+
+export function receiveDifficulty(difficulty) {
+  return {
+    type: "RECEIVE_DIFFICULTY",
+    difficulty
+  };
+}
+
+export function receivePlayerName(name) {
+  return {
+    type: "RECEIVE_PLAYER_NAME",
+    name
+  };
+}
+
+
+export function fetchScoreboard(difficulty) {
+  const scoreboard = JSON.parse(localStorage.getItem(difficulty))
+  return {
+    scoreboard
+  }
+}
+
+export function initializeStateScoreboard(difficulty){
+  const scoreboard = JSON.parse(localStorage.getItem(difficulty))
+  return {
+    type: "RECEIVE_SCOREBOARD",
+    scoreboard: scoreboard,
+    formVisible: "yes"
   }
 }
+
+export function submitScore(name, points, difficulty) {
+    const quizDifficulty = !difficulty ? "random" : difficulty;
+    const scoreboardArray = fetchScoreboard(quizDifficulty);
+    const playerScoreObject = { name: name, points: points };
+    if (scoreboardArray.scoreboard === null) {
+      localStorage.setItem(quizDifficulty, JSON.stringify([playerScoreObject]));
+    } else if (scoreboardArray) {
+      const newScoreboard = scoreboardArray.scoreboard.concat(playerScoreObject)
+      newScoreboard.sort((a, b) => b.points - a.points);
+      localStorage.setItem(difficulty, JSON.stringify(newScoreboard))
+    }
+    const updatedScoreboard = fetchScoreboard(quizDifficulty);
+    return {
+      type: "RECEIVE_SCOREBOARD",
+      scoreboard: updatedScoreboard.scoreboard,
+      formVisible: "no"
+    }
+}
+
diff --git a/src/components/App.js b/src/components/App.js
@@ -1,10 +1,11 @@
 import React from 'react';
+import ContentContainer from '../containers/ContentContainer'
 
 class App extends React.Component {
   render(){
     return (
       <div>
-        App contents go here
+        <ContentContainer />
       </div>
     )
   }

diff --git a/src/components/Content.js b/src/components/Content.js
@@ -0,0 +1,21 @@
+import React from "react";
+import QuestionContainer from "../containers/QuestionContainer";
+import PointsContainer from "../containers/PointsContainer";
+import MenuContainer from "../containers/MenuContainer";
+import ScoreboardContainer from "../containers/ScoreboardContainer";
+
+function Content({ view }) {
+  return (
+    <div>
+      {view === "menu" && <MenuContainer />}
+      {view === "quiz" && (
+        <React.Fragment>
+          <QuestionContainer /> <PointsContainer />
+        </React.Fragment>
+      )}
+      {view === "scoreboard" && <ScoreboardContainer />}
+    </div>
+  );
+}
+
+export default Content;
diff --git a/src/components/Menu.js b/src/components/Menu.js
@@ -0,0 +1,43 @@
+import React from "react";
+
+function Menu({ difficulty, receiveView, receiveDifficulty }) {
+  return (
+    <div className="menu__container">
+      <h1 className="menu__title">It's Quizness Time!</h1>
+      <label className="menu__select__label">Please select difficulty:</label>
+      <select
+        value={difficulty}
+        onChange={event => {
+          receiveDifficulty(event.target.value);
+        }}
+        className="menu__select__dropdown"
+      >
+        <option value="&difficulty=easy">Easy</option>
+        <option value="&difficulty=medium">Medium</option>
+        <option value="&difficulty=hard">Hard</option>
+        <option value="">Random</option>
+      </select>
+      {difficulty === "&difficulty=easy" && (
+        <p className="menu__select__description">Just the basics, easy questions for easy going players.</p>
+      )}
+      {difficulty === "&difficulty=medium" && (
+        <p className="menu__select__description">Not quite easy, not quite hard.</p>
+      )}
+      {difficulty === "&difficulty=hard" && (
+        <p className="menu__select__description">Challenging to say the least.</p>
+      )}
+      {difficulty === "" && (
+        <p className="menu__select__description">
+          A mixed bag of question difficulties! Easy questions are worth 1
+          point, medium questions are worth 2 points and hard questions are
+          worth 3 points.
+        </p>
+      )}
+      <button className="menu__select__button" onClick={() => receiveView("quiz")}>
+        Lets get down to Quizness!
+      </button>
+    </div>
+  );
+}
+
+export default Menu;
diff --git a/src/components/Points.js b/src/components/Points.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+function Points({ points }) {
+
+    return(
+        <div className="points__container">
+            <p className="points__number">POINTS: {points} </p>
+        </div>
+    )
+}
+
+export default Points;