Leaves - Bri

src/components/FinalPoem.js

@@ -3,11 +3,36 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
+  function showSentence(sentenceArray) {
+    if (sentenceArray) {
+      console.log(sentenceArray);
+      return (
+        <div>
+        The&nbsp;
+          {sentenceArray[0]}&nbsp;
+          {sentenceArray[1]}&nbsp;
+          {sentenceArray[2]}&nbsp;
+          {sentenceArray[3]} the&nbsp;
+          {sentenceArray[4]}&nbsp;
+          {sentenceArray[5]}
+          .
+          </div> 
+      );
+    } else {
+      return null;
+    }
+  }
+
+  function mapSentences(props) {props.finalPoemLines.map((sentenceArray) => {
+    return <div>{showSentence(sentenceArray)}</div>;
+  })};
+
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+        {mapSentences(props)} 
+        {/* I'm able to see the state via console.log, but the sentences won't display */}
       </section>
 
       <div className="FinalPoem__reveal-btn-container">

src/components/Game.js

@@ -8,6 +8,16 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      playerInputs: [], // This will be an array of arrays
+    };
+  }
+
+  addPlayerInputWordsArray = (inputWordsArray) => {
+    this.setState((state, props) => ({
+      playerInputs: [...state.playerInputs, inputWordsArray]
+    }));
   }
 
   render() {
@@ -32,11 +42,11 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+        <RecentSubmission recentSubmissionWordsArray={this.state.playerInputs.slice(-1).pop()}  />
 
-        <PlayerSubmissionForm />
+        <PlayerSubmissionForm playerNumber={this.state.playerInputs.length + 1} addPlayerInputWordsArray={this.addPlayerInputWordsArray} />
 
-        <FinalPoem />
+        <FinalPoem finalPoemLines= {this.state.playerInputs}/>
 
       </div>
     );

src/components/PlayerSubmissionForm.js

@@ -5,24 +5,79 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      [0]: "", // Initialize value for each input to empty string
+      [1]: "",
+      [2]: "",
+      [3]: "",
+      [4]: "",
+      [5]: "",
+    };
+  }
+
+  textInputChange(event, inputId) {
+    this.setState({[inputId]: event.target.value});
+  }
+
+  sendPlayerInputWordsArray = (e) => {
+    e.preventDefault();
+    const inputWords = [this.state[0], this.state[1], this.state[2], this.state[3], this.state[4], this.state[5]];
+    this.props.addPlayerInputWordsArray(inputWords);
   }
 
   render() {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
-
-        <form className="PlayerSubmissionForm__form" >
+        <h3>Player Submission Form for Player #{this.props.playerNumber}</h3>
 
+        <form className="PlayerSubmissionForm__form" 
+            onSubmit={ this.sendPlayerInputWordsArray }
+            >
           <div className="PlayerSubmissionForm__poem-inputs">
 
             {
               // Put your form inputs here... We've put in one below as an example
             }
+            The
+            <input
+              placeholder="adjective"
+              type="text"
+              onChange={(event) => {this.textInputChange(event, 0) }}
+              />
+
+            <input
+              placeholder="noun"
+              type="text"
+              onChange={(event) => {this.textInputChange(event, 1) }}
+              />
+
+            <input
+              placeholder="adverb"
+              type="text"
+              onChange={(event) => {this.textInputChange(event, 2) }}
+              />
+
+              <input
+              placeholder="verb"
+              type="text"
+              onChange={(event) => {this.textInputChange(event, 3) }}
+              />
+
+          the
+            <input
+              placeholder="adjective"
+              type="text"
+              onChange={(event) => {this.textInputChange(event, 4) }}
+              />
+
             <input
-              placeholder="hm..."
-              type="text" />
+              placeholder="noun"
+              type="text"
+              onChange={(event) => {this.textInputChange(event, 5) }}
+             />
+            .
 
           </div>
 

src/components/RecentSubmission.js

@@ -1,11 +1,34 @@
 import React from 'react';
 import './RecentSubmission.css';
 
+
+function showLine(props) {
+  if (props.recentSubmissionWordsArray) {
+    return (
+      <span>
+      The&nbsp;
+        {props.recentSubmissionWordsArray[0]}&nbsp;
+        {props.recentSubmissionWordsArray[1]}&nbsp;
+        {props.recentSubmissionWordsArray[2]}&nbsp;
+        {props.recentSubmissionWordsArray[3]} the&nbsp;
+        {props.recentSubmissionWordsArray[4]}&nbsp;
+        {props.recentSubmissionWordsArray[5]}
+        .
+        {/*magical spaces: https://stackoverflow.com/questions/46656476/rendering-empty-space-in-react */}
+        </span> 
+    );
+  } else {
+    return null;
+  }
+}
+
 const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">
+        {showLine(props)}
+      </p>
     </div>
   );
 }