improve games

5 files changed, 92 insertions, 86 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>
diff --git a/src/index.css b/src/index.css
index 8ea4fad..9af3266 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,96 +13,102 @@
  */
 .gameCard {
 	aspect-ratio: 5/7;
-  width: 300px;
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-  perspective: 2500px;
+	width: 300px;
+	position: relative;
+	display: flex;
+	justify-content: center;
+	align-items: flex-end;
+	perspective: 2500px;
 }
 
 .gameCardCoverImg {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  image-rendering: pixelated;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	/*image-rendering: pixelated;*/
+	border-radius: 5px;
 }
 
 .gameCardWrapper {
-  transition: all 0.5s;
-  position: absolute;
-  width: 100%;
-  z-index: -1;
-  box-shadow: -15px 15px 32px -8px rgba(0, 0, 0, 0.75)
+	transition: all 0.5s;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	z-index: -1;
+	box-shadow: -15px 15px 32px -8px rgba(0, 0, 0, 0.75);
+	border-radius: 5px;
 }
 
 .gameCard:hover .gameCardWrapper {
-  transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
-  box-shadow: -10px 35px 32px -8px rgba(0, 0, 0, 0.75);
-  -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
-  -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
+	transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
+	box-shadow: -10px 35px 32px -8px rgba(0, 0, 0, 0.75);
+	-webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
+	-moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
 }
 
 .gameCardWrapper::before,
 .gameCardWrapper::after {
-  content: "";
-  opacity: 0;
-  width: 100%;
-  height: 80px;
-  transition: all 0.5s;
-  position: absolute;
-  left: 0;
+	content: "";
+	opacity: 0;
+	width: 100%;
+	height: 80px;
+	transition: all 0.5s;
+	position: absolute;
+	left: 0;
+	border-radius: 5px;
 }
 .gameCardWrapper::before {
-  top: 0;
-  height: 100%;
-  background-image: linear-gradient(
-    to top,
-    transparent 46%,
-    rgba(12, 13, 19, 0.5) 68%,
-    rgba(12, 13, 19) 97%
-  );
+	top: 0;
+	height: 100%;
+	background-image: linear-gradient(
+	to top,
+	transparent 46%,
+	rgba(12, 13, 19, 0.5) 68%,
+	rgba(12, 13, 19) 97%
+	);
+	border-radius: 5px;
 }
 .gameCardWrapper::after {
-  bottom: 0;
-  opacity: 1;
-  background-image: linear-gradient(
-    to bottom,
-    transparent 46%,
-    rgba(12, 13, 19, 0.5) 68%,
-    rgba(12, 13, 19) 97%
-  );
+	bottom: 0;
+	opacity: 1;
+	background-image: linear-gradient(
+	to bottom,
+	transparent 46%,
+	rgba(12, 13, 19, 0.5) 68%,
+	rgba(12, 13, 19) 97%
+	);
+	border-radius: 5px;
 }
 
 .gameCard:hover .gameCardWrapper::before,
 .gameCardWrapper::after {
-  opacity: 1;
+	opacity: 1;
 }
 
 .gameCard:hover .gameCardWrapper::after {
-  height: 120px;
+	height: 120px;
 }
 .gameTitleImg {
-  width: 100%;
-  transition: transform 0.5s;
-  image-rendering: pixelated;
+	width: 100%;
+	transition: transform 0.5s;
+	/*image-rendering: pixelated;*/
 }
 .gameCard:hover .gameTitleImg {
-  transform: translate3d(0%, -50px, 100px);
+	transform: translate3d(0%, -50px, 100px);
 }
 
 .gameCharacterImg {
-  width: 100%;
-  opacity: 0;
-  transition: all 0.5s;
-  position: absolute;
-  z-index: -1;
-  image-rendering: pixelated;
+	width: 100%;
+	opacity: 0;
+	transition: all 0.5s;
+	position: absolute;
+	z-index: -1;
+	/*image-rendering: pixelated;*/
 }
 
 .gameCard:hover .gameCharacterImg {
-  opacity: 1;
-  transform: translate3d(0%, -30%, 100px);
+	opacity: 1;
+	transform: translate3d(0%, -30%, 100px);
 }
 
 @keyframes pan {
@@ -123,19 +129,19 @@
 }
 
 @keyframes buttonSpin {
-  from {
-    transform: rotate(32deg);
-  }
-  to {
-    transform: rotate(calc(360deg + 32deg));
-    filter: hue-rotate(360deg);
-  }
+	from {
+		transform: rotate(32deg);
+	}
+	to {
+		transform: rotate(calc(360deg + 32deg));
+		filter: hue-rotate(360deg);
+	}
 }
 
 .contact { transition: opacity 1s ease; position: absolute;}
 .contact + .contact,
- a:hover .contact:first-child { opacity: 0; } 
- a:hover .contact:first-child + .contact { opacity: 1; }
+a:hover .contact:first-child { opacity: 0; } 
+a:hover .contact:first-child + .contact { opacity: 1; }
 .contact + .contact { pointer-events: none; }
 
 @layer utilities {
diff --git a/src/routes/index.jsx b/src/routes/index.jsx
index 5809fbb..67f76a7 100644
--- a/src/routes/index.jsx
+++ b/src/routes/index.jsx
@@ -29,7 +29,8 @@ export default function index()
 					<Route index element={<Home />} />
 					<Route path="/blogs" element={<Blogs />} />
 					<Route path="/games" element={<Games />} />
-					<Route path="/games/:user/:game" element={<Game />} />
+					{/*<Route path="/games/upload" element={<GamesUpload />} />*/}
+					<Route path="/game/:game" element={<Game />} />
 				</Route>
 			</Routes>
 		</Router>