Vue - AoE2 DE RMS preview

by PhilQ

HTML

<div id="app">
	<div class="tile-row" v-for="row in tiles">
		<div class="tile" v-for="tile in row" :title="tile.id">
			<div class="terrain" v-for="t in tile.terrain" :class="t[1]"></div>
		</div>
	</div>
</div>

SCSS

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

$tile_size: 5px;

#app {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #333;
	padding: 20px;
	line-height: 0;
}
.tile-row {
	display: inline-block;
	width: 100%;
}
.tile {
	position: relative;
	display: inline-block;
	width: ($tile_size + 1px);
	height: ($tile_size + 1px);
}
.terrain {
	position: absolute;
	top: 1px;
	left: 1px;
	display: inline-block;
	width: $tile_size;
	height: $tile_size;
	background: #aaa;

	&.GRASS3 {
		background: #00A900;
	}
}

Vue

new Vue({
  el: "#app",
  data: {
		mapsize: [ 120, 120 ],
    tiles: []
  },
	computed: {},
  methods: {
  	createMap: function(){
			for (var y = 0; y < this.mapsize[1]; y++) {
				var ar = [];
				for (var x = 0; x < this.mapsize[0]; x++) {
					ar.push({
						"id": x.toString().padStart(3, '0') + 'x' + y.toString().padStart(3, '0'),
						"terrain": []
					});
				}
				this.tiles.push(ar);
			}
    },
		land_BaseTerrain: function(terrain){
			this.tiles.forEach((r, y, rows) => {
				r.forEach((t, x) => {
					this.tiles[ y ][ x ]['terrain'].push(['full', terrain]);
				});
			});
		},
  },
	mounted() {
		this.$nextTick(function () {
			this.createMap();
			
			this.land_BaseTerrain('GRASS3');
		})
	}
})