☰

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

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.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();
	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 });
	$('[id^="money"]').remove();
})();