nickolas1/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

</style>
<body>
<svg width='300' height='300'></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>

<script>

var svg = d3.select('svg');
var width = +svg.attr('width');
var height = +svg.attr('height');
var squareSize = width / 10;

var pgn = '1. e4 g6 2. h4 h5 3. Nf3 c6 4. d4 d5 5. Nbd2 Bg4 6. Be2 Qb6 7. c3 Nd7 8. exd5 cxd5 9. Qa4 Nf6 10. Bd3 Bh6 11. Ne5 Be6 12. Ndf3 Bxc1 13. Rxc1 Qxb2 14. O-O O-O 15. Ng5 Nxe5 16. dxe5 Ng4 17. Qd4 Rac8 18. f3 Nh6 19. Nxe6 fxe6 20. Bxg6 Nf5 21. Qf4 Qb6+ 22. Kh2 Rc4';

var moves = pgn.replace(/(\s+)?\d+\.(\s+)?/g, '~').split(/~|\s/);
var chess = new Chess();

var ranks = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
var files = d3.range(1, 9);
var boardRange = d3.range(0, 8*squareSize, squareSize);
var moveRange = d3.range(squareSize/2, 8*squareSize + squareSize/2, squareSize);

var boardRank = d3.scaleOrdinal()
            .domain(ranks)
            .range(boardRange);
var boardFile = d3.scaleOrdinal()
            .domain(files)
            .range(boardRange);
var moveRank = boardRank.copy()
            .range(moveRange);
var moveFile = boardFile.copy()
            .range(moveRange);


var squares = [];
ranks.forEach( function(r) {
    files.forEach( function(f) {
        squares.push({rank: r, file: f});
    });
});
var board = svg.append('g');
board.selectAll('rect')
    .data(squares)
    .enter().append('rect')
    .attr('width', squareSize)
    .attr('height', squareSize)
    .attr('x', function(d) { return boardRank(d.rank); })
    .attr('y', function(d) { return boardFile(d.file); })
    .attr('stroke', '#fff')
    .attr('fill', '#f2f3f3');

var line = d3.line()
    .x(function(d) { return moveRank(d.rank); })
    .y(function(d) { return moveFile(d.file); });

idx = 1;

//setInterval( function() {
//    move = moves[idx];
//    console.log(idx)
//   // if (move === '') return;
//    moveSplit = move.split(/\s+/);
//    moveSplit.forEach( function(m) {
//        console.log(m)
//        var mdesc = chess.move(m);
//        console.log(mdesc)
//        console.log(moveFile(mdesc.from[0]), moveFile(mdesc.to[1]))
//        var move = [{rank: mdesc.from[0], file: mdesc.from[1]},
//            {rank: mdesc.to[0], file: mdesc.to[1]}];
//        board.append('path')
//            .datum(move)
//            .attr('class', 'line')
//            .attr('d', line)
//    });
//}, 1000)


moves.forEach( function(m) {
    if (m === '') return;
    var mdesc = chess.move(m);
    console.log(mdesc)
    var move = [{rank: mdesc.from[0], file: mdesc.from[1]},
        {rank: mdesc.to[0], file: mdesc.to[1]}];
    board.append('path')
        .datum(move)
        .attr('class', 'line')
        .attr('d', line)
});


</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 1.5px;
	}

	</style>
	<body>
	<svg width='300' height='300'></svg>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>

	<script>

	var svg = d3.select('svg');
	var width = +svg.attr('width');
	var height = +svg.attr('height');
	var squareSize = width / 10;

	var pgn = '1. e4 g6 2. h4 h5 3. Nf3 c6 4. d4 d5 5. Nbd2 Bg4 6. Be2 Qb6 7. c3 Nd7 8. exd5 cxd5 9. Qa4 Nf6 10. Bd3 Bh6 11. Ne5 Be6 12. Ndf3 Bxc1 13. Rxc1 Qxb2 14. O-O O-O 15. Ng5 Nxe5 16. dxe5 Ng4 17. Qd4 Rac8 18. f3 Nh6 19. Nxe6 fxe6 20. Bxg6 Nf5 21. Qf4 Qb6+ 22. Kh2 Rc4';

	var moves = pgn.replace(/(\s+)?\d+\.(\s+)?/g, '~').split(/~\|\s/);
	var chess = new Chess();

	var ranks = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
	var files = d3.range(1, 9);
	var boardRange = d3.range(0, 8*squareSize, squareSize);
	var moveRange = d3.range(squareSize/2, 8*squareSize + squareSize/2, squareSize);

	var boardRank = d3.scaleOrdinal()
	.domain(ranks)
	.range(boardRange);
	var boardFile = d3.scaleOrdinal()
	.domain(files)
	.range(boardRange);
	var moveRank = boardRank.copy()
	.range(moveRange);
	var moveFile = boardFile.copy()
	.range(moveRange);


	var squares = [];
	ranks.forEach( function(r) {
	files.forEach( function(f) {
	squares.push({rank: r, file: f});
	});
	});
	var board = svg.append('g');
	board.selectAll('rect')
	.data(squares)
	.enter().append('rect')
	.attr('width', squareSize)
	.attr('height', squareSize)
	.attr('x', function(d) { return boardRank(d.rank); })
	.attr('y', function(d) { return boardFile(d.file); })
	.attr('stroke', '#fff')
	.attr('fill', '#f2f3f3');

	var line = d3.line()
	.x(function(d) { return moveRank(d.rank); })
	.y(function(d) { return moveFile(d.file); });

	idx = 1;

	//setInterval( function() {
	// move = moves[idx];
	// console.log(idx)
	// // if (move === '') return;
	// moveSplit = move.split(/\s+/);
	// moveSplit.forEach( function(m) {
	// console.log(m)
	// var mdesc = chess.move(m);
	// console.log(mdesc)
	// console.log(moveFile(mdesc.from[0]), moveFile(mdesc.to[1]))
	// var move = [{rank: mdesc.from[0], file: mdesc.from[1]},
	// {rank: mdesc.to[0], file: mdesc.to[1]}];
	// board.append('path')
	// .datum(move)
	// .attr('class', 'line')
	// .attr('d', line)
	// });
	//}, 1000)


	moves.forEach( function(m) {
	if (m === '') return;
	var mdesc = chess.move(m);
	console.log(mdesc)
	var move = [{rank: mdesc.from[0], file: mdesc.from[1]},
	{rank: mdesc.to[0], file: mdesc.to[1]}];
	board.append('path')
	.datum(move)
	.attr('class', 'line')
	.attr('d', line)
	});


	</script>