From 9903c73930eb53b55657e1a3d1f289a7254b8717 Mon Sep 17 00:00:00 2001
From: Alexander Munch-Hansen <alexmunchhansen@gmail.com>
Date: Fri, 18 May 2018 20:53:45 +0200
Subject: [PATCH] Ehm

---
 func.js    | 76 +++++++++++++++++++++++++++++++++++++-----------------
 index.html | 11 ++------
 style.css  |  6 +++++
 3 files changed, 61 insertions(+), 32 deletions(-)

diff --git a/func.js b/func.js
index 49867c8..7736a4c 100644
--- a/func.js
+++ b/func.js
@@ -1,11 +1,13 @@
+var prev_board = []
+
 
 $(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 white = "#E8E077"
     var brown = "#4C2E00"
-
-    color = red;
+    var prev_board = []
+    var color = white;
     
     // Build pins
 
@@ -22,12 +24,14 @@ $(function () {
 	}
 
 
+	if (color == white) {
+	    color = red;
+	} else {
+	    color = white;
+	}
+	
 	if (i == 0 || i == 25) {
 	    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);
@@ -41,32 +45,59 @@ $(function () {
 	$( "#pins" ).append(div);
     }
 
-    convertBoard();
-    convertToBoard();
-    
+    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');
+
+    checkers_div.append(checkers_list);
+    div.append(checkers_div);
+    $( "#pins" ).append(div);
+
+
+
+    convertToPins(init_board);
+    prev_board = convertToBoard();
 
     $( ".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() {
-    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;
-	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() {
-    // 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];
+function convertToPins(board ) {
+
     // We don't want to deal with bars RIGHT now, TODO: Fix this.
     for (var i = 1; i < 25; i++) {
 	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({
 	url: 'http://127.0.0.1:5000/get_board',
 	dataType: 'JSONP',
@@ -107,8 +138,7 @@ function onPost(data) {
 };
 
 
-function post_request() {
-    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]
+function postRequest(board) {
 
     var data = {'board' : board.toString()}
     $.ajax({
diff --git a/index.html b/index.html
index c2b0f68..17b202c 100644
--- a/index.html
+++ b/index.html
@@ -5,25 +5,18 @@
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1">
     <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"> -->
   </head>
 
   <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/ui/1.12.1/jquery-ui.js"></script>
     <script src="func.js"></script>
 
-    <button id="tester" onclick="get_request()">pls</button>
-    <button id="post_test" onclick="post_request()">also_pls</button>
+    <button id="tester" onclick="getRequest()">pls</button>
+    <button id="convert_to_board" onclick="convertToBoard()">converty</button>
 
 
       <div id="pins">
diff --git a/style.css b/style.css
index 9fa7c1d..64709f4 100644
--- a/style.css
+++ b/style.css
@@ -135,3 +135,9 @@ body {
     grid-column-start: 13;
     grid-row-start: 1;
 }
+
+#pin-26 {
+    grid-column-start: 14;
+    grid-row-start: 1;
+    grid-row-end: 3;
+}