☰

Scratch Custom GUI with Block Color Changer

Custom GUI for Scratch with block color changing functionality

  1. // ==UserScript==
  2. // @name         Scratch Custom GUI with Block Color Changer
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.5
  5. // @description  Custom GUI for Scratch with block color changing functionality
  6. // @match        https://scratch.mit.edu/projects/*
  7. // @match        https://scratch.mit.edu/editor/*
  8. // @grant        GM_addStyle
  9. // @grant        GM_xmlhttpRequest
  10. // @run-at       document-end
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Utility function to add global styles
  17.     function addGlobalStyle(css) {
  18.         const style = document.createElement('style');
  19.         style.type = 'text/css';
  20.         style.innerHTML = css;
  21.         document.head.appendChild(style);
  22.     }
  23.  
  24.     // Add global hand-drawn styles
  25.     addGlobalStyle(`
  26.         body {
  27.             font-family: 'Comic Sans MS', cursive, sans-serif;
  28.         }
  29.         #scratch-custom-gui {
  30.             position: fixed;
  31.             top: 10px;
  32.             right: 10px;
  33.             background-color: #fef9e9;
  34.             border: 2px solid #d1a3a4;
  35.             padding: 15px;
  36.             z-index: 1000;
  37.             border-radius: 10px;
  38.             box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  39.             font-family: 'Comic Sans MS', cursive, sans-serif;
  40.             color: #333;
  41.         }
  42.         #scratch-custom-gui h2 {
  43.             font-size: 24px;
  44.             border-bottom: 2px dashed #d1a3a4;
  45.             padding-bottom: 10px;
  46.             margin-bottom: 10px;
  47.         }
  48.         #scratch-custom-gui button {
  49.             margin: 5px;
  50.             padding: 8px 15px;
  51.             border: 2px solid #d1a3a4;
  52.             border-radius: 8px;
  53.             background-color: #f8d5d5;
  54.             color: #333;
  55.             cursor: pointer;
  56.             font-family: 'Comic Sans MS', cursive, sans-serif;
  57.             font-size: 14px;
  58.         }
  59.         #scratch-custom-gui button:hover {
  60.             background-color: #e8b1b4;
  61.         }
  62.         #scratch-custom-gui input[type="color"],
  63.         #scratch-custom-gui input[type="text"],
  64.         #scratch-custom-gui select {
  65.             border: 2px solid #d1a3a4;
  66.             border-radius: 8px;
  67.             padding: 5px;
  68.             font-family: 'Comic Sans MS', cursive, sans-serif;
  69.             font-size: 14px;
  70.         }
  71.         #scratch-custom-gui #gui-content {
  72.             margin-top: 15px;
  73.         }
  74.         #scratch-custom-gui #modifiers-list div {
  75.             margin: 5px 0;
  76.             padding: 5px;
  77.             border: 1px dashed #d1a3a4;
  78.             border-radius: 8px;
  79.             background-color: #fbe8e8;
  80.         }
  81.         #theme-styles {
  82.             position: fixed;
  83.             top: 0;
  84.             left: 0;
  85.             width: 100%;
  86.             height: 100%;
  87.             z-index: -1;
  88.         }
  89.     `);
  90.  
  91.     // Create and open GUI
  92.     function createAndOpenGUI() {
  93.         const gui = document.createElement('div');
  94.         gui.id = 'scratch-custom-gui';
  95.  
  96.         // Main GUI content
  97.         gui.innerHTML = `
  98.             <h2>Custom Scratch GUI</h2>
  99.             <button onclick="openBlockColorChanger()">Block Color Changer</button>
  100.             <button onclick="openBlockEditor()">Block Editor</button>
  101.             <button onclick="openThemeChanger()">Theme Changer</button>
  102.             <button onclick="openModifiers()">Modifiers</button>
  103.             <button onclick="closeGUI()">Close</button>
  104.             <div id="gui-content"></div>
  105.         `;
  106.         document.body.appendChild(gui);
  107.  
  108.         // Function to open the GUI
  109.         window.openGUI = function() {
  110.             gui.style.display = 'block';
  111.         };
  112.  
  113.         // Function to close the GUI
  114.         window.closeGUI = function() {
  115.             gui.style.display = 'none';
  116.         };
  117.  
  118.         // Function to open block color changer
  119.         window.openBlockColorChanger = function() {
  120.             document.getElementById('gui-content').innerHTML = `
  121.                 <h3>Block Color Changer</h3>
  122.                 <label for="block-select-color">Select Block:</label>
  123.                 <select id="block-select-color">
  124.                     <!-- Populate with block options dynamically -->
  125.                 </select>
  126.                 <br/><br/>
  127.                 <label for="block-new-color">New Block Color:</label>
  128.                 <input type="color" id="block-new-color" />
  129.                 <br/><br/>
  130.                 <button onclick="changeBlockColor()">Change Color</button>
  131.             `;
  132.             populateBlockOptions(); // Populate block options dynamically
  133.         };
  134.  
  135.         // Function to open block editor
  136.         window.openBlockEditor = function() {
  137.             document.getElementById('gui-content').innerHTML = `
  138.                 <h3>Block Editor</h3>
  139.                 <label for="block-name">Block Name:</label>
  140.                 <input type="text" id="block-name" />
  141.                 <br/><br/>
  142.                 <label for="block-color">Block Color:</label>
  143.                 <input type="color" id="block-color" />
  144.                 <br/><br/>
  145.                 <label for="block-inside-color">Inside Color:</label>
  146.                 <input type="color" id="block-inside-color" />
  147.                 <br/><br/>
  148.                 <button onclick="createCustomBlock()">Create Custom Block</button>
  149.             `;
  150.         };
  151.  
  152.         // Function to open theme changer
  153.         window.openThemeChanger = function() {
  154.             document.getElementById('gui-content').innerHTML = `
  155.                 <h3>Theme Changer</h3>
  156.                 <label for="theme-select">Select Theme:</label>
  157.                 <select id="theme-select">
  158.                     <option value="cupcake">Cupcake</option>
  159.                     <option value="candy">Candy</option>
  160.                     <option value="dark">Dark</option>
  161.                     <option value="marshmallow">Marshmallow</option>
  162.                     <option value="bloody">Bloody</option>
  163.                     <option value="image">Image</option>
  164.                 </select>
  165.                 <br/><br/>
  166.                 <label for="theme-image-url" id="image-url-label" style="display: none;">Image URL:</label>
  167.                 <input type="text" id="theme-image-url" style="display: none;" />
  168.                 <br/><br/>
  169.                 <button onclick="applyTheme()">Apply Theme</button>
  170.             `;
  171.         };
  172.  
  173.         // Function to open modifiers
  174.         window.openModifiers = function() {
  175.             document.getElementById('gui-content').innerHTML = `
  176.                 <h3>Modifiers</h3>
  177.                 <label for="modifier-name">Modifier Name:</label>
  178.                 <input type="text" id="modifier-name" />
  179.                 <br/><br/>
  180.                 <button onclick="addModifier()">Add Modifier</button>
  181.                 <br/><br/>
  182.                 <div id="modifiers-list"></div>
  183.             `;
  184.         };
  185.  
  186.         // Populate block options for color changer
  187.         function populateBlockOptions() {
  188.             const blockSelect = document.getElementById('block-select-color');
  189.             // This example assumes some predefined blocks
  190.             // In practice, you would dynamically generate this list based on the Scratch project
  191.             blockSelect.innerHTML = `
  192.                 <option value="block1">Block 1</option>
  193.                 <option value="block2">Block 2</option>
  194.             `;
  195.         }
  196.  
  197.         // Function to change block color
  198.         window.changeBlockColor = function() {
  199.             const blockId = document.getElementById('block-select-color').value;
  200.             const newColor = document.getElementById('block-new-color').value;
  201.             console.log('Changing block color to:', newColor);
  202.  
  203.             // Make API request to update block color
  204.             GM_xmlhttpRequest({
  205.                 method: "POST",
  206.                 url: `https://api.scratch.mit.edu/projects/${blockId}/blocks/${blockId}`,
  207.                 headers: {
  208.                     "Content-Type": "application/json"
  209.                 },
  210.                 data: JSON.stringify({
  211.                     color: newColor
  212.                 }),
  213.                 onload: function(response) {
  214.                     if (response.status === 200) {
  215.                         alert('Block color changed successfully!');
  216.                     } else {
  217.                         alert('Failed to change block color.');
  218.                     }
  219.                 }
  220.             });
  221.         };
  222.  
  223.         // Function to create a custom block
  224.         window.createCustomBlock = function() {
  225.             const name = document.getElementById('block-name').value;
  226.             const color = document.getElementById('block-color').value;
  227.             const insideColor = document.getElementById('block-inside-color').value;
  228.  
  229.             console.log('Creating custom block:', { name, color, insideColor });
  230.  
  231.             // API request to create custom block (example logic)
  232.             GM_xmlhttpRequest({
  233.                 method: "POST",
  234.                 url: "https://api.scratch.mit.edu/projects/custom-blocks",
  235.                 headers: {
  236.                     "Content-Type": "application/json"
  237.                 },
  238.                 data: JSON.stringify({
  239.                     name: name,
  240.                     color: color,
  241.                     insideColor: insideColor
  242.                 }),
  243.                 onload: function(response) {
  244.                     if (response.status === 201) {
  245.                         alert('Custom block created successfully!');
  246.                     } else {
  247.                         alert('Failed to create custom block.');
  248.                     }
  249.                 }
  250.             });
  251.         };
  252.  
  253.         // Function to apply theme
  254.         window.applyTheme = function() {
  255.             const theme = document.getElementById('theme-select').value;
  256.             const imageUrl = document.getElementById('theme-image-url').value;
  257.  
  258.             console.log('Applying theme:', theme, imageUrl);
  259.  
  260.             // Apply theme styles
  261.             if (theme === 'image') {
  262.                 document.body.style.backgroundImage = `url(${imageUrl})`;
  263.             } else {
  264.                 document.body.className = `theme-${theme}`;
  265.             }
  266.  
  267.             alert('Theme applied successfully!');
  268.         };
  269.  
  270.         // Function to add a modifier
  271.         window.addModifier = function() {
  272.             const modifierName = document.getElementById('modifier-name').value;
  273.  
  274.             const modifierList = document.getElementById('modifiers-list');
  275.             const modifierDiv = document.createElement('div');
  276.             modifierDiv.textContent = modifierName;
  277.             modifierList.appendChild(modifierDiv);
  278.  
  279.             console.log('Modifier added:', modifierName);
  280.         };
  281.     }
  282.  
  283.     // Initialize GUI
  284.     createAndOpenGUI();
  285. })();