js_backgammon/func.js

var prev_board = []


$(function () {
    var init_board = [0, 2, 0, 0, 0, 0, -5, 0, -3, 0, 1, 0, 4, -5, 0, 0, 0, 3, 0, 5, 0, 0, 0, 0, -2, 0];
	// var init_board = [0,2,0,-1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
    const red = "#E83D04"
    const white = "#E8E077"
    const brown = "#4C2E00"
    var prev_board = []
    var color = white;
    
    // 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);


		checkers_div.append(checkers_list);
		div.append(checkers_div);
		$( "#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);
    prev_board = 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 = prev_board.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);
                }
            }

			// console.log("lol");
			// console.log(prev_board[fromIdx]);
			// console.log(prev_board[toIdx]);

			board = convertToBoard();
			console.log("board!!!!");
			console.log(board);
			prev_board = handleMove(prev_board, board);

			convertToPins(prev_board);
	    
			// if (board != convertToBoard()) {
			// prev_board = getBotMove(prev_board);
			// convertToPins(prev_board);
			// }
	    
		}
	});

});


function handleMove(prev_board, board) {
    var new_board = postRequest(prev_board, board);
    test = [];
    for (var i = 0; i<26; i++) {
    	test.push(parseInt(new_board[i]));
	}
    return test;
};


function convertToBoard() {
    var board = []

    for (var i = 0; i < 26; i++) {
		var amount = $( "#checkers_list-"+i ).children('li').length;
		if (amount != 0) {
			var sign = ($("#checkers_list-"+i+"> li").attr('class').split(' ')[0]);
			if (i == 21) {
				console.log(amount)
				console.log(sign)
			}
			board.push(sign*amount);
		} 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 onReceived(data) {
    var obj = JSON.parse(JSON.stringify(data));
    alert(obj['board']);
};


function getBotMove(board) {
    
    var data = {'board' : board.toString()}
    var result = "";
    
    $.ajax({
	type : "POST",
	async: false, 
	url : "http://127.0.0.1:5000/bot_move",
	data: JSON.stringify(data),
	success: function(data) {
	    result = data;
	}
    });
    return result.split(',');
};



function getRequest() {
    $.ajax({
	url: 'http://127.0.0.1:5000/get_board',
	async: false,
	dataType: 'JSONP',
	data: {
	    format: 'json'
	},
	type: 'GET',
	success: onReceived
    });
};


function onPost(data) {
    console.log(data);
};


function postRequest(prev_board, board) {
    console.log(prev_board);
    var result = "";
    var data = {'board' : board.toString(), 'prev_board': prev_board.toString()}
    $.ajax({
	type : "POST",
	async: false, 
	url : "http://127.0.0.1:5000/post_board",
	data: JSON.stringify(data),
	success: function(data) {
	    result = data;
	}
    });
    console.log(result);
    return result.split(',');
};