Allows for demoing both pubeval and network

This commit is contained in:
Alexander Munch-Hansen 2018-06-10 12:29:24 +02:00
parent 594f4546cd
commit 62e35d868b
4 changed files with 574 additions and 26 deletions

View File

@ -16,12 +16,17 @@
<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>
</html>

View File

@ -6,7 +6,7 @@ body {
#pins {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 30px;
padding: 10px;
}
@ -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%);
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%);
display: flex;
flex-direction: column;
}
div.pin-bottom {
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
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%);
display: flex;
flex-direction: column-reverse;
}
input[type=checkbox] {
margin-left: 15px;
transform: scale(2);
}
#pin-0 {
grid-column-start: 7;

View File

@ -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 totalRoll = roll[0] + roll[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]];
@ -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) {
var data = postRequest(prevBoard, board, roll, totalRoll, quad);
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++) {
@ -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) {
let data = { 'board': board.toString() };
function getNetworkMove(board, player) {
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("#");

419
typescript/func.ts Normal file
View File

@ -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;
}