Custom blocks and theme changer for Scratch editor
// ==UserScript==
// @name Scratch Custom Blocks and Theme GUI
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Custom blocks and theme changer for Scratch editor
// @match https://scratch.mit.edu/projects/*
// @match https://scratch.mit.edu/editor/*
// @grant GM_addStyle
// @grant GM_xmlhttpRequest
// @run-at document-end
// ==/UserScript==
(function() {
'use strict';
// Utility function to add global styles
function addGlobalStyle(css) {
const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
document.head.appendChild(style);
}
// Add global styles
addGlobalStyle(`
#scratch-custom-gui {
position: fixed;
top: 10px;
right: 10px;
background-color: #fef9e9;
border: 2px solid #d1a3a4;
padding: 15px;
z-index: 1000;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
font-family: 'Comic Sans MS', cursive, sans-serif;
color: #333;
display: none;
}
#scratch-custom-gui h2 {
font-size: 24px;
border-bottom: 2px dashed #d1a3a4;
padding-bottom: 10px;
margin-bottom: 10px;
}
#scratch-custom-gui button {
margin: 5px;
padding: 8px 15px;
border: 2px solid #d1a3a4;
border-radius: 8px;
background-color: #f8d5d5;
color: #333;
cursor: pointer;
font-family: 'Comic Sans MS', cursive, sans-serif;
font-size: 14px;
}
#scratch-custom-gui button:hover {
background-color: #e8b1b4;
}
#scratch-custom-gui input[type="color"],
#scratch-custom-gui input[type="text"],
#scratch-custom-gui select {
border: 2px solid #d1a3a4;
border-radius: 8px;
padding: 5px;
font-family: 'Comic Sans MS', cursive, sans-serif;
font-size: 14px;
}
#scratch-custom-gui #gui-content {
margin-top: 15px;
}
#scratch-custom-gui #modifiers-list div {
margin: 5px 0;
padding: 5px;
border: 1px dashed #d1a3a4;
border-radius: 8px;
background-color: #fbe8e8;
}
#scratch-custom-gui .theme-option {
display: flex;
align-items: center;
margin-bottom: 10px;
}
#scratch-custom-gui .theme-option img {
width: 50px;
height: 50px;
margin-right: 10px;
border-radius: 5px;
}
#scratch-custom-gui .close-button {
position: absolute;
top: 5px;
right: 10px;
background: #d1a3a4;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
border-radius: 50%;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
}
`);
// Create and open GUI
function createAndOpenGUI() {
const gui = document.createElement('div');
gui.id = 'scratch-custom-gui';
// Main GUI content
gui.innerHTML = `
<button class="close-button" onclick="closeGUI()">×</button>
<h2>Custom Scratch GUI</h2>
<button onclick="openBlockMaker()">Custom Block Maker</button>
<button onclick="openBlockEditor()">Block Editor</button>
<button onclick="openColorChanger()">Block Color Changer</button>
<button onclick="openThemeChanger()">Theme Changer</button>
<div id="gui-content"></div>
`;
document.body.appendChild(gui);
// Function to open the GUI
window.openGUI = function() {
gui.style.display = 'block';
};
// Function to close the GUI
window.closeGUI = function() {
gui.style.display = 'none';
};
// Function to open custom block maker
window.openBlockMaker = function() {
document.getElementById('gui-content').innerHTML = `
<h3>Custom Block Maker</h3>
<label for="custom-block-name">Block Name:</label>
<input type="text" id="custom-block-name" />
<br/><br/>
<label for="custom-block-color">Block Color:</label>
<input type="color" id="custom-block-color" />
<br/><br/>
<label for="custom-block-inside-color">Inside Color:</label>
<input type="color" id="custom-block-inside-color" />
<br/><br/>
<button onclick="createCustomBlock()">Create Custom Block</button>
`;
};
// Function to create a custom block
window.createCustomBlock = function() {
const name = document.getElementById('custom-block-name').value;
const color = document.getElementById('custom-block-color').value;
const insideColor = document.getElementById('custom-block-inside-color').value;
console.log('Creating custom block:', { name, color, insideColor });
// Simulate adding a custom block to Scratch
addCustomBlockToScratch(name, color, insideColor);
alert('Custom block created successfully!');
};
// Function to simulate adding a custom block to Scratch
function addCustomBlockToScratch(name, color, insideColor) {
// Example implementation - this would depend on Scratch's actual capabilities
const customBlock = {
name: name,
color: color,
insideColor: insideColor
};
// Simulate adding the block to the Scratch editor
console.log('Simulating custom block addition:', customBlock);
// The actual Scratch editor does not allow direct modification through scripts
}
// Function to open block editor (for block modification)
window.openBlockEditor = function() {
document.getElementById('gui-content').innerHTML = `
<h3>Block Editor</h3>
<label for="block-name">Block Name:</label>
<input type="text" id="block-name" />
<br/><br/>
<label for="block-color">Block Color:</label>
<input type="color" id="block-color" />
<br/><br/>
<label for="block-inside-color">Inside Color:</label>
<input type="color" id="block-inside-color" />
<br/><br/>
<button onclick="editBlock()">Edit Block</button>
`;
};
// Function to edit an existing block
window.editBlock = function() {
const name = document.getElementById('block-name').value;
const color = document.getElementById('block-color').value;
const insideColor = document.getElementById('block-inside-color').value;
console.log('Editing block:', { name, color, insideColor });
// Simulate editing an existing block
// In practice, this would require interaction with Scratch's internal data structures
};
// Function to open block color changer
window.openColorChanger = function() {
document.getElementById('gui-content').innerHTML = `
<h3>Block Color Changer</h3>
<label for="change-color">Select Block Color:</label>
<input type="color" id="change-color" />
<br/><br/>
<button onclick="changeBlockColor()">Change Block Color</button>
`;
};
// Function to change block color
window.changeBlockColor = function() {
const color = document.getElementById('change-color').value;
console.log('Changing block color to:', color);
// Simulate changing block color
// The actual Scratch editor does not support this directly through scripts
alert('Block color changed successfully!');
};
// Function to open theme changer
window.openThemeChanger = function() {
document.getElementById('gui-content').innerHTML = `
<h3>Theme Changer</h3>
<label for="theme-select">Select Theme:</label>
<select id="theme-select">
<option value="light">Light Theme</option>
<option value="dark">Dark Theme</option>
<option value="orange">Orange Theme</option>
</select>
<br/><br/>
<button onclick="applyTheme()">Apply Theme</button>
`;
};
// Function to apply selected theme
window.applyTheme = function() {
const theme = document.getElementById('theme-select').value;
console.log('Applying theme:', theme);
// Simulate applying a theme
switch (theme) {
case 'light':
document.body.style.backgroundColor = '#ffffff';
document.body.style.color = '#000000';
break;
case 'dark':
document.body.style.backgroundColor = '#333333';
document.body.style.color = '#ffffff';
break;
case 'orange':
document.body.style.backgroundColor = '#ffa500';
document.body.style.color = '#000000';
break;
}
alert('Theme applied successfully!');
};
}
// Initialize GUI
createAndOpenGUI();
})();