JSFiddle - React, Tailwind, and code Playground

by chicagogrooves

HTML

<div class='chess-board'></div>

CSS

.chess-board { border:5px solid #333; }
    .chess-board td {
    	background:#fff;
    	background:-moz-linear-gradient(top, #fff, #eee);
    	background:-webkit-gradient(linear,0 0, 0 100%, from(#fff), to(#eee));
    	box-shadow:inset 0 0 0 1px #fff;
    	-moz-box-shadow:inset 0 0 0 1px #fff;
    	-webkit-box-shadow:inset 0 0 0 1px #fff;
    	height:40px;
    	text-align:center;
    	vertical-align:middle;
    	width:40px;
    }
    .chess-board a {
    	color:#000;
    	display:block;
    	font-size:30px;
    	height:40px;
    	position:relative;
    	text-decoration:none;
    	text-shadow:0 1px #fff;
    	width:40px;
    }
    .chess-board tr:nth-child(odd) td:nth-child(even),
    .chess-board tr:nth-child(even) td:nth-child(odd) {
    	background:#ccc;
    	background:-moz-linear-gradient(top, #ccc, #eee);
    	background:-webkit-gradient(linear,0 0, 0 100%, from(#ccc), to(#eee));
    	box-shadow:inset 0 0 10px rgba(0,0,0,.4);
    	-moz-box-shadow:inset 0 0 10px rgba(0,0,0,.4);
    	-webkit-box-shadow:inset 0 0 10px rgba(0,0,0,.4);
    }    
    
    /* .sq{ border: solid 1px black; height: 30px; width: 30px;}
    .sq-b{ background-color: #aaa }
    .sq-w{ background-color: #fff } */

JavaScript

window.spaceKitty = function(){ return "meow!"; };

      /* begin chess code */
      function Position(file,rank, fileidx,rankidx){
        if(fileidx >= 0 && rankidx >= 0){
            this.fileidx = fileidx;
            this.rankidx = rankidx;
            this.file = String.fromCharCode(fileidx + 97);
            this.rank = (rankidx+1).toString();
            return;
        }
        
        if(!rank){
          if(!file || file.length != 2) return null;
          this.file = file.substr(0,1);
          this.rank = file.substr(1,1);
        }
        
        this.fileidx = this.file.charCodeAt(0) - 97;
        this.rankidx = this.rank - 1;
      };
      Position.prototype.initialize = function(fileidx, rankidx){
        this.fileidx = fileidx;
        this.rankidx = rankidx;
        this.file = String.fromCharCode(fileidx + 97);
        this.rank = rankidx+1+"";
        
        return this;
      }
      Position.prototype.toString = function(){
        return this.file + this.rank;
      }
      Position.prototype.minus = function(other){
        return [this.fileidx-other.fileidx, this.rankidx-other.rankidx];
      }
      Position.prototype.plus = function(filerank_vector){
        var newpos = new Position('a1'); //ignored
        return newpos.initialize(this.fileidx + filerank_vector[0], this.rankidx + filerank_vector[1]);
      }
      Position.prototype.color = function(){
        return ((this.fileidx+this.rankidx) % 2 == 0 ) ? 'black' : 'white';
      }
      
      //see FEN
      function Board(pieceMap){ 
        this.nextToMove = 'white';
        this.castleAvailableWhiteKing = true;
        this.castleAvailableWhiteQueen = true;
        this.castleAvailableBlackKing = true;
        this.castleAvailableBlackQueen = true;
        
        for(key in pieceMap){
          this[key] = pieceMap[key];
        }
      }
      
      Board.xSize = 8;
      Board.ySize = 8;
      Board.validPosition = function(pos){
        p = new Position(pos);
 ...