Ports - Kasey

src/App.js

@@ -3,6 +3,7 @@ import './App.css';
 import Game from './components/Game.js';
 
 class App extends Component {
+
   render() {
     return (
       <div className="App">

src/components/FinalPoem.js

@@ -1,20 +1,70 @@
 import React from 'react';
 import './FinalPoem.css';
+import PropTypes from 'prop-types';
 
 const FinalPoem = (props) => {
 
+
+  // linter says method isn't defined here, needs a const, but doesn't need one one Game.js
+  // is it becuase its in a class in the other ones? and its not here
+  // why doesn't it need a callback
+  // and why is everything props and not this.props
+  // used to have a onClick={this.onClickShowPoem} on line 48
+  const onClickShowPoem = () => {
+    // when is it this.props vs just props?
+    // stack overflow says its the same, buuuut isn't there something like 
+    // So as the super(props) is called in the constructor. props and this.props are same. so,
+    // just needs a this.? when theres a constructor? 
+    // and we have constructors when we're saving state?
+    props.showFinalCallback()
+  }
+  //map the lines here
+  //all p's so need to be in a div
+  //this props?
+  //needs to be reachable
+  // turm into a ternary 
+  // that returns either the button, or returns the formatted poem
+  // if (props.displayFinal) {
+  //   const renderedPoem = props.finalSubmission.map((line, i) => 
+  //  <p key={i}>{line}</p>
+  //  </br>
+    // const formattedPoem = props.displayFinal ? 'kitty' : 'doggy'
+  //   console.log(props)
+  //   console.log("made it to final poem")
+  // console.log(props.finalSubmission);
+  const formattedPoem = props.finalSubmission.map((line, i) => 
+   <p key={i}>{line}</p>
+  //  </br>
+  )
+
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
 
       </section>
-
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
+      {console.log(props.displayFinal)}
+      {(!props.displayFinal) && <div className="FinalPoem__reveal-btn-container">
+        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={onClickShowPoem} />
+      </div> }
+      {(props.displayFinal) && < div > { formattedPoem } </div>}
+
     </div>
   );
 }
 
+// so I don't needs a this.onClickShowPoem BECAUSE its a not a member method, just a local variable, 
+// because its functional, use this for classical functions, and if its going to have state
+
+FinalPoem.propTypes = {
+  // will be the array
+  finalSubmission: PropTypes.array.isRequired,
+  // the callback function
+  showFinalCallback: PropTypes.func.isRequired,
+  // if we need to show the functiom or not
+  displayFinal: PropTypes.bool.isRequired,
+}
+
 export default FinalPoem;
+
+

src/components/Game.js

@@ -3,14 +3,54 @@ import './Game.css';
 import PlayerSubmissionForm from './PlayerSubmissionForm';
 import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
+import { isPatternLike } from '@babel/types';
 
 class Game extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      playerCount: 1,
+      recentSubmission: '',
+      finalSubmission: [],
+      displayFinal: false,
+    };
+  }
+
+  addLine = (line) => {
+    const verse = `${line.adj1} ${line.noun1} ${line.adverb} ${line.verb} the ${line.adj2} ${line.noun2}`;
+    const finalSubmission = this.state.finalSubmission;
+    finalSubmission.push(verse);
+    //this.state.playercount then setting it to just this.playercount
+    // why does it update asynchronously, like, I get it, but why does the final submission work and the others don't
+    // and why if I set it up like that with 
+    // let playerCount = this.state.playerCount;
+    // playerCount = playerCount + 1
+    // does it also not work setting state bellow iwth just playercount: playercount
+    let { playerCount } = this.state;
+    playerCount += 1;
+    this.setState({
+      playerCount,
+      recentSubmission: verse,
+      //not this.final submission, although that leaves it undefinied. why not just poop?
+      finalSubmission: finalSubmission,
+    });
+
   }
 
+  showFinal = () => {
+    // going to toggle on that submit final button
+    this.setState({
+      displayFinal: true,
+    });
+  }
+
+
   render() {
+    console.log(this.state);
+    console.log("**********")
+    console.log(this.state.finalSubmission)
 
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
@@ -32,11 +72,20 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+        {/* {console.log(this.state)} */}
+        {/* need a statement here that says will only show if state displayFinal is false and playerCount does not equal one then... render that below */}
+        {(!this.state.displayFinal && this.state.playerCount !== 1) &&<RecentSubmission line={this.state.recentSubmission} />}
+        {/* {console.log(this.state.playerCount)}
+        {console.log("heeere")}
+        {console.log(this.state.finalSubmission)}
+        {console.log(this.state.finalSubmission)} */}
+        {/* same conditional statement that has this disappear if displayFinal is true */}
+        {console.log(this.state.displayFinal)}
+        {(!this.state.displayFinal) &&
+        <PlayerSubmissionForm addLineCallback={this.addLine} count={this.state.playerCount}/>}
 
-        <PlayerSubmissionForm />
 
-        <FinalPoem />
+        <FinalPoem finalSubmission={this.state.finalSubmission} displayFinal={this.state.displayFinal} showFinalCallback={this.showFinal} />
 
       </div>
     );

src/components/PlayerSubmissionForm.css

@@ -38,3 +38,11 @@
 .PlayerSubmissionForm__input--invalid::placeholder {
   color: black;
 }
+
+.valid {
+  background-color: white;
+}
+
+.invalid {
+  background-color: hotpink;
+}

src/components/PlayerSubmissionForm.js

@@ -1,28 +1,134 @@
 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: '',
+      adverb: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+    }
+  }
+
+  validations = {
+    adj1: /.+/,
+    noun1: /.+/,
+    adverb: /.+/,
+    verb: /.+/,
+    adj2: /.+/,
+    noun2: /.+/,
+  }
+
+  fieldValid = (fieldName) => {
+    return this.validations[fieldName].test(this.state[fieldName]);
   }
 
+  // from ada students
+  inputRecieved = (event) => {
+    const field = {}
+    field[event.target.name] = event.target.value;
+    this.setState(field);
+  }
+
+  handleSubmit = (event) => {
+    event.preventDefault();
+
+    let allFieldsValid = true;
+    Object.keys(this.validations).forEach((fieldName) => {
+      if (!this.fieldValid(fieldName)) {
+        allFieldsValid = false;
+      }
+    })
+
+    if (allFieldsValid) {
+      this.props.addLineCallback({
+        adj1: this.state.adj1,
+        noun1: this.state.noun1,
+        adverb: this.state.adverb,
+        verb: this.state.verb,
+        adj2: this.state.adj2,
+        noun2: this.state.noun2,
+      });
+
+    //this state has to be blank or it overrides the placeholder
+      this.setState({
+        adj1: '',
+        noun1: '',
+        adverb: '',
+        verb: '',
+        adj2: '',
+        noun2: '',
+      });
+    }
+  }
+
   render() {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        {console.log(this.props)}
+        <h3>Player Submission Form for Player #{this.props.count}</h3>
 
-        <form className="PlayerSubmissionForm__form" >
+        <form className="PlayerSubmissionForm__form" onSubmit={this.handleSubmit}>
 
           <div className="PlayerSubmissionForm__poem-inputs">
 
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
-            <input
-              placeholder="hm..."
-              type="text" />
+
+              <input
+              name="adj1"
+              placeholder="first adjective"
+              type="text"
+              onChange={this.inputRecieved}
+              value={this.state.adj1}
+              className={this.fieldValid('adj1') ? 'valid' : 'invalid'} />
+
+              <input
+              name="noun1"
+              placeholder="first noun"
+              type="text"
+              onChange={this.inputRecieved}
+              value={this.state.noun1} 
+              className={this.fieldValid('noun1') ? 'valid' : 'invalid'}/>
+
+              <input
+              name="adverb"
+              placeholder="adverb"
+              type="text"
+              onChange={this.inputRecieved}
+              value={this.state.adverb} 
+              className={this.fieldValid('adverb') ? 'valid' : 'invalid'}/>
+
+              <input
+              name="verb"
+              placeholder="verb"
+              type="text"
+              onChange={this.inputRecieved}
+              value={this.state.verb} 
+              className={this.fieldValid('verb') ? 'valid' : 'invalid'}/>
+
+              <input
+              name="adj2"
+              placeholder="second adjective"
+              type="text"
+              onChange={this.inputRecieved}
+              value={this.state.adj2} 
+              className={this.fieldValid('adj2') ? 'valid' : 'invalid'}/>
+
+              <input
+              name="noun2"
+              placeholder="second noun"
+              type="text"
+              onChange={this.inputRecieved}
+              value={this.state.noun2} 
+              className={this.fieldValid('noun2') ? 'valid' : 'invalid'}/>
+
 
           </div>
 
@@ -35,4 +141,10 @@ class PlayerSubmissionForm extends Component {
   }
 }
 
+PlayerSubmissionForm.propTypes = {
+  // what is fed in from Game.js
+  addLineCallback: PropTypes.func.isRequired,
+  count: PropTypes.number.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.line }</p>
     </div>
   );
 }
 
+RecentSubmission.propTypes = {
+  line: PropTypes.string.isRequired,
+}
+
 export default RecentSubmission;