☰

Resizable Canvas

Change the size of the canvas

当前为 2020-07-30 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        Resizable Canvas
  3. // @namespace   Violentmonkey Scripts
  4. // @match       https://sketchful.io/
  5. // @grant       none
  6. // @version     2.3
  7. // @author      Bell
  8. // @description Change the size of the canvas
  9. // jshint esversion: 6
  10. // ==/UserScript==
  11.  
  12. const topMargin = "0.6vh";
  13. const maxWidth = "100vw";
  14.  
  15. const canvas = document.querySelector("#gameCanvas");
  16. const gameParent = document.querySelector(".gameParent");
  17. const header = document.querySelector('.gameHeader');
  18. const playersList = document.querySelector('#gamePlayersList');
  19. const innerCanvas = document.querySelector('#canvas');
  20. const columnRight = document.querySelector('.columnRight');
  21.  
  22. const canvasObserver = new MutationObserver(() => {
  23.   	if (canvas.style.display !== "none") {
  24.     	gameParent.style.maxWidth = maxWidth; 
  25. 		gameParent.style.width = localStorage.gameParentWidth || '180vh';
  26. 	  	gameParent.style.resize = "horizontal";
  27.     }
  28.     else {
  29. 		gameParent.style.maxWidth = ""; 
  30. 	  	gameParent.style.width = "";
  31. 	  	gameParent.style.resize = "";
  32. 	}
  33. });
  34.  
  35. function onResize() {
  36.   	fixHeader();
  37.   	if (gameParent.classList.contains("gameParentSettings")) return;
  38. 	localStorage.gameParentWidth = gameParent.style.width;
  39. }
  40.  
  41. function fixHeader() {
  42.   	const height = gameParent.getBoundingClientRect().height;
  43.   	const canvasHeight = innerCanvas.getBoundingClientRect().height || 
  44. 		  				 columnRight.getBoundingClientRect().height;
  45. 	playersList.style.maxHeight = `${canvasHeight}px`;
  46.   	if (window.innerHeight - height > 180) header.style.display = "";
  47.   	else header.style.display = "none";
  48. }
  49.  
  50.  
  51. (function init() {
  52. 	header.remove();
  53.   	$('[id^="money"]').remove();
  54. 	document.querySelector('.game').appendChild(header);
  55. 	document.querySelector(".gameContainer").style.marginTop = "0px";
  56. 	gameParent.setAttribute("style", `overflow: hidden; left: 50%; top: 50%; 
  57. 							transform: translate(-50%, -50%); position: absolute;
  58. 							padding-top: 12px`);
  59.   
  60. 	new ResizeObserver(onResize).observe(gameParent);
  61. 	canvasObserver.observe(document.querySelector(".game"), { attributes: true });
  62. 	canvasObserver.observe(canvas, { attributes: true });
  63. })();