User:Mikevoir/sandbox.js

$(function {   // Load dependencies and cache	var config = mw.config.get(['wgDiffNewId', 'wgAction', 'wgPageName']);	var markers = {count:0};	var _REFERENCE = {x: 4403, y: 1366}; // Mondstadt's cementary behind chapple, central dot of grass	var mapGenerator = {		init: function {			// Clean page			document.querySelectorAll('#mw-content-text.mw-body-content > p').forEach(function(p){ p.remove; });			document.querySelector('h1.page-header__title').innerHTML = 'Map Generator';			document.title = 'Map Generator';			var container = $('  ');				$('#mw-content-text.mw-body-content').append(container);			container.draggable;			container.css('left', '-3740px'); // Default to Mond just cuz			container.css('top', '-842px'); // Default to Mond just cuz			container.css('height', (screen.height-100)+'px'); // Limit container so no scrolling is required mw.util.addCSS(				'.markerSettings > ul {\n'+					'display: flex;\n'+					'list-style-type: none;\n'+					'white-space: nowrap;\n'+					'margin: 0;\n'+					'padding: 5px 8px;\n'+					'background: rgb(26, 29, 35);\n'+					'border-radius: 3px;\n'+				'}\n'+				'.markerSettings > ul > li:not(:first-child):before {\n'+					'content: " | ";\n'+					'white-space: pre;\n'+				'}'			); document.addEventListener('dblclick', function(event) {				if (event.target && event.target.id == 'mapImage') {					event.preventDefault;					markers.count++;					var newMarker = {						x: event.layerX,						y: event.layerY,						elem: $('')					};					markers['marker'+markers.count] = newMarker;					container.append(newMarker.elem);				} else if (event.target && /^marker\d+/.test(event.target.id)) {					markers.count--;					delete markers[event.target.id];					event.target.remove;				}			}); document.addEventListener('contextmenu', function(event) {				if (document.querySelector('.markerSettings')) {document.querySelector('.markerSettings').remove;}				if (event.target && /^marker\d+/.test(event.target.id)) {					event.preventDefault;					var menu = $( ' '+							''+ '32px'+ '53px'+ '75px'+ '96px'+ '&#x274C;'+ ''+ ' '					);					container.append(menu);					document.querySelector('.markerSettings').style.top = markers[event.target.id].y+(document.querySelector('.markerSettings').clientHeight/2)+'px';					document.querySelector('.markerSettings').style.left = markers[event.target.id].x-(document.querySelector('.markerSettings').clientWidth/2)+'px';				}			}); var markerTypes = { '32': {					src: 'https://static.wikia.nocookie.net/gensin-impact/images/b/b0/Map-guide-marker-32.png/revision/latest', offset: 19.5 },				'53': {					src: 'https://static.wikia.nocookie.net/gensin-impact/images/9/99/Map-guide-marker-53.png/revision/latest', offset: 30 },				'75': {					src: 'https://static.wikia.nocookie.net/gensin-impact/images/b/b5/Map-guide-marker-75.png/revision/latest', offset: 40.5 },				'96': {					src: 'https://static.wikia.nocookie.net/gensin-impact/images/1/18/Map-guide-marker-96.png/revision/latest', offset: 51 },			};			document.addEventListener('click', function(event) {				if (event.target && event.target.classList.contains('markerSettings-Close')) {					if (document.querySelector('.markerSettings')) {document.querySelector('.markerSettings').remove;}				} else if (event.target && event.target.classList.item(0) && /^markerSettings-\d\d/.test(event.target.classList.item(0))) {					var markerID = event.target.getAttribute('rel');					var type = /^markerSettings-(\d\d)/.exec(event.target.classList.item(0))[1];					var marker = document.querySelector('#'+markerID);					marker.setAttribute('src', markerTypes[type].src);					marker.style.top = markers[markerID].y - markerTypes[type].offset+ 'px';					marker.style.left = markers[markerID].x - markerTypes[type].offset+ 'px';				}			}); document.addEventListener('keypress', mapGenerator.loadMaps); },		loadMaps: function { console.log(markers); if (markers.count>0) { Object.keys(markers).forEach(function(id) {					if (id!='count') {						var canvas = document.createElement('canvas');						canvas.height = '600';						canvas.width = '600';						var context = canvas.getContext('2d');						var loaded = 0;						var imageObj1 = new Image;						imageObj1.crossOrigin = "anonymous";						imageObj1.src = mapGenerator.selectMap(markers[id]);						imageObj1.onload = function {							loaded++;							context.drawImage(imageObj1, 0, 0);							if (loaded==2) {window.open(canvas.toDataURL); canvas.remove;}						};						var imageObj2 = new Image;						console.log(markers[id].elem[0]);						imageObj2.crossOrigin = "anonymous";						imageObj2.src = markers[id].elem[0].getAttribute('src');						imageObj2.onload = function {							loaded++;							context.drawImage(imageObj2, markers[id].x-4724, markers[id].y-1231);							if (loaded==2) {window.open(canvas.toDataURL); canvas.remove;} };					}				});			}		},		selectMap: function(marker) {			var refx = marker.x - _REFERENCE.x;			var refy = marker.y - _REFERENCE.y;			var mapRefs = [				{ 'x': -309, 'y': -284, src: 'https://static.wikia.nocookie.net/gensin-impact/images/d/d7/Brightcrown_Canyon_Map_Template.png/revision/latest' },				{ 'x': 486,	 'y': 350,	src: 'https://static.wikia.nocookie.net/gensin-impact/images/9/99/Cape_Oath_Map_Template.png/revision/latest' },				{ 'x': -113, 'y': -222, src: 'https://static.wikia.nocookie.net/gensin-impact/images/2/2a/Cider_Lake_Map_Template.png/revision/latest' },				{ 'x': 271,	 'y': 322,	src: 'https://static.wikia.nocookie.net/gensin-impact/images/8/82/Dadaupa_Gorge_Map_Template.png/revision/latest' },				{ 'x': -216, 'y': 184,	src: 'https://static.wikia.nocookie.net/gensin-impact/images/a/a3/Dawn_Winery_Map_Template.png/revision/latest' },				{ 'x': -162, 'y': 372,	src: 'https://static.wikia.nocookie.net/gensin-impact/images/f/ff/Dragonspine_Map_Template.png/revision/latest' }, { 'x': -29,	 'y': -68,	src: 'https://static.wikia.nocookie.net/gensin-impact/images/6/63/Mondstadt_(City)_Map_Template.png/revision/latest' }, { 'x': 917,	 'y': 273,	src: 'https://static.wikia.nocookie.net/gensin-impact/images/b/be/Musk_Reef_Map_Template.png/revision/latest' }, { 'x': 16,	 'y': 149,	src: 'https://static.wikia.nocookie.net/gensin-impact/images/c/c7/Springvale_Map_Template.png/revision/latest' }, { 'x': 204,	 'y': -291, src: 'https://static.wikia.nocookie.net/gensin-impact/images/1/12/Starfell_Lake_Map_Template.png/revision/latest' }, { 'x': 317,	 'y': -135, src: 'https://static.wikia.nocookie.net/gensin-impact/images/8/85/Starsnatch_Cliff_&_Thousand_Winds_Map_Template.png/revision/latest' }, { 'x': 212,	 'y': -342, src: 'https://static.wikia.nocookie.net/gensin-impact/images/1/19/Stormbearer_Mountains_Map_Template.png/revision/latest' }, { 'x': 386,	 'y': -338, src: 'https://static.wikia.nocookie.net/gensin-impact/images/c/c6/Stormbearer_Point_Map_Template.png/revision/latest' } ];			var valid; console.log(refy, 'refy'); console.log(refx, 'refx'); mapRefs.forEach(function(mapRef) {				if (0<(refx-mapRef.x) && 0<(refy-mapRef.y) && (refx-mapRef.x)<600 && (refy-mapRef.y)<600) {					if (valid) {						if (valid.x > mapRef.x || valid.y > mapRef.y) {valid = mapRef;}					}					else {valid = mapRef;}				}			}); return valid.src; }	};	if (config.wgPageName == 'Special:Map') { mapGenerator.init; } });