add seperate uploading page and update match backend functionality

10 files changed, 196 insertions, 82 deletions

diff --git a/src/components/App.jsx b/src/components/App.jsx
deleted file mode 100644
index da6a873..0000000
--- a/src/components/App.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-import Routes from "../routes";
-
-export default (props) => {
-  return (<Routes />);
-}
-  
diff --git a/src/components/Blogs.jsx b/src/components/Blogs.tsx
index 2dc8f27..863aa73 100644
--- a/src/components/Blogs.jsx
+++ b/src/components/Blogs.tsx
@@ -1,9 +1,11 @@
-import React, { useState, useEffect } from "react";
+//import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
 
 const Blogs = () => {
 	const navigate = useNavigate();
-	const [blogs, setBlogs] = useState([]);
+	const [blogs, setBlogs] = useState<any[]>([]); // eslint-disable-line @typescript-eslint/no-explicit-any
+
 
 	useEffect(() => {
 		const url = `${import.meta.env.VITE_API_TITLE}/api/v1/blogs/index`;
@@ -13,7 +15,7 @@ const Blogs = () => {
 			}
 			throw new Error("Network response was not ok.");
 		}).then((response) => setBlogs(response)).catch(() => navigate("/"));
-	}, []);
+	}, [navigate]);
 
 	const allBlogs = blogs.map((blog, index) => (
 		<div key={index} className="col-md-6 col-lg-4">
diff --git a/src/components/Button.jsx b/src/components/Button.tsx
index de199d0..b12b833 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.tsx
@@ -1,15 +1,16 @@
 import React from "react";
-import { Link } from "react-router-dom";
+//import { Link } from "react-router-dom";
 
-export default function Button ({ link, width = 36, height = 16, spinner = 4 }) 
+type ButtonProps = {link: React.ReactElement, width?: number, height?: number, spinner?: number};
+export default function Button ({ link , width = 36, height = 16, spinner = 4 }: ButtonProps) 
 {
 	return (
 		<>
 		<div className={`w-${ width } h-${ height } relative grid rounded-[5px] cursor-pointer overflow-hidden place-items-center before:content-[''] before:absolute before:w-${ spinner } 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]">
+<div className="z-[3]">
 				{ link }
 			</div>
 		</div>
 		</>
-	)
-};
+	);
+}
diff --git a/src/components/Game.jsx b/src/components/Game.tsx
index a7bd007..51d5b3e 100644
--- a/src/components/Game.jsx
+++ b/src/components/Game.tsx
@@ -1,11 +1,11 @@
-import React, { useState, useEffect } from "react";
+//import React, { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
 
 //<Route path="/game/:game" element={<Game />} />
 
 //export default () => (
 export default function Games () {
-	let { user, game } = useParams();
+	const { game } = useParams();
 //http://%{VITE_API_TITLE}/api/v1/game/realtradam/orc-arena-of-time/index.html
 	return(
 		<>
@@ -17,4 +17,4 @@ export default function Games () {
 			</div>
 		</>
 	);
-};
+}
diff --git a/src/components/GameCard.jsx b/src/components/GameCard.tsx
index ac63160..1f5e766 100644
--- a/src/components/GameCard.jsx
+++ b/src/components/GameCard.tsx
@@ -1,5 +1,6 @@
-import React from "react";
+//import React from "react";
 //import { Link } from "react-router-dom";
+import { GameCardProps } from "../types";
 
 //game = {
 //	card_img: "",
@@ -7,7 +8,7 @@ import React from "react";
 //	title_img: ""
 //}
 
-export default function GameCard ({ link = "./", width = "72", game = { card_img: "https://ggayane.github.io/css-experiments/cards/dark_rider-cover.jpg", char_img: "https://ggayane.github.io/css-experiments/cards/dark_rider-character.png", title_img: "https://ggayane.github.io/css-experiments/cards/dark_rider-title.png" } }) 
+export default function GameCard ({ link, game }: GameCardProps) 
 {
 	
 	return (
@@ -22,5 +23,5 @@ export default function GameCard ({ link = "./", width = "72", game = { card_img
 			</div>
 		</a>
 		</>
-	)
-};
+	);
+}
diff --git a/src/components/Games.jsx b/src/components/Games.tsx
index 173b3b7..cfa6925 100644
--- a/src/components/Games.jsx
+++ b/src/components/Games.tsx
@@ -1,11 +1,14 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect, FormEvent } from "react";
 //import { Link } from "react-router-dom";
 import GameCard from "./GameCard";
 import Button from "./Button";
+import { GameType } from "../types";
+
 
-//export default () => (
 export default function Games () {
-	const [games, setGames] = useState([]);
+	const [games, setGames] = useState<GameType[]>([]);
+
+	// old method
 	useEffect(() => {
 		const url = `${import.meta.env.VITE_API_TITLE}/api/v1/games`;
 		fetch(url).then((response) => {
@@ -13,34 +16,48 @@ export default function Games () {
 				return response.json();
 			}
 			throw new Error("Network response was not ok.");
-		}).then((response) => setGames(response))//.catch(() => navigate("/"));
+		}).then((response) => setGames(response)); //.catch(() => navigate("/"));
 	}, []);
+
 	const allGames = games.map((game) => (
 		<GameCard link={`/game/${game.titleSlug}`} game={game} key={game.id}/>
 	));
-	var handleSubmit = (e) => {
-		e.preventDefault() //stops submit from happening
-		const form = e.target;
-		const formData = new FormData()
-		formData.append('game[title]', form.title.value)
-		formData.append('game[img_rendering]', form.img_rendering.value)
-		for(let i =0; i < form.game_files.files.length; i++)
-		{
-		formData.append('game[game_files][]', form.game_files.files[i], form.game_files.files[i].value);
-		}
-		formData.append('game[card_img]', form.card_img.files[0], form.card_img.value);
-		formData.append('game[char_img]', form.char_img.files[0], form.char_img.value);
-		formData.append('game[title_img]', form.title_img.files[0], form.title_img.value);
 
-		for (var pair of formData.entries()) {
-			console.log(pair[0] + ', ' + pair[1])
+	const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+		e.preventDefault(); //stops submit from happening
+
+		const target = e.target as typeof e.target & {
+			title: { value: string };
+			img_rendering: { value: string };
+			//game_files: { files: FileList };
+			zip: { value: string, files: FileList };
+			card_img: { value: string, files: FileList };
+			char_img: { value: string, files: FileList };
+			title_img: { value: string, files: FileList };
 		};
 
+		//const form = e.target;
+		const formData = new FormData();
+		formData.append('game[title]', target.title.value);
+		formData.append('game[img_rendering]', target.img_rendering.value);
+		//for(let i =0; i < target.game_files.files.length; i++)
+		//{
+		//formData.append('game[game_files][]', target.game_files.files[i], target.game_files.files[i].name);
+		//}
+		formData.append('game[zip]', target.zip.files[0], target.zip.value);
+		formData.append('game[card_img]', target.card_img.files[0], target.card_img.value);
+		formData.append('game[char_img]', target.char_img.files[0], target.char_img.value);
+		formData.append('game[title_img]', target.title_img.files[0], target.title_img.value);
+
+		//for (var pair of formData.entries()) {
+		//	//console.log(pair[0] + ', ' + pair[1])
+		//};
+
 		fetch(`${import.meta.env.VITE_API_TITLE}/api/v1/games`, {
 			method: 'post',
 			body: formData,
 		});
-	}
+	};
 	return(
 		<>
 		<div>
@@ -61,9 +78,13 @@ export default function Games () {
 					<option value="crisp-edges">Crisp Edges</option>
 				</select>
 				</div>
-				<div>
+				{ /*<div>
 				<label>Files</label>
-				<input type="file" multiple="multiple" name="game_files" />
+				<input type="file" multiple name="game_files" />
+				</div> */ }
+				<div>
+				<label>Zip</label>
+				<input type="file" name="zip" />
 				</div>
 				<div>
 				<label>Card Image</label>
@@ -92,4 +113,4 @@ export default function Games () {
 		</div>
 		</>
 	);
-};
+}
diff --git a/src/components/Home.jsx b/src/components/Home.tsx
index c1fb689..7430549 100644
--- a/src/components/Home.jsx
+++ b/src/components/Home.tsx
@@ -1,25 +1,7 @@
-import React, { } from "react";
 //import { Link } from "react-router-dom";
-import GameCard from "./GameCard";
 
 //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('${import.meta.env.VITE_API_TITLE}/api/v1/games', {
-			method: 'post',
-			body: formData,
-		});
-	}
 	return(
 		<>
 		<div>
@@ -40,4 +22,4 @@ Ea optio vitae culpa voluptatem consectetur. Ab quisquam sed ipsum. Perspiciatis
 		</div>
 		</>
 	);
-};
+}
diff --git a/src/components/Layout.jsx b/src/components/Layout.tsx
index 06df03a..50a3fd7 100644
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.tsx
@@ -1,11 +1,10 @@
-import React from "react";
 import { Outlet, Link } from "react-router-dom";
 import Button from "./Button";
-export default function Layout ({userData}) 
+
+export type userData = { userData: { name: string } };
+
+export default function Layout ({userData}: userData) 
 {
-	console.log(userData);
-	//const [userData, setUserData] = useState({ name: "" });
-	
 	return (
 	<>
 		<div id="page" className="star flex flex-row min-h-screen max-h-screen bg-amber-400 text-stone-950 text-xl bg-star bg-repeat bg-[length:170px_170px]">
@@ -13,7 +12,7 @@ export default function Layout ({userData})
 				<nav id="sidebar-content" dir="rtl" className="text-stone-50 p-6 w-full h-screen overflow-y-auto overflow-x-hidden">
 		<div dir='ltr'>
 					{ userData.name ? <div className="flex items-end gap-2 pb-2"> <div className="text-xs"> Logged in as: </div> <div>{userData.name}</div> </div> : <a href="https://github.com/login/oauth/authorize?client_id=74468ad0847e527262d9" className="pb-2"> Login with Github </a> }
-					<div className="text-3xl py-10 text-center font-title">Adam Malczewski</div>
+					<div className="text-3xl py-10 text-center font-title">Tradam</div>
 					<div className="flex flex-col items-center gap-1 w-full">
 							<Button link={ <Link to="/" className="absolute flex top-0 left-0 w-36 h-16 text-stone-50 bg-transparent justify-center items-center" role="button"><div className="h-min">About Me</div></Link> }/>
 							<Button link={ <Link to="/blogs" className="absolute flex top-0 left-0 w-36 h-16 text-stone-50 bg-transparent justify-center items-center" role="button"><div className="h-min">Blog</div></Link> }/>
@@ -45,5 +44,5 @@ export default function Layout ({userData})
 			</div>
 		</div>
 		</>
-	)
-};
+	);
+}
diff --git a/src/components/UploadGame.tsx b/src/components/UploadGame.tsx
new file mode 100644
index 0000000..4801654
--- /dev/null
+++ b/src/components/UploadGame.tsx
@@ -0,0 +1,125 @@
+import { useState, FormEvent } from "react";
+import Button from "./Button";
+import ReactMarkdown from 'react-markdown';
+
+
+export default function UploadGame () {
+	const [markdownInput, setMarkdownInput] = useState<string>("");
+
+	const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+		e.preventDefault(); //stops submit from happening
+
+		const target = e.target as typeof e.target & {
+			title: { value: string };
+			img_rendering: { value: string };
+			github_link: { value: string };
+			//game_files: { files: FileList };
+			zip: { value: string, files: FileList };
+			card_img: { value: string, files: FileList };
+			char_img: { value: string, files: FileList };
+			title_img: { value: string, files: FileList };
+			status: { value: number };
+		};
+
+		const formData = new FormData();
+		formData.append('game[title]', target.title.value);
+		formData.append('game[img_rendering]', target.img_rendering.value);
+		//for(let i =0; i < target.game_files.files.length; i++)
+		//{
+		//formData.append('game[game_files][]', target.game_files.files[i], target.game_files.files[i].name);
+		//}
+		formData.append('game[zip]', target.zip.files[0], target.zip.value);
+		formData.append('game[card_img]', target.card_img.files[0], target.card_img.value);
+		formData.append('game[char_img]', target.char_img.files[0], target.char_img.value);
+		formData.append('game[title_img]', target.title_img.files[0], target.title_img.value);
+		formData.append('game[github_link]', target.github_link.value);
+		formData.append('game[status]', `${target.status.value}`);
+
+		fetch(`${import.meta.env.VITE_API_TITLE}/api/v1/games`, {
+			credentials: 'include',
+			method: 'post',
+			body: formData,
+		});
+	};
+	return(
+		<>
+		<div>
+		<div className="flex flex-col gap-16 max-w-6xl shrink">
+			<div className="title font-bold text-6xl font-title">Upload Game</div>
+			<div className="">
+				<div className="jumbotron jumbotron-fluid bg-transparent">
+					<div className="container secondary-color">
+				<form onSubmit={handleSubmit} action="/upload" method="post" className="flex flex-col gap-4">
+				<div className="flex flex-col">
+				<label>Title</label>
+				<input type="text" name="title" />
+				</div>
+				<div className="flex flex-col gap-2">
+				<div className="flex flex-col">
+				<label>Description</label>
+				<textarea
+					className="min-h-32 grow p-4"
+					name="description"
+					value={markdownInput}
+					onChange={(e) => setMarkdownInput(e.target.value)}
+				/>
+				</div>
+				<div className="flex flex-col">
+				<label>Preview</label>
+				<ReactMarkdown
+					className="prose min-h-32 bg-white p-4"
+					children={markdownInput}
+				/>
+				</div>
+				</div>
+				<div className="flex flex-col">
+				<label>Github Link</label>
+				<input type="text" name="github_link" />
+				</div>
+				<div className="flex flex-col">
+				<label>Image Rendering</label>
+				<select name="img_rendering">
+					<option value="crisp-edges">Crisp Edges</option>
+					<option value="pixelated">Pixelated</option>
+				</select>
+				</div>
+				{ /*<div>
+				<label>Files</label>
+				<input type="file" multiple name="game_files" />
+				</div> */ }
+				<div className="flex flex-col">
+				<label>Game Zip</label>
+				<input type="file" name="zip" />
+				</div>
+				<div className="flex flex-col">
+				<label>Card Image</label>
+				<input type="file" name="card_img" />
+				</div>
+				<div className="flex flex-col">
+				<label>Character Image</label>
+				<input type="file" name="char_img" />
+				</div>
+				<div className="flex flex-col">
+				<label>Title Image</label>
+				<input type="file" name="title_img" />
+				</div>
+				<div className="flex flex-col">
+				<label>Status</label>
+				<select name="status">
+					<option value="0">Draft</option>
+					<option value="1">Published</option>
+				</select>
+				</div>
+				<div style={{ boxShadow: 'rgba(255,255,255,.1) 0 1px 0,rgba(0,0,0,.8) 0 1px 7px 0 inset' }} className="p-[5px] w-min h-min bg-stone-800 rounded-[5px]">
+					<Button width={ 28 } height={ 12 } link={ <button type="submit" className="w-28 h-12 bg-stone-transparent text-stone-50 rounded">Submit</button> }/>
+				</div>
+				
+				</form>
+				</div>
+		</div>
+			</div>
+		</div>
+		</div>
+		</>
+	);
+}
diff --git a/src/components/index.jsx b/src/components/index.jsx
deleted file mode 100644
index 0044916..0000000
--- a/src/components/index.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App";
-
-document.addEventListener("turbo:load", () => {
-	const root = createRoot(
-		document.body.appendChild(document.createElement("div"))
-	);
-	root.render(<App />);
-});