Leaves - Julia K

src/components/FinalPoem.js

@@ -3,18 +3,39 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
+  const revealPoem = () => {
+    props.revealPoemCallback();
+  }
+
+  // format lines so they look like a poem
+  const formatPoem = props.finalPoem.map((line, i) => {
+      return (
+        <p key={i}> 
+          {line}
+        </p>
+      )
+
+})
+
+  // logic for "reveal poem" button and displaying final poem: start with displayPoem value of false in game and "display poem" button visible. When button is clicked, displayPoem value turns to true and buttons is no longer visible.
+
+  if (props.displayPoem === true) {
+
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+        {formatPoem}
       </section>
-
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
       </div>
+  )
+  } else {
+      return (
+      <div className="FinalPoem__reveal-btn-container">
+        <input type="button" onClick={revealPoem} value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
     </div>
   );
+  }
 }
 
 export default FinalPoem;

src/components/Game.js

@@ -8,6 +8,29 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+
+    // game state stores current line (pushed up from player submission form), submitted lines get added to final poem array, and display poem controls whether or not finished poem is visible
+
+    this.state = {
+      currentLine: '',
+      finalPoem: [], 
+      displayPoem: false, 
+    } }
+
+    // the newly submitted line becomes the current line and gets added to the final poem array
+  addLine = (line) => {
+    const {finalPoem} = this.state;
+    finalPoem.push(line);
+    this.setState({
+      currentLine: line,
+      finalPoem,
+    })
+  }
+
+  revealPoem = () => {
+    this.setState({
+      displayPoem: true
+    })
   }
 
   render() {
@@ -20,28 +43,38 @@ class Game extends Component {
       }
     }).join(" ");
 
-    return (
-      <div className="Game">
-        <h2>Game</h2>
+if (this.state.displayPoem === true) {
+  return (
+      <FinalPoem finalPoem={this.state.finalPoem} displayPoem={this.state.displayPoem} revealPoemCallback={this.revealPoem} />
+  )
 
-        <p>Each player should take turns filling out and submitting the form below. Each turn should be done individually and <em>in secret!</em> Take inspiration from the revealed recent submission. When all players are finished, click the final button on the bottom to reveal the entire poem.</p>
-
-        <p>Please follow the following format for your poetry submission:</p>
-
-        <p className="Game__format-example">
-          { exampleFormat }
-        </p>
+} else {
+    return (
 
-        <RecentSubmission />
+      <div className="Game">
+      <h2>Game</h2>
+
+      <p>Each player should take turns filling out and submitting the form below. Each turn should be done individually and <em>in secret!</em> Take inspiration from the revealed recent submission. When all players are finished, click the final button on the bottom to reveal the entire poem.</p>
+
+      <p>Please follow the following format for your poetry submission:</p>
+
+      <p className="Game__format-example">
+        { exampleFormat }
+      </p>
+
+        <div>
+        <RecentSubmission recentSubmission={this.state.currentLine}/>
 
-        <PlayerSubmissionForm />
+        <PlayerSubmissionForm addLine={(line) => {this.addLine(line)}}/>
 
-        <FinalPoem />
+        <FinalPoem finalPoem={this.state.finalPoem} displayPoem={this.state.displayPoem} revealPoemCallback={this.revealPoem} />
+        </div>
+        </div>
 
-      </div>
     );
-  }
-}
+  };
+};
+};
 
 const FIELDS = [
   "The",
@@ -73,4 +106,5 @@ const FIELDS = [
   ".",
 ];
 
+
 export default Game;

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,29 +5,141 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+    this.playerNumber = 1;
+    this.state = {
+      // user-inputted words are stored in state until submitted
+      article1: 'The',
+      adjective1: '',
+      noun1: '', 
+      adverb: '', 
+      verb: '', 
+      article2: 'the',
+      adjective2: '', 
+      noun2: '',
+    }
+    this.addLine = props.addLine;
   }
 
+updateWord = (event) => {
+  let value = event.target.value
+  this.setState({
+    [event.target.name]: value
+  })
+}
+
+onSubmitForm = (event) => {
+  // captures input from state and turns it into a line of poetry
+  event.preventDefault();
+  let line = '';
+  Object.keys(this.state).forEach((key) => {
+    line += ' ' + this.state[key];
+  })
+  // addLine passes line up to Game; Game passes line down to Recent Submission and Final Poem
+  this.addLine(line)
+  // increment player number
+  this.playerNumber ++;
+  // reset state so form is back to placeholders for next player
+  this.setState({
+    adjective1: '',
+    noun1: '', 
+    adverb: '', 
+    verb: '', 
+    adjective2: '', 
+    noun2: '',
+  })
+}
+
+adjective1Valid = () => {
+  return this.state.adjective1.match(/.+/);
+};
+
+noun1Valid = () => {
+  return this.state.noun1.match(/.+/);
+};
+
+adverbValid = () => {
+  return this.state.adverb.match(/.+/);
+};
+
+verbValid = () => {
+  return this.state.verb.match(/.+/);
+};
+
+adjective2Valid = () => {
+  return this.state.adjective2.match(/.+/);
+};
+
+noun2Valid = () => {
+  return this.state.noun2.match(/.+/);
+};
+
+
   render() {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
-
-        <form className="PlayerSubmissionForm__form" >
+        <h3>Player Submission Form for Player #{this.playerNumber}</h3>
 
+        <form className="PlayerSubmissionForm__form">
           <div className="PlayerSubmissionForm__poem-inputs">
 
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
+          {/* If field is empty, placeholder name appears. Otherwise, letters that the player has entered appear. */}
+          {/* Refactoring input fields to incorporate resetting state pattern we covered in class */}
+            The
+            <input
+              name="adjective1"
+              className={this.adjective1Valid() ? 'PlayerSubmissionForm__input' : 'PlayerSubmissionForm__input--invalid'}
+              onChange={this.updateWord}
+              placeholder={this.state.adjective1 === '' ? "adjective" : this.state.adjective1}
+              value={this.state.adjective1}
+              type="text" />
+
+            <input
+              name="noun1"
+              className={this.noun1Valid() ? 'PlayerSubmissionForm__input' : 'PlayerSubmissionForm__input--invalid'}
+              onChange={this.updateWord}
+              placeholder={this.state.noun1 === '' ? "noun" : this.state.noun1}
+              value={this.state.noun1}
+              type="text" />
+
+            <input
+              name="adverb"
+              className={this.adverbValid() ? 'PlayerSubmissionForm__input' : 'PlayerSubmissionForm__input--invalid'}
+              onChange={this.updateWord}
+              placeholder={this.state.adverb === '' ? "adverb" : this.state.adverb}
+              value={this.state.adverb}
+              type="text" />
+
+            <input
+              name="verb"
+              className={this.verbValid() ? 'PlayerSubmissionForm__input' : 'PlayerSubmissionForm__input--invalid'}
+              onChange={this.updateWord}
+              placeholder={this.state.verb === '' ? "verb" : this.state.verb}
+              value={this.state.verb}
+              type="text" />
+
+            the
+
+            <input
+              name="adjective2"
+              className={this.adjective2Valid() ? 'PlayerSubmissionForm__input' : 'PlayerSubmissionForm__input--invalid'}
+              onChange={this.updateWord}
+              placeholder={this.state.adjective2 === '' ? "adjective" : this.state.adjective2}
+              value={this.state.adjective2}
+              type="text" />
+
             <input
-              placeholder="hm..."
+              name="noun2"
+              className={this.noun2Valid() ? 'PlayerSubmissionForm__input' : 'PlayerSubmissionForm__input--invalid'}
+              onChange={this.updateWord}
+              placeholder={this.state.noun2 === '' ? "noun" : this.state.noun2}
+              value={this.state.noun2}
               type="text" />
 
           </div>
 
           <div className="PlayerSubmissionForm__submit">
-            <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
+            <input onClick={this.onSubmitForm} type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
           </div>
         </form>
       </div>

src/components/RecentSubmission.js

@@ -5,7 +5,8 @@ const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      {/* Most recent submission comes from Game via addLine, which holds the line of poetry from User Submission Form */}
+      <p className="RecentSubmission__submission">{ props.recentSubmission  }</p>
     </div>
   );
 }