BarbaraWidjono, Edges, exquisite-react

src/App.js

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

src/components/FinalPoem.css

@@ -19,3 +19,11 @@
 .FinalPoem__poem {
   border-bottom: 2px gray dashed;
 }
+
+.hide{
+  visibility: hidden;
+}
+
+.poem{
+  white-space: pre-line;
+}

src/components/FinalPoem.js

@@ -1,20 +1,44 @@
 import React from 'react';
 import './FinalPoem.css';
 
-const FinalPoem = (props) => {
+class FinalPoem extends React.Component {
+  constructor(props) {
+    super(props)
 
-  return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
+    this.state = {
+      finalPoemHeaderClass: "FinalPoem__poem hide",
+      singleLine: "test",
+      revealPoemButton: "FinalPoem__reveal-btn",
+    }
+  }
 
-      </section>
+  showPoem = () => {
+    this.setState({finalPoemHeaderClass: "FinalPoem__poem"});
+    this.setState({revealPoemButton: "FinalPoem__reveal-btn hide"})
+    this.props.hideRecentCallback();
+  }
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+  render(){
+
+    const allLines = this.props.linesOfPoem;
+    const final = allLines.join('\n');
+
+    return (
+      <div className="FinalPoem">
+        <section className={this.state.finalPoemHeaderClass}>
+          <h3>Final Poem</h3>
+          <p className="poem">{final}</p>
+        </section>
+
+        <div className="FinalPoem__reveal-btn-container">
+          <input type="button" value="We are finished: Reveal the Poem" className={this.state.revealPoemButton}
+            onClick={this.showPoem}
+            />
+        </div>
       </div>
-    </div>
-  );
+    )
+  }
 }
 
+
 export default FinalPoem;

src/components/Game.css

@@ -2,3 +2,7 @@
   text-align: center;
   font-style: italic;
 }
+
+.true{
+  visibility: hidden;
+}

src/components/Game.js

@@ -8,9 +8,47 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      currentLine: "",
+      poem: [],
+      hideRecent: true,
+    }
+  }
+
+  hideRecent = () => {
+    console.log("Inside hideRecent");
+    this.state.hideRecent? this.setState({hideRecent: false}): this.setState({hideRecent: true});
+  }
+
+  currentLineCallback = (sentence) => {
+    this.setState({currentLine: sentence}, () => {
+      console.log(this.state.currentLine);
+    });
+
+    let createPoem = this.state.poem;
+    createPoem.push(sentence);
+    this.setState({poem: createPoem}, () => {
+      console.log(this.state.poem);
+    })
+
   }
 
   render() {
+    let recentSub;
+    if(this.state.currentLine.length > 0){
+      recentSub = <RecentSubmission currentLine={this.state.currentLine}/>
+    };
+
+    let hideComponent;
+    if((this.state.hideRecent)){
+      hideComponent = <section>
+        {recentSub}
+
+        <PlayerSubmissionForm
+          setCurrentLine = {this.currentLineCallback}/>
+      </section>
+    }
 
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
@@ -32,11 +70,11 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
-
-        <PlayerSubmissionForm />
-
-        <FinalPoem />
+        {hideComponent}
+        <FinalPoem
+          linesOfPoem={this.state.poem}
+          hideRecentCallback = {this.hideRecent}
+          />
 
       </div>
     );

src/components/PlayerSubmissionForm.js

@@ -5,25 +5,110 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      adj1: "",
+      noun1: "",
+      adverb: "",
+      verb: "",
+      adj2: "",
+      noun2: "",
+      playerNum: 1,
+    }
+  }
+
+  onInputChange = (event) => {
+    console.log("inside of input change");
+    const field = event.target.name;
+    const value = event.target.value;
+
+    const newState = {}
+    newState[field] = value;
+    this.setState(newState);
+  }
+
+  onFormSubmit = (event) => {
+    event.preventDefault();
+
+    const newPlayer = this.state.playerNum + 1;
+    this.setState({playerNum: newPlayer});
+
+
+    const line = {
+      adj1: this.state.adj1,
+      noun1: this.state.noun1,
+      adverb: this.state.adverb,
+      verb: this.state.verb,
+      adj2: this.state.adj2,
+      noun2: this.state.noun2,
+    }
+
+    const {adj1, noun1, adverb, verb, adj2, noun2} = line;
+
+    const sentence = `The ${adj1} ${noun1} ${adverb} ${verb} the ${adj2} ${noun2}.`
+
+    this.setState({
+      adj1: "",
+      noun1: "",
+      adverb: "",
+      verb: "",
+      adj2: "",
+      noun2: "",
+    })
+
+    // console.log(sentence);
+    this.props.setCurrentLine(sentence);
   }
 
   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.onFormSubmit} >
 
           <div className="PlayerSubmissionForm__poem-inputs">
-
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
+            <h2>The</h2>
             <input
-              placeholder="hm..."
-              type="text" />
-
+              name="adj1"
+              value={this.state.adj1}
+              placeholder="adjective"
+              type="text"
+              onChange={this.onInputChange} />
+              <input
+                name="noun1"
+                value={this.state.noun1}
+                placeholder="noun"
+                type="text"
+                onChange={this.onInputChange} />
+                <input
+                  name="adverb"
+                  value={this.state.adverb}
+                  placeholder="adverb"
+                  type="text"
+                  onChange={this.onInputChange} />
+                <input
+                  name="verb"
+                  value={this.state.verb}
+                  placeholder="verb"
+                  type="text"
+                  onChange={this.onInputChange} />
+                <h3>the</h3>
+                <input
+                  name="adj2"
+                  value={this.state.adj2}
+                  placeholder="adjective"
+                  type="text"
+                  onChange={this.onInputChange} />
+                <input
+                  name="noun2"
+                  value={this.state.noun2}
+                  placeholder="noun"
+                  type="text"
+                  onChange={this.onInputChange} />
+                <h3>.</h3>
           </div>
 
           <div className="PlayerSubmissionForm__submit">

src/components/RecentSubmission.js

@@ -2,10 +2,14 @@ import React from 'react';
 import './RecentSubmission.css';
 
 const RecentSubmission = (props) => {
+
+  let currentLine = props.currentLine;
+
+
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{ currentLine }</p>
     </div>
   );
 }