Space - Hala

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 (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
-
-      </section>
-
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
-    </div>
-  );
-}
+	return (
+		<div className="FinalPoem">
+			{props.gameon && (
+				<section className="FinalPoem__poem">
+					<h3>Final Poem</h3>
+					{props.poems.map((poem) => (
+						<p>{poem}</p>
+					))}
+				</section>
+			)}
+			<div className="FinalPoem__reveal-btn-container">
+				<input
+					type="button"
+					value="We are finished: Reveal the Poem"
+					className="FinalPoem__reveal-btn"
+					onClick={props.onPoemSubmit}
+				/>
+			</div>
+		</div>
+	);
+};
 
 export default FinalPoem;

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 (
-    <div className="Game">
-      <h2>Game</h2>
+	const [player, setPlayer] = useState(1);
 
-      <p>Each player should take turns filling out and submitting the form below. Each turn should be done individually and <em>in secret!</em> Take inspiration from the revealed recent submission. When all players are finished, click the final button on the bottom to reveal the entire poem.</p>
+	const incrementPlayer = (player) => {
+		const newPlayer = player + 1;
+		setPlayer(newPlayer);
+	};
 
-      <p>Please follow the following format for your poetry submission:</p>
+	const [poemList, setPoemList] = useState([]);
+	const [gameon, setGameOn] = useState(false);
 
-      <p className="Game__format-example">
-        { exampleFormat }
-      </p>
+	console.log(`this comes from game`, poemList[poemList.length - 1]);
 
-      <RecentSubmission />
+	const onPoemSubmit = () => {
+		setGameOn(true);
+	};
 
-      <PlayerSubmissionForm />
+	const addPoem = (poem) => {
+		const newPoemList = [...poemList];
 
-      <FinalPoem />
+		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: ".",
+		});
 
-    </div>
-  );
-}
+		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 (
+		<div className="Game">
+			<h2>Game</h2>
+
+			<p>
+				Each player should take turns filling out and submitting the form below.
+				Each turn should be done individually and <em>in secret!</em> Take
+				inspiration from the revealed recent submission. When all players are
+				finished, click the final button on the bottom to reveal the entire
+				poem.
+			</p>
+
+			<p>Please follow the following format for your poetry submission:</p>
+
+			<p className="Game__format-example">{inputFormat}</p>
+
+			<RecentSubmission gameon={gameon} poem={poemList[poemList.length - 1]} />
+
+			<PlayerSubmissionForm
+				gameon={gameon}
+				addPoemCallback={addPoem}
+				player={player}
+				fields={FIELDS}
+			/>
+
+			<FinalPoem poems={poems} gameon={gameon} onPoemSubmit={onPoemSubmit} />
+		</div>
+	);
+};
 
 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;

src/components/PlayerSubmissionForm.css

@@ -35,6 +35,10 @@
   background-color: #FFE9E9;
 }
 
+.PlayerSubmissionFormt__input--valid {
+  background-color: white;
+}
+
 .PlayerSubmissionForm__input--invalid::placeholder {
   color: black;
 }

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 (
-    <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+const PlayerSubmissionForm = (props) => {
+	const [formFields, setFormFields] = useState({
+		adj1: "",
+		noun1: "",
+		adv: "",
+		verb: "",
+		adj2: "",
+		noun2: "",
+	});
 
-      <form className="PlayerSubmissionForm__form" >
+	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);
+	};
 
-        <div className="PlayerSubmissionForm__poem-inputs">
+	const onFormSubmit = (event) => {
+		event.preventDefault();
 
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
-          <input
-            placeholder="hm..."
-            type="text" />
+		props.addPoemCallback(formFields);
+		console.log(formFields);
 
-        </div>
+		setFormFields({
+			adj1: "",
+			noun1: "",
+			adv: "",
+			verb: "",
+			adj2: "",
+			noun2: "",
+		});
+	};
 
-        <div className="PlayerSubmissionForm__submit">
-          <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
-        </div>
-      </form>
-    </div>
-  );
-}
+	const makeMePink = (value) => {
+		return value === ""
+			? "PlayerSubmissionFormt__input--invalid"
+			: "PlayerSubmissionFormt__input--valid";
+	};
 
+	return (
+		!props.gameon && (
+			<div className="PlayerSubmissionForm" onSubmit={onFormSubmit}>
+				<h3>Player Submission Form for Player #{props.player}</h3>
+
+				<form className="PlayerSubmissionForm__form">
+					<div className="PlayerSubmissionForm__poem-inputs">
+						<p>The</p>
+						<input
+							className={makeMePink(formFields.adj1)}
+							placeholder="adjective"
+							type="text"
+							onChange={onInputChange}
+							value={formFields.adj1}
+							name={"adj1"}
+						/>
+						<input
+							className={makeMePink(formFields.noun1)}
+							placeholder="noun"
+							type="text"
+							onChange={onInputChange}
+							value={formFields.noun1}
+							name={"noun1"}
+						/>
+						<input
+							className={makeMePink(formFields.adv)}
+							placeholder="adverb"
+							type="text"
+							onChange={onInputChange}
+							value={formFields.adv}
+							name={"adv"}
+						/>
+						<input
+							className={makeMePink(formFields.verb)}
+							placeholder="verb"
+							type="text"
+							onChange={onInputChange}
+							value={formFields.verb}
+							name={"verb"}
+						/>
+						<p>the</p>
+						<input
+							className={makeMePink(formFields.adj2)}
+							placeholder="adjective"
+							type="text"
+							onChange={onInputChange}
+							value={formFields.adj2}
+							name={"adj2"}
+						/>
+						<input
+							className={makeMePink(formFields.noun2)}
+							placeholder="noun"
+							type="text"
+							onChange={onInputChange}
+							value={formFields.noun2}
+							name={"noun2"}
+						/>
+						<p>.</p>
+					</div>
+
+					<div className="PlayerSubmissionForm__submit">
+						<input
+							type="submit"
+							value="Submit Line"
+							className="PlayerSubmissionForm__submit-btn"
+						/>
+					</div>
+				</form>
+			</div>
+		)
+	);
+};
+
+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;