Leaves - Cloudy

.env

@@ -0,0 +1 @@
+ SKIP_PREFLIGHT_CHECK=true

.vscode/settings.json

@@ -0,0 +1,18 @@
+{
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#7f40bf",
+    "activityBar.activeBorder": "#c78f58",
+    "activityBar.foreground": "#e7e7e7",
+    "activityBar.inactiveForeground": "#e7e7e799",
+    "activityBarBadge.background": "#c78f58",
+    "activityBarBadge.foreground": "#15202b",
+    "titleBar.activeBackground": "#663399",
+    "titleBar.inactiveBackground": "#66339999",
+    "titleBar.activeForeground": "#e7e7e7",
+    "titleBar.inactiveForeground": "#e7e7e799",
+    "statusBar.background": "#663399",
+    "statusBarItem.hoverBackground": "#7f40bf",
+    "statusBar.foreground": "#e7e7e7"
+  },
+  "peacock.color": "#639"
+}

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,38 @@
 import React from 'react';
 import './FinalPoem.css';
 
-const FinalPoem = (props) => {
+// state, props, any callbacks, event handlers, or helper functions (with the exception of Game component). However, not every render function may need to look like that in the end result. In fact, it is expected that the render functions change in order to accommodate the requirements (namely the ones about conditional rendering).
 
-  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" />
+class FinalPoem extends React.Component {
+  showCompletedPoem = () => {
+    this.props.showCompletedPoemCallBack()
+  }
+
+  render() {
+    const pressButton = 
+    <div className="FinalPoem__reveal-btn-container">
+    <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={this.showCompletedPoem} />
+  </div>
+    const fullPoem = this.props.fullPoem.map((line, i) => {
+      return (
+      <div>
+        <p key={i}>The {line.adjective} {line.noun} {line.adverb} {line.verb} the {line.adjective2} {line.noun2}.
+        </p>
       </div>
-    </div>
-  );
+      )
+    })
+
+    return (
+      <div className="FinalPoem">
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+          <div>
+            { this.props.showPoemStatus ? fullPoem : pressButton }
+          </div>
+        </section>
+      </div>
+
+    );
+  }
 }
-
 export default FinalPoem;

src/components/Game.js

@@ -8,8 +8,31 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      completedPoem: [],
+      poemSubmitted: false,
+      showForm: true
+    }
+  }
+
+  showCompletedPoem = () => {
+    const itShows = this.state.showForm
+    this.setState({
+      poemSubmitted: true,
+      showForm: !itShows
+    })
   }
 
+  addVerse = (singlePoemVerse) => {
+    let lines = this.state.completedPoem;
+
+    lines.push(singlePoemVerse);
+    this.setState({
+      lines
+    });
+   }
+
   render() {
 
     const exampleFormat = FIELDS.map((field) => {
@@ -20,6 +43,8 @@ class Game extends Component {
       }
     }).join(" ");
 
+
+
     return (
       <div className="Game">
         <h2>Game</h2>
@@ -32,12 +57,18 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+      { this.state.showForm ? 
+         <div>
+        <RecentSubmission lastVerse={this.state.completedPoem[this.state.completedPoem.length -1]}/> 
 
-        <PlayerSubmissionForm />
-
-        <FinalPoem />
+        <PlayerSubmissionForm addVerseCallBack={this.addVerse}
+        player={this.state.completedPoem.length} />
 
+      </div> : null
+      }
+        <FinalPoem fullPoem={this.state.completedPoem}
+        showPoemStatus={this.state.poemSubmitted}
+        showCompletedPoemCallBack={this.showCompletedPoem}/>
       </div>
     );
   }

src/components/PlayerSubmissionForm.js

@@ -5,25 +5,96 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      adjective: '',
+      noun: '',
+      adverb: '',
+      verb: '',
+      adjective2: '',
+      noun2: '',
+    }
+  }
+
+  //abstraction of whats being allocated to their proper place
+  onPoemInputChange = (event) => {
+    console.log(event);
+    const updatedState = {}; //updatedstate IS field
+
+    updatedState[event.target.name] = event.target.value;
+
+    this.setState(updatedState); //setting state of field
+  }
+
+  //sendSubmission this is the callback submitting form that calls the callaback function
+  onSubmit = (event) => {
+    event.preventDefault();
+
+    this.props.addVerseCallBack({
+      adjective: this.state.adjective,
+      noun: this.state.noun,
+      adverb: this.state.adverb,
+      verb: this.state.verb,
+      adjective2: this.state.adjective2,
+      noun2: this.state.noun2,
+    });
+
+    this.setState({
+      adjective: '',
+      noun: '',
+      adverb: '',
+      verb: '',
+      adjective2: '',
+      noun2: '',
+    }); 
   }
 
   render() {
 
+
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
-
-        <form className="PlayerSubmissionForm__form" >
+        <h3>Player Submission Form for Player #{ this.props.player +1 }</h3>
+          
+        <form className="PlayerSubmissionForm__form" onSubmit={this.onSubmit}>
 
           <div className="PlayerSubmissionForm__poem-inputs">
-
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
             <input
-              placeholder="hm..."
-              type="text" />
-
+              name="adjective"
+              placeholder="adjective"
+              onChange={this.onPoemInputChange}
+              value={this.state.adjective}
+            />
+            <input
+              name="noun"
+              placeholder="noun"
+              onChange={this.onPoemInputChange}
+              value={this.state.noun}
+            />
+              <input
+              name="adverb"
+              placeholder="adverb"
+              onChange={this.onPoemInputChange}
+              value={this.state.adverb}
+            />
+            <input
+              name="verb"
+              placeholder="verb"
+              onChange={this.onPoemInputChange}
+              value={this.state.verb}
+            />
+            <input
+              name="adjective2"
+              placeholder="adjective"
+              onChange={this.onPoemInputChange}
+              value={this.state.adjective2}
+            />
+            <input
+              name="noun2"
+              placeholder="noun"
+              onChange={this.onPoemInputChange}
+              value={this.state.noun2}
+            />
           </div>
 
           <div className="PlayerSubmissionForm__submit">

src/components/RecentSubmission.js

@@ -2,12 +2,18 @@ import React from 'react';
 import './RecentSubmission.css';
 
 const RecentSubmission = (props) => {
+  if (props.lastVerse) {
+
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p 
+        className="RecentSubmission__submission">The {props.lastVerse.adjective} {props.lastVerse.noun} {props.lastVerse.adverb} {props.lastVerse.verb} the {props.lastVerse.adjective2} {props.lastVerse.noun2}.
+      </p>
     </div>
   );
-}
+} else {
+  return null
+}}
 
 export default RecentSubmission;