TPS Board Viewer

Interprets and visually displays TPS notation for the game of Tak.

by Ben Wochinski

HTML

<div style="text-align: center;">
    <h2>TPS Board Viewer</h2>
    <form>Enter notation:
        <br/>
        <textarea id="tpsArea" style="height:60px; width:500px"></textarea>
        <br/>
        <input type="button" value="Go" onClick="parseText()">
        </submit>
    </form>
    <br/>
    <div style="font: 13px black;">Player 1: White Pieces</div>
    <div style="font: 13px black;">Player 2: Black Pieces</div>
    <div id="turn" style="font:20px black bold; padding: 5px"></div>
    <canvas id="board" width="450" height="450" style="padding-right: 50px;"></canvas>
    <div>White - <span id="lightCount">0</span> &nbsp; | &nbsp; Black - <span id="blackCount">0</span><br/>(not counting capstones)</div>
    <div>&nbsp;</div>
    <div style="width: 650px; font-family: Verdana; border: 1px solid gray; background-color: #ffd; overflow: hidden; white-space: nowrap; line-height: 30px; font-size: 12px; margin: 75px auto 10px auto;">TPS Format Example:
        <br/>[x3,122,2S/x,22S,22C,11,121/121,212,12,21121C,1212S/21S,11,221,211S,12S/x,21S,2,x2 1 -]</div>
</div>

CSS

body {
    background-color: #ddd;
}

JavaScript

var defaultSquare = 80;
var canvas;
var c;
var boardSize = 5;
var squareSize = 80;
var flatH = 10;
var flatW = 60;
var total = ["x",0,0];

function gup(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regexS = "[\\?&]" + name + "=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec((window.location != window.parent.location) ? document.referrer : document.location);
    if (results == null) return null;
    else return results[1];
}

function checkURL() {
    var urlTPS = gup("tps");
    if (urlTPS != null) {
        $("textarea#tpsArea").val(decodeURIComponent(urlTPS));
        parseText();
    }
}

document.ready = checkURL();

function drawBoard(squareNum) {

    //squareSize = Math.floor(canvas.width / squareNum);

    c.clearRect(0,0,canvas.width,canvas.height);
    c.fillStyle = "white";
    c.fillRect(50, 0, canvas.width, canvas.height - 50);

    var curSqX = 50;
    var curSqY = 0;
    var alphaLabel = ["x", "a", "b", "c", "d", "e", "f", "g", "h","i","j"];

    for (var i = 1; i <= squareNum; i++) {

        curSqY = canvas.height - (squareSize * i) - 50;

        for (var v = 1; v <= squareNum; v += 2) {

            curSqX = squareSize * (v - 1) + 50;

            if (i % 2 == 0) {
                curSqX += squareSize;
            }

            c.beginPath();
            c.rect(curSqX, curSqY, squareSize, squareSize);
            c.fillStyle = "#685";
            c.fill();
        }
    }

    c.beginPath();
    c.lineWidth = "2";
    c.strokeStyle = "black";
    c.rect(49, 1, canvas.width - 50, canvas.height - 50);
    c.stroke();

    for (var lx = 1; lx <= boardSize; lx++) {
        c.font = "24px Verdana bold";
        c.fillStyle = "black";
        c.fillText(alphaLabel[lx], (lx * squareSize) - (squareSize / 2) + 40, canvas.height - 20);
    }

    for (var ly = 1; ly <= boardSize; ly++) {
        c.font = "24px Verdana bold";
        c.fillStyle = "black";
        c.fillText((boardSize + 1 )...