Checkers

by seamuskc

HTML

<html>
Hello

<div class="container" id="board">
  <div class="grid">
    
  </div>

</div>

</html>

CSS

.dot-R {
  height: 25px;
  width: 25px;
  background-color: #fc031c;
  border:solid;
  border-radius: 50%;
  display: inline-block;
}

.dot-W {
  height: 25px;
  width: 25px;
  background-color: #f5f0f0;
  border-radius: 50%;
  display: inline-block;
}


.red {
  background-color: red;
}

.black {
  background-color: black;
  color: white;
}

.container {
  background: black;
  display: inline-block;
  border: 5px solid black;
}

.grid {
  display: grid;
  grid-template-columns: repeat(8, 50px);
  grid-template-rows: repeat(8, 50px);
  grid-gap: 5px;
}

.cell {
   /* center the cell content */
  justify-content: center;
  align-items: center;
  display: flex;
  font-family: Arial;
  font-size: .5rem;
  font-weight: bold;
  /*background: white; */
}

JavaScript

let tableData = [
  ['R', false, 'R', false, 'R', false, 'R', false],
  [false, 'R', false, 'R', false, 'R', false, 'R'],
  ['R', false, 'R', false, 'R', false, 'R', false],
  [false, false, false, false, false, false, false, false],
  [false, false, false, false, false, false, false, false],
  [false, 'W', false, 'W', false, 'W', false, 'W'],
  ['W', false, 'W', false, 'W', false, 'W', false],
  [false, 'W', false, 'W', false, 'W', false, 'W'],

]


var allowDrop = function (ev) {
  ev.preventDefault();
}

var drag = function(e) {
	console.log('drag: ' + e.target.id);
  e.dataTransfer.setData("src", e.target.id);
}

var drop = function(ev) {
  ev.preventDefault();
  var src = ev.dataTransfer.getData("src");
  var dest = ev.target.id;
  console.log('dragged from source ' + src + ' to dest ' + dest);
  
  //$('#' + ev.dataTransfer.getData("src"));
  //$('#' + ev.target.id).addClass('dot');
  ev.target.appendChild(document.getElementById(src));
  //var data = ev.dataTransfer.getData("text");
  //ev.target.appendChild(document.getElementById(data));
}

var $table = $('.grid');

$.each(tableData, function(i, row) {
   //var $tr = $('<tr />');
  /* $tr.appendTo($table) */;
  $.each(row, function(j, col) {
  	var cellColor = ((i + j) % 2 == 0) ? 'red' : 'black';
    var isDot = '';
    if (tableData[i][j]) {
    	isDot = 'dot-' + tableData[i][j];
    }
    
    var cellLabel = i + '-' + j;
    //var cellLabel = '&nbsp;';
    var cellContent = (tableData[i][j]) ? '<div id=d' + cellLabel + ' class="' + isDot + '" draggable="true" ondragstart="drag(event)" >&nbsp;</div>' : cellLabel;
    //$tr.append('<td class="cell-' + cellColor + '">' + cellColor + '</td>');
    $table.append('<div id=' + cellLabel + ' ondrop="drop(event)" ondragover="allowDrop(event)" class="cell ' + cellColor + '">' + cellContent + '</div>');
  });
});

$('.grid').append($table);