Serving Hangouts from Gists

app.xml

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Hangout Starter">
  <Require feature="rpc" />
  <Require feature="views" />
</ModulePrefs>
<Content type="html"><![CDATA[
<script src="//talkgadget.google.com/hangouts/_/api/hangout.js?v=1.1"></script>
<style>
.guess {
  color: green;
}
</style>
<script>
var answer = 'nom';

function showParticipants() {
  var participants = gapi.hangout.getParticipants();

  var retVal = '<p>Participants: </p><ul>';

  for ( var index in participants ) {
    var participant = participants[index];

    if( hasGuessed( participant.id ) ) {
      retVal += '<li class="guess">';
    } else {
      retVal += '<li>';
    }

    retVal += participant.person.displayName+ '</li>';
  }

  retVal += '</ul>';

  var div = document.querySelector('#participants');

  div.innerHTML = retVal;
}

function guess(){
  gapi.hangout.data.setValue( gapi.hangout.getParticipantId(), "true");

  document.querySelector('#guess').disabled = 'disabled';

  guessedCorrectly();
}

function hasGuessed(id){
  var guessed = gapi.hangout.data.getValue(id);
  return  guessed;
}

function guessedCorrectly(){
  if( document.querySelector('#guess').value === "nom" ) {
    var nyan = gapi.hangout.av.effects.createImageResource('http://t2ak.roblox.com/211849f350913e2fad980ab1d50fc4f8');
    nyan.showOverlay( {'scale':
       {'magnitude': 0.5,
        'reference': gapi.hangout.av.effects.ScaleReference.WIDTH}} );
  }
}

function myEventHandlers() {
  gapi.hangout.onParticipantsChanged.add(showParticipants);
  gapi.hangout.data.onStateChanged.add(showParticipants);
}


function startMyApp() {
  showParticipants();
}

function init() {
  gapi.hangout.onApiReady.add(
      function(eventObj) {
        if (eventObj.isApiReady) {
          myEventHandlers();
          startMyApp();
        }
      });
}

gadgets.util.registerOnLoadHandler(init);
</script>

<h3>Guess that pastry</h3>

<img src="//farm3.staticflickr.com/2705/5799948301_99c92573f1_q.jpg" alt=""/>

<br />

<p>Your guess?</p>
<input type="text" id="guess"/><button id="save" onclick="javascript:guess()">Guess</button>

<div id="participants"></div>
]]>
</Content>
</Module>