branches- vi

src/App.css

@@ -1,5 +1,6 @@
 .App {
   flex: .8;
+  background-color:rgb(255, 195, 184);
 }
 
 .App__header {
@@ -10,5 +11,5 @@
 
 .App__intro-text {
   font-size: 0.85rem;
-  color: gray;
+  color: tomato;
 }

src/components/FinalPoem.js

@@ -3,16 +3,40 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
+  const poemLines = props.submissions.map((sentence) =>
+    <p key={sentence.toString()}>
+      {sentence}
+    </p>
+  );
+
+  const onFinalButtonClick = () => {
+    props.onFinalPoemSubmitCallback()
+
+  }
+
+  const poemShow = () => {
+    return <section className="FinalPoem__poem">
+    <h3>Final Poem</h3>
+    {poemLines}
+    </section>
+  }
+
+  const buttonShow = () => {
+    return <div className="FinalPoem__reveal-btn-container">
+    <input 
+      onClick={onFinalButtonClick}
+      type="button" 
+      value="We are finished: Reveal the Poem" 
+      className="FinalPoem__reveal-btn" 
+    />
+    </div>
+  }
+
   return (
     <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
 
-      </section>
+    {props.revealPoem ? poemShow() : buttonShow() }
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
     </div>
   );
 }

src/components/Game.js

@@ -8,10 +8,29 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+    //in this state we can store the final poem 
+    this.state = {
+      submissions: [],
+      player: 1,
+      revealPoem: false,
+    }
   }
 
-  render() {
+  addSentence = (newSentence) => {
+    //Right now this is adding each submission object to the submitted Poems array. Maybe in here we could destructure it to only add the values that we want?
+    //Take in new sentence, and loop through each key-value, and return a string 
+    let sentenceString =`the ${newSentence.adjective} ${newSentence.noun} ${newSentence.adverb} the ${newSentence.adjective2} ${newSentence.noun2}.`
+
+    const {submissions} = this.state;
+    submissions.push(sentenceString); 
+    this.setState({
+      submissions,
+      player: this.state.player + 1
+    })
+    console.log(submissions)
+  }
 
+  render() {
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
         return field.placeholder;
@@ -20,6 +39,22 @@ class Game extends Component {
       }
     }).join(" ");
 
+
+    const displayRecent = () => {
+      if (this.state.submissions.length > 0 ){
+        return <RecentSubmission submission={this.state.submissions.slice(-1)[0]}/>
+      }
+    }
+
+    const displayForm = () => {
+      return <PlayerSubmissionForm addSentenceCallback={this.addSentence} player={this.state.player} fields={FIELDS}/>
+    }
+
+    const onFinalPoemSubmit = () => { 
+      this.setState({revealPoem: true})
+
+    }
+
     return (
       <div className="Game">
         <h2>Game</h2>
@@ -32,11 +67,10 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
-
-        <PlayerSubmissionForm />
-
-        <FinalPoem />
+        {this.state.revealPoem ? "" : displayRecent() }
+        {this.state.revealPoem ? "" : displayForm()}
+
+        <FinalPoem submissions={this.state.submissions} onFinalPoemSubmitCallback={onFinalPoemSubmit} revealPoem={this.state.revealPoem}/>
 
       </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

@@ -1,38 +1,132 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import './PlayerSubmissionForm.css';
 
 class PlayerSubmissionForm extends Component {
-
   constructor(props) {
     super(props);
+    //it is in here that we will store the words of the newest submission 
+    this.state = {
+      adjective: '',
+      noun: '',
+      adverb: '',
+      verb: '',
+      adjective2: '',
+      noun2: '',
+
+    }
+  }
+
+  onFormChange = (event) => {
+    const updatedState = {};
+
+    const field = event.target.name;
+    const value= event.target.value;
+
+    updatedState[field] = value;
+
+    this.setState(updatedState)
+
+  }
+
+  onSubmitSentence = (event) => {
+    event.preventDefault();
+    const sentence = {
+      adjective: this.state.adjective,
+      noun: this.state.noun,
+      adverb: this.state.adverb,
+      verb: this.state.verb,
+      adjective2: this.state.adjective2,
+      noun2: this.state.noun2,
+    }
+    this.props.addSentenceCallback(sentence);
+    this.setState({
+      adjective: '',
+      noun: '',
+      adverb: '',
+      verb: '',
+      adjective2: '',
+      noun2: '',
+    });
   }
 
   render() {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
-
-        <form className="PlayerSubmissionForm__form" >
+        <h3>Player Submission Form for Player #{this.props.player}</h3>
 
+        <form onSubmit={this.onSubmitSentence} className="PlayerSubmissionForm__form" >
           <div className="PlayerSubmissionForm__poem-inputs">
-
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
-            <input
-              placeholder="hm..."
-              type="text" />
-
+            the
+            <input 
+              name="adjective"
+              placeholder="adjective"
+              type="text" 
+              className={this.state.adjective ? "PlayerSubmissionForm__input" : "PlayerSubmissionForm__input--invalid"} 
+              onChange={this.onFormChange} 
+              value={this.state.adjective} 
+            />
+            <input 
+              name="noun"
+              placeholder="noun"
+              type="text" 
+              className={this.state.noun ? "PlayerSubmissionForm__input" : "PlayerSubmissionForm__input--invalid"} 
+              onChange={this.onFormChange} 
+              value={this.state.noun} 
+            />
+            <input 
+              name="adverb"
+              placeholder="adverb"
+              type="text" 
+              className={this.state.adverb ? "PlayerSubmissionForm__input" : "PlayerSubmissionForm__input--invalid"} 
+              onChange={this.onFormChange} 
+              value={this.state.adverb} 
+            />
+            <input 
+              name="verb"
+              placeholder="verb"
+              type="text" 
+              className={this.state.verb ? "PlayerSubmissionForm__input" : "PlayerSubmissionForm__input--invalid"} 
+              onChange={this.onFormChange} 
+              value={this.state.verb} 
+            />
+            the 
+            <input 
+              name="adjective2"
+              placeholder="adjective"
+              type="text" 
+              className={this.state.adjective2 ? "PlayerSubmissionForm__input" : "PlayerSubmissionForm__input--invalid"} 
+              onChange={this.onFormChange} 
+              value={this.state.adjective2} 
+            />
+            <input 
+              name="noun2"
+              placeholder="noun"
+              type="text" 
+              className={this.state.noun2 ? "PlayerSubmissionForm__input" : "PlayerSubmissionForm__input--invalid"} 
+              onChange={this.onFormChange} 
+              value={this.state.noun2} 
+            />
+            .
           </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" 
+            />
           </div>
         </form>
       </div>
     );
   }
 }
 
+PlayerSubmissionForm.propTypes = {
+  addSentenceCallback: PropTypes.func.isRequired,
+  player: PropTypes.number.isRequired,
+}
+
 export default PlayerSubmissionForm;

src/components/RecentSubmission.js

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