Ports - Amy M

src/components/FinalPoem.js

@@ -3,16 +3,30 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
-  return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
+  const tonyStanza = props.poem.map( (line, i) => {
+    return <p key={i}>{line}</p>
+  });
 
-      </section>
-
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+  const poemInfo =
+    <section className="FinalPoem__poem">
+      <h3>Final Poem</h3>
+      { tonyStanza }
+    </section>
+
+  const submitPoemButton =
+    <div className="FinalPoem__reveal-btn-container" onClick={props.finalPoemCallback}>
+      <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn"/>
+    </div>
+
+  const displayPoemContent =
+      <div>
+        { props.isFinal ? poemInfo : '' }
+        { props.isFinal ? '' : submitPoemButton }
       </div>
+
+  return (
+    <div className="FinalPoem">
+      { displayPoemContent }
     </div>
   );
 }

src/components/Game.js

@@ -8,6 +8,32 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      finalPoem: [],
+      isFinal: false,
+    };
+  }
+
+  recentSubmission = (poem) => {
+    const poemLength = poem.length - 1
+    const lastLine = poem[poemLength]
+    return lastLine
+  }
+
+  addSubmission = (line) => {
+    const currentPoem = this.state.finalPoem;
+    currentPoem.push(line);
+    this.setState({
+      finalPoem: currentPoem,
+    })
+  }
+
+  displayFinalPoem = (event) => {
+    event.preventDefault();
+    this.setState({
+      isFinal: true,
+    })
   }
 
   render() {
@@ -20,6 +46,10 @@ class Game extends Component {
       }
     }).join(" ");
 
+    const displaySubmission = this.state.finalPoem.length > 0 && !this.state.isFinal ? <RecentSubmission recentLine={this.recentSubmission(this.state.finalPoem)}/> : '';
+
+    const displaySubmissionForm = !this.state.isFinal ? <PlayerSubmissionForm fields={FIELDS} addSubmissionCallback={this.addSubmission}/> : '';
+
     return (
       <div className="Game">
         <h2>Game</h2>
@@ -32,12 +62,12 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
-
-        <PlayerSubmissionForm />
+        { displaySubmission }
 
-        <FinalPoem />
+        { displaySubmissionForm }
 
+        <FinalPoem poem={ this.state.finalPoem } finalPoemCallback={this.displayFinalPoem} isFinal={this.state.isFinal}/>
+
       </div>
     );
   }

src/components/PlayerSubmissionForm.css

@@ -31,7 +31,7 @@
   background-color: tomato;
 }
 
-.PlayerSubmissionFormt__input--invalid {
+.PlayerSubmissionForm__input--invalid {
   background-color: #FFE9E9;
 }
 

src/components/PlayerSubmissionForm.js

@@ -5,30 +5,85 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+
+    const allPoemFields = {};
+    props.fields.forEach((field) => {
+      if (field.key) {
+        allPoemFields[ field.key ] = '';
+      }
+    });
+    this.state = {...allPoemFields, player: 1, addSubmissionCallback: this.addSubmission};
+  }
+
+  onChangeHandler = (value, id) => {
+    this.setState({
+      [id]: value,
+    })
+  }
+
+  increasePlayerCount = (value) => {
+    value += 1;
+    return value;
+  }
+
+  isValid = (field) => {
+    return field.length > 0 ? true : false;
   }
 
+  handleSubmit = (event) => {
+    event.preventDefault();
+    const poemLine = this.props.fields.map((field) => {
+      if (field.key) {
+        return this.state[field.key];
+      } else {
+        return field;
+      }
+    });
+
+    this.props.addSubmissionCallback(poemLine.join(" "));
+
+    this.setState({
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+      player: this.increasePlayerCount(this.state.player),
+    });
+}
+
   render() {
 
+    const formContent = this.props.fields.map( (field, i) => {
+      if (field.key) {
+        return <input
+          key={ i }
+          placeholder={ field.placeholder }
+          value={ this.state[field.key] }
+          onChange={ (event) => { this.onChangeHandler(event.target.value, field.key) } }
+          type="text"
+          className={this.isValid(this.state[field.key]) ? "PlayerSubmissionForm__input" : "PlayerSubmissionForm__input--invalid"}
+        />;
+      } else {
+        return field;
+      }
+    })
+
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{ this.state.player }</h3>
 
-        <form className="PlayerSubmissionForm__form" >
+        <form className="PlayerSubmissionForm__form" onSubmit={this.handleSubmit}>
 
           <div className="PlayerSubmissionForm__poem-inputs">
 
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
-            <input
-              placeholder="hm..."
-              type="text" />
-
-          </div>
+          { formContent }
 
           <div className="PlayerSubmissionForm__submit">
             <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
           </div>
+          </div>
         </form>
       </div>
     );

src/components/RecentSubmission.js

@@ -5,7 +5,7 @@ const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{ props.recentLine }</p>
     </div>
   );
 }