Tableau Proba Blackjack

Blackjack can easily be played with just two people and a 52 card deck. To get started, the dealer gives the opponent one card face up, and one card face down, then repeats this for themselves. Both players then peek at the value of the facedown card and add that to the value of their face up card.

Tableau Proba Blackjack Game

Mulitplayer Blackjack Game in Tableau using ClojureScript
blackjack, clojure, clojurescript, data15, javascript api, tableau, tableau public, websocket

Black Jack 83+ v2.0 A Black Jack game where you can play and bet against the calculator. Blakjack00.zip: 1k: 04-03-08: Black Jack A simple yet addicting blackjack game. If you want to make changes, e-mail me. C-Games: blakjack2.zip: 1k: 04-05-08: Blackjack simple yet fun blackjack. You can bet and save the amount of money that you have. Any tableau card can be put there provided that it’s sequentially related to the topmost foundation card. For example, if the foundation currently shows a 6, then either a 5 or a 7 will be valid. If the player is unable to play anything, then she may draw another card from the stock to “restart” the foundation and go from there. Tableau's software moves as fast as you do. There’s a reason that the award-winning research scientists, design gurus, and visualization experts choose Tableau. We invest more in R&D than anyone else in the industry, so there's always a new release around the corner. Poker has remained as one of the most challenging games to master in the fields of artificial intelligence(AI) and game theory. From the game theory-creator John Von Neumann writing about poker in his 1928 essay “Theory of Parlor Games, to Edward Thorp masterful book “Beat the Dealer” to the MIT Blackjack Team, poker strategies has been an obsession to mathematicians for decades.

This year I had the honor to present at Tableau Customer Conference in Las Vegas together two hyper-blackbelt-jedi masters: Michael Kovner and Russell Christopher. The track’s name was “You did WHAT with the Javascript API?!” and as you can imagine we had some heavyweight stuff to throw. One of my API example was a complete multiplayer blackjack game using Tableau Public as gfx engine and clojure/script as backend and frontend programming language.

Let’s see how I built it from Tableau and programming perspective. But first… the game.

The Game

It’s a classic black jack game: all players (well, maximum two in our case) plays against the dealer. First the players hit until they’re fine with their cards, then stand. Dealer must always hit if his score is less than 17, otherwise stand. Now imagine this in Tableau. (But unlike vizpainter’s black jack game the logic here is outside of tableau).

Since the presentation was recorded the easiest way is to watch this video:

You can try it here as well: http://blackjack.starschema.biz/

Now a couple of things (disclaimer or user’s guide):

  • When the page loads you have to add your name and chose your role (player 1 or player 2)
  • For new game click “New”
  • Hit is hit, stand is stand. If two of you are playing then both of you need to stand before the dealer reveals his cards.
  • If anyone logs in with the same role in the meantime fun things will happen. You might be kicked off or other unexpected things might arise (like switch to cooperative mode)

GL/HF.

Details, Tableau

How does this work? Since I built the whole game in less than a day you can imagine: it’s not too complex. The game area is a dashboard. On the top everything is parameter driven: the opponent’s name, score and bar chart with score all rely on parameters.

The cards are coming from two separate sheets. Those sheets are using the same data set: numbers from zero to 851. The first digit (after left padding with zero) shows the location in hand while the second and third describes the card itself (it can be empty, a standard card from 52 cards deck or a face down card).

Every card has its location and card identifier. This used to position it to a scatter plot using custom shapes

The viz is shape based with the card position on the columns shelf. Shapes are custom, each one for a card type.

Tableau Proba Blackjack Games

You can have a look on the raw tableu workbook here: https://public.tableau.com/views/Blackjack/BlackjackTableau . Feel free to download and have look in it.

Even more Details, Clojure, ClojureScript

Okay, let’s switch to hardcore mode. First of all all sources are on github, but this is not everything. Since I used clojure docstrings and comments I was able to generate developer docs using Marginalia (not the original, but Michael Blume‘s fork). Marginalia produces similar output as Docco for CoffeScript: on the left side you can see your docstrings while the right side contains the code. In my opinion this is the best approach: usually I start reading the source codes before any developer documentation but here I can read both in the same time.:

This is how the generated documentation looks: code and explanation in the same line.

Blackjack

You can read the generated documentation here: http://tfoldi.github.io/data15-blackjack/.

Architecture

My main goal was to show how multiple people can see the same dataset from different angles from multiple locations. Thus, I needed a server that receives interactions from users, interprets them and sends back the shared state. And this needs to be real time: if one player hits a card then the other should see it immediately (like a push notification based tableau data change). This just cries for web sockets that allow to send and receive asynchronous messages between browsers and server.

I decided to put everything tableau related to the tableau namespace on client side (=clojurescript, running in browser), blackjack game related functions went to blackjack namespace on server side while client-server communications are in client and server on their respective sides. The client does nothing just sends the click events to server (logon, hit, stand, new) and renders the tableau report when the server asks for it.

The server sends the full state information always in the same format. It has the player names and scores, their cards, status messages. When it arrives to client I just use the Tableau JS API to set the correct filters and parameters. Tableau JS API is smart enough to not update the dashboard if I set the same filters again and again.

2
4
6
8
10
12
14
16
18
20
22
24
26
28
;;
(defviz
'Map (atom) to store tableau viz load status & object reference '
'Javascript object to interface with `Viz` constructor. Hide tabs & toolbars.
After initalizing the Viz change `:status` to `:viz-ready` in our `viz` atom.
The Client UI watches this atom: when the status changes the dom node will be visible
(js-obj
'hideToolbar'true
'onFirstInteractive'#(swap!vizassoc:status:viz-ready)))
;; In client.clj
;; Watch for `:viz-ready` status in `tableau/viz` atom. If the `viz`
;; status have changed and the new status is :viz-ready, then send
(add-watchtableau/viz:ui
(when(=:viz-ready(new-state:status))

When the viz is ready just send a “load” message to the server and start the fun!

The WHY

Tableau Proba Blackjack Definition

There is always a purpose. With this mini-project my goal was to showcase that with Tableau JS API your only limitation is your imagination. It was a few hours of work to build an application where different users were able to see and understand play with the same set of data, together but from different perspectives. Or if you logon with the same username from multiple devices and change something it will visible on the other device immediately. Again, only matters of few hours of work.

It’s fun and easy.

Tableau Proba Blackjack Test

  • Tableau Extensions Addons Introduction: Synchronized Scrollbars - December 2, 2019
  • Tableau External Services API: Adding Haskell Expressions as Calculations - November 20, 2019
  • Scaling out Tableau Extracts – Building a distributed, multi-node MPP Hyper Cluster - August 11, 2019