<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
<ModulePrefs title="State Example" height="440">
  <Require feature="rpc" /> 
  <Require feature="wave" /> 
</ModulePrefs>
<Content type="html">
<![CDATA[ 
<script src="http://apps.technohippy.net/animal-shogi/prototype.js"></script>
<script src="http://apps.technohippy.net/animal-shogi/scriptaculous.js"></script>
<script src="http://apps.technohippy.net/animal-shogi/builder.js"></script>
<script src="http://apps.technohippy.net/animal-shogi/effects.js"></script>
<script src="http://apps.technohippy.net/animal-shogi/controls.js"></script>
<script src="http://apps.technohippy.net/animal-shogi/slider.js"></script>
<script src="http://apps.technohippy.net/animal-shogi/dragdrop.js"></script>
<script src="http://apps.technohippy.net/animal-shogi/m17n.js" charset="UTF-8"></script>
<script src="http://apps.technohippy.net/animal-shogi/animal-shogi.js" charset="UTF-8"></script>
<script>
  function init() {
    window.game = new AnimalShogiGame({containerId:'animal-shogi'});
    if (wave && wave.isInWaveContainer()) {
      wave.setStateCallback(window.game.stateChanged.bind(window.game));
    }
    window.game.show();
  }
  gadgets.util.registerOnLoadHandler(init);
</script>
<link rel="stylesheet" href="http://apps.technohippy.net/animal-shogi/animal-shogi.css" type="text/css" />
<div id="test">
  <button onclick="window.game.setPlayer(wave.getViewer().getId())">Join</button>
  <button onclick="window.game.setPlayer(new wave.Participant().getId(), true);">Add Player</button>
  <button onclick="javascript:window.game.nextTurn()">Next Turn</button>
  <input id="state" value="piece:'giraffe_player2', from:[0,0], to:[0,1]" style="width:250px" />
  <script>
    function invokeMove() {
      var value = eval('({' + $('state').value + '})');
      var piece = Piece.selectByName(value.piece);
      var fromCell = window.game.board.getCell(value.from[0], value.from[1]);
      var toCell = window.game.board.getCell(value.to[0], value.to[1]);
      piece.move(fromCell, toCell);
      window.game.nextTurn();
    }
  </script>
  <button onclick="javascript:invokeMove(); $('state').value = 'piece:\'giraffe_player2\', from:[0,1], to:[0,2]'">Move</button>
  <button onclick="javascript:$('json').innerHTML = window.game.toHTML()">toJSON</button>
</div>
<div id="sidebar">
  <div id="control-panel" class="sidebar-panel">
    <h2 class="t">player</h2>
    <div id="player1-panel" class="player"><span class="t">sente</span><span class="t">waiting</span></div>
    <div id="player2-panel" class="player"><span class="t">gote</span><span class="t">waiting</span></div>
  </div>
  <div id="message" class="sidebar-panel">
    <h2 class="t">message</h2>
    <div id="message-body"></div>
  </div>
  <div id="captured" class="sidebar-panel">
    <h2 class="t">others_captured</h2>
    <div id="opponent-captured"></div>
    <h2 class="t">my_captured</h2>
    <div id="my-captured"></div>
  </div>
  <div style="text-align:right;">
    <a href="http://en.wikipedia.org/wiki/D%C5%8Dbutsu_sh%C5%8Dgi" target="_blank" class="t">help</a>
  </div>
</div>
<div id="animal-shogi"></div>
<button id="join-button" class="join t" onclick="window.game.setPlayer(wave.getViewer().getId()); this.hide();">join</button>
<!--pre id="json" style="margin-top:380px;"></pre-->
]]> 
</Content>
</Module>
