Website Design and jQuery

Notice: I wrote this a few weeks ago, but didn’t have the time to edit it. Then I forgot about it… but now its here!

Also, I replayed Mass Effect 2 and finished 3.

Hello again, readers! I just finished replaying Mass Effect and decided that it is time to write a new article.

Over the weekend I designed and implemented a WordPress theme for a friend of mine from the Secret Maryo Chronicles project. I know him as MrVertigo27, but others call him Spitfire25565. He has a YouTube channel full of tutorials and Let’s Plays of Minecraft and its plethora of mods. They are pretty cool and you can go check them out — but I will not give you the link until you finish reading! =P

All of his videos are coagulated into a group called GameMode5. GM5 focuses on reviewing and rating Minecraft-related technologies, particularly mods. This ranges from minor mods such as Hack/Mine, which mostly just modifies gameplay, to the Aether mod, which creates an entirely new sub-world (like the Nether).

Despite all of the videos under the GM5 name, however, their website spent several months as an unconfigured, content-less Joomla! installation. After awhile, that kind of thing starts to get on my nerves, and I finally broke down and offered to build his website for him (a similar event to when I wrote the GNU FreeDink website theme).

He happily agreed, and even gave me complete creative control. This allowed me to play with it a lot, though it also required me to think more carefully — I wanted to make sure that he would still like it.

I replaced Joomla! with the more popular WordPress content management system and got to work on a draft, which I then converted into a dynamic theme. The end result, for reference, is here: http://gamemode5.com/.

GameMode5 Theme
A screenshot of the GameMode5 theme I wrote.

The first thing I did was create the logo. Using the powerful GNU Image Manipulation Program (GIMP), this task was fairly straight-forward. The first thing I did was place, in big, bold letters, “GameMode5.” I used the free and open font Orbitron to make it look nice and video-gamey. The letters were a bit too close together, so I increased the “kerning” (inter-character spacing) until the text fit across the whole screen.

The next thing I did was create a drop-shadow using one of the GIMP’s filters. I played with a few depths until I settled on 5×5 with a bright grey coloration. This was pretty cool, but it was missing something. So, I ran through this algorithm:

 10  LET F = FIRST FILTER
 20  APPLY FILTER F
 30  IF IMAGE LOOKS COOL THEN GOTO 60 ELSE GOTO 40
 40  UNDO FILTER
 50  GOTO 70
 60  TINKER WITH FILTER SETTINGS
 70  IF MORE FILTERS THEN GOTO 80 ELSE GOTO 100
 80  LET F = NEXT FILTER
 90  GOTO 20
100  EXIT

This algorithm resulted in just one filter, “Erase Every Other Line,” which looked pretty frelling cool. I then applied the same filter to the drop-shadow. It occurred to me that it might look better to erase every odd line instead of every even line of the drop-shadow, so I tried that, too. I preferred the later because it made the text glow more.

After that I just put a little green motto line beneath it and called it done. This end result is what you see now.

The next thing I did was create the web page layout, consisting of a header, content area, sidebar and copyright footer. I aligned them using some pretty CSS3 and divs. You can do a lot by setting fixed widths and the “float” attribute. For instance, the middle area is just:

div#sidebar {
  width: 200px;
  float: right;
}

div#content {
  width: 595px;
}

I decided on fixed width because I really wanted to show off the background, which I wanted to be tiles from Minecraft itself. However, I wanted to website to be dark since I felt it fit the mood better (note that I always find myself in the most horrific circumstances in this game — being ganged up on by skeletons, surprise-attacked by three creepers in a row, falling into lava when I was standing still…). So, I decided to use GIMP’s wonderful Colorize tool to darken the original tile set.

I chose the stone because, well, stone’s awesome. Do not even try to deny it: stone is the best block in Minecraft. Ever. Everything should be built out of stone. Cobblestone is evil. Cobblestone must die. Why do the creepers only go after my stone?!?!?! \(O_O)/

Ahem. So, I placed all of these in the background and made a conclusion: it was super boring. To spice it up, I placed a few gold ores around. A few CSS tweaks later, along with a nice Lorem Ipsum example text, and I decided to show MrV what I had done.

He liked it (=D) but made one request. He wanted to know if I could randomize the ores in the background. Lo and behold, it is time for every web developers greatest tool and worst nightmare. JavaScript.

It took a bit of time, largely because I tend to forget the names of the JavaScript functions, but I eventually succeeded. The algorithm is pretty cool; I split the screen into individual, 64×64 tiles and iterate through them. In each tile, I randomly decide if there’s going to be an ore there. If there is, then I randomly select which ore it is.

Leaving it there, though, is not really in the spirit of Minecraft. In Minecraft ores only appear at certain levels, encouraging you to go deeper to find the more important valuable resources. Well, it took quite a bit of tinkering, but I got something very nice.

Between regions 1 and 5, there is a 50-50 shot of the cell either being coal or iron. Between 5 and 10, it becomes an even statistical split between coal, gold and iron. Lastly, anywhere past ten it turns into an equal chance of either diamond or redstone. This can be simplified into the following JavaScript:

if (y > 10) {
  switch (Math.floor(Math.random() * 2)) {
    case 0: /* redstone */; break;
    case 1: /* diamond  */; break;
  }
}
else {
  switch (Math.floor(Math.random() * (y > 5 ? 3 : 2))) {
    case 0: /* coal     */; break;
    case 1: /* iron     */; break;
    case 2: /* gold     */; break;
  }
}

Beautiful, eh? Took quite a while to figure out where to put the parenthesis in the ternary (A>B?C:D) statement, but the end result works like a charm!

Of course, there’s the question of how I got the images back there, anyway. Well, all I did was insert an absolute-positioned image-div with a negative z-index after the ending copyright statement. The web browser, assuming it understands CSS properly (which all modern browsers do) will position them exactly where they are needed.

That basically sums it up, but there’s one last thing that I want to mention. It is a library called jQuery, without which I would have been driven insane writing this simple program. jQuery lets me do stuff like get the dimensions of the document area and insert elements without having to deal with the constant browser quirks and incompatibilities. On my own I would have needed to write this to get the document width:

function getWidth()
{
  if (typeof (window.innerWidth) == 'number') {
    /* most web browsers (but not all of them
       or all versions) */
    return window.innerWidth;
  } else if (document.documentElement
             && (document.documentElement.clientWidth
                 || document.documentElement.clientHeight)) {
    /* internet explorer version six and later
       in standards mode */
    return document.documentElement.clientWidth;
  } else if (document.body && (document.body.clientWidth
                               || document.body.clientHeight)) {
    /* internet explorer version four */
    return document.body.clientWidth;
  }
}

…and that is the simplest version of this code I could find. However, which jQuery all I have to say is:

$(document).width

…and this works in Internet Explorer, Firefox, Chromium and even Opera!

The key to jQuery is the $() function, which functions sort of as a more powerful document.getElementById() which can also accept the document and window objects, plus CSS identifiers and HTML code. The later usage is how I inserted the background divs:

$('<div>blah blah blah</div>').insertAfter('div#copyright');

jQuery makes JavaScript coding super easy and its generously licensed under the super-liberal, free and open source MIT/X11 license, which essentially means you can do whatever you want with it as long as you do not remove the copyright notice(s).

They also have a really cool user interface library which I used in an older project to make a draggable window within the page. jQuery’s a life saver, and I definitely recommend you check it out.

Links

License Notice

I wrote the theme and JavaScript code for GameMode5, so I am letting them decide how they want to license this stuff. The Fancy Background script should be used for reference, only.

Be Sociable, Share!

Comments are closed.