initial commit

10 files changed, 900 insertions, 0 deletions

diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..412eeda
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,22 @@
+# Auto detect text files and perform LF normalization
+* text=auto
+
+# Custom for Visual Studio
+*.cs     diff=csharp
+*.sln    merge=union
+*.csproj merge=union
+*.vbproj merge=union
+*.fsproj merge=union
+*.dbproj merge=union
+
+# Standard to msysgit
+*.doc	 diff=astextplain
+*.DOC	 diff=astextplain
+*.docx diff=astextplain
+*.DOCX diff=astextplain
+*.dot  diff=astextplain
+*.DOT  diff=astextplain
+*.pdf  diff=astextplain
+*.PDF	 diff=astextplain
+*.rtf	 diff=astextplain
+*.RTF	 diff=astextplain
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..b9d6bd9
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,215 @@
+#################
+## Eclipse
+#################
+
+*.pydevproject
+.project
+.metadata
+bin/
+tmp/
+*.tmp
+*.bak
+*.swp
+*~.nib
+local.properties
+.classpath
+.settings/
+.loadpath
+
+# External tool builders
+.externalToolBuilders/
+
+# Locally stored "Eclipse launch configurations"
+*.launch
+
+# CDT-specific
+.cproject
+
+# PDT-specific
+.buildpath
+
+
+#################
+## Visual Studio
+#################
+
+## Ignore Visual Studio temporary files, build results, and
+## files generated by popular Visual Studio add-ons.
+
+# User-specific files
+*.suo
+*.user
+*.sln.docstates
+
+# Build results
+
+[Dd]ebug/
+[Rr]elease/
+x64/
+build/
+[Bb]in/
+[Oo]bj/
+
+# MSTest test Results
+[Tt]est[Rr]esult*/
+[Bb]uild[Ll]og.*
+
+*_i.c
+*_p.c
+*.ilk
+*.meta
+*.obj
+*.pch
+*.pdb
+*.pgc
+*.pgd
+*.rsp
+*.sbr
+*.tlb
+*.tli
+*.tlh
+*.tmp
+*.tmp_proj
+*.log
+*.vspscc
+*.vssscc
+.builds
+*.pidb
+*.log
+*.scc
+
+# Visual C++ cache files
+ipch/
+*.aps
+*.ncb
+*.opensdf
+*.sdf
+*.cachefile
+
+# Visual Studio profiler
+*.psess
+*.vsp
+*.vspx
+
+# Guidance Automation Toolkit
+*.gpState
+
+# ReSharper is a .NET coding add-in
+_ReSharper*/
+*.[Rr]e[Ss]harper
+
+# TeamCity is a build add-in
+_TeamCity*
+
+# DotCover is a Code Coverage Tool
+*.dotCover
+
+# NCrunch
+*.ncrunch*
+.*crunch*.local.xml
+
+# Installshield output folder
+[Ee]xpress/
+
+# DocProject is a documentation generator add-in
+DocProject/buildhelp/
+DocProject/Help/*.HxT
+DocProject/Help/*.HxC
+DocProject/Help/*.hhc
+DocProject/Help/*.hhk
+DocProject/Help/*.hhp
+DocProject/Help/Html2
+DocProject/Help/html
+
+# Click-Once directory
+publish/
+
+# Publish Web Output
+*.Publish.xml
+*.pubxml
+
+# NuGet Packages Directory
+## TODO: If you have NuGet Package Restore enabled, uncomment the next line
+#packages/
+
+# Windows Azure Build Output
+csx
+*.build.csdef
+
+# Windows Store app package directory
+AppPackages/
+
+# Others
+sql/
+*.Cache
+ClientBin/
+[Ss]tyle[Cc]op.*
+~$*
+*~
+*.dbmdl
+*.[Pp]ublish.xml
+*.pfx
+*.publishsettings
+
+# RIA/Silverlight projects
+Generated_Code/
+
+# Backup & report files from converting an old project file to a newer
+# Visual Studio version. Backup files are not needed, because we have git ;-)
+_UpgradeReport_Files/
+Backup*/
+UpgradeLog*.XML
+UpgradeLog*.htm
+
+# SQL Server files
+App_Data/*.mdf
+App_Data/*.ldf
+
+#############
+## Windows detritus
+#############
+
+# Windows image file caches
+Thumbs.db
+ehthumbs.db
+
+# Folder config file
+Desktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Mac crap
+.DS_Store
+
+
+#############
+## Python
+#############
+
+*.py[co]
+
+# Packages
+*.egg
+*.egg-info
+dist/
+build/
+eggs/
+parts/
+var/
+sdist/
+develop-eggs/
+.installed.cfg
+
+# Installer logs
+pip-log.txt
+
+# Unit test / coverage reports
+.coverage
+.tox
+
+#Translations
+*.mo
+
+#Mr Developer
+.mr.developer.cfg
diff --git a/how.js b/how.js
new file mode 100644
index 0000000..7325bb4
--- /dev/null
+++ b/how.js
@@ -0,0 +1,443 @@
+var Tables = function(viewport, quantity) {
+
+    var that = this;
+    that.quantity = quantity;
+    that.viewport = viewport;
+    that.dim = 0;
+
+    that.tables = [];
+
+    that.singleDiv = jQuery('<div>').css({position: 'absolute'}).addClass('table');
+    that.direction = undefined;
+    that.setDirection = function(direction) {
+	var alignment = direction.split('-');
+	var rows = 2;
+	var cols = parseInt(Math.ceil(that.quantity / 2));
+	if (alignment[0] == 'top' || alignment[0] == 'bottom') {
+	    rows = cols;
+	    cols = 2;
+	}
+	var width = that.viewport.width / cols;
+	var height = that.viewport.height / rows;
+	that.dim = Math.min(width, height) * 0.5;
+	that.singleDiv.css({height: that.dim, width: that.dim});
+	var positions = [];
+	for (var i = 0; i < that.quantity; i++) {
+	    var position = { top: 0, left: 0 };
+	    switch (alignment[1]) {
+	    case 'straight':
+		position.top = parseInt(Math.floor(2 * i / that.quantity));
+		position.left = i % parseInt((that.quantity+1) / 2);
+		break;
+	    case 'uturn':
+		position.top = parseInt(Math.floor(2 * i / that.quantity));
+		position.left = Math.min(i, (that.quantity-1-i));
+		break;
+	    case 'snake':
+		position.top = i % 4;
+		position.top = Math.min(position.top, 3 - position.top);
+		position.left = parseInt(Math.floor(i / 2));
+		break;
+	    }
+	    positions[i] = position;
+	}
+	if (that.quantity % 2) {
+	    var skewed = (alignment[1] == 'snake') ? (that.quantity - 1) : ((that.quantity - 1) / 2);
+	    positions[skewed].top = 0.5;
+	}
+	that.tables = [];
+	for (var i = 0; i < that.quantity; i++) {
+	    that.tables[i] = that.singleDiv.clone();
+	    that.tables[i].text(i+1);
+	    switch (alignment[0]) {
+	    case 'left':
+		positions[i].left += (width-that.dim)/(width*2);
+		positions[i].top += (height-that.dim)/(height*2);
+		that.tables[i].css({left: positions[i].left * width,
+				    top: positions[i].top * height});
+		break;
+	    case 'right':
+		positions[i].left -= (width-that.dim)/(width*2);
+		positions[i].top += (height-that.dim)/(height*2);
+		that.tables[i].css({left: (Math.ceil(that.quantity / 2) - positions[i].left - 1) * width,
+				    top: positions[i].top * height});
+		break;
+	    case 'top':
+		positions[i].left += (height-that.dim)/(height*2);
+		positions[i].top += (width-that.dim)/(width*2);
+		that.tables[i].css({top: positions[i].left * height,
+				    left: positions[i].top * width});
+		break;
+	    case 'bottom':
+		positions[i].left -= (height-that.dim)/(height*2);
+		positions[i].top += (width-that.dim)/(width*2);
+		that.tables[i].css({top: (Math.ceil(that.quantity / 2) - positions[i].left - 1) * height,
+				    left: positions[i].top * width});
+		break;
+	    }
+	}
+    }
+
+    that.getPosition = function(position, size) {
+	var pos = position.toString().match(/^(\d+)([NEWS]?)$/);
+	if (!pos) {
+	    throw 'Illegal position';
+	}
+	var tableNo = parseInt(pos[1]);
+	if (tableNo > that.tables.length || tableNo < 1) {
+	    throw 'Table number out of range';
+	}
+	var offset = { left: parseInt(that.tables[tableNo-1].css('left')),
+		       top: parseInt(that.tables[tableNo-1].css('top')) };
+	switch (pos[2]) {
+	case 'N':
+	    offset.left += that.dim / 2;
+	    break;
+	case 'E':
+	    offset.left += that.dim;
+	    offset.top += that.dim / 2;
+	    break;
+	case 'S':
+	    offset.left += that.dim / 2;
+	    offset.top += that.dim;
+	    break;
+	case 'W':
+	    offset.top += that.dim / 2;
+	    break;
+	default:
+	    offset.top += that.dim / 2;
+	    offset.left += that.dim / 2;
+	}
+	if (size) {
+	    offset.top -= size/2;
+	    offset.left -= size/2;
+	}
+	return offset;
+    }
+
+    that.display = function() {
+	for (var i = 0; i < that.tables.length; i++) {
+	    that.viewport.container.append(that.tables[i]);
+	}
+    }
+
+};
+
+var Pair = function(startingPosition, number, movement) {
+    var that = this;
+    that.players = [ startingPosition, startingPosition.replace("N", "S").replace("E", "W") ];
+    that.number = number;
+    that.movement = movement;
+    that.containers = [];
+    that.size = that.movement.tables.dim * 0.3;
+    that.colour = '#'+('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6);
+    for (var i = 0; i < 2; i++) {
+	that.containers[i] = jQuery('<div>').addClass('player').css({backgroundColor: that.colour, position: 'absolute', lineHeight: that.size+'px', width: that.size, height: that.size, borderRadius: that.size}).text(that.number);
+    }
+
+    that.moveTo = function(position) {
+	for (var i = 0; i < 2; i++) {
+	    if (position) {
+		that.players[i] = position;
+		var pos = that.movement.tables.getPosition(position, that.size);
+		that.containers[i].animate(pos, 1000, 'easeInOutBack');
+		position = position.replace('N', 'S').replace('E', 'W');
+	    }
+	    else {
+		that.containers[i].animate({left: 0, top: 0}, 1000, 'easeInOutBack');
+	    }
+	}
+    }
+
+    that.display = function() {
+	for (var i = 0; i < 2; i++) {
+	    movement.viewport.container.append(that.containers[i]);
+	    that.containers[i].animate(that.movement.tables.getPosition(that.players[i], that.size), 1000, 'easeInOutBack');
+	}
+    }
+}
+
+var Set = function(startingPosition, movement, number) {
+    var that = this;
+    that.movement = movement;
+    that.number = number;
+    that.position = startingPosition;
+    that.colour = '#'+('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6);
+    that.size = that.movement.tables.dim * 0.2;
+    that.container = jQuery('<div>').addClass('cards').css({position: 'absolute', width: that.size, height: that.size*1.5, backgroundColor: that.colour, top: that.movement.viewport.height-that.size}).text(that.number);
+
+    that.getPosition = function(position) {
+	var pos;
+	if (parseInt(position) == pos && position > 0) {
+	    pos = that.movement.tables.getPosition(position, that.size);
+	}
+	else {
+	    var after = parseInt(position);
+	    pos = that.movement.tables.getPosition(after, that.size);
+	    var afterPos = that.movement.tables.getPosition(after%that.movement.tables.quantity+1, that.size);
+	    if (after == that.movement.tables.quantity) {
+		pos.top = Math.min(Math.max(0, pos.top + (pos.top - afterPos.top) * (position - after)), that.movement.viewport.height - that.size);
+		pos.left = Math.min(Math.max(0, pos.left + (pos.left - afterPos.left) * (position - after)), that.movement.viewport.width - that.size);
+	    }
+	    else {
+		pos.top = Math.min(Math.max(0, pos.top + (afterPos.top - pos.top) * (position - after)), that.movement.viewport.height - that.size);
+		pos.left = Math.min(Math.max(0, pos.left + (afterPos.left - pos.left) * (position - after)), that.movement.viewport.width - that.size);
+	    }
+	}
+	pos.top -= that.size * 0.25;
+	return pos;
+    }
+
+    that.moveTo = function(position) {
+	that.position = position;
+	if (position) {
+	    that.container.animate(that.getPosition(position), 1000, 'easeInOutBack');
+	}
+	else {
+	    that.container.animate({left: 0, top: that.movement.viewport.height - that.size}, 1000, 'easeInOutBack');
+	}
+    }
+
+    that.display = function() {
+	that.movement.viewport.container.append(that.container);
+	that.moveTo(that.position);
+    }
+}
+
+var Movement = function(viewport, movement, tables, summary) {
+    var that = this;
+    that.viewport = viewport;
+    that.data = movement;
+    that.tables = tables;
+    that.round = 1;
+    that.summary = summary;
+
+    that.pairs = [];
+    for (var i = 0; i < tables.quantity * 2; i++) {
+	that.pairs[that.data.positions[i]] = new Pair(parseInt(Math.ceil((i+1)/2)) + ['N','E'][i%2], that.data.positions[i], that);
+	that.pairs[that.data.positions[i]].display();
+    }
+
+    that.sets = [];
+    var lastTable = 0;
+    var emptySets = 0;
+    for (var i = 0; i < that.data.sets.length; i++) {
+	if (that.data.sets[i]) {
+	    lastTable = that.data.sets[i];
+	    emptySets = 0;
+	}
+	else {
+	    emptySets++;
+	    for (var j = i - emptySets + 1; j <= i; j++) {
+		that.data.sets[j] = lastTable + 0.25 + 0.5*(j - i + emptySets)/(emptySets+1);
+	    }
+	}
+    }
+    for (var i = 0; i < that.data.sets.length; i++) {
+	that.sets[i] = new Set(that.data.sets[i], that, i+1);
+	that.sets[i].display();
+    }
+	
+    that.step = function() {
+	if (summary) {
+	    summary.update(that);
+	}
+	if (that.round < that.data.rounds) {
+	    for (var p in that.pairs) {
+		var position = that.pairs[p].players[0];
+		var ind = that.data.movement.indexOf(position);
+		if (ind > -1) {
+		    that.pairs[p].moveTo(that.data.movement[(ind+1)%that.data.movement.length]);
+		}
+		else {
+		    that.pairs[p].moveTo(position);
+		}
+	    }
+	    that.data.sets.unshift(that.data.sets.pop());
+	    for (var s in that.sets) {
+		that.sets[s].moveTo(that.data.sets[s]);
+	    }
+	    that.round++;
+	    return true;
+	}
+	else {
+	    for (var p in that.pairs) {
+		that.pairs[p].moveTo();
+	    }
+	    for (var s in that.sets) {
+		that.sets[s].moveTo();
+	    }
+	    return false;
+	}
+    }
+}
+
+var Summary = function(pairs) {
+
+    var that = this;
+
+    that.pairs = pairs;
+    that.table = jQuery('<table>').addClass('summary');
+    for (var i = 0; i <= that.pairs; i++) {
+	var row = jQuery('<tr>');
+	for (var j = 0; j <= that.pairs; j++) {
+	    var cell;
+	    if (i == 0 && j) {
+		cell = jQuery('<th>');
+		cell.text(j);
+	    }
+	    else if (j == 0 && i) {
+		cell = jQuery('<th>');
+		cell.text(that.pairs - i + 1);
+	    }
+	    else {
+		cell = jQuery('<td>');
+	    }
+	    row.append(cell);
+	}
+	that.table.append(row);
+    }
+
+    that.update = function(movement) {
+	for (var pair in movement.pairs) {
+	    that.table.find('th:contains('+movement.pairs[pair].number+')').css({backgroundColor: movement.pairs[pair].colour});
+	}
+	var played = [];
+	for (var t = 1; t <= movement.tables.quantity; t++) {
+	    played[t] = { set: movement.data.sets.indexOf(t),
+			  pairs: [] };
+	}
+	for (var p in movement.pairs) {
+	    played[parseInt(movement.pairs[p].players[0])].pairs.push(parseInt(p));
+	}
+	for (var pl in played) {
+	    played[pl].pairs.sort(function(a,b){return b-a;});
+	    var cell = that.table.find('tr').eq(movement.tables.quantity*2 + 1 - played[pl].pairs[0]).find('td').eq(played[pl].pairs[1]-1);
+	    cell.css({backgroundColor: movement.sets[played[pl].set].colour});
+	    cell.text(pl);
+	}
+    }
+    
+    that.clear = function() {
+	that.table.remove();
+    }
+
+    that.render = function(where) {
+	if (!where) {
+	    where = jQuery('body');
+	}
+	jQuery(where).append(that.table);
+    }
+}
+
+var Viewport = function(width, height) {
+    var that = this;
+    that.width = width;
+    that.height = height;
+    that.container = jQuery('<div>').css({height: that.height, width: that.width, position: 'relative'}).addClass('viewport');
+
+    that.clear = function() {
+	that.container.html('');
+    }
+
+    that.render = function(where) {
+	if (!where) {
+	    where = jQuery('body');
+	}
+	jQuery(where).append(that.container);
+    }
+};
+
+var Control = function(movement) {
+    var that = this;
+
+    that.movement = movement;
+
+    that.setMovement = function(movement) {
+	that.movement = movement;
+    }
+
+    that.step = function() {
+	if (!that.movement.step()) {
+	    that.stop();
+	    that.container.hide();
+	};
+	if (that.autoplay) {
+	    that.autoTimeout = setTimeout(that.step, 1500);
+	}
+    }
+
+    that.autoplay = false;
+    that.autoTimeout = undefined;
+    that.play = function() {
+	that.autoplay = true;
+	that.step();
+	that.playButton.hide();
+	that.stopButton.show();
+	that.stepButton.hide();
+    }
+
+    that.stop = function() {
+	that.autoplay = false;
+	clearTimeout(that.autoTimeout);
+	that.stopButton.hide();
+	that.playButton.show();
+	that.stepButton.show();
+    }
+
+
+    that.container = jQuery('<div>').addClass('controls');
+
+    that.stepButton = jQuery('<div>').addClass('step').text('>|');
+    that.playButton = jQuery('<div>').addClass('play').text('>');
+    that.stopButton = jQuery('<div>').addClass('stop').text('||');
+
+    that.container.append(that.stepButton).append(that.playButton).append(that.stopButton);
+    jQuery('body').append(that.container);
+
+    that.stepButton.bind('click', that.step);
+    that.playButton.bind('click', that.play);
+    that.stopButton.bind('click', that.stop);
+
+}
+
+jQuery(document).ready(function() {
+    var vp = new Viewport(jQuery(window).width()*0.6, jQuery(window).height()*0.9);
+    vp.render();
+    var movements;
+    var moveList = jQuery('.selector .list');
+    jQuery.getJSON('movements.json', function(data) {
+	movements = data;
+	for (var m in movements) {
+	    var move = m.split('-');
+	    var listCell = jQuery('<div>').addClass('list-movement').attr('data-movement', m).text(move[0]);
+	    var listRow = moveList.find('div[data-rounds="'+move[1]+'"]');
+	    if (listRow.size()) {
+		listRow.append(listCell);
+	    }
+	    else {
+		moveList.append(jQuery('<div>').addClass('list-row').attr('data-rounds', move[1]).append(jQuery('<div>').addClass('list-movement').text(move[1])).append(listCell));
+	    }
+	}
+	var sum;
+	var control = new Control();
+	control.container.hide();
+	jQuery('.selector .list .list-movement[data-movement]').click(function() {
+	    vp.clear();
+	    if (sum) {
+		sum.clear();
+	    }
+	    control.stop();
+	    var move = movements[jQuery(this).attr('data-movement')];
+	    var t = new Tables(vp, move.tables);
+	    var direction = jQuery('.layout .direction').val() + '-' + jQuery('.layout .way').val();
+	    t.setDirection(direction);
+	    t.display();
+	    sum = new Summary(move.tables * 2);
+	    sum.render();
+	    move = new Movement(vp, move, t, sum);
+	    control.setMovement(move);
+	    control.container.show();
+	});
+    });
+});
diff --git a/how.php b/how.php
new file mode 100644
index 0000000..c9359d1
--- /dev/null
+++ b/how.php
@@ -0,0 +1,48 @@
+<?php
+
+$file = preg_split('/\*-+/', file_get_contents('howell.dat'));
+$movements = [];
+for ($i = 0; $i < count($file); $i++) {
+  if ($i%2) {
+    $matches = [];
+    preg_match_all('/(\d+)/', $file[$i], $matches);
+    $sets = array_fill(0, $rounds, 0);
+    $positions = [];
+    $table = 1;
+    $set = 0;
+    for ($j = 0; $j < count($matches[1]); $j++) {
+      if ((int)$matches[1][$j]) {
+	$sets[$set++] = $table++;
+	$positions[] = (int)($matches[1][$j++]);
+	$positions[] = (int)($matches[1][$j]);
+      }
+      else {
+	$sets[$set++] = 0;
+      }
+    }
+    $movement = [];
+    $lines = ['N','E'];
+    for ($j = $rounds; $j >= 1; $j--) {
+      $pos = array_search($j, $positions);
+      $movement[] = ceil(($pos+1)/2).$lines[$pos%2];
+    }
+    $movements[$id] = [
+		       'tables' => $tables,
+		       'rounds' => $rounds,
+		       'sets' => $sets,
+		       'movement' => $movement,
+		       'positions' => $positions
+		       ];
+  }
+  else {
+    $matches = [];
+    preg_match('/.*(-\d+).*RUNDY.*?(\d+).*STOLIKI.*/s', $file[$i], $matches);
+    $id = $matches[2].$matches[1];
+    $tables = (int)($matches[2]);
+    $rounds = -(int)($matches[1]);
+  }
+}
+
+file_put_contents('movements.json', json_encode($movements));
+
+?>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..207cfba
--- /dev/null
+++ b/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title>Howellki</title>
+    <script src="js/jquery/jquery.min.js"></script>
+    <script src="js/jquery-easing/jquery.easing.min.js"></script>
+    <script src="how.js"></script>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+  </head>
+  <body>
+    <div class="selector">
+      <div class="lollipop">
+	<br /><br />
+	&laquo;<br />
+	M<br />
+	E<br />
+	N<br />
+	U<br />
+	&laquo;
+      </div>
+      <div class="list">
+	<div class="layout">Stoły
+	  <select class="direction">
+	    <option value="left">od lewej</option>
+	    <option value="right">od prawej</option>
+	    <option value="top">od góry</option>
+	    <option value="bottom">od dołu</option>
+	  </select>
+	  <select class="way">
+	    <option value="straight">w dwóch rzędach</option>
+	    <option value="uturn">zawinięte</option>
+	    <option value="snake">wężykiem</option>
+	  </select>
+	</div>
+	<div> RUNDY  STOŁY</div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/js/jquery b/js/jquery
new file mode 100644
index 0000000..7e2f826
--- /dev/null
+++ b/js/jquery
@@ -0,0 +1 @@
+/usr/share/javascript/jquery
\ No newline at end of file
diff --git a/js/jquery-easing b/js/jquery-easing
new file mode 100644
index 0000000..daddba6
--- /dev/null
+++ b/js/jquery-easing
@@ -0,0 +1 @@
+/usr/share/javascript/jquery-easing
\ No newline at end of file
diff --git a/js/jquery-ui b/js/jquery-ui
new file mode 100644
index 0000000..d9f803c
--- /dev/null
+++ b/js/jquery-ui
@@ -0,0 +1 @@
+/usr/share/javascript/jquery-ui
\ No newline at end of file
diff --git a/movements.json b/movements.json
new file mode 100644
index 0000000..0657ab1
--- /dev/null
+++ b/movements.json
@@ -0,0 +1 @@
+{"4-7":{"tables":4,"rounds":7,"sets":[1,2,3,0,4,0,0],"movement":["3E","4E","2N","2E","4N","3N","1E"],"positions":[8,1,5,4,2,7,3,6]},"5-7":{"tables":5,"rounds":7,"sets":[1,2,3,4,5,0,0],"movement":["4E","2N","3E","5N","2E","4N","1E"],"positions":[10,1,6,3,9,5,2,7,4,8]},"6-8":{"tables":6,"rounds":8,"sets":[1,2,3,4,5,6,0,0],"movement":["6E","3N","5E","2N","5N","6N","4E","1E"],"positions":[12,1,5,11,7,10,9,2,4,6,3,8]},"5-9":{"tables":5,"rounds":9,"sets":[1,2,3,4,5,0,0,0,0],"movement":["4E","4N","1E","5N","2E","5E","1N","2N","3E"],"positions":[3,7,2,5,10,1,8,9,6,4]},"6-9":{"tables":6,"rounds":9,"sets":[1,2,3,4,5,6,0,0,0],"movement":["2N","2E","4N","1E","3E","5E","3N","1N","6E"],"positions":[2,6,9,8,3,5,7,12,11,4,10,1]},"7-9":{"tables":7,"rounds":9,"sets":[1,2,3,4,5,6,7,0,0],"movement":["4N","2N","5N","3N","6E","3E","5E","7E","1E"],"positions":[14,1,8,13,6,4,9,12,7,3,11,5,10,2]},"6-10":{"tables":6,"rounds":10,"sets":[1,0,2,0,0,3,4,5,6,0],"movement":["5N","5E","2E","6E","2N","3N","4N","6N","3E","1E"],"positions":[12,1,6,8,5,2,4,11,10,9,3,7]},"7-10":{"tables":7,"rounds":10,"sets":[1,2,3,4,5,6,7,0,0,0],"movement":["7N","5E","2N","2E","4N","6N","3N","6E","4E","1E"],"positions":[14,1,8,7,4,13,6,2,12,9,5,3,10,11]},"8-10":{"tables":8,"rounds":10,"sets":[1,2,3,4,5,6,7,8,0,0],"movement":["8N","6E","2N","3E","5E","6N","7N","8E","4N","1E"],"positions":[16,1,8,15,14,7,2,13,12,6,5,9,4,11,10,3]},"6-11":{"tables":6,"rounds":11,"sets":[1,0,2,0,0,0,3,4,5,0,6],"movement":["2E","5N","3E","5E","6E","2N","3N","6N","4E","4N","1E"],"positions":[12,1,6,11,5,9,2,3,10,8,4,7]},"7-11":{"tables":7,"rounds":11,"sets":[1,2,3,4,5,6,7,0,0,0,0],"movement":["6N","3E","3N","7N","4N","2E","7E","2N","4E","5N","1E"],"positions":[14,1,4,6,9,10,7,3,2,13,11,12,8,5]},"8-11":{"tables":8,"rounds":11,"sets":[1,2,3,4,5,6,7,8,0,0,0],"movement":["3E","4N","5N","5E","6E","8E","6N","2N","7E","8N","1E"],"positions":[16,1,4,15,14,11,10,13,9,8,5,7,12,3,2,6]},"9-11":{"tables":9,"rounds":11,"sets":[1,2,3,4,5,6,7,8,9,0,0],"movement":["3N","4N","5N","6E","6N","7E","2E","8N","9E","4E","1E"],"positions":[18,1,17,5,11,16,10,2,9,15,7,8,14,6,4,13,12,3]},"7-12":{"tables":7,"rounds":12,"sets":[1,2,3,4,5,6,7,0,0,0,0,0],"movement":["4N","5E","5N","2N","6E","3N","7N","2E","3E","6N","4E","1E"],"positions":[14,1,9,5,7,4,12,2,10,11,3,8,6,13]},"8-12":{"tables":8,"rounds":12,"sets":[1,2,3,4,5,6,7,8,0,0,0,0],"movement":["7N","2E","6N","3N","5E","8E","4E","4N","8N","5N","7E","1E"],"positions":[16,1,15,11,9,14,5,6,3,8,10,13,12,2,4,7]},"9-12":{"tables":9,"rounds":12,"sets":[1,2,3,4,5,6,7,8,9,0,0,0],"movement":["2N","7E","4E","8N","3E","5N","3N","8E","9E","4N","6N","1E"],"positions":[18,1,12,17,6,8,3,10,7,16,2,15,14,11,9,5,13,4]},"10-12":{"tables":10,"rounds":12,"sets":[1,2,3,4,5,6,7,8,9,10,0,0],"movement":["5N","10N","2E","3E","6N","3N","8E","2N","7E","4N","9E","1E"],"positions":[20,1,5,10,7,9,3,19,12,18,8,17,16,4,15,6,14,2,11,13]},"7-13":{"tables":7,"rounds":13,"sets":[1,2,3,4,5,6,7,0,0,0,0,0,0],"movement":["5E","1E","6E","3E","3N","5N","6N","7N","1N","2E","7E","2N","4E"],"positions":[5,12,2,4,9,10,14,1,8,13,7,11,6,3]},"8-13":{"tables":8,"rounds":13,"sets":[1,2,3,4,5,6,7,8,0,0,0,0,0],"movement":["3N","6E","3E","5E","5N","7E","4N","8E","6N","2E","7N","8N","1E"],"positions":[16,1,15,4,13,11,7,14,9,10,5,12,3,8,2,6]},"9-13":{"tables":9,"rounds":13,"sets":[1,2,3,4,5,6,7,8,9,0,0,0,0],"movement":["5E","2N","8E","4E","5N","3N","6E","7E","3E","8N","9N","4N","1E"],"positions":[18,1,12,17,8,5,2,10,9,13,16,7,15,6,4,11,3,14]},"10-13":{"tables":10,"rounds":13,"sets":[1,2,3,4,5,6,7,8,9,10,0,0,0],"movement":["4N","6E","8N","9N","10N","3N","5N","2N","8E","10E","5E","7E","1E"],"positions":[20,1,6,19,8,18,13,17,7,3,16,12,15,2,11,5,10,14,9,4]},"11-13":{"tables":11,"rounds":13,"sets":[1,2,3,4,5,6,7,8,9,10,11,0,0],"movement":["6N","11N","8E","2E","3N","4E","5N","7N","9E","7E","5E","10N","1E"],"positions":[22,1,21,10,9,20,19,8,7,3,13,18,6,4,17,11,16,5,2,15,12,14]},"8-14":{"tables":8,"rounds":14,"sets":[1,2,3,4,5,0,6,7,8,0,0,0,0,0],"movement":["3N","4E","5N","6N","5E","3E","8N","4N","7N","8E","2E","2N","7E","1E"],"positions":[16,1,3,4,14,9,7,13,12,10,11,15,6,2,8,5]},"9-14":{"tables":9,"rounds":14,"sets":[1,2,3,4,5,6,7,8,9,0,0,0,0,0],"movement":["6E","4E","7E","8E","3N","5E","2N","9N","5N","3E","7N","4N","6N","1E"],"positions":[18,1,8,17,10,5,3,13,6,9,2,14,4,12,16,11,7,15]},"10-14":{"tables":10,"rounds":14,"sets":[1,2,3,4,5,6,7,8,9,10,0,0,0,0],"movement":["9N","4N","6N","10E","2N","7N","5E","3E","10N","8N","6E","4E","9E","1E"],"positions":[20,1,10,19,18,7,13,3,17,8,12,4,9,16,5,15,14,2,6,11]},"11-14":{"tables":11,"rounds":14,"sets":[1,2,3,4,5,6,7,8,9,10,11,0,0,0],"movement":["2N","6E","10N","10E","4E","5N","3E","8N","11E","2E","7N","9N","6N","1E"],"positions":[22,1,14,5,21,8,20,10,9,19,2,13,4,18,7,17,3,16,12,11,15,6]},"12-14":{"tables":12,"rounds":14,"sets":[1,2,3,4,5,6,7,8,9,10,11,12,0,0],"movement":["12N","9E","9N","3N","4E","2N","7N","10E","11E","6N","8E","5E","11N","1E"],"positions":[24,1,9,23,11,22,21,10,20,3,5,19,8,18,17,4,12,13,16,7,2,6,14,15]},"8-15":{"tables":8,"rounds":15,"sets":[1,2,3,4,5,6,0,7,8,0,0,0,0,0,0],"movement":["6N","2N","7N","5E","3N","4N","5N","8N","8E","4E","2E","3E","7E","6E","1E"],"positions":[16,1,14,5,11,4,10,6,9,12,15,2,13,3,8,7]},"9-15":{"tables":9,"rounds":15,"sets":[1,2,3,4,5,6,7,8,9,0,0,0,0,0,0],"movement":["4N","9E","7N","2N","3E","3N","5E","6E","8N","5N","2E","7E","9N","4E","1E"],"positions":[18,1,12,5,10,11,15,2,6,9,17,8,13,4,7,16,3,14]},"10-15":{"tables":10,"rounds":15,"sets":[1,2,3,4,5,6,7,8,9,10,0,0,0,0,0],"movement":["3E","8N","6E","2N","3N","6N","4N","5N","5E","7N","9N","10E","2E","4E","1E"],"positions":[20,1,12,3,11,15,9,2,8,7,10,13,6,19,14,18,5,17,16,4]},"11-15":{"tables":11,"rounds":15,"sets":[1,2,3,4,5,6,7,8,9,10,11,0,0,0,0],"movement":["9E","10N","4N","2N","6E","3E","7N","5E","11N","8N","8E","11E","2E","3N","1E"],"positions":[22,1,12,3,2,10,13,21,20,8,19,11,9,18,6,5,17,15,14,16,7,4]},"12-15":{"tables":12,"rounds":15,"sets":[1,2,3,4,5,6,7,8,9,10,11,12,0,0,0],"movement":["9N","10N","3E","3N","4E","2N","7E","5E","11E","7N","8N","6E","2E","12N","1E"],"positions":[24,1,10,3,12,13,23,11,22,8,21,4,6,9,5,20,15,19,14,18,17,7,2,16]},"13-15":{"tables":13,"rounds":15,"sets":[1,2,3,4,5,6,7,8,9,10,11,12,13,0,0],"movement":["6N","12N","8E","9E","7N","3E","13N","2E","10E","11N","4E","11E","5N","3N","1E"],"positions":[26,1,25,8,2,10,24,5,3,23,15,22,11,21,20,13,19,12,18,7,6,4,14,17,9,16]},"9-16":{"tables":9,"rounds":16,"sets":[1,2,3,4,5,6,7,8,9,0,0,0,0,0,0,0],"movement":["8N","6N","3E","6E","8E","1E","7N","4E","2E","5N","9E","9N","5E","2N","4N","1N"],"positions":[1,11,3,8,18,14,2,9,7,4,15,13,10,17,16,12,5,6]},"10-16":{"tables":10,"rounds":16,"sets":[1,2,3,4,5,6,7,8,9,10,0,0,0,0,0,0],"movement":["10E","7E","3N","8E","2E","8N","3E","7N","4N","10N","5N","9E","6N","4E","9N","1E"],"positions":[20,1,19,12,14,10,8,3,6,18,4,17,9,15,11,13,2,5,7,16]},"11-16":{"tables":11,"rounds":16,"sets":[1,2,3,4,5,6,7,8,9,10,11,0,0,0,0,0],"movement":["2E","7N","4E","2N","10N","6N","9E","3E","5E","3N","9N","6E","8N","10E","11N","1E"],"positions":[22,1,13,16,7,9,21,14,20,8,11,5,15,19,4,18,6,10,12,3,2,17]},"12-16":{"tables":12,"rounds":16,"sets":[1,2,3,4,5,6,7,8,9,10,11,12,0,0,0,0],"movement":["10E","8N","10N","5N","7E","2E","8E","12N","7N","9N","3E","11E","9E","4N","6N","1E"],"positions":[24,1,23,11,22,6,3,21,13,20,2,19,8,12,15,10,7,4,14,16,18,5,9,17]},"13-16":{"tables":13,"rounds":16,"sets":[1,2,3,4,5,6,7,8,9,10,11,12,13,0,0,0],"movement":["6N","10N","13E","7E","3N","9N","7N","2E","4E","12N","8N","6E","8E","11N","5E","1E"],"positions":[26,1,25,9,12,24,23,8,22,2,16,5,10,13,6,4,11,21,15,20,3,19,7,18,17,14]},"14-16":{"tables":14,"rounds":16,"sets":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,0,0],"movement":["9N","12N","3N","5E","8N","2N","14N","3E","7E","10E","4E","11N","6E","4N","13E","1E"],"positions":[28,1,11,27,14,9,3,6,26,13,25,4,24,8,12,23,16,22,21,7,5,20,15,19,18,2,10,17]},"9-17":{"tables":9,"rounds":17,"sets":[1,2,3,4,5,6,7,0,8,9,0,0,0,0,0,0,0],"movement":["6E","2N","5E","9N","4E","4N","9E","5N","2E","6N","1E","3E","7N","8E","7E","3N","1N"],"positions":[1,7,16,9,2,6,12,13,10,15,8,17,5,3,18,4,14,11]},"10-17":{"tables":10,"rounds":17,"sets":[1,2,3,4,5,6,7,8,9,10,0,0,0,0,0,0,0],"movement":["10E","5N","2E","8E","3E","4E","2N","7N","5E","3N","9E","4N","6N","9N","6E","1E","1N"],"positions":[1,2,11,15,8,13,6,12,16,9,5,3,10,20,19,14,4,7,18,17]},"11-17":{"tables":11,"rounds":17,"sets":[1,2,3,4,5,6,7,8,9,10,11,0,0,0,0,0,0],"movement":["4N","2E","10E","7N","9E","2N","3E","9N","3N","5E","5N","8E","6N","10N","11N","7E","1E"],"positions":[22,1,12,16,9,11,17,21,7,8,5,20,14,2,19,6,10,13,4,15,3,18]},"12-17":{"tables":12,"rounds":17,"sets":[1,2,3,4,5,6,7,8,9,10,11,12,0,0,0,0,0],"movement":["7N","8E","4E","11E","12N","3N","9N","4N","2N","3E","10E","2E","10N","5N","5E","6E","1E"],"positions":[24,1,9,6,12,8,10,15,4,3,23,2,17,22,21,16,11,20,5,7,19,14,13,18]},"13-17":{"tables":13,"rounds":17,"sets":[1,2,3,4,5,6,7,8,9,10,11,12,13,0,0,0,0],"movement":["4E","11E","12N","7N","3E","6N","13N","2E","5N","6E","8E","5E","8N","9E","9N","10N","1E"],"positions":[26,1,25,10,24,13,23,17,9,6,12,8,14,22,5,7,3,4,2,21,20,16,15,19,11,18]},"14-17":{"tables":14,"rounds":17,"sets":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,0,0,0],"movement":["5N","3N","5E","6N","6E","7E","8N","9E","11N","4E","10E","12N","13E","2N","14N","3E","1E"],"positions":[28,1,4,27,16,2,26,8,17,15,14,13,25,12,11,24,23,10,22,7,9,21,6,20,19,5,3,18]},"15-17":{"tables":15,"rounds":17,"sets":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0,0],"movement":["6N","4N","13N","15E","10N","5E","7E","2N","12E","3N","11E","8E","13E","3E","14N","9N","1E"],"positions":[30,1,10,29,8,4,16,28,27,12,17,26,25,11,24,6,2,23,13,22,21,7,20,9,15,5,3,19,18,14]},"10-18":{"tables":10,"rounds":18,"sets":[1,2,3,4,0,5,6,7,8,9,10,0,0,0,0,0,0,0],"movement":["4E","6N","3E","5N","7E","9N","7N","5E","3N","1E","10N","8E","6E","10E","2N","2E","8N","1N"],"positions":[1,9,4,3,10,16,20,18,15,11,17,6,12,14,2,7,13,19,8,5]},"11-18":{"tables":11,"rounds":18,"sets":[1,2,3,4,5,6,7,8,9,10,11,0,0,0,0,0,0,0],"movement":["10N","8E","5N","2N","7N","3E","11N","6E","4N","6N","11E","3N","7E","9E","2E","5E","8N","1E"],"positions":[22,1,15,4,7,13,10,21,16,3,9,11,14,6,2,17,20,5,18,19,12,8]},"12-18":{"tables":12,"rounds":18,"sets":[1,2,3,4,5,6,7,8,9,10,11,12,0,0,0,0,0,0],"movement":["6E","9N","5E","12N","10E","8E","11N","2E","4N","2N","11E","8N","10N","3N","12E","5N","7E","1E"],"positions":[24,1,9,11,5,23,10,22,3,16,21,18,20,2,7,13,17,19,6,14,12,8,15,4]},"13-18":{"tables":13,"rounds":18,"sets":[1,2,3,4,5,6,7,8,9,10,11,12,13,0,0,0,0,0],"movement":["2E","5N","13E","7E","4E","6N","8E","6E","4N","7N","13N","10N","5E","9N","11N","12E","3N","1E"],"positions":[26,1,25,18,2,24,10,14,17,6,13,11,9,15,23,12,5,22,7,21,4,20,19,3,8,16]},"14-18":{"tables":14,"rounds":18,"sets":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,0,0,0,0],"movement":["14E","5N","7E","2E","4E","8N","10N","8E","4N","2N","7N","11N","9E","12E","6N","13E","3N","1E"],"positions":[28,1,9,15,2,27,10,14,17,26,4,25,8,16,13,11,24,6,12,23,7,22,21,5,20,3,19,18]},"15-18":{"tables":15,"rounds":18,"sets":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0,0,0],"movement":["15E","5E","7N","14E","4E","6N","8N","6E","4N","14N","11E","9E","10N","12E","2N","13N","3N","1E"],"positions":[30,1,4,29,2,28,10,14,27,17,13,11,16,26,12,25,24,7,6,23,22,8,21,5,3,20,9,15,19,18]},"16-18":{"tables":16,"rounds":18,"sets":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,0,0],"movement":["16E","14N","15N","2E","6E","3N","5E","7N","5N","3E","9E","13N","10N","8N","11E","12N","4E","1E"],"positions":[32,1,31,15,13,9,30,2,10,12,29,14,11,28,5,27,26,8,6,25,24,4,3,23,7,22,17,21,16,20,19,18]},"10-19":{"tables":10,"rounds":19,"sets":[1,2,3,4,5,6,7,0,8,9,10,0,0,0,0,0,0,0,0],"movement":["7N","4E","4N","10E","6N","3N","8N","5N","9E","2E","9N","5E","1E","8E","3E","6E","7E","10N","1N"],"positions":[1,7,20,10,14,5,17,18,12,8,15,4,19,3,13,6,9,11,2,16]},"11-19":{"tables":11,"rounds":19,"sets":[1,2,3,4,5,6,7,8,9,10,11,0,0,0,0,0,0,0,0],"movement":["7N","10E","1E","6N","4N","11N","11E","6E","2E","9E","4E","1N","8E","2N","5E","8N","9N","7E","3N"],"positions":[8,17,6,11,1,22,15,9,21,5,16,12,19,2,4,7,3,10,20,18,14,13]},"12-19":{"tables":12,"rounds":19,"sets":[1,2,3,4,5,6,7,8,9,10,11,12,0,0,0,0,0,0,0],"movement":["2N","9N","3E","6N","9E","10N","8N","4N","8E","11N","2E","7N","5E","12E","12N","7E","11E","6E","1E"],"positions":[24,1,19,9,23,17,12,22,21,7,16,2,8,4,13,11,18,15,14,20,10,3,5,6]},"13-19":{"tables":13,"rounds":19,"sets":[1,2,3,4,5,6,7,8,9,10,11,12,13,0,0,0,0,0,0],"movement":["2E","6E","4N","13E","10E","10N","4E","5N","9N","2N","3E","11N","8E","5E","13N","8N","12E","7N","1E"],"positions":[26,1,10,19,25,9,17,13,12,6,24,18,2,23,4,7,11,22,14,15,8,21,20,3,5,16]},"14-19":{"tables":14,"rounds":19,"sets":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,0,0,0,0,0],"movement":["6E","14N","11E","11N","5N","6N","10N","3E","4E","12E","7N","13N","14E","9E","13E","8N","2N","3N","1E"],"positions":[28,1,3,27,2,12,26,11,15,25,14,19,9,24,4,23,22,6,13,21,16,17,20,10,8,5,18,7]},"15-19":{"tables":15,"rounds":19,"sets":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0,0,0,0],"movement":["6E","15E","11N","11E","5E","10N","5N","3E","4N","12N","7E","13E","14N","9E","13N","8N","2E","3N","1E"],"positions":[30,1,29,3,2,12,11,28,13,15,27,19,26,9,4,25,24,6,14,23,17,16,10,22,5,8,7,21,20,18]},"16-19":{"tables":16,"rounds":19,"sets":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,0,0,0],"movement":["6E","15E","11E","8E","5N","10N","14E","3E","4E","12N","7E","13N","14N","9N","13E","8N","2N","16N","1E"],"positions":[32,1,3,31,30,12,29,11,15,28,27,19,26,9,4,16,6,25,14,24,23,17,10,22,8,5,7,13,21,18,2,20]},"17-19":{"tables":17,"rounds":19,"sets":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,0,0],"movement":["6E","15E","11E","17E","5N","10N","5E","3E","4E","12N","7E","13N","14N","9N","13E","8N","2N","16N","1E"],"positions":[34,1,3,33,32,12,31,11,15,13,30,19,29,9,4,28,6,27,14,26,25,17,10,24,8,5,7,23,22,18,2,21,20,16]},"11-21":{"tables":11,"rounds":21,"sets":[1,2,3,0,0,0,0,0,4,0,0,5,0,0,6,0,7,8,9,10,11],"movement":["9N","11N","4E","10E","5E","6N","8E","2N","7E","3N","3E","7N","2E","8N","6E","5N","10N","4N","11E","9E","1E"],"positions":[22,1,14,9,12,11,4,19,6,17,16,7,10,13,8,15,21,2,5,18,20,3]},"12-23":{"tables":12,"rounds":23,"sets":[1,0,0,0,0,2,0,3,0,0,4,5,0,0,6,7,0,8,0,9,10,11,12],"movement":["5E","12E","4E","11E","6N","10E","7N","9E","3E","2N","8N","8E","2E","3N","9N","7E","10N","6E","11N","4N","12N","5N","1E"],"positions":[24,1,14,11,10,15,4,21,2,23,19,6,17,8,13,12,9,16,7,18,5,20,3,22]},"13-K":{"rounds":14,"tables":13,"sets":[1,2,3,4,5,6,7,8,9,10,11,12,13,0],"positions":[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],"movement":["1E","2E","3E","4E","5E","6E","7E","7N","8E","9E","10E","11E","12E","13E"]}}
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..e46dabe
--- /dev/null
+++ b/style.css
@@ -0,0 +1,128 @@
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Georgia';
+}
+
+.selector {
+    position: fixed;
+    top: 0;
+    right: 0;
+    background-color: grey;
+    height: 375px;
+    color: white;
+    z-index: 100;
+    border: solid 1px black;
+}
+
+.selector .list {
+    width: 500px;
+    display: none;
+    float: left;
+    padding-top: 5px;
+}
+
+.selector:hover .list {
+    display: block;
+}
+
+.selector .lollipop {
+    text-align: center;
+    width: 50px;
+    font-size: 32px;
+    cursor: pointer;
+    float: left;
+}
+
+.selector .list-row {
+    clear: both;
+    margin-top: 5px;
+    height: 15px;
+}
+
+.selector .list-movement {
+    float: left;
+    margin: 0 5px;
+    width: 15px;
+    text-align: right;
+    margin-right: 35px;
+}
+
+.selector .list-movement[data-movement] {
+    text-decoration: underline;
+    cursor: pointer;
+    margin-right: 5px;
+}
+
+.viewport {
+    margin: 5px 0 0 5px;
+    border: solid 1px black;
+    background-color: grey;
+    overflow: hidden;
+    float: left;
+}
+
+.table {
+    border: solid 2px black;
+    background-color: #25A282;
+    color: white;
+    font-weight: bold;
+}
+
+.player {
+    border: solid 1px black;
+    text-align: center;
+}
+
+.player,
+table.summary th {
+    color: white;
+    font-weight: normal;
+    text-shadow:
+    -1px -1px 0 black,  
+    1px -1px 0 black,
+    -1px 1px 0 black,
+    1px 1px 0 black;
+}
+
+.cards {
+    border: solid 2px white;
+    border-radius: 3px;
+    color: white;
+    font-size: 10px;
+    text-align: right;
+}
+
+.summary {
+    float: left;
+    margin: 5px;
+}
+
+table.summary td {
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    color: white;
+}
+
+.controls {
+    position: fixed;
+    top: 400px;
+    right: 0px;
+}
+
+.controls .play,
+.controls .stop,
+.controls .step {
+    width: 50px;
+    height: 30px;
+    background-color: grey;
+    color: white;
+    font-size: 12px;
+    line-height: 30px;
+    float: left;
+    cursor: pointer;
+    margin: 10px;
+    text-align: center;
+    border: solid 1px black;
+}