Allows for demoing both pubeval and network

index.html

@@ -16,11 +16,16 @@
     <script src="typescript/func.js"></script>
 
     <div>
-    <p id="roll" style="font-size: 20px"></p>
+      <p id="roll" style="font-size: 20px"></p>
+      <button onclick="noMovesAvailable()">No moves can be done :(</button>
+      Toggle pubeval?<input type="checkbox" id="myCheck" onclick="togglePubeval()">
+      Do pubeval demo?<input type="checkbox" id="doPubevalDemo">
+      <button onclick="toggleDemoOn()">Demo on?</button>
+      <button onclick="toggleDemoOff()">Demo off?</button>
     </div>
-      <div id="pins">
+    <div id="pins">
 	
-      </div>
+    </div>
     
     
   </body>

style.css

@@ -33,23 +33,31 @@ ul.checkers_list {
 
 div.pin {
     min-height: 25em;
+    position: relative;
+    width: 5.5em;
 }
 
 div.pin-top {
-    -webkit-clip-path: polygon(100% 0%, 1% 0%, 50% 100%);
+    // -webkit-clip-path: polygon(100% 0%, 1% 0%, 50% 100%);
-    clip-path: polygon(100% 0%, 1% 0%, 50% 100%);
+    // clip-path: polygon(100% 0%, 1% 0%, 50% 100%);
     display: flex;
     flex-direction: column;
 }
 
 div.pin-bottom {
-    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+    // -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+    // clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
     display: flex;
     flex-direction: column-reverse;
 }
 
 
+input[type=checkbox] {
+    margin-left: 15px;
+    transform: scale(2);
+}
+
+
 
 #pin-0 {
     grid-column-start: 7;

typescript/func.js

@@ -1,18 +1,23 @@
-const ip = "users.guava.space";
+var interval;
+const ip = "http://127.0.0.1";
 const port = "35270";
+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 () {
-    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];
     var board = [];
-    // 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 prevBoard = [];
     var color = white;
-    let quad = false;
     var roll = [Math.floor(Math.random() * 6) + 1, Math.floor(Math.random() * 6) + 1];
-    // var roll = [1,3];
+    var roll = [1, 2];
-    var totalRoll = roll[0] + roll[1];
+    totalRoll = roll[0] + roll[1];
     if (roll[0] == roll[1]) {
         totalRoll = roll[0] * 4;
         roll = [roll[0], roll[0], roll[0], roll[0]];
@@ -55,6 +60,10 @@ $(function () {
     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",
@@ -100,6 +109,7 @@ $(function () {
             console.log(totalRoll);
             if (totalRoll == 0) {
                 if (board != convertToBoard()) {
+                    currentPlayer = -1;
                     let botResult = getBotMove(prevBoard);
                     prevBoard = botResult.board;
                     convertToPins(prevBoard);
@@ -113,15 +123,71 @@ $(function () {
                     }
                 }
             }
+            currentPlayer = 1;
             $("#roll").text("roll: " + roll.toString() + " total moves: " + totalRoll.toString());
         }
     });
 });
-function handleMove(prevBoard, board, roll, totalRoll, quad) {
+function toggleDemoOn() {
-    var data = postRequest(prevBoard, board, roll, totalRoll, quad);
+    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++) {
@@ -155,10 +221,10 @@ function convertToPins(board) {
         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) {
+            if (sign < 0) {
                 var list_obj = $("<li><img src='black.png'  width='40'></li>").addClass(Math.sign(tmp).toString());
             }
-            else if (sign < 0) {
+            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);
@@ -166,13 +232,13 @@ function convertToPins(board) {
     }
 }
 ;
-function getBotMove(board) {
+function getNetworkMove(board, player) {
-    let data = { 'board': board.toString() };
+    let data = { 'board': board.toString(), 'player': player.toString() };
     let result = { board: [] };
     $.ajax({
         type: "POST",
         async: false,
-        url: ip + ":" + port + "/bot_move",
+        url: "http://127.0.0.1:" + port + "/network_move",
         data: JSON.stringify(data),
         success: function (data) {
             data.split(",").forEach(function (item, index) {
@@ -183,16 +249,66 @@ function getBotMove(board) {
     return result;
 }
 ;
-function postRequest(prevBoard, board, roll, totalRoll, quad) {
+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': prevBoard.toString(), 'roll': roll.toString(),
+    var data = { 'board': board.toString(), 'prevBoard': previousBoard.toString(), 'roll': roll.toString(),
         'totalRoll': totalRoll.toString(),
         'quad': quad.toString()
     };
     $.ajax({
         type: "POST",
         async: false,
-        url: ip + ":" + port + "/post_board",
+        url: "http://127.0.0.1:" + port + "/post_board",
         data: JSON.stringify(data),
         success: function (data) {
             let splitData = data.split("#");

typescript/func.ts

@@ -0,0 +1,419 @@
+var interval;
+const ip: string = "http://127.0.0.1";
+const port: string = "35270";
+var totalRoll = 0;
+var quad = false;
+var prevBoard = []
+var pubeval = false;
+var currentPlayer = 1;
+var toggled: boolean = 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;
+
+
+    var 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());
+
+    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);
+
+
+	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);
+    //prevBoard = convertToBoard();
+    let initBotResult = getBotMove(init_board);
+    prevBoard = initBotResult.board;
+    convertToPins(prevBoard);
+    
+    prevBoard = convertToBoard();
+
+    ($( ".checkers_list") as any).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);
+		    
+                    roll = [Math.floor(Math.random() * 6)+1, Math.floor(Math.random() * 6)+1]
+                    totalRoll = roll[0] + roll[1];
+		    
+                    if (roll[0] == roll[1]) {
+			console.log("huehue");
+                        totalRoll = roll[0] * 4;
+                        roll = [roll[0], roll[0], roll[0], roll[0]]
+                        quad = true;
+                    }
+                }
+            }
+	    currentPlayer = 1;
+            $( "#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: number[]): boolean {
+
+    return (board.every(isBlackDone) || board.every(isWhiteDone));
+    
+}
+
+function doDemoMove() {
+
+    prevBoard = convertToBoard();
+    let tmp: number[] = 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): {board: number[]; totalRoll: number; roll: number[]}{
+    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: number = $( "#checkers_list-"+i ).children('li').length;
+	if (amount != 0) {
+	    var sign: number = parseInt(($("#checkers_list-"+i+"> li").attr('class').split(' ')[0]));
+	    if (i == 21) {
+		// console.log(amount)
+		// console.log(sign)
+	    }
+	    let checkers: number = 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);
+	}
+    } 
+};
+
+
+interface botMove {
+    board: number[];
+}
+
+
+function getNetworkMove(board, player): botMove {
+    
+    let data = {'board' : board.toString(), 'player' : player.toString()}
+    let result : botMove = {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): botMove {
+    
+    let data = {'board' : board.toString(), 'player' : player.toString()}
+    let result : botMove = {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): botMove {
+    
+    let data = {'board' : board.toString(), 'pubeval' : pubeval}
+    let result : botMove = {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());
+}
+
+
+interface requestResult {
+    board: number[];
+    totalRoll: number;
+    roll: number[];
+}
+
+function postRequest(previousBoard: number[], board: number[], roll: number[], totalRoll: number, quad: boolean) : requestResult {
+
+    let result: requestResult = {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: string = 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;
+}