☰

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
// @author      Bell
// @description Change the size of the canvas
// jshint esversion: 6
// ==/UserScript==

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

$('[id^="money"]').remove();
document.querySelector('.gameHeader').style.display = "none";

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

gameParent.style.overflow = "hidden";
gameParent.style.resize = "horizontal";

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

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

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