diff --git a/index.html b/index.html index 5fcce40..f8887c2 100644 --- a/index.html +++ b/index.html @@ -16,12 +16,17 @@
-

+

+ + Toggle pubeval? + Do pubeval demo? + +
-
+
-
- +
+ diff --git a/style.css b/style.css index 6050713..0bb0c1f 100644 --- a/style.css +++ b/style.css @@ -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; diff --git a/typescript/func.js b/typescript/func.js index 16193bc..f805973 100644 --- a/typescript/func.js +++ b/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 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 = $("
    • ").addClass(Math.sign(tmp).toString()); } - else if (sign < 0) { + else if (sign > 0) { var list_obj = $("
    • ").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("#"); diff --git a/typescript/func.ts b/typescript/func.ts new file mode 100644 index 0000000..19bc56c --- /dev/null +++ b/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 = $("
    ").addClass("pin").addClass("pin-"+pos).attr('id', 'pin-'+i); + + + var checkers_div = $("
    ").addClass("checkers").attr('id', 'checkers-'+i); + var checkers_list = $("