Branches, C. Gutierrez

src/components/FinalPoem.js

@@ -1,20 +1,44 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
-  return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
+  // want to write '.prop' less 
+  const lines = props.lines
 
-      </section>
+  // maps the lines into individual paragraphs
+  let finalPoem = lines.map((line, i) => {
+    return (
+      <p key= {i}>{line}</p>
+    )
+  })
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+  // if the poem is in play, shows the button that will be used to stop the poem. Note, if there is text in the fields this does NOT submit it and end the poem, that line will be lost. 
+  if (props.inPlay === true) {
+    return (
+      <div className="FinalPoem">
+        <div className="FinalPoem__reveal-btn-container">
+          <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={ () => {props.onFinishPoemCallback()}}/>
+        </div>
       </div>
-    </div>
-  );
-}
+    );
+  } 
+
+  // if the poem is not in play, shows the final poem
+  else {
+    return (
+      <div>
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+        </section>
+      {finalPoem}
+      </div>
+    )
+  }
 
-export default FinalPoem;
+}
+FinalPoem.propTypes = {
+  onFinishPoemCallback: PropTypes.func.isRequired,
+}
+export default FinalPoem;

src/components/Game.js

@@ -6,12 +6,27 @@ import RecentSubmission from './RecentSubmission';
 
 class Game extends Component {
 
+  // lines is the running collection of lines in the poem, stored as strings in an array
+  // inplay determines whether the poem is still being added to or whether it is completed
   constructor(props) {
     super(props);
+    this.state = {
+      lines: [],
+      inplay: true,
+    }
   }
 
-  render() {
+  addLine = (lineString) => {
+      let addingLine = this.state.lines
+      addingLine.push(lineString)
+      this.setState({lines: addingLine})
+  }
+
+  finishPoem = () => {
+      this.setState({inplay: false})
+  }
 
+  render() {
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
         return field.placeholder;
@@ -22,6 +37,7 @@ class Game extends Component {
 
     return (
       <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>
@@ -32,11 +48,18 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
-
-        <PlayerSubmissionForm />
+        {/* Based on whether the poem is in play, Recent Submission and Player Submission Form appear in the render.  */}
+        {this.state.inplay ? <RecentSubmission lines = {this.state.lines}/> : '' }
 
-        <FinalPoem />
+
+        {this.state.inplay ? <PlayerSubmissionForm addLineCallback = {(lineString) => this.addLine(lineString)}/> : '' }
+
+        {/* Final poem displays the "finish" button when the poem is in play and then the actual final poem when not, so it is always rendered.  */}
+        <FinalPoem
+        lines = {this.state.lines}
+        inPlay = {this.state.inplay}
+        onFinishPoemCallback = {() => this.finishPoem()}
+        />
 
       </div>
     );

src/components/PlayerSubmissionForm.css

@@ -31,7 +31,7 @@
   background-color: tomato;
 }
 
-.PlayerSubmissionFormt__input--invalid {
+.PlayerSubmissionForm__input--invalid {
   background-color: #FFE9E9;
 }
 

src/components/PlayerSubmissionForm.js

@@ -1,38 +1,132 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import './PlayerSubmissionForm.css';
 
 class PlayerSubmissionForm extends Component {
 
+  // Starting with the tags in the state so that upon reset, it'll always start with this text in it. 
   constructor(props) {
     super(props);
+    this.state = {
+      inPlay: props.inPlay,
+      player: 1,
+      adj1: '',
+      noun1: '', 
+      adverb: '', 
+      verb: '', 
+      adj2: '', 
+      noun2: '',
+      // the classes below are used to get the faint pink for blank displays
+      adj1Class: 'invalid',
+      noun1Class: 'invalid',
+      adverbClass: 'invalid',
+      verbClass: 'invalid',
+      adj2Class: 'invalid',
+      noun2Class: 'invalid',
+    }
   }
+  //on word tabbing or entering, this takes the new information and adjusts state accordingly
+  onInputChange = (event) => {
+    //emtpy updated state
+    const updatedState = {}
+    //sets the data and name/label for setState
+    const field = event.target.name;
+    const value = event.target.value
+    //updates the updated state at the particular name to have the value of value
+    //bracket notation is needed when what we're passing into it is a variable
+    updatedState[field] = value
+    //updated the state with the updatedState object
+    this.setState(updatedState)
 
-  render() {
+
+    switch(field) {
+      case "adj1":
+        this.setState({adj1Class: 'valid'});
+        break;
+      case "noun1":
+          this.setState({noun1Class: 'valid'});
+          break;
+      case "adverb":
+          this.setState({adverbClass: 'valid'});
+          break;
+      case "verb":
+          this.setState({verbClass: 'valid'});
+          break;
+      case "adj2":
+          this.setState({adj2Class: 'valid'});
+          break;
+      case "noun2":
+          this.setState({noun2Class: 'valid'});
+          break;
+      default: {}
+    }
+  }
+
+  //on submit, this takes the event and then takes all the items into state very momentarily
+  onSubmitLine = (event) => {
+
+    event.preventDefault();
+
+    // this concatenates the line together into a string
+    let line = `The ${this.state.adj1} ${this.state.noun1} ${this.state.adverb} ${this.state.verb} the ${this.state.adj2} ${this.state.noun2}.`
+
+    //then, it uses the line to pass into the addLineCallback function, which will go back to Game
+    this.props.addLineCallback(line);
 
-    return (
-      <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+    //this resets the form for use next time, including reseting the classes to their original, invalid values
+    this.setState({
+      adj1: '',
+      noun1: '', 
+      adverb: '', 
+      verb: '', 
+      adj2: '', 
+      noun2: '',
+      adj1Class: 'invalid',
+      noun1Class: 'invalid',
+      adverbClass: 'invalid',
+      verbClass: 'invalid',
+      adj2Class: 'invalid',
+      noun2Class: 'invalid',
+    })
 
-        <form className="PlayerSubmissionForm__form" >
+    // this increments the player count
+    let increment = this.state.player
+    increment = increment + 1
+    this.setState({player: increment})
+  }
+
+  render() {
 
-          <div className="PlayerSubmissionForm__poem-inputs">
+      return (
+        <div className="PlayerSubmissionForm">
+          <h3>Player Submission Form for Player #{`${this.state.player}`}</h3>
 
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
-            <input
-              placeholder="hm..."
-              type="text" />
+          <form className="PlayerSubmissionForm__form"  onSubmit={this.onSubmitLine}>
 
-          </div>
+            <div className="PlayerSubmissionForm__poem-inputs">
 
-          <div className="PlayerSubmissionForm__submit">
-            <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
-          </div>
-        </form>
-      </div>
-    );
+              The 
+              <input name="adj1" Placeholder={'adjective'} type="text" class={`PlayerSubmissionForm__input--${this.state.adj1Class}`} onChange={this.onInputChange} value={this.state.adj1} />
+              <input name="noun1" Placeholder={'noun'} type="text" class={`PlayerSubmissionForm__input--${this.state.noun1Class}`} onChange={this.onInputChange} value={this.state.noun1} />
+              <input name="adverb" Placeholder={'adverb'} type="text" class={`PlayerSubmissionForm__input--${this.state.adverbClass}`} onChange={this.onInputChange} value={this.state.adverb} />
+              <input name="verb" Placeholder={'verb'} type="text" class={`PlayerSubmissionForm__input--${this.state.verbClass}`} onChange={this.onInputChange} value={this.state.verb} />
+              the
+              <input name="adj2" Placeholder={'adjective'} type="text" class={`PlayerSubmissionForm__input--${this.state.adj2Class}`} onChange={this.onInputChange} value={this.state.adj2} />
+              <input name="noun2" Placeholder={'noun'} type="text" class={`PlayerSubmissionForm__input--${this.state.noun2Class}`} onChange={this.onInputChange} value={this.state.noun2} />
+              .
+            </div>
+
+            <div className="PlayerSubmissionForm__submit">
+              <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn"/>
+            </div>
+          </form>
+        </div>
+      );
   }
 }
 
+PlayerSubmissionForm.propTypes = {
+  addLineCallback: PropTypes.func.isRequired,
+}
+
 export default PlayerSubmissionForm;

src/components/RecentSubmission.js

@@ -2,12 +2,26 @@ 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>
-    </div>
-  );
+
+    // want to write '.prop' less 
+  const lines = props.lines
+
+  // if no lines are in the poem (if this is player 1) section does not render
+  if (lines.length === 0) {
+    return ( <div> </div> )
+  }
+
+  //only displays the last line (string) in the array
+  else {
+    return (
+      <div>
+        <div className="RecentSubmission">
+          <h3>The Most Recent Submission</h3>
+          <p className="RecentSubmission__submission">{lines[lines.length -1]}</p>
+        </div>
+      </div>
+    )
+  }
 }
 
 export default RecentSubmission;