From 073041dfde1d17677749802a43aed06ed80a4f24 Mon Sep 17 00:00:00 2001
From: Alexander Munch-Hansen <alexmunchhansen@gmail.com>
Date: Fri, 18 May 2018 17:53:57 +0200
Subject: [PATCH] more board

---
 func.js   | 28 +++++++++++++++++---
 style.css | 78 +++++++++++++++----------------------------------------
 2 files changed, 45 insertions(+), 61 deletions(-)

diff --git a/func.js b/func.js
index 8a47ff0..49867c8 100644
--- a/func.js
+++ b/func.js
@@ -1,16 +1,36 @@
 
 $(function () {
 
+    var red = "#E83D04"
+    var white = "#E8E077"
+    var brown = "#4C2E00"
 
+    color = red;
+    
     // Build pins
-    for (var i = 1; i < 25; i++) {
 
-	if (i < 13) {
+
+    
+    for (var i = 0; i < 26; i++) {
+
+	if (i < 13 && 0 < i) {
 	    var pos = 'bottom';
-	} else {
+	} else if (i > 12 && i < 25) {
 	    var pos = 'top';
+	} else {
+	    var pos = 'bar';
 	}
-	var div = $("<div />").addClass("pin").addClass("pin-"+pos).attr('id', 'pin-'+i);
+
+
+	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);
 	
 	var checkers_div = $("<div />").addClass("checkers").attr('id', 'checkers-'+i);
 	var checkers_list = $("<ul />").addClass("checkers_list").attr('id', 'checkers_list-'+i);
diff --git a/style.css b/style.css
index 6b6f16d..9fa7c1d 100644
--- a/style.css
+++ b/style.css
@@ -28,146 +28,110 @@ body {
     padding-top:50px;
 }
 
+#pin-0 {
+    grid-column-start = 7;
+    grid-row-start = 1;
+}
+
+#pin-25 {
+    grid-column-start = 7;
+    grid-row-start = 2;
+}
 
 #pin-1 {
-    grid-column-start: 12;
+    grid-column-start: 13;
     grid-row-start: 2;
-    grid-row-end: 3;
 }
 #pin-2 {
-    grid-column-start: 11;
+    grid-column-start: 12;
     grid-row-start: 2;
-    grid-row-end: 3;
 }
 #pin-3 {
-    grid-column-start: 10;
+    grid-column-start: 11;
     grid-row-start: 2;
-    grid-row-end: 3;
 }
 #pin-4 {
-    grid-column-start: 9;
-
+    grid-column-start: 10;
     grid-row-start: 2;
-    grid-row-end: 3;
 }
 #pin-5 {
-    grid-column-start: 8;
-
+    grid-column-start: 9;
     grid-row-start: 2;
-    grid-row-end: 3;
 }
 #pin-6 {
-    grid-column-start: 7;
-
+    grid-column-start: 8;
     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-column-start: 8;
     grid-row-start: 1;
-    grid-row-end: 2;
 }
 #pin-20 {
-    grid-column-start: 8;
-
+    grid-column-start: 9;
     grid-row-start: 1;
-    grid-row-end: 2;
 }
 #pin-21 {
-    grid-column-start: 9;
-
+    grid-column-start: 10;
     grid-row-start: 1;
-    grid-row-end: 2;
 }
 #pin-22 {
-    grid-column-start: 10;
-
+    grid-column-start: 11;
     grid-row-start: 1;
-    grid-row-end: 2;
 }
 #pin-23 {
-    grid-column-start: 11;
-
+    grid-column-start: 12;
     grid-row-start: 1;
-    grid-row-end: 2;
 }
 #pin-24 {
-    grid-column-start: 12;
-
+    grid-column-start: 13;
     grid-row-start: 1;
-    grid-row-end: 2;
 }