Game Grid - JS Version

by Graham Walters

HTML

<div id="grid"></div>

CSS

.row {
    clear: left;
    margin-bottom: -45px;
}
.row.middle {
    margin-left: 77px;
}
.hex {
    width: 100px;
    margin-right: 54px;
    fill: rgb(102, 204, 102);
}
.hex:last-child {
    margin-right: 0;
}
.hex:hover {
    fill: #ace63c;
}

JavaScript

for (var y=0; y<5; y++) {
    $row = $('<div class="row'+(y%2==0 ? '' : ' middle')+'">');
    for (var x=0; x<4 -(y%2==0 ? 0 : 1); x++) {
        $row.append('<svg class="hex" width="100%" height="100%" viewBox="0 0 200 170" preserveAspectRatio="xMaxYMax" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">'+'<path d="M200,85L150,170L50,170L3.33067e-16,85L50,2.22045e-16L150,6.66134e-16L200,85Z" />'+'</svg>');
    }
    $('#grid').append($row);
}

$('.hex path').on('click', function () {
    $(this).css('fill', '#add');
});