Eight Queens Problem

by amindunited

HTML

<div class="container">
  <div class="card">
    <amu-chessboard></amu-chessboard>  
  </div>
</div>

CSS

html, body { 
  margin:0;
  padding:0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.container {
  background-color: #e9e9e9;
}
.card {
  background-color: white;
  margin-left: auto;
  margin-right: auto;
}

amu-chessboard { 
  border-right: solid 1px #131313;
  border-bottom: solid 1px #131313;
}
.row {  display:flex; width: 100%; }
amu-square {
  display: block;
  box-sizing: border-box;
  border-left: solid 1px #131313;
  border-top: solid 1px #131313;
  width: 12.5vw;
  height: 12.5vw;
}

.row:nth-of-type(odd) amu-square:nth-of-type(even) {
  background-color: #443322;
  color: #FFFFFF;
}
.row:nth-of-type(even) amu-square:nth-of-type(odd) {
  background-color: #443322;
  color: #FFFFFF;
}

JavaScript

class square {
  constructor () {
    this.inPath = false;
    this.isOccupied = false;
  }
}

class AMUSquare extends HTMLElement {
	constructor () {
  	super();
  }
  connectedCallback () {
  	console.log('this.getAttribute...', this.getAttribute('name'));
  	this.innerHTML = this.getAttribute('name');
    
  }
}

class AMUChessboard extends HTMLElement {
	constructor () {
  	super();
    this.columnNames = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
    this.rowNames = [1, 2, 3, 4, 5, 6, 7, 8];
    this.squares = [];
    this.remainingSquares = [];
  }
  connectedCallback () {
    let contentString = '';
  	for (let i = 0; i < this.columnNames.length; i++) {
    	contentString += '<div class="row">';
	    for (let j = 0; j < this.rowNames.length; j++) {
    		const squareName = this.columnNames[i].toUpperCase() + this.rowNames[j];
      	contentString += 
      	`<amu-square name=${squareName}></amu-square>`
      }
      contentString += '</div>';
    }
  
    this.innerHTML = contentString;
  }

}
window.customElements.define('amu-square', AMUSquare, {extends: HTMLElement});
window.customElements.define('amu-chessboard', AMUChessboard, {extends: HTMLElement});