Rishav159/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="wrapper">
      <div class="canvas">

      </div>
      <div>
        <button type="button" name="button" onclick="update()">Click</button>
      </div>
    </div>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/freezer-js/0.12.1/freezer.js" charset="utf-8"></script>
  <script src="index.js" charset="utf-8"></script>
</html>

## index.js

class EightQBoard {
  constructor() {
    this.board = new Array(8);
    for(let i = 0; i < 8; i++) {
      this.board[i] = new Array(8).fill(false);
    }
    this.queens = new Array(8);
    for(let i = 0; i < 8; i++) {
      this.queens[i] = [i,i];
      this.board[i][i] = true;
    }
  };
};

class EightQProblem {
  constructor() {
    this.freezer = new Freezer(new EightQBoard(), {mutable : true});
    this.eqb = this.freezer.get();
  };

  getBoard() {
    return this.freezer.get().board;
  }
  getQueens() {
    return this.freezer.get().queens;
  }
  setQueen(index,location) {;
    let transact = this.eqb.transact();

    let x = transact.queens[index][0];
    let y = transact.queens[index][1];
    transact.board[x][y] = false;
    transact.board[location[0]][location[1]] = true;
    transact.queens[index][0] = location[0];
    transact.queens[index][1] = location[1];

    this.eqb.run();
    this.eqb = this.freezer.get();
  }

  getHeuristicCost() {
    let cost = 0;
    for(let i = 0; i < 8; i++) {
      let queen = this.eqb.queens[i];
      let x = queen[0];
      let y = queen[1];
      //checking columns
      for(let j = 0;j < 8; j++) {
        if( j!= x && this.eqb.board[j][y]) {
          cost ++;
        }
      }

      //checking rows
      for(let j = 0;j < 8; j++) {
        if( j!= y && this.eqb.board[x][j]) {
          cost ++;
        }
      }
      //checking diagonals
      //primary
      let ii,jj;
      if(x > y) {
        ii = x-y;
        jj = 0;
      }else {
        ii = 0;
        jj = y-x;
      }
      for(;ii < 8 && jj < 8; ii++, jj++) {
        if(ii == x) {
          continue;
        }
        if(this.eqb.board[ii][jj]) {
          cost++;
        }
      }
      //secondary
      if(x + y < 8) {
        ii = 0;
        jj = x + y;
      }else {
        ii = (x + y) - 7;
        jj = 7;
      }
      for(;ii > 0 && jj > 0; ii--, jj++) {
        if(ii == x) {
          continue;
        }
        if(this.eqb.board[ii][jj]) {
          cost++;
        }
      }
    }
    return cost/2;
  };
}

class Diagram{
  constructor(h,w,queens) {
    this.h = h;
    this.w = w;
    this.cellSize = ((this.h)/8);
    var cellSize = this.cellSize;

    this.boardConstructor = [];
    for(let i = 0; i < 64; i++) {
      this.boardConstructor.push({
        x : Math.floor(i/8),
        y : i%8
      })
    }

    this.svg = d3.select('.canvas')
                .append('svg')
                .attr('width',this.w)
                .attr('height',this.h);

    this.cells = this.svg
                .selectAll('.cells')
                .data(this.boardConstructor)
                .enter()
                .append('g');

    this.cells.append('rect')
            .attr('class','cells rects')
            .attr('x',function(d) {
              return d.x*cellSize;
            })
            .attr('y',function(d) {
              return d.y*cellSize;
            })
            .attr('width',cellSize + 'px')
            .attr('height',cellSize + 'px')
            .attr('stroke','grey')
            .attr('stroke-width','1')
            .attr('fill',function(d) {
              if((d.x + d.y)%2 == 0) {
                return 'beige'
              } else {
                return 'grey'
              }
            });
    this.queens = null;
  }
  renderQueens(queens) {
    var cellSize = this.cellSize;
    if(this.queens)
      this.queens.remove();
      this.queensPositions = [];
      for(let i = 0; i < queens.length; i++) {
        this.queensPositions.push({
          indices : [queens[i][0] , queens[i][1]],
          x : queens[i][0]*cellSize + cellSize/2,
          y : queens[i][1]*cellSize + cellSize/2,
          dx : 0,
          dy : 0
        })
      }

    this.queens = this.svg
                    .append('g')
                    .selectAll('.queen')
                    .data(this.queensPositions)
                    .enter()
                    .append('g')
                    .attr('class','queen')
                    .append('text')
                    .style('font-size',cellSize-10)
                    .attr('text-anchor' , "middle")
                    .attr('alignment-baseline','central')
                    .attr('x',function(d) {
                      return d.x;
                    })
                    .attr('y',function(d) {
                      return d.y;
                    })
                    .style('cursor','pointer')
                    .text('♛')

  }
}

var eqp = new EightQProblem();
var diagram = new Diagram(500,500,eqp.getQueens());

eqp.freezer.on('update',function() {
  diagram.renderQueens(eqp.getQueens());
})

var update = function() {
  eqp.setQueen(0,[0,1])
}
diagram.renderQueens(eqp.getQueens())
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	</head>
	<body>
	<div class="wrapper">
	<div class="canvas">

	</div>
	<div>
	<button type="button" name="button" onclick="update()">Click</button>
	</div>
	</div>
	</body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js" charset="utf-8"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/freezer-js/0.12.1/freezer.js" charset="utf-8"></script>
	<script src="index.js" charset="utf-8"></script>
	</html>

	class EightQBoard {
	constructor() {
	this.board = new Array(8);
	for(let i = 0; i < 8; i++) {
	this.board[i] = new Array(8).fill(false);
	}
	this.queens = new Array(8);
	for(let i = 0; i < 8; i++) {
	this.queens[i] = [i,i];
	this.board[i][i] = true;
	}
	};
	};

	class EightQProblem {
	constructor() {
	this.freezer = new Freezer(new EightQBoard(), {mutable : true});
	this.eqb = this.freezer.get();
	};

	getBoard() {
	return this.freezer.get().board;
	}
	getQueens() {
	return this.freezer.get().queens;
	}
	setQueen(index,location) {;
	let transact = this.eqb.transact();

	let x = transact.queens[index][0];
	let y = transact.queens[index][1];
	transact.board[x][y] = false;
	transact.board[location[0]][location[1]] = true;
	transact.queens[index][0] = location[0];
	transact.queens[index][1] = location[1];

	this.eqb.run();
	this.eqb = this.freezer.get();
	}

	getHeuristicCost() {
	let cost = 0;
	for(let i = 0; i < 8; i++) {
	let queen = this.eqb.queens[i];
	let x = queen[0];
	let y = queen[1];
	//checking columns
	for(let j = 0;j < 8; j++) {
	if( j!= x && this.eqb.board[j][y]) {
	cost ++;
	}
	}

	//checking rows
	for(let j = 0;j < 8; j++) {
	if( j!= y && this.eqb.board[x][j]) {
	cost ++;
	}
	}
	//checking diagonals
	//primary
	let ii,jj;
	if(x > y) {
	ii = x-y;
	jj = 0;
	}else {
	ii = 0;
	jj = y-x;
	}
	for(;ii < 8 && jj < 8; ii++, jj++) {
	if(ii == x) {
	continue;
	}
	if(this.eqb.board[ii][jj]) {
	cost++;
	}
	}
	//secondary
	if(x + y < 8) {
	ii = 0;
	jj = x + y;
	}else {
	ii = (x + y) - 7;
	jj = 7;
	}
	for(;ii > 0 && jj > 0; ii--, jj++) {
	if(ii == x) {
	continue;
	}
	if(this.eqb.board[ii][jj]) {
	cost++;
	}
	}
	}
	return cost/2;
	};
	}

	class Diagram{
	constructor(h,w,queens) {
	this.h = h;
	this.w = w;
	this.cellSize = ((this.h)/8);
	var cellSize = this.cellSize;

	this.boardConstructor = [];
	for(let i = 0; i < 64; i++) {
	this.boardConstructor.push({
	x : Math.floor(i/8),
	y : i%8
	})
	}

	this.svg = d3.select('.canvas')
	.append('svg')
	.attr('width',this.w)
	.attr('height',this.h);

	this.cells = this.svg
	.selectAll('.cells')
	.data(this.boardConstructor)
	.enter()
	.append('g');

	this.cells.append('rect')
	.attr('class','cells rects')
	.attr('x',function(d) {
	return d.x*cellSize;
	})
	.attr('y',function(d) {
	return d.y*cellSize;
	})
	.attr('width',cellSize + 'px')
	.attr('height',cellSize + 'px')
	.attr('stroke','grey')
	.attr('stroke-width','1')
	.attr('fill',function(d) {
	if((d.x + d.y)%2 == 0) {
	return 'beige'
	} else {
	return 'grey'
	}
	});
	this.queens = null;
	}
	renderQueens(queens) {
	var cellSize = this.cellSize;
	if(this.queens)
	this.queens.remove();
	this.queensPositions = [];
	for(let i = 0; i < queens.length; i++) {
	this.queensPositions.push({
	indices : [queens[i][0] , queens[i][1]],
	x : queens[i][0]*cellSize + cellSize/2,
	y : queens[i][1]*cellSize + cellSize/2,
	dx : 0,
	dy : 0
	})
	}

	this.queens = this.svg
	.append('g')
	.selectAll('.queen')
	.data(this.queensPositions)
	.enter()
	.append('g')
	.attr('class','queen')
	.append('text')
	.style('font-size',cellSize-10)
	.attr('text-anchor' , "middle")
	.attr('alignment-baseline','central')
	.attr('x',function(d) {
	return d.x;
	})
	.attr('y',function(d) {
	return d.y;
	})
	.style('cursor','pointer')
	.text('♛')

	}
	}

	var eqp = new EightQProblem();
	var diagram = new Diagram(500,500,eqp.getQueens());

	eqp.freezer.on('update',function() {
	diagram.renderQueens(eqp.getQueens());
	})

	var update = function() {
	eqp.setQueen(0,[0,1])
	}
	diagram.renderQueens(eqp.getQueens())