☰

Color Picker

Color picker for Sketchful

目前为 2020-08-12 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name        Color Picker
  3. // @namespace   https://greasyfork.org/users/281093
  4. // @match       https://sketchful.io/*
  5. // @grant       none
  6. // @version     0.7.2
  7. // @author      Bell
  8. // @description Color picker for Sketchful
  9. // @require		https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js
  10. // @run-at      document-end
  11. // jshint esversion: 6
  12. // ==/UserScript==
  13.  
  14. const defaultPalettes = [
  15. 	[
  16. 		'#ffffff', '#d3d1d2', '#f70f0f', '#ff7200', '#fce700', '#02cb00', '#01fe94', '#05b0ff', '#221ecd', '#a300bd', '#cc7fad', '#fdad88', '#9e5425',
  17. 		'#514f54', '#a9a7a8', '#ae0b00', '#c84706', '#ec9e06', '#007612', '#049d6f', '#00579d', '#0f0b96', '#6e0083', '#a65673', '#e38a5e', '#5e320d',
  18. 		'#000000', '#827c80', '#57060c', '#8b2500', '#9e6600', '#003f00', '#00766a', '#003b75', '#0e0151', '#3c0350', '#73314d', '#d1754e', '#421e06',
  19. 	],
  20.  
  21. 	[
  22. 		'#3a3a3c', '#8e8e93', '#f8f9fa', '#ffadad', '#ffd6a5', '#fdffb6', '#caffbf', '#9bf6ff', '#a0c4ff', '#bdb2ff', '#ffc6ff', '#fdad88', '#9e5425',
  23. 		'#2c2c2e', '#636366', '#e0e0e0', '#ff7070', '#f3a220', '#f9e079', '#049d6f', '#92ddea', '#6dafe0', '#ab87ff', '#ff87ab', '#e38a5e', '#5e320d',
  24. 		'#1c1c1e', '#48484a', '#c2c2c2', '#f54d4d', '#dc8700', '#f0c808', '#00766a', '#219bc3', '#548bbc', '#715aff', '#ff5d8f', '#d1754e', '#421e06',
  25. 	],
  26.  
  27. 	[
  28. 		'#081c15', '#1b4332', '#2d6a4f', '#40916c', '#52b788', '#74c69d', '#95d5b2', '#b7e4c7', '#d8f3dc', '#000000', '#faf9f9', '#ffd6ba', '#fec89a',
  29. 		'#774936', '#8a5a44', '#9d6b53', '#b07d62', '#c38e70', '#cd9777', '#d69f7e', '#deab90', '#e6b8a2', '#edc4b3', '#ffb5a7', '#fcd5ce', '#f8edeb',
  30. 		'#cb997e', '#eddcd2', '#fff1e6', '#f0efeb', '#ddbea9', '#a5a58d', '#b7b7a4', '#6d6875', '#b5838d', '#e5989b', '#ffb4a2', '#ffcdb2', '#f9dcc4',
  31. 	],
  32.  
  33. 	[
  34. 		'#10002b', '#240046', '#3c096c', '#5a189a', '#7b2cbf', '#9d4edd', '#c77dff', '#e0aaff', '#efcefa', '#d4b2d8', '#a88fac', '#826c7f', '#5d4e60',
  35. 		'#7c6f93', '#886f93', '#a967ad', '#ad6789', '#db81ad', '#ff6c91', '#ff736c', '#ff9e46', '#faa275', '#ff8c61', '#ce6a85', '#985277', '#5c374c',
  36. 		'#721b65', '#b80d57', '#f8615a', '#ffd868', '#bb596b', '#f96d80', '#ff9a76', '#ffc4a3', '#00e0ff', '#74f9ff', '#a6fff2', '#e8ffe8', '#ffffff',
  37. 	],
  38.  
  39. 	[
  40. 		'#007f5f', '#2b9348', '#55a630', '#80b918', '#aacc00', '#bfd200', '#d4d700', '#dddf00', '#eeef20', '#ffff3f', '#03045e', '#0077b6', '#00b4d8',
  41. 		'#ff4800', '#ff5400', '#ff6000', '#ff6d00', '#ff7900', '#ff8500', '#ff9100', '#ff9e00', '#ffaa00', '#ffb600', '#90e0ef', '#caf0f8', '#000000',
  42. 		'#143642', '#263c41', '#38413f', '#4a473e', '#5c4d3c', '#6f523b', '#815839', '#935e38', '#a56336', '#b76935', '#000000', '#ffffff', '#ffffff',
  43. 	],
  44. ];
  45. let palettes = JSON.parse(localStorage.getItem('palettes')) || defaultPalettes;
  46. let paletteIndex = parseInt(localStorage.getItem('paletteIndex')) || 0;
  47. let lockedPalettes = JSON.parse(localStorage.getItem('lockedPalettes')) || [0];
  48. let activeColor = {
  49. 	node: null,
  50. 	index: null,
  51. };
  52.  
  53. const canvas = document.querySelector('#canvas');
  54. const ctx = canvas.getContext('2d');
  55. const gameTools = document.querySelector('#gameTools');
  56. const chatBox = document.querySelector('#gameChat');
  57. const colorButtons = document.querySelectorAll('.gameToolsColor');
  58. const colorsDiv = document.querySelector('#gameToolsColors');
  59. const colorButton = document.querySelector('#gameToolsColors > div:nth-child(1) > div:nth-child(1)');
  60.  
  61. const colorPickerWrapper = document.createElement('div');
  62. const colorInput = document.createElement('input');
  63. const colorPicker = document.createElement('input');
  64. const inputStyle = 'margin: 5px 0; height: 20px; width: 35%; text-align: center; border: none;font-weight: 800; border-radius: 5px; background-color: #CBCBCB;';
  65. const wrapperStyle = 'position: absolute; margin: 5px 35%; height: 20px; width: 37px; border-radius: 5px;';
  66.  
  67. (function init() {
  68. 	addPicker();
  69. 	updatePageStyle();
  70. 	addObservers();
  71. 	addListeners();
  72. 	changePalette();
  73. })();
  74.  
  75. function addPicker() {
  76. 	colorPicker.type = 'color';
  77. 	colorPicker.setAttribute('style', 'opacity: 0; width: 37px; cursor: pointer;');
  78. 	colorPicker.oninput = updatePicker;
  79. 	colorPicker.setAttribute('data-toggle', 'tooltip');
  80. 	colorPicker.setAttribute('data-original-title', 'Color Picker');
  81. 	colorPicker.setAttribute('data-placement', 'bottom');
  82. 	colorPicker.title = 'Color Picker';
  83.  
  84. 	colorPickerWrapper.setAttribute('style', wrapperStyle);
  85. 	colorPickerWrapper.style.backgroundColor = colorPicker.value;
  86. 	colorPickerWrapper.appendChild(colorPicker);
  87. 	gameTools.appendChild(colorPickerWrapper);
  88.  
  89. 	colorInput.oninput = updateInput;
  90. 	colorInput.onclick = selectInputText;
  91. 	colorInput.setAttribute('style', inputStyle);
  92. 	colorInput.setAttribute('spellcheck', 'false');
  93. 	colorInput.setAttribute('maxlength', '7');
  94. 	colorInput.value = colorPicker.value;
  95. 	gameTools.appendChild(colorInput);
  96. 	addButtons();
  97. }
  98.  
  99. function addObservers() {
  100. 	const heightObserver = new MutationObserver(adjustChatSize);
  101. 	const config = {
  102. 		attributes: true,
  103. 	};
  104. 	heightObserver.observe(gameTools, config);
  105. 	heightObserver.observe(chatBox, config);
  106. }
  107.  
  108. let pickingColor = false;
  109. function pickerIconOn(e) {
  110. 	if (e.code !== 'AltLeft') return;
  111. 	canvas.style.cursor = 'crosshair';
  112. 	pickingColor = true;
  113. 	e.preventDefault();
  114. }
  115.  
  116. function pickerIconOff(e) {
  117. 	if (e.code !== 'AltLeft' || !pickingColor) return;
  118. 	pickingColor = false;
  119. 	regenerateCursor();
  120. 	e.preventDefault();
  121. }
  122.  
  123. function regenerateCursor() {
  124. 	const selectedTool = document.querySelector('.gameToolsSelected');
  125. 	selectedTool.id === 'gameToolsDraw' ? selectedTool.nextSibling.click() :
  126. 		selectedTool.previousSibling.click();
  127. 	selectedTool.click();
  128. }
  129.  
  130. function addListeners() {
  131. 	canvas.addEventListener('pointerdown', pickCanvasColor, false);
  132. 	document.addEventListener('keydown', pickerIconOn, true);
  133. 	document.addEventListener('keyup', pickerIconOff, true);
  134.  
  135. 	const saveBtn = document.querySelector('#savePalette');
  136. 	saveBtn.addEventListener('dragenter', highlight, false);
  137. 	saveBtn.addEventListener('dragleave', unhighlight, false);
  138. 	saveBtn.addEventListener('drop', handleDrop, false);
  139. 	saveBtn.addEventListener('dragover', e => {
  140. 		e.preventDefault();
  141. 	}, false);
  142.  
  143. 	document.addEventListener('keydown', e => {
  144. 		if (e.altKey && e.shiftKey && !isPaletteLocked(paletteIndex)) {
  145. 			colorsDiv.style.boxShadow = '0 0 0 2px red';
  146. 		}
  147. 	}, false);
  148. 	document.addEventListener('keyup', e => {
  149. 		if (e.altKey || e.shiftKey) {
  150. 			colorsDiv.style.boxShadow = '';
  151. 		}
  152. 	}, false);
  153. 	
  154. 	document.addEventListener('paste', e => {
  155. 		if (document.activeElement.tagName === "INPUT") return;
  156. 		const paste = (e.clipboardData || window.clipboardData).getData('text');
  157. 		const coolorRegex = /coolors\.co\/([a-f0-9-]+)/;
  158. 		const match = coolorRegex.exec(paste);
  159. 		if (match)
  160. 			addHexFromString(match[1]);
  161. 	}, false);
  162. 	
  163. 	colorsDiv.addEventListener('pointerenter', () => {
  164. 		colorsDiv.addEventListener('pointerdown', editColor, true);
  165. 	});
  166. 	
  167. 	colorsDiv.addEventListener('pointerleave', () => {
  168. 		colorsDiv.removeEventListener('pointerdown', editColor, true);
  169. 	});
  170. 	
  171. 	document.addEventListener('keydown', e=> {
  172. 		if (!e.ctrlKey || e.code !== "KeyZ") return;
  173. 		e.preventDefault();
  174. 	});
  175. }
  176.  
  177. function updatePageStyle() {
  178. 	document.querySelector('#gameToolsSlider').style.top = '77px';
  179. 	gameTools.style.height = '200px';
  180. }
  181.  
  182. function toggleLock() {
  183. 	const lockBtn = document.querySelector('#lockButton');
  184. 	if (lockBtn.getAttribute('state') === 'unlocked') {
  185. 		lockPalette(lockBtn);
  186. 	}
  187. 	else {
  188. 		unlockPalette(lockBtn);
  189. 	}
  190. 	updateLock();
  191. }
  192.  
  193. function lockPalette() {
  194. 	lockedPalettes.push(paletteIndex);
  195. 	localStorage.setItem('lockedPalettes', JSON.stringify(lockedPalettes));
  196. }
  197.  
  198. function unlockPalette() {
  199. 	const index = lockedPalettes.indexOf(paletteIndex);
  200. 	if (index < 0) return;
  201. 	lockedPalettes.splice(index, 1);
  202. 	localStorage.setItem('lockedPalettes', JSON.stringify(lockedPalettes));
  203. }
  204.  
  205. function updateLock() {
  206. 	const lockBtn = document.querySelector('#lockButton');
  207. 	if (isPaletteLocked(paletteIndex)) {
  208. 		lockBtn.classList.remove('fa-unlock-alt');
  209. 		lockBtn.classList.add('fa-lock');
  210. 		lockBtn.setAttribute('state', 'locked');
  211. 		colorsDiv.style.boxShadow = '';
  212. 	}
  213. 	else {
  214. 		lockBtn.classList.add('fa-unlock-alt');
  215. 		lockBtn.classList.remove('fa-lock');
  216. 		lockBtn.setAttribute('state', 'unlocked');
  217. 	}
  218. 	resetActiveColor();
  219. }
  220.  
  221. function addButtons() {
  222. 	const prevPaletteBtn = document.createElement('button');
  223. 	const saveColorBtn = document.createElement('button');
  224. 	const nextPaletteBtn = document.createElement('button');
  225. 	const lockBtn = document.createElement('button');
  226.  
  227. 	const saveTooltip = 'Save Color<br>Hold <strong>shift</strong> to save the current palette.';
  228. 	const lockTooltip = 'Lock Current Palette';
  229.  
  230. 	addButton(prevPaletteBtn, 'arrow-left', '5px 5px 5px 45px;');
  231. 	addButton(saveColorBtn, 'save', '5px 5px 5px 75px;', saveTooltip, 'savePalette');
  232. 	addButton(nextPaletteBtn, 'arrow-right', '5px 5px 5px 105px;');
  233. 	addButton(lockBtn, 'unlock-alt', '5px 5px 5px 135px;', lockTooltip, 'lockButton');
  234. 	lockBtn.setAttribute('state', 'unlocked');
  235.  
  236. 	prevPaletteBtn.addEventListener('click', prevPalette, false);
  237. 	saveColorBtn.addEventListener('click', saveColor, false);
  238. 	nextPaletteBtn.addEventListener('click', nextPalette, false);
  239. 	lockBtn.addEventListener('click', toggleLock, false);
  240. }
  241.  
  242. function nextPalette() {
  243. 	paletteIndex = paletteIndex < (palettes.length - 1) ? paletteIndex + 1 : 0;
  244. 	localStorage.setItem('paletteIndex', paletteIndex);
  245. 	changePalette();
  246. }
  247.  
  248. function prevPalette() {
  249. 	paletteIndex = paletteIndex > 0 ? paletteIndex - 1 : palettes.length - 1;
  250. 	localStorage.setItem('paletteIndex', paletteIndex);
  251. 	changePalette();
  252. }
  253.  
  254. function saveColor(e) {
  255. 	if (e.shiftKey) {
  256. 		downloadPalettes();
  257. 		return;
  258. 	}
  259. 	const currentPalette = palettes[paletteIndex];
  260. 	if (activeColor.index) {
  261. 		currentPalette[activeColor.index] = colorPicker.value;
  262. 	}
  263. 	else {
  264. 		addColor(colorPicker.value);
  265. 	}
  266. 	changePalette();
  267. 	savePalettes();
  268. }
  269.  
  270. function addColor(color) {
  271. 	if (palettes[paletteIndex].length > 38 || isPaletteLocked(paletteIndex)) {
  272. 		palettes.push([]);
  273. 		paletteIndex = palettes.length - 1;
  274. 	}
  275. 	palettes[paletteIndex].push(color);
  276. }
  277.  
  278. function rgbToHex(rgb) {
  279. 	const regEx = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/;
  280. 	const [, r, g, b] = regEx.exec(rgb);
  281.  
  282. 	function hex(x) {
  283. 		return ('0' + parseInt(x).toString(16)).slice(-2);
  284. 	}
  285.  
  286. 	return `#${hex(r)}${hex(g)}${hex(b)}`;
  287. }
  288.  
  289. function savePalettes() {
  290. 	localStorage.setItem('palettes', JSON.stringify(palettes));
  291. }
  292.  
  293. function downloadPalettes() {
  294. 	const formattedPaletteData = JSON.stringify(palettes[paletteIndex]).replace(/\],/g, '],\n\n');
  295. 	download('palette.txt', formattedPaletteData);
  296. }
  297.  
  298. function download(filename, text) {
  299. 	const pom = document.createElement('a');
  300. 	pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  301. 	pom.setAttribute('download', filename);
  302.  
  303. 	if (document.createEvent) {
  304. 		const event = document.createEvent('MouseEvents');
  305. 		event.initEvent('click', true, true);
  306. 		pom.dispatchEvent(event);
  307. 	}
  308. 	else {
  309. 		pom.click();
  310. 	}
  311. }
  312.  
  313. function isPaletteLocked(index) {
  314. 	return lockedPalettes.includes(index);
  315. }
  316.  
  317. function updateColorInputs(colorValue) {
  318. 	colorPickerWrapper.style.backgroundColor = colorValue;
  319. 	colorPicker.value = colorValue;
  320. 	colorInput.value = colorValue;
  321. }
  322.  
  323. function editColor(event) {
  324. 	if (!event.target.classList.contains('gameToolsColor')) return;
  325. 	if (!event.shiftKey) updateColorInputs(rgbToHex(event.target.style.backgroundColor));
  326.  
  327. 	if (isPaletteLocked(paletteIndex)) return;
  328. 	const color = {
  329. 		node: event.target,
  330. 		index: Array.prototype.indexOf.call(colorButtons, event.target),
  331. 	};
  332.  
  333. 	if (event.altKey && event.shiftKey) {
  334. 		deletePalette(paletteIndex);
  335. 	}
  336. 	else if (event.altKey && color.index >= 0) {
  337. 		const palette = palettes[paletteIndex];
  338. 		palette.splice(color.index, 1);
  339. 		changePalette();
  340. 		if (isPaletteEmpty(palette)) deletePalette(paletteIndex);
  341. 		savePalettes();
  342. 	}
  343. 	else if (event.shiftKey && color.index >= 0) {
  344. 		setActiveColor(color);
  345. 	}
  346. }
  347.  
  348. function deletePalette(index) {
  349. 	if (palettes.length < 2) return;
  350. 	palettes.splice(index, 1);
  351. 	lockedPalettes = lockedPalettes.map(lockedIndex => {
  352. 		return lockedIndex > index ? lockedIndex - 1 : lockedIndex;
  353. 	});
  354. 	localStorage.setItem('lockedPalettes', JSON.stringify(lockedPalettes));
  355. 	prevPalette();
  356. 	savePalettes();
  357. 	updateLock();
  358. }
  359.  
  360. function changePalette() {
  361. 	if (paletteIndex < 0 || paletteIndex >= palettes.length) {
  362. 		paletteIndex = 0;
  363. 		localStorage.setItem('paletteIndex', paletteIndex);
  364. 	}
  365. 	colorButtons.forEach((button, idx) => {
  366. 		button.style.backgroundColor = palettes[paletteIndex][idx] || '#fff';
  367. 	});
  368. 	updateLock();
  369. }
  370.  
  371. function isPaletteEmpty(palette) {
  372. 	if (!palette) return true;
  373. 	let empty = true;
  374. 	for (const color of palette) {
  375. 		if (color) {
  376. 			empty = false;
  377. 			break;
  378. 		}
  379. 	}
  380. 	return empty;
  381. }
  382.  
  383. function setActiveColor(color) {
  384. 	resetActiveColor();
  385. 	activeColor = color;
  386. 	activeColor.node.style.border = 'solid 2px red';
  387. }
  388.  
  389. function resetActiveColor() {
  390. 	if (activeColor.node) {
  391. 		activeColor.node.style.border = '';
  392. 		activeColor = {
  393. 			node: null,
  394. 			index: null,
  395. 		};
  396. 	}
  397. }
  398.  
  399. function addButton(button, icon, pos, tooltip = '', id = '') {
  400. 	const buttonStyle = `margin: ${pos}; position: absolute; height: 20px; border: none; background-color: #CBCBCB; border-radius: 5px;`;
  401. 	button.setAttribute('style', buttonStyle);
  402. 	button.setAttribute('class', `fas fa-${icon}`);
  403. 	tooltip && button.setAttribute('data-toggle', 'tooltip');
  404. 	tooltip && button.setAttribute('data-original-title', tooltip);
  405. 	button.setAttribute('data-placement', 'bottom');
  406. 	button.title = tooltip;
  407. 	button.id = id;
  408. 	gameTools.appendChild(button);
  409. }
  410.  
  411. function updatePicker(event) {
  412. 	const color = event.target.value;
  413. 	colorPickerWrapper.style.backgroundColor = color;
  414. 	colorInput.value = color;
  415. 	setColor(color);
  416. }
  417.  
  418. function updateInput(event) {
  419. 	const hexFound = /([0-9A-Fa-f]{3}){1,2}/.exec(event.target.value);
  420. 	if (!hexFound) return;
  421. 	const color = '#' + hexFound[0];
  422. 	colorPickerWrapper.style.backgroundColor = color;
  423. 	colorPicker.value = color;
  424. 	setColor(color);
  425. }
  426.  
  427. function setColor(color) {
  428. 	const prevColor = colorButton.style.backgroundColor;
  429. 	colorButton.style.backgroundColor = color;
  430. 	colorButton.dispatchEvent(new Event('pointerdown'));
  431. 	colorButton.style.backgroundColor = prevColor;
  432. }
  433.  
  434. function selectInputText() {
  435. 	colorInput.select();
  436. }
  437.  
  438. function pickCanvasColor(event) {
  439. 	if (!event.altKey) return;
  440. 	event.preventDefault();
  441. 	event.stopImmediatePropagation();
  442. 	const pos = getPos(event);
  443. 	const [r, g, b] = ctx.getImageData(pos.x, pos.y, 1, 1).data;
  444. 	const color = `rgb(${r}, ${g}, ${b})`;
  445. 	updateColorInputs(rgbToHex(color));
  446. 	setColor(color);
  447. }
  448.  
  449. function getPos(event) {
  450. 	const canvasRect = canvas.getBoundingClientRect();
  451. 	const canvasScale = canvas.width / canvasRect.width;
  452. 	return {
  453. 		x: (event.clientX - canvasRect.left) * canvasScale,
  454. 		y: (event.clientY - canvasRect.top) * canvasScale,
  455. 	};
  456. }
  457.  
  458. function handleDrop(e) {
  459. 	e.preventDefault();
  460. 	colorsDiv.style.filter = '';
  461. 	handleFiles(e.dataTransfer.files);
  462. }
  463.  
  464. function handleFiles(files) {
  465. 	if (!files) return;
  466. 	files = [...files];
  467. 	files.forEach(file => {
  468. 		const reader = new FileReader();
  469. 		reader.readAsText(file);
  470. 		reader.onload = loadPalette;
  471. 	});
  472. }
  473.  
  474. function addPalette(palette) {
  475. 	if (palettes[paletteIndex].length + palette.length < 40 && !isPaletteLocked(paletteIndex)) {
  476. 		palettes[paletteIndex] = palettes[paletteIndex].concat(palette);
  477. 	}
  478. 	else {
  479. 		palettes.push(palette);
  480. 		paletteIndex = palettes.length - 1;
  481. 		localStorage.setItem('paletteIndex', paletteIndex);
  482. 	}
  483. 	resetPaletteState();
  484. }
  485.  
  486. function loadPalette(event) {
  487. 	const loadedString = event.target.result;
  488. 	const coolorRegex = /CSV \*\/\s*(\S+)/;
  489. 	const arrayRegex = /\[\[?\s*([^\]]+)/g;
  490. 	const coolorMatch = loadedString.match(coolorRegex);
  491. 	const arrayMatch = loadedString.match(arrayRegex);
  492. 	if (coolorMatch) {
  493. 		const palette = coolorMatch[1].split(',').map(color => `#${color}`);
  494. 		addPalette(palette);
  495. 		return;
  496. 	}
  497. 	else if (arrayMatch) {
  498. 		const paletteMatch = arrayMatch.map(palette => palette.match(hexRegex));
  499. 		paletteMatch.forEach(palette => addPalette(palette));
  500. 	}
  501. 	else {
  502. 		addHexFromString(loadedString);
  503. 	}
  504. }
  505.  
  506. function addHexFromString(string) {
  507. 	const hexRegex = /([0-9A-Fa-f]{3}){1,2}/g;
  508. 	const hexCodesFound = [...new Set(string.match(hexRegex))];
  509. 	console.log('Hex codes found: ', hexCodesFound);
  510. 	const codes = hexCodesFound.map(code => '#' + code);
  511. 	codes.forEach(code => addColor(code));
  512. 	changePalette();
  513. 	savePalettes();
  514. }
  515.  
  516. function resetPaletteState() {
  517. 	updateLock();
  518. 	changePalette();
  519. 	savePalettes();
  520. }
  521.  
  522. function highlight(e) {
  523. 	e.preventDefault();
  524. 	colorsDiv.style.filter = 'brightness(0.6)';
  525. }
  526.  
  527. function unhighlight(e) {
  528. 	e.preventDefault();
  529. 	colorsDiv.style.filter = '';
  530. }
  531.  
  532. function isDrawing() {
  533. 	return document.querySelector('#gameTools').style.display !== 'none';
  534. }
  535.  
  536. function adjustChatSize() {
  537. 	chatBox.style.height = isDrawing() ? 'calc(100% - 200px)' : 'calc(100% - 180px)';
  538. }