mud.js

   1 $(document).ready(function(){
   2
   3     var canvas = $('#universe')[0];
   4     var c = canvas.getContext('2d');
   5     var endpoint = '/mud/mud.php';
   6
   7     function player(x, y, id) {
   8         this.x = x;
   9         this.y = y;
  10         this.id = id;
  11         self = this;
  12
  13         mud.rooms[this.x][this.y].join();
  14
  15         this.move = function(direction) {
  16             var rooms = mud.rooms;
  17
  18             function move(direction, oldroom, newroom) {
  19                 $.get(endpoint, {
  20                         'cmd' : 'move',
  21                         'direction' : direction
  22                     }, function(json) {
  23                         oldroom.clear();
  24                         newroom.join();
  25                         if (json && json.description)
  26                             writeToLog('', 'env', json.description);
  27                     }
  28                 );
  29             }
  30             switch (direction) {
  31                 case 'left':
  32                 case 'west':
  33                     if (rooms[this.x-1] && rooms[this.x-1][this.y]
  34                             && !rooms[this.x-1][this.y].state) {
  35                         move('west', rooms[self.x][self.y], rooms[self.x-1][self.y])
  36                         this.x--;
  37                     }
  38                     break;
  39                 case 'up':
  40                 case 'north':
  41                     if (rooms[this.x][this.y-1]
  42                             && !rooms[this.x][this.y-1].state) {
  43                         move('north', rooms[this.x][this.y], rooms[this.x][this.y-1]);
  44                         this.y--;
  45                     }
  46                     break;
  47                 case 'right':
  48                 case 'east':
  49                     if (rooms[this.x+1] && rooms[this.x+1][this.y]
  50                         && !rooms[this.x+1][this.y].state) {
  51                         move('east', rooms[this.x][this.y], rooms[this.x+1][this.y]);
  52                         this.x++;
  53                     }
  54                     break;
  55                 case 'down':
  56                 case 'south':
  57                     if (rooms[this.x][this.y+1]
  58                         && !rooms[this.x][this.y+1].state) {
  59                         move('south', rooms[this.x][this.y], rooms[this.x][this.y+1]);
  60                         this.y++;
  61                     }
  62                     break;
  63             }
  64         }
  65     }
  66
  67     function room(x, y, width, height) {
  68         this.x = x;
  69         this.y = y;
  70         this.width = width;
  71         this.height = height;
  72         this.state = 0;
  73         this.population = 0;
  74         this.fill = function() {
  75             c.fillStyle = "rgb(0,0,0)";
  76             c.fillRect(this.x, this.y, this.height, this.width);
  77             this.state = 1;
  78         }
  79         this.clear = function(other, player) {
  80             this.state = 0;
  81             this.population--;
  82             if (!this.population) {
  83                 c.fillStyle = "rgb(255,255,255)";
  84                 c.fillRect(this.x, this.y, this.height, this.width);
  85             }
  86         }
  87         this.join = function(other, player) {
  88             c.fillStyle = !other || (player && mud && mud.player
  89                                     && mud.player.x == player.x && mud.player.y == player.y)
  90                             ? "rgb(0,255,0)" : "rgb(0,0,255)";
  91             c.fillRect(this.x, this.y, this.height, this.width);
  92             this.population++;
  93         }
  94     }
  95
  96     function universe() {
  97
  98         var self = this;
  99         this.rooms = [];
 100         this.players = [];
 101
 102         this.build = function(seed) {
 103             this.rows = seed.length;
 104             this.columns = seed[0].length;
 105             this.roomWidth = canvas.width / this.rows;
 106             this.roomHeight = canvas.height / this.columns;
 107
 108             for (var i = 0; i < this.columns; i++) {
 109                 this.rooms[i] = [];
 110                 var x = i * this.roomWidth;
 111                 var y = 0;
 112                 for (var ii = 0; ii < this.rows; ii++) {
 113                     this.rooms[i][ii] = new room(x, y, this.roomWidth, this.roomHeight);
 114                     if (seed[i][ii]) this.rooms[i][ii].fill();
 115                     y += this.roomHeight;
 116                 }
 117             }
 118         }
 119
 120         this.join = function(name) {
 121             $.getJSON(endpoint, { 'cmd' : 'join', 'name' : name }, function(json) {
 122                 self.player = new player(json.x, json.y, json.id);
 123                 setInterval(self.poll, 1000);
 124                 self.populate(json.poll.players);
 125             });
 126         }
 127
 128         var commands = {
 129             tell : function(msg) {
 130                 var parts = msg.match(/^(\w+)\s(.*)/);
 131                 if (!parts[1]) return;
 132                 var dest = parts[1];
 133                 msg = parts[2];
 134                 $.ajax({
 135                     url: endpoint,
 136                     data: { 'cmd' : 'tell', 'dest' : dest, 'msg' : msg },
 137                     success: function() {
 138                       self.writeToLog('You told ' + dest + ': ', 'tell', msg);
 139                     },
 140                 });
 141             },
 142             yell : function(msg) {
 143                 $.ajax({
 144                     url: endpoint,
 145                     data: { 'cmd' : 'yell', 'msg' : msg },
 146                     success: function() {
 147                         self.writeToLog('You yelled: ', 'yell', msg);
 148                     },
 149                 });
 150             },
 151             say : function(msg) {
 152                 $.ajax({
 153                     url: endpoint,
 154                     data: { 'cmd' : 'say', 'msg' : msg },
 155                     success: function() {
 156                         self.writeToLog('You said: ', 'say', msg);
 157                     },
 158                 });
 159             },
 160             move : function(direction) {
 161                 this.player.move(direction);
 162             },
 163         }
 164         this.writeToLog = function(action, style, msg) {
 165             $('#log').append(
 166                 $('<div>').addClass('logline').append(
 167                     $('<span>').addClass(style).text(action),
 168                     $('<span>').addClass('msg').text(msg)
 169                 )
 170             );
 171             $("#log").animate({ scrollTop: $('#log')[0].scrollHeight}, 1000);
 172         }
 173         $('#submit').click(function() {
 174             var text = $('#chat').val();
 175             var parts = text.match(/^(\w+)\s(.*)/);
 176             if (parts) {
 177                 var cmd = parts[1];
 178                 text = parts[2];
 179                 if (commands[cmd] != undefined) {
 180                     commands[cmd](text);
 181                     $('#chat').val('');
 182                 }
 183             }
 184         });
 185         $('#chat').keydown(function(e) {
 186             if (e.which == '13') {
 187                 typeof self.player == 'undefined' ?
 188                     $('#join').click() : $('#submit').click();
 189             } else if (e.which >= 37 && e.which <= 40)
 190                 e.stopPropagation();
 191         });
 192         $('#join').click(function() {
 193             var chat = $('#chat');
 194             if (chat.val() == '') {
 195                 chat.css('border-color', 'red');
 196                 return;
 197             }
 198             mud.join(chat.val());
 199             chat.css('border-color', 'black').val('');
 200             $(this).fadeOut('slow', function() {
 201                 $('#log, #submit').fadeIn('slow')
 202                     .css('display', 'inline-block');
 203             });
 204         });
 205
 206         $(document).keydown(function(e) {
 207             if (typeof self.player == 'undefined') return;
 208             switch (e.which) {
 209                 case 37:
 210                     self.player.move('left');
 211                     break;
 212                 case 38:
 213                     self.player.move('up');
 214                     break;
 215                 case 39:
 216                     self.player.move('right');
 217                     break;
 218                 case 40:
 219                     self.player.move('down');
 220                     break;
 221                 default:
 222                     return;
 223             }
 224             e.preventDefault();
 225         });
 226
 227         $.getJSON(endpoint, { 'cmd' : 'start' }, function(json) {
 228             self.build(json)
 229         }).fail(function(jqxhr, textStatus, error) {
 230             console.log(jqxhr, jqxhr.responseText, textStatus, error);
 231         });
 232
 233         this.populate = function(players) {
 234             for (var i in this.players)
 235                 if (this.players[i].id != this.player.id)
 236                     mud.rooms[this.players[i].x][this.players[i].y].clear();
 237             this.players = players;
 238             for (var i in this.players)
 239                 if (this.players[i].id != this.player.id)
 240                     mud.rooms[this.players[i].x][this.players[i].y].join(1, this.players[i]);
 241         }
 242
 243         this.poll = function() {
 244             $.getJSON(endpoint, { 'cmd' : 'poll' }, function(json) {
 245                 for (var i in json.messages) {
 246                     var msg = json.messages[i];
 247                     if (msg.id == self.player.id) continue;
 248                     self.writeToLog(msg.name + ':', msg.type, msg.message);
 249                     $("#log").animate({ scrollTop: $('#log')[0].scrollHeight }, 1000);
 250                 }
 251                 self.populate(json.players);
 252             });
 253         }
 254     }
 255
 256     mud = new universe;
 257
 258 });