Authors: Jakob Schröter & Marc Bux (KNIME)
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.
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.
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.
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.
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
The wrapped metanode “Game Panel” looks like this:
Cards of the Bank and the Player
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...
...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:
We used the CSS Editor to add a nice CSS animation for the Tile View so the cards flip into view.
So let’s fire up the WebPortal in our browser and play a round, shall we?
What other interactive web applications are you implementing in KNIME? We’d love to hear, so hit us.