Merge pull request #17 from fac20/design-qa

Design qa
fac20 · Sep 18, 2020 · fb29040 · fb29040
2 parents 94dee67 + e357040
commit fb29040
Show file tree

Hide file tree

Showing 17 changed files with 53 additions and 187 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/index.html b/public/index.html
@@ -2,41 +2,18 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <!--
-      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.
-
-      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>React App</title>
+
+    <title>How-Seal-y</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/components/App/App.css b/src/components/App/App.css
@@ -1,38 +1,27 @@
-.App {
-  text-align: center;
-}
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
+body {
+  background-image: url("https://i.dailymail.co.uk/1s/2019/01/19/00/8715018-0-image-a-32_1547857542694.jpg");
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+.game__over {
+   background-image: url("https://www.google.com/url?sa=i&url=https%3A%2F%2Fimgflip.com%2Ftag%2Ffunny%2Bhawk&psig=AOvVaw0xhBDXRviN0aWsvWDcdz79&ust=1600447128173000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCLj1mqvQ8OsCFQAAAAAdAAAAABAD");
+ }
+
+div {
+  text-align: center;
 }
 
-.App-link {
-  color: #61dafb;
+h1 {
+  color: red;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+h2 {
+  color: blue;
+  background-color: white;
 }
+
+button {
+  color: pink;
+  background-color: green;
+}
diff --git a/src/components/App/App.js b/src/components/App/App.js
@@ -12,16 +12,12 @@ function App() {
   const [score, setScore] = React.useState(0)
 
   return (
-    <div className="App">
+    <div className="bg__image">
      { gameState === "notStarted" ? <StartGame username={username} setUser={setUser} setGameState={setGameState}/> :
      gameState === "started" ? <Quiz  username={username} setGameState={setGameState} score={score} setScore={setScore}/> :
     <GameOver setGameState={setGameState} score={score}/> 
+
      }
-{/*     
-      {gameState === “notStarted” ? <StartGame />
-      : gameState === “started” ? <Quiz />
-      : <GameOver />} 
-    */}
 
     </div>
   );

diff --git a/src/components/App/App.test.js b/src/components/App/App.test.js
@@ -2,8 +2,14 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import App from './App';
 
-test('renders learn react link', () => {
+test('renders initial page welcome message', () => {
   const { getByText } = render(<App />);
-  const linkElement = getByText(/start game/i);
-  expect(linkElement).toBeInTheDocument();
+  const welcomeMess = getByText(/how seal-y/i);
+  expect(welcomeMess).toBeInTheDocument();
 });
+
+test('render start game button', () => {
+  const { getByText } = render(<App />);
+  const startButton = getByText(/Start Game/);
+  expect(startButton).toBeInTheDocument();
+});
diff --git a/src/components/GameOver/GameOver.js b/src/components/GameOver/GameOver.js
@@ -1,9 +1,8 @@
 import React from "react"
 
-
 export default function GameOver(props) {
     return (
-        <div>
+        <div class="game__over">
             <h1>GAME OVER!!! How Hawkward...</h1>
             <h2>You Scored {props.score}!</h2>
             <button 

diff --git a/src/components/PlayGame/Quiz.js b/src/components/PlayGame/Quiz.js
@@ -1,4 +1,3 @@
-// import datahelpers stuff 
 import getData from "../../utils/data_helpers"
 import React from "react"
 import Timer from "./Timer"
@@ -8,8 +7,6 @@ export default function Quiz(props) {
     const [index, setIndex] = React.useState(0);
     const [timeLeft, setTimeLeft] = React.useState(15)
 
-    console.log("index", index)
-
     React.useEffect(() => {
         getData().then(results => setJsonData(results))
     }, []);
@@ -23,8 +20,7 @@ export default function Quiz(props) {
     const incorrect_answers = currentQuestion.incorrect_answers;
     const choices = [correct_answer, ...incorrect_answers]
 
-        var shuffledChoices = choices.sort(() => Math.random() - 0.5)
-
+    var shuffledChoices = choices.sort(() => Math.random() - 0.5)
 
     function checkAnswer(event){
 
@@ -41,26 +37,16 @@ export default function Quiz(props) {
             setTimeLeft(timeLeft - 2);
         }
     }
-
-    // function createInnerHtml(){
-    //     return {__html: question}
-    //     dangerouslyS.etInnerHTML={createInnerHtml()
-    // }
-
-
-
 
     return (
         <main>
             <Timer timeLeft={timeLeft} setTimeLeft={setTimeLeft} setGameState={props.setGameState}/>
             { index === 0 ? <h1>Whale hello there, {props.username}!</h1> : null }
-            {/* <div dangerouslySetInnerHTML={Quiz()} />; */}
-            <h2 style={{color: "green"}}>{index + 1}.<span dangerouslySetInnerHTML={{__html: question}} /></h2> 
+            <h2>{index + 1}.<span dangerouslySetInnerHTML={{__html: question}} /></h2> 
             {shuffledChoices.map(choice => (
                 <button onClick ={(event) =>{
                     checkAnswer(event)
                     setIndex(index + 1)
-
                 }
 
                 }>{choice}</button>
@@ -70,45 +56,3 @@ export default function Quiz(props) {
         </main>
     )
 }
-
-
-
-
-
-// create function 
-/*
-- should get animals data
-"results": [
-    {
-      "category": "Animals",
-      "type": "boolean",
-      "difficulty": "easy",
-      "question": "The Axolotl is an amphibian that can spend its whole life in a larval state.",
-      "correct_answer": "True",
-      "incorrect_answers": [
-        "False"
-      ]
-    },
-    {
-      "category": "Animals",
-      "type": "multiple",
-      "difficulty": "hard",
-      "question": "What was the name of the Ethiopian Wolf before they knew it was related to wolves?",
-      "correct_answer": "Simien Jackel",
-        "incorrect_answers": [
-        "Ethiopian Coyote",
-        "Amharic Fox",
-        "Canis Simiensis"
-    ]
-    }
-- keep tab of questions using useState() 
-- which will be initialised with the first question in the api 
-- create choices variable - whcih will have true and false answers
-- counter var- tab of how many question  the user has attempted/has been rendered
-- render 2 sections - 1 with questions and another with choices
-- render timer bar which we will import from timer.js
-
-
-
-
-*/
diff --git a/src/components/PlayGame/Timer.js b/src/components/PlayGame/Timer.js
@@ -1,52 +1,26 @@
 import React from "react"
 
-// correct_answer +5
-// incorrect_answers -2
-export default function Timer(props) {
-    // const [timePlus, setTimePlus] = React.useState(null)
-    // const [minusTime, setMinusTime] = React.useState(null)
+export default function Timer({timeLeft, setTimeLeft, setGameState}) {
 
-    // const [timeLeft, setTimeLeft] = React.useState(15)
-
-    React.useEffect((props) => {
+    React.useEffect(() => {
         //  if there is not timeLeft then game over?
-        if (props.timeLeft <= 0) props.setGameState("gameOver");
+        if (  timeLeft <= 0)   setGameState("gameOver");
         // else create set interval function for every second
-        const intervalId = setInterval(() => {
-                props.setTimeLeft(props.timeLeft - 1)
+        const startInterval = setInterval(() => {
+                  setTimeLeft(timeLeft - 1)
             }, 1000);
-        return () => clearInterval(intervalId)
-    }, [props.timeLeft])
+        return () => clearInterval(startInterval)
+    }, [timeLeft, setGameState, setTimeLeft])
 
     return (
 
         <div>
-            <h1>{props.timeLeft}</h1>
-             <label for="game">progress:</label>
-             <progress id="game" value={props.timeLeft} max="30"> {props.timeLeft} </progress>
+            <h1>{timeLeft}</h1>
+             <label htmlFor="game">progress:</label>
+             <progress id="game" value={  timeLeft} max="30"> {timeLeft} </progress>
 
         </div>
 
     )
 
 }
-
-
-// function AlterTimer() {
-//     const [alterTimer, setAlterTimer] = React.useState(0)
-
-//     React.useEffect(() => {
-//         if (props.correct_answer) {
-//             setAlterTimer(timeLeft + 5)
-//         } else {
-//             setAlterTimer(timeLeft - 2)
-//         }
-//     })
-// }
-
-/*
-
-
-
-
- */
diff --git a/src/components/StartGame/StartGame.js b/src/components/StartGame/StartGame.js
@@ -1,14 +1,9 @@
 import React from "react";
 
-// Display a card that has an input for entering your username 
-// and a "start Game" button
-
-
-// const [gameStarted, setGameStarted] = React.useState(false)
-export default function StartGame(props){
-    //  set a global state eg gamestarted
-
+export default function StartGame(props){    
     return (
+        <div>
+       <h1>How Seal-y!</h1>
         <form>
         <label htmlFor="username">Enter Username</label>
         <input
@@ -23,7 +18,7 @@ export default function StartGame(props){
 
         />
         </form>
-
+        </div>
     );
 }
 

diff --git a/src/index.css b/src/index.css
@@ -6,8 +6,3 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
diff --git a/src/index.js b/src/index.js
@@ -9,7 +9,3 @@ ReactDOM.render(
   </React.StrictMode>,
   document.getElementById('root')
 );
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
diff --git a/src/setupTests.js b/src/setupTests.js
diff --git a/src/utils/data_helpers.js b/src/utils/data_helpers.js
@@ -8,10 +8,11 @@ const checkResponse = (response) => {
 };
 
 export default function getData () {
-    return fetch("https://opentdb.com/api.php?amount=50&category=27")
+    return fetch("https://opentdb.com/api.php?amount=10&category=27&difficulty=easy")
         .then(checkResponse)
         .catch((err) => {
             throw new Error(`fetch geData failed ${err}`)
         });
 };
 
+