No doubt that chess is one of my favourite game. It’s more than 15 centuries old but still fresh and enjoyable. Also no doubt that my favourite data visualization tool is Tableau so why not mix these two together? That’s the motivation of my new Tableau game, the Tableau Chess that is running entirely in a Tableau Public workbook using some javascript coffeescript magic.
How can I play it?
Just go to the game’s github.io page: https://tfoldi.github.io/tableau-chess/ . After the board is loaded you can select your figure and select where it should step. That’s it. You can also select what do you need in exchange of a pawn when it goes beyond the table.
Gameplay experience of Tableau Chess
It has no checkmate detection yet, that’s your part, you should know when you win or lose.
The Chess Engine
First of all, the chess engine is not written by me. I’m smart, but not half as smart as Oscar Toledo who wrote his first 1K engine in C. 1K means 1024 bytes here that includes the entire chess engine and rendering. Later he made javascript version of the game and published here: http://nanochess.org/chess4.html. The complete source code of the chess engine (that handles moves, pawn promotion and everything) can fit on your screen. Let me show sources here:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<script>//(c)2010 Oscar Toledo G. var B,i,y,u,b,I=[],G=120,x=10,z=15,M=1e4,l=[5,3,4,6,2,4,3,5,1,1,1,1,1,1,1,1,9,9 ,9,9,9,9,9,9,13,11,12,14,10,12,11,13,0,99,0,306,297,495,846,-1,0,1,2,2,1,0,-1,- 1,1,-10,10,-11,-9,9,11,10,20,-9,-11,-10,-20,-21,-19,-12,-8,8,12,19,21];function X(w,c,h,e,S,s){var t,o,L,E,d,O=e,N=-M*M,K=78-h<<x,p,g,n,m,A,q,r,C,J,a=y?-x:x; y^=8;G++;d=w||s&&s>=h&&X(0,0,0,21,0,0)>M;do{if(o=I[p=O]){q=o&z^y;if(q<7){A=q--& 2?8:4;C=o-9&z?[53,47,61,51,47,47][q]:57;do{r=I[p+=l[C]];if(!w|p==w){g=q|p+a-S?0 :S;if(!r&(!!q|A<3||!!g)||(r+1&z^y)>9&&q|A>2){if(m=!(r-2&7))return y^=8,I[G--]= O,K;J=n=o&z;E=I[p-a]&z;t=q|E-7?n:(n+=2,6^y);while(n<=t){L=r?l[r&7|32]-h-q:0;if( s)L+=(1-q?l[(p-p%x)/x+37]-l[(O-O%x)/x+37]+l[p%x+38]*(q?1:2)-l[O%x+38]+(o&16)/2: !!m*9)+(!q?!(I[p-1]^n)+!(I[p+1]^n)+l[n&7|32]-99+!!g*99+(A<2):0)+!(E^y^9);if(s>h ||1<s&s==h&&L>z|d){I[p]=n,I[O]=m?(I[g]=I[m],I[m]=0):g?I[g]=0:0;L-=X(s>h|d?0:p,L -N,h+1,I[G+1],J=q|A>1?0:p,s);if(!(h||s-1|B-O|i-n|p-b|L<-M))return W(),G--,u=J; J=q-1|A<7||m||!s|d|r|o<z||X(0,0,0,21,0,0)>M;I[O]=o;I[p]=r;m?(I[m]=I[g],I[g]=0): g?I[g]=9^y:0;}if(L>N||s>1&&L==N&&!h&&Math.random()<.5){I[G]=O;if(s>1){if(h&&c-L <0)return y^=8,G--,L;if(!h)i=n,B=O,b=p;}N=L;}n+=J||(g=p,m=p<O?g-3:g+2,I[m]<z|I[ m+O-p]||I[p+=p-O])?1:0;}}}}while(!r&q>2||(p=O,q|A>2|o>z&!r&&++C*--A));}}}while( ++O>98?O=20:e-O);return y^=8,G--,N+M*M&&N>-K+1924|d?N:0;}B=i=y=u=0;while(B++< 120)I[B-1]=B%x?B/x%x<2|B%x<2?7:B/x&4?0:l[i++]|16:7;for(a= "<table cellspacing=0 align=center>",i=18;i<100;a+=++i%10-9? "<th width=60 height=60 onclick=Y("+i+") id=o"+i+ " style='line-height:50px;font-size:50px;border:2px solid #dde' bgcolor=#"+ (i*.9&1?"c0c":"f0f")+"0f0>":(i++,"<tr>")); a+="<th colspan=8><select id=t style='font-size:20px'><option>♛<option>"; document.write(a+"♜<option>♝<option>♞</select></table>"); function W(){B=b;for(p=21;p<99;++p)if(q=document.getElementById("o"+p)){q. innerHTML="\xa0\u265f\u265a\u265e\u265d\u265c\u265b \u2659\u2654\u2658\u2657\u2656\u2655".charAt(I[p]&z); q.style.borderColor=p==B?"red":"#dde";}}W(); function Y(s){i=(I[s]^y)&z;if(i>8){b=s;W();}else if(B&&i<9){b=s;i=I[B]&z;if((i& 7)==1&(b<29|b>90))i=14-document.getElementById("t").selectedIndex^y;X(0,0,0,21, u,1);if(y)setTimeout("X(0,0,0,21,u,2/*ply*/),X(0,0,0,21,u,1)",250);}} </script> |
Yes. That’s all. It has the UI, re-rendering and computer AI. You can try out the original game here, try to beat it then don’t forget to check the page’s source code again. Yes, it’s amazing.
To help myself using the engine I used Raymond Hulha’s deobfuscated code from here: https://github.com/rhulha/nanochess.
Tableau Chess – Using the Tableau JS API
I wrote a dedicated post on how can you build interactive vizes like this from scratch using yeoman, grunt, bower, coffeescript and Tableau JavaScript API. You can read it here.
If you like it or it’s not working, just leave a comment.
Tamás Földi
Latest posts by Tamás Földi (see all)
- Python Experiments in Tableau 1. – Add live currency conversion to Tableau Dashboards using TabPy - January 9, 2018
- HOWTO: Tableau Server Linux in Docker Container - November 2, 2017
- Tableau Filestore Consistency Checker – How Repository Maps to Filestore - August 17, 2017
