writing an ajax app for Sequence

Yesterday I attended Ted Neward‘s game design session at nofluff. It inspired me to begin to implement the game sequence in an ajax app. It will be a private app since I only plan to play it with some friends. But it will be hosted somewhere on my website so it can be accessed from anywhere.

Sequence is a board game my husband and I often played with two of our friends. It’s their favorite game. When I started thinking last night about potentially creating a web version so we don’t need to be physically at their house to play, I became very excited. I believe I may create something that will work with the help of php, mysql + jQuery (ajax).

Why this idea excites me

  • Before I started as a professional Java developer, I always coded in php & mysql (somewhat a LAMP developer on the side). However most of my old applications and sites are down. I no longer have the desire to maintain them. Now this is a great opportunity and incentive for me to go back to php & mysql and write something I enjoy.
  • PHP has a special place in my heart. Just a while ago, a coworker asked for my help to create him something to help with the manual text file processing he has to do every month. It only needs to be quick & dirty app. I threw together a php app in half an hour for him. It was super cool. He loved it.
  • jQuery is my favorite javascript library. You don’t have to look far in my blog to find that out. So the more I get to work with it, the happier I am.
  • I can also involve my husband on this project. Even though he’s not a programmer but he knows this game as well as I do. Normally he doesn’t have much of stake in my apps but this time he can be my lab rat :)
  • With this project, I also get to play with UI. I started as a web designer. So CSS & HTML have been my passion. There will be quite a bit of UI involved in the designing of this game.
  • It’s fun because it will be very useful. I very much look forward to the day that I can have our friends joining the game.
  • I can blog about it! I may not share my final product with the public but I will definitely share my progress & experience. Hopefully there will be challenges where I can learn some new stuff.

Last night I started brainstorming with my hushand as how I want the game to work. I started table designing and UI designing. This morning I put together a very prototype version of the UI.
sequence phase 001
I leveraged jQuery’s “redmond” theme. This way I can use all of the cool jQuery UI widgets and benefit from reusing its css for elements I want to style and create a semi prof looking app in no time.

Just getting my feet wet in Open Laszlo

here’s my shoutBox written in openLaszlo frontend and PHP backend.
Try closing the shoutBox, it is animated :)

<div id="peshoutbox"></div>
<script type="text/javascript">
   var so = new SWFObject("http://pure-essence.net/openLaszlo/shoutBox.swf", "shoutbox", "350", "478", "8", "#fff");
   so.addParam("wmode", "transparent");
   so.write("peshoutbox");
</script>

Click here if you do not see the flash embeded

So the idea of writing this simple application is just to get my feet wet in Open Laszlo. As we are moving to web 2.0, writing RIAs will be the future for web programmers. Many frameworks now have ajax plugin. I wrote my first ajax chat script in 2005 without any libraries. I’m sure it’s much easier to write one with plugins. But it was still nice to write one from scratch. You then truly understand how it works. Competing with adobe’s flex, google’s GWT (ajax framework), possibly Microsoft’s new silverlight there is an open source project called open laszlo. If you look at their demo applications, it seems to be pretty powerful. I think it’s a very interesting alternative to ajax so I gave it a shot.

Simple PHP URL rewrite

One thing I did for dmb is making dodosmb.com/profile/username work with my profile.php script. Normally without the help of .htaccess, you can use the value of the path info from the global variable

$_SERVER['PATH_INFO']

For example, create a php file named profile.php and in there put:

<?php echo $_SERVER['PATH_INFO']; ?>

Then upload the file and load it with yourServerPath/profile.php/dodo. The script will print out

/dodo

In my profile.php, I get the user by doing a simple sub string command like:

$user = substr($_SERVER['PATH_INFO'], 1); // this will get rid of the leading slash

This allows me to feed users to my profile.php by using the url dodosmb.com/profile.php/username

That’s still not pretty enough; it’s better if I can do dodosmb.com/profile/username. This is where .htaccess rewrite comes in. Here’s a great tutorial for .htaccess rewrite rules. To accomplish my goal, I used the following rewrite rules in my .htaccess:

RewriteEngine on
RewriteRule ^profile/([A-Za-z0-9]+)/$ /profile.php/$1
RewriteRule ^profile/([A-Za-z0-9]+)$ /profile.php/$1