Jamie's Blog

My wife loves PopCap’s game Alchemy. It’s a dominoes-like game, where you match up alchemic symbols and various colors. The object of the game is to turn each board-square from lead to gold. I have been wanting to try out the limejs game library, which is based on Google’s Closure compiler, so I decided to write a quick implementation of the game. You can find the source on Github.

You can try out the game online. To play, place pieces adjacent to other pieces which match in symbol or color. A placed piece must match all the pieces adjacent to it. A wild card piece, denoted with the ‘*’ symbol, matches all pieces. Filling a row or column with pieces will mark the corresponding spaces as cleared. The object of the game is to get each space marked as cleared.

Edit (20100214 11:00 PM): Added win condition and box showing how many spaces cleared.
Edit (20100215 11:00 PM): Added leveling. The board starts small with few pieces and keeps getting bigger with each round.

Here’s a post that might help problems with Sammy routes, callbacks, and event handlers using jQuery, especially the “live” function.

I have an input form with submit buttons like:

<form>
<input type="submit" name="what" value="SomeCommand" />
<input type="submit" name="what" value="DifferentCommand" />
</form>

This didn’t play well with Sammy, as it doesn’t load the value of what into it’s params hash. So, I did a work around like:

  // hack to allow sammy to access the 'what' param
  $('form input[type=submit]').live('click', function(){
    var submit = $(this),
      form = submit.parents('form');
    form.find('input[name=what][type=hidden]').val(submit.val());
  });

I’m not sure why I originally chose to use “live.” It could’ve been that I was building DOM dynamically using jquery-tmpl. In Firefox and Chrome, this worked as expected. In IE, the Sammy route handler would fire before the click handler above! So, I changed the code to use the non-live version.

  $('form input[type=submit]').click(function(){ // changed
    ...
  });

I did a quick matrix to compare various mobile JS frameworks in late May. It is probably a little outdated, especially with the recent Sencha merger, and I did not know DashCode could create web applications at the time, but maybe it will help someone. Enjoy! http://bit.ly/d6Gsaj

I used jQuery for the UI. I am a recent convert to jQuery, having mostly used Prototype + Scriptaculous.

The word list is embedded into the page script as a javascript array. On document ready, html is generated, which writes the first and last word to the page, and creates blank input boxes for the intermediate words.

There is a keyup event bound on each input box, which will determine if the word is correct. If it is, a css class will be added which shows a green underline underneath the box. Otherwise, a red underline will be shown.

Finally, there are buttons on the page which are created dynamically and provides hints or reveal all of the answers.

Word Jumble Filled

Someone asked me about Date Validation the other day. Here are two simple approaches for use in your CF apps.

Assume that the strDate variable contains your date. On the server-side, you may use IsDate(strDate). On the client side, !isNaN(new Date(strDate)). I don’t know for sure if the client-side code is the best way to do it. There are RE-based techniques, but these are the most concise.

CFML:

    <cfoutput>
      <cfset strDate1 = "2001 Fazuary 1"/>
      <cfset strDate2 = "2001 Feb 1" />

        #IsDate(strDate1)#<br>
        #isDate(strDate2)#

    </cfoutput>

    <!---

    Outputs:

    NO
    YES

    --->

Client-side Javascript:

    <script>
    // This creates a function to test the string.
    // What is this function doing? It takes the
    // strDate string and attempts to convert it into
    // a Date object using the Date constructor.
    // When the Date constructor cannot convert the
    // string, it returns NaN (not a number).
    // So, we wind up testing for NOT NaN using
    // !isNaN. Don't ask me why the Date constructor
    // returns NaN and not NaD (not a date)! =D
    function isDate(strDate) { return !isNaN(new Date(strDate)); }

    var strDate1 = "2001 Fazuary 1",
        strDate2 = "2001 Feb 1";

    alert(
        isDate(strDate1) + '\n' +
        isDate(strDate2)
    );

    //
    // Brings up an alert window that says:
    //
    // false
    // true

    </script>

I wanted to try out some canvas element functionality, given that I have a feeling it will steal a lot of Flash’s thunder. I whipped up a bubble-breaker game (the mechanic should be very familiar to you) in a few hours. Enjoy the demo! I may do a quick write up at a later point.

I’ve only tested it in Firefox 3.6. I do not know whether it will work in other browsers.

Demo
Project site

bubble breaker 13x13

bubble breaker 30x30

I modified CiteThis! with the following features this weekend:

• Added a citation list box, where you can queue all your citations.
• Removed the custom citation box from the preferences pane (it was not of use anymore)
• Fixed APA citation format to include last accessed date.
• Added some handling of author/titles:
  • If title includes the host name of the site such as “news blah blah – CNN”, then the host name will be removed from the title.
  • If the author ends with any special characters, they will be removed
  • If author contains AP, or Associated Press, that will be stripped.
• Author determination:
  • Added handling of some common author classes, like when an element has a class called “byline” or “author”
• Site-specific handling
  • Added handling of some more sites: ABCNews, Fox, CNet, Yahoo News

https://addons.mozilla.org/en-US/firefox/addon/7972

I made an update at the request of someone who e-mailed me.  This post describes this version:

• Custom citation formatting broken! (Will be addressed in next update.)
• Added variable citations depending on what fields are specified
• Added custom date formatting based on datejs
• Added custom handling of Wikipedia citations

https://addons.mozilla.org/en-US/firefox/addon/7972

I updated my CiteThis! Firefox Extension with a few of the following features:
Several updates including:

• Created preferences pane to allow selection of different reference styles
• Provided option for a customized citation string
• Implement some automatic author discovery for the page
• Improved performance by avoiding updates when hidden

https://addons.mozilla.org/en-US/firefox/addon/7972

This is a Facebook application I wrote after the Thirteen application. It improves upon the first Facebook App with a new architecture. Animation uses the Facebook Animation library, and rendering is done via Smarty PHP Template engine. Lots of work went into the architecture, and there is even a localization scheme built in.