From 6b7d46a56f1769b67a3e69dfbf2716aee3ffa5b1 Mon Sep 17 00:00:00 2001 From: Heather Izumi Date: Tue, 18 Jun 2019 14:17:48 -0700 Subject: [PATCH 1/9] starting PlayerSubmissionForm --- src/components/Game.js | 16 +++++++-- src/components/PlayerSubmissionForm.js | 48 ++++++++++++++++++++++++-- src/components/RecentSubmission.js | 1 + 3 files changed, 59 insertions(+), 6 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..c7fd1ab8 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -6,11 +6,19 @@ import RecentSubmission from './RecentSubmission'; class Game extends Component { + constructor(props) { super(props); + + this.state = { + recentLine: 'test', + poem: [], + + } } render() { + const {recentLine, poem} = this.state; const exampleFormat = FIELDS.map((field) => { if (field.key) { @@ -29,14 +37,16 @@ class Game extends Component {

Please follow the following format for your poetry submission:

- { exampleFormat } + {exampleFormat}

- + - + ); diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1de05095..84620490 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -9,6 +9,8 @@ class PlayerSubmissionForm extends Component { render() { + const { adjective1, noun1, adverb, verb, adjective2, noun2} = this.state; + return (

Player Submission Form for Player #{ }

@@ -16,10 +18,50 @@ class PlayerSubmissionForm extends Component {
+*********************** + +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + + + + - { - // Put your form inputs here... We've put in one below as an example - } +********************* diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..063b68a1 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -5,6 +5,7 @@ const RecentSubmission = (props) => { return (

The Most Recent Submission

+

{props.line}

{ }

); From ac788045159f925538724315313ffea7202a9030 Mon Sep 17 00:00:00 2001 From: Heather Izumi Date: Tue, 18 Jun 2019 14:38:04 -0700 Subject: [PATCH 2/9] added player submit form --- src/components/PlayerSubmissionForm.js | 127 +++++++++++++++---------- 1 file changed, 76 insertions(+), 51 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 84620490..0ae34a21 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -5,71 +5,96 @@ class PlayerSubmissionForm extends Component { constructor(props) { super(props); + + this.state = { + adjective1: '', + noun1: '', + adverb: '', + verb: '', + adjective2: '', + noun2: '' + + } + } + + + handleSubmit = (event) => { + event.preventDefault(); + + this.props.onSubmitLineCallback({ + adjective1: this.state.adjective1, + noun1: this.state.noun1, + adverb: this.state.adverb, + verb: this.state.verb, + adjective2: this.state.adjective2, + noun2: this.state.noun2 + }); + + this.setState({ + adjective1: '', + noun1: '', + adverb: '', + verb: '', + adjective2: '', + noun2: '' + }); } render() { - const { adjective1, noun1, adverb, verb, adjective2, noun2} = this.state; + const { adjective1, noun1, adverb, verb, adjective2, noun2 } = this.state; return ( +
-

Player Submission Form for Player #{ }

+

Player Submission Form for Player #{}

-*********************** - -
- - -
- -
- - -
- -
- - -
- -
- - -
- - - - - - -********************* + +

The

+ name='adjective1' + placeholder='adjective' + value={adjective1} + onChange={this.onChangeHandler} + /> -
+ + + + + + +

the

+ -
- + + +
+ +
From ca5761235a432821d71049d8ef58c93626531861 Mon Sep 17 00:00:00 2001 From: Heather Izumi Date: Tue, 18 Jun 2019 15:14:09 -0700 Subject: [PATCH 3/9] can submit a new line and it will display --- src/components/Game.js | 27 +++++++++++++++++++------- src/components/PlayerSubmissionForm.js | 22 +++++++++++++++++---- 2 files changed, 38 insertions(+), 11 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index c7fd1ab8..99b3d054 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -11,14 +11,26 @@ class Game extends Component { super(props); this.state = { - recentLine: 'test', + recentLine: '', poem: [], } } + onSubmitLine = ({ adjective1, noun1, adverb, verb, adjective2, noun2 }) => { + console.log('I am in onSubmit!!!!!'); + + const newLine = 'The ' + adjective1 + ' '+ noun1 + ' ' + adverb + ' ' + verb + ' the ' + adjective2 + ' ' + noun2; + + this.setState({ + recentLine: newLine + }) + + console.log(this.state.recentLine); + } + render() { - const {recentLine, poem} = this.state; + const { recentLine, poem } = this.state; const exampleFormat = FIELDS.map((field) => { if (field.key) { @@ -40,13 +52,14 @@ class Game extends Component { {exampleFormat}

- + - + - +
); diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 0ae34a21..0827ef58 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -18,6 +18,13 @@ class PlayerSubmissionForm extends Component { } + onChangeHandler = (event) => { + const field = {} + field[event.target.name] = event.target.value; + + this.setState(field); + } + handleSubmit = (event) => { event.preventDefault(); @@ -30,6 +37,8 @@ class PlayerSubmissionForm extends Component { noun2: this.state.noun2 }); + console.log(this.state.adjective1); + this.setState({ adjective1: '', noun1: '', @@ -49,7 +58,7 @@ class PlayerSubmissionForm extends Component {

Player Submission Form for Player #{}

-
+
@@ -62,32 +71,37 @@ class PlayerSubmissionForm extends Component { />

the

From a43bb8d2c0df31dd5563dc1ba0da138682908d35 Mon Sep 17 00:00:00 2001 From: Heather Izumi Date: Tue, 18 Jun 2019 15:25:21 -0700 Subject: [PATCH 4/9] new line updates poem --- src/components/Game.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 99b3d054..23957703 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -18,17 +18,21 @@ class Game extends Component { } onSubmitLine = ({ adjective1, noun1, adverb, verb, adjective2, noun2 }) => { - console.log('I am in onSubmit!!!!!'); const newLine = 'The ' + adjective1 + ' '+ noun1 + ' ' + adverb + ' ' + verb + ' the ' + adjective2 + ' ' + noun2; + this.state.poem.push(newLine); this.setState({ - recentLine: newLine + recentLine: newLine, + poem: this.state.poem }) - console.log(this.state.recentLine); } + // onAddPoemLine = () => { + + // } + render() { const { recentLine, poem } = this.state; From c2f34f0a46cf3816ff65f813e24e6c1b1d76adfd Mon Sep 17 00:00:00 2001 From: Heather Izumi Date: Tue, 18 Jun 2019 20:31:39 -0700 Subject: [PATCH 5/9] Can show final poem when clicking appropriate button, form and previous line do not show --- src/components/FinalPoem.js | 38 ++++++++++++++++++++++++++++++++----- src/components/Game.js | 30 ++++++++++++++++++----------- 2 files changed, 52 insertions(+), 16 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..02693534 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -3,16 +3,44 @@ import './FinalPoem.css'; const FinalPoem = (props) => { + const showPoem = () => { + console.log('In show poem'); + props.onShowPoemCallback(); + + } + + const { display } = props; + + + const fullPoem = props.finalPoem.map((line, i) => { + return ( +

{line}

+ ); + }) + + // let fullPoem; + + // if (true) { + // fullPoem = props.finalPoem.map((line, i) => { + // return ( + //

{line}

+ // ); + // })} else { + // fullPoem = '' + // } + + return (
-
+ {display &&

Final Poem

-
+
{fullPoem}
+
} -
- -
+ {!display &&
+ +
}
); } diff --git a/src/components/Game.js b/src/components/Game.js index 23957703..ec82486c 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -13,13 +13,13 @@ class Game extends Component { this.state = { recentLine: '', poem: [], - + finalDisplay: false, } } onSubmitLine = ({ adjective1, noun1, adverb, verb, adjective2, noun2 }) => { - const newLine = 'The ' + adjective1 + ' '+ noun1 + ' ' + adverb + ' ' + verb + ' the ' + adjective2 + ' ' + noun2; + const newLine = 'The ' + adjective1 + ' ' + noun1 + ' ' + adverb + ' ' + verb + ' the ' + adjective2 + ' ' + noun2; this.state.poem.push(newLine); this.setState({ @@ -29,12 +29,18 @@ class Game extends Component { } - // onAddPoemLine = () => { - - // } + onShowPoem = () => { + console.log(`I am in show poem before: ${this.state.finalDisplay}` ); + + this.setState({ + finalDisplay: true + }) + + console.log(`I am in show poem after: ${this.state.finalDisplay}` ); + } render() { - const { recentLine, poem } = this.state; + const { recentLine, poem, finalDisplay } = this.state; const exampleFormat = FIELDS.map((field) => { if (field.key) { @@ -56,14 +62,16 @@ class Game extends Component { {exampleFormat}

- + {!finalDisplay && } - + {!finalDisplay && } + finalPoem={poem} + onShowPoemCallback={this.onShowPoem} + display={finalDisplay} />
); From 879fa79aed780ee98094ddd2e6d1c01dd1de1e7b Mon Sep 17 00:00:00 2001 From: Heather Izumi Date: Tue, 18 Jun 2019 22:23:14 -0700 Subject: [PATCH 6/9] added some css to player submission form --- src/components/Game.js | 2 +- src/components/PlayerSubmissionForm.css | 5 +++++ src/components/PlayerSubmissionForm.js | 8 +++++++- 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index ec82486c..5d187fb1 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -19,7 +19,7 @@ class Game extends Component { onSubmitLine = ({ adjective1, noun1, adverb, verb, adjective2, noun2 }) => { - const newLine = 'The ' + adjective1 + ' ' + noun1 + ' ' + adverb + ' ' + verb + ' the ' + adjective2 + ' ' + noun2; + const newLine = 'The ' + adjective1 + ' ' + noun1 + ' ' + adverb + ' ' + verb + ' the ' + adjective2 + ' ' + noun2 + "."; this.state.poem.push(newLine); this.setState({ diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index 7cded5d9..35ad592a 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -10,6 +10,7 @@ display: flex; flex-wrap: wrap; justify-content: space-around; + align-items: center; } .PlayerSubmissionForm__submit { @@ -38,3 +39,7 @@ .PlayerSubmissionForm__input--invalid::placeholder { color: black; } + +input { + height: 40px; +} diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 0827ef58..f6beb798 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -37,7 +37,7 @@ class PlayerSubmissionForm extends Component { noun2: this.state.noun2 }); - console.log(this.state.adjective1); + // console.log(this.state.adjective1); this.setState({ adjective1: '', @@ -66,6 +66,7 @@ class PlayerSubmissionForm extends Component { @@ -73,6 +74,7 @@ class PlayerSubmissionForm extends Component { @@ -80,6 +82,7 @@ class PlayerSubmissionForm extends Component { @@ -87,6 +90,7 @@ class PlayerSubmissionForm extends Component { @@ -95,6 +99,7 @@ class PlayerSubmissionForm extends Component { @@ -102,6 +107,7 @@ class PlayerSubmissionForm extends Component { From 2f4e2ed24910bba84ebc4f8858ea2bdb94b33f70 Mon Sep 17 00:00:00 2001 From: Heather Izumi Date: Wed, 19 Jun 2019 15:13:08 -0700 Subject: [PATCH 7/9] added player number to form, updated conditional rendering for RecentSubmission --- src/components/FinalPoem.js | 12 ------------ src/components/Game.js | 12 ++++++++---- src/components/PlayerSubmissionForm.js | 4 ++-- 3 files changed, 10 insertions(+), 18 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 02693534..afd0fc84 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -4,7 +4,6 @@ import './FinalPoem.css'; const FinalPoem = (props) => { const showPoem = () => { - console.log('In show poem'); props.onShowPoemCallback(); } @@ -18,17 +17,6 @@ const FinalPoem = (props) => { ); }) - // let fullPoem; - - // if (true) { - // fullPoem = props.finalPoem.map((line, i) => { - // return ( - //

{line}

- // ); - // })} else { - // fullPoem = '' - // } - return (
diff --git a/src/components/Game.js b/src/components/Game.js index 5d187fb1..3c73936b 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -14,6 +14,7 @@ class Game extends Component { recentLine: '', poem: [], finalDisplay: false, + player: 1 } } @@ -24,7 +25,9 @@ class Game extends Component { this.setState({ recentLine: newLine, - poem: this.state.poem + poem: this.state.poem, + player: this.state.player + 1 + }) } @@ -40,7 +43,7 @@ class Game extends Component { } render() { - const { recentLine, poem, finalDisplay } = this.state; + const { recentLine, poem, finalDisplay, player } = this.state; const exampleFormat = FIELDS.map((field) => { if (field.key) { @@ -62,11 +65,12 @@ class Game extends Component { {exampleFormat}

- {!finalDisplay && } {!finalDisplay && } + onSubmitLineCallback={this.onSubmitLine} + playerNumber={player} />} -

Player Submission Form for Player #{}

+

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

@@ -111,11 +111,11 @@ class PlayerSubmissionForm extends Component { value={noun2} onChange={this.onChangeHandler} /> +
-
); From d71bed3e4ebd1bb1d5f21fb1b2006e1126268da6 Mon Sep 17 00:00:00 2001 From: Heather Izumi Date: Wed, 19 Jun 2019 15:40:31 -0700 Subject: [PATCH 8/9] Added css to PlayerSubmissionForm and updated conditional rendering of RecentSubmission --- src/components/Game.js | 2 +- src/components/PlayerSubmissionForm.css | 5 +++++ src/components/PlayerSubmissionForm.js | 29 +++++++++++++++++++++---- 3 files changed, 31 insertions(+), 5 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 3c73936b..d30435c2 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -65,7 +65,7 @@ class Game extends Component { {exampleFormat}

- {(!finalDisplay && player < 1) && } {!finalDisplay && { + return this.validations[fieldName].test(this.state[fieldName]); + } + onChangeHandler = (event) => { const field = {} @@ -49,6 +62,8 @@ class PlayerSubmissionForm extends Component { }); } + + render() { const { adjective1, noun1, adverb, verb, adjective2, noun2 } = this.state; @@ -69,14 +84,16 @@ class PlayerSubmissionForm extends Component { size='10' value={adjective1} onChange={this.onChangeHandler} + className={this.fieldValid('adjective1') ? 'valid' : 'PlayerSubmissionFormt__input--invalid'} />

the

@@ -102,6 +121,7 @@ class PlayerSubmissionForm extends Component { size='10' value={adjective2} onChange={this.onChangeHandler} + className={this.fieldValid('adjective2') ? 'valid' : 'PlayerSubmissionFormt__input--invalid'} /> -
- -
+
+ +
); From bb562383ada4f4cdb4363f11cf9f43121c1af692 Mon Sep 17 00:00:00 2001 From: Heather Izumi Date: Wed, 19 Jun 2019 16:01:08 -0700 Subject: [PATCH 9/9] added PropTypes to components --- src/components/FinalPoem.js | 8 ++++++++ src/components/Game.js | 4 ---- src/components/PlayerSubmissionForm.js | 7 +++++++ src/components/RecentSubmission.js | 5 +++++ 4 files changed, 20 insertions(+), 4 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index afd0fc84..4824742d 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,5 +1,6 @@ import React from 'react'; import './FinalPoem.css'; +import PropTypes from 'prop-types'; const FinalPoem = (props) => { @@ -33,4 +34,11 @@ const FinalPoem = (props) => { ); } +FinalPoem.propTypes = { + finalPoem: PropTypes.array.isRequired, + onShowPoemCallback: PropTypes.func.isRequired, + display: PropTypes.bool.isRequired, +}; + + export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index d30435c2..7444e59b 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -33,13 +33,9 @@ class Game extends Component { } onShowPoem = () => { - console.log(`I am in show poem before: ${this.state.finalDisplay}` ); - this.setState({ finalDisplay: true }) - - console.log(`I am in show poem after: ${this.state.finalDisplay}` ); } render() { diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 61865ae7..e7bf25e2 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import './PlayerSubmissionForm.css'; +import PropTypes from 'prop-types'; class PlayerSubmissionForm extends Component { @@ -143,4 +144,10 @@ class PlayerSubmissionForm extends Component { } } +PlayerSubmissionForm.propTypes = { + onSubmitLineCallback: PropTypes.func.isRequired, + playerNumber: PropTypes.number.isRequired, +}; + + export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 063b68a1..ac8d6400 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,5 +1,6 @@ import React from 'react'; import './RecentSubmission.css'; +import PropTypes from 'prop-types'; const RecentSubmission = (props) => { return ( @@ -11,4 +12,8 @@ const RecentSubmission = (props) => { ); } +RecentSubmission.propTypes = { + line: PropTypes.string.isRequired, +}; + export default RecentSubmission;