Fire JS Bin - WPilot

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

// The globallly defined wpilot client. It's global so that the player can
// access options from the webkit console (or FireBug).
var wpilot = null;

// Set location for the WebSocket SWF library.
WebSocket.__swfLocation = "/attach/wpilots/WebSocketMain.swf";

function supports_canvas_text() {
  if (!document.createElement('canvas').getContext) {
    return false;
  }
  var dummy_canvas = document.createElement('canvas');
  var context = dummy_canvas.getContext('2d');
  return typeof context.fillText == 'function';
}

function unsupported(text) {
  $('#splash .notice').text(text);
}

/**
 *  Is called when the document is loaded and ready. Creates a new client.
 */
$(document).ready(function () {
  if (WebSocket.__initialize && swfobject.getFlashPlayerVersion()['major'] < 1) {
    //return unsupported('Your browser doesnt support WebSocket or Flash');
    return console.log('Your browser doesnt support WebSocket or Flash');
  }

if (!supports_canvas_text()) {
    //return unsupported('Your browser doesnt support <canvas> or fillText.');
    return console.log('Your browser doesnt support <canvas> or fillText.');
  }

if (!$.query.get('url')) {
    //return unsupported('Missing setting "url".');
    console.log('Missing setting "url".".');
  }

if (!$.query.get('name')) {
    //return unsupported('Missing setting "name".');
  }

if (!$.query.get('fg-sound')) {
    //return unsupported('Missing setting "fg-sound".');
  }

if (!$.query.get('bg-sound')) {
    //return unsupported('Missing setting "bg-sound".');
  }

var url = $.query.get('url') || 'ws://209.20.88.121:6114'; // 6115, 6116

var options = $.extend({}, DEFAULT_OPTIONS);

options.name = $.query.get('name') || 'firejune';
  options.sfx_sound_enabled = eval($.query.get('fg-sound') || true);
  options.bg_sound_enabled = eval($.query.get('bg-sound') || true);

var canvas = $('#viewport canvas');

var viewport = new ViewportDevice(canvas[0], canvas.width(), canvas.height(), options),
      keyboard = new KeyboardDevice(document, options),
      sound = new SoundDevice(options);

wpilot = new WPilotClient(options);
  wpilot.set_viewport(viewport)
  wpilot.set_input(keyboard);
  wpilot.set_sound(sound);

wpilot.onconnect = function () {
    $('#splash').hide();
  }

wpilot.ondisconnect = function (reason) {
    wpilot.onconnect = null;
    wpilot.disconnect = null;
    wpilot.set_viewport(null);
    wpilot.set_input(null);
    wpilot.set_sound(null);
    wpilot = null;

viewport.destroy();
    keyboard.destroy();
    sound.destroy();
    viewport = keyboard = sound = null;

$('#splash').show();

if (reason) {
      $('#splash .notice').text('Disconnected: ' + reason).parent().append('<p><a href="./">Go back to server list</a></p>');
    }
  }

function dojoin() {

$('#splash .notice').text('Connecting to game server, please wait...');

wpilot.join(url);
  }

$('.dialog .version').html('WPilot client version ' + CLIENT_VERSION);

setTimeout(dojoin, 500);
});

<!doctype html>
<html>
  <head>
    <title>WPilot</title>
    <script type="text/javascript" src="/attach/wpilots/match.js"></script>
    <script type="text/javascript" src="/attach/wpilots/swfobject.js"></script>
    <script type="text/javascript" src="/attach/wpilots/FABridge.js"></script>
    <script type="text/javascript" src="/attach/wpilots/web_socket.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="/attach/wpilots/jquery.query.js"></script> 
    <script type="text/javascript" src="/attach/wpilots/particle.js"></script>
    <script type="text/javascript" src="/attach/wpilots/devices.js"></script>
    <script type="text/javascript" src="/attach/wpilots/gameobjects.js"></script>
    <script type="text/javascript" src="/attach/wpilots/wpilot.js"></script> 
  </head>
  <body> 
    <div id="viewport" class="mode540"> 
      <canvas></canvas> 
    </div> 
    <div id="splash" class="dialog"> 
      <h1 class='logo'>WPilot</h1> 
      <div class="notice"> 
        Initializing game...
      </div> 
      <p class="version"></p> 
    </div> 
  </body>
</html>

html {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: Arial;  
  background: #222;
}

h1 {
    color: white;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  color: white;
  text-align: center;
  font-size: 22px;
  padding: 10px;
}

a {
  color: #33B6FF;
}

#viewport {
  position: absolute;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(255,255,255, 0.2);
  left: 50%;
  top: 50%;
}

#viewport.mode480 {
  margin-left: -360px;
  margin-top: -240px;
  width: 720px;
  height: 480px;
}

#viewport.mode540 {
  margin-left: -432px;
  margin-top: -270px;
  width: 864px;
  height: 540px;
}

#viewport.mode594 {
  margin-left: -480px;
  margin-top: -297px;
  width: 960px;
  height: 594px;
}

#viewport.mode720 {
  margin-left: -640px;
  margin-top: -360px;
  width: 1280px;
  height: 720px;
}

#viewport canvas {
  width: 100%;
  height: 100%;
}

.dialog {
  position: absolute;
  color: white;
  background: rgba(255,255,255, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.2);
  left: 50%;
  top: 50%;
  width: 540px;
  height: 320px;
  margin-left: -270px;
  margin-top: -160px;
}

.dialog h1 {
  background: url(/attach/wpilots/logo.png) center center no-repeat;
  text-indent: -100000px;
  height: 70px;
}

.dialog p.version {
  position: absolute;
  left: 5px;
  bottom: 0px;
  font-size: 9px;
  color: #666666;
}

.dialog .notice {
  display: block;
  padding-top: 60px;
  text-align: center;
  color: #FFD700;
  height: 120px;
}

.dialog p {
  text-align: center;
  margin: 0 0 12px 0;
  color: #ccc;
  font-size: 0.8em;  
}

#splash .actions {
  position: relative;
  font-size: 0.7em;
  color: #666666;
  margin-left: 147px;
  padding-top: 10px;
  text-align: left;
}

.dialog  button {
  border-size: 1px;
  border-color: rgba(255, 255, 255, 0.6);
  border-radius: 2px;
  color: #ffffff;
  background: black;
}

Pop out