Leaves -- Janice

src/components/FinalPoem.js

@@ -1,20 +1,36 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import './FinalPoem.css';
 
 const FinalPoem = (props) => {
+  let formattedPoem = props.poem.map((line, i) => {
+    return <p key={i}> {line} </p>;
+  })
+
+  const onClickTogglePoem = () => {
+    props.togglePoemCallback();
+  }
 
   return (
-    <div className="FinalPoem">
+    (props.showPoem ?
+    (<div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+          {formattedPoem}
       </section>
+    </div>)
+    :
+    (<div className="FinalPoem__reveal-btn-container">
+      <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={onClickTogglePoem}/>
+    </div>)
+    )
+  )
+}
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
-    </div>
-  );
+FinalPoem.propTypes = {
+  poem: PropTypes.arrayOf(PropTypes.string),
+  showPoem: PropTypes.func.isRequired,
+  togglePoemCallback: PropTypes.func.isRequired,
 }
 
 export default FinalPoem;

src/components/Game.js

@@ -8,6 +8,36 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      latestSentence: '',
+      wholePoem: [],
+      showPoem: false
+    }
+  }
+
+  makeOneSentence = (words) => {
+    const sentence = `The ${words.adj1} ${words.noun1} ${words.adv} ${words.verb} the ${words.adj2} ${words.noun2}.`;
+    this.addToPoem(sentence);
+    this.setState({
+      latestSentence: sentence,
+    });
+    console.log(sentence);
+  }
+// Moved this out of makeOneSentence and made it a helper method for clarity
+  addToPoem = (toAdd) => {
+    this.state.wholePoem.push(toAdd);
+    this.setState({
+      wholePoem: this.state.wholePoem
+    })
+  }
+
+  togglePoem = () => {
+    let curStatus = this.state.showPoem
+    curStatus = !curStatus
+    this.setState({
+      showPoem: curStatus,
+    })
+    console.log(`showPoem changed to ${curStatus}`)
   }
 
   render() {
@@ -29,15 +59,20 @@ class Game extends Component {
         <p>Please follow the following format for your poetry submission:</p>
 
         <p className="Game__format-example">
-          { exampleFormat }
+        { exampleFormat }
         </p>
 
-        <RecentSubmission />
-
-        <PlayerSubmissionForm />
+        {
+        this.state.wholePoem.length > 0 &&
+        <RecentSubmission sentence={this.state.latestSentence}/>
+        }
 
-        <FinalPoem />
+        {
+        this.state.showPoem === false &&
+        <PlayerSubmissionForm makeOneSentenceCallback={this.makeOneSentence}/>
+        }
 
+        <FinalPoem poem={this.state.wholePoem} showPoem={this.state.showPoem} togglePoemCallback={this.togglePoem}/>
       </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,28 +1,113 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import './PlayerSubmissionForm.css';
 
 class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+      playerCount: 1,
+    }
+  }
+
+  onInputChange = (event) => {
+    const updatedState = {};
+    const field = event.target.name;
+    const value = event.target.value;
+    updatedState[field] = value;
+    this.setState(updatedState)
+    console.log(this.state)
+  }
+
+  onFormSubmit = (event) => {
+    event.preventDefault();
+    const words = {
+      adj1: this.state.adj1,
+      noun1: this.state.noun1,
+      adv: this.state.adv,
+      verb: this.state.verb,
+      adj2: this.state.adj2,
+      noun2: this.state.noun2
+    }
+    const newPlayerCount = this.state.playerCount + 1;
+    console.log(words)
+
+
+    this.setState({
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+      // does playercount state live in form or game? change this to a functional component and take away state?
+      playerCount: newPlayerCount
+    })
+    this.props.makeOneSentenceCallback(words);
   }
 
   render() {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{ this.state.playerCount }</h3>
 
-        <form className="PlayerSubmissionForm__form" >
+        <form className="PlayerSubmissionForm__form" onSubmit={this.onFormSubmit}>
 
           <div className="PlayerSubmissionForm__poem-inputs">
 
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
+            The
+            <input
+              className = {this.state.adj1 === '' ? 'PlayerSubmissionForm__input--invalid' : 'PlayerSubmissionForm__input--invalid::placeholder'}
+              placeholder="adjective"
+              name="adj1"
+              onChange={this.onInputChange}
+              value={this.state.adj1}
+              type="text" />
             <input
-              placeholder="hm..."
+              className = {this.state.noun1 === '' ? 'PlayerSubmissionForm__input--invalid' : 'PlayerSubmissionForm__input--invalid::placeholder'}
+              placeholder="noun"
+              name="noun1"
+              onChange={this.onInputChange}
+              value={this.state.noun1}
               type="text" />
+            <input
+              className = {this.state.adv === '' ? 'PlayerSubmissionForm__input--invalid' : 'PlayerSubmissionForm__input--invalid::placeholder'}
+              placeholder="adverb"
+              name="adv"
+              onChange={this.onInputChange}
+              value={this.state.adv}
+              type="text" />
+            <input
+              className = {this.state.verb === '' ? 'PlayerSubmissionForm__input--invalid' : 'PlayerSubmissionForm__input--invalid::placeholder'}
+              placeholder="verb"
+              name="verb"
+              onChange={this.onInputChange}
+              value={this.state.verb}
+              type="text" />
+            the
+            <input
+              className = {this.state.adj2 === '' ? 'PlayerSubmissionForm__input--invalid' : 'PlayerSubmissionForm__input--invalid::placeholder'}
+              placeholder="adjective"
+              name="adj2"
+              onChange={this.onInputChange}
+              value={this.state.adj2}
+              type="text" />
+            <input
+              className = {this.state.noun2 === '' ? 'PlayerSubmissionForm__input--invalid' : 'PlayerSubmissionForm__input--invalid::placeholder'}
+              placeholder="noun"
+              name="noun2"
+              onChange={this.onInputChange}
+              value={this.state.noun2}
+              type="text" />
+            .
 
           </div>
 
@@ -35,4 +120,8 @@ class PlayerSubmissionForm extends Component {
   }
 }
 
+PlayerSubmissionForm.propTypes = {
+  makeOneSentenceCallback: PropTypes.func.isRequired,
+};
+
 export default PlayerSubmissionForm;

src/components/RecentSubmission.js

@@ -1,13 +1,20 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import './RecentSubmission.css';
 
 const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">
+       {props.sentence}
+      </p>
     </div>
   );
 }
 
+RecentSubmission.propTypes = {
+  sentence: PropTypes.string,
+}
+
 export default RecentSubmission;