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 ? (
+
+
+
+
+ ) : (
+
+
+
+ )}
+
+ );
+}
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) {
>
-
);
diff --git a/client/src/pages/games/[id].tsx b/client/src/pages/games/[id].tsx
index d99f71f2..e73d1974 100644
--- a/client/src/pages/games/[id].tsx
+++ b/client/src/pages/games/[id].tsx
@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
import React from "react";
import { SocialIcon } from "react-social-icons";
+import { GameEmbed } from "@/components/ui/GameEmbed";
import { ItchEmbed } from "@/components/ui/ItchEmbed";
import { useGame } from "@/hooks/useGames";
@@ -51,6 +52,9 @@ export default function IndividualGamePage() {
const gameTitle = game.name;
const gameCover = game.gameCover;
const gameDescription = game.description.split("\n");
+ const gameEmbedID = game.itchGameEmbedID;
+ const gameWidth = game.itchGameWidth;
+ const gameHeight = game.itchGameHeight;
const completionLabels: Record = {
1: "WIP",
@@ -83,16 +87,27 @@ export default function IndividualGamePage() {
return (