forgems · January 13, 2016 21:23
diff --git a/vuehex.html b/vuehex.html
 <html>
  <head>
    <title>Hex grid with vue.js</title>
    <style>
        .tile:hover polygon {
          fill: hsl(0, 50%, 70%);
        }
        .tile.reveal {
          animation: fuck 3s linear 1;
        }
        .tile polygon {
          pointer-events: visiblePainted;
          fill: hsl(60, 10%, 95%);
          stroke: hsl(0, 0%, 70%);
          stroke-width: 0.5;
        }
        .tile text {
          font-family: sans-serif;
          font-size: 10px;
          text-anchor: middle;
        }
        svg {
          position: absolute;
          top: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/vue/1.0.14/vue.min.js"></script>
  </head>
  <body>
    <svg id="map">
      <g v-for="col in cols">
        <g class="tile" v-for="row in rows" :transform="tileTransform(col, row)">
          <polygon :points="points"></polygon>
        </g>
      </g>
    </svg>
    <script type="text/javascript">
      new Vue({
        el: "#map",
        data: {
          radius: 20,
          cols: 20,
          rows: 20
        },
        computed: {
          points: function() {
            var out = []
            var step = Math.PI / 3;
            for (var i = 0; i < 6; i++) {
              out.push([this.radius * Math.cos(i * step), this.radius * Math.sin(i * step)].join(","))
            }
            console.log(out);
            return out.join(" ");
          }
        },
        methods: {
          tileTransform: function(y, x) {
            var SIZE = this.radius;
            var HEIGHT = Math.sqrt(3) * SIZE;
            return "translate(" + [SIZE + x * SIZE * 3 / 2, HEIGHT / 2 + HEIGHT * (x % 2) / 2 + y * HEIGHT].join(',') + ")";
          }
        }
      });
    </script>
  </body>
 </html>
	<html>
	<head>
	<title>Hex grid with vue.js</title>
	<style>
	.tile:hover polygon {
	fill: hsl(0, 50%, 70%);
	}
	.tile.reveal {
	animation: fuck 3s linear 1;
	}
	.tile polygon {
	pointer-events: visiblePainted;
	fill: hsl(60, 10%, 95%);
	stroke: hsl(0, 0%, 70%);
	stroke-width: 0.5;
	}
	.tile text {
	font-family: sans-serif;
	font-size: 10px;
	text-anchor: middle;
	}
	svg {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	}
	</style>
	<script src="https://cdn.jsdelivr.net/vue/1.0.14/vue.min.js"></script>
	</head>
	<body>
	<svg id="map">
	<g v-for="col in cols">
	<g class="tile" v-for="row in rows" :transform="tileTransform(col, row)">
	<polygon :points="points"></polygon>
	</g>
	</g>
	</svg>
	<script type="text/javascript">
	new Vue({
	el: "#map",
	data: {
	radius: 20,
	cols: 20,
	rows: 20
	},
	computed: {
	points: function() {
	var out = []
	var step = Math.PI / 3;
	for (var i = 0; i < 6; i++) {
	out.push([this.radius * Math.cos(i * step), this.radius * Math.sin(i * step)].join(","))
	}
	console.log(out);
	return out.join(" ");
	}
	},
	methods: {
	tileTransform: function(y, x) {
	var SIZE = this.radius;
	var HEIGHT = Math.sqrt(3) * SIZE;
	return "translate(" + [SIZE + x * SIZE * 3 / 2, HEIGHT / 2 + HEIGHT * (x % 2) / 2 + y * HEIGHT].join(',') + ")";
	}
	}
	});
	</script>
	</body>
	</html>