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