☰

Fullscreen - Bonk.io

Adds a button to enter fullscreen

当前为 2021-11-29 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Fullscreen - Bonk.io
  3. // @description  Adds a button to enter fullscreen
  4. // @author       Excigma
  5. // @namespace    https://greasyfork.org/users/416480
  6. // @license      GPL-3.0
  7. // @version      0.0.2
  8. // @match        https://bonk.io/*
  9. // @grant        GM_addStyle
  10. // @grant        unsafeWindow
  11. // @run-at       document-idle
  12. // ==/UserScript==
  13.  
  14. (() => {
  15. 	if (unsafeWindow.parent !== unsafeWindow) {
  16. 		let fullscreen = false;
  17.  
  18. 		const parent_document = unsafeWindow.parent.document;
  19. 		const fullscreen_button = document.createElement("div");
  20. 		const pretty_top_bar = document.getElementById("pretty_top_bar");
  21. 		const button_count = document.querySelectorAll("#pretty_top_bar>.pretty_top_button.niceborderleft").length;
  22. 		const map_editor_style = document.getElementById("mapeditor").style;
  23. 		const lobby_style = document.getElementById("newbonklobby").style;
  24.  
  25. 		fullscreen_button.id = "pretty_top_fullscreen";
  26. 		fullscreen_button.classList.add("pretty_top_button", "niceborderleft");
  27. 		pretty_top_bar.appendChild(fullscreen_button);
  28. 	
  29. 		// Thanks to kklkkj for this
  30. 		// https://github.com/kklkkj/kklee/blob/3d93fb10134bfc6c0b9bd98b413edc511a53ae21/src/injector.js#L283
  31. 		const limit_size = () => {
  32. 			const scale = Math.min(unsafeWindow.innerWidth / 730, unsafeWindow.innerHeight / 500);
  33. 			map_editor_style.maxHeight = `${scale * 500 * 0.9}px`;
  34. 			map_editor_style.maxWidth = `${scale * 730 * 0.9}px`;
  35. 			lobby_style.maxHeight = `${scale * 500 * 0.9}px`;
  36. 			lobby_style.maxWidth = `${scale * 730 * 0.9}px`;
  37. 		};
  38.  
  39. 		fullscreen_button.addEventListener("click", () => {
  40. 			fullscreen = !fullscreen;
  41.  
  42. 			if (fullscreen) {
  43. 				document.body.classList.add("fullscreen");
  44. 				parent_document.body.classList.add("fullscreen");
  45. 				limit_size();
  46. 			} else {
  47. 				document.body.classList.remove("fullscreen");
  48. 				parent_document.body.classList.remove("fullscreen");
  49.  
  50. 				// Stop limiting the size
  51. 				lobby_style.maxHeight = "100%";
  52. 				lobby_style.maxWidth = "100%";
  53. 				map_editor_style.maxHeight = "100%";
  54. 				map_editor_style.maxWidth = "100%";
  55. 			}
  56. 		});
  57. 	
  58. 		unsafeWindow.addEventListener("resize", () => {
  59. 			if (fullscreen) limit_size();
  60. 		});
  61.  
  62. 		// eslint-disable-next-line no-undef
  63. 		GM_addStyle(`
  64. 			#pretty_top_fullscreen {
  65. 				width: 58px;
  66. 				height: 34px;
  67. 				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath d='M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'/%3E%3C/svg%3E");
  68. 				background-size: 24px 24px;
  69. 				background-repeat: no-repeat;
  70. 				background-position: center;
  71. 				position: absolute;
  72. 				right: ${(button_count * 58) + 1}px;
  73. 				top: 0;
  74. 			}
  75.  
  76. 			.fullscreen #pretty_top_fullscreen {
  77. 				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath d='M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z'/%3E%3C/svg%3E") !important;
  78. 			}
  79.  
  80. 			/* Move the game frame to the top, so the adverts do not interfere with clicking*/
  81. 			.fullscreen #maingameframe {
  82. 				z-index: 10000;
  83. 			}
  84.  
  85. 			/* Makes the main game section have no border, have 100% of it's parent's height, and 100% of it's parent's width (in this case the size of your screen */
  86. 			.fullscreen #bonkiocontainer {
  87. 				height: 100vh !important;
  88. 				width: 100vw !important;
  89. 				border: none !important;
  90. 			}
  91.  
  92. 			/* Makes the countdown partially transparent, as some maps spawn you there */
  93. 			.fullscreen #ingamecountdown {
  94. 				opacity: 75%;
  95. 			}
  96.  
  97. 			/* The actual canvas where the game is drawn; this does NOT include buttons, menus etc */
  98. 			/* Tells it to make the position absolute on the screen (doesn't care about parent) and move it to the right? idk what i did here lol i wrote it ages ago but it works */
  99. 			/* also hides the cursor while you're hovering over the game canvas */
  100. 			.fullscreen #gamerenderer {
  101. 				text-align: center !important;
  102. 			}
  103.  
  104. 			.fullscreen #gamerenderer>canvas {
  105. 				display: inline-block !important
  106. 			}
  107.  
  108. 			/* Center the Bonk.io main menu replays */
  109. 			.fullscreen #bgreplay {
  110. 				text-align: center !important;
  111. 			}
  112.  
  113. 			.fullscreen #bgreplay>canvas {
  114. 				display: inline-block !important
  115. 			}
  116.  
  117. 			/* Moves the XP bar down a bit, so it's visible when in fullscreen*/
  118. 			.fullscreen #xpbarcontainer {
  119. 				transform: translateY(5px);
  120. 			}
  121. 		`);
  122. 	} else {
  123. 		// eslint-disable-next-line no-undef
  124. 		GM_addStyle(`
  125. 			.fullscreen #maingameframe {
  126. 				position: fixed !important;
  127. 				margin-top: 0px !important;
  128. 				z-index: 99999 !important;
  129. 			}
  130. 			.fullscreen #bonkioheader {
  131. 				display:none;
  132. 			}
  133. 			body.fullscreen {
  134. 				overflow-y: hidden;
  135. 			}
  136. 		`);
  137. 	}
  138. })();