diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..0938ef5f 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,20 +1,57 @@ import React from 'react'; import './FinalPoem.css'; +import PropTypes from 'prop-types'; const FinalPoem = (props) => { + const onDisplayPoem = (event) => { + event.preventDefault(); + props.setFieldsPoem(true); + }; + // Display message format like demo + function formatFields(fieldInput){ + let fullPoem = ''; + fieldInput = fieldInput.split(" "); + + for(let i = 0; i < fieldInput.length; i++){ + if(i === 0){ + fullPoem += ("The " + fieldInput[i]); + }else if(i === 3){ + fullPoem += (" " + fieldInput[i] + " the "); + }else{ + fullPoem += (" " + fieldInput[i] ); + }; + }; + return (fullPoem + "."); + } + return ( -
+

Final Poem

+ {props.poemLines.map((line, i) => { + return( +
+

{formatFields(line)}

+
+ ); + })}
- +
- +
); } +FinalPoem.propTypes = { + poemLines: PropTypes.array, + setFieldsPoem: PropTypes.func +}; export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index ad27105b..6876f158 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -5,6 +5,12 @@ import FinalPoem from './FinalPoem'; import RecentSubmission from './RecentSubmission'; const Game = () => { + + const [currentField, setCurrentField] = useState(''); + const [allFields, setAllFields] = useState([]); + const [displayPoem, setDisplayPoem] = useState(false); + + // Provided code const exampleFormat = FIELDS.map((field) => { if (field.key) { return field.placeholder; @@ -13,6 +19,44 @@ const Game = () => { } }).join(" "); + // Gets field input and renders all the fields together + const showSubmittedField = (fieldInput) => { + + const newField = Object.values(fieldInput).join(' '); + setCurrentField(newField); + + const newFieldList = [...allFields]; + newFieldList.push(newField); + setAllFields(newFieldList); + }; + + // Array to hold field input + let poem = []; + + if (displayPoem === true) { + poem = allFields; + + 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:

+ +

+ { exampleFormat } +

+ + + {/* <--- shows last submitted line by user*/} + + + +
+ ); + } + return (

Game

@@ -25,17 +69,16 @@ const Game = () => { { exampleFormat }

- + - + - +
); } - - +// Part for making this dynamic later use const FIELDS = [ "The", { diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index 7cded5d9..03271d2a 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -25,6 +25,7 @@ border: 2px black solid; box-shadow: 5px 10px black; transition: 0.25s; + background-color: cadetblue; } .PlayerSubmissionForm__submit-btn:hover { @@ -38,3 +39,7 @@ .PlayerSubmissionForm__input--invalid::placeholder { color: black; } + +input.empty { + background-color: #FFE9E9; +} \ No newline at end of file diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index ba19e6ef..4ace9492 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,31 +1,92 @@ 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 [fieldInput, setFieldInput] = useState ({ + adj1: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '', + }); -
+ const [player, nextPlayer] = useState(1); + + const onInput = (event) => { + // Get all field inputs + const newField = { + ...fieldInput, + }; + + newField[event.target.name] = event.target.value; + setFieldInput(newField); + }; + + // Gets and sends field's input to Game.js and resets current input + const onSubmitField= (event) => { + event.preventDefault(); + + props.onCallbackField(fieldInput); + + setFieldInput({ + adj1: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '', + }); - { - // Put your form inputs here... We've put in one below as an example - } - + // Move to next player + nextPlayer(player + 1); + }; + const isEmpty = (name) => { + return name === ''; + }; + + return ( +
+

Player Submission Form for Player #{player}

+ + + +
+ + {props.fields.map((field, i) => { + if (field.key) { + return ( + + ); + }else{ + return field; + }; + })}
- +
); } +PlayerSubmissionForm.propTypes = { + fields: PropTypes.array.isRequired, + onCallbackField: PropTypes.func.isRequired, +}; + export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..74ffcd2a 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,13 +1,35 @@ import React from 'react'; import './RecentSubmission.css'; +import PropTypes from 'prop-types'; +// To add "the" to match demo Resource: R. Quin :) zoom call const RecentSubmission = (props) => { + + const fieldInput = props.fieldInput.split(" "); + + let fullPoem = ''; + if(props.fieldInput.length !== 0){ + for(let i =0; i < fieldInput.length; i++){ + if(i ===0){ + fullPoem += ("The " + fieldInput[i]); + }else if(i === 3){ + fullPoem += (" " + fieldInput[i] + " the "); + }else{ + fullPoem += (" " + fieldInput[i]); + }; + }; + }; + return (

The Most Recent Submission

-

{ }

+

{fullPoem}

); -} +}; + +RecentSubmission.propTypes = { + fieldInput: PropTypes.string +}; export default RecentSubmission;