Display opponent on button press

relates #2 #8 Co-authored-by: shaya <[email protected]>
fac20 · Sep 18, 2020 · a24ec48 · a24ec48
1 parent 64f1cf2
commit a24ec48
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 23 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,19 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/icon.png" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
-  <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%/icon.png" />
-  <!--
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/icon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
+      rel="stylesheet"
+    />
+    <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%/icon.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.
@@ -22,13 +27,13 @@
       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>Hook.</title>
-</head>
+    <title>Arch Nemosis.</title>
+  </head>
 
-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
-  <!--
+  <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.
 
@@ -38,6 +43,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-</body>
-
-</html>
+  </body>
+</html>
diff --git a/src/index.css b/src/index.css
@@ -307,3 +307,8 @@ card:before,
   border-left: 6px hsl(0, 0%, 0%) solid;
   border-right: 6px hsl(0, 0%, 0%) solid;
 }
+
+/*----- Hidden opponent card -----*/
+.hidden {
+  display: none;
+}
diff --git a/src/modules/fight-page.js b/src/modules/fight-page.js
@@ -4,20 +4,31 @@ import { getRandomFishData } from "./fetch-helper";
 
 const FightPage = () => {
   const [fishData, setFishData] = React.useState(null);
-  // const [opponentFishData, setOpponentFishData] = React.useState(null);   --> Accept button
+  const [opponentFishData, setOpponentFishData] = React.useState(null);
   const [count, setCount] = React.useState(0);
+  const [hidden, setHidden] = React.useState(true);
 
   // button activated effect - rejects button
   React.useEffect(() => {
     getRandomFishData().then((data) => {
       setFishData(data);
     });
   }, [count]);
+  // button activated effect - accept button
+  React.useEffect(() => {
+    getRandomFishData().then((data) => {
+      setOpponentFishData(data);
+    });
+  }, []);
+
   return (
     <>
       <h1 className="fight__title">Fishcious choice, player.</h1>
       <FishCard {...fishData} />
-      <button className="accept__btn">I'm hooked - Accept.</button>
+      <FishCard hidden={hidden} {...opponentFishData} />
+      <button className="accept__btn" onClick={() => setHidden(!hidden)}>
+        I'm hooked - Accept.
+      </button>
       <button
         className="reject__btn"
         onClick={() => {

diff --git a/src/modules/fish-card.js b/src/modules/fish-card.js
@@ -9,12 +9,13 @@ const FishCard = ({
   Electrogenic,
   Comments,
   image,
+  hidden,
 }) => {
   if (!Genus) {
     return <h3 className="loading">...Loading</h3>;
   }
   return (
-    <article className="card">
+    <article className={hidden ? "hidden card" : "card"}>
       <h2>
         {Genus} {Species}
       </h2>