☰

Resizable Canvas

Change the size of the canvas

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

// ==UserScript==
// @name        Resizable Canvas
// @namespace   Violentmonkey Scripts
// @match       https://sketchful.io/
// @grant       none
// @version     2.2
// @author      Bell
// @description Change the size of the canvas
// jshint esversion: 6
// ==/UserScript==

const topMargin = "0.6vh";
const maxWidth = "100vw";

const canvas = document.querySelector("#gameCanvas");
const gameParent = document.querySelector(".gameParent");
const header = document.querySelector('.gameHeader');

const canvasObserver = new MutationObserver(() => {
  	if (canvas.style.display !== "none") {
    	gameParent.style.maxWidth = maxWidth; 
		gameParent.style.width = localStorage.gameParentWidth || '180vh';
	  	gameParent.style.resize = "horizontal";
    }
    else {
		gameParent.style.maxWidth = ""; 
	  	gameParent.style.width = "";
	  	gameParent.style.resize = "";
	}
});

const widthObserver = new MutationObserver(() => {
	localStorage.gameParentWidth = gameParent.style.width;
  	window.dispatchEvent(new Event("resize"));
});

function checkHeader() {
  	const height = gameParent.getBoundingClientRect().height;
  	if (window.innerHeight - height > 180) header.style.display = "";
  	else header.style.display = "none";
}

(function init() {
	header.remove();
  	$('[id^="money"]').remove();
	document.querySelector('.game').appendChild(header);
	document.querySelector(".gameContainer").style.marginTop = "0px";
	gameParent.setAttribute("style", `overflow: hidden; left: 50%; top: 50%; 
							transform: translate(-50%, -50%); position: absolute;
							padding-top: 12px`);

	window.addEventListener("resize", checkHeader);
	widthObserver.observe(gameParent, { attributes: true });
	canvasObserver.observe(document.querySelector(".game"), { attributes: true });
	canvasObserver.observe(canvas, { attributes: true });
})();