Merge pull request #12 from tloth/feature/flowers

Feature/flowers

src/App.css

@@ -62,4 +62,12 @@
 
 .timeContainer {
   height: 80vh;
-}
+}
+
+/* .bodyAndFlower {
+  position: relative;
+}
+
+.handFlower1 {
+  position: absolute;
+} */

src/App.js

@@ -8,25 +8,49 @@ function App() {
   const [userData1, setUserData1] = React.useState(null);
   const [userData2, setUserData2] = React.useState(null);
 
+  const [time1, setTime1] = React.useState(10);
+  const [time2, setTime2] = React.useState(10);
+
+  const [flowerCount1, setFlowerCount1] = React.useState(0);
+  const [flowerCount2, setFlowerCount2] = React.useState(0);
+
   return (
     <div className="App">
-      <FlowerPile user='1'/>
-      <TimeBar userData={userData1}/>
+      <FlowerPile
+        flowerCount={flowerCount1}
+        setFlowerCount={setFlowerCount1}
+        time={time1}
+        position='left'
+      />
+      <TimeBar
+        userData={userData1}
+        time={time1}
+        setTime={setTime1}
+        />
       <Avatar 
         userData={userData1}
         setUserData={setUserData1}
-        username='jokosanyang'
+        username='seabasshoang'
         position='left'
       />
 
       <Avatar 
         userData={userData2}
         setUserData={setUserData2}
-        username='charlielafosse'
+        username='starsuit'
+        position='right'
+      />
+      <TimeBar
+        userData={userData2}
+        time={time2}
+        setTime={setTime2}
+      />
+      <FlowerPile
+        flowerCount={flowerCount2}
+        setFlowerCount={setFlowerCount2}
+        time={time2}
         position='right'
       />
-      <TimeBar userData={userData2}/>
-      <FlowerPile user='2'/>
     </div>
   );
 }

src/components/Avatar.js

@@ -3,6 +3,8 @@ import { getUserData } from '../utils/getUser';
 
 import { ReactComponent as AvatarLeft } from '../assets/avatar1.svg';
 import { ReactComponent as AvatarRight } from '../assets/avatar2.svg';
+import { ReactComponent as Flower1 } from '../assets/flowerHead1.svg';
+import { ReactComponent as Flower2 } from '../assets/flowerHead2.svg';
 
 const Avatar = ({ userData, setUserData, username, position }) => {
 
@@ -18,8 +20,12 @@ const Avatar = ({ userData, setUserData, username, position }) => {
 
     return (
         <div className="avatar">
-            <img className={position} src={avatar_url}/>
+            {/* <SearchBar /> */}
+            <img className={position} src={avatar_url} alt="Flower Friend" />
+            <div className="bodyAndFlower">
             { position === 'left' ? <AvatarLeft /> : <AvatarRight /> }
+            {/* { position === 'left' ? <Flower1 className="handFlower1" /> : <Flower2 className="handFlower2" /> } */}
+            </div>
             <h1>{login}</h1>
         </div>
     ) 

src/components/FlowerPile.js

@@ -1,7 +1,30 @@
 import React from 'react';
+import { ReactComponent as Flower1 } from '../assets/flowerHead1.svg';
+import { ReactComponent as Flower2 } from '../assets/flowerHead2.svg';
 
-const FlowerPile = props => {
-    return <div> </div>;
+const FlowerPile = ({ flowerCount, setFlowerCount, position, time}) => {
+
+    React.useEffect(() => {
+        if (time !== 0) {
+        const handleKeyDown = event => {
+            if (event.key === 'a' && position ==='right') setFlowerCount(prevCount => prevCount+1);
+            if (event.key === 'l' && position ==='left') setFlowerCount(prevCount => prevCount+1);
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+
+    } else {
+        alert('TIME\'S UP BITCH');
+    }
+    }, [time]);
+    return (
+    <div>
+        {position === 'left' ? <Flower1 /> : <Flower2 />}
+        <h2>Flower count: {
+            flowerCount
+        }</h2>
+    </div>
+    );
 }
 
 export default FlowerPile;

src/components/SearchBar.js

@@ -0,0 +1,4 @@
+// import React from 'react';
+// import getUser from '../utils/getUser';
+
+// const SearchBar = 

src/components/TimeBar.js

@@ -2,9 +2,8 @@ import React from 'react';
 
 import { ReactComponent as InnerBar } from '../assets/innerBar.svg';
 
-const TimeBar = ({userData}) => {
+const TimeBar = ({ userData, time, setTime }) => {
 
-    const [time, setTime] = React.useState(10);
     const [barHeight, setBarHeight] = React.useState(100);
 
     React.useEffect(() => {

src/utils/getUser.js

@@ -10,7 +10,7 @@ const checkResponse = response => {
 
 export const getUserData = username => {
     let url = `https://api.github.com/users/${username}`;
-//     if (token) url = url.concat(`?access_token=${token}`);
+    // if (token) url = url.concat(`?access_token=${token}`);
     console.log(url);
     return fetch(url)
             .then(checkResponse)