☰

Fullscreen - Bonk.io

Adds a button to enter fullscreen

  1. // ==UserScript==
  2. // @name         Fullscreen - Bonk.io
  3. // @description  Adds a button to enter fullscreen
  4. // @author       Excigma
  5. // @namespace    https://github.com/Excigma
  6. // @license      GPL-3.0
  7. // @version      0.0.5
  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 max_width = `${Math.min(unsafeWindow.innerWidth / 730, unsafeWindow.innerHeight / 500) * 730 * 0.9}px`;
  33. 			map_editor_style.maxHeight = "calc(100vh - 70px)";
  34. 			lobby_style.maxHeight = "calc(100vh - 70px)";
  35. 			map_editor_style.maxWidth = max_width;
  36. 			lobby_style.maxWidth = max_width;
  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. 				
  46. 				// Limit the size of the chat and map editor
  47. 				limit_size();
  48. 			} else {
  49. 				document.body.classList.remove("fullscreen");
  50. 				parent_document.body.classList.remove("fullscreen");
  51.  
  52. 				// Stop limiting the size
  53. 				map_editor_style.maxHeight = "calc(100vh - 70px)";
  54. 				lobby_style.maxHeight = "100%";
  55. 				map_editor_style.maxWidth = "90vw";
  56. 				lobby_style.maxWidth = "100%";
  57. 			}
  58. 		});
  59. 	
  60. 		unsafeWindow.addEventListener("resize", () => {
  61. 			if (fullscreen) setTimeout(limit_size, 50);
  62. 		});
  63.  
  64. 		// eslint-disable-next-line no-undef
  65. 		GM_addStyle(`
  66. 			#pretty_top_fullscreen {
  67. 				width: 58px;
  68. 				height: 34px;
  69. 				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");
  70. 				background-size: 24px 24px;
  71. 				background-repeat: no-repeat;
  72. 				background-position: center;
  73. 				position: absolute;
  74. 				right: ${(button_count * 58) + 1}px;
  75. 				top: 0;
  76. 			}
  77.  
  78. 			.fullscreen #pretty_top_fullscreen {
  79. 				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;
  80. 			}
  81.  
  82. 			/* Move the game frame to the top, so the adverts do not interfere with clicking*/
  83. 			.fullscreen #maingameframe {
  84. 				z-index: 10000;
  85. 			}
  86.  
  87. 			/* 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 */
  88. 			.fullscreen #bonkiocontainer {
  89. 				height: 100vh !important;
  90. 				width: 100vw !important;
  91. 				border: none !important;
  92. 			}
  93.  
  94. 			/* Makes the countdown partially transparent, as some maps spawn you there */
  95. 			.fullscreen #ingamecountdown {
  96. 				opacity: 75%;
  97. 			}
  98.  
  99. 			/* The actual canvas where the game is drawn; this does NOT include buttons, menus etc */
  100. 			/* 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 */
  101. 			/* also hides the cursor while you're hovering over the game canvas */
  102. 			.fullscreen #gamerenderer {
  103. 				text-align: center !important;
  104. 			}
  105.  
  106. 			.fullscreen #gamerenderer>canvas {
  107. 				display: inline-block !important;
  108. 			}
  109.  
  110. 			/* Center the Bonk.io main menu replays */
  111. 			.fullscreen #bgreplay {
  112. 				text-align: center !important;
  113. 			}
  114.  
  115. 			.fullscreen #bgreplay>canvas {
  116. 				display: inline-block !important;
  117. 			}
  118.  
  119. 			/* Moves the XP bar down a bit, so it's visible when in fullscreen*/
  120. 			.fullscreen #xpbarcontainer {
  121. 				top: -3px !important;
  122. 			}
  123. 		`);
  124. 	} else {
  125. 		// eslint-disable-next-line no-undef
  126. 		GM_addStyle(`
  127. 			.fullscreen #maingameframe {
  128. 				position: fixed !important;
  129. 				margin-top: 0px !important;
  130. 				z-index: 99999 !important;
  131. 			}
  132. 			.fullscreen #bonkioheader {
  133. 				display:none;
  134. 			}
  135. 			body.fullscreen {
  136. 				overflow: hidden;
  137. 			}
  138. 		`);
  139. 	}
  140. })();