Add requestRewardedAd support in phaser sample game

phaser/src/YouTubePlayables.js

@@ -406,6 +406,39 @@ export const YouTubePlayables = {
                 }
             }
         }
+    },
+
+    requestRewardedAd: function(rewardId = "21403813-2e22-4316-a8b2-7d4f52a6f6fb")
+    {
+        if (!this.isReady())
+        {
+            return Promise.resolve(false);
+        }
+
+        try
+        {
+            return this._ytgameRef?.ads.requestRewardedAd(rewardId)
+                .then(granted => {
+                    return Boolean(granted);
+                })
+                .catch(error => {
+                    if (error.errorType)
+                    {
+                        this.handleError(error.errorType);
+                    }
+
+                    return false;
+                });
+        }
+        catch (error)
+        {
+            if (error.errorType)
+            {
+                this.handleError(error.errorType);
+            }
+
+            return Promise.resolve(false);
+        }
     }
 
 };

phaser/src/scenes/Game.js

@@ -42,9 +42,47 @@ export class Game extends Scene
 
         this.showHand();
 
+        this.createRegisterBallsButton();
+
         this.checkStage();
     }
 
+    createRegisterBallsButton ()
+    {
+        const x = this.view.left + 90;
+        const y = this.view.top + 110;
+        const width = 156;
+        const height = 48;
+
+        const button = this.add.rectangle(x, y, width, height, 0x663b12)
+            .setDepth(100)
+            .setStrokeStyle(3, 0xf7d55f)
+            .setInteractive({ useHandCursor: true })
+            .on('pointerdown', (pointer, localX, localY, event) => {
+                event.stopPropagation();
+                this.requestMoreBalls();
+            })
+            .on('pointerover', () => {
+                button.setFillStyle(0x7d4b14);
+            })
+            .on('pointerout', () => {
+                button.setFillStyle(0x663b12);
+            });
+
+        this.add.text(x, y, 'More Balls', {
+            fontFamily: 'Arial Black',
+            fontSize: '18px',
+            color: '#fff7d6',
+            stroke: '#3d210e',
+            strokeThickness: 5,
+            align: 'center'
+        })
+            .setDepth(101)
+            .setOrigin(0.5, 0.5);
+
+        this.moreballsButton = button;
+    }
+
     checkStage ()
     {
         const left = this.view.left + 190;
@@ -121,6 +159,11 @@ export class Game extends Scene
             this.handCursor = null;
         }
 
+        if (this.moreballsButton && Phaser.Geom.Rectangle.Contains(this.moreballsButton.getBounds(), pointer.x, pointer.y))
+        {
+            return;
+        }
+
         const ball = Phaser.Utils.Array.GetFirst(this.balls, 'active', false);
 
         if (ball && this.registry.get('shots') > 0)
@@ -137,6 +180,17 @@ export class Game extends Scene
         }
     }
 
+    async requestMoreBalls ()
+    {
+        const rewardGranted = await YouTubePlayables.requestRewardedAd();
+
+        if (rewardGranted)
+        {
+            this.registry.inc('shots', 5);
+            this.checkStage();
+        }
+    }
+
     showHand ()
     {
         const cx = this.view.centerX;