updated upload

1 files changed, 25 insertions, 4 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>
 		</>