castrax/receiver.html

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body {
        overflow:hidden;
      }
    </style>
    <title>CasTrax</title>
    <script src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
    <script src="phaser.js"></script>
    <script src="field.js"></script>
    <script src="config.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      const game = new Phaser.Game(config);
      window.onload = function() {
        cast.receiver.logger.setLevelValue(0);
        window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance();
        console.log('Starting Receiver Manager');


          // handler for the 'ready' event
        castReceiverManager.onReady = function(event) {
          console.log('Received Ready event: ' + JSON.stringify(event.data));
          window.castReceiverManager.setApplicationState('Application status is ready...');
        };

        // handler for 'senderconnected' event
        castReceiverManager.onSenderConnected = function(event) {
          console.log('Received Sender Connected event: ' + event.data);
          console.log(window.castReceiverManager.getSender(event.data).userAgent);
        };

        // handler for 'senderdisconnected' event
        castReceiverManager.onSenderDisconnected = function(event) {
          console.log('Received Sender Disconnected event: ' + event.data);
          if (window.castReceiverManager.getSenders().length == 0) {
            window.close();
          }
        };

        // handler for 'systemvolumechanged' event
        castReceiverManager.onSystemVolumeChanged = function(event) {
          console.log('Received System Volume Changed event: ' + event.data['level'] + ' ' +
              event.data['muted']);
        };

        // create a CastMessageBus to handle messages for a custom namespace
        window.messageBus =
          window.castReceiverManager.getCastMessageBus(
              'urn:x-cast:com.positiverobot.castrax');

        // handler for the CastMessageBus message event
        window.messageBus.onMessage = function(event) {
          console.log('Message [' + event.senderId + ']: ' + event.data);
          // display the message from the sender
          displayText(event.data);

          document.dispatchEvent(keyUp(event.data));

          //game.scene.scenes[0].emit('keyup_' + event.data);

          // inform all senders on the CastMessageBus of the incoming message event
          // sender message listener will be invoked
          window.messageBus.send(event.senderId, event.data);
        }

        // initialize the CastReceiverManager with an application status message
        window.castReceiverManager.start({statusText: 'Application is starting'});
        console.log('Receiver Manager started');
      };

      // utility function to display the text message in the input field
      function displayText(text) {
        console.log(text);
        document.getElementById('message').innerText = text;
        window.castReceiverManager.setApplicationState(text);
      };

      function keyDown(key) {
          return createKeyboardEvent('keydown', key);
      }

      function keyUp(key) {
          return createKeyboardEvent('keyup', key);
      }

      function createKeyboardEvent(name, key) {
          var e = new Event(name)
          e.key = key
          e.keyCode = e.key.charCodeAt(0)
          e.which = e.keyCode
          e.altKey = false
          e.ctrlKey = false
          e.shiftKey = false
          e.metaKey =  false
          e.bubbles = true
          return e
      }

    </script>
    <div id="message">Tank</div>
  </body>
</html>