☰

Resizable Canvas

Change the size of the canvas

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

const maxWidth = '110vw';
const headerOn = false;

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 && headerOn) 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();
})();

const interface = document.querySelector("#gameInterface");
interface.style.cursor = "move";
interface.addEventListener('mousedown', (e) => {
	if (e.target !== interface) return;
	startDrag();
});

function startDrag() {
	document.addEventListener('mouseup', finishDrag);
	document.addEventListener('mousemove', moveGameParent);
}

function moveGameParent(e) {
	gameParent.style.top = (gameParent.offsetTop + e.movementY) + "px";
}

function finishDrag() {
	document.removeEventListener('mouseup', finishDrag);
	document.removeEventListener('mousemove', moveGameParent);
}