From 7a38eef00de0bb35565dda3ddb1efa748c22ea47 Mon Sep 17 00:00:00 2001
From: realtradam <github@tradam.dev>
Date: Thu, 23 May 2024 16:55:59 -0400
Subject: improve games

---
 src/components/Game.jsx     | 13 +++++--------
 src/components/GameCard.jsx |  6 +++---
 src/components/Games.jsx    | 20 +++++++++++---------
 3 files changed, 19 insertions(+), 20 deletions(-)

(limited to 'src/components')

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>
-- 
cgit v1.2.3