From a3e3c39f63ed6f15a8c1bed90a555690191c10ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A1n?= <58742147+dip000@users.noreply.github.com>
Date: Tue, 8 Feb 2022 19:10:07 -0600
Subject: [PATCH] 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
---
 MapBuilderForWeb/BuilderCalculations.js | 177 ++++++++++++
 MapBuilderForWeb/BuilderVisuals.js      | 191 +++++++++++++
 MapBuilderForWeb/MapBuilder.js          | 360 ++++++++++++++++++++++++
 MapBuilderForWeb/MapBuilderForWeb.html  | 332 ++++++++++++++++++++++
 MapBuilderForWeb/MapBuilderStyles.css   | 184 ++++++++++++
 MapBuilderForWeb/ShapeBuilder.js        | 109 +++++++
 6 files changed, 1353 insertions(+)
 create mode 100644 MapBuilderForWeb/BuilderCalculations.js
 create mode 100644 MapBuilderForWeb/BuilderVisuals.js
 create mode 100644 MapBuilderForWeb/MapBuilder.js
 create mode 100644 MapBuilderForWeb/MapBuilderForWeb.html
 create mode 100644 MapBuilderForWeb/MapBuilderStyles.css
 create mode 100644 MapBuilderForWeb/ShapeBuilder.js

diff --git a/MapBuilderForWeb/BuilderCalculations.js b/MapBuilderForWeb/BuilderCalculations.js
new file mode 100644
index 0000000..23ada5c
--- /dev/null
+++ 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;
+		}		
\ No newline at end of file
diff --git a/MapBuilderForWeb/BuilderVisuals.js b/MapBuilderForWeb/BuilderVisuals.js
new file mode 100644
index 0000000..de32ac1
--- /dev/null
+++ 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;
+	}
+	
+
+	
+////////////////////////////////////////////////////////////////////////////////////
\ No newline at end of file
diff --git a/MapBuilderForWeb/MapBuilder.js b/MapBuilderForWeb/MapBuilder.js
new file mode 100644
index 0000000..1421d20
--- /dev/null
+++ b/MapBuilderForWeb/MapBuilder.js
@@ -0,0 +1,360 @@
+
+        var shapeCoordenates = [];
+        function RegisterCoordenatesInMap(x, y){
+            if(isPrintAction){
+                shapeCoordenates[x+","+y] = {x,y};
+            }
+            else{
+                delete shapeCoordenates[x+","+y]; 
+            }
+            console.log(shapeCoordenates);
+        }
+
+  
+		var occupancyMap;
+		const OCCUPIED = true;
+		const FREE = false;
+		function GetOccupancyOfCoordenates(coordenates){
+			//If at least one coordenate is occupied, then return occupied
+			try{
+				for(var i=0; i<coordenates.x.length; i++){
+					if(occupancyMap[coordenates.x[i]][coordenates.y[i]] == OCCUPIED){
+						console.log("Coordenates are occupied:");
+						console.log(coordenates);
+						return OCCUPIED;
+					}
+				}
+			} catch {return OCCUPIED;}
+			console.log("Coordenates are unoccupied:");
+			console.log(coordenates);
+			return FREE;
+		}
+		
+
+		
+		function UpdateOccupancy(coordenates, OCCUPIED){
+            for(var i=0; i<coordenates.x.length; i++){
+				occupancyMap[coordenates.x[i]][coordenates.y[i]] = OCCUPIED;
+			}
+			
+			console.log("UPDATED OCCUPANCY MAP:");
+			console.log(occupancyMap);
+		}
+		
+		var historyOfPlacements = [];
+		var historyIndex = 0;
+		function RegisterHistoryOfPlacements(itemPlacingInfo){
+			itemPlacingInfo.indexInHistory = historyIndex;
+			historyOfPlacements[historyIndex++] = new ItemPlacingInfo(itemPlacingInfo);
+			console.log("Registered in history. History:");
+			console.log(historyOfPlacements);
+		}
+		
+		function DeleteFromHistoryOfPlacements(itemPlacingInfo){
+			historyOfPlacements[itemPlacingInfo.indexInHistory].undoFromHistory();
+			console.log("Undone from history. History:");
+			console.log(historyOfPlacements);
+		}
+		
+		function UndoActionFromHistory(itemPlacingInfo){
+			if(itemPlacingInfo == null) return;
+		
+			itemPlacingInfo.deleted = ! (itemPlacingInfo.deleted);
+			console.log("Undone Last action from history. History:");
+			console.log(historyOfPlacements);
+			
+			if(itemPlacingInfo.deleted == true){
+				return ActionTypes.deleted;
+			}
+			else{
+				return ActionTypes.replaced;
+			}
+		}
+
+		function GetInformationFromHistoryIndex(index){
+			if(index < 0) return null;
+			if(index > historyOfPlacements.length-1) return null;
+			return historyOfPlacements[index];
+		}
+		
+		
+		function FindHistoryInfoAtCoordenates(coordenate){
+			for(var i=0; i<historyOfPlacements.length; i++){
+			
+				//Skip the search if it was marked as deleted
+				if(historyOfPlacements[i].deleted == true){
+					continue;
+				}
+				
+				let historyCoordenates = historyOfPlacements[i].coordenates;
+				
+				for(var j=0; j<historyCoordenates.x.length; j++){
+					let sameCoordenateX = (historyCoordenates.x[j] == coordenate.x[0]);
+					let sameCoordenateY = (historyCoordenates.y[j] == coordenate.y[0]);
+					
+					if(sameCoordenateX && sameCoordenateY){
+						return historyOfPlacements[i];
+					}
+				}
+			}
+
+			return null;
+		}
+
+
+
+		function IgnoreOccupiedCoordenates(coordenates){
+			if(coordenates == null) return null;
+			
+			newCoordenates = new Vector2Array();
+			let j=0;
+			let mapLengthX = occupancyMap.length;
+			let mapLengthY = occupancyMap[0].length;
+			
+			for(let i=0; i<coordenates.x.length; i++){
+				
+				try{
+					if(occupancyMap[coordenates.x[i]][coordenates.y[i]] == FREE){
+						newCoordenates.x[j] = coordenates.x[i];
+						newCoordenates.y[j] = coordenates.y[i];
+						j++;
+					}
+				} catch{}
+			}
+			
+			//console.log(newCoordenates);
+			return newCoordenates;
+		}
+	
+//REFORMAT AND OUTPUT ///////////////////////////////////////////////////
+
+		
+		function formatCoordenates(){
+			
+			let outputData = new OutputData();
+			outputData.generateFromHistory();
+			outputData.generateFromMap();
+		
+			let formatedCoordenates = new Vector2Array(outputData.positionsX, outputData.positionsY);
+			formatedCoordenates = LocalizeCoordenates(formatedCoordenates);
+			formatedCoordenates = RotateCoordenates90Clockwise(formatedCoordenates);
+			
+			outputData.positionsX = formatedCoordenates.x;
+			outputData.positionsY = formatedCoordenates.y;
+			
+			return outputData;
+		}
+		
+		function formatShapes(){
+			let output = "";
+			for( let i=0; i<listOfShapes.length; i++){
+				let shapeFormated = RotateCoordenatesByAngle( listOfShapes[i], -90 );
+				
+				let outputShape = {
+					itemName : listOfShapeNames[i],
+					localCoordenatesX : shapeFormated.x,
+					localCoordenatesY : shapeFormated.y
+				};
+				output += JSON.stringify(outputShape);
+				
+				if(i != listOfShapes.length-1)
+					output += "&";
+			}
+			
+			return output;
+		}
+
+        function download(filename, text) {
+            var element = document.createElement('a');
+            element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+            element.setAttribute('download', filename);
+
+            element.style.display = 'none';
+            document.body.appendChild(element);
+
+            element.click();
+
+            document.body.removeChild(element);
+        }
+/////////////////////////////////////////////////////////////////////////
+
+
+//UNDO MECHANICS  ////////////////////////////////////////////////////////
+		document.onkeyup = function(e) {
+			//Ctrl+Z  is  Undo
+			if( e.ctrlKey && e.which == 90 && !e.shiftKey){
+				UndoAction(-1);
+			}
+			//Ctrl+Y  is Redo
+			else if( e.ctrlKey && e.which == 89 ){
+				UndoAction(1);
+			}
+			//Ctrl+Shift+Z is Redo as well
+			else if( e.ctrlKey && e.shiftKey && e.which == 90 ){
+				UndoAction(1);
+			}
+		};
+		
+		const ActionTypes = Object.freeze({
+		  deleted: 0,
+		  replaced: 1
+		});
+		
+		var chainedUndoneIndex = 0;
+		function UndoAction(direction){
+			//Test input
+			let test = chainedUndoneIndex + direction + historyIndex;
+			if(test > historyIndex || test < 0 ) return;	
+			chainedUndoneIndex += direction;
+			console.log("Undone direction: " + direction + "; undone index: " + chainedUndoneIndex + "; global position: " + (historyIndex + chainedUndoneIndex))
+			
+			let itemPlacingInfo = GetInformationFromHistoryIndex(historyIndex + chainedUndoneIndex);
+			if(itemPlacingInfo == null) return;
+			
+			let actionResult = UndoActionFromHistory(itemPlacingInfo);
+			
+			if(actionResult == ActionTypes.deleted){
+				printVisualsOfCoordenates(itemPlacingInfo.coordenates, clearedGridColor);
+				UpdateOccupancy(itemPlacingInfo.coordenates, FREE);
+			}
+			else{
+				printVisualsOfCoordenates(itemPlacingInfo.coordenates, itemPlacedColor);
+				UpdateOccupancy(itemPlacingInfo.coordenates, OCCUPIED);
+			}
+		}
+////////////////////////////////////////////////////////////////////////////////////
+
+
+// TYPES AND CONSTRUCTORS //////////////////////////////////////////////////////////
+function Vector2Array(x, y) {
+	//If it is composed of arrayX,arrayY; just assign the values {x,y}
+	if( Array.isArray(x) ){
+		this.x = x;
+		this.y = y;
+	}
+	//If x was an instance of same type; make a full copy (y input is ignored)
+	else if( x instanceof Vector2Array ){
+		let instance = JSON.parse(JSON.stringify(x));
+		this.x = instance.x;
+		this.y = instance.y;
+	}
+	//If it was an escalar value, start an array at position 0 with {[x],[y]}
+	else if( typeof(x) == "number" ){
+		this.x = [x];
+		this.y = [y];
+	}
+	//If wrong input, initialize empty array
+	else if( x == null ){
+		this.x = [];
+		this.y = [];
+	}
+	else{
+		console.error("Constructor of Vector2Array did not found an overload for input");
+	}
+}
+
+function ItemPlacingInfo(itemType, rotation, positionX, positionY, coordenates){
+
+	if(itemType instanceof ItemPlacingInfo){
+		let instance = JSON.parse(JSON.stringify(itemType));
+		this.itemType  = instance.itemType;
+		this.rotation  = instance.rotation;
+		this.positionX = instance.positionX;
+		this.positionY = instance.positionY;
+		this.coordenates = instance.coordenates;
+		this.indexInHistory = instance.indexInHistory;
+		this.deleted = instance.deleted;
+	}
+	else if(itemType == null){
+		this.itemType  = 0;
+		this.rotation  = 0;
+		this.positionX = 0;
+		this.positionY = 0;
+		this.coordenates = new Vector2Array();
+		
+		//Internal properties
+		this.indexInHistory = 0;
+		this.deleted = false;
+	}
+	else{
+		this.itemType  = itemType;
+		this.rotation  = rotation;
+		this.positionX = positionX;
+		this.positionY = positionY;
+		this.coordenates = coordenates;
+		
+		//Internal properties
+		this.indexInHistory = 0;
+		this.deleted = false;
+	}
+	
+	this.undoFromHistory = function(){this.deleted=true;}
+	
+}
+
+function OutputData(){
+	this.itemTypes;
+	this.itemRotations;
+	this.positionsX;
+	this.positionsY;
+	this.mapSizeX;
+	this.mapSizeY;
+
+    this.generateFromHistory = function(){
+		let numberOfInstructions = historyOfPlacements.length;
+		this.itemTypes = [];
+		this.itemRotations = [];
+		this.positionsX = [];
+		this.positionsY = [];
+		
+		let j=0;
+	
+		for(var i=0; i<numberOfInstructions; i++){
+		
+			//Skip the search if it was marked as deleted
+			if(historyOfPlacements[i].deleted == true){
+				continue;
+			}
+			
+			this.itemTypes[j] = historyOfPlacements[i].itemType;
+			this.itemRotations[j] = historyOfPlacements[i].rotation;
+			this.positionsX[j] = historyOfPlacements[i].positionX;
+			this.positionsY[j] = historyOfPlacements[i].positionY;
+			j++;
+		}
+	}
+
+	this.generateFromMap = function(){
+		let mapLengthX = occupancyMap.length;
+		let mapLengthY = occupancyMap[0].length;
+		let minX = 999;
+		let minY = 999;
+		let maxX = 0;
+		let maxY = 0;
+
+		for(let i=0; i<mapLengthX; i++){
+			for(var j=0; j<mapLengthY; j++){
+				if( occupancyMap[i][j] == OCCUPIED){
+					if(i < minX){
+						minX = i;
+					}
+					if(i > maxX){
+						maxX = i;
+					}
+
+					if(j < minY){
+						minY = j;
+					}
+					if(j > maxY){
+						maxY = j;
+					}
+				}
+			}
+		}
+
+		this.mapSizeX = maxY - minY + 1;
+		this.mapSizeY = maxX - minX + 1;
+	}
+}
+
+////////////////////////////////////////////////////////////////////////////////////
diff --git a/MapBuilderForWeb/MapBuilderForWeb.html b/MapBuilderForWeb/MapBuilderForWeb.html
new file mode 100644
index 0000000..7e317fb
--- /dev/null
+++ b/MapBuilderForWeb/MapBuilderForWeb.html
@@ -0,0 +1,332 @@
+
+<html>
+<script type="text/javascript" src="MapBuilder.js"></script>
+<script type="text/javascript" src="BuilderCalculations.js"></script>
+<script type="text/javascript" src="BuilderVisuals.js"></script>
+<script type="text/javascript" src="ShapeBuilder.js"></script>
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+<link rel="stylesheet" type="text/css" href="MapBuilderStyles.css">
+
+    <body>
+	
+		<table>
+		<tr>
+			<td colspan="2" class="layout">
+				<div class="items" id="itemsArea"></div>
+			</td>
+		</tr>
+		<tr>
+			<td class="layout">
+				<div id='GridGraphics'></div>
+			</td>
+			<td class="layout">
+				<div id='lateralMenuGraphics'></div>
+			</td>
+		</tr>
+		
+		</table>
+	
+
+		<div id="statsGraphics"><div class='stats'><span id='topValue'></span><br><span>Item Type: </span><span id='itemType'>0</span><br><span>Rotation: </span><span id='rotation'>0</span><br><div ><span>Coordenate: </span><span id='positionX'>0</span> , <span id='positionY'>0</span></div></div></div>
+		
+    </body>
+    <script>
+		//Output elements
+		var statistics;
+        var itemType;
+        var rotation;
+        var positionX;
+        var positionY;
+        var topValue;
+		
+		//Graphic elements
+        var table;
+        var tableShapes;
+        var lateralMenu;
+		var shapeElements = [];
+		
+		//Colors
+		const itemShowcaseColor = "#1D8742";
+		const itemShadowColor = "#1D874288";
+		const itemPlacedColor = "#1D8742";
+		const clearedGridColor = "white";
+		const itemSelectedColor = "#B9F51B";
+		const itemDefaultColor = "#1D8742";
+		
+		//List Of Shapes
+		var listOfShapes = [
+			new Vector2Array([0],[0]),
+			new Vector2Array([0,0],[0,1]),
+			new Vector2Array([0,0,1],[0,1,1])
+		];
+		var listOfShapeNames = [
+			"Box",
+			"Wall",
+			"Corner Wall"
+		];
+		
+		//Keeps track on real time what's happening
+		var currentItemPlacingInfo = new ItemPlacingInfo();
+
+
+		//Everything starts here
+        window.onload = function() {
+			//Both share same stuff
+			initializeMapEditorStatistics();
+			initializeMapEditorShapes();
+
+			//Initialize Map editor
+			initializeMapEditorGrid(20, 40);
+			initializeMapEditorMenu();
+			
+			//Initialize Shapes editor
+			initializeShapesEditorGrid(10, 10);
+			initializeShapesEditorMenu();
+
+			
+			//Starts showing map editor while hidning shapes editor
+			GoToMapEditor();
+			//GoToShapesEditor();
+        }
+		
+		function initializeMapEditorGrid(x, y){
+			//Creates grid
+			let placingLcation = document.getElementById("GridGraphics");
+            table = generate_table(x, y);
+			table.id = "grid";
+			table.className = "gridMap";
+			
+			//Places grid 
+			placingLcation.appendChild(table);
+			
+			//Initializes grid logic
+			occupancyMap = Array(x).fill(null).map(()=>Array(y).fill(false));
+			
+			//Add functionality to the grid
+			var tablerowscount=table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
+			for (let i=0; i<tablerowscount.length; i++) {
+				//console.log(tablerowscount[i].cells);
+				AddHoverListenerToElements(tablerowscount[i].cells);
+			}
+			
+            AddClickListenerToElement(table, OnGridClick );
+			AddListenerToScrollWheel(table);
+		}
+		
+		function initializeMapEditorMenu(){
+			//Creates HTML map editor's menu
+			lateralMenu = document.getElementById("lateralMenuGraphics");
+			lateralMenu.innerHTML = "<div class='control'><button class='sideButton downloadButton' onclick='DownloadMap()'><i class='material-icons'>download</i> Download</button><button class='sideButton' onclick='ResetMap()'><i class='material-icons'>delete</i> Reset Map</button></div>";
+			
+		}	
+		
+		function initializeMapEditorStatistics(){			
+			//save references
+			topValue = document.getElementById('topValue');
+            itemType = document.getElementById('itemType');
+            rotation = document.getElementById('rotation');
+            positionX = document.getElementById('positionX');
+            positionY = document.getElementById('positionY');
+		}
+		
+		function initializeMapEditorShapes(shapeStartIndex=0){
+			let itemsArea = document.getElementById('itemsArea');
+			
+			let fixedSizeOfShape = 6;
+			let cellSize = 1;
+			
+			for(let i=0; i<listOfShapes.length; i++){
+			
+				let maxValue = GetMaxValueOfCoordenates(listOfShapes[i]);
+				let marginValue = maxValue + 3;
+				let sizeFactor = fixedSizeOfShape / (cellSize*marginValue);
+				console.log("maxValue:"+maxValue+"; sizeFactor:"+sizeFactor);
+
+				let item = generate_table(marginValue, marginValue, 10*sizeFactor);
+				//item.style.transform = "scale("+sizeFactor+")";
+				
+				let textNode = document.createTextNode(listOfShapeNames[i]);
+				item.appendChild(textNode);
+
+				item.className = "item";
+				
+				itemsArea.appendChild( item );
+				item.addEventListener('click', function(){ ChangeItem(i); } );
+				
+				let coordenates = GlobalizeCoordenates( listOfShapes[i] , 1, 1);
+				printVisualsOfCoordenatesOnTable(coordenates, itemShowcaseColor, item);
+				
+				shapeElements[i] = item;
+			}
+			
+			let textElement = document.createElement("div");
+			let textNode = document.createTextNode("+");
+			textElement.classList.add('addShapeButton');
+			textElement.appendChild(textNode);
+			itemsArea.appendChild(textElement);
+			textElement.addEventListener('click', function(){ GoToShapesEditor(); } );
+			lastShapeElement = shapeElements[shapeStartIndex];
+			ChangeItem(shapeStartIndex);
+		}
+		
+		function initializeShapesEditorGrid(x, y){			
+			//Creates grid
+			let placingLcation = document.getElementById("GridGraphics");
+            tableShapes = generate_table(x, y);
+			tableShapes.id = "shapeMap";
+			tableShapes.className = "shapeMap";
+			
+			//Creates the shape's name input
+			let inputElement = document.createElement("input");
+			let textNode = document.createTextNode("Name: ");
+			inputElement.classList.add('inputName');
+			inputElement.id = "inputName";
+			inputElement.value = "Shape Name";
+			inputElement.append(textNode);
+			tableShapes.appendChild(inputElement);
+			
+			//Places grid 
+			placingLcation.appendChild(tableShapes);
+			
+			//Initializes grid logic
+			shapeMap = Array(x).fill(null).map(()=>Array(y).fill(false));
+			
+			//Add functionality to the grid
+			var tablerowscount=tableShapes.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
+			for (let i=0; i<tablerowscount.length; i++) {
+				//console.log(tablerowscount[i].cells);
+				AddHoverListenerToElements(tablerowscount[i].cells);
+			}
+			AddClickListenerToElement(tableShapes, OnShapesGridClick);
+		}
+		
+		function initializeShapesEditorMenu(){
+			lateralMenu.innerHTML += "<div class='control'><button class='sideButton downloadButton' onclick='SaveShape()'><i class='material-icons'>save</i> Save</button><button class='sideButton' onclick='ReturnToMapEditor()'><i class='material-icons'>arrow_back_ios</i> Return</button><button class='sideButton' onclick='ResetShape()'><i class='material-icons'>delete</i> Reset Shape</button></div>";
+		}
+		
+
+		
+
+		
+///////////////////// MAIN ////////////////////////////////////////////////////
+		
+		function ResetMap(){
+			
+			let formatedCoordenates = OccupancyMapToCoordenates(occupancyMap);
+			printVisualsOfCoordenates(formatedCoordenates, clearedGridColor);
+			
+			historyOfPlacements = null;
+			historyOfPlacements = [];
+			historyIndex = 0;
+			
+			let mapLengthX = occupancyMap.length;
+			let mapLengthY = occupancyMap[0].length;
+			
+			occupancyMap = Array(mapLengthX).fill(null).map(()=>Array(mapLengthY).fill(false));
+			
+			console.log("DELETED MAP INFO:");
+			console.log(formatedCoordenates);
+		}
+		
+		function HideMapEditor(){
+			table.style.display = "none";
+			let lateralButtons = document.getElementsByClassName("control")[0];
+			lateralButtons.style.display = "none";
+		}
+
+
+        function OnGridClick(x, y){
+			//Resets Ctrl+Z actions
+			chainedUndoneIndex = 0;
+			
+			//Creates an object {[x],[y]} where x and y are integrers
+			var clickedCoordenate = new Vector2Array(x, y);
+			
+			if ( GetOccupancyOfCoordenates(clickedCoordenate) == OCCUPIED ){
+				let itemPlacingInfo = FindHistoryInfoAtCoordenates(clickedCoordenate);
+				console.log("Clicked on an item. Placing info:");
+				console.log(itemPlacingInfo);
+				DeleteFromHistoryOfPlacements(itemPlacingInfo);
+				printVisualsOfCoordenates(itemPlacingInfo.coordenates, clearedGridColor);
+				UpdateOccupancy(itemPlacingInfo.coordenates, FREE);
+			}
+			else{
+				console.log("Clicked on empty space");
+				PlaceItemAtCurrentItemInfo();
+			}
+        }
+		
+		
+		//Sooo. i know is confusing but here goes:
+		// 1. Average volume of an object is its center position. Not the bounding box center
+		// 2. Here changes the index-position for the center-volume-position of the object so it visualy rotates from its center
+		// 3. The (rows, columns) system is different from the (x, y) system by 90 degrees or (-y, x)
+		// 4. We need to register the index position as it was taken by a (x,y) system, so it changes again the index-position-row-col to index-position-xy
+		// 5. Summary; internally we're using (row,col) as original detection of coordenates. Volume-center to place the visuals. And standar (x,y) as output
+		function PlaceItemAtCurrentItemInfo(){
+			
+			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) };
+
+			//make info
+			let coordenates = GlobalizeCoordenates(shapeRotated, volumeIndex.x, volumeIndex.y);
+			currentItemPlacingInfo.coordenates = coordenates;
+			
+			//Standar (x,y) system for ouputting
+			let minValues = GetMinValuesOfCoordenates(coordenates)
+			currentItemPlacingInfo.positionX = minValues.x;
+			currentItemPlacingInfo.positionY = minValues.y;
+			
+			console.log(averageVolume);
+			console.log(roundedAverageVolume);
+			console.log(volumeIndex);
+			
+			if(GetOccupancyOfCoordenates(coordenates) == FREE){
+				console.log("CorrectPlacement");
+				printVisualsOfCoordenates(coordenates, itemPlacedColor);
+				UpdateOccupancy(coordenates, OCCUPIED);
+				RegisterHistoryOfPlacements(currentItemPlacingInfo);
+			}
+			else{
+				console.log("Incorrect Placement");
+			}
+			
+			console.log("END OF PLACEMENT");
+			console.log(coordenates);
+		}
+
+		var lastShapeElement;
+		function ChangeItem(itemIndex){
+			console.log(shapeElements);
+			currentItemPlacingInfo.itemType = itemIndex;
+			itemType.innerHTML = currentItemPlacingInfo.itemType;
+			
+			lastShapeElement.style.backgroundColor = itemDefaultColor;
+			shapeElements[itemIndex].style.backgroundColor = itemSelectedColor;
+			lastShapeElement = shapeElements[itemIndex];
+		
+			console.log("Item changed to type: " + itemIndex);
+		}
+	    
+		
+		function DownloadMap(){
+		
+			let outputData = JSON.stringify( formatCoordenates() );
+			let ouputShapes = formatShapes();
+			
+			console.log("DOWNLOADED:");
+			console.log(outputData);
+            download("WebBuilderMap"+ ".json", outputData + "$" + ouputShapes);
+        }
+/////////////////////////////////////////////////////////////////////////
+
+
+
+    </script>
+</html>
\ No newline at end of file
diff --git a/MapBuilderForWeb/MapBuilderStyles.css b/MapBuilderForWeb/MapBuilderStyles.css
new file mode 100644
index 0000000..e5a05fb
--- /dev/null
+++ b/MapBuilderForWeb/MapBuilderStyles.css
@@ -0,0 +1,184 @@
+
+	:root{
+		/* GREEN TO YELLOW PALLETE
+  		--darker: #00703E;
+  		--dark: #1D8742;
+  		--normal-dark: #389D43;
+  		--normal: #55B441;
+  		--normal-light: #73CA3B;
+  		--light: #95E02F;
+  		--lighter: #B9F51B;
+		*/
+		
+  		--background: #1D8742;
+  		--table-shadow: #00703E;
+  		--item-hover: #55B441;
+  		--item-shadow: #00703E;
+  		--item-click: #B9F51B;
+  		--lateral-menu-background: #55B441;
+  		--side-button: #00703E;
+  		--side-button-hover: #00501E;
+  		--download-button: #95E02F;
+  		--download-button-hover: #B9F51B;
+	}
+
+
+	tr, td {
+		padding: 0.6rem;
+		border: 1px dashed lightGray;
+		background-color:white;
+		vertical-align: top;
+		cursor: pointer;
+	}
+	table {
+		border: 0px;
+		border-collapse: collapse;
+		margin:2px;
+		box-shadow: 0px 0px 15px var(--table-shadow);
+
+		font-size: 1rem;
+		font-weight: bold;
+		color: white;
+	}
+	
+	.layout{
+		background-color: var(--background);
+		padding: 5px;
+		border: 1px dashed lightGray;
+	}
+
+	body {
+		background-color: var(--background);
+		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif  !important;
+	}
+
+
+	.items .item{
+		display: inline-block;
+		padding: 5px;
+		cursor: pointer;
+		box-shadow: none;
+		border: 2px dashed #00000000;
+		border-radius: 3px;
+		transition: 0.1s ease-in-out;
+	}	
+		.item:hover {
+			border: 2px dashed var(--item-click);
+			box-shadow: 0px 0px 15px var(--item-click);
+			transform: scale(1.1);
+			transition: 0.1s ease-in-out;
+		}
+	
+	
+	.stats {
+		position: absolute;
+		left: 20px;
+		bottom: 40px;
+		color: gray;
+	}
+	
+	#lateralMenuGraphics {
+		background-color: var(--lateral-menu-background);
+		box-shadow: 0px 0px 5px var(--lateral-menu-background);
+		min-height: 410px;
+		cursor: default;
+		width: 290px;
+	}
+	#itemsArea {
+		height: 180px;
+		cursor: default;
+		overflow-x: auto;
+		max-width: 1000px;
+	
+		display: flex;
+		align-items: center;
+	}
+	
+	#GridGraphics {
+		min-width: 850px;	
+		vertical-align: center;
+		min-height: 400px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	
+	
+	.addShapeButton{
+		background-color: white;
+		border-radius: 50px;
+		border: 2px dashed var(--background);
+		text-align: center;
+		padding-bottom: 9;
+		width: 50;
+		font-size: xx-large;
+		color: var(--side-button);
+		margin-left: 40px;
+		margin-right: 50px;	
+	}
+		.addShapeButton:hover{
+			background-color: var(--item-hover);
+			color: white;
+			border: 2px dashed var(--item-click);
+			box-shadow: 0px 0px 15px var(--item-click);
+			transform: scale(1.1);		
+			transition: 0.1s ease-in-out;
+			cursor: pointer;
+		}
+		.addShapeButton:active{
+			background-color: var(--item-click);
+			transition: 0.1s ease-in-out;
+		}
+	
+	
+	
+	.sideButton{
+		border: none;
+		padding: 20px;
+		margin: 10px;
+		font-size: 20px;
+		width: 270px;
+		height: 90px;
+		background-color: var(--side-button);
+		border: 2px dashed lightGray;
+		
+		font-size: 2rem;
+		font-weight: bold;
+		color: white;
+		
+		cursor: pointer;
+	}
+		.sideButton:hover {
+		  background-color: var(--side-button-hover);
+		}
+		
+		.downloadButton{
+			background-color: var(--download-button);;
+		}
+	
+		.downloadButton:hover {
+		  background-color: var(--download-button-hover);;
+		}
+		
+	.inputName {
+		border: 2px dashed lightGray;
+		padding: 19px;
+		margin-top: 10px;
+		transition: 0.1s ease-out;
+		font-weight: bolder;
+		font-size: x-large;
+		width: 211px;
+	}
+		.inputName:hover {
+			background-color: var(--item-hover);
+			color: white;
+			border: 2px dashed var(--item-click);
+			box-shadow: 0px 0px 15px var(--item-click);
+			transform: scale(1.1);		
+			transition: 0.1s ease-in-out;
+		}
+
+ /*style="transform: rotate(90deg)"*/
+
+
diff --git a/MapBuilderForWeb/ShapeBuilder.js b/MapBuilderForWeb/ShapeBuilder.js
new file mode 100644
index 0000000..cd42d39
--- /dev/null
+++ b/MapBuilderForWeb/ShapeBuilder.js
@@ -0,0 +1,109 @@
+
+var shapeMap;
+
+		function GoToShapesEditor(){
+			HideMapEditor();
+			ResetShape();
+			//SaveShapeAndContinue();
+			
+			tableShapes.style.display = "initial";
+			let lateralButtons = document.getElementsByClassName("control")[1];
+			lateralButtons.style.display = "initial";
+		}
+
+		function ReturnToMapEditor(){
+			let coordenates = OccupancyMapToCoordenates(shapeMap);
+			
+			if( coordenates.x.length == 0){
+				console.log("There's no shape to save, returning..");
+				GoToMapEditor();
+				return;
+			}
+			
+			if( confirm("Save Current Shape?") ){
+				SaveShape();
+			}
+			
+			GoToMapEditor();
+		}
+		
+		function SaveShapeAndContinue(){
+			let inputName = document.getElementById('inputName');
+
+			//Format shape
+			let coordenates = OccupancyMapToCoordenates(shapeMap);
+			
+			if( coordenates.x.length == 0){
+				console.log("There's no shape to save, returning..");
+				GoToMapEditor();
+				return;
+			}
+			
+			let formatedCoordenates = LocalizeCoordenates(coordenates);
+			
+			//Add to registry
+			console.log(formatedCoordenates);
+			listOfShapes[listOfShapes.length] = formatedCoordenates;
+			listOfShapeNames[listOfShapeNames.length] = inputName.value;
+			
+			//Reset shapes visuals
+			let itemsArea = document.getElementById('itemsArea');
+			itemsArea.innerHTML = "";
+			
+			//Show all current shapes
+			initializeMapEditorShapes(listOfShapes.length-1);
+		}
+
+		function SaveShape(){
+			SaveShapeAndContinue();
+			ResetShape();
+			//GoToMapEditor();
+		}
+
+		function OnShapesGridClick(x, y){
+			console.log("OnShapesGridClick stuff happens");
+			
+			if(GetOccupancyOfShapesEditorCoordenates(x, y) == FREE){
+				printVisualsOfShapeEditorCoordenates(x, y, itemPlacedColor);
+				RegisterCoordenatesInShapesMap(x, y, OCCUPIED);
+			}
+			else{
+				printVisualsOfShapeEditorCoordenates(x, y, clearedGridColor);
+				RegisterCoordenatesInShapesMap(x, y, FREE);		
+			}
+		}
+
+		function ResetShape(){
+			console.log("ResetShape stuff happens");
+			let formatedCoordenates = OccupancyMapToCoordenates(shapeMap);
+			for(let i=0; i<formatedCoordenates.x.length; i++){
+				printVisualsOfShapeEditorCoordenates(formatedCoordenates.x[i], formatedCoordenates.y[i], clearedGridColor);
+			}
+			
+			let mapLengthX = occupancyMap.length;
+			let mapLengthY = occupancyMap[0].length;
+			
+			shapeMap = Array(mapLengthX).fill(null).map(()=>Array(mapLengthY).fill(false));
+		}
+
+		function RegisterCoordenatesInShapesMap(x, y, state){
+			shapeMap[x][y] = state;
+		}
+
+		function GetOccupancyOfShapesEditorCoordenates(x, y){
+			return shapeMap[x][y];
+		}
+		
+		function HideShapesEditor(){
+			tableShapes.style.display = "none";
+			let lateralButtons = document.getElementsByClassName("control")[1];
+			lateralButtons.style.display = "none";
+		}
+		
+		function GoToMapEditor(){
+			HideShapesEditor();
+			
+			table.style.display = "initial";
+			let lateralButtons = document.getElementsByClassName("control")[0];
+			lateralButtons.style.display = "initial";
+		}
\ No newline at end of file