diff options
Diffstat (limited to 'src/components/Game.tsx')
| -rw-r--r-- | src/components/Game.tsx | 29 |
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> </> |