piehei/example_game.html

## example_game.html
<!DOCTYPE html>
<html>
<head>
  <title>Test Game</title>
  <meta charset="utf-8"/>
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script>
  /* global $, alert */

  $(document).ready( function() {
    "use strict";

    // These variable track the state of this "game"
    var playerItems = [];
    var points = 0;

    // Simulates "game over" when a score would be sent
    $("#submit_score").click( function () {
      var msg = {
        "messageType": "SCORE",
        "score": parseFloat($("#score").text())
      };
      window.parent.postMessage(msg, "*");
    });

    // Sends this game's state to the service.
    // The format of the game state is decided
    // by the game
    $("#save").click( function () {
      var msg = {
        "messageType": "SAVE",
        "gameState": {
          "playerItems": playerItems,
          "score": parseFloat($("#score").text())
        }
      };
      window.parent.postMessage(msg, "*");
    });

    // Sends a request to the service for a
    // state to be sent, if there is one.
    $("#load").click( function () {
      var msg = {
        "messageType": "LOAD_REQUEST",
      };
      window.parent.postMessage(msg, "*");
    });

    // Listen incoming messages, if the messageType
    // is LOAD then the game state will be loaded.
    // Note that no checking is done, whether the
    // gameState in the incoming message contains
    // correct information.
    //
    // Also handles any errors that the service
    // wants to send (displays them as an alert).
    window.addEventListener("message", function(evt) {
      if(evt.data.messageType === "LOAD") {
        playerItems = evt.data.gameState.playerItems;
        points = evt.data.gameState.score;
        $("#score").text(points);
        updateItems();
      } else if (evt.data.messageType === "ERROR") {
        alert(evt.data.info);
      }
    });

    // This is part of the mechanics of the "game"
    // it does not relate to the messaging with the
    // service.
    //
    // Adds an item to the players inventory
    $("#add_item").click( function () {
      playerItems.push("A rock");
      $("#new_item").val("");
      updateItems();
    });

    $("#add_points").click(function () {
      points += 10;
      $("#score").text(points);
    });

    // This is part of the mechanics of the "game"
    // it does not relate to the messaging with the
    // service.
    //
    // "Redraws" the inventory of the player. Used
    // when items are added or the game is loaded
    function updateItems() {
      $("#item_list").html("");
      for (var i = playerItems.length - 1; i >= 0; i--) {
        $("#item_list").append("<li>" + playerItems[i] + "</li>");
      }
    }

    // Request the service to set the resolution of the
    // iframe correspondingly
    var message =  {
      messageType: "SETTING",
      options: {
      	"width": 700, //Integer
        "height": 300 //Integer
        }
    };
    window.parent.postMessage(message, "*");

  });
  </script>
</head>
<body>

  <button id="add_item">Add a stone to backbag</button>
  <button id="add_points">Add 10 points</button>

  <h3>Backbag</h3>
  <ul id="item_list"></ul>
  <div><span  id="score">0</span> Points</div>

  <button id="submit_score">Submit score</button><br>

  <button id="save">Save</button>
  <button id="load">Load</button>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Test Game</title>
	<meta charset="utf-8"/>
	<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script>
	/* global $, alert */

	$(document).ready( function() {
	"use strict";

	// These variable track the state of this "game"
	var playerItems = [];
	var points = 0;

	// Simulates "game over" when a score would be sent
	$("#submit_score").click( function () {
	var msg = {
	"messageType": "SCORE",
	"score": parseFloat($("#score").text())
	};
	window.parent.postMessage(msg, "*");
	});

	// Sends this game's state to the service.
	// The format of the game state is decided
	// by the game
	$("#save").click( function () {
	var msg = {
	"messageType": "SAVE",
	"gameState": {
	"playerItems": playerItems,
	"score": parseFloat($("#score").text())
	}
	};
	window.parent.postMessage(msg, "*");
	});

	// Sends a request to the service for a
	// state to be sent, if there is one.
	$("#load").click( function () {
	var msg = {
	"messageType": "LOAD_REQUEST",
	};
	window.parent.postMessage(msg, "*");
	});

	// Listen incoming messages, if the messageType
	// is LOAD then the game state will be loaded.
	// Note that no checking is done, whether the
	// gameState in the incoming message contains
	// correct information.
	//
	// Also handles any errors that the service
	// wants to send (displays them as an alert).
	window.addEventListener("message", function(evt) {
	if(evt.data.messageType === "LOAD") {
	playerItems = evt.data.gameState.playerItems;
	points = evt.data.gameState.score;
	$("#score").text(points);
	updateItems();
	} else if (evt.data.messageType === "ERROR") {
	alert(evt.data.info);
	}
	});

	// This is part of the mechanics of the "game"
	// it does not relate to the messaging with the
	// service.
	//
	// Adds an item to the players inventory
	$("#add_item").click( function () {
	playerItems.push("A rock");
	$("#new_item").val("");
	updateItems();
	});

	$("#add_points").click(function () {
	points += 10;
	$("#score").text(points);
	});

	// This is part of the mechanics of the "game"
	// it does not relate to the messaging with the
	// service.
	//
	// "Redraws" the inventory of the player. Used
	// when items are added or the game is loaded
	function updateItems() {
	$("#item_list").html("");
	for (var i = playerItems.length - 1; i >= 0; i--) {
	$("#item_list").append("<li>" + playerItems[i] + "</li>");
	}
	}

	// Request the service to set the resolution of the
	// iframe correspondingly
	var message = {
	messageType: "SETTING",
	options: {
	"width": 700, //Integer
	"height": 300 //Integer
	}
	};
	window.parent.postMessage(message, "*");

	});
	</script>
	</head>
	<body>

	<button id="add_item">Add a stone to backbag</button>
	<button id="add_points">Add 10 points</button>

	<h3>Backbag</h3>
	<ul id="item_list"></ul>
	<div><span id="score">0</span> Points</div>

	<button id="submit_score">Submit score</button><br>

	<button id="save">Save</button>
	<button id="load">Load</button>
	</body>
	</html>