/**
* REQS:
* DONE: Choose mark at start
* Working AI
* DONE: Reset after win acknowledged
* TODO: Keep logic and display separate
* TODO: Swap first/second after each game
* TODO: Row and Col hints are off / backwards in some cases
* TODO: Change nearWin to nearLoss (defense mode) and add nearWin for near Computer wins, ECC, CEC, CCE
* TODO: Fix splicing corners/sides.
* TODO: Choose random side, if random corner isn't an option
* BUG: Occassionaly Computer won't choose a corner.
*/
$(document).ready(function() {
function Game() {
var _this = this;
this.turn = 0;
this.isRunning = true;
this.player = new Player();
this.computer = new Computer();
this.nearWin;
this.board = [['E', 'E', 'E'],
['E', 'E', 'E'],
['E', 'E', 'E']];
this.boxMap = { "top-left": {x: 0, y: 0}, "top-middle": {x: 0, y: 1}, "top-right": {x: 0, y: 2},
"mid-left": {x: 1, y: 0}, "center": {x: 1, y: 1}, "mid-right": {x: 1, y: 2},
"btm-left": {x: 2, y: 0}, "btm-middle": {x: 2, y: 1}, "btm-right": {x: 2, y: 2}
};
this.corners = ["top-left", "top-right",
"btm-left", "btm-right" ];
this.sides = ["top-middle", "mid-right",
"btm-middle", "mid-left" ];
this.sum = function(arr) {
return arr.reduce(function(a, b){
return a + b;
});
};
this.count = function(arr, target) {
return arr.reduce(function(a, b) {
return a + (b === target);
}, 0);
};
$('#btn-O').click(function() {
_this.player.mark = 'O';
_this.computer.mark = 'X';
});
$('#btn-X').click(function() {
_this.player.mark = 'X';
_this.computer.mark = 'O';
});
$('.box').click(function() {
if (_this.isRunning && $(this).text() !== _this.computer.mark && $(this).text() !== _this.player.mark) {
_this.markBox(_this.player.mark, $(this).prop('id'));
_this.nearWin = undefined;
_this.checkBoard();
_this.computer.doMove(_this);
_this.checkBoard();
}
}); // end box click listener
$('#board').dblclick(function(e) {
$('.box').text(""); // reset display
_this.reset(); // reset game
}); // end board click listener
$('#myModal').modal();
}
Game.prototype.checkCount = function() {
var count = this.board.map(this.count);
var search = 2;
var count = this.board.reduce(function(n, val) {
return n + (val === search);
}, 0);
for (var row = 0; row < this.board.length; i++) {
}
}
// Checks for wins in the board columns and gives the Computer move hints
Game.prototype.checkCols = function() {
var _this = this;
var colSums = this.board.map(function(row, i) {
return _this.sum(_this.board.map(function(row) {
return row[i];
}));
});
if (colSums.indexOf("OOO") !== -1) {
this.showWin('O', "Col", colSums.indexOf("OOO"));
} else if (colSums.indexOf("XXX") !== -1) {
this.showWin('X', "Col", colSums.indexOf("XXX"));
} else {
// Takes in the column sums to determine a hint
// for the computer to use to make a move
this.giveHint(colSums, "col");
}
}
Game.prototype.checkRows = function() {
var rowSums = this.board.map(this.sum);
if (rowSums.indexOf("OOO") !== -1) {
this.showWin('O', "Row", rowSums.indexOf("OOO"));
} else if (rowSums.indexOf("XXX") !== -1) {
this.showWin('X', "Row", rowSums.indexOf("XXX"));
} else {
this.giveHint(rowSums, "row");
}
}
Game.prototype.checkDiags = function() {
var diagL = [];
var diagLSum = "";
for (let i = 0, j =0; i < this.board.length && j < this.board[i].length; i++, j++) {
diagL.push(this.board[i][j]);
}
diagLSum = this.sum(diagL);
var diagR = [];
var diagRSum = 0;
for (let i = 0, j = this.board[i].length-1 ; i < this.board.length && j >= 0 ; i++, j--) {
diagR.push(this.board[i][j])
}
diagRSum = this.sum(diagR);
if (diagLSum === "OOO") {
this.showWin('O', "Left Diag");
} else if (diagLSum === "XXX") {
this.showWin('X', "Left Diag");
} else {
this.giveHint(diagLSum, "diagL");
}
if (diagRSum === "OOO") {
this.showWin('O', "Right Diag");
} else if (diagRSum === "XXX") {
this.showWin('X', "Right Diag");
} else {
this.giveHint(diagRSum, "diagR");
}
}
Game.prototype.checkBoard = function() {
if (game.isRunning) {
if (this.turn < 9) {
this.checkCols();
this.checkRows();
this.checkDiags();
} else {
this.showDraw();
}
}
}
Game.prototype.giveHint = function(sums, type) {
var P = this.player.mark;
var C = this.computer.mark;
if (type === "col") {
// Look for Computer near wins in columns
if (sums.indexOf('E'+C+C) !== -1) {
this.nearWin = {x: 0, y: sums.indexOf('E'+C+C)};
} else if (sums.indexOf(C+'E'+C) !== -1) {
this.nearWin = {x: 1, y: sums.indexOf(C+'E'+C)};
} else if (sums.indexOf(C+C+'E') !== -1) {
this.nearWin = {x: 2, y: sums.indexOf(C+C+'E')};
// Look for Player near wins in columns
} else if (sums.indexOf('E'+P+P) !== -1) {
this.nearWin = {x: 0, y: sums.indexOf('E'+P+P)};
} else if (sums.indexOf(P+'E'+P) !== -1) {
this.nearWin = {x: 1, y: sums.indexOf(P+'E'+P)};
} else if (sums.indexOf(P+P+'E') !== -1) {
this.nearWin = {x: 2, y: sums.indexOf(P+P+'E')};
}
} else if (type === "row") {
// Look for Computer near wins in rows
if (sums.indexOf('E'+C+C) !== -1) {
this.nearWin = {x: sums.indexOf('E'+C+C), y: 0};
} else if (sums.indexOf(C+'E'+C) !== -1) {
this.nearWin = {x: sums.indexOf(C+'E'+C), y: 1};
} else if (sums.indexOf(C+C+'E') !== -1) {
this.nearWin = {x: sums.indexOf(C+C+'E'), y: 2};
// Look for Player near wins in rows
} else if (sums.indexOf('E'+P+P) !== -1) {
this.nearWin = {x: sums.indexOf('E'+P+P), y: 0};
} else if (sums.indexOf(P+'E'+P) !== -1) {
this.nearWin = {x: sums.indexOf(P+'E'+P), y: 1};
} else if (sums.indexOf(P+P+'E') !== -1) {
this.nearWin = {x: sums.indexOf(P+P+'E'), y: 2};
}
} else if (type === "diagL") {
// Look for Computer near wins in left diagonal
if (sums === 'E'+C+C) {
this.nearWin = {x: 0, y: 0};
} else if (sums === C+'E'+C) {
this.nearWin = {x: 1, y: 1};
} else if (sums === C+C+'E') {
this.nearWin = {x: 2, y: 2};
// Look for Player near wins in left diagonal
} else if (sums === 'E'+P+P) {
this.nearWin = {x: 0, y: 0};
} else if (sums === P+'E'+P) {
this.nearWin = {x: 1, y: 1};
} else if (sums === P+P+'E') {
this.nearWin = {x: 2, y: 2};
}
} else if (type === "diagR") {
// Look for Computer near wins in right diagonal
if (sums === 'E'+C+C) {
this.nearWin = {x: 0, y: 2};
} else if (sums === C+'E'+C) {
this.nearWin = {x: 1, y: 1};
} else if (sums === C+C+'E') {
this.nearWin = {x: 2, y: 0};
// Look for Player near wins in right diagonal
} else if (sums === 'E'+P+P) {
this.nearWin = {x: 0, y: 2};
} else if (sums === P+'E'+P) {
this.nearWin = {x: 1, y: 1};
} else if (sums === P+P+'E') {
this.nearWin = {x: 2, y: 0};
}
}
}
Game.prototype.markBox = function(mark, boxId) {
var x = boxId.split('-')[0];
var y = boxId.split('-')[1];
this.board[x][y] = mark; // change backend
$("#"+boxId).text(mark); // change frontend
this.turn++;
}
Game.prototype.peekBox = function(area) {
var x = this.boxMap[area].x;
var y = this.boxMap[area].y;
return this.board[x][y];
}
Game.prototype.reset = function(resetTimer) {
this.isRunning = true;
this.turn = 0;
this.nearWin = undefined;
this.board = [['E', 'E', 'E'],
['E', 'E', 'E'],
['E', 'E', 'E']];
this.corners = ["top-left", "top-right",
"btm-left", "btm-right" ];
this.sides = ["top-middle", "mid-right",
"btm-middle", "mid-left" ];
$('*').removeClass("text-faded");
$('*').removeClass("win");
$('*').removeClass("lose");
$('#overlay').addClass('animated bounceOutUp');
//$('#overlay').addClass('hidden');
$('.box').text("");
clearTimeout(resetTimer);
}
// area can be a boxMap string, or a nearWin/x,y object
Game.prototype.setBox = function(mark, area) {
if (typeof(area) === "string") {
var x = this.boxMap[area].x;
var y = this.boxMap[area].y;
} else if (typeof(area) === "object") {
var x = area.x;
var y = area.y;
}
if (this.board[x][y] !== this.player.mark) {
this.board[x][y] = mark; // change backend
$("#"+x+"-"+y).text(mark); // change frontend
} else {
console.log("cry about it");
}
}
Game.prototype.showBoard = function() {
for (var row = 0; row < this.board.length; row++) {
console.log(this.board[row]);
}
}
Game.prototype.showDraw = function() {
var _this = this;
$('.box').addClass('text-faded');
$('#overlay').text("DRAW GAME")
.removeClass('hidden bounceOutUp')
.addClass('animated bounceInUp');
var resetTimer = setTimeout(function() {
_this.reset(resetTimer);
}, 3000);
}
// change to showResult
Game.prototype.showWin = function(mark, location, index) {
this.isRunning = false;
var _this = this;
var index = index !== undefined ? index : "";
var highlight = mark === this.player.mark ? 'win' : 'lose';
var result = mark === this.player.mark ? "YOU WIN" : "YOU LOSE";
$('.box').addClass('text-faded');
if (location === "Row") {
//$("#r"+index).addClass(highlight);
$("#"+index+"-0").addClass(highlight);
$("#"+index+"-1").addClass(highlight);
$("#"+index+"-2").addClass(highlight);
} else if (location === "Col") {
$("#0-"+index).addClass(highlight);
$("#1-"+index).addClass(highlight);
$("#2-"+index).addClass(highlight);
} else if (location === "Left Diag") {
$("#0-0").addClass(highlight);
$("#1-1").addClass(highlight);
$("#2-2").addClass(highlight);
} else if (location === "Right Diag") {
$("#2-0").addClass(highlight);
$("#1-1").addClass(highlight);
$("#0-2").addClass(highlight);
}
//console.log(mark + " wins at " + location + index);
$('#overlay').text(result)
.removeClass('hidden bounceOutUp')
.addClass('animated bounceInUp');
var resetTimer = setTimeout(function() {
_this.reset(resetTimer);
}, 3000);
}
function Player() {
this.mark = 'O';
this.wins = 0;
this.draws = 0;
this.losses = 0;
}
function Computer() {
this.mark = 'X';
}
Computer.prototype.chooseCorner = function(game) {
var randomIdx = Math.floor(Math.random() * game.corners.length);
var randomCorner;
while (game.peekBox(game.corners[randomIdx]) !== 'E') {
game.corners.splice(randomIdx, 1);
randomIdx = Math.floor(Math.random() * game.corners.length);
}
randomCorner = game.boxMap[ game.corners[randomIdx] ];
return randomCorner;
}
Computer.prototype.chooseSide = function(game) {
var randomIdx = Math.floor(Math.random() * game.sides.length);
var randomSide;
while (game.peekBox(game.sides[randomIdx]) !== 'E') {
game.sides.splice(randomIdx, 1);
randomIdx = Math.floor(Math.random() * game.sides.length);
}
randomSide = game.boxMap[ game.sides[randomIdx] ];
return randomSide;
}
Computer.prototype.doMove = function(game) {
// 1. WIN: Check for 2 in a row, if so place 3rd ftw
// 2. BLOCK: Check for Player 2 in a row, if so place to block
// 3.
if (game.isRunning) {
if (game.nearWin) {
game.setBox(this.mark, game.nearWin);
} else if (game.peekBox("center") === 'E') {
game.setBox(this.mark, "center");
} else {
if (game.corners.length > 0) {
console.log("picking random corner!");
console.log(game.corners.length);
var corner = this.chooseCorner(game);
game.setBox(this.mark, corner);
} else {
console.log("picking random side!");
var side = this.chooseSide(game);
game.setBox(this.mark, side);
}
}
game.turn++;
}
}
var game = new Game();
});
!
