Call of Duty: Modern Warfare 2

Every now and then a game is release that I just have to play.

Tuesday (2009.11.10) Call of Duty: Modern Warfare 2 (MW2) was released and after a quick "shoulder game", I just had to buy it. I played Call of Duty 4: Modern Warfare (MW) a lot with some friends. Both MW and MW2 are actually a lot more arcadish than what I usually like, but they're good fun and great games for some team play with the mates!

So MW2 is probably the game with the biggest hype ever, it has been released for PC, Xbox360 and PS3. Several other games have been postponed to avoid being released too close to the MW2 release date.

Unfortunately the PC version is pretty much like the console versions. Seriously this game is only going to be entertainment until a proper PC game is released (Battlefield: Bad Company 2). I know the company behind MW2 has to make money, and that is their main concern, but seriously guys... No dedicated servers!? Some times this is slightly annoying, some times a huge head-ache! Bad choice! Hardcore can now only be played after you reach level 19, and then only on 6vs6 maps? Bad choice! Rumor has it that there'll be no modding. Sorry guys, that's the best way to make players stick with a game! Bad choice!

A small hint to PC gamers behind firewalls, if the game tells you that your "NAT setting" is strict, you can forward TCP + UDP port 28960 to the computer you play on! Voila!

Even more OO javascript.

So where were we?

We have the class initialized, a reference to the link element and the element containing the html to show/hide. So because I'm a bit lazy, I'm going to use an effect from the Mootools framework, instead of making my own. The effect I'm going to use is Fx.Reveal. To get this effect, visit the Mootools more builder.

So when the link element is clicked, the effect will show/hide the content of the container.

this.effect = new Fx.Reveal(this.options.containerId);
this.options.linkId.addEvent('click', function(e) {
  // TODO:
}.bind(this));

To be able to access the ShowLink instance when the event fires, the instance (this) will be bound to the function.

this.options.linkId.addEvent('click', function(e) {
  if (e) {
    new Event(e).stop();
  }
  this.effect.toggle();
}.bind(this));

The last line in the function should be pretty obvious, the first lines, not so much. When you click a link, the browser will take you to the url of the link. That is not exactly what we want, we just want the effect to hide/show the content and nothing else, so to avoid the browser changing page, we stop the click event.

Object oriented javascript - part 2

Let's start off from the top. This is a small introduction to OO javascript classes, with mootools.

var ShowLink = new Class({Implements: Options,
                           options: {linkId: '',
                                     containerId: ''},
 initialize: function(options) {
  this.setOptions(options);
 }
});

These lines show the class definition and the initialize method, the method that is called when an instance is created. When creating these javascript classes, I always try making them as generic as possible, so i need to initialize the instance with some parameters.

To do this, I need the class to implement options, which gives me the possibility to create an instance with parameters.

With my ShowLink definition, my options/parameters are: linkId and containerId. With JSON, the methods are defined like: initialize: function(options), so that's the initialize method, and it takes one argument, options. The first line of the method, this.setOptions(options) stores the values and makes them readable like this: this.options.linkId and this.options.containerId.

As I wrote in the last post, this is some old code. Instead of using strings in the arguments, I will use (DOM) object references.

var ShowLink = new Class({Implements: Options,
                           options: {linkId: $empty,
                                     containerId: $empty},
 initialize: function(options) {
  this.setOptions(options);
 }
}

A small example.

So what's all this talk about object oriented javascript?

When building sites I often need to be able to make an effect/feature like: When the user clicks this link/image, a form will appear - like click the "contact us" link, and the "contact us" form will be visible.

So I've made a small javascript class that will do exactly that:

var ShowLink = new Class({Implements: Options,
                           options: {linkId: '',
                                     containerId: ''},
 effect: $empty,
 initialize: function(options) {
  this.setOptions(options);
  if (this.options.linkId != '' &&
      $(this.options.linkId) &&
      this.options.containerId != '' &&
      $(this.options.containerId)) {

   this.effect = new Fx.Reveal($(this.options.containerId));
   $(this.options.linkId).addEvent('click', function(e) {
    e.stopPropagation();
    this.effect.toggle();
    return false;
   }.bind(this));
   this.Hide();
  }
 },
 Hide: function() {
  this.effect.dissolve();
 }
});

This class is actually one of the first I did, so I'll use this, take it apart, and create a new class step-by-step to show you how this works.

Is that your client?

If somebody would have told me 2-3 years ago that I would be working on projects including lots of client-side code I would have laughed and denied that it would ever happen.

Nonetheless here we are, and I've been working on several projects the last 6 months with lots of client-side code, and I've actually enjoyed it. No doubt the biggest javascript frameworks have come a very long way the last couple of years!

So what have changed?

For me to want to work with client-side code at all, I need the framework to handle the differences between the browser. My life is simply too short to run around fixing the problems introduced by the people making browsers. Another important reason why I'm working with client-side now is that it's possible to make clean, modular, object oriented code. I would never have thougth that I would be making nice OO javascript classes.

I've chosen to use the mootools framework. Well, I guess it all makes sense and was bound to happen. I've always (since early 90's) been using the handle json, and since 1999, JSON (JavaScript Object Notation) has been a very important part of making javascript what it is to day and is used extensively in the frameworks themselves.