diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..ccfd3086 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,20 +1,28 @@ -import React from 'react'; -import './FinalPoem.css'; - -const FinalPoem = (props) => { +import React from "react"; +import "./FinalPoem.css"; +const FinalPoem = props => { return (
-
-

Final Poem

- -
+ {props.shouldShowFinalPoem && ( +
+

Final Poem

+ {props.finalPoem.map(para => ( +

{para}

+ ))} +
+ )}
- +
); -} +}; export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..d94373a0 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -1,18 +1,49 @@ -import React, { Component } from 'react'; -import './Game.css'; -import PlayerSubmissionForm from './PlayerSubmissionForm'; -import FinalPoem from './FinalPoem'; -import RecentSubmission from './RecentSubmission'; +import React, { Component } from "react"; +import "./Game.css"; +import PlayerSubmissionForm from "./PlayerSubmissionForm"; +import FinalPoem from "./FinalPoem"; +import RecentSubmission from "./RecentSubmission"; class Game extends Component { - constructor(props) { super(props); + + this.state = { + playerNumber: 1, + isFormSubmitted: false, + userInputs: ["The", "the"], + userSubmission: "", + finalPoem: [], + shouldShowFinalPoem: false + }; } - render() { + handleRecentSubmission = userInputs => { + console.log(userInputs); + + let { adj1, noun1, adv, verb, adj2, noun2 } = userInputs; + let sentence = `The ${adj1} ${noun1} ${adv} ${verb} the ${adj2} ${noun2}.`; + + let finalPoem = this.state.finalPoem; + finalPoem.push(sentence); + // userInputs.forEach(data => console.log(data)); + + this.setState({ + isFormSubmitted: true, + playerNumber: this.state.playerNumber + 1, + userSubmission: sentence, + finalPoem: finalPoem + }); + }; - const exampleFormat = FIELDS.map((field) => { + showFinalPoem = () => { + this.setState({ + shouldShowFinalPoem: true + }); + }; + + render() { + const exampleFormat = FIELDS.map(field => { if (field.key) { return field.placeholder; } else { @@ -20,24 +51,38 @@ class Game extends Component { } }).join(" "); + const userSubmission = this.state.userSubmission; + return (

Game

-

Each player should take turns filling out and submitting the form below. Each turn should be done individually and in secret! Take inspiration from the revealed recent submission. When all players are finished, click the final button on the bottom to reveal the entire poem.

+

+ Each player should take turns filling out and submitting the form + below. Each turn should be done individually and in secret!{" "} + Take inspiration from the revealed recent submission. When all players + are finished, click the final button on the bottom to reveal the + entire poem. +

Please follow the following format for your poetry submission:

-

- { exampleFormat } -

- - +

{exampleFormat}

- + {this.state.isFormSubmitted && ( + + )} - + +
); } @@ -46,31 +91,31 @@ class Game extends Component { const FIELDS = [ "The", { - key: 'adj1', - placeholder: 'adjective', + key: "adj1", + placeholder: "adjective" }, { - key: 'noun1', - placeholder: 'noun', + key: "noun1", + placeholder: "noun" }, { - key: 'adv', - placeholder: 'adverb', + key: "adv", + placeholder: "adverb" }, { - key: 'verb', - placeholder: 'verb', + key: "verb", + placeholder: "verb" }, "the", { - key: 'adj2', - placeholder: 'adjective', + key: "adj2", + placeholder: "adjective" }, { - key: 'noun2', - placeholder: 'noun', + key: "noun2", + placeholder: "noun" }, - ".", + "." ]; export default Game; diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index 7cded5d9..6d6f98eb 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -31,7 +31,7 @@ background-color: tomato; } -.PlayerSubmissionFormt__input--invalid { +.PlayerSubmissionForm__input--invalid { background-color: #FFE9E9; } diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1de05095..6c1c0e97 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,33 +1,120 @@ -import React, { Component } from 'react'; -import './PlayerSubmissionForm.css'; +import React, { Component } from "react"; +import "./PlayerSubmissionForm.css"; class PlayerSubmissionForm extends Component { - constructor(props) { super(props); + + // + this.state = { + // playerNumber: 1, + adj1: "", + noun1: "", + adv: "", + verb: "", + adj2: "", + noun2: "" + }; } - render() { + handleSubmit = e => { + e.preventDefault(); + // this.setState({ + // + // }); - return ( -
-

Player Submission Form for Player #{ }

+ this.props.handleRecentSubmission(this.state); + const keys = Object.keys(this.state); + keys.map(key => { + this.setState({ + [key]: "" + }); + }); + }; -
+ handleChange = event => { + let name = event.target.name; + let value = event.target.value; + // console.log(name, value); + this.setState({ + [name]: value + }); + }; + render() { + return ( +
+

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

+

{this.props.propTest}

+
- { // Put your form inputs here... We've put in one below as an example } + The + + + + className="PlayerSubmissionForm__input--invalid" + placeholder="adverb" + type="text" + name="adv" + value={this.state.adv} + onChange={this.handleChange} + /> + + the + +
- +
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..79c5128f 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,13 +1,13 @@ -import React from 'react'; -import './RecentSubmission.css'; +import React from "react"; +import "./RecentSubmission.css"; -const RecentSubmission = (props) => { +const RecentSubmission = props => { return (

The Most Recent Submission

-

{ }

+

{props.submission}

); -} +}; export default RecentSubmission;