328 lines
11 KiB
JavaScript
328 lines
11 KiB
JavaScript
var interval;
|
|
const ip = "http://127.0.0.1";
|
|
const port = "35270";
|
|
var roll;
|
|
var totalRoll = 0;
|
|
var quad = false;
|
|
var prevBoard = [];
|
|
var pubeval = false;
|
|
var currentPlayer = 1;
|
|
var toggled = false;
|
|
const init_board = [0, 2, 0, 0, 0, 0, -5, 0, -3, 0, 0, 0, 5, -5, 0, 0, 0, 3, 0, 5, 0, 0, 0, 0, -2, 0];
|
|
// const init_board = [0,1,0,0,-1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
|
|
$(function () {
|
|
var board = [];
|
|
const red = "#E83D04";
|
|
const white = "#E8E077";
|
|
const brown = "#4C2E00";
|
|
var color = white;
|
|
handleRoll();
|
|
console.log("Initial roll:");
|
|
console.log(roll);
|
|
// Build pins
|
|
for (var i = 0; i < 26; i++) {
|
|
if (i < 13 && 0 < i) {
|
|
var pos = 'bottom';
|
|
}
|
|
else if (i > 12 && i < 25) {
|
|
var pos = 'top';
|
|
}
|
|
else {
|
|
var pos = 'bar';
|
|
}
|
|
if (color == white) {
|
|
color = red;
|
|
}
|
|
else {
|
|
color = white;
|
|
}
|
|
if (i == 0 || i == 25) {
|
|
color = brown;
|
|
}
|
|
var div = $("<div style='background-color:" + color + "'/>").addClass("pin").addClass("pin-" + pos).attr('id', 'pin-' + i);
|
|
var checkers_div = $("<div />").addClass("checkers").attr('id', 'checkers-' + i);
|
|
var checkers_list = $("<ul />").addClass("checkers_list").attr('id', 'checkers_list-' + i).attr('pinId', i);
|
|
var pinNumber = $("<div />").addClass("pinNumber-" + pos);
|
|
if (i != 0 && i != 25) {
|
|
pinNumber.append("<p>" + i + "</p>");
|
|
}
|
|
checkers_div.append(checkers_list);
|
|
div.append(checkers_div);
|
|
div.append(pinNumber);
|
|
$("#pins").append(div);
|
|
}
|
|
var div = $("<div style='background-color:black'/>").addClass("pin").addClass("pin-26").attr('id', 'pin-26');
|
|
var checkers_div = $("<div />").addClass("checkers").attr('id', 'checkers-26');
|
|
var checkers_list = $("<ul />").addClass("checkers_list").attr('id', 'checkers_list-26').attr('pinId', 26);
|
|
checkers_div.append(checkers_list);
|
|
div.append(checkers_div);
|
|
$("#pins").append(div);
|
|
convertToPins(init_board);
|
|
//prevBoard = convertToBoard();
|
|
// let initBotResult = getBotMove(init_board);
|
|
// prevBoard = initBotResult.board;
|
|
// convertToPins(prevBoard);
|
|
prevBoard = convertToBoard();
|
|
$(".checkers_list").sortable({
|
|
connectWith: ".checkers_list",
|
|
receive: function (event, ui) {
|
|
// Handle putting people on the bar correclty and getting off it.
|
|
// Something like look at the index you drop the checker at
|
|
var toIdx = event.target.attributes.pinId.value;
|
|
var fromIdx = ui.sender.attr("pinId");
|
|
// console.log(fromIdx);
|
|
// console.log(toIdx);
|
|
if (toIdx < 26) {
|
|
var cloned_board = prevBoard.slice();
|
|
var sign = Math.sign(cloned_board[fromIdx]);
|
|
// if bar stuff has to be handled
|
|
if (cloned_board[toIdx] * sign == -1) {
|
|
// Lift checker
|
|
cloned_board[fromIdx] += -(sign);
|
|
// Check where the opponents bar is
|
|
if (sign == -1) {
|
|
cloned_board[0] += -(sign);
|
|
}
|
|
else {
|
|
cloned_board[25] += -(sign);
|
|
}
|
|
// flip the piece at target index
|
|
cloned_board[toIdx] *= -1;
|
|
// Load the board into the pins
|
|
convertToPins(cloned_board);
|
|
}
|
|
}
|
|
board = convertToBoard();
|
|
// console.log("board!!!!");
|
|
// console.log(board);
|
|
var dataObject = handleMove(prevBoard, board, roll, totalRoll, quad);
|
|
prevBoard = dataObject.board;
|
|
// prevBoard = data_stuff['board'];
|
|
roll = dataObject.roll;
|
|
// roll = data_stuff['roll'];
|
|
totalRoll = dataObject.totalRoll;
|
|
// totalRoll = data_stuff['totalRoll'];
|
|
convertToPins(prevBoard);
|
|
console.log("total roll is:");
|
|
console.log(totalRoll);
|
|
if (totalRoll == 0) {
|
|
if (board != convertToBoard()) {
|
|
currentPlayer = -1;
|
|
let botResult = getBotMove(prevBoard);
|
|
prevBoard = botResult.board;
|
|
convertToPins(prevBoard);
|
|
handleRoll();
|
|
}
|
|
}
|
|
currentPlayer = 1;
|
|
$("#roll").text("roll: " + roll.toString() + " total moves: " + totalRoll.toString());
|
|
}
|
|
});
|
|
});
|
|
function handleRoll() {
|
|
roll = [Math.floor(Math.random() * 6) + 1, Math.floor(Math.random() * 6) + 1];
|
|
// var roll = [1,2];
|
|
totalRoll = roll[0] + roll[1];
|
|
if (roll[0] == roll[1]) {
|
|
totalRoll = roll[0] * 4;
|
|
roll = [roll[0], roll[0], roll[0], roll[0]];
|
|
quad = true;
|
|
}
|
|
$("#roll").text("roll: " + roll.toString() + " total moves: " + totalRoll.toString());
|
|
}
|
|
function toggleDemoOn() {
|
|
prevBoard = convertToBoard();
|
|
if (!toggled) {
|
|
toggled = true;
|
|
interval = setInterval(doDemoMove, 500);
|
|
}
|
|
// Make sure that the demo doesn't stop on player 1's turn, so take one extra step, if that's the case
|
|
// Also make sure that the board reverts to init board, if a player is done.
|
|
}
|
|
function toggleDemoOff() {
|
|
if (toggled) {
|
|
clearInterval(interval);
|
|
if (currentPlayer == 1) {
|
|
doDemoMove();
|
|
}
|
|
clearInterval(interval);
|
|
toggled = false;
|
|
}
|
|
}
|
|
function isBlackDone(pin) {
|
|
return pin >= 0;
|
|
}
|
|
function isWhiteDone(pin) {
|
|
return pin <= 0;
|
|
}
|
|
function isGameDone(board) {
|
|
return (board.every(isBlackDone) || board.every(isWhiteDone));
|
|
}
|
|
function doDemoMove() {
|
|
prevBoard = convertToBoard();
|
|
let tmp = convertToBoard();
|
|
let isFinished = isGameDone(tmp);
|
|
if (isFinished) {
|
|
prevBoard = init_board;
|
|
}
|
|
var doDemoMove;
|
|
if ($("#doPubevalDemo").is(':checked')) {
|
|
doDemoMove = getPubevalMove;
|
|
}
|
|
else {
|
|
doDemoMove = getNetworkMove;
|
|
}
|
|
let res = doDemoMove(prevBoard, currentPlayer);
|
|
prevBoard = res.board;
|
|
convertToPins(prevBoard);
|
|
currentPlayer = currentPlayer * -1;
|
|
}
|
|
function handleMove(previousBoard, board, roll, totalRoll, quad) {
|
|
var data = postRequest(previousBoard, board, roll, totalRoll, quad);
|
|
return data;
|
|
}
|
|
;
|
|
function togglePubeval() {
|
|
if (pubeval == true) {
|
|
pubeval = false;
|
|
}
|
|
else {
|
|
pubeval = true;
|
|
}
|
|
}
|
|
function convertToBoard() {
|
|
let board = [];
|
|
for (var i = 0; i < 26; i++) {
|
|
var amount = $("#checkers_list-" + i).children('li').length;
|
|
if (amount != 0) {
|
|
var sign = parseInt(($("#checkers_list-" + i + "> li").attr('class').split(' ')[0]));
|
|
if (i == 21) {
|
|
// console.log(amount)
|
|
// console.log(sign)
|
|
}
|
|
let checkers = sign * amount;
|
|
board.push(checkers);
|
|
}
|
|
else {
|
|
board.push(0);
|
|
}
|
|
}
|
|
// console.log("The built board");
|
|
// console.log(board);
|
|
return board;
|
|
}
|
|
function emptyLists() {
|
|
for (var i = 0; i < 27; i++) {
|
|
$('#checkers_list-' + i).empty();
|
|
}
|
|
}
|
|
function convertToPins(board) {
|
|
// console.log(board);
|
|
emptyLists();
|
|
for (var i = 0; i < 26; i++) {
|
|
var tmp = parseInt(board[i]);
|
|
for (var amt_at_pin = 0; amt_at_pin < Math.abs(tmp); amt_at_pin++) {
|
|
var sign = Math.sign(tmp);
|
|
if (sign < 0) {
|
|
var list_obj = $("<li><img src='black.png' width='40'></li>").addClass(Math.sign(tmp).toString());
|
|
}
|
|
else if (sign > 0) {
|
|
var list_obj = $("<li><img src='white.png' width='40'></li>").addClass(Math.sign(tmp).toString());
|
|
}
|
|
$('#checkers_list-' + i).append(list_obj);
|
|
}
|
|
}
|
|
}
|
|
;
|
|
function getNetworkMove(board, player) {
|
|
let data = { 'board': board.toString(), 'player': player.toString() };
|
|
let result = { board: [] };
|
|
$.ajax({
|
|
type: "POST",
|
|
async: false,
|
|
url: "http://127.0.0.1:" + port + "/network_move",
|
|
data: JSON.stringify(data),
|
|
success: function (data) {
|
|
data.split(",").forEach(function (item, index) {
|
|
result.board.push(parseInt(item));
|
|
});
|
|
}
|
|
});
|
|
return result;
|
|
}
|
|
;
|
|
function getPubevalMove(board, player) {
|
|
let data = { 'board': board.toString(), 'player': player.toString() };
|
|
let result = { board: [] };
|
|
$.ajax({
|
|
type: "POST",
|
|
async: false,
|
|
url: "http://127.0.0.1:" + port + "/pubeval_move",
|
|
data: JSON.stringify(data),
|
|
success: function (data) {
|
|
data.split(",").forEach(function (item, index) {
|
|
result.board.push(parseInt(item));
|
|
});
|
|
}
|
|
});
|
|
return result;
|
|
}
|
|
;
|
|
function getBotMove(board) {
|
|
let data = { 'board': board.toString(), 'pubeval': pubeval };
|
|
let result = { board: [] };
|
|
$.ajax({
|
|
type: "POST",
|
|
async: false,
|
|
url: "http://127.0.0.1:" + port + "/bot_move",
|
|
data: JSON.stringify(data),
|
|
success: function (data) {
|
|
data.split(",").forEach(function (item, index) {
|
|
result.board.push(parseInt(item));
|
|
});
|
|
}
|
|
});
|
|
return result;
|
|
}
|
|
;
|
|
function noMovesAvailable() {
|
|
let curBoard = convertToBoard();
|
|
console.log(curBoard);
|
|
let res = getBotMove(curBoard);
|
|
prevBoard = res.board;
|
|
console.log(prevBoard);
|
|
convertToPins(prevBoard);
|
|
var roll = [Math.floor(Math.random() * 6) + 1, Math.floor(Math.random() * 6) + 1];
|
|
if (roll[0] == roll[1]) {
|
|
console.log("huehue");
|
|
totalRoll = roll[0] * 4;
|
|
roll = [roll[0], roll[0], roll[0], roll[0]];
|
|
quad = true;
|
|
}
|
|
$("#roll").text("roll: " + roll.toString() + " total moves: " + totalRoll.toString());
|
|
}
|
|
function postRequest(previousBoard, board, roll, totalRoll, quad) {
|
|
let result = { board: [], totalRoll: 0, roll: [] };
|
|
var data = { 'board': board.toString(), 'prevBoard': previousBoard.toString(), 'roll': roll.toString(),
|
|
'totalRoll': totalRoll.toString(),
|
|
'quad': quad.toString()
|
|
};
|
|
$.ajax({
|
|
type: "POST",
|
|
async: false,
|
|
url: "http://127.0.0.1:" + port + "/post_board",
|
|
data: JSON.stringify(data),
|
|
success: function (data) {
|
|
let splitData = data.split("#");
|
|
splitData[0].split(",").forEach(function (item, index) {
|
|
result.board.push(parseInt(item));
|
|
});
|
|
result.totalRoll = parseInt(splitData[1]);
|
|
splitData[2].split(",").forEach(function (item, index) {
|
|
result.roll.push(parseInt(item));
|
|
});
|
|
}
|
|
});
|
|
return result;
|
|
}
|