Kilsmo's log

So, I have decided to focus on application development using web technology. To be able to learn everything I want to learn (I am rather inexperienced in working with web technology) I have decided to run a project. As most developers, I have a favorite project, that you implement whenever you are trying out a new platform, in my case it is developing a poker server. Last time I did it I was 4 years ago working in Java, I wrote some code, but never finished. This time I am going to use web technology on the client side, and NodeJS on the server.

The project got started two days ago, the main reason is that I got inspired to see how good poker interface you can create on a tablet.I actually think that you create a rather nice interface, but playing a lot of tables at a time as some of the pros is far from optimal on a table. I also think that the user interface in most poker clients on desktop computers is clunky.

The working title of this project is InstantPoker. Since it is running in a browser, you will be able to start playing instantly, without installing any software or plugins.

Every poker client needs a poker table. Since this is very graphical, I have decided to use the canvas element. The first thing that I did was to find a deck of cards. For the first prototype I am using the PNG images in the common cards deck that I found on this page. They are quite big (72*96 pixels), but for the prototype, I don't want to spend too much time looking for a deck of cards. It was very easy to learn how to draw a PNG on the canvas.

I a really not good at graphics design. A poker table is usually rendered on a screen as something that looks similar to a poker table, with the same shape. For two reasons, I have decided to not do it like that. Most importantly, I lack the required skills to do that. And then, I think that a poker table that does not look exactly like a poker table can have higher usability. (easier to see what is going on, more efficient use of screen estate)

The poker table will be rectangular, with players just sitting on two of the sides, up to 5 at each side. Another change compared to other poker clients is that I am using text (no graphics) to represent the chips, both in front o the player, and in the pot. I am trying to make it as good as possible for making good decisions while playing, not to have the fanciest graphics.

How to draw text on a canvas was easy to learn.

I don't have any good screenshots yet, the design is far from finished, I will save that for another blog post. Don't expect too much, but at least I want to show you how it differs from a normal poker client.

Today I am trying to build a ui prototype with the help of HTML+JS. The first thing I noticed is that the security model in browsers is a barrier for creativity. Well, think again, ok, I have to only access local pages to be able to do things like getting the title or url from an iframe. I can live with that.

The second thing was that doing advanced stuff in CSS is maybe not that easy to keep compatibility even between Opera and Firefox. Well, only Opera is good enough for my purposes, anyone that need to see the ui prototype can download Opera.

The last thing was that doing a ui prototype without the possibility to shorten labels that do not fit will be very ugly. Fortunately, I found out that Opera since version 9 supports CSS 3 text-overflow: ellipsis in the form of -o-text-overflow.

Ooooh, and I have made some simple icons with Gimp, first time that I actually made something useful with that tool. The hardest thing was to select a color, took me a few minutes before I found the color selector, then even more to understand it.

Making a ui prototype with HTML+JS is not that hard. The problem is that the quick solution is not very easy to modify quickly, and that is not the way it should be when you want to prototype. So my next task is to build a prototyping framework, before I finish my ui prototype.

I have currently so much to do, it feels like I never will have the time to work again.