☰

Scratch Block Color Changer with GUI

Change Scratch block colors and modify blocks in Scratch projects using a custom GUI

  1. // ==UserScript==
  2. // @name         Scratch Block Color Changer with GUI
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2
  5. // @description  Change Scratch block colors and modify blocks in Scratch projects using a custom GUI
  6. // @match        https://scratch.mit.edu/projects/*
  7. // @grant        GM_addStyle
  8. // @run-at       document-end
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Utility function to add global styles
  15.     function addGlobalStyle(css) {
  16.         const style = document.createElement('style');
  17.         style.type = 'text/css';
  18.         style.innerHTML = css;
  19.         document.head.appendChild(style);
  20.     }
  21.  
  22.     // Create and open GUI
  23.     function createAndOpenGUI() {
  24.         const gui = document.createElement('div');
  25.         gui.id = 'scratch-custom-gui';
  26.         gui.style.position = 'fixed';
  27.         gui.style.top = '10px';
  28.         gui.style.right = '10px';
  29.         gui.style.backgroundColor = '#ffffff';
  30.         gui.style.border = '1px solid #ddd';
  31.         gui.style.padding = '10px';
  32.         gui.style.zIndex = 1000;
  33.         gui.style.borderRadius = '5px';
  34.         gui.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.3)';
  35.         gui.style.fontFamily = 'Arial, sans-serif';
  36.         gui.style.display = 'none';
  37.  
  38.         // Main GUI content
  39.         gui.innerHTML = `
  40.             <h2>Custom Scratch GUI</h2>
  41.             <button onclick="openBlockColorChanger()">Block Color Changer</button>
  42.             <button onclick="openBlockEditor()">Block Editor</button>
  43.             <button onclick="openThemeChanger()">Theme Changer</button>
  44.             <button onclick="openModifiers()">Modifiers</button>
  45.             <button onclick="closeGUI()">Close</button>
  46.             <div id="gui-content"></div>
  47.         `;
  48.         document.body.appendChild(gui);
  49.  
  50.         // Function to open the GUI
  51.         window.openGUI = function() {
  52.             gui.style.display = 'block';
  53.         };
  54.  
  55.         // Function to close the GUI
  56.         window.closeGUI = function() {
  57.             gui.style.display = 'none';
  58.         };
  59.  
  60.         // Function to open block color changer
  61.         window.openBlockColorChanger = function() {
  62.             document.getElementById('gui-content').innerHTML = `
  63.                 <h3>Block Color Changer</h3>
  64.                 <label for="block-select-color">Select Block:</label>
  65.                 <select id="block-select-color">
  66.                     <!-- Populate with block options dynamically -->
  67.                 </select>
  68.                 <br/><br/>
  69.                 <label for="block-new-color">New Block Color:</label>
  70.                 <input type="color" id="block-new-color" />
  71.                 <br/><br/>
  72.                 <button onclick="changeBlockColor()">Change Color</button>
  73.             `;
  74.         };
  75.  
  76.         // Function to open block editor
  77.         window.openBlockEditor = function() {
  78.             document.getElementById('gui-content').innerHTML = `
  79.                 <h3>Block Editor</h3>
  80.                 <label for="block-name">Block Name:</label>
  81.                 <input type="text" id="block-name" />
  82.                 <br/><br/>
  83.                 <label for="block-color">Block Color:</label>
  84.                 <input type="color" id="block-color" />
  85.                 <br/><br/>
  86.                 <label for="block-inside-color">Inside Color:</label>
  87.                 <input type="color" id="block-inside-color" />
  88.                 <br/><br/>
  89.                 <button onclick="createCustomBlock()">Create Custom Block</button>
  90.             `;
  91.         };
  92.  
  93.         // Function to open theme changer
  94.         window.openThemeChanger = function() {
  95.             document.getElementById('gui-content').innerHTML = `
  96.                 <h3>Theme Changer</h3>
  97.                 <label for="theme-select">Select Theme:</label>
  98.                 <select id="theme-select">
  99.                     <option value="cupcake">Cupcake</option>
  100.                     <option value="candy">Candy</option>
  101.                     <option value="dark">Dark</option>
  102.                     <option value="marshmallow">Marshmallow</option>
  103.                     <option value="bloody">Bloody</option>
  104.                     <option value="image">Image</option>
  105.                 </select>
  106.                 <br/><br/>
  107.                 <label for="theme-image-url" id="image-url-label" style="display: none;">Image URL:</label>
  108.                 <input type="text" id="theme-image-url" style="display: none;" />
  109.                 <br/><br/>
  110.                 <button onclick="applyTheme()">Apply Theme</button>
  111.             `;
  112.         };
  113.  
  114.         // Function to open modifiers
  115.         window.openModifiers = function() {
  116.             document.getElementById('gui-content').innerHTML = `
  117.                 <h3>Modifiers</h3>
  118.                 <label for="modifier-name">Modifier Name:</label>
  119.                 <input type="text" id="modifier-name" />
  120.                 <br/><br/>
  121.                 <button onclick="addModifier()">Add Modifier</button>
  122.                 <br/><br/>
  123.                 <div id="modifiers-list"></div>
  124.             `;
  125.         };
  126.  
  127.         // Function to change block color
  128.         window.changeBlockColor = function() {
  129.             const blockId = document.getElementById('block-select-color').value;
  130.             const newColor = document.getElementById('block-new-color').value;
  131.             console.log('Changing block color to:', newColor);
  132.             // Implement logic to change the color of the selected block using Scratch API
  133.             // For demonstration purposes, this is a placeholder
  134.         };
  135.  
  136.         // Function to create a custom block
  137.         window.createCustomBlock = function() {
  138.             const blockName = document.getElementById('block-name').value;
  139.             const blockColor = document.getElementById('block-color').value;
  140.             const blockInsideColor = document.getElementById('block-inside-color').value;
  141.             console.log('Creating custom block:', blockName, blockColor, blockInsideColor);
  142.             // Implement logic to create a custom block using Scratch API
  143.             // For demonstration purposes, this is a placeholder
  144.         };
  145.  
  146.         // Function to apply theme
  147.         window.applyTheme = function() {
  148.             const theme = document.getElementById('theme-select').value;
  149.             const imageUrl = document.getElementById('theme-image-url').value;
  150.  
  151.             const themes = {
  152.                 'cupcake': `
  153.                     body { background-color: #fbe8e8; color: #6a1b29; }
  154.                     .stage { background: #fcdada; }
  155.                     .backdrop { background: #f6a7b1; }
  156.                 `,
  157.                 'candy': `
  158.                     body { background-color: #f5a623; color: #fff; }
  159.                     .stage { background: #f79c42; }
  160.                     .backdrop { background: #f4b043; }
  161.                 `,
  162.                 'dark': `
  163.                     body { background-color: #333; color: #f5f5f5; }
  164.                     .stage { background: #555; }
  165.                     .backdrop { background: #444; }
  166.                 `,
  167.                 'marshmallow': `
  168.                     body { background-color: #fff; color: #000; }
  169.                     .stage { background: #f5f5f5; }
  170.                     .backdrop { background: #e0e0e0; }
  171.                 `,
  172.                 'bloody': `
  173.                     body { background-color: #3e0d0d; color: #f5f5f5; }
  174.                     .stage { background: #6a0b0b; }
  175.                     .backdrop { background: #9e0f0f; }
  176.                 `,
  177.                 'image': `
  178.                     body { background-image: url('${imageUrl}'); color: #ffffff; }
  179.                     .stage { background: rgba(0, 0, 0, 0.5); }
  180.                     .backdrop { background: rgba(0, 0, 0, 0.5); }
  181.                 `
  182.             };
  183.  
  184.             if (theme === 'image') {
  185.                 document.getElementById('image-url-label').style.display = 'block';
  186.                 document.getElementById('theme-image-url').style.display = 'block';
  187.             } else {
  188.                 document.getElementById('image-url-label').style.display = 'none';
  189.                 document.getElementById('theme-image-url').style.display = 'none';
  190.                 applyThemeStyles(themes[theme]);
  191.             }
  192.         };
  193.  
  194.         function applyThemeStyles(css) {
  195.             let existingStyle = document.getElementById('theme-style');
  196.             if (existingStyle) {
  197.                 existingStyle.remove();
  198.             }
  199.             const style = document.createElement('style');
  200.             style.id = 'theme-style';
  201.             style.innerHTML = css;
  202.             document.head.appendChild(style);
  203.         }
  204.  
  205.         // Function to add a modifier
  206.         window.addModifier = function() {
  207.             const modifierName = document.getElementById('modifier-name').value;
  208.             console.log('Adding modifier:', modifierName);
  209.             const modifiersList = document.getElementById('modifiers-list');
  210.             const modifierItem = document.createElement('div');
  211.             modifierItem.textContent = modifierName;
  212.             modifiersList.appendChild(modifierItem);
  213.         };
  214.     }
  215.  
  216.     // Add global styles for the GUI
  217.     addGlobalStyle(`
  218.         #scratch-custom-gui button {
  219.             margin: 5px;
  220.             padding: 5px 10px;
  221.             border: none;
  222.             border-radius: 5px;
  223.             background-color: #007bff;
  224.             color: #fff;
  225.             cursor: pointer;
  226.         }
  227.         #scratch-custom-gui button:hover {
  228.             background-color: #0056b3;
  229.         }
  230.         #scratch-custom-gui input[type="color"] {
  231.             margin: 5px 0;
  232.         }
  233.     `);
  234.  
  235.     // Create and open the GUI
  236.     createAndOpenGUI();
  237. })();