begin implementing game file upload and also styling

3 files changed, 80 insertions, 16 deletions

diff --git a/app/javascript/components/Button.jsx b/app/javascript/components/Button.jsx
new file mode 100644
index 0000000..f9505f8
--- /dev/null
+++ b/app/javascript/components/Button.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+export default function Button ({ link }) 
+{
+	return (
+		<>
+		<div className="animated_card w-36 h-16 relative grid rounded-[5px] cursor-pointer overflow-hidden place-items-center before:content-[''] before:absolute before:w-[15%] before:bg-amber-400 before:rotate-[32deg] before:h-[1%] before:transition-all before:duration-500 before:ease-linear before:animate-[buttonSpin_1.5s_linear_infinite] hover:before:h-[2800%] hover:before:transition-all hover:before:duration-0 hover:before:ease-linear after:absolute after:content-[''] after:bg-stone-800 after:rounded-[5px] after:inset-0 after:transition-all after:duration-200 after:ease-in-out hover:after:inset-[5px] hover:after:transition-all hover:after:duration-200 hover:after:ease-in-out">
+			<div className="z-[3]">
+				{ link }
+			</div>
+		</div>
+		</>
+	)
+};
diff --git a/app/javascript/components/Home.jsx b/app/javascript/components/Home.jsx
index efe3cd5..6ead779 100644
--- a/app/javascript/components/Home.jsx
+++ b/app/javascript/components/Home.jsx
@@ -1,8 +1,27 @@
-import React from "react";
+import React, { } from "react";
 import { Link } from "react-router-dom";
 
-export default () => (
-  <div className="vh-100 primary-color d-flex align-items-center justify-content-center">
+//export default () => (
+export default function Home () {
+  var handleSubmit = (e) => {
+    e.preventDefault() //stops submit from happening
+
+      const formData = new FormData()
+      formData.append('game[title]', e.target.title.value)
+      formData.append('game[game_file]', e.target.game_file.files[0], e.target.game_file.value)
+
+for (var pair of formData.entries()) {
+  console.log(pair[0] + ', ' + pair[1])
+};
+
+	fetch('http://127.0.0.1:3000/api/v1/games', {
+		method: 'post',
+		body: formData,
+	});
+  }
+  return(
+	  <>
+	  <div className="vw-100 vh-100 primary-color d-flex align-items-center justify-content-center">
     <div className="jumbotron jumbotron-fluid bg-transparent">
       <div className="container secondary-color">
         <h1 className="display-4">Games!</h1>
@@ -17,14 +36,17 @@ export default () => (
         >
           View Games
         </Link>
-        <Link
-          to="/blogs"
-          className="btn btn-lg custom-button"
-          role="button"
-        >
-          View Blogs
-        </Link>
       </div>
+	<form onSubmit={handleSubmit} action="/upload" method="post">
+		<label>Title</label>
+		<input type="text" name="title" />
+		<label>File</label>
+		<input type="file" name="game_file" />
+
+		<button type="submit">submit</button>
+	</form>
     </div>
   </div>
+	  </>
 );
+};
diff --git a/app/javascript/components/Layout.jsx b/app/javascript/components/Layout.jsx
index 6bf698a..0c5d5b6 100644
--- a/app/javascript/components/Layout.jsx
+++ b/app/javascript/components/Layout.jsx
@@ -1,15 +1,42 @@
 import React from "react";
 import { Outlet, Link } from "react-router-dom";
-
+import Button from "./Button";
 export default function Layout ({userData}) 
 {
 	console.log(userData);
 	//const [userData, setUserData] = useState({ name: "" });
 	return (
 	<>
-		<div className="flex flex-row h-screen bg-slate-800 text-slate-100">
-		<nav className="flex flex-row h-full w-64 p-4 gap-4 items-center">
-			<div className="h-full flex flex-col">
+		<div id="page" className="star flex flex-row min-h-screen bg-amber-400 text-stone-950 bg-star bg-repeat bg-[length:170px_170px]">
+			<div id="sidebar" className="flex flex-row h-screen fixed w-64 items-center bg-stone-800">
+				<nav id="sidebar-content" className=" text-stone-50 p-6 w-full h-screen">
+					{ userData.name ? <div> Logged in as: {userData.name} </div> : <a href="https://github.com/login/oauth/authorize?client_id=74468ad0847e527262d9"> Login with Github </a> }
+					<div className="text-4xl py-12">Adam Malczewski</div>
+					<div className="flex flex-col items-center gap-1 w-full">
+							<Button link={ <Link to="/" className="text-stone-50 bg-transparent" role="button">Home</Link> }/>
+							<Button link={ <Link to="/blogs" className="text-stone-50 bg-transparent" role="button">Blog</Link> }/>
+							<Button link={ <Link to="/games" className="text-stone-50 bg-transparent" role="button">Games</Link> }/>
+							<Button link={ <div className="text-stone-50 bg-transparent w-36 h-16 flex justify-center items-center">
+								<a id="contact" href="mailto:[email protected]" className="w-36 h-16 relative text-center whitespace-nowrap flex p-4">
+								<span className="contact pt-1 pl-[27px]">Contact</span>
+								<span className="contact pt-[7px] left-0 pl-3 text-sm">[email protected]</span>
+								</a>	
+								</div> }/>
+					</div>
+				</nav>
+				<div id="sawtooth-wrap" className="sawtooth-left-wrap h-full">
+					<div id="sawtooth" className="sawtooth-left w-4 h-full bg-amber-400"></div>
+				</div>
+			</div>
+			<div id="fake-sidebar" className="w-64 invisible"></div>
+			<div id="radial-wrap" className="flex-grow">
+				<div id="content" className=""></div>
+			</div>
+		</div>
+
+		<div style={{display: 'none'}} className="">
+		<nav className="">
+			<div className="h-full flex flex-col bg-stone-900 text-stone-50">
 		{ userData.name ? <div> Logged in as: {userData.name} </div> : <a href="https://github.com/login/oauth/authorize?client_id=74468ad0847e527262d9"> Login with Github </a> } 
 				<div className="text-4xl py-12">Adam Malczewski</div>
 				<div className="flex flex-row justify-center w-full block grow">
@@ -46,11 +73,11 @@ export default function Layout ({userData})
 				</div>
 			</div>
 			</div>
-			<div className="h-3/4 w-0.5 bg-slate-500 block rounded-full">
+			<div className="sawtooth-right w-6 h-full block bg-zinc-800">
 			</div>
 		</nav>
 	<Outlet />
 		</div>
-</>
+		</>
 	)
 };