🎯 Simple Playable
30 |This is a test playable for validator injection.
31 | 32 | 33 |
26 | 
e.stopPropagation()}
31 | />
32 |
37 |
38 | ` : ""}
39 | `;
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/public/test-simple-playable.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
29 |
34 |
35 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/src/services/PreviewServiceValidators/FacebookValidator.ts:
--------------------------------------------------------------------------------
1 | import type { Validator, ValidationResult, ValidationCategory } from './types';
2 |
3 | export class FacebookValidator implements Validator {
4 | validate(content: string, fileSize: number): ValidationResult {
5 | const categories: ValidationCategory[] = [
6 | {
7 | name: 'Facebook',
8 | checks: [
9 | {
10 | name: 'HTML file size < 5MB',
11 | passed: fileSize <= 5 * 1024 * 1024,
12 | details: fileSize > 5 * 1024 * 1024
13 | ? `File size: ${(fileSize / (1024 * 1024)).toFixed(1)}MB (max: 5MB)`
14 | : `File size: ${(fileSize / (1024 * 1024)).toFixed(1)}MB`
15 | },
16 | {
17 | name: 'No XMLHttpRequest usage',
18 | passed: !content.includes('XMLHttpRequest') && !content.includes('fetch('),
19 | details: content.includes('XMLHttpRequest') || content.includes('fetch(')
20 | ? 'XMLHttpRequest/fetch usage detected - Facebook blocks these APIs'
21 | : undefined
22 | },
23 | {
24 | name: 'No localStorage/sessionStorage',
25 | passed: !content.includes('localStorage') && !content.includes('sessionStorage'),
26 | details: content.includes('localStorage') || content.includes('sessionStorage')
27 | ? 'localStorage/sessionStorage usage detected - may not work in Facebook environment'
28 | : undefined
29 | },
30 | {
31 | name: 'Valid HTML5 doctype',
32 | passed: //i.test(content),
33 | details: !//i.test(content)
34 | ? 'Missing HTML5 doctype declaration'
35 | : undefined
36 | }
37 | ]
38 | }
39 | ];
40 |
41 | return { categories };
42 | }
43 | }
--------------------------------------------------------------------------------
/src/Layout/gamepad-icon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/cta-sdk.md:
--------------------------------------------------------------------------------
1 | # Unifying Playable Ads: The CTA SDK Bridge
2 |
3 | > **Note:** The CTA SDK is used by the [Publish Tool](/#publish), enabling seamless deployment and integration of HTML5 playables across multiple ad networks.
4 |
5 | ## 1. Game Events and CTA Calls
6 |
7 | When the playable is finished, the user should click the Call to Action button (such as Install, Play, Next, etc.). When that button is clicked, you should call the following code:
8 |
9 | ```typescript
10 | document["CTA"]?.onClick?.(); // Triggers the app store
11 | ```
12 |
13 | This method acts as a proxy for the specific APIs required by different ad platforms. It will only call the necessary API to direct the user to the app store.
14 |
15 | ### Optional methods
16 |
17 | Those methods should be used for playable ads publishing to Mintegral ads network. See the [docs](https://www.playturbo.com/review/doc)
18 |
19 | ```typescript
20 | document["CTA"]?.gameEnd?.(); // Signals the end of gameplay
21 |
22 | document["CTA"]?.gameReady?.(); // Signals the ad is loaded and interactive
23 | ```
24 |
25 | ## 2. MRAID Mute/Unmute Handler
26 |
27 | For MRAID-compatible ad networks, you can integrate custom mute and unmute handlers. This allows the playable to respond to user audio preferences and synchronize your app's audio state:
28 |
29 | ```typescript
30 | const cta = (document as any).CTA as any; // Assumes CTA scripts are already injected and document.CTA exists
31 |
32 | let isStarted = false;
33 |
34 | function startGame() {
35 | // Check if already initialized
36 | if (isStarted) return;
37 | isStarted = true;
38 |
39 | const app = new App();
40 | // Set custom mute and unmute functions
41 | if (cta) {
42 | cta["mute"] = () => app.mute();
43 | cta["unmute"] = () => app.unmute();
44 | }
45 | app.init();
46 | }
47 |
48 | startGame();
49 | ```
50 |
51 | The `mute()` and `unmute()` methods should be implemented in your `App` class to handle audio state changes accordingly.
52 |
53 |
--------------------------------------------------------------------------------
/public/gamepad.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/test-facebook-validator.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
33 |
37 |
38 |
61 |
62 |
63 |
--------------------------------------------------------------------------------
/public/playable-tools.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/services/ImbaPackerService.ts:
--------------------------------------------------------------------------------
1 | import { injectable } from "fw";
2 | import pako from "pako";
3 | // @ts-ignore
4 | import pakoMin from "../assets/pako_inflate.min.js?raw";
5 |
6 | @injectable()
7 | export class ImbaPackerService {
8 | // Add your service methods here
9 | constructor() {}
10 |
11 | /**
12 | * Compresses the file with pako, encodes as base64, and generates HTML with loader logic.
13 | * @param file HTML file to pack
14 | * @returns Promise<{fileName: string, html: string}>
15 | */
16 | async pack(file: File): Promise<{fileName: string, html: string}> {
17 | const originalName = file.name.replace(/\.html?$/i, "");
18 | const fileContent = await file.text();
19 | // Compress with pako (deflate)
20 | const compressed = pako.deflate(fileContent);
21 | // Convert to base64
22 | const base64 = this._arrayBufferToBase64(compressed);
23 | // Generate loader HTML
24 | const loaderHtml =
25 | '' +
26 | '🎮 Test Playable Ad
34 |Click anywhere to trigger CTA!
35 |Facebook validator will be injected automatically
36 |