From 8ab1c01d11da9c506a8801ebe44f997cc7618266 Mon Sep 17 00:00:00 2001 From: ohcloud Date: Thu, 12 Dec 2019 16:37:49 -0800 Subject: [PATCH 1/5] created realationship between game and player submission form.. working on form next --- .vscode/settings.json | 18 +++++++++++++++ src/App.js | 1 + src/components/FinalPoem.js | 2 ++ src/components/Game.js | 17 ++++++++++++++ src/components/PlayerSubmissionForm.js | 32 +++++++++++++++++++++++++- 5 files changed, 69 insertions(+), 1 deletion(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..a7986828 --- /dev/null +++ b/.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" +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 8e1f9446..6f0e2798 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import './App.css'; import Game from './components/Game.js'; class App extends Component { + render() { return (
diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..19ea090c 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,6 +1,8 @@ import React from 'react'; import './FinalPoem.css'; +// 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). + const FinalPoem = (props) => { return ( diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..f99d6f78 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -8,8 +8,23 @@ class Game extends Component { constructor(props) { super(props); + + this.state = { + completedPoem: [], + poemSubmitted: false, + } } + addVerse = (singlePoemVerse) => { + let poem = [ ...this.state.poem] + + poem.push(singlePoemVerse) + this.setState({ + completedPoem: poem + }); + + } + render() { const exampleFormat = FIELDS.map((field) => { @@ -20,6 +35,8 @@ class Game extends Component { } }).join(" "); + + return (

Game

diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1de05095..e87e8df8 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -5,14 +5,44 @@ class PlayerSubmissionForm extends Component { constructor(props) { super(props); + + this.state = { + adjective: '', + noun: '', + adverb: '', + verb: '', + adjective2: '', + noun2: '', + } + // preserve the initial state in a new object + this.baseState = this.state } + //resetForm happens 6 times + + //onPoemInputChange + onPoemInputChange = (value) => { + const updatedState = {}; + + const field = event.target.name; + const value = event.target.value; + + updatedState[field] = value; + this.setState(updatedState); + } + + //sendSubmission this is the callback submitting form that calls the callaback function + + render() { + return (

Player Submission Form for Player #{ }

- + { + //form goes here//
From fd44330ef92ca2d1734d2b4d44d079e82c0cf1d8 Mon Sep 17 00:00:00 2001 From: ohcloud Date: Thu, 12 Dec 2019 19:16:55 -0800 Subject: [PATCH 2/5] it was a doozy but wave one is done --- .env | 1 + src/components/Game.js | 13 ++-- src/components/PlayerSubmissionForm.js | 89 +++++++++++++++++++------- 3 files changed, 72 insertions(+), 31 deletions(-) create mode 100644 .env diff --git a/.env b/.env new file mode 100644 index 00000000..44c0ec83 --- /dev/null +++ b/.env @@ -0,0 +1 @@ + SKIP_PREFLIGHT_CHECK=true \ No newline at end of file diff --git a/src/components/Game.js b/src/components/Game.js index f99d6f78..6f92c3a0 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -16,14 +16,13 @@ class Game extends Component { } addVerse = (singlePoemVerse) => { - let poem = [ ...this.state.poem] + let lines = this.state.completedPoem; - poem.push(singlePoemVerse) + lines.push(singlePoemVerse); this.setState({ - completedPoem: poem + lines }); - - } + } render() { @@ -51,8 +50,8 @@ class Game extends Component { - - +
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index e87e8df8..dbf6d768 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -14,46 +14,87 @@ class PlayerSubmissionForm extends Component { adjective2: '', noun2: '', } - // preserve the initial state in a new object - this.baseState = this.state } - //resetForm happens 6 times + //abstraction of whats being allocated to their proper place + onPoemInputChange = (event) => { + console.log(event); + const updatedState = {}; //updatedstate IS field - //onPoemInputChange - onPoemInputChange = (value) => { - const updatedState = {}; + updatedState[event.target.name] = event.target.value; - const field = event.target.name; - const value = event.target.value; - - updatedState[field] = value; - this.setState(updatedState); + 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 (
-

Player Submission Form for Player #{ }

- { - //form goes here// +

Player Submission Form for Player #{ this.props.player +1 }

+ +
- - { - // Put your form inputs here... We've put in one below as an example - } - + name="adjective" + placeholder="adjective" + onChange={this.onPoemInputChange} + value={this.state.adjective} + /> + + + + +
From 8c8b8bb1aa0c9dd27efe051ddc5365fd8eabe7bb Mon Sep 17 00:00:00 2001 From: ohcloud Date: Thu, 12 Dec 2019 19:41:57 -0800 Subject: [PATCH 3/5] wave two completed, final poem is rendering properly. --- src/components/FinalPoem.js | 37 ++++++++++++++++++++++++------------- src/components/Game.js | 3 ++- 2 files changed, 26 insertions(+), 14 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 19ea090c..de2baffe 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -3,20 +3,31 @@ import './FinalPoem.css'; // 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). -const FinalPoem = (props) => { - - return ( -
-
-

Final Poem

- -
+class FinalPoem extends React.Component { + render() { + const fullPoem = this.props.fullPoem.map((line, i) => { + return ( +
+

The {line.adjective} {line.noun} {line.adverb} {line.verb} the {line.adjective2} {line.noun2}. +

+
+ ) + }) + + return ( +
+
+

Final Poem

+
+ { fullPoem } +
+
-
- +
+ +
-
- ); + ); + } } - export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index 6f92c3a0..3dac8d15 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -52,7 +52,8 @@ class Game extends Component { - + +
); From bb4669b81a3a6597cd58fb51a5e2a135989fdfce Mon Sep 17 00:00:00 2001 From: ohcloud Date: Thu, 12 Dec 2019 20:02:56 -0800 Subject: [PATCH 4/5] recent submission has now been completed, its talking to game a-ok. --- src/components/Game.js | 2 +- src/components/RecentSubmission.js | 10 ++++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 3dac8d15..82e27065 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -48,7 +48,7 @@ class Game extends Component { { exampleFormat }

- + diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..255dca82 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -2,12 +2,18 @@ import React from 'react'; import './RecentSubmission.css'; const RecentSubmission = (props) => { + if (props.lastVerse) { + return (

The Most Recent Submission

-

{ }

+

The {props.lastVerse.adjective} {props.lastVerse.noun} {props.lastVerse.adverb} {props.lastVerse.verb} the {props.lastVerse.adjective2} {props.lastVerse.noun2}. +

); -} +} else { + return null +}} export default RecentSubmission; From c56db7944562eff0be0175b69d99363c2009d9ef Mon Sep 17 00:00:00 2001 From: ohcloud Date: Thu, 12 Dec 2019 20:25:26 -0800 Subject: [PATCH 5/5] attempting to complete the colors for the boxes --- src/components/FinalPoem.js | 15 ++++++++++----- src/components/Game.js | 18 ++++++++++++++++-- 2 files changed, 26 insertions(+), 7 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index de2baffe..2966ac58 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -4,7 +4,15 @@ import './FinalPoem.css'; // 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). class FinalPoem extends React.Component { + showCompletedPoem = () => { + this.props.showCompletedPoemCallBack() + } + render() { + const pressButton = +
+ +
const fullPoem = this.props.fullPoem.map((line, i) => { return (
@@ -19,14 +27,11 @@ class FinalPoem extends React.Component {

Final Poem

- { fullPoem } + { this.props.showPoemStatus ? fullPoem : pressButton }
- -
- -
+ ); } } diff --git a/src/components/Game.js b/src/components/Game.js index 82e27065..205b40b2 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -12,9 +12,18 @@ class Game extends Component { 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; @@ -48,13 +57,18 @@ class Game extends Component { { exampleFormat }

+ { this.state.showForm ? +
- - +
: null + } +
); }