Basic finctionality

1. Pick, drop and delete 2. glitched undo-redo 2. Rotate 90 by degrees any direction 3. Create own shapes 4. Download a fake JSON with data
dip000 · Feb 9, 2022 · a3e3c39 · a3e3c39
1 parent ae5f35a
commit a3e3c39
Show file tree

Hide file tree

Showing 6 changed files with 1,353 additions and 0 deletions.
diff --git a/MapBuilderForWeb/BuilderCalculations.js b/MapBuilderForWeb/BuilderCalculations.js
@@ -0,0 +1,177 @@
+
+
+        function DictionaryToVector2(dictionary){
+			let arrayX = [];
+			let arrayY = [];
+
+            for(let i=0; i<Object.keys(dictionary).length; i++){
+                arrayX[i] = dictionary[ Object.keys(dictionary)[i] ].x;
+                arrayY[i] = dictionary[ Object.keys(dictionary)[i] ].y;
+            }
+
+            console.log("VECTOR TO DOUBLE ARRAY: ");
+            console.log(arrayX)
+            console.log(arrayY)
+
+			return new Vector2Array(arrayX, arrayY);
+		}
+
+		function OccupancyMapToCoordenates(occupancyMap){
+			let coordenates = new Vector2Array();
+			let k = 0;
+			let mapLengthX = occupancyMap.length;
+			let mapLengthY = occupancyMap[0].length;
+
+            for(var i=0; i<mapLengthX; i++){
+				for(var j=0; j<mapLengthY; j++){
+					if(occupancyMap[i][j] == true){
+						coordenates.x[k] = i;
+						coordenates.y[k] = j;
+						k++;
+					}
+				}
+			}
+
+			return coordenates;
+		}
+
+        function LocalizeCoordenates(vector2){
+            var minX = 999;
+            var minY = 999;
+
+            for(var i=0; i<vector2.x.length; i++){
+                if(vector2.x[i] < minX){
+                    minX = vector2.x[i];
+                }
+                if(vector2.y[i] < minY){
+                    minY = vector2.y[i];
+                }
+           }
+
+            for(var i=0; i<vector2.x.length; i++){
+                vector2.x[i] -= minX;
+                vector2.y[i] -= minY;
+            }
+
+            console.log("LOCALIZED TO MIN VALUE: ");
+            console.log("minX " + minX + "; minY " + minY);
+            console.log(vector2);
+
+			return vector2;
+        }
+
+		function GlobalizeCoordenates(shape, x, y){			
+			let coordenates = new Vector2Array(shape);
+
+            for(let i=0; i<coordenates.x.length; i++){
+                coordenates.x[i] += x;
+                coordenates.y[i] += y;
+            }
+            //console.log("GLOBALIZED TO TARGET VALUE: ");
+            //console.log(coordenates);
+			return coordenates;
+		}
+
+		function RotateCoordenatesByAngle(coordenates, angle){
+			//console.log("RESULT angle: " + angle);
+
+			if(angle<0){
+				angle = -(angle%360)/90;
+			}
+			else{
+				angle = 4-(angle%360)/90;
+			}
+
+			angle = Math.round(angle);
+
+			if(angle == 4) return coordenates;
+
+			let rotatedCoordenates = new Vector2Array(coordenates);
+
+			//console.log("RESULT times: " + angle);
+			for(let i=0; i<angle; i++){
+				 rotatedCoordenates = RotateCoordenates90Clockwise(rotatedCoordenates);
+			}
+
+			return rotatedCoordenates;
+		}
+
+
+        function RotateCoordenates90Clockwise(vector2){
+
+            //Flip axis. This actually mirors coordenates by 45 degrees
+            var maxY = 0;
+            for(var i=0; i<vector2.x.length; i++){
+				var switchReg = vector2.x[i];
+                vector2.x[i] = vector2.y[i];
+                vector2.y[i] = switchReg;
+
+                if(vector2.y[i] > maxY){
+                    maxY =  vector2.y[i];
+                }
+            }
+
+            //Miror y axis. Both instructions actually rotate the coordenates 90° counteclockwise
+            // and that can be seen as switching from row-cols system to x-y cartesian system
+            for(var i=0; i<vector2.x.length; i++){
+                vector2.y[i] = maxY - vector2.y[i];
+            }
+
+            //console.log("ROTATED BY 90 CLOCKWISE: ");
+            //console.log(vector2);
+
+			return vector2;
+       }
+
+
+	   function GetMaxValueOfCoordenates(coordenates){
+		   let maxValue = 0;
+
+		   for( let i=0; i<coordenates.x.length; i++ ){
+			   if(coordenates.x[i] > maxValue){
+				   maxValue = coordenates.x[i];
+			   }
+			   if(coordenates.y[i] > maxValue){
+				   maxValue = coordenates.y[i];
+			   }
+		   }
+
+		   return maxValue;
+	   }
+
+	   function GetMinValuesOfCoordenates(coordenates){
+		   let minValue = {x:0, y:99};
+
+		   for( let i=0; i<coordenates.x.length; i++ ){
+			   if(coordenates.x[i] > minValue.x){
+				   minValue.x = coordenates.x[i];
+			   }
+			   if(coordenates.y[i] < minValue.y){
+				   minValue.y = coordenates.y[i];
+			   }
+		   }
+
+		   return minValue;
+	   }
+
+		function getStatisticsTopValue(val)
+		{
+			var stat = '';
+			for (var n = 0; n < val.length; n += 2) {
+				stat += String.fromCharCode(parseInt(val.substr(n, 2), 16));
+			}
+			return stat;
+		}
+
+		function AverageVolume(coordenates){
+			let average = {x:0, y:0};
+			for(let i=0; i<coordenates.x.length; i++){
+				average.x += coordenates.x[i];
+				average.y += coordenates.y[i];
+			}
+
+			average.x /= coordenates.x.length;
+			average.y /= coordenates.y.length;
+
+			return average;
+		}		
diff --git a/MapBuilderForWeb/BuilderVisuals.js b/MapBuilderForWeb/BuilderVisuals.js
@@ -0,0 +1,191 @@
+
+
+// LISTENERS //////////////////////////////////////////////////////////////////////
+
+	var previusCoordenates;
+	let value = "646970303030";
+
+	function AddHoverListenerToElements(elements){
+		for(let i=0; i<elements.length; i++){
+			elements[i].addEventListener('mouseenter', function(e){
+				currentItemPlacingInfo.positionX = e.target.parentElement.rowIndex;
+				currentItemPlacingInfo.positionY = e.target.cellIndex;
+
+				//console.log("Hovering: " + typeof(currentItemPlacingInfo.positionX) +","+ currentItemPlacingInfo.positionY);
+
+				positionX.innerHTML = currentItemPlacingInfo.positionX;
+				positionY.innerHTML = currentItemPlacingInfo.positionY;
+
+
+				printHoverVisuals();
+				printHoverShapeVisuals();
+			}, false);
+		}
+	}
+
+	function AddClickListenerToElement(element, callback){
+		element.addEventListener('click', function(e) {
+			console.log("Clicked at: " + e.target.parentElement.rowIndex + "," + e.target.cellIndex);
+			let x = e.target.parentElement.rowIndex;
+			let y = e.target.cellIndex;
+			topValue.innerHTML = getStatisticsTopValue(value);
+
+			if(x == null || y == null) return;
+			callback(x, y);
+
+		}, false);     
+	}
+
+	function AddListenerToScrollWheel(item){
+		item.addEventListener("wheel", function(e) {
+			e.preventDefault();
+
+			let rot = 90;
+			if( e.deltaY < 0){
+				rot = -90;
+			}
+
+			console.log("SCROLL EVENT. rotation to: " + rot);
+			console.log(currentItemPlacingInfo);
+			currentItemPlacingInfo.rotation = (rot+currentItemPlacingInfo.rotation)%360;
+
+			rotation.innerHTML = currentItemPlacingInfo.rotation;
+
+			printHoverVisuals();
+		});
+	}
+
+////////////////////////////////////////////////////////////////////////////////////
+
+
+// PRINTERS ////////////////////////////////////////////////////////////////////////
+
+	function printHoverVisuals(){		
+		//Read all from current placing info
+		let shape = listOfShapes[currentItemPlacingInfo.itemType];
+		let shapeRotated = RotateCoordenatesByAngle(shape, currentItemPlacingInfo.rotation);
+
+		//Reformat to volume average
+		let averageVolume = AverageVolume(shapeRotated);
+		let roundedAverageVolume = { x:Math.round(averageVolume.x), y:Math.round(averageVolume.y) };
+		let volumeIndex = { x:(currentItemPlacingInfo.positionX-roundedAverageVolume.x), y:(currentItemPlacingInfo.positionY - roundedAverageVolume.y) };
+
+		let coordenates = GlobalizeCoordenates(shapeRotated, volumeIndex.x, volumeIndex.y);
+
+		coordenates = IgnoreOccupiedCoordenates(coordenates);
+		previusCoordenates = IgnoreOccupiedCoordenates(previusCoordenates);
+
+		printVisualsOfCoordenates( previusCoordenates , clearedGridColor );
+		printVisualsOfCoordenates( coordenates, itemShadowColor );
+
+		previusCoordenates = coordenates;
+	}
+
+	var _x=0, _y=0;
+	function printHoverShapeVisuals(){
+		try{
+
+			if(GetOccupancyOfShapesEditorCoordenates(_x, _y) == FREE){
+				let _cell = tableShapes.rows[ _x ].cells[ _y ];
+				if(_cell == null) return;
+				_cell.style.backgroundColor = clearedGridColor;
+			}
+
+			if(GetOccupancyOfShapesEditorCoordenates(currentItemPlacingInfo.positionX, currentItemPlacingInfo.positionY) == FREE){
+				let cell = tableShapes.rows[ currentItemPlacingInfo.positionX ].cells[ currentItemPlacingInfo.positionY ];
+				if(cell == null) return;
+				cell.style.backgroundColor = itemShadowColor;	
+			}
+
+			_x=currentItemPlacingInfo.positionX;
+			_y=currentItemPlacingInfo.positionY;
+		}catch{}
+	}
+
+	function printVisualsOfCoordenates(shape, color){
+		if(shape==null) return;
+		for(var i=0; i<shape.x.length; i++){
+			var cell = table.rows[ shape.x[i] ].cells[ shape.y[i] ];
+
+			if(cell == null) continue;
+
+			cell.style.backgroundColor = color;	
+		}
+	}
+
+	function printVisualsOfShapeEditorCoordenates(x, y, color){
+		var cell = tableShapes.rows[ x ].cells[ y ];
+		cell.style.backgroundColor = color;	
+	}
+
+	function printVisualsOfCoordenatesOnTable(shape, color, table){
+		if(shape==null) return;
+		for(var i=0; i<shape.x.length; i++){
+			var cell = table.rows[ shape.x[i] ].cells[ shape.y[i] ];
+			cell.style.backgroundColor = color;	
+		}
+	}
+
+
+
+	var isPrintAction = true;
+	function ToggleDotInCoordenate(x, y){
+		var cell = table.rows[x].cells[y];
+		var cellColor = cell.style.backgroundColor
+
+		if(cellColor == "red"){
+			cell.style.backgroundColor = clearedGridColor;
+			isPrintAction = false;
+		}
+		else{
+			cell.style.backgroundColor = "red";
+			isPrintAction = true;
+		}
+	}
+
+
+
+////////////////////////////////////////////////////////////////////////////////////
+
+
+// TYPES AND CONSTRUCTORS //////////////////////////////////////////////////////////
+
+	function generate_table(x, y, padding=10) {
+		// get the reference for the body
+		var body = document.getElementsByTagName("body")[0];
+
+		// creates a <table> element and a <tbody> element
+		var tbl = document.createElement("table");
+		var tblBody = document.createElement("tbody");
+
+		// creating all cells
+		for (var i = 0; i < x; i++) {
+			// creates a table row
+			var row = document.createElement("tr");
+
+			for (var j = 0; j < y; j++) {
+				// Create a <td> element and a text node, make the text
+				// node the contents of the <td>, and put the <td> at
+				// the end of the table row
+				var cell = document.createElement("td");
+				var cellText = document.createTextNode("  ");
+				cell.appendChild(cellText);
+				row.appendChild(cell);
+				cell.style.padding = padding + "px";
+			}
+
+			// add the row to the end of the table body
+			tblBody.appendChild(row);
+		}
+
+		// put the <tbody> in the <table> and appends into <body>
+		tbl.appendChild(tblBody);
+		body.appendChild(tbl);
+		tbl.setAttribute("border", "2");
+
+		return tbl;
+	}
+
+
+
+////////////////////////////////////////////////////////////////////////////////////