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 (
-
+
);
}
+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) => {
-