Merge pull request #144 from codersforcauses/issue-143-allow_playable_game_width_and_height_to_be_null

Issue 143 allow playable game width and height to be null

Author: laurenpudz

client/documentation/admin-dashboard/games.md

@@ -24,8 +24,8 @@ Pages for games can be added and edited at the row 'Game' of the GAME_DEV sectio
 
 **Event:** Optional field for the event at which the game was created. Links the game to an event. Foreign key field for an event.
 
-**Itch Game Embed ID:** Optional field for the game's game embed. This ID allows the web version of a game to be played inside the site. This value can be acquired in two ways, either by the developer or through looking in the page source. A developer can get the value by going to the distribution tab of their game and going to the embed game section this will bring up a full embed for the game and the only part needed is the 8 digit number after "https://html-classic.itch.zone/html/". By looking through the page source that link can also be found either in a div or an iframe on the page depending on if the game has been played. **This value is not attainable if there is no web version of the game. hosted on itch.**
+**Itch Game Playable ID:** Optional field for the game's game embed. This ID allows the web version of a game to be played inside the site. This value can be acquired in two ways, either by the developer or through looking in the page source. A developer can get the value by going to the distribution tab of their game and going to the embed game section this will bring up a full embed for the game and the only part needed is the 8 digit number after "https://html-classic.itch.zone/html/". By looking through the page source that link can also be found either in a div or an iframe on the page depending on if the game has been played. **This value is not attainable if there is no web version of the game. hosted on itch.**
 
-**Itch Game Width:** Required field for the game's game embed. This value is gotten in a similar way to the Itch Game Embed, however for the developer it's the number after "width=" and in the page source is found after "data-width=".
+**Itch Game Width:** This field is required if the playable field ID is non null. This value is gotten in a similar way to the Itch Game Embed, however for the developer it's the number after "width=" and in the page source is found after "data-width=".
 
-**Itch Game Height:** Required field for the game's game embed. This value is gotten in a similar way to the Itch Game Embed, however for the developer it's the number after "height=" and in the page source is found after "data-height=".
+**Itch Game Height:** This field is required if the playable field ID is non null. This value is gotten in a similar way to the Itch Game Embed, however for the developer it's the number after "height=" and in the page source is found after "data-height=".

client/src/hooks/useGames.ts

@@ -24,7 +24,7 @@ type ApiGame = {
   itchEmbedID: string;
   thumbnail: string | null;
   event: number | null;
-  itchGameEmbedID: string;
+  itchGamePlayableID: string;
   itchGameWidth: number;
   itchGameHeight: number;
   contributors: Contributor[];

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

@@ -57,7 +57,7 @@ export default function IndividualGamePage() {
   const gameTitle = game.name;
   const gameCover = game.gameCover;
   const gameDescription = game.description.split("\n");
-  const gameEmbedID = game.itchGameEmbedID;
+  const gamePlayableID = game.itchGamePlayableID;
   const gameWidth = game.itchGameWidth;
   const gameHeight = game.itchGameHeight;
   const eventID = game.event;
@@ -94,10 +94,11 @@ export default function IndividualGamePage() {
       <main>
         <section className="w-full items-center justify-center bg-popover">
           <div className="mx-auto flex max-w-7xl justify-center p-0 sm:p-8">
-            {gameEmbedID ? (
+            {/* only render game embed if ID, width, and height are all provided (...and are non-zero).  */}
+            {gamePlayableID && gameWidth && gameHeight ? (
               <div className="m-auto flex overflow-auto">
                 <GameEmbed
-                  embedID={gameEmbedID}
+                  embedID={gamePlayableID}
                   gameWidth={gameWidth}
                   gameHeight={gameHeight}
                   gameImage={gameCover}

client/src/placeholderData.ts

@@ -56,7 +56,7 @@ export const placeholderGames = [
     hostURL: "/",
     itchEmbedID: "1",
     thumbnail: "/landing_placeholder.png",
-    itchGameEmbedID: 0,
+    itchGamePlayableID: 0,
     itchGameWidth: 0,
     itchGameHeight: 0,
     event: 1,
@@ -70,7 +70,7 @@ export const placeholderGames = [
     hostURL: "/",
     itchEmbedID: "1",
     thumbnail: "/landing_placeholder.png",
-    itchGameEmbedID: 0,
+    itchGamePlayableID: 0,
     itchGameWidth: 0,
     itchGameHeight: 0,
     event: 1,
@@ -84,7 +84,7 @@ export const placeholderGames = [
     hostURL: "/",
     itchEmbedID: "1",
     thumbnail: "/landing_placeholder.png",
-    itchGameEmbedID: 0,
+    itchGamePlayableID: 0,
     itchGameWidth: 0,
     itchGameHeight: 0,
     event: 1,

server/game_dev/migrations/0030_alter_game_itchgameheight_alter_game_itchgamewidth.py

@@ -0,0 +1,23 @@
+# Generated by Django 5.1.15 on 2026-03-03 08:48
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('game_dev', '0029_rename_cover_image_event_coverimage_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='game',
+            name='itchGameHeight',
+            field=models.PositiveBigIntegerField(blank=True, default=None, null=True),
+        ),
+        migrations.AlterField(
+            model_name='game',
+            name='itchGameWidth',
+            field=models.PositiveBigIntegerField(blank=True, default=None, null=True),
+        ),
+    ]

server/game_dev/models.py

@@ -1,4 +1,5 @@
 from django.db import models
+from django.core.exceptions import ValidationError
 
 
 class Member(models.Model):
@@ -67,12 +68,15 @@ class CompletionStatus(models.IntegerChoices):
         blank=True,
         help_text="If a game is playable and has a web demo stored on itch.io, please enter the embed developer ID"
     )
-
     itchGameWidth = models.PositiveBigIntegerField(
-        default=0
+        default=None,
+        null=True,
+        blank=True,
     )
     itchGameHeight = models.PositiveBigIntegerField(
-        default=0
+        default=None,
+        null=True,
+        blank=True,
     )
 
     thumbnail = models.ImageField(upload_to="games/", null=True)
@@ -81,6 +85,14 @@ class CompletionStatus(models.IntegerChoices):
     def __str__(self):
         return str(self.name)
 
+    def clean(self):
+        super().clean()
+        if self.itchGamePlayableID:
+            if not self.itchGameWidth:
+                raise ValidationError({"itchGameWidth": "Game width is required if itchGamePlayableID is set."})
+            if not self.itchGameHeight:
+                raise ValidationError({"itchGameHeight": "Game height is required if itchGamePlayableID is set."})
+
 
 class GameShowcase(models.Model):
     game = models.OneToOneField('Game', on_delete=models.CASCADE, related_name='game_showcases')