JSFiddle - React, Tailwind, and code Playground

by Snedden Gonsalves

HTML

<body>
<svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1500" height="1300" xmlns:xlink="http://www.w3.org/1999/xlink">
	  
			
		</svg>
</body>

CSS

body {
				font-family: "PT Sans", "Arial", sans-serif;
			}

			.hex {
			  cursor: pointer;
			  fill-opacity: 0.4;
			  stroke: #000;
			  stroke-width: 1;
			}

			#color-fill .hex {
			  fill: #ffff00;
			}

			.hex:hover {
			  fill-opacity: 1;
			  stroke: #ff0000;
			  stroke-width: 5;
			  //transform: scale(0.9);
			  //-webkit-transform: scale(0.9);
			  //transform-origin: 50% 50%;
			  //-webkit-transform-origin: 50% 50%;
			}

			.hex {
			  transition: transform, fill-opacity, stroke-width;
			  -webkit-transition: transform, fill-opacity, stroke-width;
			  transition-duration: 1s;
			  -webkit-transition-duration: 1s;
			}

JavaScript

var hexMeshObj;
var svgns = "http://www.w3.org/2000/svg";
var hexArray=new Array();

window.onload=function() {
			console.log('main');
			side=35;
			hexMeshObj=new hexMesh();
			hexMeshObj.drawOver();
			
			
		}


function hexMesh(){
	 var side=25;
	 console.log('hexMesh');
	 var drawnCentroids=[];  //array of centroids of hex which are drawn on the scree
	 var drawnAroundCentroids=[];	//array of centroid of hex which have hex drawn ALL around them 
	 var ii=0;	

	var rightEdge=screen.width;
	var leftEdge=0;
	var topEdge=0;
	var botEdge=screen.height;	
	var svg=document.getElementsByTagName('svg')[0];   //draw around svg
	
	
	
		
		//draw hexagons over the defined edges
	function drawOver(){
		var verticalBlock=1;       			//first vertical block of hexagons
		var offSet=side*(1.73/2);  			//offset to the next block to align the hexagons
		hexArray[0]=new Hexagon(0,0,side,0);	// starting hex
		
		for(i=hexArray[0].cx;i<rightEdge;i=i+side*1.5){
		verticalBlock++;
			for(j=(verticalBlock%2==0)?(hexArray[0].cy):(hexArray[0].cy+offSet);j<botEdge;j=j+side*1.73){
				hexArray[verticalBlock-1]=new Hexagon(i,j,side,verticalBlock-1);
				console.log(i,j);
				hexArray[verticalBlock-1].makeHex(svg,svgns);
			}
				
		}
	}
		
		function drawHexAround(cent){
			var rightEdgeReached=false;
			var botEdgeReached=false;
			
				//console.log(screen.width);
				rightEdge=1300;
			
				botEdge=700;
			
			
				
			if(ii<20){
			ii++;
			
				var xRight;// y axiom from centroid of the  hexs' RIGHT of current
				var xLeft;//  y axiom from centroid of the  hexs' left of current
				var yMidTop;//  x axiom from centroid of the  hexs' sided-top of current
				var yMidBot;//  x axiom from centroid of the  hexs' sided-bottom of current
				var yTop;  // x axiom from the centroid of the top hex from current
				var yBot;  // x axiom from the centroid of the bot hex from current	
				var...