uses game image as background for game embed

Author: TobbleCobble

client/src/components/ui/GameEmbed.tsx

@@ -4,7 +4,7 @@
 //  - 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";
@@ -13,33 +13,46 @@ type GameEmbedProps = {
   embedID: string;
   gameWidth: number;
   gameHeight: number;
+  gameImage: string;
 };
 
-export function GameEmbed({ embedID, gameWidth, gameHeight }: GameEmbedProps) {
+export function GameEmbed({
+  embedID,
+  gameWidth,
+  gameHeight,
+  gameImage,
+}: GameEmbedProps) {
   const [isPlaying, setIsPlaying] = useState(false);
 
   return (
     <div
-      className={
-        "flex items-center justify-center border-[26px] border-accent bg-background p-2 [clip-path:polygon(20px_20px,calc(100%-20px)_20px,100%_32px,100%_30%,calc(100%-20px)_45%,calc(100%-20px)_calc(100%-8px),80%_calc(100%-8px),75%_calc(100%-20px),20px_calc(100%-20px),0%_60%,0%_30%,20px_25%)]"
-      }
-      style={{ width: gameWidth, height: gameHeight }}
+      className={`flex items-center justify-center border-[26px] border-accent bg-background [clip-path:polygon(20px_20px,calc(100%-20px)_20px,100%_32px,100%_30%,calc(100%-20px)_45%,calc(100%-20px)_calc(100%-8px),80%_calc(100%-8px),75%_calc(100%-20px),20px_calc(100%-20px),0%_60%,0%_30%,20px_25%)]`}
+      style={{ width: gameWidth + 26 * 2, height: gameHeight + 26 * 2 }}
     >
       {!isPlaying ? (
-        <Button
-          onClick={() => setIsPlaying(!isPlaying)}
-          size={"lg"}
-          className="text-3xl"
-        >
-          Play
-        </Button>
+        <div>
+          <Image
+            src={gameImage}
+            alt="Game Cover"
+            width={gameWidth}
+            height={gameHeight}
+            className="absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[calc(-50%-52px)] blur-sm"
+            style={{ width: "auto", height: gameHeight }}
+          />
+          <Button
+            onClick={() => setIsPlaying(!isPlaying)}
+            size={"lg"}
+            className="absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[calc(-50%-52px)] text-3xl"
+          >
+            Play
+          </Button>
+        </div>
       ) : (
         <div>
           <iframe
             src={`https://itch.io/embed-upload/${embedID}?color=110e1a`}
             width={gameWidth}
             height={gameHeight}
-            className="min-w-80 border-[26px] border-accent [clip-path:polygon(20px_20px,calc(100%-20px)_20px,100%_32px,100%_30%,calc(100%-20px)_45%,calc(100%-20px)_calc(100%-8px),80%_calc(100%-8px),75%_calc(100%-20px),20px_calc(100%-20px),0%_60%,0%_30%,20px_25%)]"
           ></iframe>
         </div>
       )}

client/src/pages/games/[id].tsx

@@ -94,6 +94,7 @@ export default function IndividualGamePage() {
                   embedID={gameEmbedID}
                   gameWidth={gameWidth}
                   gameHeight={gameHeight}
+                  gameImage={gameCover}
                 />
               </div>
             ) : (