Leaves - Dominique

src/components/FinalPoem.js

@@ -1,20 +1,39 @@
 import React from 'react';
 import './FinalPoem.css';
+import PropTypes from 'prop-types';
 
 const FinalPoem = (props) => {
+
+    const revealPoemButton = 
+      <div className="FinalPoem__reveal-btn-container">
+        <input type="button" 
+          value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={props.onPoemSubmittedCallback}/>
+      </div>;
+
+
+    const poemContent = props.finalPlayerInput.map((line, i) => {
+      return <p key={ i }>{ line }</p>;
+    });
 
-  return (
-    <div className="FinalPoem">
+    const revealPoem = 
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
+        {poemContent}
+      </section>;
 
-      </section>
+    const content = props.isPoemSubmitted ? revealPoem : revealPoemButton
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+    return (
+      <div className="FinalPoem">
+        {content}
       </div>
-    </div>
-  );
+    );
+}
+
+FinalPoem.propTypes = {
+  onPoemSubmittedCallback: PropTypes.isRequired,
+  isPoemSubmitted: PropTypes.isRequired,
+  finalPlayerInput: PropTypes.arrayOf(String), 
 }
 
 export default FinalPoem;

src/components/Game.js

@@ -8,6 +8,32 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      playerInput: [],
+      isPoemSubmitted: false,
+    }
+  }
+
+
+  onPoemSubmittedCallback = () => {
+    this.setState({
+      isPoemSubmitted: true,
+    })
+  }
+
+
+  addPlayerInput = (newInput) => {
+    const {playerInput} = this.state
+
+    playerInput.push(newInput);
+
+    this.setState({
+      // always change state through set state
+      // if I didn't have this, the state wouldn't be change, it would only
+      // change the local variable 
+      playerInput
+    })
   }
 
   render() {
@@ -20,6 +46,12 @@ class Game extends Component {
       }
     }).join(" ");
 
+    const recentSubmission = <RecentSubmission
+    latestSubmission={this.state.playerInput[this.state.playerInput.length-1]}/>
+
+    const playerSubmissionForm = <PlayerSubmissionForm addPlayerInputCallback={this.addPlayerInput}
+    playerNumber={this.state.playerInput.length}/>
+
     return (
       <div className="Game">
         <h2>Game</h2>
@@ -31,19 +63,20 @@ class Game extends Component {
         <p className="Game__format-example">
           { exampleFormat }
         </p>
+
+        {this.state.isPoemSubmitted ? <div/>: recentSubmission}
+        {this.state.isPoemSubmitted ? <div/>: playerSubmissionForm}
 
-        <RecentSubmission />
-
-        <PlayerSubmissionForm />
-
-        <FinalPoem />
-
+        <FinalPoem onPoemSubmittedCallback={this.onPoemSubmittedCallback}
+        isPoemSubmitted={this.state.isPoemSubmitted}
+        finalPlayerInput={this.state.playerInput}/>
       </div>
     );
   }
 }
 
 const FIELDS = [
+  // Can I use this FIELDS globally? Like can I use it in the state of PlayerSubmissionForm?
   "The",
   {
     key: 'adj1',

src/components/PlayerSubmissionForm.css

@@ -35,6 +35,7 @@
   background-color: #FFE9E9;
 }
 
+
 .PlayerSubmissionForm__input--invalid::placeholder {
   color: black;
 }

src/components/PlayerSubmissionForm.js

@@ -1,29 +1,135 @@
 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: '',
+    };
+
+    this.isValid = false
+  }
+
+  resetState = () => {
+    this.setState({
+      adj1: '',
+      noun1: '',  
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+    }); 
+  }
+
+
+  onFormChange = (event) => {
+
+    //target is the html element itself. You can do 
+    //event.target.id to see specifics in the html target.
+
+    const field = event.target.id;
+
+    const value = event.target.value;
+    // describe what the event.target syntax is doing exactly
+
+    const updatedState = {};
+    updatedState[field] = value;
+
+    this.setState(updatedState); 
+    this.isValid = true
+
+
   }
 
+  onSubmit = (event) => {
+
+    event.preventDefault();
+    // this prevents the page from refreshing so you don't loose the state
+    // what does this do again?
+
+    const {adj1, noun1, adv, verb, adj2, noun2} = this.state;
+
+    // what is this saying exactly?
+
+    const newSubmission = `The ${adj1} ${noun1} ${adv} ${verb} the ${adj2} ${noun2} .`
+
+    this.props.addPlayerInputCallback(newSubmission);
+    this.resetState();
+  }
+
+
   render() {
+
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{this.props.playerNumber}</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</div>
+            <input 
+              placeholder="adjective"
+              type="text" 
+              className={this.isValid ? "PlaySubmissionForm__input" : "PlayerSubmissionFormt__input--invalid"}
+              onChange={this.onFormChange}
+              id="adj1"
+              value={this.state.adj1}
+              // the id, placeholder and value are all very useful. Value is equal to whatever the state is
+            />
+            <input 
+              placeholder="noun"
+              type="text" 
+              className={this.isValid ? "PlaySubmissionForm__input" : "PlayerSubmissionFormt__input--invalid"}
+              onChange={this.onFormChange}
+              id="noun1"
+              value={this.state.noun1}
+            />
+            <input 
+              placeholder="adverb"
+              type="text" 
+              className={this.isValid ? "PlaySubmissionForm__input" : "PlayerSubmissionFormt__input--invalid"}
+              onChange={this.onFormChange}
+              id="adv"
+              value={this.state.adv}
+            />
+            <input 
+              placeholder="verb"
+              type="text" 
+              className={this.isValid ? "PlaySubmissionForm__input" : "PlayerSubmissionFormt__input--invalid"}
+              onChange={this.onFormChange}
+              id="verb"
+              value={this.state.verb}
+            />
+            <input 
+              placeholder="adjective"
+              type="text" 
+              className={this.isValid ? "PlaySubmissionForm__input" : "PlayerSubmissionFormt__input--invalid"}
+              onChange={this.onFormChange}
+              id="adj2"
+              value={this.state.adj2}
+            />
+            <div>the</div>
+            <input 
+              placeholder="noun"
+              type="text" 
+              className={this.isValid ? "PlaySubmissionForm__input" : "PlayerSubmissionFormt__input--invalid"}
+              onChange={this.onFormChange}
+              id="noun2"
+              value={this.state.noun}
+            />
           </div>
 
           <div className="PlayerSubmissionForm__submit">
@@ -35,4 +141,9 @@ class PlayerSubmissionForm extends Component {
   }
 }
 
+PlayerSubmissionForm.propTypes = {
+  addPlayerInputCallback: PropTypes.isRequired,
+  playerNumber: PropTypes.number 
+}
+
 export default PlayerSubmissionForm;

src/components/RecentSubmission.js

@@ -1,13 +1,26 @@
 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>
-    </div>
-  );
+
+  if (props.latestSubmission) {
+    return (
+
+      <div className="RecentSubmission">
+        <h3>The Most Recent Submission</h3>
+        <p className="RecentSubmission__submission">{props.latestSubmission}</p>
+      </div>
+    );
+  } else {
+    return (
+      <div />
+    )
+  }
+}
+
+RecentSubmission.propTypes = {
+  latestSubmission: PropTypes.string
 }
 
 export default RecentSubmission;