diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..208a5561 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -3,18 +3,31 @@ import './FinalPoem.css'; const FinalPoem = (props) => { - return ( -
-
-

Final Poem

+ const poem = props.submissions.map((line, i) => { + return

{line}

+ }) + const handleClick = () => { + console.log("I am clicking") + props.poemCallback(); + } + const poemButton = +
+ +
-
+ const showpoem = +
+

Final Poem

+
{poem}
+
; + const content = props.isSubmitted? showpoem : poemButton -
- -
-
- ); -} + return ( +
+ {content} -export default FinalPoem; +
+ ); + } + + export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..8d9da5fa 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -8,8 +8,35 @@ class Game extends Component { constructor(props) { super(props); + this.state = { + submissions: [], + isSubmitted: false, + counter: 1, + } } + addSubmission = (newSentence)=> { + console.log(newSentence) + let nextSubmission = this.state.submissions + nextSubmission.push(newSentence) + this.setState({ + submissions: nextSubmission, + counter: this.state.counter + 1 + }) + console.log(this.state.submissions) + + } + setSubmitted=()=> { + this.setState({ + isSubmitted: true, + counter: 1, + }) + } + + + + + render() { const exampleFormat = FIELDS.map((field) => { @@ -19,6 +46,9 @@ class Game extends Component { return field; } }).join(" "); + const playersubmissionform = this.state.isSubmitted? '' : + const recentsubmission = this.state.isSubmitted? '' : + return (
@@ -31,12 +61,12 @@ class Game extends Component {

{ exampleFormat }

+ {recentsubmission} + {playersubmissionform} + - - - - - + +
); diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index 7cded5d9..22dab04b 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -35,6 +35,8 @@ background-color: #FFE9E9; } + + .PlayerSubmissionForm__input--invalid::placeholder { color: black; } diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1de05095..e2cff9dc 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -5,29 +5,119 @@ class PlayerSubmissionForm extends Component { constructor(props) { super(props); + this.state = { + adj1: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '', + } } - render() { + onInputChange = (event) => { + const updatedState = {}; + + const field = event.target.name; + const value = event.target.value; + + + updatedState[field] = value; + this.setState(updatedState); + } + onFormSubmit = (event) => { + event.preventDefault(); + + // const newSubmission = { + // adj1: this.state.adj1, + // noun1: this.state.noun1, + // adv: this.state.adv, + // verb: this.state.verb, + // adj2: this.state.adj2, + // noun2: this.state.noun2, + // }; + const newSentence = "The " + this.state.adj1 + " " + this.state.noun1 + " " + this.state.adv + " " + this.state.verb + " the " + this.state.adj2 + " " + this.state.noun2 + console.log(newSentence) + + + + this.setState({ + adj1: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '', + }); + + this.props.onSubmissionCallback(newSentence) + + } + + + render() { + // let classname = "PlayerSubmissionFormt__input--invalid" return (
-

Player Submission Form for Player #{ }

-
+

Player Submission Form for Player #{this.props.Counter}

+ +
+ + The - { - // Put your form inputs here... We've put in one below as an example - } + + + + the + + + ,
- +
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..efaff7d1 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -2,10 +2,11 @@ import React from 'react'; import './RecentSubmission.css'; const RecentSubmission = (props) => { + console.log(props) return (

The Most Recent Submission

-

{ }

+

{props.recentSubmission}

); }