JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://premium-api.com/jscourse/rb_plain.js"></script>
<span id='move'>Black</span>
JavaScript
// set base data
var isMoveBlack = true;
var gamePosition = "boooooooowoooooooowoooooowowboooooobwwwoooooowooooooooboooooowoo";
// define click function
function userClick(col, row) {
console.log(col +"," + row);
// TODO is move correct?
var index = 8 * (row - 1) + col.charCodeAt(0) - 97;
var cell = gamePosition.charAt(index);
if ( cell == "o" ) {
drawDisk(col, row, isMoveBlack);
// TODO flip disks
// save game position
var disk = ( isMoveBlack ) ? "b" : "w";
gamePosition = gamePosition.substr(0, index) + disk + gamePosition.substr(index+1);
// change player
isMoveBlack = !isMoveBlack;
} else {
alert('Wrong move!');
}
if(isMoveBlack!=true){
document.getElementById('move').innerHTM='<p>White</p>';
}else{
document.getElementById('move').innerHTM='<p>Black</p>';
}
}
// show current game position on the board
function drawAllDisks() {
for (var i=0; i<gamePosition.length; i++) {
var col = String.fromCharCode(97 + i % 8);
var row = Math.floor(i / 8) + 1;
var ch = gamePosition.charAt(i);
if ( ch != 'o' ) {
drawDisk(col, row, ch == 'b');
}
}
}
// draw board and start position
drawBoard(userClick);
drawAllDisks();