BoardGame

by Edgar Martinez

HTML

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<div class='canvas' id='game'></div>

CSS

.canvas {
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

JavaScript

class BoardGame {
    constructor(obj) {
		  var defaultprop={
			  viewport:{
					width:800,
					height:800,
				},
				map:{
					width:500,
					height:500,
					aleatorio:true,
					size:32,
					json:{}
				}
			};
			this.props = Object.assign(defaultprop, obj);
			
		  if(!this.props.hasOwnProperty("id")){
			   throw new BoardGameExceptions('Falta el id del elemento del HTML...');
			}else{
					var canvas =  document.createElement("canvas");
					canvas.setAttribute("id", "canvas_"+this.props.id);
					canvas.setAttribute("width",this.props.viewport.width);
					canvas.setAttribute("height",this.props.viewport.height);
					if(this.props.map.aleatorio){
						this.randomMap();
					}else{
					//load json file map
					}
					this.renderMap(canvas);
					this.el = document.getElementById(this.props.id);
					this.el.appendChild(canvas);
			}
    }
		renderMap(canvas){
		
		  var app = this;
			var elementCanvas=document.getElementById("canvas_"+app.props.id);
			
			app.canvas = new fabric.Canvas(canvas, {
				selection: false
			});
			var points=app.regularPolygonPoints(6,app.props.map.size);
			
			if(Object.keys(app.map).length>0){
				for(var x in app.map){
					var valy=app.map[x];
					for(var y in valy){
						var val=valy[y];
						if(val.valor==1){
						console.log(x,y);
							var myPoly = new fabric.Polygon(points, {
								stroke: 'red',
								left: x*app.props.map.size,
								top: y*app.props.map.size,
								fill:'rgba(0,0,0,0)'
								// strokeWidth: 2,
								//strokeLineJoin: 'bevil'
							},true);
							app.canvas.add(myPoly);
						}
					}		
				}
			}
			
		}
		randomMap(){
		  this.map = {};
		  for(var x=0; x <= (this.props.map.width/this.props.map.size); x++){
			 
				 if(!this.map.hasOwnProperty(x)){
				   this.map[x]={};
				 }
				 for(var y=0; y <= (this.props.map.height/this.props.map.size); y++){
					 if(!this.map.hasOwnProperty(y)){
						 this.map[x][y]={};
					 }
				  var val =...