button to import previously exported json into map editor

kaansoral · Jul 27, 2024 · 94303e3 · 94303e3
1 parent eb742d6
commit 94303e3
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 0 deletions.
diff --git a/utility/htmls/map_editor.html b/utility/htmls/map_editor.html
@@ -158,6 +158,7 @@
 			<div class="gamebutton clickable linesbutton mt5" onclick="toggle_lines();">Info: ON</div>
 			<div class="gamebutton clickable alertbutton mbutton largerfont mt5" onclick="toggle_alert_mode();"><div class='px2'></div>±</div>
 			<div class="gamebutton clickable mt5" onclick="show_json(map_data);">JSON</div>
+			<div class="gamebutton clickable mt5" onclick="show_import_map();">IMPORT</div>
 			{% if resort %}
 				<div class="gamebutton clickable mt5" onclick="show_upload_modal();">UPLOAD</div>
 			{% endif %}

diff --git a/utility/htmls/map_editor.js b/utility/htmls/map_editor.js
@@ -1015,6 +1015,55 @@ function show_upload_modal()
 	$('#toprightcorner').show();
 }
 
+function show_import_map() {
+	function onImportMapJsonChange(event) {
+		var reader = new FileReader();
+		reader.onload = onReaderLoad;
+		reader.readAsText(event.target.files[0]);
+	}
+
+	function onReaderLoad(event) {
+		$("#import_map_json").val(event.target.result);
+	}
+
+	function import_map() {
+		const text = $("#import_map_json").val();
+		const json = JSON.parse(text);
+		// console.log(json);
+		for (const key in json) {
+			const value = json[key];
+			map_data[key] = value;
+		}
+
+		$("#toprightcorner").hide();
+		$("#toprightcorner").html("");
+
+		redraw_map();
+	}
+
+	var html = "<div style='font-size: 32px;'>";
+	html +=
+		"<div style='margin-bottom: 20px'>The following will replace all data in your currently loaded map, press save to persist it</div>";
+	html += `
+	<input id="import_map_file" type="file" accept=".json" /><br/>
+	<textarea id="import_map_json" rows="10" style="min-height:600px; min-width:600px"/>
+	<button id="import_map_button" style="margin-bottom:20px;">Import</button>
+	<br/>
+	<br/>
+	`;
+	// html+=`<form method="post" enctype="multipart/form-data">
+	// <input type="file" name="json"/>
+	// <input type="hidden" name="iname" value="map" />
+	// <input type="hidden" name="key" value="{{name}}">
+	// <input type="submit" name="submit" value="Import"/>
+	// </form>`;
+	html += "</div>";
+	$("#toprightcorner").html(html);
+	$("#toprightcorner").show();
+	$("#import_map_file").on("change", onImportMapJsonChange);
+	$("#import_map_button").on("click", import_map);
+}
+
 function rescale_map(nscale)
 {
 	var ox=(map.x-round(width/2))/scale,oy=(map.y-round(height/2))/scale;