saifuddin778/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Rhombic Chess + some interaction.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
	body {
    text-align: center;
	}

	polygon {
		stroke-width: 1;
		stroke: black;
	}

	.top {
		fill: #CFD8DC;
	}

	.left {
		fill: #90a4ae;
	}

	.right {
		fill: whitesmoke;
	}
</style>
<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
		function splt(items){
			items = items.map(function(d){
				return d.split(",").map(function(e){
					return +e;
				});
			});
			return items;
		}

		function get_polygon_points(points) {
			var pts = "";
			for (var i = 0; i<points.length; i++){
				for (var k=0; k<points[i].length; k++){
					if (k < points[i].length-1){
						pts += points[i][k]+",";
					}
					else{
						pts += points[i][k]+" ";
					}
				}
			}
			return pts;
		}

		function get_rs(x, y){
			var rs = [
				{
					pp: [
						[x, y],
						[x+delta, y-(delta/2)],
						[x+(delta*2), y],
						[x+delta, y+(delta/2)]
					],
					class: "top",

				},
				{
					pp: [
						[x, y],
						[x+delta, y+(delta/2)],
						[x+delta, y+(delta*1.5)],
						[x, y+delta],
					],
					class: "left",
				},
				{
					pp: [
						[x+delta, y+(delta*1.5)],
						[x+delta, y+(delta/2)],
						[x+(delta*2), y],
						[x+(delta*2), y+(delta)],

					],
					class: "right",
				}
			];
			return rs;
		}

		var width = 960;
		var height = 500;
		var delta = 30;
		var x = 0;
		var y = -delta*1.5;

		var space = d3.select("body").append("svg").attr("width", width).attr("height", height).append("g");
		for (var i=0; i<20; i++){
			var ind = i % 2;
			for (var j = 0; j<30; j++){
				var spc = space.append("g").attr("class", "spc").attr("id", i+"_"+j);
				var rs = get_rs(x, y);
				for (var k=0; k<rs.length; k++){
					spc.append("polygon").attr("points", get_polygon_points(rs[k].pp)).attr("class", rs[k].class);
				}
				x += delta*2;
			}
			x = ind * -delta;
			y += delta*1.5;
		}

		d3.selectAll(".spc")
		.on("click", function(){
			var items = d3.select(this)[0][0].childNodes;
			d3.selectAll(items)
			.each(function(){
				var cls = d3.select(this).attr("class");
				var pp = d3.select(this);
				var pts = splt(pp.attr("points").split(" ").filter(function(d){return d.length}));
				if (cls == "left"){
					pts[0][1] = pts[0][1]-(delta);
					pts[1][1] = pts[1][1]-(delta);
				}
				if (cls == "right"){
					pts[1][1] = pts[1][1]-(delta);
					pts[2][1] = pts[2][1]-(delta);
				}
				if (cls == "top"){
				  pts[0][1] = pts[0][1]-(delta);
					pts[1][1] = pts[1][1]-(delta);
					pts[2][1] = pts[2][1]-(delta);
					pts[3][1] = pts[3][1]-(delta);
				}
				pp.transition().duration(300).attr("points", get_polygon_points(pts));
			});
			d3.event.stopPropagation();
		});
	</script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body {
	text-align: center;
	}

	polygon {
	stroke-width: 1;
	stroke: black;
	}

	.top {
	fill: #CFD8DC;
	}

	.left {
	fill: #90a4ae;
	}

	.right {
	fill: whitesmoke;
	}
	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	function splt(items){
	items = items.map(function(d){
	return d.split(",").map(function(e){
	return +e;
	});
	});
	return items;
	}

	function get_polygon_points(points) {
	var pts = "";
	for (var i = 0; i<points.length; i++){
	for (var k=0; k<points[i].length; k++){
	if (k < points[i].length-1){
	pts += points[i][k]+",";
	}
	else{
	pts += points[i][k]+" ";
	}
	}
	}
	return pts;
	}

	function get_rs(x, y){
	var rs = [
	{
	pp: [
	[x, y],
	[x+delta, y-(delta/2)],
	[x+(delta*2), y],
	[x+delta, y+(delta/2)]
	],
	class: "top",

	},
	{
	pp: [
	[x, y],
	[x+delta, y+(delta/2)],
	[x+delta, y+(delta*1.5)],
	[x, y+delta],
	],
	class: "left",
	},
	{
	pp: [
	[x+delta, y+(delta*1.5)],
	[x+delta, y+(delta/2)],
	[x+(delta*2), y],
	[x+(delta*2), y+(delta)],

	],
	class: "right",
	}
	];
	return rs;
	}

	var width = 960;
	var height = 500;
	var delta = 30;
	var x = 0;
	var y = -delta*1.5;

	var space = d3.select("body").append("svg").attr("width", width).attr("height", height).append("g");
	for (var i=0; i<20; i++){
	var ind = i % 2;
	for (var j = 0; j<30; j++){
	var spc = space.append("g").attr("class", "spc").attr("id", i+"_"+j);
	var rs = get_rs(x, y);
	for (var k=0; k<rs.length; k++){
	spc.append("polygon").attr("points", get_polygon_points(rs[k].pp)).attr("class", rs[k].class);
	}
	x += delta*2;
	}
	x = ind * -delta;
	y += delta*1.5;
	}

	d3.selectAll(".spc")
	.on("click", function(){
	var items = d3.select(this)[0][0].childNodes;
	d3.selectAll(items)
	.each(function(){
	var cls = d3.select(this).attr("class");
	var pp = d3.select(this);
	var pts = splt(pp.attr("points").split(" ").filter(function(d){return d.length}));
	if (cls == "left"){
	pts[0][1] = pts[0][1]-(delta);
	pts[1][1] = pts[1][1]-(delta);
	}
	if (cls == "right"){
	pts[1][1] = pts[1][1]-(delta);
	pts[2][1] = pts[2][1]-(delta);
	}
	if (cls == "top"){
	pts[0][1] = pts[0][1]-(delta);
	pts[1][1] = pts[1][1]-(delta);
	pts[2][1] = pts[2][1]-(delta);
	pts[3][1] = pts[3][1]-(delta);
	}
	pp.transition().duration(300).attr("points", get_polygon_points(pts));
	});
	d3.event.stopPropagation();
	});
	</script>
	</body>