work on rendering gamesdev

7 files changed, 131 insertions, 21 deletions

diff --git a/rails-backend/app/controllers/api/v1/games_controller.rb b/rails-backend/app/controllers/api/v1/games_controller.rb
index 4346244..2d5e98a 100644
--- a/rails-backend/app/controllers/api/v1/games_controller.rb
+++ b/rails-backend/app/controllers/api/v1/games_controller.rb
@@ -39,8 +39,7 @@ class Api::V1::GamesController < ApplicationController
   # list of all games
   def index
     game = Game.all.order(created_at: :desc)
-    #render json: game
-    render json: game.to_json(include: [:game_files, :card_img, :char_img, :title_img, :tags])
+    render json: game.to_json(include: [tags: { only: [:tag_type, :name] }, user: { only: [:user_name, :id] }], except: [:user_id])
   end
 
   # single game or list of user's games
diff --git a/react-frontend/src/components/GameCard.tsx b/react-frontend/src/components/GameCard.tsx
index 4367977..35bae57 100644
--- a/react-frontend/src/components/GameCard.tsx
+++ b/react-frontend/src/components/GameCard.tsx
@@ -6,6 +6,7 @@ export type Tag = {
 	tag_type: string,
 	name: string,
 };
+export type BasicUser = { id: number, user_name: string };
 export type GameType = {
 	id: number,
 	title: string,
@@ -17,11 +18,11 @@ export type GameType = {
 	order: number,
 	created_at: string,
 	updated_at: string,
-	user_id: number,
 	tags: Tag[],
 	card_img: string,
 	char_img: string,
 	title_img: string,
+	user: BasicUser,
 };
 export type GameCardProps = { link: string, game: GameType };
 
diff --git a/react-frontend/src/components/Layout.tsx b/react-frontend/src/components/Layout.tsx
index 274e579..08d1315 100644
--- a/react-frontend/src/components/Layout.tsx
+++ b/react-frontend/src/components/Layout.tsx
@@ -1,4 +1,4 @@
-import { Dispatch } from 'react';
+import { Dispatch, useState } from 'react';
 import { Outlet, Link, useNavigate } from "react-router-dom";
 import { IconButton, Button, ButtonGroup } from 'rsuite';
 import { Icon } from '@rsuite/icons';
@@ -6,6 +6,8 @@ import { FaUser } from "react-icons/fa6";
 import { FaGamepad } from "react-icons/fa";
 import { GiCowboyHolster } from "react-icons/gi";
 import { GrAdd } from "react-icons/gr";
+import { FaChevronRight } from "react-icons/fa";
+import { FaChevronLeft } from "react-icons/fa";
 import { UserType } from "../routes/index";
 
 export type userData = { name: string };
@@ -30,12 +32,41 @@ 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" 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);
+	const [sidebarOpen, setSidebarOpen] = useState(false);
+	const [sidebarClosed, setSidebarClosed] = useState(false);
+	const [sidebarInit, setSidebarInit] = useState(true);
+	const handleSidebarOpen = () => {
+		if(sidebarInit) {
+			setSidebarOpen(true);
+			setSidebarInit(false);
+		}
+		else {
+			setSidebarOpen(!sidebarOpen);
+			setSidebarClosed(!sidebarClosed);
+		}
+	};
+	const handleSidebarClickaway = () => {
+		if(!sidebarInit)
+			{
+				setSidebarOpen(false);
+				setSidebarClosed(true);
+			}
+	};
 
 	return(
 		<>
+			<div onClick={handleSidebarOpen} className={`${sidebarOpen ? 'sidebarOpen' : ''} ${sidebarClosed ? 'sidebarClosed' : ''} ${sidebarInit ? 'sidebarInit' : ''} sidebar-animation flex items-center justify-center md:hidden fixed shadow-xl ml-[19rem] m-4 h-12 w-12 text-stone-50 bg-red-800 rounded-[5px] z-[5]`}>
+				<div className={`${sidebarClosed || sidebarInit ? '' : 'hidden'} flex items-center justify-center`}>
+					<Icon as={FaChevronRight}/>
+				</div>
+				<div className={`${sidebarOpen ? '' : 'hidden'} flex items-center justify-center`}>
+					<Icon as={FaChevronLeft}/>
+				</div>
+			</div>
 			<div className="w-screen h-screen flex border-none">
-				<div className="flex flex-col h-screen overflow-y-auto overflow-x-hidden w-72 shrink-0 bg-stone-100">
+				<div className={`md:block hidden flex flex-col h-full overflow-y-auto overflow-x-hidden w-72 shrink-0 bg-stone-100`}>
+				</div>
+				<div className={`${sidebarOpen ? 'sidebarOpen' : ''} ${sidebarClosed ? 'sidebarClosed' : ''} ${sidebarInit ? 'sidebarInit' : ''} z-[5] sidebar-animation flex flex-col h-screen overflow-y-auto overflow-x-hidden w-72 shrink-0 bg-stone-100 fixed`}>
 					<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 }
diff --git a/react-frontend/src/index.css b/react-frontend/src/index.css
index b077dda..4ee4466 100644
--- a/react-frontend/src/index.css
+++ b/react-frontend/src/index.css
@@ -3,12 +3,15 @@
 @tailwind utilities;
 
 /* debug class *//*
-* {
-	border: 1px solid red;
-}
-*/
+ * {
+ border: 1px solid red;
+ }
+				  */
 
 @layer components {
+
+	/* Game Card */
+
 	.gameCard {
 		aspect-ratio: 5/7;
 		width: 18.75em; /*300px;*/
@@ -45,10 +48,10 @@
 
 	.gameCardWrapper::before {
 		background-image: linear-gradient(
-			to top,
-			transparent 46%,
-			rgba(12, 13, 19, 0.5) 68%,
-			rgba(12, 13, 19) 97%
+		to top,
+		transparent 46%,
+		rgba(12, 13, 19, 0.5) 68%,
+		rgba(12, 13, 19) 97%
 		);
 
 		@apply top-0 h-full rounded-md;
@@ -56,10 +59,10 @@
 
 	.gameCardWrapper::after {
 		background-image: linear-gradient(
-			to bottom,
-			transparent 46%,
-			rgba(12, 13, 19, 0.5) 68%,
-			rgba(12, 13, 19) 97%
+		to bottom,
+		transparent 46%,
+		rgba(12, 13, 19, 0.5) 68%,
+		rgba(12, 13, 19) 97%
 		);
 
 		@apply bottom-0 opacity-100 rounded-md;
@@ -67,7 +70,7 @@
 
 	.gameCard:hover .gameCardWrapper::before,
 	.gameCardWrapper::after {
-		
+
 		@apply opacity-100;
 	}
 
@@ -85,7 +88,7 @@
 	.gameCharacterImg {
 		transition: all 0.5s;
 		z-index: -1;
-		
+
 		@apply w-full max-h-80 object-contain opacity-0 absolute;
 	}
 
@@ -94,6 +97,55 @@
 
 		@apply opacity-100;
 	}
+
+	/* Sidebar */
+
+	@keyframes sidebar-enter {
+		from {
+			left: -16rem;
+			@apply -left-72;
+		}
+		to {
+
+			@apply left-0;
+		}
+	}
+
+	@keyframes sidebar-exit {
+		from {
+			
+			@apply left-0;
+		}
+		to {
+
+			@apply -left-72;
+		}
+	}
+
+	@media (max-width: 768px)
+	{
+		.sidebarInit {
+
+			@apply -left-72;
+		}
+
+		.sidebarOpen {
+			animation-name: sidebar-enter;
+			
+			@apply left-0;
+		}
+
+		.sidebarClosed {
+			animation-name: sidebar-exit;
+
+			@apply -left-72;
+		}
+
+		.sidebar-animation {
+			animation-duration: 0.5s;
+			animation-iteration-count: 1;
+		}
+	}
 }
 
 
diff --git a/react-frontend/src/pages/Game.tsx b/react-frontend/src/pages/Game.tsx
new file mode 100644
index 0000000..464176a
--- /dev/null
+++ b/react-frontend/src/pages/Game.tsx
@@ -0,0 +1,25 @@
+import { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { GameType } from "../components/GameCard";
+
+export default function Games () {
+	const { path_game, path_user } = useParams();
+	const [gameData, setGameData] = useState<GameType>();
+
+	useEffect(() => {
+		const url = `${import.meta.env.VITE_API_TITLE}/api/v1/games/${path_user}/${path_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("/"));
+	}, [path_game, path_user]);
+
+	return(
+		<>
+		<h1>blah</h1>
+		</>
+	);
+
+}
diff --git a/react-frontend/src/pages/Games.tsx b/react-frontend/src/pages/Games.tsx
index 2a9b23a..b43da06 100644
--- a/react-frontend/src/pages/Games.tsx
+++ b/react-frontend/src/pages/Games.tsx
@@ -15,7 +15,7 @@ export default function Games () {
 	}, []);
 
 	const allGames = games.map((game) => (
-		<GameCard link={`/game/${game.titleSlug}`} game={game} key={game.id}/>
+		<GameCard link={`/game/${game.user.user_name}/${game.titleSlug}`} game={game} key={game.id}/>
 	));
 
 	return (
diff --git a/react-frontend/src/routes/index.tsx b/react-frontend/src/routes/index.tsx
index 9b3d599..c8bf21f 100644
--- a/react-frontend/src/routes/index.tsx
+++ b/react-frontend/src/routes/index.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Home from "../pages/Home";
 import Games from "../pages/Games";
+import Game from "../pages/Game";
 import Layout from "../components/Layout";
 import CloseWindow from "../pages/CloseWindow";
 
@@ -36,6 +37,7 @@ export default function Index()
 						<Route path="/" element = {<Layout userData={userData} setUserData={setUserData}/>}>
 							<Route index element={<Home />} />
 							<Route path="/games" element={<Games />} />
+							<Route path="/game/:user/:game" element={<Game />} />
 							<Route path="/closewindow" element={<CloseWindow />} />
 						</Route>
 					</Routes>