February 26, 2012

The Web Client

Last weekend I got my WebSocket server for NetBoa working again (yay).

This weekend I've been laying out the HTML5 and CSS for the browser side. At the moment it looks like this;

It seems obvious now, but it felt like an epiphany when I realized that the project only required a single HTML page. Everything from the login screen forward will be elements dynamically create via Javascript (using the excellent JQuery lib) talking the server over a WebSocket. Chrome will happily maintain an open WebSocket for days with no activity (I tested it).

In John Gardner's book, Grendel, a dragon offers up the advice 'alternatives exclude'. I'm wrestling with some UI decisions -- screen dimensions vs. info glut. In the shot above, the left panel is somewhat like the main viewer from Star Trek;

When the right is like a console;
Originally, I had three columns where the far left one containing a kind of galactic IRC. But that was just too much.

I'm still trying to decide on a messaging protocol. JSON is great for interfacing with Javascript in the browser but that's precisely where I don't need speed. Given the short life of these message packets it seems rather wasteful to include an extra library just to generate Python objects to be cast into JSON strings a picosecond later. I'm 90% sure that I'll go with text commands and an option to send snippets of HTML.


georgek said...

This is awesome Jim. I'm just starting to think about a game with the same basic architecture. Looking forward to more posts.

Jim said...

Thanks George! By strange coincidence I visited your blog earlier today.

Can you talk about your game or is it still cooking?

georgek said...

I have a few game ideas, right now I'm thinking more about the kind of UX I want. One thing I've been messing with are multiple content streams/channels that the player can sort of mix and separate, and doesn't have to worry about logging the output of. I'm learning Clojure/Clojurescript at the same time so it's going kind of slow at the moment.