Well that was quick!
It seems like I barely had a chance to blink before Christmas trees were staring me in the face and now the year’s done. Just as well, I suppose; looking back is useful but looking forward is way more interesting. And with the progress I’ve been making on CypherPoker there’s quite a bit to look forward to!
As I mentioned in a previous post I’ve been focused on putting together a nice user interface to tie together all of the functional pieces of CypherPoker. As part of this process I reviewed a number of existing UI component libraries for ActionScript. UI components are the essential building blocks of user interfaces, stuff like text input fields, buttons, check boxes, toggle buttons, scrolling lists, and so on. I considered writing my own but that wheel doesn’t need to be re-invented.
For CypherPoker there are some qualifications that prospective component libraries needed to meet: they needed to be fast and responsive, they needed to be customizable or skinnable, they needed to be well-supported with a good community of users, and they needed to be usable without much muss or fuss.
Up until now I’ve been using the good-enough MinimalComps library which satisfied the fuss-less condition but unfortunately, being minimal, they lack some of the other features I’m looking for. Plus, they don’t translate well to touch and mobile interfaces.
Starling Feathers UI components, on the other hand, fit the bill very nicely. They’re based on the Starling engine which uses 3D GPU acceleration to render 2D graphics. Initially this may seem a little odd but consider that this puts the brunt of graphics processing onto hardware specifically suited for it while leaving the main CPU free for other tasks — like large-number cryptography 😉
I ran compatibility tests and Feathers performed fluidly on everything from my development laptop, to a mid-range 32-bit tablet, to a lowly EeePC netbook running Windows XP, and to an even lowlier first-generation Google Nexus S phone running Android.
Swapping MinimalComps for Feathers was relatively straightforward with plenty of online documentation and a fairly robust community to help in the process.
Have widgets, will travel
I greatly expanded the rendering system I was using so that I could plug into most of the bells and whistles of Feathers via the CypherPoker configuration data. Put another way, the user interface is highly customizable using the game software’s XML data. Adding a new button, for example, can be as easy as:
<button> <x>100</x> <y>100</y> <label>Click Me!</label> </button>
… or fancier like:
<button instance="clickMeButton"> <format> <color>0x000000</color> <font>Century Gothic</font> <size>24</size> <bold>true</bold> <italic>true</bold> </format> <x>100</x> <y>100</y> <width>250</width> <height>50</height> <label>Click Me!</label> <icon><![CDATA[./assets/icons/click_me_icon.png]]></icon> </button>
More complex components like picker lists (lists of pickable/selectable items), have many more customization options but hopefully this is sufficient to give you an idea of what’s available.
In any event I find the results quite pleasing:
The above interface (which is fully functional, BTW), is contained in a single sliding panel as I’d described in a previous post. Each group of components (buttons, text fields, etc.), is combined into a single widget that’s capable of existing anywhere on its own.
For example, although it may not be immediately obvious the Ethereum account manager (top group of components ending in the UPDATE ACCOUNT button), is a standalone widget. Neighbouring widgets are aware of each other and slide around when the other widgets shrink or grow, and the entire panel is scrollable so that new widgets can be added as required without worrying about filling up the available space. Finally, the whole panel slides open or closed via a tab button that’s always available on screen, ironically not pictured.
The design of each widget is separate from its functionality so changing its look and feel doesn’t affect what it does. For example, the widget containing the large Disable Ethereum button at the bottom expects only a button of some sort — where it appears, how large it is, and what font it uses, are all irrelevant to the the widget code. Don’t like the widget in the bottom panel? No problem — cut and paste the XML into the right panel definition and now your widget lives there. This can also be achieved without having to touch the XML data, something for a future update perhaps.
Widgets have means of communicating with each other and of accessing the core game code. When you attempt to create a new table without being connected to the lounge, for example, the table manager widget can invoke the connectivity manager widget to connect you. It doesn’t matter where either widget is located — they’ll figure it out between themselves.
I intend on producing a video shortly in the coming year explaining how this all works in greater detail while creating some useful new widget to demonstrate how it ties into the functionality.
There’s still a good amount of work remaining so please don’t get hung up on anything you see here. The Table manager widget, for example, will definitely need some fidgeting. I mean, c’mon…
But despite some obviously rough edges it all works.
So what will the typical CypherPoker experience be like in v2.0?
First, of course, you’ll download and install the game client — I’ll be providing download links from both the GitHub repository as well as the cypherpoker.org site.
When you first launch the software it checks to see if you have the Ethereum client installed and if you don’t you have the option of having the game automatically download and set it up for you (if that’s possible on your device). It’s all done silently and automatically in the background; you never need to know what a command line is (though that’s a perfectly valid option too).
As part of the setup the Ethereum client syncs itself with the blockchain, a process which thanks to the newer “fast sync” feature currently takes between 5 to 15 minutes. This is a drastically improved wait time but unfortunately it’s not ideal and out of my control. However, with the click of a button you can be connected to the main CypherPoker lounge and play a few for-fun hands while you wait.
On this note I should point out that if you either can’t have or don’t want the Ethereum client running on your device you can simply update the settings to use a remote client, perhaps one that’s running on a desktop machine on your home network or maybe one that’s running on some other computer on the internet. In other words, you can still use Ethereum without having the client installed alongside the game software. Also, if you only ever want to play for fun you can skip the entire Ethereum bit altogether and just jump right in.
While the Ethereum client is doing its setup thing you’ll be taken through a few simple game client setup steps such as creating an optional handle (alias) and providing an optional avatar / icon. You can also add an existing Ethereum account or create a new one; blockchain synchronization isn’t necessary for this.
With everything up-to-date you can fire up the main CypherPoker lounge and scroll through the list of available games.
At present each game can be configured to support a specific number of anonymous or specific players and may be closed off to public spectators using a password. Games may or may not have a smart contract associated with them and have varying buy in, big blind, and small blind amounts. I’ve set the blinds timer so that blinds double at 10 minute intervals but this is also something that will be configurable in the very near future (mostly it just needs the configuration UI).
Smart contract management is presently pretty rudimentary. When you’re creating a new table you can either enter or select an existing contract address, or deploy a new one. This too, however, will have its own widget in the very near future in order to provide fine-grain control over smart contracts and their settings (such as player timeouts, etc.)
The CypherPoker game client can launch new windows that share resources (such as the Ethereum client and multi-threaded cryptosystem), so that you can engage in multiple simultaneous games without overloading your device. But this too can be changed so if you enjoy hearing your computer scream knock yourself out.
Beyond this CypherPoker has widgets to display stats and information about both the game and its environment (network connectivity, smart contract states and Ethereum client info, lounge stats, etc.) I don’t pretend to know what will be most useful / popular and what won’t, and it’s not like I would be able to build out every idea I have for version 2.0 anyways so I’ll just keep pumping out widgets and enhancements as needs dictate. I imagine that a cryptocurrency conversion widget would be incredibly useful so that’s high on the next-to-do list.
Thankfully the current to-do list is growing shorter every day. There are 6 more widgets to complete and some minor revisions to the smart contracts before I clean up/comment the code, do some final testing, publish a couple of hand contracts on the main Ethereum blockchain, and do the final compiles.
How long will that all take? It’s hard to say but considering that I’ve been producing an average of one widget per day, give or take, it’s hard to imagine that we’ll be waiting much longer. My birthday’s coming up pretty soon and I would be both shocked and dismayed if I didn’t get to play a few hands with CypherPoker v2.0
As 2016 comes to a close I’d like to say a BIG thank you to all of you who have supported the project and I want to offer my sincerest wishes for a happy and prosperous new year. There’s no doubt in my mind that early in 2017 we’ll be enjoying the fruits of your generosity, input, and patience.