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

Final Poem

- -
- -
- -
-
- ); -} + return ( +
+ {props.gameon && ( +
+

Final Poem

+ {props.poems.map((poem) => ( +

{poem}

+ ))} +
+ )} +
+ +
+
+ ); +}; export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index ad27105b..77a3073c 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -1,69 +1,119 @@ -import React, { useState } from 'react'; -import './Game.css'; -import PlayerSubmissionForm from './PlayerSubmissionForm'; -import FinalPoem from './FinalPoem'; -import RecentSubmission from './RecentSubmission'; +import React, { useState } from "react"; +import "./Game.css"; +import PlayerSubmissionForm from "./PlayerSubmissionForm"; +import FinalPoem from "./FinalPoem"; +import RecentSubmission from "./RecentSubmission"; const Game = () => { - const exampleFormat = FIELDS.map((field) => { - if (field.key) { - return field.placeholder; - } else { - return field; - } - }).join(" "); + const inputFormat = FIELDS.map((field) => { + if (field.key) { + return field.placeholder; + } else { + return field; + } + }).join(" "); - return ( -
-

Game

+ const [player, setPlayer] = useState(1); -

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.

+ const incrementPlayer = (player) => { + const newPlayer = player + 1; + setPlayer(newPlayer); + }; -

Please follow the following format for your poetry submission:

+ const [poemList, setPoemList] = useState([]); + const [gameon, setGameOn] = useState(false); -

- { exampleFormat } -

+ console.log(`this comes from game`, poemList[poemList.length - 1]); - + const onPoemSubmit = () => { + setGameOn(true); + }; - + const addPoem = (poem) => { + const newPoemList = [...poemList]; - + newPoemList.push({ + key: player, + the1: "The", + adj1: poem.adj1, + noun1: poem.noun1, + adv: poem.adv, + verb: poem.verb, + the2: "the", + adj2: poem.adj2, + noun2: poem.noun2, + dot: ".", + }); -
- ); -} + setPoemList(newPoemList); + incrementPlayer(player); + }; + const poems = poemList.map( + (poem) => + `${poem.the1} ${poem.adj1} ${poem.noun1} ${poem.adv} ${poem.verb} ${poem.the2} ${poem.adj2} ${poem.noun2}${poem.dot}` + ); + + console.log(`this comes from game`, poemList[poemList.length - 1]); + + 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. +

+ +

Please follow the following format for your poetry submission:

+ +

{inputFormat}

+ + + + + + +
+ ); +}; const FIELDS = [ - "The", - { - key: 'adj1', - placeholder: 'adjective', - }, - { - key: 'noun1', - placeholder: 'noun', - }, - { - key: 'adv', - placeholder: 'adverb', - }, - { - key: 'verb', - placeholder: 'verb', - }, - "the", - { - key: 'adj2', - placeholder: 'adjective', - }, - { - key: 'noun2', - placeholder: 'noun', - }, - ".", + "The", + { + key: "adj1", + placeholder: "adjective", + }, + { + key: "noun1", + placeholder: "noun", + }, + { + key: "adv", + placeholder: "adverb", + }, + { + key: "verb", + placeholder: "verb", + }, + "the", + { + key: "adj2", + placeholder: "adjective", + }, + { + key: "noun2", + placeholder: "noun", + }, + ".", ]; export default Game; diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index 7cded5d9..a45fec75 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -35,6 +35,10 @@ background-color: #FFE9E9; } +.PlayerSubmissionFormt__input--valid { + background-color: white; +} + .PlayerSubmissionForm__input--invalid::placeholder { color: black; } diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index ba19e6ef..a6cf2150 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,31 +1,129 @@ -import React, { useState } from 'react'; -import './PlayerSubmissionForm.css'; +import React, { useState } from "react"; +import "./PlayerSubmissionForm.css"; +import PropTypes from "prop-types"; -const PlayerSubmissionForm = () => { - return ( -
-

Player Submission Form for Player #{ }

+const PlayerSubmissionForm = (props) => { + const [formFields, setFormFields] = useState({ + adj1: "", + noun1: "", + adv: "", + verb: "", + adj2: "", + noun2: "", + }); -
+ const onInputChange = (event) => { + console.log(event); + console.log(`Changing field ${event.target.name} to ${event.target.value}`); + const newFormFields = { + ...formFields, + }; + newFormFields[event.target.name] = event.target.value; + setFormFields(newFormFields); + }; -
+ const onFormSubmit = (event) => { + event.preventDefault(); - { - // Put your form inputs here... We've put in one below as an example - } - + props.addPoemCallback(formFields); + console.log(formFields); -
+ setFormFields({ + adj1: "", + noun1: "", + adv: "", + verb: "", + adj2: "", + noun2: "", + }); + }; -
- -
-
-
- ); -} + const makeMePink = (value) => { + return value === "" + ? "PlayerSubmissionFormt__input--invalid" + : "PlayerSubmissionFormt__input--valid"; + }; + return ( + !props.gameon && ( +
+

Player Submission Form for Player #{props.player}

+ +
+
+

The

+ + + + +

the

+ + +

.

+
+ +
+ +
+
+
+ ) + ); +}; + +PlayerSubmissionForm.propTypes = { + adj1: PropTypes.string.isRequired, + noun1: PropTypes.string.isRequired, + adv: PropTypes.string.isRequired, + verb: PropTypes.string.isRequired, + adj2: PropTypes.string.isRequired, + noun2: PropTypes.string.isRequired, +}; export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..551c8da8 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,13 +1,22 @@ -import React from 'react'; -import './RecentSubmission.css'; +import React from "react"; +import "./RecentSubmission.css"; const RecentSubmission = (props) => { - return ( -
-

The Most Recent Submission

-

{ }

-
- ); -} + if (!props.poem || props.gameon) { + return ""; + } else { + return ( +
+

The Most Recent Submission

+

+ {" "} + {props.poem.the1} {props.poem.adj1} {props.poem.noun1}{" "} + {props.poem.adv} {props.poem.verb} {props.poem.the2} {props.poem.adj2}{" "} + {props.poem.noun2} {props.poem.dot} +

+
+ ); + } +}; export default RecentSubmission;