Leaves - Morgan

src/components/FinalPoem.js

@@ -5,14 +5,18 @@ const FinalPoem = (props) => {
 
   return (
     <div className="FinalPoem">
+      {props.showPoem ? (
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+    {props.poem.map((poemLine, i) => (
+      <p key={i}>{poemLine}</p>
+    ))}
       </section>
-
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+      ) : (
+        <div className="FinalPoem__reveal-btn-container">
+        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={props.onDisplayPoem} />
       </div>
+      )}
     </div>
   );
 }

src/components/Game.js

@@ -4,14 +4,68 @@ import PlayerSubmissionForm from './PlayerSubmissionForm';
 import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
+const FIELDS = [
+  "The",
+  {
+    key: 'adj1',
+    placeholder: 'adjective',
+    name: 'adjectiveFirst',
+  },
+  {
+    key: 'noun1',
+    placeholder: 'noun',
+    name: 'nounFirst'
+  },
+  {
+    key: 'adv',
+    placeholder: 'adverb',
+    name: 'adverb'
+  },
+  {
+    key: 'verb',
+    placeholder: 'verb',
+    name: 'verb'
+  },
+  "the",
+  {
+    key: 'adj2',
+    placeholder: 'adjective',
+    name: 'adjectiveSecond'
+  },
+  {
+    key: 'noun2',
+    placeholder: 'noun',
+    name: 'nounSecond'
+  },
+  ".",
+];
+
 class Game extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      poem: [],
+      showPoem: false
+    };
   }
 
-  render() {
-
+  addLineToPoem = (poemLine) => {
+    this.setState((prevState) => ({
+      poem: [
+        ...prevState.poem,
+        poemLine
+      ]
+    }));
+  }
+ // ... is saying: in this spot on the code, take all the elements on the array and add them one by one
+ // prevState(variable name) will always give you the most current version of state
+  handleDisplayPoem = () => {
+    this.setState({ showPoem: true });
+  } 
+
+ render() {
+    console.log(this.state.poem)
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
         return field.placeholder;
@@ -32,45 +86,23 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+        {!this.state.showPoem && (
+          <>
 
-        <PlayerSubmissionForm />
-
-        <FinalPoem />
+        <RecentSubmission lastLine={this.state.poem[this.state.poem.length -1]}/>
+
+        <PlayerSubmissionForm fields={FIELDS} onSubmitLine={this.addLineToPoem} currentPlayer={this.state.poem.length + 1} />
+        </>
+        )}
+        <FinalPoem 
+        poem={this.state.poem}
+        showPoem={this.state.showPoem}
+        onDisplayPoem={this.handleDisplayPoem}
+        />
 
       </div>
     );
   }
 }
 
-const FIELDS = [
-  "The",
-  {
-    key: 'adj1',
-    placeholder: 'adjective',
-  },
-  {
-    key: 'noun1',
-    placeholder: 'noun',
-  },
-  {
-    key: 'adv',
-    placeholder: 'adverb',
-  },
-  {
-    key: 'verb',
-    placeholder: 'verb',
-  },
-  "the",
-  {
-    key: 'adj2',
-    placeholder: 'adjective',
-  },
-  {
-    key: 'noun2',
-    placeholder: 'noun',
-  },
-  ".",
-];
-
 export default Game;

src/components/PlayerSubmissionForm.css

@@ -31,10 +31,14 @@
   background-color: tomato;
 }
 
-.PlayerSubmissionFormt__input--invalid {
+.PlayerSubmissionForm__input--invalid {
   background-color: #FFE9E9;
 }
 
 .PlayerSubmissionForm__input--invalid::placeholder {
   color: black;
 }
+
+.red {
+  background-color: red
+}

src/components/PlayerSubmissionForm.js

@@ -4,30 +4,139 @@ import './PlayerSubmissionForm.css';
 class PlayerSubmissionForm extends Component {
 
   constructor(props) {
-    super(props);
-  }
+    super(props);	    super(props);
+    this.state = {
+      adjectiveFirst: '',
+      nounFirst: '',
+      adverb: '',
+      verb: '',
+      adjectiveSecond: '',
+      nounSecond: ''
+    };
+  }	 
+
+  handleChange = (event) => {
+    const newState = {};
+    newState[event.target.name] = event.target.value;
+    this.setState(newState);
+    console.log(this.state);
+  };
+
+  handleClick = (event) => {
+    event.preventDefault();
+    const sentence = this.props.fields.reduce((acc, field, i) => {
+      if (field.key) {
+        return `${acc} ${this.state[field.name].trim()}`;
+      }
+      else {
+        if (i > 0 && i < (this.props.fields.length - 1)) {
+          return `${acc} ${field}`;
+        }
+        return `${acc}${field}`;
+      }
+    }, '');
+
+    this.props.onSubmitLine(sentence);
+
+    this.setState({
+      adjectiveFirst: '',
+      nounFirst: '',
+      adverb: '',
+      verb: '',
+      adjectiveSecond: '',
+      nounSecond: ''
+    });
+  };
 
   render() {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{this.props.currentPlayer}</h3>
 
         <form className="PlayerSubmissionForm__form" >
 
           <div className="PlayerSubmissionForm__poem-inputs">
 
             {
               // Put your form inputs here... We've put in one below as an example
-            }
+          this.props.fields.map((field, i) => {
+            	if (field.key) {
+            	  return (
+                  <input
+              	  placeholder={field.placeholder}
+                  value={this.state[field.name]}
+                  type="text"
+                  name={field.name}
+                  onChange={this.handleChange}
+                  className={this.state[field.name] ? "" : "red"}
+                  key={field.name} 
+                      />
+                ); 
+                } 
+                else {
+                    return <span key={i}>{field}</span>;}
+                })
+              }    
+          </div>	         
+
+            {/* /* <span>The</span>
             <input
-              placeholder="hm..."
-              type="text" />
+              name="adjective1"
+              placeholder="adjective"
+              type="text"
+              value={this.state.adjective1}
+              onChange={this.handleChange}
+              className={this.state[]}
+            />
+            <input
+              name="noun1"
+              placeholder="noun"
+              type="text"
+              value={this.state.noun1}
+              onChange={this.handleChange}
+              className={this.state["noun1"]}
+            />
+            <input
+              name="adverb"
+              placeholder="adverb"
+              type="text"
+              value={this.state.adverb}
+              onChange={this.handleChange}
+              className={this.state["adverb1"]}
+            />
+            <input
+              name="verb"
+              placeholder="verb"
+              type="text"
+              value={this.state.verb}
+              onChange={this.handleChange}
+              className={this.state["verb"]}
+            /> 
+            <span>the</span>
+            <input
+              name="adjective2"
+              placeholder="adjective"
+              type="text"
+              value={this.state.adjective2}
+              onChange={this.handleChange}
+              className={this.state["adjective2"]}
+            />
+            <input
+              name="noun2"
+              placeholder="noun"
+              type="text"
+              value={this.state.noun2}
+              onChange={this.handleChange}
+              className={this.state["noun2"]}
+            />
+            <span>.</span> */}
+
 
-          </div>
+          {/* </div> */} 
 
           <div className="PlayerSubmissionForm__submit">
-            <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
+            <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" onClick={this.handleClick} />
           </div>
         </form>
       </div>

src/components/RecentSubmission.js

@@ -1,13 +1,28 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import './RecentSubmission.css';
 
 const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
+      {props.lastLine && (
+        <>
+
+
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{props.lastLine}</p>
+      </>
+      )}
     </div>
   );
 }
 
+RecentSubmission.propTypes = {
+  lines: PropTypes.array,
+  handleChange: PropTypes.func,
+  onSelectPet: PropTypes.func
+}
+
 export default RecentSubmission;
+
+