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

Almost board

Browse Source
This commit is contained in:
Alexander Munch-Hansen 2018-05-18 16:53:23 +02:00
parent 94e2c9a768
commit 82b3835d28
3 changed files with 188 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
func.js
View File

@ -1,13 +1,20 @@
$(function () {
var sortables = []
// Build pins
for (var i = 1; i < 25; i++) {
var div = $("<div />").addClass("pin").attr('id', 'pin-'+i);
if (i < 13) {
var pos = 'bottom';
} else {
var pos = 'top';
}
var div = $("<div />").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);
sortables.push("#checkers_list-"+i);
checkers_div.append(checkers_list);
div.append(checkers_div);
@ -17,8 +24,8 @@ $(function () {
convertBoard();
convertToBoard();
console.log(sortables.join());
$( sortables.join() ).sortable({
$( ".checkers_list" ).sortable({
connectWith: ".checkers_list"
});
@ -64,7 +71,7 @@ function onReceived(data) {
function get_request() {
$.ajax({
url: 'http://127.0.0.1:5000/',
url: 'http://127.0.0.1:5000/get_board',
dataType: 'JSONP',
data: {
format: 'json'
@ -86,7 +93,7 @@ function post_request() {
var data = {'board' : board.toString()}
$.ajax({
type : "POST",
url : "http://127.0.0.1:5000/post_request",
url : "http://127.0.0.1:5000/post_board",
data: JSON.stringify(data),
success: onPost
});

11
index.html
View File

@ -24,11 +24,12 @@
<button id="tester" onclick="get_request()">pls</button>
<button id="post_test" onclick="post_request()">also_pls</button>
<div id="pins">
</div>
<div id="pins">
</div>
</body>
</html>

172
style.css
View File

@ -1,9 +1,173 @@
body {
text-align: center;
background-color: green;
}
ul {
padding-top: 5px;
display: inline-block;
#pins {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 30px;
padding: 10px;
}
.pin {
border: 1px solid rgba(0, 0, 0, 0.8);
}
.ul {
padding-top:50px;
width:100px;
}
.checkers_list {
list-style-type: none;
padding-top:50px;
}
#pin-1 {
grid-column-start: 12;
grid-row-start: 2;
grid-row-end: 3;
}
#pin-2 {
grid-column-start: 11;
grid-row-start: 2;
grid-row-end: 3;
}
#pin-3 {
grid-column-start: 10;
grid-row-start: 2;
grid-row-end: 3;
}
#pin-4 {
grid-column-start: 9;
grid-row-start: 2;
grid-row-end: 3;
}
#pin-5 {
grid-column-start: 8;
grid-row-start: 2;
grid-row-end: 3;
}
#pin-6 {
grid-column-start: 7;
grid-row-start: 2;
grid-row-end: 3;
}
#pin-7 {
grid-column-start: 6;
grid-row-start: 2;
grid-row-end: 3;
}
#pin-8 {
grid-column-start: 5;
grid-row-start: 2;
grid-row-end: 3;
}
#pin-9 {
grid-column-start: 4;
grid-row-start: 2;
grid-row-end: 3;
}
#pin-10 {
grid-column-start: 3;
grid-row-start: 2;
grid-row-end: 3;
}
#pin-11 {
grid-column-start: 2;
grid-row-start: 2;
grid-row-end: 3;
}
#pin-12 {
grid-column-start: 1;
grid-row-start: 2;
grid-row-end: 3;
}
#pin-13 {
grid-column-start: 1;
grid-row-start: 1;
grid-row-end: 2;
}
#pin-14 {
grid-column-start: 2;
grid-row-start: 1;
grid-row-end: 2;
}
#pin-15 {
grid-column-start: 3;
grid-row-start: 1;
grid-row-end: 2;
}
#pin-16 {
grid-column-start: 4;
grid-row-start: 1;
grid-row-end: 2;
}
#pin-17 {
grid-column-start: 5;
grid-row-start: 1;
grid-row-end: 2;
}
#pin-18 {
grid-column-start: 6;
grid-row-start: 1;
grid-row-end: 2;
}
#pin-19 {
grid-column-start: 7;
grid-row-start: 1;
grid-row-end: 2;
}
#pin-20 {
grid-column-start: 8;
grid-row-start: 1;
grid-row-end: 2;
}
#pin-21 {
grid-column-start: 9;
grid-row-start: 1;
grid-row-end: 2;
}
#pin-22 {
grid-column-start: 10;
grid-row-start: 1;
grid-row-end: 2;
}
#pin-23 {
grid-column-start: 11;
grid-row-start: 1;
grid-row-end: 2;
}
#pin-24 {
grid-column-start: 12;
grid-row-start: 1;
grid-row-end: 2;
}