playable game can replace image

Author: TobbleCobble

client/src/components/ui/GameEmbed.tsx

@@ -17,32 +17,30 @@ export function GameEmbed({ embedID, gameWidth, gameHeight }: GameEmbedProps) {
   const [isPlaying, setIsPlaying] = useState(false);
 
   return (
-    <div>
-      <section
-        className={
-          "flex items-center justify-center border-[26px] border-accent 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 }}
-      >
-        {!isPlaying ? (
-          <button
-            onClick={() => setIsPlaying(!isPlaying)}
-            className="rounded-sm bg-accent px-7 py-3"
-            aria-label="Play"
-          >
-            <div>Play</div>
-          </button>
-        ) : (
-          <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>
-        )}
-      </section>
+    <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 }}
+    >
+      {!isPlaying ? (
+        <button
+          onClick={() => setIsPlaying(!isPlaying)}
+          className="rounded-sm bg-accent px-7 py-3"
+          aria-label="Play"
+        >
+          <div>Play</div>
+        </button>
+      ) : (
+        <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>
+      )}
     </div>
   );
 }

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

@@ -86,16 +86,26 @@ export default function IndividualGamePage() {
   return (
     <div className="min-h-screen bg-background font-sans text-foreground">
       <main>
-        <section className="w-full bg-popover">
+        <section className="w-full items-center justify-center bg-popover">
           <div className="mx-auto max-w-7xl p-0 sm:p-8">
-            <Image
-              src={gameCover}
-              alt="Game Cover"
-              width={800}
-              height={800}
-              className="max-h-[60vh] w-full object-cover sm:mx-auto sm:h-auto sm:max-h-[60vh] sm:rounded-2xl sm:object-contain"
-              priority
-            />
+            {gameEmbedID != "0" ? (
+              <div className="flex justify-center">
+                <GameEmbed
+                  embedID={gameEmbedID}
+                  gameWidth={gameWidth}
+                  gameHeight={gameHeight}
+                />
+              </div>
+            ) : (
+              <Image
+                src={gameCover}
+                alt="Game Cover"
+                width={800}
+                height={800}
+                className="max-h-[60vh] w-full object-cover sm:mx-auto sm:h-auto sm:max-h-[60vh] sm:rounded-2xl sm:object-contain"
+                priority
+              />
+            )}
           </div>
         </section>
 
@@ -162,16 +172,7 @@ export default function IndividualGamePage() {
         </section>
 
         <section className="mt-8 flex w-full flex-col items-center gap-6">
-          {gameEmbedID != "0" && (
-            <div>
-              <GameEmbed
-                embedID={gameEmbedID}
-                gameWidth={gameWidth}
-                gameHeight={gameHeight}
-              />
-              <ItchEmbed embedID={game.itchEmbedID} name={gameTitle} />
-            </div>
-          )}
+          <ItchEmbed embedID={game.itchEmbedID} name={gameTitle} />
 
           <h2 className="font-jersey10 text-5xl text-primary">ARTWORK</h2>
 

server/game_dev/migrations/0011_merge_20260205_1434.py

@@ -0,0 +1,13 @@
+# Generated by Django 5.1.15 on 2026-02-05 06:34
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("game_dev", "0010_game_itchgameembedid_game_itchgameheight_and_more"),
+        ("game_dev", "0010_merge_20260131_1118"),
+    ]
+
+    operations = []