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 loadedImages = {};	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 = {						offset: 30,						src: 'https://static.wikia.nocookie.net/gensin-impact/images/9/99/Map-guide-marker-53.png/revision/latest',						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';					markers[markerID].offset = markerTypes[type].offset;					markers[markerID].src = markerTypes[type].src;				}			}); 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 mapInfo = mapGenerator.selectMap(markers[id]);						console.log(mapInfo, 'mapInfo');						if (loadedImages[mapInfo.src]) {							loaded++;						} else {							loadedImages[mapInfo.src] = document.createElement('canvas');							var mapCanvas = loadedImages[mapInfo.src].getContext('2d');							loadedImages[mapInfo.src].height = '600';							loadedImages[mapInfo.src].width = '600';							var imageObj1 = new Image;							imageObj1.crossOrigin = "anonymous";							imageObj1.src = mapInfo.src;							imageObj1.onload = function {								mapCanvas.drawImage(imageObj1, 0, 0);								loaded++;							};						}						if (loadedImages[markers[id].offset]) { loaded++; } else { loadedImages[markers[id].offset] = document.createElement('canvas'); var markerCanvas = loadedImages[markers[id].offset].getContext('2d'); var imageObj2 = new Image; imageObj2.crossOrigin = "anonymous"; imageObj2.src = markers[id].src; imageObj2.onload = function { markerCanvas.drawImage(imageObj2, 0, 0); loaded++; };						}						var waitForImages = function { if (loaded < 2) { window.setTimeout(waitForImages, 100); /* this checks the flag every 100 milliseconds*/ } else { loaded = 0; context.drawImage(loadedImages[mapInfo.src], 0, 0); context.drawImage(loadedImages[markers[id].offset], mapInfo.x-markers[id].offset, mapInfo.y-markers[id].offset); window.open(canvas.toDataURL); canvas.remove; }						};						waitForImages; }				});			}		},		selectMap: function(marker) {			var refx = marker.x - _REFERENCE.x;			var refy = marker.y - _REFERENCE.y;			var mapRefs = [				{ x: -391,	y: -5,		reach: 300,	src: 'https://static.wikia.nocookie.net/gensin-impact/images/6/6e/Wolvendom_Map_Template.png/revision/latest' },				{ x: 200,	y: 107,		reach: 300,	src: 'https://static.wikia.nocookie.net/gensin-impact/images/0/02/Windrise_&_Falcon_Coast_Map_Template.png/revision/latest' },				{ x: -621,	y: -352,	reach: 425,	src: 'https://static.wikia.nocookie.net/gensin-impact/images/2/2b/Stormterror\'s_Lair_Map_Template.png/revision/latest' },				{ x: 199,	y: -134,	reach: 300,	src: 'https://static.wikia.nocookie.net/gensin-impact/images/3/37/Whispering_Woods_Map_Template.png/revision/latest' },				{ x: 396,	y: -345,	reach: 259,	src: 'https://static.wikia.nocookie.net/gensin-impact/images/c/c6/Stormbearer_Point_Map_Template.png/revision/latest' }, { x: 213,	y: -341,	reach: 198,	src: 'https://static.wikia.nocookie.net/gensin-impact/images/1/19/Stormbearer_Mountains_Map_Template.png/revision/latest' }, { x: 324,	y: -137,	reach: 300,	src: 'https://static.wikia.nocookie.net/gensin-impact/images/8/85/Starsnatch_Cliff_&_Thousand_Winds_Map_Template.png/revision/latest' }, { x: 204,	y: -290,	reach: 395,	src: 'https://static.wikia.nocookie.net/gensin-impact/images/1/12/Starfell_Lake_Map_Template.png/revision/latest' }, { x: -29,	y: -66,		reach: 243,	src: 'https://static.wikia.nocookie.net/gensin-impact/images/6/63/Mondstadt_(City)_Map_Template.png/revision/latest' }, { x: 21,	y: 162,		reach: 244,	src: 'https://static.wikia.nocookie.net/gensin-impact/images/c/c7/Springvale_Map_Template.png/revision/latest' }, { x: -174,	y: 378,		reach: 560,	src: 'https://static.wikia.nocookie.net/gensin-impact/images/f/ff/Dragonspine_Map_Template.png/revision/latest' }, { x: 920,	y: 263,		reach: 212,	src: 'https://static.wikia.nocookie.net/gensin-impact/images/b/be/Musk_Reef_Map_Template.png/revision/latest' }, { x: -211,	y: 189,		reach: 243,	src: 'https://static.wikia.nocookie.net/gensin-impact/images/a/a3/Dawn_Winery_Map_Template.png/revision/latest' }, { x: 269,	y: 326,		reach: 345,	src: 'https://static.wikia.nocookie.net/gensin-impact/images/8/82/Dadaupa_Gorge_Map_Template.png/revision/latest' }, { x: -115,	y: -217,	reach: 395,	src: 'https://static.wikia.nocookie.net/gensin-impact/images/2/2a/Cider_Lake_Map_Template.png/revision/latest' }, { x: 488,	y: 346,		reach: 300,	src: 'https://static.wikia.nocookie.net/gensin-impact/images/9/99/Cape_Oath_Map_Template.png/revision/latest' }, { x: -309,	y: -287,	reach: 299,	src: 'https://static.wikia.nocookie.net/gensin-impact/images/d/d7/Brightcrown_Canyon_Map_Template.png/revision/latest' }, ];			var valid; console.log(refy, 'refy'); console.log(refx, 'refx'); mapRefs.forEach(function(mapRef) {				if (refx>mapRef.x && refy>mapRef.y && refx<(mapRef.x+mapRef.reach) && refy<(mapRef.y+mapRef.reach)) {					console.log(mapRef, 'mapRef');					if (valid) {						if ( Math.abs((valid.x+(valid.reach/2))-refx) > Math.abs((mapRef.x+(mapRef.reach/2))-refx) && Math.abs((valid.y+(valid.reach/2))-refy) > Math.abs((mapRef.y+(mapRef.reach/2))-refy) ) { valid = mapRef; }					}					else { valid = mapRef; }				}			}); if (valid) { return { src: valid.src, x: (refx-valid.x)/valid.reach*600, y: (refy-valid.y)/valid.reach*600 };			} else { alert ('No map available for the marker'); } }	};	if (config.wgPageName == 'Special:Map') { mapGenerator.init; } });