Pownie/js_backgammon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ehm

Browse Source
This commit is contained in:
Alexander Munch-Hansen 2018-05-18 20:53:45 +02:00
parent 073041dfde
commit 9903c73930
3 changed files with 61 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
func.js
View File

@ -1,11 +1,13 @@
var prev_board = []
$(function () { $(function () {
var 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 red = "#E83D04" var red = "#E83D04"
var white = "#E8E077" var white = "#E8E077"
var brown = "#4C2E00" var brown = "#4C2E00"
var prev_board = []
color = red; var color = white;
// Build pins // Build pins
@ -22,12 +24,14 @@ $(function () {
} }
if (color == white) {
color = red;
} else {
color = white;
}
if (i == 0 || i == 25) { if (i == 0 || i == 25) {
color = brown; color = brown;
} else if (color == red) {
color = white;
} else {
color = red;
} }
var div = $("<div style='background-color:"+color+"'/>").addClass("pin").addClass("pin-"+pos).attr('id', 'pin-'+i); var div = $("<div style='background-color:"+color+"'/>").addClass("pin").addClass("pin-"+pos).attr('id', 'pin-'+i);
@ -41,32 +45,59 @@ $(function () {
$( "#pins" ).append(div); $( "#pins" ).append(div);
} }
convertBoard(); var div = $("<div style='background-color:black'/>").addClass("pin").addClass("pin-26").attr('id', 'pin-26');
convertToBoard();
var checkers_div = $("<div />").addClass("checkers").attr('id', 'checkers-26');
var checkers_list = $("<ul />").addClass("checkers_list").attr('id', 'checkers_list-26');
checkers_div.append(checkers_list);
div.append(checkers_div);
$( "#pins" ).append(div);
convertToPins(init_board);
prev_board = convertToBoard();
$( ".checkers_list" ).sortable({ $( ".checkers_list" ).sortable({
connectWith: ".checkers_list" connectWith: ".checkers_list",
receive: function (event, ui) {
console.log(prev_board);
handleMove();
console.log(prev_board);
}
}); });
}); });
function handleMove() {
var board = convertToBoard();
postRequest(board);
prev_board = board;
};
function convertToBoard() { function convertToBoard() {
var board = [0] var board = []
for (var i = 1; i < 25; i++) { for (var i = 0; i < 26; i++) {
var amount = $( "#checkers_list-"+i ).children('li').length; var amount = $( "#checkers_list-"+i ).children('li').length;
board.push(amount); if (amount != 0) {
} var sign = ($("#checkers_list-"+i+"> li").attr('class').split(' ')[0]);
board.push(sign*amount);
} else {
board.push(0);
}
board.push(0) }
console.log(board); // console.log(board);
return board
} }
function convertBoard() { function convertToPins(board ) {
// TODO: Take board as input
var 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];
// We don't want to deal with bars RIGHT now, TODO: Fix this. // We don't want to deal with bars RIGHT now, TODO: Fix this.
for (var i = 1; i < 25; i++) { for (var i = 1; i < 25; i++) {
for (var amt_at_pin = 0; amt_at_pin < Math.abs(board[i]); amt_at_pin++) { for (var amt_at_pin = 0; amt_at_pin < Math.abs(board[i]); amt_at_pin++) {
@ -89,7 +120,7 @@ function onReceived(data) {
}; };
function get_request() { function getRequest() {
$.ajax({ $.ajax({
url: 'http://127.0.0.1:5000/get_board', url: 'http://127.0.0.1:5000/get_board',
dataType: 'JSONP', dataType: 'JSONP',
@ -107,8 +138,7 @@ function onPost(data) {
}; };
function post_request() { function postRequest(board) {
var 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 data = {'board' : board.toString()} var data = {'board' : board.toString()}
$.ajax({ $.ajax({

11
index.html
View File

@ -5,25 +5,18 @@
<meta http-equiv="x-ua-compatible" content="ie=edge"> <meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="jquery-ui/jquery-ui.min.css">
<link rel="stylesheet" href="jquery-ui/jquery-ui.structure.min.css">
<link rel="stylesheet" href="jquery-ui/jquery-ui.theme.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!-- <link rel="stylesheet" href="bulma.min.css"> --> <!-- <link rel="stylesheet" href="bulma.min.css"> -->
</head> </head>
<body> <body>
<script src="jquery-3.3.1.min.js"></script>
<script src="jquery-ui/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="func.js"></script> <script src="func.js"></script>
<button id="tester" onclick="get_request()">pls</button> <button id="tester" onclick="getRequest()">pls</button>
<button id="post_test" onclick="post_request()">also_pls</button> <button id="convert_to_board" onclick="convertToBoard()">converty</button>
<div id="pins"> <div id="pins">

6
style.css
View File

@ -135,3 +135,9 @@ body {
grid-column-start: 13; grid-column-start: 13;
grid-row-start: 1; grid-row-start: 1;
} }
#pin-26 {
grid-column-start: 14;
grid-row-start: 1;
grid-row-end: 3;
}