JSFiddle - React, Tailwind, and code Playground

by CommandLineDesign

HTML

<div id="test-gameBoard">
  <ul>
    <li class="row">
      <ul id="col1">
        <li>*</li>
        <li>*</li>
      </ul>
    </li>
    <li class="row">
      <ul id="col2">
        <li>*</li>
        <li>*</li>
      </ul>
    </li>
  </ul>
</div>


<div id="gameBoard">

</div>

CSS

#test-gameBoard{
  display: none;
}

ul {
  list-style: none;
  display: block;
}

li {
  display: inline-block;
}

li.row {
  display: block;
}

li.cols{
  width: 16px;
}

JavaScript

// ===================== Init: =====================

/* Config input schema: {
	"rows": 6,
	"cols": 7,
	"moves": [0,0,1,1,2,2,3]
}*/

var ConnectFour = function(config, placeholderId){
	this.rows = config.rows;
  this.cols = config.cols;
  
  this.winner = false;
  
  var gameBoard = document.createElement('div');
  gameBoard.class = 'gameBoard-render';
  this.content = gameBoard;
  
  this.virtualBoard = [];
  
  this.placeHolder = document.getElementById(placeholderId); 
  this.buildGameBoard();
  
  this.movesLog = [];
  this.moveQueue = config.moves
  this.doMoves();
  
}

// ===================== Actions: =====================

ConnectFour.prototype.doMoves = function(){
	for(var i in this.moveQueue){
  	var currentMove = this.moveQueue[i];
    this.doMove(currentMove, i);
  }
  
}

//Didn't plan out virtual board correctly, have to use moveCount to determine player
ConnectFour.prototype.doMove = function(col, moveCount){
  var row = this.rows
  var player =  moveCount%2 ? 2 : 1;
  //Count backwards down row count to find the next possible move.
	for(var i = this.rows-1; i > 1; i--){
   if(this.virtualBoard[i][col] === false){
      //this is bad, need player classes
      this.virtualBoard[i][col]  = player;
      //Can get away with even vs odd movecount to determine player for now 
      //Player class should be added ASAP.
      this.renderMove({row: i, col: col, player : player});
      //break out of the loop, move was found
      break;
   } else {
      //this square is occupied, move up another row
   		continue;
   }
  }
  
  //check winCondition (Note, win is only possible after 7 moves)
  if(moveCount >= 6){
  	this.checkWinCondition(player);
  }
  if(this.winner){
  	moveCount++
  	console.log('player '+player+' won! '+moveCount+' pieces played.');
  }
  
  //return this for logging - it is not used by the main program
  return this.virtualBoard;
  
}

ConnectFour.prototype.checkWinCondition = function(player){
	//check horizontal
 ...