From e317bbe75a46ef3bf853cf85584bcd22ebaacf23 Mon Sep 17 00:00:00 2001
From: realtradam <github@tradam.dev>
Date: Sat, 29 Jun 2024 00:20:29 -0400
Subject: add games page + rails auth cleanup

---
 react-frontend/src/components/GameCard.tsx | 43 ++++++++++++++++++++++++++++++
 react-frontend/src/components/Layout.tsx   | 23 +++++++++++-----
 2 files changed, 59 insertions(+), 7 deletions(-)
 create mode 100644 react-frontend/src/components/GameCard.tsx

(limited to 'react-frontend/src/components')

diff --git a/react-frontend/src/components/GameCard.tsx b/react-frontend/src/components/GameCard.tsx
new file mode 100644
index 0000000..4367977
--- /dev/null
+++ b/react-frontend/src/components/GameCard.tsx
@@ -0,0 +1,43 @@
+import { Link } from "react-router-dom";
+
+export type ImageRendering = "auto" | "crisp-edges" | "pixelated";
+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 };
+
+export default function GameCard ({ link, game }: GameCardProps)
+{
+	return (
+		<>
+		<Link to={ link } role="button" className="block w-min pt-10 px-1">
+			<div className="gameCard">
+				<div className="gameCardWrapper">
+					<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 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>
+		</Link>
+		</>
+	);
+}
diff --git a/react-frontend/src/components/Layout.tsx b/react-frontend/src/components/Layout.tsx
index db31b55..274e579 100644
--- a/react-frontend/src/components/Layout.tsx
+++ b/react-frontend/src/components/Layout.tsx
@@ -1,5 +1,5 @@
 import { Dispatch } from 'react';
-import { Outlet, useNavigate } from "react-router-dom";
+import { Outlet, Link, useNavigate } from "react-router-dom";
 import { IconButton, Button, ButtonGroup } from 'rsuite';
 import { Icon } from '@rsuite/icons';
 import { FaUser } from "react-icons/fa6";
@@ -28,22 +28,31 @@ export default function Layout(prop : { userData: userData, setUserData : Dispat
 
 
 	const loggedout_element = <IconButton onClick={loginLink} appearance="primary" color="green" icon={<Icon as={FaUser}/>}>Log In</IconButton>;
-	const loggedin_element = <ButtonGroup className="flex"><Button appearance="ghost" style={{width:"100%"}}>{prop.userData.name}</Button><Button onClick={logoutLink} appearance="subtle" style={{paddingLeft:"1.4em", paddingRight:"1.4em"}}>Log Out</Button></ButtonGroup>;
+	const loggedin_element = <ButtonGroup className="flex"><Button appearance="ghost" color="red" style={{width:"100%"}}>{prop.userData.name}</Button><Button onClick={logoutLink} appearance="subtle" style={{paddingLeft:"1.4em", paddingRight:"1.4em"}}>Log Out</Button></ButtonGroup>;
 
 	console.log(prop);
 
 	return(
 		<>
 			<div className="w-screen h-screen flex border-none">
-				<div className="flex flex-col h-screen overflow-y-auto overflow-x-hidden w-72 bg-stone-100">
+				<div className="flex flex-col h-screen overflow-y-auto overflow-x-hidden w-72 shrink-0 bg-stone-100">
 					<div className="flex flex-col bg-stone-800">
-					<div className="m-4 mb-0 flex flex-col flex-grow">
-						{ prop.userData.name ? loggedin_element : loggedout_element }
+						<div className="m-4 mb-0 flex flex-col flex-grow">
+							{ prop.userData.name ? loggedin_element : loggedout_element }
+						</div>
 					</div>
+						<Link to="/" role="button">
+					<div className="border-green-500 p-2 text-red-700 bg-stone-800">
+							<Icon as={GiCowboyHolster} style={{width:"100%", height:"100%"}}/>
 					</div>
-					<div className="border-green-500 p-2 mb-2 text-red-700 bg-stone-800 rounded-b-xl"><Icon as={GiCowboyHolster} style={{width:"100%", height:"100%"}}/></div>
+					<div className="border-green-500 p-2 mb-2 text-white font-title text-2xl text-center bg-stone-800 rounded-b-xl">
+						Game Holster
+					</div>
+						</Link>
 					<div className="flex flex-col px-4 gap-2">
-						<IconButton appearance="subtle" size="lg" icon={<Icon as={FaGamepad}/>}>Browse Games</IconButton>
+						<Link to="/games" role="button">
+							<IconButton style={{width: '100%'}} appearance="subtle" size="lg" icon={<Icon as={FaGamepad}/>}>Browse Games</IconButton>
+						</Link>
 						<IconButton appearance="subtle" size="lg" icon={<Icon as={GrAdd}/>}>Upload Game</IconButton>
 					</div>
 				</div>
-- 
cgit v1.2.3