Adds a toggle menu to expand/collapse the drawing canvas on Drawaria.online by hiding/showing side panels, and expands the canvas.
// ==UserScript==
// @name Drawaria Canvas Expander Toggle
// @namespace http://tampermonkey.net/
// @version 2025-05-23.3 // Incremented version to reflect this crucial fix
// @description Adds a toggle menu to expand/collapse the drawing canvas on Drawaria.online by hiding/showing side panels, and expands the canvas.
// @author YouTubeDrawaria
// @match https://drawaria.online/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=drawaria.online
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
const LS_KEY = 'drawaria_expand_canvas_v2'; // localStorage key for state persistence
// --- Helper function to apply/remove canvas expansion styles ---
function setCanvasExpanded(isExpanded) {
const leftbar = document.getElementById('leftbar');
const rightbar = document.getElementById('rightbar');
const canvas = document.getElementById('canvas'); // The actual canvas element
// Ensure main game elements are present before attempting modifications
if (!leftbar || !rightbar || !canvas) {
console.warn("Drawaria core elements (leftbar, rightbar, canvas) not found for expansion/collapse. Will re-attempt when elements are ready.");
return false; // Indicate that elements were not ready
}
if (isExpanded) {
// Apply styles to hide panels
leftbar.style.display = 'none';
rightbar.style.display = 'none';
// Make the canvas element expand to fill the available flex space
canvas.style.flexGrow = '1';
canvas.style.width = 'auto'; // Important for flex items to allow growth
console.log("Canvas expanded.");
} else {
// Restore original styles by clearing inline styles
leftbar.style.display = '';
rightbar.style.display = '';
// Remove flex-grow and width to restore original canvas size
canvas.style.flexGrow = '';
canvas.style.width = '';
console.log("Canvas collapsed.");
}
// Trigger a window resize event. This is crucial for Drawaria to re-render
// its canvas based on the new available space.
window.dispatchEvent(new Event('resize'));
localStorage.setItem(LS_KEY, isExpanded ? 'true' : 'false'); // Save state
return true; // Indicate successful application
}
// --- Inject custom UI (Button and Menu) and its CSS ---
function injectUI() {
// Inject CSS for the custom UI elements to make them look integrated
const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `
#drawaria-custom-menu-container {
position: absolute;
top: 5px; /* Position from the top of the viewport */
right: 180px; /* Adjust this value to place it appropriately relative to other top-right elements */
z-index: 10000; /* Ensure it's on top of other elements */
font-family: 'Open Sans', Arial, sans-serif; /* Try to match Drawaria's font */
color: #333;
}
#drawaria-menu-toggle-button {
background-color: #f1f9f5; /* Light background, similar to Drawaria's panels */
border: 1px solid #b0b5b9; /* Soft border */
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
font-size: 14px;
display: flex;
align-items: center;
gap: 6px; /* Space between icon and text */
box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Subtle shadow */
transition: background-color 0.2s ease; /* Smooth hover effect */
white-space: nowrap; /* Prevent text wrapping */
}
#drawaria-menu-toggle-button:hover {
background-color: #e0e0e0; /* Slightly darker on hover */
}
#drawaria-menu-toggle-button span {
font-size: 16px; /* Icon size */
}
#drawaria-menu-content {
display: none; /* Hidden by default */
position: absolute;
background-color: #f1f9f5;
border: 1px solid #b0b5b9;
border-radius: 5px;
padding: 10px;
top: 40px; /* Position just below the toggle button */
right: 0;
min-width: 180px; /* Ensure enough width for text */
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
#drawaria-menu-content.visible {
display: block; /* Make visible when 'visible' class is added */
}
#drawaria-menu-content label {
display: flex;
align-items: center;
cursor: pointer;
font-size: 14px;
margin-bottom: 0; /* No extra margin if only one item */
}
#drawaria-menu-content input[type="checkbox"] {
margin-right: 8px;
transform: scale(1.2); /* Make checkbox slightly larger for easier clicking */
}
`;
document.head.appendChild(style); // Add CSS to the document's head
// Inject HTML for the button and menu into the body
const uiHtml = `
<div id="drawaria-custom-menu-container">
<button id="drawaria-menu-toggle-button" title="Toggle Canvas Expansion">
<span>🖼️</span> Canvas Options
</button>
<div id="drawaria-menu-content">
<label>
<input type="checkbox" id="expandCanvasCheckbox"> Expand Drawing Area
</label>
</div>
</div>
`;
document.body.insertAdjacentHTML('beforeend', uiHtml); // Insert at the end of the body
// --- Get references to the injected UI elements ---
const menuContainer = document.getElementById('drawaria-custom-menu-container');
const toggleButton = document.getElementById('drawaria-menu-toggle-button');
const menuContent = document.getElementById('drawaria-menu-content');
const expandCanvasCheckbox = document.getElementById('expandCanvasCheckbox');
if (!menuContainer || !toggleButton || !menuContent || !expandCanvasCheckbox) {
console.error("Failed to find Drawaria custom UI elements after injection.");
return;
}
// --- Add Event Listeners ---
// Toggle the visibility of the menu content when the button is clicked
toggleButton.addEventListener('click', (event) => {
event.stopPropagation(); // Prevent document click listener from immediately closing it
menuContent.classList.toggle('visible');
});
// Hide the menu when a click occurs outside of it
document.addEventListener('click', (event) => {
if (!menuContainer.contains(event.target)) {
menuContent.classList.remove('visible');
}
});
// Listen for changes on the "Expand Canvas" checkbox
expandCanvasCheckbox.addEventListener('change', () => {
setCanvasExpanded(expandCanvasCheckbox.checked);
});
// --- Initialize state from localStorage and apply when game is ready ---
const storedState = localStorage.getItem(LS_KEY);
const initialState = storedState === 'true';
expandCanvasCheckbox.checked = initialState; // Set checkbox state visually
// Use a MutationObserver to wait for the #main element to become visible,
// which indicates the game content (leftbar, rightbar, canvas) is ready.
const observer = new MutationObserver((mutationsList, observerInstance) => {
const mainDiv = document.getElementById('main');
// Check if mainDiv exists and its display style is not 'none'
if (mainDiv && mainDiv.style.display !== 'none') {
console.log("#main element became visible. Attempting to apply initial canvas state.");
// Attempt to apply the state. setCanvasExpanded will internally check for sub-elements.
if (setCanvasExpanded(initialState)) { // Only disconnect if successful
observerInstance.disconnect(); // Disconnect observer once the state is applied successfully
}
// If setCanvasExpanded returns false (elements not ready), the observer will continue
// watching for other changes, which might involve the elements becoming available.
}
});
// Start observing the document body for changes, looking for #main to become visible.
// A small delay helps ensure this observer setup runs slightly after initial DOM render
// to avoid conflicts or race conditions with the page's own JS.
setTimeout(() => {
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style'] });
// Also, make an immediate check in case the main content is already loaded/visible
const mainDiv = document.getElementById('main');
if (mainDiv && mainDiv.style.display !== 'none') {
console.log("Immediate check: #main already visible. Attempting to apply initial canvas state.");
if (setCanvasExpanded(initialState)) {
observer.disconnect();
}
}
}, 500); // Wait 500ms before starting observation
// Fallback for window.load just in case, this could also apply the state if observers somehow missed it.
window.addEventListener('load', () => {
const mainDiv = document.getElementById('main');
if (mainDiv && mainDiv.style.display !== 'none') {
console.log("Window loaded and #main is visible (fallback). Applying initial canvas state.");
setCanvasExpanded(initialState);
observer.disconnect(); // Ensure observer is stopped if fallback works
}
});
}
// Execute the UI injection function once the DOM is ready (or shortly after)
// Using DOMContentLoaded for quicker UI appearance, but the core canvas expansion
// logic will wait for the game's #main div to be truly ready.
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', injectUI);
} else {
injectUI();
}
})();