index.jade

doctype 5
html
  head
    title Coding Contest - Pong
    style(type='text/css')
      #myCanvas { 
        border: 1px solid black;
        background: red
      }
    script(type='text/javascript')
      (function() {
        var canvas;
        var context;
        var x, y;
        var paddleLeft, paddleRight;
        var radius = 10;
        var config;


        function getHash() {
          var hash = window.location.hash;
          return hash.substring(1); // remove #
        }

        function getBaseUrl() {
          return getHash().split('&')[0] || 'http://localhost:#{port}/';
        }

        function getGameName() {
        return getHash().split('&')[1] || '#{game}';
        }

        function circle(x, y, radius, color) {
          context.beginPath();
          context.arc(x, y, radius, 0, 2 * Math.PI, false);
          context.fillStyle = color;
          context.fill();
        }

        function rectangle(x, y, width, height, color) {
          context.beginPath();
          context.rect(x, y, width, height);
          context.fillStyle = color;
          context.fill();
        }

        function updateField(err, status)
        {
          if (status) {
            radius = config.BALL_RADIUS;
            circle(x, y, radius+1, 'white');
            rectangle(0, paddleLeft-config.PADDLE_HEIGHT/2, 
            config.PADDLE_WIDTH, config.PADDLE_HEIGHT, 'white');
            rectangle(config.FIELD_WIDTH, paddleRight-config.PADDLE_HEIGHT/2, 
            config.PADDLE_WIDTH, config.PADDLE_HEIGHT, 'white');
            x = status.ball[0];
            y = status.ball[1];
            paddleLeft = status.paddleLeft;
            paddleRight = status.paddleRight;
            circle(x, y, radius, 'green');
            rectangle(0, paddleLeft-config.PADDLE_HEIGHT/2, 
            config.PADDLE_WIDTH, config.PADDLE_HEIGHT, 'red');
            rectangle(config.FIELD_WIDTH-config.PADDLE_WIDTH, 
            paddleRight-config.PADDLE_HEIGHT/2, 
            config.PADDLE_WIDTH, config.PADDLE_HEIGHT, 'blue');
          }
          setTimeout(function() {
            requestStatus(updateField);
          }, 100);
        }

        function requestConfig(configDone) {
          request('game/' + getGameName() + '/config', configDone);
        }

        function requestStatus(statusDone) {
          request('game/' + getGameName() + '/status', statusDone);
        }

        function request(url, requestDone) {
          var request = new XMLHttpRequest(); 
          request.open('GET', getBaseUrl() + url, true); ;
          request.setRequestHeader ("Accept", "application/json");
          request.onreadystatechange = function () { ;
            if (request.readyState != 4 || request.status != 200) {
              return;
            }
            requestDone(null, JSON.parse(request.responseText));
          }; 
          request.send();
        }

        window.onload = function(){
          canvas = document.getElementById("field");
          context = canvas.getContext("2d");
          requestConfig(function(err, newConfig) {
            config = newConfig; 
            updateField();
          });
        };
      }());
  body
    canvas#field(width=800, height=600)