diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Game.tsx | 29 | ||||
| -rw-r--r-- | src/components/Layout.tsx | 2 | ||||
| -rw-r--r-- | src/components/UploadGame.tsx | 30 | ||||
| -rw-r--r-- | src/index.css | 4 | ||||
| -rw-r--r-- | src/types.ts | 23 |
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 }; |