Ports - Elle

src/components/FinalPoem.js

@@ -2,16 +2,43 @@ import React from 'react';
 import './FinalPoem.css';
 
 const FinalPoem = (props) => {
+  // constructor(props) {
+  //   super(props);
+  //
+  //   this.state = {...props}
+  // }
+
+const allPoemLines = props.poemLines.map((line, i) => {
+  return <p key={i}> {line} </p>;
+});
+
+const onRevealFinalPoem = () => {
+
+  props.poemFinishedCallback(true);
+}
 
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
 
+        { props.poemFinished &&
+          (<div><h3>Final Poem</h3>
+          {allPoemLines}</div> ) }
       </section>
 
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+        {!props.poemFinished &&
+          <input type="button"
+          value="We are finished: Reveal the Poem"
+          className="FinalPoem__reveal-btn"
+
+
+          onClick={onRevealFinalPoem}
+          />
+        }
+
+
+
       </div>
     </div>
   );

src/components/Game.js

@@ -2,14 +2,31 @@ import React, { Component } from 'react';
 import './Game.css';
 import PlayerSubmissionForm from './PlayerSubmissionForm';
 import FinalPoem from './FinalPoem';
-import RecentSubmission from './RecentSubmission';
 
 class Game extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      poemLines: [],
+      poemFinished: false,
+    }
+    console.log(this.poemLines);
+  }
+
+  updatePoemLines = (newPoemLine) => {
+    const newPoemLines = this.state.poemLines
+    if (newPoemLine) {
+      newPoemLines.push(newPoemLine);
+      this.setState({
+        poemLines: newPoemLines
+      })
+    }
+    console.log(this.state.poemLines);
   }
 
+
   render() {
 
     const exampleFormat = FIELDS.map((field) => {
@@ -20,6 +37,12 @@ class Game extends Component {
       }
     }).join(" ");
 
+const poemFinished = () => {
+  this.setState({
+    poemFinished: true
+  })
+}
+
     return (
       <div className="Game">
         <h2>Game</h2>
@@ -32,11 +55,20 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
 
-        <PlayerSubmissionForm />
+        {!this.state.poemFinished &&
+        <PlayerSubmissionForm
+          // playerNumber={this.state.playerNumber}
+          updatePoemLinesCallback={this.updatePoemLines}
+          />
+        }
 
-        <FinalPoem />
+        <FinalPoem
+          poemLines={this.state.poemLines}
+          poemFinished={this.state.poemFinished}
+          updatePoemLinesCallback={this.state.updatePoemLines}
+          poemFinishedCallback={poemFinished}
+          />
 
       </div>
     );

src/components/PlayerSubmissionForm.js

@@ -1,28 +1,136 @@
 import React, { Component } from 'react';
 import './PlayerSubmissionForm.css';
+import RecentSubmission from './RecentSubmission';
 
 class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+
+      playerNumber: 1,
+      lastPoemLine: '',
+
+      updatePoemLinesCallback: props.updatePoemLines,
+      incrementPlayerNumberCallback: props.incrementPlayerNumberCallback
+    }
   }
 
+incrementPlayerNumber = () => {
+    const newPlayerNumber = this.state.playerNumber + 1;
+    this.setState({
+      playerNumber: newPlayerNumber
+    })
+  }
+
+onFieldTyping = (event) => {
+  const field = {};
+  field[event.target.name] = event.target.value;
+  event.target.className=''
+  this.setState(field);
+}
+
+// CURRENTLY THE FEILD WON'T TURN BACK TO WHITE IF YOU TYPE THEN DELETE ITS CONTENTS
+// check that the state of the field matches /[x-y]/
+// assign a class name to a variable
+// update class on input field based on conditional
+
+onSubmitLine = (event) => {
+  event.preventDefault();
+
+  const newPoemLine = `The ${this.state.adj1} ${this.state.noun1} ${this.state.adv} ${this.state.verb} the ${this.state.adj2} ${this.state.noun2}.`;
+
+  this.setState ({
+    adj1: '',
+    noun1: '',
+    adv: '',
+    verb: '',
+    adj2: '',
+    noun2: '',
+    lastPoemLine: newPoemLine,
+  })
+
+  this.incrementPlayerNumber();
+
+  this.props.updatePoemLinesCallback(newPoemLine);
+}
+// variable name for class of pink and for empty string
+// ternary for each input Line
+
   render() {
 
+
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
 
-        <form className="PlayerSubmissionForm__form" >
+        {this.state.lastPoemLine !== "" && (
+          <RecentSubmission
+          lastPoemLine = {this.state.lastPoemLine} />)}
+
+        <h3>Player Submission Form for Player #{ this.state.playerNumber }</h3>
+
+        <form
+          className="PlayerSubmissionForm__form"
+          onSubmit={this.onSubmitLine} >
 
           <div className="PlayerSubmissionForm__poem-inputs">
+            The
+            <input
+              className='PlayerSubmissionFormt__input--invalid'
+              placeholder="adjective"
+              name="adj1"
+              type="text"
+              onChange={this.onFieldTyping}
+              value={this.state.adj1}/>
+
+            <input
+              className='PlayerSubmissionFormt__input--invalid'
+              placeholder="noun"
+              name="noun1"
+              type="text"
+              onChange={this.onFieldTyping}
+              value={this.state.noun1} />
+
+            <input
+              className='PlayerSubmissionFormt__input--invalid'
+              placeholder="adverb"
+              name="adv"
+              type="text"
+              onChange={this.onFieldTyping}
+              value={this.state.adv} />
+
+            <input
+              className='PlayerSubmissionFormt__input--invalid'
+              placeholder="verb"
+              name="verb"
+              type="text"
+              onChange={this.onFieldTyping}
+              value={this.state.verb} />
+
+              the
+
+            <input
+              className='PlayerSubmissionFormt__input--invalid'
+              placeholder="adjective"
+              name="adj2"
+              type="text"
+              onChange={this.onFieldTyping}
+              value={this.state.adj2} />
 
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
             <input
-              placeholder="hm..."
-              type="text" />
+              className='PlayerSubmissionFormt__input--invalid'
+              placeholder="noun"
+              name="noun2"
+              type="text"
+              onChange={this.onFieldTyping}
+              value={this.state.noun2} />
 
           </div>
 

src/components/RecentSubmission.js

@@ -2,10 +2,11 @@ import React from 'react';
 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.lastPoemLine }</p>
     </div>
   );
 }