☰

GeoGuessr Bigger Map on Map-Maker

Enables the user to have a bigger map when using the map-maker. It also hides top bar and sidebar.

当前为 2022-03-18 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name          GeoGuessr Bigger Map on Map-Maker
  3. // @namespace     MrMike/GeoGuessr/GeoGuessrBiggerMapOnMapMaker
  4. // @version       0.7.0
  5. // @description   Enables the user to have a bigger map when using the map-maker. It also hides top bar and sidebar.
  6. // @author        MrAmericanMike
  7. // @include       /^(https?)?(\:)?(\/\/)?([^\/]*\.)?geoguessr\.com($|\/.*)/
  8. // @grant         GM_addStyle
  9. // @require       https://cdn.jsdelivr.net/npm/arrive@2.4.1/src/arrive.min.js
  10. // @run-at        document-start
  11. // ==/UserScript==
  12.  
  13. (function () {
  14. 	"use strict";
  15.  
  16. 	const DEFAULT = {
  17. 		deleteKey: true,
  18. 		preventLeave: true
  19. 	}
  20.  
  21. 	if (!localStorage.getItem("bmomm")) {
  22. 		localStorage.setItem("bmomm", JSON.stringify(DEFAULT));
  23. 	}
  24.  
  25. 	const CONFIG = { ...DEFAULT, ...JSON.parse(localStorage.getItem("bmomm")) };
  26.  
  27. 	localStorage.setItem("bmomm", JSON.stringify(CONFIG));
  28.  
  29. 	document.arrive(".map-maker-map", () => {
  30. 		if (!document.querySelector("#settings-button")) {
  31. 			addListeners();
  32. 			doStyles();
  33. 			addSettings();
  34. 		}
  35. 	});
  36.  
  37. 	document.leave(".map-maker-map", () => {
  38. 		console.log("HERE");
  39. 		if (!window.location.pathname.includes("map-maker")) {
  40. 			if (CONFIG.deleteKey) {
  41. 				document.removeEventListener("keydown", keyDown, true);
  42. 			}
  43. 			if (CONFIG.preventLeave) {
  44. 				window.removeEventListener("beforeunload", tryPreventLeave);
  45. 			}
  46. 			resetStyles();
  47. 			removeSettings();
  48. 			console.log("HERE2");
  49. 		}
  50. 	});
  51.  
  52. 	function addSettings() {
  53. 		const SETTINGS_BUTTON = document.createElement("div");
  54. 		SETTINGS_BUTTON.setAttribute("id", "settings-button");
  55. 		SETTINGS_BUTTON.setAttribute("title", "Bigger Map on Map-Maker Settings");
  56. 		SETTINGS_BUTTON.innerHTML = "<div style='font-size: 0.85vw;'>&#10020;</div>";
  57. 		SETTINGS_BUTTON.style.display = "flex";
  58. 		SETTINGS_BUTTON.style.justifyContent = "center";
  59. 		SETTINGS_BUTTON.style.alignItems = "center";
  60. 		SETTINGS_BUTTON.style.position = "fixed";
  61. 		SETTINGS_BUTTON.style.top = "1vh";
  62. 		SETTINGS_BUTTON.style.right = "0.1vw";
  63. 		SETTINGS_BUTTON.style.width = "0.8vw";
  64. 		SETTINGS_BUTTON.style.height = "0.8vw";
  65. 		SETTINGS_BUTTON.style.backgroundColor = "dodgerblue";
  66. 		SETTINGS_BUTTON.style.borderRadius = "1vw";
  67. 		SETTINGS_BUTTON.style.cursor = "pointer";
  68. 		SETTINGS_BUTTON.style.zIndex = 9999;
  69.  
  70. 		const SETTINGS = document.createElement("div");
  71. 		SETTINGS.setAttribute("id", "settings-content");
  72. 		SETTINGS.style.position = "fixed";
  73. 		SETTINGS.style.padding = "8px 16px";
  74. 		SETTINGS.style.textAlign = "center";
  75. 		SETTINGS.style.color = "aliceblue";
  76. 		SETTINGS.style.top = "1vh";
  77. 		SETTINGS.style.right = "1%";
  78. 		SETTINGS.style.width = "210px";
  79. 		SETTINGS.style.height = "auto";
  80. 		SETTINGS.style.backgroundColor = "#20203099";
  81. 		SETTINGS.style.borderRadius = "8px";
  82. 		SETTINGS.style.zIndex = 9999;
  83. 		SETTINGS.style.display = "none";
  84. 		SETTINGS.innerHTML = `
  85. 		<div style="display: flex; margin: 0 auto; margin-bottom: 12px; justify-content: space-between; align-items: center;">
  86. 			<h3 title='When enabled, pressing Delete on Keyboard will delete the selected location'>Enable Delete Key</h3>
  87. 			<input id="delete-key" type="checkbox" title='When enabled, pressing Delete on Keyboard will delete the selected location'/>
  88. 		</div>
  89. 		<div style="display: flex; margin: 0 auto; margin-bottom: 12px; justify-content: space-between; align-items: center;">
  90. 			<h3 title='Attempts to prevent the user leaving the page by mistake'>Attempt to prevent leaving page</h3>
  91. 			<input id="prevent-leave" type="checkbox" title='Attempts to prevent the user leaving the page by mistake'/>
  92. 		</div>
  93. 		`;
  94.  
  95. 		document.body.append(SETTINGS_BUTTON);
  96. 		document.body.append(SETTINGS);
  97.  
  98. 		const deleteKey = document.querySelector("#delete-key");
  99. 		const preventLeave = document.querySelector("#prevent-leave");
  100. 		deleteKey.checked = CONFIG.deleteKey;
  101. 		preventLeave.checked = CONFIG.preventLeave;
  102.  
  103. 		deleteKey.addEventListener("click", (event) => {
  104. 			if (deleteKey.checked) {
  105. 				document.addEventListener("keydown", keyDown, true);
  106. 			}
  107. 			else {
  108. 				document.removeEventListener("keydown", keyDown, true);
  109. 			}
  110. 			CONFIG.deleteKey = deleteKey.checked;
  111. 			localStorage.setItem("bmomm", JSON.stringify(CONFIG));
  112. 		});
  113.  
  114. 		preventLeave.addEventListener("click", (event) => {
  115. 			if (preventLeave.checked) {
  116. 				window.addEventListener("beforeunload", tryPreventLeave);
  117. 			}
  118. 			else {
  119. 				window.removeEventListener("beforeunload", tryPreventLeave);
  120. 			}
  121. 			CONFIG.preventLeave = preventLeave.checked;
  122. 			localStorage.setItem("bmomm", JSON.stringify(CONFIG));
  123. 		});
  124.  
  125. 		SETTINGS_BUTTON.addEventListener("click", () => {
  126. 			if (SETTINGS.style.display == "none") {
  127. 				SETTINGS.style.display = "block";
  128. 			}
  129. 			else {
  130. 				SETTINGS.style.display = "none";
  131. 			}
  132. 		})
  133.  
  134. 	}
  135.  
  136. 	function removeSettings() {
  137. 		document.querySelector("#settings-button").remove();
  138. 		document.querySelector("#settings-content").remove();
  139. 	}
  140.  
  141. 	function doStyles() {
  142. 		GM_addStyle(`
  143. 		div[class^='classic_header__']{
  144. 			display: none !important;
  145. 		}
  146. 		aside{
  147. 			display: none !important;
  148. 		}
  149. 		.container{
  150. 			margin-bottom: 64px !important;
  151. 		}
  152. 		.title{
  153. 			display: none !important;
  154. 		}
  155. 		.map-type__description{
  156. 			display: none !important;
  157. 		}
  158. 		.margin--bottom-large {
  159. 			margin-top: 0.5rem !important;
  160. 			margin-bottom: 0.5rem !important;
  161. 		}
  162. 		div[class^='classic_layout__']{
  163. 			grid-template-columns: 0rem 1fr !important;
  164. 			grid-template-rows: 1vh 1fr auto !important;
  165. 		}
  166. 		main[class^='classic_main__']{
  167. 			padding: 0px !important;
  168. 			grid-column: 2 !important;
  169. 			grid-row: 2 !important;
  170. 		}
  171. 		.container--large {
  172. 			--width: 98% !important;
  173. 		}
  174. 		.streetview-panel {
  175. 			max-height: 100% !important;
  176. 			width: 50vw !important;
  177. 		}
  178. 		.map-maker-map__search {
  179. 			width: 60vw !important;
  180. 		}
  181. 		@media only screen and (max-width: 1200px) {
  182. 			div[class^='classic_layout__']{
  183. 				grid-template-columns: 1fr !important;
  184. 			}
  185. 			main[class^='classic_main__']{
  186. 				grid-column: 1 !important;
  187. 			}
  188. 		}
  189. 		`);
  190. 	}
  191.  
  192. 	function resetStyles() {
  193. 		GM_addStyle(`
  194. 		div[class^='classic_header__']{
  195. 			display: grid !important;
  196. 		}
  197. 		aside{
  198. 			display: block !important;
  199. 		}
  200. 		.container{
  201. 			margin-bottom: 0px !important;
  202. 		}
  203. 		.title{
  204. 			display: block !important;
  205. 		}
  206. 		.map-type__description{
  207. 			display: block !important;
  208. 		}
  209. 		.margin--bottom-large {
  210. 			margin-top: 0rem !important;
  211. 			margin-bottom: 2.5rem !important;
  212. 		}
  213. 		div[class^='classic_layout__']{
  214. 			grid-template-columns: 18rem 1fr !important;
  215. 			grid-template-rows: var(--layout-header-height) 1fr auto !important;
  216. 		}
  217. 		main[class^='classic_main__']{
  218. 			padding: var(--layout-content-padding-top) var(--layout-content-horizontal-padding) var(--layout-content-padding-bottom) !important;
  219. 			grid-row: 2 !important;
  220. 		}
  221. 		.container--large {
  222. 			--width: 87.5rem !important;
  223. 		}
  224. 		.streetview-panel {
  225. 			max-height: 30rem !important;
  226. 			width: 35rem !important;
  227. 		}
  228. 		.map-maker-map__search {
  229. 			width: 20rem !important;
  230. 		}
  231. 		`);
  232. 	}
  233.  
  234. 	function keyDown(event) {
  235. 		if (event.key == "Delete") {
  236. 			let buttons = document.getElementsByClassName("button--danger");
  237. 			for (let x = 0; x < buttons.length; x++) {
  238. 				if (buttons[x].textContent == "Delete") {
  239. 					buttons[x].click();
  240. 				}
  241. 			}
  242. 		}
  243. 	}
  244.  
  245. 	function tryPreventLeave(event) {
  246. 		if (event.path[0].location.pathname.includes("map-maker")) {
  247. 			event.preventDefault();
  248. 			return event.returnValue = "Are you sure you want to exit?";
  249. 		}
  250. 	}
  251.  
  252. 	function addListeners() {
  253. 		if (CONFIG.deleteKey) {
  254. 			document.addEventListener("keydown", keyDown, true);
  255. 		}
  256. 		if (CONFIG.preventLeave) {
  257. 			window.addEventListener("beforeunload", tryPreventLeave);
  258. 		}
  259. 	}
  260.  
  261. 	if (window.location.pathname.includes("map-maker")) {
  262. 		if (!document.querySelector("#settings-button")) {
  263. 			addListeners();
  264. 			doStyles();
  265. 			addSettings();
  266. 		}
  267. 	}
  268. })();