Base Playable Template

by Peter

HTML

<script type="text/javascript">
  window.AD_NETWORK = 'preview';
  window.AD_PROTOCOL = 'none';
  window.GOOGLE_PLAY_URL = 'https://play.google.com/store/apps/details?id=com.example';
  window.APP_STORE_URL = 'https://apps.apple.com/app/id123456789';
  window.BUILD_HASH = 'random-build-hash';
</script>

CSS

body,
html {
  margin: 0;
  padding: 0;
}

html {
  background-color: #fff;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

body {
  height: inherit;
  width: inherit;
}

* {
  -webkit-tap-highlight-color: transparent;
}

JavaScript

// See https://www.npmjs.com/package/@smoud/playable-sdk documentation.
import { sdk } from 'https://esm.run/@smoud/playable-sdk';

/**
 * GitHub repository
 * https://github.com/smoudjs/playable-template-base
 */

sdk.init((width, height) => {
  // Initialize game with container dimensions
  const game = new Game(width, height);

  // Set up all event listeners
  sdk.on("resize", game.resize, game);
  sdk.on("pause", game.pause, game);
  sdk.on("resume", game.resume, game);
  sdk.on("volume", game.volume, game);
  sdk.on("finish", game.finish, game);
});

class Game {
  constructor(width, height) {
    // Create game container
    this.container = document.createElement('div');
    this.container.style.cssText = 'position: absolute; top: 0px; left: 0px; background-color: rgb(28, 28, 28);';
    this.container.style.width = `${width}px`;
    this.container.style.height = `${height}px`;

    document.body.appendChild(this.container);

    // Load image
    this.buttonImage = new Image();
    this.buttonImage.src = "https://raw.githubusercontent.com/smoudjs/playable-template-base-js/master/assets/button.png";

    this.buttonImage.onload = () => {
      this.create();
    };
  }

  create() {
    this.installButton = document.createElement('div');
    this.installButton.style.cssText = 'position: absolute;cursor: pointer; width: 200px; transform-origin: top left;';
    this.installButton.onclick = () => sdk.install();

    // Add image
    this.buttonImage.style.width = '100%';
    this.installButton.appendChild(this.buttonImage);

    // Add text overlay
    const text = document.createElement('div');
    text.textContent = 'Install';
    text.style.cssText =
      'position: absolute;top: 50%;left: 50%;transform: translate(-50%, -58%); color: rgb(255 255 255);font-size: 35px;font-weight: bold;text-shadow: rgb(255 252 106 / 63%) 4px 3px 9px;pointer-events: none;font-family: cursive;';
    this.installButton.appendChild(text);

   ...