KNIME and Blackjack

Have you ever wondered how far you could push the boundaries of workflow design? Did you ever want to give free rein to your imagination when creating views in KNIME Analytics Platform? Do you also fancy the occasional round of cards? If the answer to either of these questions is “yes”, then this blog post is for you. Today, we’re creating our own game of blackjack in KNIME. We do this by using the Tile View (JavaScript) and CSS Editor nodes as well as the revised visual layout editor introduced in the latest KNIME release.

The new Tile View provides an alternate view of the data in a KNIME table. It’s analogous to the interactive Table View, but is particularly well suited to viewing datasets that include images or other graphics.

Sometimes you want to exercise fine control over the styling of the JavaScript views in your KNIME WebPortal applications (or in Composite Views in KNIME Analytics Platform). We support this by allowing you to specify CSS that is applied to style JavaScript views. This node provides a syntax highlighted editor with auto-completion for editing that CSS.

Are you ready for a round of blackjack? Then place your bets.

The Game Loop

In the section that follows we go through the different parts of our game loop. The outer game loop and the inner game loop.

Outer Game Loop

At the heart of most video game programs lies a so-called game loop. It iterates over the game state, adjusting it based on player input and other events. For our blackjack game, we’re not stingy with loops, nesting one loop within another. The outer game loop iterates over multiple matches of blackjack. Each round of play begins with a new starting hand being dealt to the player and bank. More specifically, the player is dealt two cards, whereas the bank is dealt a single card.

Fig. 1 The outer game loop iterates over multiple matches of blackjack

Each card that is dealt has certain properties: a rank, a suit, a numeric value, a recipient, and an associated image. The “Deal One Card” metanode template adds one random card (from an infinite deck of cards) to the list of cards currently in play. It uses the Read Images node to read vectorized card images kindly provided in form of the open source vector playing cards by Byron Knoll and Chris Aguilar. This list of cards represents the current game state, over which an inner game loop iterates. At the end of a blackjack match, a game over panel is displayed. In this game over panel, the player can decide whether they would like to play another round, leading to another iteration of the outer game loop.

Fig. 2 The internal game state is represented as a list of cards. The metanode template “Deal One Card” adds one card to the game stat

Inner Game Loop

The inner game loop updates the game state of a single match while the player interacts with the game. It displays a game panel view, in which the player is presented with their own and the bank’s hands of cards. The player is also presented with the options at their disposal. Currently, the game is limited to the options of drawing a card (hit) or passing to the bank (stand). Other options that could be added in the future are the actions to take an insurance, double down, split, or surrender.

Fig. 3 The inner game loop iterates over a single match of blackjack, adjusting the game state based on player input

If the player decides to draw a card (hit), the game deals one card to the player. If the player decides that they are happy with what they have (stand), the bank draws until they are at a card value of 17. At the end of the inner loop, the game state is checked and, if a termination condition is met, the match ends. Termination conditions are blackjack by the player, busted (too many cards drawn), bank busted, higher total, push (draw), and lower total.
The Game Panel
The player interface runs inside the web browser via the KNIME WebPortal (part of KNIME Server), so players don’t need to install KNIME Analytics Platform to play. If you don't have KNIME Server, you can still check out the functionality of the workflow and play the game by opening the interactive views of the wrapped metanodes inside KNIME Analytics Platform. This means that navigation through the game is manual rather than automatic as in the WebPortal.

Sticking Together the Game Panel UI

As you might know, multiple JavaScript-enabled views can be shown on one page by grouping them in wrapped metanodes and using the layout editor to define the layout. With the new visual layout editor introduced in KNIME Analytics Platform 3.7, layouting has gotten a lot easier, since what you see is now definitely what you get (have a look into the user manual for details). The game panel is implemented as a wrapped metanode and contains two Tile Views (one for the player, one for the bank) and game buttons for the actions at the player’s disposal. When the workflow is executed in the WebPortal, each iteration over the wrapped metanode “Game Panel” will be shown as a single page.

The wrapped metanode “Game Panel” looks like this:

Fig. 4 The wrapped metanode “Game Panel”, which is responsible for displaying the current game state and available player actions

Cards of the Bank and the Player

The new Tile View (JavaScript) node is used to display the cards that make up the current hands of the player and bank. The nodes are configured to only show the images without any labels.

Fig. 5 Configuration of the Tile View node

Using Quickforms for Game Buttons

For the game buttons we used the Single Selection QuickForm node. The player’s choice (e.g., hit or stand) is registered and passed to downstream nodes via flow variables. By default, the Single Selection QuickForm node just displays simple radio buttons...

Fig. 6 View provided by the metanode “Game Panel” without adjustment through the CSS Editor node

...but we want the game to look nice.

Styling the Buttons, Cards and some Animations

The new CSS Editor node allows you to add any custom CSS code and therefore nearly unlimited options for styling the views (have a look into the CSS Styling Guide for more details).

With a bit of CSS, the radio buttons of the Selection Quickform looks like this:

Fig, 7 View provided by the “Game Panel” metanode after adjustment through the CSS Editor node

We used the CSS Editor to add a nice CSS animation for the Tile View so the cards flip into view.

Fig. 8 Configuration of the CSS Editor node

The Game

So let’s fire up the WebPortal in our browser and play a round, shall we?

Winner, winner, chicken dinner! Ready to play? Then download the workflow from the KNIME Hub here, and run it on the WebPortal.

This little workflow showcases how KNIME can be used for interactive and visually adjustable web applications that are fun to use. It was made possible by recent additions to KNIME in Analytics Platform 3.7.1, namely (1) the styling provided by the CSS Editor node, (2) the easy-to-use layouting of the new visual layout editor, and, most importantly (3) the graphics provided by the Tile View (JavaScript) node.

What other interactive web applications are you implementing in KNIME? We’d love to hear, so hit us.

Authors: Jakob Schröter & Marc Bux (KNIME)