blob: 89c8333457000ff845eff7239cfbf7dd6a8cf7e3 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
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="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>
</>
);
}
|
