Merge pull request #9 from fac-13/styling

Styling
fac-13 · May 25, 2018 · c657af9 · c657af9
2 parents bfe3b92 + a057a08
commit c657af9
Show file tree

Hide file tree

Showing 10 changed files with 123 additions and 20 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,4 +1,7 @@
 {
   "parser": "babel-eslint",
-  "extends": ["eslint:recommended", "plugin:react/recommended"]
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
+  "env": {
+    "browser": true
+  }
 }
diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Document</title>
+  <title>Gif, Set, Match</title>
+  <link rel="stylesheet" href="./style.css">
 </head>
 
 <body>

diff --git a/public/style.css b/public/style.css
@@ -0,0 +1,23 @@
+* {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+
+#root {
+  height: 100%;
+  width: 100%;
+  background-color: #00ccff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/components/board/board.js b/src/components/board/board.js
@@ -3,14 +3,20 @@ import Timer from "./timer/timer.js";
 import Singlephoto from "./singlephoto/singlephoto.js";
 import Photogroup from "./photogroup/photogroup.js";
 import Gameover from "./gameover/gameover.js";
-import { getData, pickSingle, makeImageArray, shuffle } from "../../utils/datahelpers.js";
+import "./styles.css";
+import {
+  getData,
+  pickSingle,
+  makeImageArray,
+  shuffle
+} from "../../utils/datahelpers.js";
 
 export default class Board extends React.Component {
   state = {
     score: 0,
     time: 5,
     singlePhoto: "",
-    photoGroup: '',
+    photoGroup: "",
     renderSinglePhoto: false,
     renderPhotoGroup: false,
     url: "",
@@ -28,7 +34,11 @@ export default class Board extends React.Component {
             time: 6
           });
         } else {
-          this.setState({ renderPhotoGroup: false, time: 6 });
+          this.setState({
+            renderPhotoGroup: false,
+            time: 6,
+            renderGameOver: true
+          });
           clearInterval(countDown);
         }
       }
@@ -40,11 +50,10 @@ export default class Board extends React.Component {
   };
 
   componentDidMount() {
-    getData()
-      .then(data => {
-        let gifArray = makeImageArray(data);
-        this.setState({ photoGroup: gifArray })
-      })
+    getData().then(data => {
+      let gifArray = makeImageArray(data);
+      this.setState({ photoGroup: gifArray });
+    });
   }
 
   beginGame = () => {
@@ -53,7 +62,8 @@ export default class Board extends React.Component {
       return {
         renderSinglePhoto: true,
         singlePhoto: pickedPhoto,
-        photoGroup: shuffle(this.state.photoGroup)
+        photoGroup: shuffle(this.state.photoGroup),
+        renderGameOver: false
       };
     });
   };
@@ -65,7 +75,7 @@ export default class Board extends React.Component {
           return {
             score: prevState.score + 1,
             renderPhotoGroup: false,
-            time: 5,
+            time: 5
           };
         });
         this.beginGame();
@@ -94,12 +104,20 @@ export default class Board extends React.Component {
 
     return (
       <div className="board">
-        {!renderGameOver && <h1>score: {score}</h1>}
+        <h1 className="board--title">Gif, Set, Match</h1>
+        <h2 className="board--instruction">
+          <span className="board--instruction--keyword">See</span> a gif.{" "}
+          <span className="board--instruction--keyword">Find</span> a gif.
+        </h2>
+        {!renderGameOver && <p className="board--score">score: {score}</p>}
         {renderGameOver && <Gameover score={score} />}
 
-        <button onClick={this.beginGame}>
-          {!renderGameOver ? "Go!" : "Play Again"}
-        </button>
+        {!renderSinglePhoto &&
+          !renderPhotoGroup && (
+            <button className="board--btn" onClick={this.beginGame}>
+              {!renderGameOver ? "Go!" : "Play Again"}
+            </button>
+          )}
 
         {(renderSinglePhoto || renderPhotoGroup) && (
           <Timer time={time} timer={this.timer} rendered={renderSinglePhoto} />

diff --git a/src/components/board/gameover/gameover.js b/src/components/board/gameover/gameover.js
@@ -1,10 +1,11 @@
 import React from "react";
+import "./styles.css";
 
 export default class Gameover extends React.Component {
   render() {
     return (
-      <div>
-        <h2> Game Over! </h2>
+      <div className="gameover">
+        <h2> Game Over </h2>
         <p> Your score was {this.props.score}</p>
       </div>
     );

diff --git a/src/components/board/gameover/styles.css b/src/components/board/gameover/styles.css
@@ -0,0 +1,10 @@
+.gameover {
+  border: solid 2px #efecec;
+  border-radius: 0.25rem;
+  margin: 3rem auto;
+  padding: 0.5rem 0rem;
+  background-color: floralwhite;
+  box-shadow: 1px 11px 10px 0 rgba(2, 2, 2, 0.21),
+    1px 6px 12px 0 rgba(2, 2, 2, 0.24);
+  width: 50%;
+}
diff --git a/src/components/board/photogroup/photogroup.js b/src/components/board/photogroup/photogroup.js
@@ -8,7 +8,7 @@ export default class Photogroup extends React.Component {
       <div>
         {urls.map(url => (
           <img
-            className="board--singlephoto"
+            className="board--photos"
             key={urls.indexOf(url)}
             src={url}
             onClick={this.props.clickHandler(url)}

diff --git a/src/components/board/photogroup/style.css b/src/components/board/photogroup/style.css
@@ -0,0 +1,3 @@
+.board--photos {
+  width: 60px;
+}
diff --git a/src/components/board/singlephoto/style.css b/src/components/board/singlephoto/style.css
@@ -1,3 +1,3 @@
 .board--singlephoto {
-  width: 100px;
+  width: 200px;
 }
diff --git a/src/components/board/styles.css b/src/components/board/styles.css
@@ -0,0 +1,44 @@
+.board {
+  text-align: center;
+  width: 90%;
+  background-color: #fbfaf9;
+  padding-bottom: 5%;
+  overflow: auto;
+  position: relative;
+  border-radius: 0.25rem;
+  box-shadow: 0 4px 8px 0 rgba(2, 2, 2, 0.21), 0 6px 20px 0 rgba(2, 2, 2, 0.24);
+}
+
+.board--title {
+  color: rgb(255, 1, 200);
+}
+
+.board--instruction {
+  color: rgb(15, 18, 19);
+  font-size: 1.2rem;
+  font-weight: 500;
+}
+
+.board--instruction--keyword {
+  color: rgb(255, 1, 200);
+  font-style: italic;
+}
+
+.board--btn {
+  height: 2rem;
+  width: 4rem;
+  border-radius: 0.25rem;
+  background-color: rgb(143, 241, 30);
+  border: none;
+  text-transform: uppercase;
+  font-weight: bold;
+  box-shadow: 0 8px 16px 0 rgba(6, 6, 6, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
+}
+
+.board--btn:focus {
+  outline-color: rgb(0, 203, 255);
+}
+
+.board--score {
+  color: rgb(15, 18, 19);
+}