diff --git a/client/src/components/ui/GameEmbed.tsx b/client/src/components/ui/GameEmbed.tsx new file mode 100644 index 00000000..f070f628 --- /dev/null +++ b/client/src/components/ui/GameEmbed.tsx @@ -0,0 +1,61 @@ +// notes: +// - width and height don't match itch.io, making games look smaller +// - you can just embed from itch.io, but only the developer can get the embed link as far as i can tell +// - would need to save embed link, width and height to db +// - this method is reliant on itch.io staying up and not changing anything +// - would want a play button so it doesn't autoload (especially for bigger more intense games) +import Image from "next/image"; +import React, { useState } from "react"; + +import { Button } from "./button"; + +type GameEmbedProps = { + embedID: string; + gameWidth: number; + gameHeight: number; + gameImage: string; +}; + +export function GameEmbed({ + embedID, + gameWidth, + gameHeight, + gameImage, +}: GameEmbedProps) { + const [isPlaying, setIsPlaying] = useState(false); + + return ( +
+ {!isPlaying ? ( +
+ Game Cover + +
+ ) : ( +
+ +
+ )} +
+ ); +} diff --git a/client/src/hooks/useGames.ts b/client/src/hooks/useGames.ts index 1d8d2c1f..ddc4d839 100644 --- a/client/src/hooks/useGames.ts +++ b/client/src/hooks/useGames.ts @@ -24,6 +24,9 @@ type ApiGame = { itchEmbedID: string; thumbnail: string | null; event: number | null; + itchGameEmbedID: string; + itchGameWidth: number; + itchGameHeight: number; contributors: Contributor[]; }; diff --git a/client/src/pages/_app.tsx b/client/src/pages/_app.tsx index ca3770d2..eb476768 100644 --- a/client/src/pages/_app.tsx +++ b/client/src/pages/_app.tsx @@ -5,7 +5,6 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import type { AppProps } from "next/app"; import { Fira_Code, Inter as FontSans, Jersey_10 } from "next/font/google"; -import Footer from "@/components/main/Footer"; import Navbar from "@/components/main/Navbar"; const fontSans = FontSans({ @@ -37,7 +36,6 @@ export default function App({ Component, pageProps }: AppProps) { > -