updated upload

5 files changed, 65 insertions, 23 deletions

diff --git a/src/components/Game.tsx b/src/components/Game.tsx
index 51d5b3e..89c8333 100644
--- a/src/components/Game.tsx
+++ b/src/components/Game.tsx
@@ -1,18 +1,39 @@
-//import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
+import { GameType } from "../types";
+import ReactMarkdown from 'react-markdown';
 
 //<Route path="/game/:game" element={<Game />} />
 
 //export default () => (
 export default function Games () {
 	const { game } = useParams();
+	const [gameData, setGameData] = useState<GameType>();
+
+	useEffect(() => {
+		const url = `${import.meta.env.VITE_API_TITLE}/api/v1/games/realtradam/${game}`;
+		fetch(url).then((response) => {
+			if (response.ok) {
+				return response.json();
+			}
+			throw new Error("Network response was not ok.");
+		}).then((response) => setGameData(response)); //.catch(() => navigate("/"));
+	}, [game]);
 //http://%{VITE_API_TITLE}/api/v1/game/realtradam/orc-arena-of-time/index.html
 	return(
 		<>
-			<div className="w-max flex grow shrink justify-center">
-				<div className="w-max flex flex-col gap-16 max-w-6xl shrink grow">
-					<div className="title font-bold text-6xl font-title">{game}</div>
+			<div className="flex grow shrink justify-center">
+				<div className="flex flex-col gap-16 max-w-6xl shrink grow">
+						<div className="flex justify-center">
+							<img style={{imageRendering: gameData?.img_rendering}} src={`${import.meta.env.VITE_API_TITLE}/api/v1/games_img/realtradam/${gameData?.titleSlug}.png?type=title`} className="gameTitleImg max-w-lg" />
+						</div>
 						<iframe style={{ aspectRatio: 1 }} className="bg-black aspect-square max-h-[90vh] rounded" src={`${import.meta.env.VITE_API_TITLE}/game/realtradam/${game}/index.html`} title={game}></iframe>
+						<div className="flex justify-center mt-32 p-8 overflow-y-auto rounded bg-stone-900 ">
+						<ReactMarkdown
+							className="prose prose-invert"
+							children={gameData?.description}
+						/>
+						</div>
 				</div>
 			</div>
 		</>
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 50a3fd7..6952f1e 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -13,7 +13,7 @@ export default function Layout ({userData}: userData)
 		<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">Tradam</div>
-					<div className="flex flex-col items-center gap-1 w-full">
+					<div className="flex flex-col items-center gap-1">
 							<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> }/>
 							<Button link={ <Link to="/games" 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">Games</div></Link> }/>
diff --git a/src/components/UploadGame.tsx b/src/components/UploadGame.tsx
index 690834d..8eaef13 100644
--- a/src/components/UploadGame.tsx
+++ b/src/components/UploadGame.tsx
@@ -123,32 +123,28 @@ export default function UploadGame () {
 					<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" />
+					<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" />
+					<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" />
+					<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" />
+					<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>
+					<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> }/>
diff --git a/src/index.css b/src/index.css
index 9af3266..72845f6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -158,3 +158,7 @@ a:hover .contact:first-child + .contact { opacity: 1; }
 		filter: drop-shadow(-10px 5px 4px rgba(0, 0, 0, 0.8));
 	}
 }
+
+pre {
+	max-width: 50vw;
+}
diff --git a/src/types.ts b/src/types.ts
index f28148b..0437cb4 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,5 +1,26 @@
 
 
 export type ImageRendering = "auto" | "crisp-edges" | "pixelated";
-export type GameType = { id: number, card_img: string, char_img: string, title_img: string, img_rendering: ImageRendering, titleSlug: string };
+export type Tag = {
+	id: number,
+	tag_type: string,
+	name: string,
+};
+export type GameType = {
+	id: number,
+	title: string,
+	titleSlug: string,
+	description: string,
+	github_link: string,
+	img_rendering: ImageRendering,
+	status: string,
+	order: number,
+	created_at: string,
+	updated_at: string,
+	user_id: number,
+	tags: Tag[],
+	card_img: string,
+	char_img: string,
+	title_img: string,
+};
 export type GameCardProps = { link: string, game: GameType };