Everything works, maybe quad-moving is a bit bugged.

func.js

@@ -13,8 +13,8 @@ $(function () {
 
 	var quad = false;
 
-	// var roll = [Math.floor(Math.random() * 6)+1, Math.floor(Math.random() * 6)+1]
-	var roll = [1,3];
+	var roll = [Math.floor(Math.random() * 6)+1, Math.floor(Math.random() * 6)+1]
+	// var roll = [1,3];
 	var total_roll = roll[0] + roll[1];
 
 	if (roll[0] == roll[1]) {
@@ -22,8 +22,9 @@ $(function () {
 		roll = [roll[0], roll[0], roll[0], roll[0]];
 		quad = true;
 	}
+    $( "#roll" ).text("roll: " + roll.toString() + " total moves: " + total_roll.toString());
 
-	console.log("Initial roll:");
+    console.log("Initial roll:");
 	console.log(roll);
 
 
@@ -86,8 +87,8 @@ $(function () {
 			var toIdx = event.target.attributes.pinId.value;
 			var fromIdx = ui.sender.attr("pinId");
 
-			console.log(fromIdx);
-			console.log(toIdx);
+			// console.log(fromIdx);
+			// console.log(toIdx);
 
 			if (toIdx < 26) {
 				var cloned_board = prev_board.slice();
@@ -113,9 +114,9 @@ $(function () {
             }
 
 			board = convertToBoard();
-			console.log("board!!!!");
-			console.log(board);
-			var data_stuff = handleMove(prev_board, board, roll, total_roll);
+			// console.log("board!!!!");
+			// console.log(board);
+			var data_stuff = handleMove(prev_board, board, roll, total_roll, quad);
 
 			prev_board = data_stuff['board'];
 			roll = data_stuff['roll'];
@@ -123,30 +124,33 @@ $(function () {
 
 			convertToPins(prev_board);
 
-
+			console.log("total roll is:");
+			console.log(total_roll);
 			if (total_roll == 0) {
                 if (board != convertToBoard()) {
                     prev_board = getBotMove(prev_board);
                     convertToPins(prev_board);
 
                     roll = [Math.floor(Math.random() * 6)+1, Math.floor(Math.random() * 6)+1]
-                    total_roll = roll[0] + roll[1]
+                    total_roll = roll[0] + roll[1];
 
                     if (roll[0] == roll[1]) {
+						console.log("huehue");
                         total_roll = roll[0] * 4;
                         roll = [roll[0], roll[0], roll[0], roll[0]]
                         quad = true;
                     }
                 }
             }
+            $( "#roll" ).text("roll: " + roll.toString() + " total moves: " + total_roll.toString());
 		}
 	});
 
 });
 
 
-function handleMove(prev_board, board, roll, total_roll) {
-    var data = postRequest(prev_board, board, roll, total_roll);
+function handleMove(prev_board, board, roll, total_roll, quad) {
+    var data = postRequest(prev_board, board, roll, total_roll, quad);
     var new_board = data['board'];
     total_roll = data['total_roll'];
     roll = data['roll'];
@@ -168,8 +172,8 @@ function convertToBoard() {
 		if (amount != 0) {
 			var sign = ($("#checkers_list-"+i+"> li").attr('class').split(' ')[0]);
 			if (i == 21) {
-				console.log(amount)
-				console.log(sign)
+				// console.log(amount)
+				// console.log(sign)
 			}
 			board.push(sign*amount);
 		} else {
@@ -177,8 +181,8 @@ function convertToBoard() {
 		}
 
 	}
-	console.log("The built board");
-    console.log(board);
+	// console.log("The built board");
+    // console.log(board);
     return board
 }
 
@@ -189,7 +193,7 @@ function emptyLists() {
 }
 
 function convertToPins(board ) {
-    console.log(board);
+    // console.log(board);
 
     emptyLists();
     
@@ -253,10 +257,13 @@ function onPost(data) {
 };
 
 
-function postRequest(prev_board, board, roll, total_roll) {
-    console.log(prev_board);
+function postRequest(prev_board, board, roll, total_roll, quad) {
+    // console.log(prev_board);
     var result = "";
-    var data = {'board' : board.toString(), 'prev_board': prev_board.toString(), 'roll': roll.toString(), 'total_roll': total_roll.toString()}
+    var data = {'board' : board.toString(), 'prev_board': prev_board.toString(), 'roll': roll.toString(),
+		'total_roll': total_roll.toString(),
+		'quad': quad.toString()
+	}
     $.ajax({
 	type : "POST",
 	async: false, 

index.html

@@ -15,10 +15,11 @@
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <script src="func.js"></script>
 
+    <div>
     <button id="tester" onclick="getRequest()">pls</button>
     <button id="convert_to_board" onclick="convertToBoard()">converty</button>
-
-
+    <p id="roll" style="font-size: 20px"></p>
+    </div>
       <div id="pins">
 	
       </div>

style.css

@@ -29,13 +29,13 @@ body {
 }
 
 #pin-0 {
-    grid-column-start = 7;
-    grid-row-start = 1;
+    grid-column-start: 7;
+    grid-row-start: 1;
 }
 
 #pin-25 {
-    grid-column-start = 7;
-    grid-row-start = 2;
+    grid-column-start: 7;
+    grid-row-start: 2;
 }
 
 #pin-1 {