Branches - Xinran

src/components/FinalPoem.js

@@ -1,20 +1,39 @@
 import React from 'react';
 import './FinalPoem.css';
+import PropTypes from 'prop-types';
 
 const FinalPoem = (props) => {
 
+  const finalPoem = props.finalPoem.map((line, i) => {
+    return (
+      <p key={i}>{line}</p>
+    )
+  })
+
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+        <div>{finalPoem}</div>
       </section>
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
+      {!props.completed ?
+        <div className="FinalPoem__reveal-btn-container">
+          <input
+            type="button"
+            value="We are finished: Reveal the Poem"
+            className="FinalPoem__reveal-btn"
+            onClick={props.submitPoemCallback}
+          />
+        </div> : null}
     </div>
   );
 }
 
+FinalPoem.propTypes = {
+  finalPoem: PropTypes.array.isRequired,
+  submitPoemCallback: PropTypes.func.isRequired,
+  completed: PropTypes.bool.isRequired
+};
+
 export default FinalPoem;

src/components/Game.js

@@ -8,18 +8,61 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      recentSubmission: undefined,
+      playerCount: 1,
+      currentPoem: [],
+      finalPoem: [],
+      completed: false
+    }
   }
 
-  render() {
-
-    const exampleFormat = FIELDS.map((field) => {
+  generateLine = (fields) => {
+    return fields.map((field) => {
       if (field.key) {
         return field.placeholder;
       } else {
         return field;
       }
     }).join(" ");
+  }
+
+  submitLine = (line) => {
+    let fields = JSON.parse(JSON.stringify(FIELDS))
+    let i = 0
+    let j = 0
+    while (i < fields.length) {
+      if (fields[i]['key']) {
+        fields[i]['placeholder'] = Object.values(line)[j]
+        i++
+        j++
+      } else {
+        i++
+      }
+    }
+
+    const sentence = this.generateLine(fields)
+    let updatePoem = this.state.currentPoem
+    updatePoem.push(sentence)
+
+    this.setState({
+      recentSubmission: sentence,
+      playerCount: this.state.playerCount + 1,
+      currentPoem: updatePoem,
+    })
+  }
+
+  submitPoem = () => {
+    this.setState({
+      finalPoem: this.state.currentPoem,
+      completed: true
+    })
+  }
+
+  render() {
 
+    const exampleFormat = this.generateLine(FIELDS)
+
     return (
       <div className="Game">
         <h2>Game</h2>
@@ -32,11 +75,23 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+        {(!this.state.completed && this.state.playerCount > 1) ?
+          <RecentSubmission
+            recentSubmission={this.state.recentSubmission}
+          /> : null}
 
-        <PlayerSubmissionForm />
+        {!this.state.completed ?
+          <PlayerSubmissionForm
+            fields={FIELDS}
+            playerCount={this.state.playerCount}
+            addLineCallback={this.submitLine}
+          /> : null}
 
-        <FinalPoem />
+        <FinalPoem
+          finalPoem={this.state.finalPoem}
+          submitPoemCallback={this.submitPoem}
+          completed={this.state.completed}
+        />
 
       </div>
     );

src/components/PlayerSubmissionForm.js

@@ -1,29 +1,83 @@
 import React, { Component } from 'react';
 import './PlayerSubmissionForm.css';
+import PropTypes from 'prop-types';
 
 class PlayerSubmissionForm extends Component {
-
+
+  resetState = () => {
+    let stateKeys = {}
+    this.props.fields.forEach((field) => {
+      if (field.key) {
+        stateKeys[field.key] = ''
+      }
+    });
+    return stateKeys
+  }
+
   constructor(props) {
     super(props);
+    this.state = this.resetState()
+  }
+
+  onInputChange = (event) => {
+    const updatedState = {};
+    const field = event.target.name;
+    const value = event.target.value;
+
+    updatedState[field] = value;
+    this.setState(updatedState);
+  }
+
+  canSubmit = () => {
+    let complete = true
+    Object.values(this.state).forEach((value) => {
+      if (value === '') {
+        complete = false
+      }
+    })
+    return complete
+  }
+
+  onSubmitHandler = (event) => {
+    event.preventDefault();
+    if (this.canSubmit()) {
+      this.props.addLineCallback(this.state);
+      this.setState(this.resetState());
+    }
   }
 
   render() {
+    const fieldsDisplay = this.props.fields.map((field, i) => {
+      if (field.key) {
+
+        let fieldColor = 'PlayerSubmissionFormt__input--invalid'
+        if (this.state[field.key] !== '') {
+          fieldColor = 'PlayerSubmissionFormt__input'
+        }
+
+        return (
+          <input
+            key={i}
+            name={field.key}
+            placeholder={field.placeholder}
+            type="text"
+            onChange={this.onInputChange}
+            value={this.state[field.key]}
+            className={fieldColor}
+          />
+        )
+      } else {
+        return field
+      }
+    })
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
-
-        <form className="PlayerSubmissionForm__form" >
+        <h3>Player Submission Form for Player #{ this.props.playerCount }</h3>
 
+        <form className="PlayerSubmissionForm__form" onSubmit={this.onSubmitHandler} >
           <div className="PlayerSubmissionForm__poem-inputs">
-
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
-            <input
-              placeholder="hm..."
-              type="text" />
-
+            {fieldsDisplay}
           </div>
 
           <div className="PlayerSubmissionForm__submit">
@@ -35,4 +89,10 @@ class PlayerSubmissionForm extends Component {
   }
 }
 
+PlayerSubmissionForm.propTypes = {
+  fields: PropTypes.array.isRequired,
+  playerCount: PropTypes.number.isRequired,
+  addLineCallback: PropTypes.func.isRequired
+};
+
 export default PlayerSubmissionForm;

src/components/RecentSubmission.js

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