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 = $("
").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 = $("").addClass("pin").addClass("pin-"+pos).attr('id', 'pin-'+i);
var checkers_div = $("").addClass("checkers").attr('id', 'checkers-'+i);
var checkers_list = $("").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;
}