index.jade

doctype 5
html
  head
    link(href='/stylesheets/style.css', rel='stylesheet')
    script(src='http://code.jquery.com/jquery-1.6.1.min.js')
    script(src='/socket.io/socket.io.js')
    script
      // socket.io specific code
      var socket = io.connect();

      socket.on('connect', function () {
        $('#chat').addClass('connected');
      });

      socket.on('announcement', function (msg) {
        $('#lines').append($('<p>').append($('<em>').text(msg)));
      });

      socket.on('nicknames', function (nicknames) {
        $('#nicknames').empty().append($('<span>Current Qwirklistes: </span>'));
        for (var i=0;i<nicknames.length;i++) {
          $('#nicknames').append($('<b>').text(nicknames[i].name));
        }
      });
      socket.on('tiles', function (tiles){    
      for(var i in tiles.hand){
        $('#tiles').append($('<p>').text(tiles.hand[i]));
      };
      });
      socket.on('user message', message);
      socket.on('reconnect', function () {
        $('#lines').remove();
        message('System', 'Reconnected to the server');
      });

      socket.on('reconnecting', function () {
        message('System', 'Attempting to re-connect to the server');
      });

      socket.on('error', function (e) {
        message('System', e ? e : 'A unknown error occurred');
      });

      function message (from, msg) {
        $('#lines').append($('<p>').append($('<b>').text(from), msg));
      }

      // dom manipulation
      $(function () {
        $('#set-nickname').submit(function (ev) {
          socket.emit('nickname', $('#nick').val(), function (set) {
            if (!set) {
              clear();
              return $('#chat').addClass('nickname-set');
            }
            $('#nickname-err').css('visibility', 'visible');
          });
          return false;
        });

        $('#send-message').submit(function () {
          message('me', $('#message').val());
          socket.emit('user message', $('#message').val());
          clear();
          $('#lines').get(0).scrollTop = 10000000;
          return false;
        });

        function clear () {
          $('#message').val('').focus();
        };
      });
  body
    div#logo

    #chat     
      #nickname
        form.wrap#set-nickname
          p Please type in your nickname and press enter or click 
          button Join
          input#nick
          p#nickname-err You cannot join this game
      #connecting
        .wrap Connecting to socket.io server
      #game
        #nicknames
        #board
        #tiles        
          p Your tiles are:
        #scores
          p The scores are: