tant42/sample-y8.html Secret

## sample-y8.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--

INTRODUCTION:
This HTML document and related files are a working example of how to embed a
GameSalad HTML5 game into a website. In all, the necessary files include:

1. A snippet of HTML elements. (see below: "gse-player" element)
2. Some CSS declarations. (see file: gse-style.css)
3. The JavaScript engine file. (see below: script tags)
4. Some ad-hoc JavaScript code to configure and initialize the game. (see below:
   script tags)
5. The directory of game data and assets.
-->
  <title></title>
  <!--

CSS STYLE:
The file gse-style.css contains the essential rules required for the engine to
display properly. However, there are some customizable considerations:

What appears before the game is loaded? The game will not draw anything until
the first scene begins. Until then, you can show something else by layering
elements underneath or on top of the player.

What appears behind the game as it plays? If the game doesn't scale to fit the
player area or it uses letterboxing, then there will be empty space around the
player. You can control what appears in that area either by layering elements
underneath the player or by setting the background-color or background-image.

What appears during loading? This document implements a very simple loading
animation. It can be customized by replacing the image and modifying the CSS
styling. Or you can modify the JavaScript code to make a different experience.

-->
  <link rel="stylesheet" type="text/css" href="css/gse-style.css" />
  <link rel="stylesheet" type="text/css" href="css/gse-style-loading.css" />
  <style type="text/css">
    body {
      background-color: black;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <!--

RENDER FRAME and VIEWPORT:
The render frame is the area of the screen that contains the game. In practice,
the render frame is an HTML div that we will call "gse-player".
The viewport is the area inside the render frame that scales and clips the game's
drawing functions. By customizing the viewport, we can do things like letterbox
the game within the render frame to better fit different-sized screens.

Setting up the viewport is achieved with a combination of CSS and JavaScript.
The size of the gse-player element should be set with CSS.
The other viewport options are configured with the engine.setOptions() function
that you will call in the gse.ready() callback.

Here are some common scenarios:

1. You want to display the game at the same size as it was designed in Creator.
- Set the CSS width and height of the gse-player element to 0.
- viewport-reference = game
- viewport-fit = none


2. You want the game to display at a fixed size, but possible larger or smaller
   than the original size from Creator. You will ask the engine to zoom, pad, or
   crop the game best fit in the desired area.
   Letterbox is the easiest approach, but some may prefer overscan if the game
   was designed with it in mind.
- Set the CSS width and height of the gse-player element to the fixed size.
- If letterboxing, set a background-image or background-color (e.g. black)
- viewport-reference = frame
- viewport-fit = letterbox or overscan (or center or fill, but less common)


3. You want the game to fill the entire browser window (or parent iframe).
   You may choose letterbox or overscan to fit browsers and screens of different
   sizes.
- Set the CSS width and height of the gse-player element to 0.
- viewport-reference = window
- viewport-fit = letterbox or overscan
- Use a window resize event handler to call engine.relayout() so that the engine
  can resize itself when the window resizes.

-->
  <div id="gse-player" class="gse-frame">
    <!-- The engine will create and insert drawing elements here. -->
    <div class="gse-overlay">
      <div id="gse-text" class="gse-dialog">
        <div>
          <button id="gse-text-cancel">Cancel</button>
          <button id="gse-text-done">Done</button>
          <p id="gse-text-prompt"></p>
        </div>
        <div>
          <textarea id="gse-text-input"></textarea>
        </div>
      </div>
      <div id="gse-loading" style="visibility: visible;">
        <img src="images/gse-loading.png" />
      </div>
    </div>
  </div>
  <!--

LOADING SCRIPT:
Here we define a callback function and pass it as an argument to gse.ready().
After the engine has loaded and initialized, it will invoke our callback. At a
minimum, we must tell the engine where to draw [with engine.setRenderFrame()]
and where to find the game assets [with engine.play()].

We can also tinker with some engine options and hook into game events via the
delegate pattern.

We must call gse.ready() after the engine file has loaded. There are a few ways
to accomplish this. See the section below for more detail on that.

-->
  <script type="text/javascript">
    window.idAsyncInit = function() { // SDK downloaded
      // Uncomment if you are using game services
      /*
      ID.init({
        appId : 'YOUR APP ID'
      });
      */

      ID.Event.subscribe('id.init', function() { // SDK initialized
        ID.ads.init('YOUR GAME ID');
      });
    };

    (function (global) {

      // This function is called after the engine script file has loaded.
      // At that point, the gse.ready function has be defined and we can call it.
      global.onEngineLoad = function () {

        // gse.ready() is a global function defined by the engine JavaScript
        // file. It is the only global function of the API and the only way to
        // initially interact with the game. The remainder of the API is object-
        // oriented.
        // We define a ready callback function and pass it to gse.ready().
        // Later, that callback will be invoked when the engine is ready.
        // Via the callback's arguments, the GameSalad code passes us back an
        // object called "engine" which implements several useful API functions.
        gse.ready(function (engine) {

          // These bits of code are optional. This demonstration shows how to
          // use a delegate to control a loading animation that spins in
          // between scene loads.
          // A delegate is a JavaScript object that receives callback from the
          // engine on particular events.
          // To customize this animation, you can replace the gse-loading.png
          // image with another, and you can tailor the CSS styling and
          // animation to match (say, make it bounce instead of spin).
          // Or, you can replace this entirely with your own JavaScript code.
          var loadingElement = document.getElementById('gse-loading');

          var playerDelegate = {
            /*
            onIAPRequestPurchaseData () {
            },
            */

            // As a very general purpose behavior, this is a great place to receive messages from the engine
            // that wouldn't be handled in another delegate.
            onTweetSheet: function (msg, img) {
            },

            // LoL has the ability to display subject appropriate questions to the user.
            // It's sort of like a reward ad! So use the Scene Change behavior with interstial ads checked.
            // This will pause the game. When the question is dismissed, the game will unpause and the system
            // will be notifed with a reward score.
            onCurrentSceneChanged: function (sceneKey, sceneName, enableAdvertisement) {
              if (enableAdvertisement) {
                gse.pause();
                ID.ads.display(function() {
                  // Resume game and sounds
                  gse.unpause();
                });
              }
            },

            /* Uncomment if you want to intercept local storage.
            onSaveTable: function(key, table) {
              return undefined; // Return null if you don't want state to be stored in local storage.
            },

            onSaveAttribute: function(key, value) {
              return undefined; // Return null if you don't want state to be stored in local storage.
            },

            // This function assumes the data has already been loaded by "a loadState response".
            onLoadAttribute: function(key) {
              return undefined; // Return null if you to try looking in local storage
            },
            */

            // Uncomment these if you want to implement leaderboard and achivement functionality
            /*
            onGameCenterPostScore: function (score, leaderboard) {
            },

            onGameCenterUpdateAchievement: function (identifier, percentageComplete) {
            },
            */

            // Override this if you want to do something when the game / scene loads.
            onLoadingBegin: function () {
              engine.showOverlay();
              loadingElement.style.visibility = 'visible';
            },

            // Override this if you want to do something when the game / scene load is complete.
            onLoadingEnd: function () {
              loadingElement.style.visibility = 'hidden';
              engine.hideOverlay();
            },

            // Put code you want to run when the game is ready to start here.
            onGameReady: function (width, height) {
            },

            // Code to run when the window is resized
            onWindowResize: function () {
              engine.relayout(); // Forces relayout of the engine in case the viewport is window size relative.
            }
          };

          engine.appendDelegate(playerDelegate);
          window.addEventListener('resize', playerDelegate.onWindowResize, false);

          // These lines initialize and configure the engine.
          // The choices for engine.setOptions are:
          // viewport-reference = game | frame | window
          // viewport-fit = none | center | fill | letterbox | overscan
          engine.setRenderFrame('gse-player');
          engine.setOptions({
            'viewport-reference': 'window',
            'viewport-fit': 'letterbox'
          });
          engine.loadOptionsFromURL();

          // While the engine is ready, the game assets have not been loaded
          // yet. The final step is to begin loading the game.
          // We have a few options:

          // 1. Begin loading game assets immediately when LoL is ready, from the default game
          // location, and then start the first scene soon as it is complete.
          // This is the simplest option with just one line.

          engine.load();
        });
      };

    }(window));
  </script>
  <script type="text/javascript" src="js/gse/gse-export.js" async onload="onEngineLoad()"></script>
  <script src="https://cdn.y8.com/api/sdk.js" async></script>
</body>
</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!--

	INTRODUCTION:
	This HTML document and related files are a working example of how to embed a
	GameSalad HTML5 game into a website. In all, the necessary files include:

	1. A snippet of HTML elements. (see below: "gse-player" element)
	2. Some CSS declarations. (see file: gse-style.css)
	3. The JavaScript engine file. (see below: script tags)
	4. Some ad-hoc JavaScript code to configure and initialize the game. (see below:
	script tags)
	5. The directory of game data and assets.
	-->
	<title></title>
	<!--

	CSS STYLE:
	The file gse-style.css contains the essential rules required for the engine to
	display properly. However, there are some customizable considerations:

	What appears before the game is loaded? The game will not draw anything until
	the first scene begins. Until then, you can show something else by layering
	elements underneath or on top of the player.

	What appears behind the game as it plays? If the game doesn't scale to fit the
	player area or it uses letterboxing, then there will be empty space around the
	player. You can control what appears in that area either by layering elements
	underneath the player or by setting the background-color or background-image.

	What appears during loading? This document implements a very simple loading
	animation. It can be customized by replacing the image and modifying the CSS
	styling. Or you can modify the JavaScript code to make a different experience.

	-->
	<link rel="stylesheet" type="text/css" href="css/gse-style.css" />
	<link rel="stylesheet" type="text/css" href="css/gse-style-loading.css" />
	<style type="text/css">
	body {
	background-color: black;
	margin: 0;
	padding: 0;
	}
	</style>
	</head>

	<body>
	<!--

	RENDER FRAME and VIEWPORT:
	The render frame is the area of the screen that contains the game. In practice,
	the render frame is an HTML div that we will call "gse-player".
	The viewport is the area inside the render frame that scales and clips the game's
	drawing functions. By customizing the viewport, we can do things like letterbox
	the game within the render frame to better fit different-sized screens.

	Setting up the viewport is achieved with a combination of CSS and JavaScript.
	The size of the gse-player element should be set with CSS.
	The other viewport options are configured with the engine.setOptions() function
	that you will call in the gse.ready() callback.

	Here are some common scenarios:

	1. You want to display the game at the same size as it was designed in Creator.
	- Set the CSS width and height of the gse-player element to 0.
	- viewport-reference = game
	- viewport-fit = none


	2. You want the game to display at a fixed size, but possible larger or smaller
	than the original size from Creator. You will ask the engine to zoom, pad, or
	crop the game best fit in the desired area.
	Letterbox is the easiest approach, but some may prefer overscan if the game
	was designed with it in mind.
	- Set the CSS width and height of the gse-player element to the fixed size.
	- If letterboxing, set a background-image or background-color (e.g. black)
	- viewport-reference = frame
	- viewport-fit = letterbox or overscan (or center or fill, but less common)


	3. You want the game to fill the entire browser window (or parent iframe).
	You may choose letterbox or overscan to fit browsers and screens of different
	sizes.
	- Set the CSS width and height of the gse-player element to 0.
	- viewport-reference = window
	- viewport-fit = letterbox or overscan
	- Use a window resize event handler to call engine.relayout() so that the engine
	can resize itself when the window resizes.

	-->
	<div id="gse-player" class="gse-frame">
	<!-- The engine will create and insert drawing elements here. -->
	<div class="gse-overlay">
	<div id="gse-text" class="gse-dialog">
	<div>
	<button id="gse-text-cancel">Cancel</button>
	<button id="gse-text-done">Done</button>
	<p id="gse-text-prompt"></p>
	</div>
	<div>
	<textarea id="gse-text-input"></textarea>
	</div>
	</div>
	<div id="gse-loading" style="visibility: visible;">
	<img src="images/gse-loading.png" />
	</div>
	</div>
	</div>
	<!--

	LOADING SCRIPT:
	Here we define a callback function and pass it as an argument to gse.ready().
	After the engine has loaded and initialized, it will invoke our callback. At a
	minimum, we must tell the engine where to draw [with engine.setRenderFrame()]
	and where to find the game assets [with engine.play()].

	We can also tinker with some engine options and hook into game events via the
	delegate pattern.

	We must call gse.ready() after the engine file has loaded. There are a few ways
	to accomplish this. See the section below for more detail on that.

	-->
	<script type="text/javascript">
	window.idAsyncInit = function() { // SDK downloaded
	// Uncomment if you are using game services
	/*
	ID.init({
	appId : 'YOUR APP ID'
	});
	*/

	ID.Event.subscribe('id.init', function() { // SDK initialized
	ID.ads.init('YOUR GAME ID');
	});
	};

	(function (global) {

	// This function is called after the engine script file has loaded.
	// At that point, the gse.ready function has be defined and we can call it.
	global.onEngineLoad = function () {

	// gse.ready() is a global function defined by the engine JavaScript
	// file. It is the only global function of the API and the only way to
	// initially interact with the game. The remainder of the API is object-
	// oriented.
	// We define a ready callback function and pass it to gse.ready().
	// Later, that callback will be invoked when the engine is ready.
	// Via the callback's arguments, the GameSalad code passes us back an
	// object called "engine" which implements several useful API functions.
	gse.ready(function (engine) {

	// These bits of code are optional. This demonstration shows how to
	// use a delegate to control a loading animation that spins in
	// between scene loads.
	// A delegate is a JavaScript object that receives callback from the
	// engine on particular events.
	// To customize this animation, you can replace the gse-loading.png
	// image with another, and you can tailor the CSS styling and
	// animation to match (say, make it bounce instead of spin).
	// Or, you can replace this entirely with your own JavaScript code.
	var loadingElement = document.getElementById('gse-loading');

	var playerDelegate = {
	/*
	onIAPRequestPurchaseData () {
	},
	*/

	// As a very general purpose behavior, this is a great place to receive messages from the engine
	// that wouldn't be handled in another delegate.
	onTweetSheet: function (msg, img) {
	},

	// LoL has the ability to display subject appropriate questions to the user.
	// It's sort of like a reward ad! So use the Scene Change behavior with interstial ads checked.
	// This will pause the game. When the question is dismissed, the game will unpause and the system
	// will be notifed with a reward score.
	onCurrentSceneChanged: function (sceneKey, sceneName, enableAdvertisement) {
	if (enableAdvertisement) {
	gse.pause();
	ID.ads.display(function() {
	// Resume game and sounds
	gse.unpause();
	});
	}
	},

	/* Uncomment if you want to intercept local storage.
	onSaveTable: function(key, table) {
	return undefined; // Return null if you don't want state to be stored in local storage.
	},

	onSaveAttribute: function(key, value) {
	return undefined; // Return null if you don't want state to be stored in local storage.
	},

	// This function assumes the data has already been loaded by "a loadState response".
	onLoadAttribute: function(key) {
	return undefined; // Return null if you to try looking in local storage
	},
	*/

	// Uncomment these if you want to implement leaderboard and achivement functionality
	/*
	onGameCenterPostScore: function (score, leaderboard) {
	},

	onGameCenterUpdateAchievement: function (identifier, percentageComplete) {
	},
	*/

	// Override this if you want to do something when the game / scene loads.
	onLoadingBegin: function () {
	engine.showOverlay();
	loadingElement.style.visibility = 'visible';
	},

	// Override this if you want to do something when the game / scene load is complete.
	onLoadingEnd: function () {
	loadingElement.style.visibility = 'hidden';
	engine.hideOverlay();
	},

	// Put code you want to run when the game is ready to start here.
	onGameReady: function (width, height) {
	},

	// Code to run when the window is resized
	onWindowResize: function () {
	engine.relayout(); // Forces relayout of the engine in case the viewport is window size relative.
	}
	};

	engine.appendDelegate(playerDelegate);
	window.addEventListener('resize', playerDelegate.onWindowResize, false);

	// These lines initialize and configure the engine.
	// The choices for engine.setOptions are:
	// viewport-reference = game \| frame \| window
	// viewport-fit = none \| center \| fill \| letterbox \| overscan
	engine.setRenderFrame('gse-player');
	engine.setOptions({
	'viewport-reference': 'window',
	'viewport-fit': 'letterbox'
	});
	engine.loadOptionsFromURL();

	// While the engine is ready, the game assets have not been loaded
	// yet. The final step is to begin loading the game.
	// We have a few options:

	// 1. Begin loading game assets immediately when LoL is ready, from the default game
	// location, and then start the first scene soon as it is complete.
	// This is the simplest option with just one line.

	engine.load();
	});
	};

	}(window));
	</script>
	<script type="text/javascript" src="js/gse/gse-export.js" async onload="onEngineLoad()"></script>
	<script src="https://cdn.y8.com/api/sdk.js" async></script>
	</body>
	</html>