Ports - Heather

src/components/FinalPoem.js

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

src/components/Game.js

@@ -6,11 +6,40 @@ import RecentSubmission from './RecentSubmission';
 
 class Game extends Component {
 
+
   constructor(props) {
     super(props);
+
+    this.state = {
+      recentLine: '',
+      poem: [],
+      finalDisplay: false,
+      player: 1
+    }
+  }
+
+  onSubmitLine = ({ adjective1, noun1, adverb, verb, adjective2, noun2 }) => {
+
+    const newLine = 'The ' + adjective1 + ' ' + noun1 + ' ' + adverb + ' ' + verb + ' the ' + adjective2 + ' ' + noun2 + ".";
+    this.state.poem.push(newLine);
+
+    this.setState({
+      recentLine: newLine,
+      poem: this.state.poem,
+      player: this.state.player + 1
+
+    })
+
+  }
+
+  onShowPoem = () => {
+    this.setState({
+      finalDisplay: true
+    })
   }
 
   render() {
+    const { recentLine, poem, finalDisplay, player } = this.state;
 
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
@@ -29,14 +58,20 @@ class Game extends Component {
         <p>Please follow the following format for your poetry submission:</p>
 
         <p className="Game__format-example">
-          { exampleFormat }
+          {exampleFormat}
         </p>
 
-        <RecentSubmission />
+        {(!finalDisplay && recentLine !== '') && <RecentSubmission
+          line={recentLine} />}
 
-        <PlayerSubmissionForm />
+        {!finalDisplay && <PlayerSubmissionForm
+          onSubmitLineCallback={this.onSubmitLine}
+          playerNumber={player} />}
 
-        <FinalPoem />
+        <FinalPoem
+          finalPoem={poem}
+          onShowPoemCallback={this.onShowPoem}
+          display={finalDisplay} />
 
       </div>
     );

src/components/PlayerSubmissionForm.css

@@ -10,6 +10,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
+  align-items: center;
 }
 
 .PlayerSubmissionForm__submit {
@@ -38,3 +39,12 @@
 .PlayerSubmissionForm__input--invalid::placeholder {
   color: black;
 }
+
+input {
+  height: 40px;
+}
+
+.valid {
+background-color: white;
+}
+

src/components/PlayerSubmissionForm.js

@@ -1,29 +1,138 @@
 import React, { Component } from 'react';
 import './PlayerSubmissionForm.css';
+import PropTypes from 'prop-types';
 
 class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      adjective1: '',
+      noun1: '',
+      adverb: '',
+      verb: '',
+      adjective2: '',
+      noun2: ''
+
+    }
+  }
+
+  validations = {
+    adjective1: /.+/,
+    noun1: /.+/,
+    adverb: /.+/,
+    verb: /.+/,
+    adjective2: /.+/,
+    noun2: /.+/,
+  }
+
+  fieldValid = (fieldName) => {
+    return this.validations[fieldName].test(this.state[fieldName]);
+  }
+
+
+  onChangeHandler = (event) => {
+    const field = {}
+    field[event.target.name] = event.target.value;
+
+    this.setState(field);
+  }
+
+  handleSubmit = (event) => {
+    event.preventDefault();
+
+    this.props.onSubmitLineCallback({
+      adjective1: this.state.adjective1,
+      noun1: this.state.noun1,
+      adverb: this.state.adverb,
+      verb: this.state.verb,
+      adjective2: this.state.adjective2,
+      noun2: this.state.noun2
+    });
+
+    // console.log(this.state.adjective1);
+
+    this.setState({
+      adjective1: '',
+      noun1: '',
+      adverb: '',
+      verb: '',
+      adjective2: '',
+      noun2: ''
+    });
   }
 
+
+
   render() {
 
+    const { adjective1, noun1, adverb, verb, adjective2, noun2 } = this.state;
+
     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 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
-            }
+            <p>The</p>
+            <input
+              name='adjective1'
+              placeholder='adjective'
+              size='10'
+              value={adjective1}
+              onChange={this.onChangeHandler}
+              className={this.fieldValid('adjective1') ? 'valid' : 'PlayerSubmissionFormt__input--invalid'}
+            />
+
+            <input
+              name='noun1'
+              placeholder='noun'
+              size='10'
+              value={noun1}
+              onChange={this.onChangeHandler}
+              className={this.fieldValid('noun1') ? 'valid' : 'PlayerSubmissionFormt__input--invalid'}
+            />
+
             <input
-              placeholder="hm..."
-              type="text" />
+              name='adverb'
+              placeholder='adverb'
+              size='10'
+              value={adverb}
+              onChange={this.onChangeHandler}
+              className={this.fieldValid('adverb') ? 'valid' : 'PlayerSubmissionFormt__input--invalid'}
+            />
 
+            <input
+              name='verb'
+              placeholder='verb'
+              size='10'
+              value={verb}
+              onChange={this.onChangeHandler}
+              className={this.fieldValid('verb') ? 'valid' : 'PlayerSubmissionFormt__input--invalid'}
+            />
+
+            <p>the</p>
+            <input
+              name='adjective2'
+              placeholder='adjective'
+              size='10'
+              value={adjective2}
+              onChange={this.onChangeHandler}
+              className={this.fieldValid('adjective2') ? 'valid' : 'PlayerSubmissionFormt__input--invalid'}
+            />
+
+            <input
+              name='noun2'
+              placeholder='noun'
+              size='10'
+              value={noun2}
+              onChange={this.onChangeHandler}
+              className={this.fieldValid('noun2') ? 'valid' : 'PlayerSubmissionFormt__input--invalid'}
+            />
           </div>
 
           <div className="PlayerSubmissionForm__submit">
@@ -35,4 +144,10 @@ class PlayerSubmissionForm extends Component {
   }
 }
 
+PlayerSubmissionForm.propTypes = {
+  onSubmitLineCallback: PropTypes.func.isRequired,
+  playerNumber: PropTypes.number.isRequired,
+};
+
+
 export default PlayerSubmissionForm;

src/components/RecentSubmission.js

@@ -1,13 +1,19 @@
 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>{props.line}</p>
       <p className="RecentSubmission__submission">{  }</p>
     </div>
   );
 }
 
+RecentSubmission.propTypes = {
+  line: PropTypes.string.isRequired,
+};
+
 export default RecentSubmission;