☰

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