WIP: Add Links in EmotionResults to correct Learn page; fix antipattern in Play - closes #31 and #36

app/assets/styles/main.css

@@ -21,6 +21,10 @@ button:focus {
   outline: rgba(0, 0, 0, 0);
 }
 
+a:focus {
+  outline: rgba(0, 0, 0, 0);
+}
+
 .hidden {
   display: none;
 }
@@ -181,10 +185,10 @@ video {
 .face-oval {
   width: 150px;
   height: 200px;
-  border: 2px dashed rgba(237, 205, 156, 0.5);
-  -moz-border-radius: 70px / 90px;
-	-webkit-border-radius: 70px / 90px;
-	border-radius: 70px / 90px;
+  border: 8px dashed rgba(237, 205, 156, 0.3);
+  -moz-border-radius: 85px / 100px;
+	-webkit-border-radius: 85px / 100px;
+	border-radius: 85px / 100px;
   position: absolute;
   top: 150px;
   left: 50%;
@@ -228,6 +232,22 @@ video {
   margin: 0 0 20px 0;
 }
 
+.learn-more-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  background-color: rgba(237, 205, 156, 1);
+  color: white;
+  border-radius: 50px;
+  margin-bottom: 30px;
+}
+
+.learn-more-link:hover {
+  font-weight: 700;
+  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
+}
+
 
 
 /*LEARN SECTION*/

app/components/EmotionResults/EmotionResults.js

@@ -1,13 +1,22 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import analyzeResponse from '../../lib/analyzeResponse.js';
 
-export const EmotionResults = ({ results, url }) => {
+export const EmotionResults = ({ results, url, pickedEmotion }) => {
   const noResults = () => {
     return (
       <h2 className='no-results'>Take a picture to see your expression!</h2>
     )
   }
 
+  const ifNotNeutralContemptRenderLink = (emotion) => {
+    if (emotion !== 'neutral' && emotion !== 'contempt') {
+      return (
+        <Link className='learn-more-link' to={`/learn/${emotion}`}>Learn more about {emotion}</Link>
+      )
+    }
+  }
+
   const showResults = () => {
     let emotionsForDisplay = analyzeResponse(results);
     return (
@@ -16,7 +25,7 @@ export const EmotionResults = ({ results, url }) => {
         <h2 className='results'>your expression is:</h2>
         {
           emotionsForDisplay.map((emotionObject, index) => {
-            if (emotionObject !== undefined) {
+            if (emotionObject !== undefined && emotionObject.emotion !== 'contempt') {
               return (
                 <div key={emotionObject.emotion}>
                   <h3 key={index}
@@ -26,6 +35,7 @@ export const EmotionResults = ({ results, url }) => {
                   <h2 className='emotion-score'>
                     {emotionObject.emotion}
                   </h2>
+                  {ifNotNeutralContemptRenderLink(emotionObject.emotion)}
                 </div>
               )
             }
@@ -36,7 +46,7 @@ export const EmotionResults = ({ results, url }) => {
   }
 
   const displayResults = () => {
-    return !results.length ? noResults() : showResults()
+    return (!results.length) ? noResults() : showResults()
   }
 
   return (

app/components/ImageCapture/ImageCapture.js

@@ -55,7 +55,7 @@ export default class ImageCapture extends Component {
     return (
       <article className='image-capture'>
         <button className='start-capture'
-                onClick={() => this.beginImageCapture()}>Start video</button>
+                onClick={() => this.beginImageCapture()}>start camera</button>
         <video autoPlay muted='true' height='350px' width='300px'></video>
         <div className='face-oval'></div>
         <button className='take-picture'

app/components/Learn/LearnNav.js

@@ -16,7 +16,6 @@ export const LearnNav = () => {
   return (
     <nav>
       <ul>
-
         <li>
           <NavLink
             to="/learn/happiness"
@@ -59,7 +58,6 @@ export const LearnNav = () => {
               about
           </NavLink>
         </li>
-
       </ul>
     </nav>
   )

app/components/Learn/emotions/Surprise.js

@@ -14,7 +14,7 @@ export const Surprise = () => {
       <article>
         <h2>What does surprise look like?</h2>
         <ul>
-          <li>Eyes wide open, or sometimes squeezeed shut</li>
+          <li>Eyes wide open, or sometimes squeezed shut</li>
           <li>Eyebrows raised</li>
           <li>Mouth usually open, sometimes lips are pursed into a small 'O' shape</li>
           <li>Depending on the situation, the person might freeze in place</li>

app/components/PickEmotion/PickEmotion.js

@@ -35,9 +35,6 @@ export default class PickEmotion extends Component {
         <button className={this.defineClass('scared')} onClick={() => this.pickEmotion('scared')}>
           scared
         </button>
-        <button className={this.defineClass('neutral')} onClick={() => this.pickEmotion('neutral')}>
-          neutral
-        </button>
       </article>
     )
   }

app/components/Play/Play.js

@@ -11,6 +11,8 @@ export default class Play extends Component {
       emotions: [],
       canvasURL: ''
     }
+    this.analyzeEmotions = this.analyzeEmotions.bind(this)
+    this.getImageURL = this.getImageURL.bind(this)
   }
 
   getImageURL(url) {
@@ -43,10 +45,11 @@ export default class Play extends Component {
     return (
       <article className='play'>
         <PickEmotion />
-        <ImageCapture analyzeEmotions={this.analyzeEmotions.bind(this)}
-                      getImageURL={this.getImageURL.bind(this)}/>
+        <ImageCapture analyzeEmotions={this.analyzeEmotions}
+                      getImageURL={this.getImageURL}/>
         <EmotionResults results={this.state.emotions}
-                        url={this.state.canvasURL} />
+                        url={this.state.canvasURL}
+                        pickedEmotion={this.state.pickedEmotion} />
       </article>
     )
   }