Almost board

func.js

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

index.html

@@ -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 id="pins">
-    </div>
+	
-    
+      </div>
+
     
   </body>
 </html>

style.css

@@ -1,9 +1,173 @@
 body {
-    text-align: center;
     background-color: green;
 }
 
-ul {
+
-    padding-top: 5px;
+#pins {
-    display: inline-block;
+  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;
 }