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