From c72edf37baf307322b49b7c75c59d077dda9bc83 Mon Sep 17 00:00:00 2001
From: realtradam <github@tradam.dev>
Date: Sun, 16 Jun 2024 16:49:14 -0400
Subject: updated upload

---
 src/components/Game.tsx       | 29 +++++++++++++++++++++++++----
 src/components/Layout.tsx     |  2 +-
 src/components/UploadGame.tsx | 30 +++++++++++++-----------------
 3 files changed, 39 insertions(+), 22 deletions(-)

(limited to 'src/components')

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> }/>
-- 
cgit v1.2.3