Hexagon Tile Board

by skibulk

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div id="chrome">
  Hello World
</div>

<div id="wrap1">
  <div id="wrap2">
    <div id="wrap3">
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  min-width: 100%;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  height: 100%;
  max-height: 100%;
}

#chrome {
  position: relative;
  z-index: 1;
}

#wrap1 {
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#wrap2 {
  position: absolute;
  top: -30px;
  left: -52px;
}

#wrap3 {
  position: relative;
}

span {
  position: absolute;
  width: 120px;
  height: 104px;
  text-align: center;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.level3 {
  background: #D9424C;
}

.level2 {
  background: #F5634A;
}

.level1 {
  background: #FF9C5B;
}

.level0 {
  background: #FAD089;
}

.active {
  -webkit-box-shadow: inset 0px 0px 80px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: inset 0px 0px 80px 0px rgba(0, 0, 0, 1);
  box-shadow: inset 0px 0px 80px 0px rgba(0, 0, 0, 1);
}

JavaScript

/*
Hexagon Dimensions
Width: 100%;
Height: 86.603% of width (~13:15)
X-Overlap: 25% of width
Y-Overlap: 0
X-Offset: 0 (odd rows)
Y-Offset: 50% of height (odd columns)
https://en.wikipedia.org/wiki/Euclidean_tilings_by_convex_regular_polygons
https://en.wikipedia.org/wiki/Nearest_neighbor_search
https://en.wikipedia.org/wiki/Quadtree
*/

var tiles = [];
var grid_width = 90; // tile width minus x-overlap
var grid_height = 104; // tile height minus y-overlap
var shim = 52; // y-offset

// Columns
for (var x = 0; x < 10; x++) {
  var col = tiles[x] || (tiles[x] = []);
  col.shim = (x & 1) ? shim : 0;
  col.hasShim = !!col.shim;

  // Rows
  for (var y = 0; y < 10; y++) {
    var $span = tiles[x][y] = $('<span></span>')
      .data('x', x)
      .data('y', y)
      .data('col', col)
      .css('left', x * grid_width)
      .css('top', y * grid_height + col.shim);

    var type = Math.floor(Math.random() * 4);
    switch (type) {
      case 0:
        $span.addClass('level3');
        break;
      case 1:
        $span.addClass('level2');
        break;
      case 2:
        $span.addClass('level1');
        break;
      default:
        $span.addClass('level0')
    }

    if (type < 3) {
      var charge = Math.floor(Math.random() * 9 + 1);
      $span
        .html(charge)
        .data('charge', charge);
    } else {
      $span
        .data('charge', 0);
    }

    $span.appendTo('#wrap3');
  }
}

//$('body').html('<pre>' + JSON.stringify({'var':myVar}, null, 2) + '</pre>');
$('span').click(function(event) {
  var $this = $(this);
  // Pan screen
  if ($this.hasClass('level0')) {
    var x = event.pageX - $('#wrap1').width() / 2;
    var y = event.pageY - $('#wrap1').height() / 2;
    $('#wrap2').animate({
      'top': '-=' + y,
      'left': '-=' + x
    }, 500);
  }
  // Update Board
  else {
    // Origin Tile
    var data = $this.data();
    if( data.charge > 1 ) {
    	data.charge--;
      $this.html(data.charge)
        .toggleClass('active');
    } else {
 ...