Sockets - Carla

src/components/FinalPoem.js

@@ -2,17 +2,25 @@ import React from 'react';
 import './FinalPoem.css';
 
 const FinalPoem = (props) => {
+
+  const finalPoem = props.poem.map((verse, index) => {
+    return (<p key={index}>{verse}</p>)
+  })
 
   return (
     <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
+      { props.finalized && 
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+          {finalPoem}
+        </section>
+      }
 
-      </section>
-
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
+      { !props.finalized && finalPoem.length >= 1 &&
+        <div className="FinalPoem__reveal-btn-container">
+          <input onClick={props.revealPoemCallback} type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+        </div>
+      }
     </div>
   );
 }

src/components/Game.js

@@ -8,10 +8,38 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      poem: [],
+      finalized: false,
+    }
+  }
+
+  addVerse = (newVerse) => {
+    const newState = {...this.state}
+    const updatedPoem = newState.poem
+    updatedPoem.push(newVerse)
+    this.setState(updatedPoem)
   }
 
+  finalizePoem = () => {
+    if (this.state.poem.length >= 1) {
+      this.setState({finalized: true})
+    }
+  }
+
   render() {
 
+    const showMostRecent = () => {
+      if (this.state.poem.length >= 1 && !this.state.finalized) {
+        return <RecentSubmission 
+        poem={this.state.poem}
+      />
+      }
+    }
+
+    const playerNumber = this.state.poem.length
+
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
         return field.placeholder;
@@ -32,11 +60,22 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
-
-        <PlayerSubmissionForm />
+        { showMostRecent() }
 
-        <FinalPoem />
+
+        { !this.state.finalized &&
+          <PlayerSubmissionForm 
+            fields={FIELDS}
+            playerNumber={playerNumber}
+            formCallback={this.addVerse}
+          />
+        }
+
+        <FinalPoem 
+          poem={this.state.poem}
+          finalized={this.state.finalized}
+          revealPoemCallback={this.finalizePoem}
+        />
 
       </div>
     );

src/components/PlayerSubmissionForm.js

@@ -1,28 +1,94 @@
 import React, { Component } from 'react';
 import './PlayerSubmissionForm.css';
+import PropTypes from 'prop-types';
 
 class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '', 
+    }
+  }
+
+  resetState = () => {
+    this.setState({
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '', 
+    })
+  }
+
+  onFormChange = (event) => {
+    const field = event.target.name;
+    const value = event.target.value;
+
+    const updatedState = {};
+    updatedState[field] = value;
+    this.setState(updatedState);
+  }
+
+  onSubmit = (event) => {
+    event.preventDefault()
+    // const {adjective1, noun1, adverb, verb, adjective2, noun2} = this.state
+
+    const newVerse = this.props.fields.map((field) => {
+      if (field.key) {
+        return this.state[field.key]
+      } else {
+        return field
+      }
+    })
+    console.log(event)
+    this.props.formCallback(newVerse.join(" "))
+
+    this.resetState()
   }
 
+  isInputValid = (input) => {
+    const className = input.length > 0 ? '' : 'PlayerSubmissionFormt__input--invalid'
+    return className
+  }
+
+
+
   render() {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        {/* Add 1 so it does not start from player #0 */}
+        <h3>Player Submission Form for Player #{ this.props.playerNumber + 1}</h3>
 
-        <form className="PlayerSubmissionForm__form" >
+        <form onSubmit={this.onSubmit} 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" />
+            <div>
+            The <input className={this.isInputValid(this.state.adj1)} name='adj1' type="text" placeholder='adjective' onChange={this.onFormChange} value={this.state.adj1}/>
+            </div>
+            <div>
+              <input className={this.isInputValid(this.state.noun1)} name='noun1' type="text" placeholder='noun' onChange={this.onFormChange} value={this.state.noun1}/>
+            </div>
+            <div>
+              <input className={this.isInputValid(this.state.adv)} name='adv' type="text" placeholder='adverb' onChange={this.onFormChange} value={this.state.adv}/>
+            </div>
+            <div>
+              <input className={this.isInputValid(this.state.verb)} name='verb' type="text" placeholder='verb' onChange={this.onFormChange} value={this.state.verb}/>
+            </div>
+            <div>
+            the <input className={this.isInputValid(this.state.adj2)} name='adj2' type="text" placeholder='adjective' onChange={this.onFormChange} value={this.state.adj2}/>
+            </div>
+            <div>
+              <input className={this.isInputValid(this.state.noun2)} name='noun2' type="text" placeholder='noun' onChange={this.onFormChange} value={this.state.noun2}/>
+            </div>
 
           </div>
 
@@ -35,4 +101,10 @@ class PlayerSubmissionForm extends Component {
   }
 }
 
+
+PlayerSubmissionForm.propTypes = {
+  formCallback: PropTypes.func.isRequired,
+  playerNumber: PropTypes.number.isRequired,
+}
+
 export default PlayerSubmissionForm;

src/components/RecentSubmission.js

@@ -2,10 +2,14 @@ import React from 'react';
 import './RecentSubmission.css';
 
 const RecentSubmission = (props) => {
+  const finalPoem = props.poem.map((verse, index) => {
+    return (<p key={index}>{verse}</p>)
+  })
+
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <div className="RecentSubmission__submission">{finalPoem.pop()}</div>
     </div>
   );
 }