☰

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.3
// @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 playersList = document.querySelector('#gamePlayersList');
const innerCanvas = document.querySelector('#canvas');
const columnRight = document.querySelector('.columnRight');

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

function onResize() {
  	fixHeader();
  	if (gameParent.classList.contains("gameParentSettings")) return;
	localStorage.gameParentWidth = gameParent.style.width;
}

function fixHeader() {
  	const height = gameParent.getBoundingClientRect().height;
  	const canvasHeight = innerCanvas.getBoundingClientRect().height || 
		  				 columnRight.getBoundingClientRect().height;
	playersList.style.maxHeight = `${canvasHeight}px`;
  	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`);
  
	new ResizeObserver(onResize).observe(gameParent);
	canvasObserver.observe(document.querySelector(".game"), { attributes: true });
	canvasObserver.observe(canvas, { attributes: true });
})();