Ports - Sopheary

src/components/FinalPoem.css

@@ -19,3 +19,7 @@
 .FinalPoem__poem {
   border-bottom: 2px gray dashed;
 }
+
+.hide {
+  display: none;
+}

src/components/FinalPoem.js

@@ -1,20 +1,35 @@
 import React from 'react';
 import './FinalPoem.css';
+import PropTypes from 'prop-types';
 
 const FinalPoem = (props) => {
+
+  const handleClick = () => {
+    props.handleClickCallback();
+  }
 
+  let buttonStyle = "FinalPoem__reveal-btn-container";
+  let clickStyle = "FinalPoem__reveal-btn";
+  if (props.finalized) {
+    buttonStyle = "FinalPoem__reveal-btn-container hide";
+    clickStyle = "FinalPoem__reveal-btn hide";
+  }
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+        <article>{props.lines}</article>
       </section>
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+      <div className={buttonStyle}>
+        <input onClick={handleClick} type="button" value="We are finished: Reveal the Poem" className={clickStyle} />
       </div>
     </div>
   );
 }
 
+FinalPoem.propTypes = {
+  lines: PropTypes.array
+}
+
 export default FinalPoem;

src/components/Game.js

@@ -8,9 +8,49 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      lines: [],
+      finalized: false,
+    };
   }
 
+  addLine = (line) => {
+    const lines = this.state.lines;
+    lines.push(<p key={this.state.lines.length + 1}>{line}</p>);
+    this.setState({
+      lines,
+    });
+  }
+
+  handleClickFinalPoem = () => {
+    this.setState({
+      finalized: true,
+    });
+  }
+
+
   render() {
+    let lines;
+    let submissionForm;
+    let recentSubmission;
+    let finalized;
+    if (this.state.finalized){
+      lines = this.state.lines.reverse();
+      submissionForm = '';
+      finalized = true;
+    } else {
+      lines = null;
+      submissionForm = (<PlayerSubmissionForm 
+        addLineCallback={this.addLine}/>);
+      recentSubmission = (<RecentSubmission 
+        lastLine={this.state.lines.reverse().slice(0,1)}/>);
+      finalized = false;
+
+    }
+
+    if (this.state.lines.length === 0) {
+      recentSubmission = '';
+    }
 
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
@@ -32,11 +72,15 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+        {recentSubmission}
 
-        <PlayerSubmissionForm />
+        {submissionForm}
 
-        <FinalPoem />
+        <FinalPoem 
+        lines={lines}
+        handleClickCallback={this.handleClickFinalPoem}
+        finalized = {finalized}
+        />
 
       </div>
     );

src/components/PlayerSubmissionForm.js

@@ -1,29 +1,109 @@
 import React, { Component } from 'react';
 import './PlayerSubmissionForm.css';
+import PropTypes from 'prop-types';
 
 class PlayerSubmissionForm extends Component {
 
+  static propTypes = {
+    addLineCallback: PropTypes.func,
+  }
+
   constructor(props) {
     super(props);
+    this.state = {
+      playerNum: 1,
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: ''
+    };
+  }
+
+  onChangeHandler = (event) => {
+    const field = {}
+    field[event.target.name] = event.target.value;
+    this.setState(field);
+  }
+
+  handleSubmit = (event) => {
+    event.preventDefault();
+    const line = ["The", this.state.adj1, this.state.noun1, this.state.adv, this.state.verb, "the", this.state.adj2, this.state.noun2 + "."].join(" ");
+
+    this.props.addLineCallback(line);
+
+    this.setState({
+      playerNum: this.state.playerNum + 1,
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: ''
+    });
   }
 
   render() {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{ this.state.playerNum }</h3>
 
-        <form className="PlayerSubmissionForm__form" >
+        <form className="PlayerSubmissionForm__form" onSubmit={this.handleSubmit} >
 
           <div className="PlayerSubmissionForm__poem-inputs">
+            The
+            <input className="PlayerSubmissionFormt__input--invalid"
+              name="adj1"
+              value={this.state.adj1}
+              placeholder="adjective"
+              type="text"
+              onChange={this.onChangeHandler} 
+            />
+
+            <input className="PlayerSubmissionFormt__input--invalid"
+              name="noun1"
+              value={this.state.noun1}
+              placeholder="noun"
+              type="text"
+              onChange={this.onChangeHandler} 
+            />
+
+            <input className="PlayerSubmissionFormt__input--invalid"
+              name="adv"
+              value={this.state.adv}
+              placeholder="adverb"
+              type="text"
+              onChange={this.onChangeHandler} 
+            />
+
+            <input className="PlayerSubmissionFormt__input--invalid"
+              name="verb"
+              value={this.state.verb}
+              placeholder="verb"
+              type="text"
+              onChange={this.onChangeHandler} 
+            />
+
+            the 
 
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
-            <input
-              placeholder="hm..."
-              type="text" />
+            <input className="PlayerSubmissionFormt__input--invalid"
+              name="adj2"
+              value={this.state.adj2}
+              placeholder="adjective"
+              type="text"
+              onChange={this.onChangeHandler} 
+            />
 
+            <input className="PlayerSubmissionFormt__input--invalid"
+              name="noun2"
+              value={this.state.noun2}
+              placeholder="noun"
+              type="text"
+              onChange={this.onChangeHandler} 
+            />
+            .
           </div>
 
           <div className="PlayerSubmissionForm__submit">

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>
+      <section className="RecentSubmission__submission">{ props.lastLine }</section>
     </div>
   );
 }
 
+RecentSubmission.propTypes = {
+  lastLine: PropTypes.array
+}
+
 export default RecentSubmission;