Time - Alex

src/App.css

@@ -6,6 +6,7 @@
   grid-template-columns: 2fr 3fr;
   align-items: flex-end;
   margin-bottom: 3rem;
+  border-bottom: dashed;
 }
 
 .App__intro-text {

src/App.js

@@ -3,6 +3,7 @@ import './App.css';
 import Game from './components/Game.js';
 
 const App = () => {
+  console.log("--APP");
   return (
     <div className="App">
       <header className="App__header">

src/components/FinalPoem.css

@@ -8,6 +8,7 @@
 
   padding: 1rem;
   border: 2px black solid;
+  border: dashed;
   box-shadow: 5px 10px black;
   transition: 0.25s;
 }
@@ -17,5 +18,5 @@
 }
 
 .FinalPoem__poem {
-  border-bottom: 2px gray dashed;
+  border-bottom: 2px gray;
 }

src/components/Game.css

@@ -1,4 +1,4 @@
 .Game__format-example {
   text-align: center;
   font-style: italic;
-}
+}

src/components/PlayerSubmissionForm.css

@@ -4,7 +4,7 @@
 
 .PlayerSubmissionForm__form {
   margin: 2rem auto 3rem auto;
-}
+}s
 
 .PlayerSubmissionForm__poem-inputs {
   display: flex;
@@ -23,16 +23,17 @@
 
   padding: 0.5rem;
   border: 2px black solid;
+  border-style: dashed;
   box-shadow: 5px 10px black;
   transition: 0.25s;
 }
 
 .PlayerSubmissionForm__submit-btn:hover {
-  background-color: tomato;
+  background-color: rgb(116, 254, 212);
 }
 
 .PlayerSubmissionFormt__input--invalid {
-  background-color: #FFE9E9;
+  background-color: rgb(254, 124, 124);
 }
 
 .PlayerSubmissionForm__input--invalid::placeholder {

src/components/PlayerSubmissionForm.js

@@ -1,31 +1,101 @@
 import React, { useState } from 'react';
 import './PlayerSubmissionForm.css';
+import PropTypes from 'prop-types'; 
 
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = (props) => {
+
+  const [form, setFormTemplate] = useState(
+    {
+      adjOne: "",
+      nounOne: "",
+      advOne: "",
+      verbOne: "",
+      adjTwo: "",
+      nounTwo: ""
+    }
+  );
+
+  const [poet, setPoet] = useState(1)
+
+  const poetCount = () => {
+    setPoet (poet++);
+  };
+
+  const onClickSubmit = (event) => {
+    event.preventDefault();
+    console.log("Your poem has been submitted.")
+    //...
+  };
+
+  //Things this file needs to do:
+  //Send a poem submission into a data collection in Game.js 
+  //Reset the state of the form fields so they're back to placeholder values after onClickSubmit. 
+  //
+
+
+
+
+
+
+
+
+
+  const render = () => {
   return (
     <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
-
+      <h3>Player Submission Form for Player #{/*poetCount()*/} :</h3>
       <form className="PlayerSubmissionForm__form" >
-
         <div className="PlayerSubmissionForm__poem-inputs">
+            <input 
+            name="adjOne"
+            placeholder="Adjective"
+            type="text"
+            />
 
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
-          <input
-            placeholder="hm..."
-            type="text" />
+            <input
+              name="nounOne"
+              placeholder="Noun"
+              type="text"
+            />
 
+            <input
+              name="advOne"
+              placeholder="Adverb"
+              type="text"
+            />
+
+            <input
+              name="verbOne"
+              placeholder="Verb"
+              type="text"
+            />
+
+            <input
+              name="adjTwo"
+              placeholder="Adjective"
+              type="text"
+            />
+
+            <input
+              name="nounTwo"
+              placeholder="Noun"
+              type="text"
+            />
         </div>
 
         <div className="PlayerSubmissionForm__submit">
-          <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
+          <input 
+          type="submit" 
+          value="Submit Line" 
+          className="PlayerSubmissionForm__submit-btn" />
         </div>
+
       </form>
     </div>
   );
+  }
 }
 
 
+
 export default PlayerSubmissionForm;

src/components/RecentSubmission.js

@@ -4,7 +4,7 @@ import './RecentSubmission.css';
 const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
-      <h3>The Most Recent Submission</h3>
+      <h3>The Most Recent Submission:</h3>
       <p className="RecentSubmission__submission">{  }</p>
     </div>
   );