I can track the win percentage of the human team and the computer team, so far the computer team only wins about 35% of its games, but it’s a nice challenge to try to make it win more. And now that the game is live, and has lots of plays every day it’s a lot of fun to tweak the computer players, publish the new version and then see the next day if the win percentage goes up or down.

For my next project I think I’ll do something different. I’ve purchased the domain http://solitaire-cardgame.com and am going to try to create Klondike (classic solitaire) first, if that’s fun then I’ll probably add a few others later on.

UPDATE 28.06.2011: And now I have a new card game, Hearts…

I worked on it on and off for months. No pressure to finish since it was just a hobby project. And finally, on November 18th I launched the new version at http://www.idiot-cardgame.com and at http://apps.facebook.com/idiot-cardgame/ to play it within Facebook itself.

The new game has animated playing of cards, shows your avatars and tracks statistics. You can also choose cardbacks and cardfronts, animation speed and some other options, and there is a High scores page which shows the 10 best players.

Now, 6 weeks after launch it has about 250 registered Facebook users plus a lot of anonymous users. I wanted to allow anonymous play as well instead of forcing everyone to give their Facebook credentials. However, tracking of statistics and saving preferences requires Facebook registration. There are around 6-700 games played every day and the computer player wins around 45-50% of them.

All in all I’m happy with the game. I’ve been adding a few small features and fixing bugs since launch. The next major feature I’m planning is the ability to play against your friends. The newest App Engine SDK includes support for Comet style connections which would make this a lot easier than it was a few months ago.

Finally, some lessons learned:

• Create your basic game engine in vanilla javascript and use events (or callbacks) for rendering the actions. I did this and can run games for testing in a simple command line script, which is really nice while you’re developing the basic game.
• Make the human player and the computer player implement the same interface, and let the Game object be ignorant of which player is which. This gives you the ability to play two computer players against each other during testing, which helps a lot if you don’t want to actually play the game thousands of times during development. I even have hidden options to do this in production so I can just watch an animated game play out.
• Facebook SDK documentation is complete crap. Best resource to test things is http://fbrell.com.
• App Engine regularly throws errors when connecting to the Datastore. Not all the time, but it is something you have to plan for.

You can download the add-on here. This add-on will never be updated or published on AMO, it is offered strictly as-is. The one thing I found interesting about this was figuring out how to do the absolute minimum to get this add-on working. There is no localization, no folder structure, just three files, install.rdf, chrome.manifest and url2titlebar.xul. Put those into a zip file, rename it to .xpi and you have your extension. These of course are not best practices in extension development, just an exercise in making the simplest extension possible. Below is the full content of the three files:

url2titlebar.xul

<?xml version="1.0" encoding="UTF-8"?>
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script>
    window.addEventListener('load', function() {
      function setTitle() {
        document.title = gBrowser.selectedBrowser.contentDocument.location;
      }
      gBrowser.tabContainer.addEventListener('TabSelect', setTitle, false);
      document.addEventListener('pageshow', setTitle, false);
      setTitle();
    },false);
  </script>
</overlay>

chrome.manifest

content url2titlebar file:./
overlay chrome://browser/content/browser.xul chrome://url2titlebar/content/url2titlebar.xul

install.rdf

<?xml version="1.0" encoding="UTF-8"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 xmlns:em="http://www.mozilla.org/2004/em-rdf#">
  <Description about="urn:mozilla:install-manifest">
    <em:id>url2titlebar@einaregilsson.com</em:id>
    <em:name>URL-2-Titlebar</em:name>
    <em:version>0.0.1</em:version>
    <em:creator>Einar Egilsson</em:creator>
    <em:description>Set the title of the window to the current url</em:description>
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!-- firefox -->
        <em:minVersion>3.0</em:minVersion>
        <em:maxVersion>3.5.*</em:maxVersion>
      </Description>
    </em:targetApplication>
  </Description>
</RDF>

So, there you have it, the simplest possible Firefox add-on. Enjoy!

Here’s how it works. If you enter a single line that ends with ; it is evaluated immediately. If it doesn’t start with if,while,var,try,do,with,function,switch,for or print it is assumed to be an expression and its value is printed to the screen. If a new line doesn’t end with ; is is assumed to be the beginning of a larger code block. In that case the script will keep reading in code without evaluating until either you end a line with ;; or you enter a line which consists of only one ;. The script also includes a convenience function called print() to print expressions. The script just uses a single variable, _$, so it won’t conflict with variables you define when using it. Writing a single line with just the word ‘exit’ will stop the script. Below you can see an example of the usage of the REPL. This sample is actually a online version that I did for fun, you can write in any command in it and try it out, it works exactly the same as the real script, although the online version took quite a bit more code. It even has command history, activated with the up and down arrow keys. (There are some issues in Internet Explorer, tab key doesn’t work and strings with html entities my display incorrectly, because of weird behaviour with <pre> tags and the .innerHTML property).

Download script | View script syntax highlighted

Enjoy!

Original blog post follows:

The last few weeks my hobby project has been creating a cardgame in Javascript. I’ve always wanted to create a cardgame and I decided to use simple Javascript so I could make it available online since no-one wants to bother to download small games. I figured there were thousands of blackjacks and solitaires out there so I decided to create my favorite cardgame, Idiot. After googling around I found that there was a Wikipedia page about it under the name Shithead which listed all sorts of different variations. My variation uses the rules that I’ve usually used in real life:

• The point is to lose all your cards by putting them on the pile, a card that is put on the pile must be equal or higher than the top card of the pile. If you have no card to put on the pile you must take the entire pile.
• There are always three cards in your hand, if you have less than three you must draw enough cards from the deck to get three again. After the deck is finished no more cards are drawn.
• There are three downwards facing cards and three upwards facing cards on the table. You cannot play them until your hand is finished. You cannot look at a downward facing card before playing it.
• Before you start you can exchange cards from your hand with the upwards facing cards on the table.
• You can put a two on top of everything, it is the restart card.
• You can put a five on top of everything, it is the reverse card, meaning that in the next turn the opponent must put a card equal or lower than five.
• You can put a ten on top of everything and it burns the pile, and you get to put out the first card in the new pile.
• You can put out more than one card at a time as long as they have the same rank.
• If there are four cards with the same rank at the top of the pile then the pile is removed.
• If you have no card that you can put on top of the pile then you may draw the top card of the deck and put on the pile, if it is a legal move then you do not have to take the pile.

The game can be played at the url http://einaregilsson.com/idiot/. As for the implementation, don’t expect any animation or fancy stuff. You simply choose the cards you want to put out and press the Play selected cards button. When the computer is playing the cards simply disappear from its hand and show up on the pile. However there is a small delay between each move by the computer so you can see when it puts out two or more cards and when it’s drawing cards. As for the rule about drawing a card off the top of the deck when you have to take the pile, that is done automatically. You simply press the Take the pile button and you will see a new card appear at the top of the pile (given that the deck is not empty). If the move is legal then the pile will stay, if it is not legal you will get the whole pile in your hand.

The game is implemented in two files, cards.js and idiot.js. Cards.js is a generic library that has a base class for a card container and concrete classes for a hand, deck and card, it could easily be re-used for any card game. Idiot.js is the game itself, it works allright, although there are a lot of edge cases that could be added to the computer player to make it smarter. The code is pretty heavily commented so it should be easy to follow should anyone want to extend the game or use the library for something. The game files are licensed under a Creative Commons Attribution license and so can be used for pretty much anything, they have been tested on the latest versions of all the major browsers. Please leave any error reports or suggestions as comments on this page.

When the script is run the output will look something like this:

Mozilla Extension Generator
Copyright (c) 2007 Einar Egilsson (http://einaregilsson.com)

Extension name: My New Extension
Extension code name: MyNewExtension
Extension description: Does this and that
Firefox or Thunderbird (f/t) : f
Include Menu item ? (y/n): y
Include Context menu ? (y/n): y
Author name: Einar Egilsson
Guid: mynewextension@einaregilsson.com
Menu item label: My New MenuItem
Menu item access key: m
Contextmenu item label: My New ContextItem
Contextmenu item access key: c

Creating files...

mynewextension/install.rdf
mynewextension/chrome.manifest
mynewextension/defaults/preferences/mynewextension.js
mynewextension/chrome/content/mynewextension.js
mynewextension/chrome/content/overlay.xul
mynewextension/chrome/skin/overlay.css
mynewextension/chrome/content/mynewextension.png
mynewextension/chrome/content/mynewextensionlib.js
mynewextension/chrome/locale/en-US/mynewextension.dtd
mynewextension/chrome/locale/en-US/mynewextension.properties

Extension complete

This will generate all the necessary files for the extension, you can simply go into the folder created, zip it up, name as .xpi and install the extension. The questions are pretty straight forward, just about the only thing you need to know is that Extension code name must be a single word, because it will become a javascript object that all your other code will be wrapped in, to avoid polluting the global namespace.

Now, some features of the generated extension:

• Localization ready, strings are in .dtd and .properties files
• Includes a library file with common function like accessing your prefs, writing to a file and more.
• Includes debug functions that output to the javascript console and can be turned off in about:config
• Can include menu item and context menu commands
• …and more, just look at the generated files

The generator is a single python file that includes all the other files. It should be easy to modify for anyone with a working knowledge of python. There are a few constants at the top that you can tweak, they are:

#Constants
#Fill these out so you won't get prompted for them everytime:
YOUR_NAME       = ''
YOUR_DOMAIN     = '' # if filled out the extension guid will be of
                     #the form extensionname@yourdomain.com
FIREFOX_MIN     = '2.0'
FIREFOX_MAX     = '2.0.0.*'
THUNDERBIRD_MIN = '2.0'
THUNDERBIRD_MAX = '2.0.0.*'
INITIAL_VERSION = '0.9'

The icon file is also embedded in the file as a base64 encoded string. To replace it with your own file, create a .png image file (34×34 pixels) and run the script below (download) to create the base64 string, then copy it over the existing base64 string in the extension.py file.

import sys, base64

if len(sys.argv) == 1:
    print 'Usage: base64 <filename>'
    sys.exit(0)

b64 = base64.b64encode(open(sys.argv[1], 'rb').read())
i = 0

while i < len(b64):
    print b64[i:i+80]
    i += 80

And finally, you can download the python script here. You can also view it syntax highlighted here but don’t copy it from there as the syntax highlighting might screw something up. Enjoy

s = '%s is a %s' % ('John', 'Moron')

Since Javascript is a very flexible language and allows you to alter its built in types I decided to try to create something similar for it. Here’s what I came up with:

String.prototype.$ = function() {

  s = this;
  if (arguments.length == 1 && arguments[0].constructor == Object) {
    for (var key in arguments[0]) {
      s = s.replace(new RegExp("\$" + key, "g"), arguments[0][key]);
    }
  } else {
    for (var i = 0; i < arguments.length; i++) {
      s = s.replace(new RegExp("\$" + (i+1), "g"), arguments[i]);
    }
  }
  return s;
};

The function works in two ways.

1. You can send in 1-n parameters and then $1 – $n in the string will be replaced by the parameters values. Example

   var undef; //Undefined value
   var s = 'My name is $1 and I am $2 years old. This is a null variable: $3, this one is undefined: $4' .$ ('Einar', 27, null, undef);
   alert(s);
   

   Test

2. You can send in 1 parameter that’s a javascript object and then $keyname in the string will be replaced by the value for ‘keyname’ in the javascript object. Example

   var d; //Undefined value
   var dict = { name : 'Einar', age : 27, nullvar : null, undef : d };
   var s = 'My name is $name and I am $age years old. This is a null variable: $nullvar, this one is undefined: $undef' .$ (dict);
   alert(s);
   

   Test

This works fine in Mozilla Firefox and Internet Explorer 7, I haven’t tested it in other browsers. I know the $ is used for document.getElementById in prototype and maybe other js libraries but I thought it was the best choice here too, I don’t think it’s confusing to use it for these two things. In case the syntax highlighting stuff screwed up the code on the page you can also download it here.