Tile rotate test

by Jake Cattrall

HTML

<div id="map"></div>
<!-- http://www.reddit.com/r/learnmath/comments/2jwqo3/numbers_grid_math_problem/ -->

CSS

#map {
  width: 416px;
  height: 338px;
}

.tile {
  float: left;
  background-color: red;
  padding: 1px;
  line-height: 26px;
  text-align: center;
  cursor: pointer;
}
.tile:hover .tile-inner {
  background-color: green;
  color: white;
}

.tile-inner {
  width: 30px;
  height: 24px;
  background-color: white;
}

.purple .tile-inner {
  background-color: purple;
  color: white;
}
.purple:hover .tile-inner {
  background-color: purple;
  color: white;
}

.red .tile-inner {
  background-color: red;
  color: white;
}
.red:hover .tile-inner {
  background-color: red;
  color: white;
}

CoffeeScript

mapSize = 13
midCell = Math.floor (mapSize * mapSize) / 2

numberToCoord = (num) ->
    y = 0
    half = Math.floor(mapSize / 2)
    while num >= mapSize
        num -= mapSize
        y++
    return { x: num - half, y: y - half }

getRelatedTiles = (num) ->
    point = numberToCoord(num)
    points = (getRotation(i, point) for i in [4..1])
    $(".tile#{p}").addClass "red" for p in points

getRotation = (num, point) ->
    switch num
        when 1 then return midCell + mapSize * (point.y) + point.x
        when 2 then return midCell + mapSize * point.x - (point.y)
        when 3 then return midCell - mapSize * (point.y) - point.x
        when 4 then return midCell - mapSize * point.x + (point.y)

map = ""
for i in [0...(mapSize * mapSize)]
    purple = (if i % 14 and i % 12 then "" else "purple")
    map += "<div class='tile tile#{i} #{purple}' data-index='#{i}'><div class='tile-inner'>#{i}</div></div>"
$('#map').html map

$('.tile:not(.purple)').hover ->
    $('.tile').removeClass "red"
    getRelatedTiles parseInt($(@).attr('data-index'))