diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Game.jsx | 13 | ||||
| -rw-r--r-- | src/components/GameCard.jsx | 6 | ||||
| -rw-r--r-- | src/components/Games.jsx | 20 |
3 files changed, 19 insertions, 20 deletions
diff --git a/src/components/Game.jsx b/src/components/Game.jsx index 7746767..a7bd007 100644 --- a/src/components/Game.jsx +++ b/src/components/Game.jsx @@ -1,10 +1,7 @@ import React, { useState, useEffect } from "react"; import { useParams } from "react-router-dom"; -//import { Link } from "react-router-dom"; -import GameCard from "./GameCard"; -import Button from "./Button"; -//<Route path="/games/:user/:game" element={<Game />} /> +//<Route path="/game/:game" element={<Game />} /> //export default () => ( export default function Games () { @@ -12,10 +9,10 @@ export default function Games () { //http://%{VITE_API_TITLE}/api/v1/game/realtradam/orc-arena-of-time/index.html return( <> - <div> - <div className="flex flex-col gap-16 max-w-6xl shrink"> - <div className="title font-bold text-6xl font-title">Orc: Arena of Time</div> - <iframe style={{ aspectRatio: 1 }} className="bg-black aspect-square max-h-[90vh] rounded" src={`${import.meta.env.VITE_API_TITLE}api/v1/game/realtradam/orc-arena-of-time/index.html`} title={game}></iframe> + <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> + <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> </div> </> diff --git a/src/components/GameCard.jsx b/src/components/GameCard.jsx index 82ad423..ac63160 100644 --- a/src/components/GameCard.jsx +++ b/src/components/GameCard.jsx @@ -15,10 +15,10 @@ export default function GameCard ({ link = "./", width = "72", game = { card_img <a href={ link } className="block w-min pt-10 px-1" target="_blank"> <div className="gameCard"> <div className="gameCardWrapper"> - <img src={`${import.meta.env.VITE_API_TITLE}/api/v1/games_img/realtradam/${game.titleSlug}.png?type=card`} className="gameCardCoverImg" /> + <img style={{imageRendering: game.img_rendering}} src={`${import.meta.env.VITE_API_TITLE}/api/v1/games_img/realtradam/${game.titleSlug}.png?type=card`} className="gameCardCoverImg" /> </div> - <img src={`${import.meta.env.VITE_API_TITLE}/api/v1/games_img/realtradam/${game.titleSlug}.png?type=title`} className="gameTitleImg p-5%" /> - <img src={`${import.meta.env.VITE_API_TITLE}/api/v1/games_img/realtradam/${game.titleSlug}.png?type=char`} className="gameCharacterImg" /> + <img style={{imageRendering: game.img_rendering}} src={`${import.meta.env.VITE_API_TITLE}/api/v1/games_img/realtradam/${game.titleSlug}.png?type=title`} className="gameTitleImg p-5%" /> + <img style={{imageRendering: game.img_rendering}} src={`${import.meta.env.VITE_API_TITLE}/api/v1/games_img/realtradam/${game.titleSlug}.png?type=char`} className="gameCharacterImg" /> </div> </a> </> diff --git a/src/components/Games.jsx b/src/components/Games.jsx index a0646be..173b3b7 100644 --- a/src/components/Games.jsx +++ b/src/components/Games.jsx @@ -16,13 +16,14 @@ export default function Games () { }).then((response) => setGames(response))//.catch(() => navigate("/")); }, []); const allGames = games.map((game) => ( - <GameCard game={game} key={game.id}/> + <GameCard link={`/game/${game.titleSlug}`} game={game} key={game.id}/> )); var handleSubmit = (e) => { e.preventDefault() //stops submit from happening const form = e.target; const formData = new FormData() formData.append('game[title]', form.title.value) + formData.append('game[img_rendering]', form.img_rendering.value) for(let i =0; i < form.game_files.files.length; i++) { formData.append('game[game_files][]', form.game_files.files[i], form.game_files.files[i].value); @@ -35,7 +36,7 @@ export default function Games () { console.log(pair[0] + ', ' + pair[1]) }; - fetch('${import.meta.env.VITE_API_TITLE}/api/v1/games', { + fetch(`${import.meta.env.VITE_API_TITLE}/api/v1/games`, { method: 'post', body: formData, }); @@ -54,6 +55,13 @@ export default function Games () { <input type="text" name="title" /> </div> <div> + <label>Image Rendering</label> + <select name="img_rendering"> + <option value="pixelated">Pixelated</option> + <option value="crisp-edges">Crisp Edges</option> + </select> + </div> + <div> <label>Files</label> <input type="file" multiple="multiple" name="game_files" /> </div> @@ -77,14 +85,8 @@ export default function Games () { </div> </div> </div> - { allGames } <div className="flex flex-row flex-wrap gap-20 justify-around"> - <GameCard /> - <GameCard /> - <GameCard /> - <GameCard /> - <GameCard /> - <GameCard /> + { allGames } </div> </div> </div> |