finished board

index.html

@@ -15,7 +15,7 @@
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <script src="typescript/func.js"></script>
 
-    <div>
+    <div id="topStuff">
       <p id="roll" style="font-size: 20px"></p>
       <button onclick="noMovesAvailable()">No moves can be done :(</button>
       Toggle pubeval?<input type="checkbox" id="myCheck" onclick="togglePubeval()">
@@ -23,10 +23,11 @@
       <button onclick="toggleDemoOn()">Demo on?</button>
       <button onclick="toggleDemoOff()">Demo off?</button>
     </div>
-    <div id="pins">
+    <div id="pinsContainer"> 
+      <div id="pins">
 	
+      </div>
     </div>
     
-    
   </body>
 </html>

style.css

@@ -1,11 +1,20 @@
 body {
     background-color: green;
+    font-family: Helvetica; 
 }
 
 
+
+#pinsContainer {
+    border:4px solid black;
+    background-color: #4C2E00;
+
+}
+
 #pins {
   display: grid;
   grid-template-columns: auto auto auto;
+  margin: 1.5em;
 
   grid-gap: 30px;
   padding: 10px;
@@ -16,6 +25,10 @@ body {
   border: 1px solid rgba(0, 0, 0, 0.8);
 }
 
+p {
+    font-size: 25px;
+}
+
 .ul {
     padding-top:50px;
     width:100px;
@@ -23,6 +36,8 @@ body {
 
 div.checkers {
     height: 100%;
+    margin-left: -1em;
+    margin-top: -2.5em;
 }
 
 ul.checkers_list {
@@ -37,6 +52,35 @@ div.pin {
     width: 5.5em;
 }
 
+#topStuff {
+    margin-bottom: 2em;
+}
+
+.pinNumber-bottom {
+    position: absolute;
+    margin-top: 55px;
+    width: 100%;
+    text-align: center;
+}
+
+.pinNumber-top {
+    position: absolute;
+    margin-top: -55px;
+    width: 100%;
+    text-align: center;
+}
+
+.pinNumber-top > p {
+//    background-color: #4d1a00;
+    color: whitesmoke;
+}
+
+.pinNumber-bottom > p {
+//    background-color: #4d1a00;
+    color: whitesmoke;
+}
+
+
 div.pin-top {
     // -webkit-clip-path: polygon(100% 0%, 1% 0%, 50% 100%);
     // clip-path: polygon(100% 0%, 1% 0%, 50% 100%);

typescript/func.js

@@ -1,6 +1,7 @@
 var interval;
 const ip = "http://127.0.0.1";
 const port = "35270";
+var roll;
 var totalRoll = 0;
 var quad = false;
 var prevBoard = [];
@@ -15,15 +16,7 @@ $(function () {
     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());
+    handleRoll();
     console.log("Initial roll:");
     console.log(roll);
     // Build pins
@@ -49,8 +42,13 @@ $(function () {
         var div = $("<div style='background-color:" + color + "'/>").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).attr('pinId', i);
+        var pinNumber = $("<div />").addClass("pinNumber-" + pos);
+        if (i != 0 && i != 25) {
+            pinNumber.append("<p>" + i + "</p>");
+        }
         checkers_div.append(checkers_list);
         div.append(checkers_div);
+        div.append(pinNumber);
         $("#pins").append(div);
     }
     var div = $("<div style='background-color:black'/>").addClass("pin").addClass("pin-26").attr('id', 'pin-26');
@@ -61,9 +59,9 @@ $(function () {
     $("#pins").append(div);
     convertToPins(init_board);
     //prevBoard = convertToBoard();
-    let initBotResult = getBotMove(init_board);
-    prevBoard = initBotResult.board;
-    convertToPins(prevBoard);
+    // let initBotResult = getBotMove(init_board);
+    // prevBoard = initBotResult.board;
+    // convertToPins(prevBoard);
     prevBoard = convertToBoard();
     $(".checkers_list").sortable({
         connectWith: ".checkers_list",
@@ -113,14 +111,7 @@ $(function () {
                     let botResult = getBotMove(prevBoard);
                     prevBoard = botResult.board;
                     convertToPins(prevBoard);
-                    roll = [Math.floor(Math.random() * 6) + 1, Math.floor(Math.random() * 6) + 1];
-                    totalRoll = roll[0] + roll[1];
-                    if (roll[0] == roll[1]) {
-                        console.log("huehue");
-                        totalRoll = roll[0] * 4;
-                        roll = [roll[0], roll[0], roll[0], roll[0]];
-                        quad = true;
-                    }
+                    handleRoll();
                 }
             }
             currentPlayer = 1;
@@ -128,6 +119,17 @@ $(function () {
         }
     });
 });
+function handleRoll() {
+    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());
+}
 function toggleDemoOn() {
     prevBoard = convertToBoard();
     if (!toggled) {

typescript/func.ts

@@ -1,6 +1,7 @@
 var interval;
 const ip: string = "http://127.0.0.1";
 const port: string = "35270";
+var roll;
 var totalRoll = 0;
 var quad = false;
 var prevBoard = []
@@ -21,17 +22,7 @@ $(function () {
     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());
+    handleRoll();
 
     console.log("Initial roll:");
     console.log(roll);
@@ -66,9 +57,13 @@ $(function () {
 	var checkers_div = $("<div />").addClass("checkers").attr('id', 'checkers-'+i);
 	var checkers_list = $("<ul />").addClass("checkers_list").attr('id', 'checkers_list-'+i).attr('pinId', i);
 
-
+	var pinNumber = $("<div />").addClass("pinNumber-"+pos);
+	if (i != 0 && i != 25) {
+	    pinNumber.append("<p>"+i+"</p>")
+	}
 	checkers_div.append(checkers_list);
 	div.append(checkers_div);
+	div.append(pinNumber);
 	$( "#pins" ).append(div);
     }
 
@@ -83,7 +78,7 @@ $(function () {
 
 
     convertToPins(init_board);
-    //prevBoard = convertToBoard();
+    prevBoard = convertToBoard();
     let initBotResult = getBotMove(init_board);
     prevBoard = initBotResult.board;
     convertToPins(prevBoard);
@@ -150,15 +145,8 @@ $(function () {
 		    prevBoard = botResult.board;
                     convertToPins(prevBoard);
 		    
-                    roll = [Math.floor(Math.random() * 6)+1, Math.floor(Math.random() * 6)+1]
-                    totalRoll = roll[0] + roll[1];
+		    handleRoll();
 		    
-                    if (roll[0] == roll[1]) {
-			console.log("huehue");
-                        totalRoll = roll[0] * 4;
-                        roll = [roll[0], roll[0], roll[0], roll[0]]
-                        quad = true;
-                    }
                 }
             }
 	    currentPlayer = 1;
@@ -168,6 +156,21 @@ $(function () {
    
 });
 
+
+function handleRoll() {
+    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());
+}
+
+
 function toggleDemoOn() {
     prevBoard = convertToBoard();