Uploadability enhanced

Visually correct but there seems to be a bug with the occupancy map not registering correctly on file upload
dip000 · Feb 19, 2022 · f8ad8c9 · f8ad8c9
1 parent 9c92c38
commit f8ad8c9
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 18 deletions.
diff --git a/MapBuilderForWeb/BuilderVisuals.js b/MapBuilderForWeb/BuilderVisuals.js
@@ -79,6 +79,8 @@
 
 // PRINTERS ////////////////////////////////////////////////////////////////////////
 
+	var previousLevel;
+
 	function printHoverVisuals(){		
 		//Read all from current placing info
 		let shape = listOfShapes[currentItemPlacingInfo.itemType];
@@ -96,10 +98,11 @@
 
 		//console.log(new Vector2Array(coordenates));
 
-		printVisualsOfCoordenates( previusCoordenates , clearedGridColor );
+		printVisualsOfCoordenates( previusCoordenates , clearedGridColor, previousLevel );
 		printVisualsOfCoordenates( coordenates, itemShadowColor );
 
 		previusCoordenates = coordenates;
+		previousLevel = levels[ currentItemPlacingInfo.level.x ][ currentItemPlacingInfo.level.y ];
 	}
 
 	var _x=0, _y=0;

diff --git a/MapBuilderForWeb/MapBuilder.js b/MapBuilderForWeb/MapBuilder.js
@@ -55,8 +55,11 @@
 
 
 
-		function UpdateOccupancy(coordenates, state){
-			let occupancyMap = occupancyMaps[currentItemPlacingInfo.level.x][currentItemPlacingInfo.level.y];
+		function UpdateOccupancy(coordenates, state, map){
+			let occupancyMap = map;
+			if( occupancyMap == null )
+				occupancyMap = occupancyMaps[currentItemPlacingInfo.level.x][currentItemPlacingInfo.level.y];
+
 			for(var i=0; i<coordenates.x.length; i++){
 				occupancyMap[coordenates.x[i]][coordenates.y[i]] = state;
 			}		
@@ -406,12 +409,6 @@ function Point(x, y){
 
 		uploadShapes(shapesString);
 		uploadMaps(mapsString);
-
-		/*console.log(mapsString)
-		console.log(shapesString)
-
-		console.log(maps)
-		console.log(shapes)*/
 	}
 
 	function uploadShapes(shapesString){

diff --git a/MapBuilderForWeb/MapBuilderForWeb.html b/MapBuilderForWeb/MapBuilderForWeb.html
@@ -10,7 +10,7 @@
 <link rel="stylesheet" type="text/css" href="MapBuilderStyles.css">
 
     <body>
-
+	<input type="file" onchange="showFile()" style="display:none">
 		<table>
 		<tr>
 			<td colspan="2" class="layout">
@@ -96,6 +96,9 @@
 			  e.preventDefault()
 			})
 
+			//custom scale to window size
+			document.body.style.zoom = (window.innerWidth*0.07782) + "%";
+
 			//Starts showing map editor while hidning shapes editor
 			GoToMapEditor();
 			//GoToShapesEditor();
@@ -138,7 +141,7 @@
 					//Add functionality to the level
 					var tablerows = level.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
 					for (let i=0; i<tablerows.length; i++) {
-						AddHoverListenerToElements(tablerows[i].cells, function(){return {x:r, y:c}});
+						AddHoverListenerToElements(tablerows[i].cells, function(){return new Point(r, c)});
 					}				
 
 					if( levels[r] == null ) levels[r] = new Array();
@@ -158,7 +161,7 @@
 		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>";
+			lateralMenu.innerHTML = "<div class='control'><button class='sideButton downloadButton' onclick='DownloadMap()'><i class='material-icons'>download</i> Download</button><button class='sideButton' onclick='downloadManager()'><i class='material-icons'>upload</i> Upload</button><button class='sideButton' onclick='ResetMap()'><i class='material-icons'>delete</i> Reset Map</button></div>";
 
 		}	
 
@@ -255,7 +258,7 @@
 			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, function(){return {x:0,y:0}});
+				AddHoverListenerToElements(tablerowscount[i].cells, function(){return new Point(0,0)});
 			}
 			AddClickListenerToElement(tableShapes, OnShapesGridClick);
 		}

diff --git a/MapBuilderForWeb/MapBuilderStyles.css b/MapBuilderForWeb/MapBuilderStyles.css
@@ -35,9 +35,7 @@
 		--delete-icon: #D69D85;
 	}
 
-	html {
-		zoom: 150%;
-	}
+
 
 	tr, td {
 		padding: 0.6rem;
@@ -54,6 +52,8 @@
 		font-weight: bold;
 	}
 
+
+
 	.layout{
 		background-color: var(--background);
 		padding: 5px;
@@ -194,6 +194,12 @@
 		  box-shadow: 0px 0px 10px var(--item-shadow);
 		}
 
+		.sideButton i{
+			float:left;
+			font-size: xx-large;
+		}
+
+
 	.inputName {
 		border: 2px dashed var(--light-gray);
 		padding: 19px;

diff --git a/MapBuilderForWeb/MultimapMechanics.js b/MapBuilderForWeb/MultimapMechanics.js
@@ -165,3 +165,19 @@
 
 
 
+	function showFile(){
+		let file = document.querySelector('input[type=file]').files[0];
+		let reader = new FileReader();
+
+		reader.onload = function( event ){
+			upload( event.target.result );
+		}
+
+		try{ reader.readAsText( file ); } catch{}
+	}
+
+	function downloadManager(){
+		document.querySelector('input[type=file]').click();
+	}
+
+
diff --git a/MapBuilderForWeb/ShapeBuilder.js b/MapBuilderForWeb/ShapeBuilder.js
@@ -150,9 +150,18 @@ var isShapeEditorActive = false;
 
 				//Item type is the shape index
 				if(historyOfPlacements[i].itemType == shapeIndex){
+
+					for (let r=0; r<gridRows; r++) {
+						for (let c=0; c<gridCols; c++) {
+							let occupancyMap = occupancyMaps[r][c];
+							let level = levels[r][c];
+
+							printVisualsOfCoordenates(historyOfPlacements[i].coordenates, clearedGridColor, level);
+							UpdateOccupancy(historyOfPlacements[i].coordenates, FREE, occupancyMap);
+						}
+					}
+
 					DeleteFromHistoryOfPlacements( historyOfPlacements[i] );
-					printVisualsOfCoordenates(historyOfPlacements[i].coordenates, clearedGridColor);
-					UpdateOccupancy(historyOfPlacements[i].coordenates, FREE);
 				}
 				//Higher item types must reaccomodate. Lower item types stays the same
 				else if(historyOfPlacements[i].itemType > shapeIndex){