☰

Resizable Canvas

Change the size of the canvas

目前为 2020-07-29 提交的版本。查看 最新版本。

// ==UserScript==
// @name        Resizable Canvas
// @namespace   Violentmonkey Scripts
// @match       https://sketchful.io/
// @grant       none
// @version     2.1
// @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');

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

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 = "";
	}
 	checkHeader();
});

const widthObserver = new MutationObserver(() => {
  	checkHeader();
	localStorage.gameParentWidth = gameParent.style.width;
});

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

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