☰

Scratch Custom Blocks and Theme GUI

Custom blocks and theme changer for Scratch editor

  1. // ==UserScript==
  2. // @name         Scratch Custom Blocks and Theme GUI
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Custom blocks and theme changer for Scratch editor
  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 styles
  25.     addGlobalStyle(`
  26.         #scratch-custom-gui {
  27.             position: fixed;
  28.             top: 10px;
  29.             right: 10px;
  30.             background-color: #fef9e9;
  31.             border: 2px solid #d1a3a4;
  32.             padding: 15px;
  33.             z-index: 1000;
  34.             border-radius: 10px;
  35.             box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  36.             font-family: 'Comic Sans MS', cursive, sans-serif;
  37.             color: #333;
  38.             display: none;
  39.         }
  40.         #scratch-custom-gui h2 {
  41.             font-size: 24px;
  42.             border-bottom: 2px dashed #d1a3a4;
  43.             padding-bottom: 10px;
  44.             margin-bottom: 10px;
  45.         }
  46.         #scratch-custom-gui button {
  47.             margin: 5px;
  48.             padding: 8px 15px;
  49.             border: 2px solid #d1a3a4;
  50.             border-radius: 8px;
  51.             background-color: #f8d5d5;
  52.             color: #333;
  53.             cursor: pointer;
  54.             font-family: 'Comic Sans MS', cursive, sans-serif;
  55.             font-size: 14px;
  56.         }
  57.         #scratch-custom-gui button:hover {
  58.             background-color: #e8b1b4;
  59.         }
  60.         #scratch-custom-gui input[type="color"],
  61.         #scratch-custom-gui input[type="text"],
  62.         #scratch-custom-gui select {
  63.             border: 2px solid #d1a3a4;
  64.             border-radius: 8px;
  65.             padding: 5px;
  66.             font-family: 'Comic Sans MS', cursive, sans-serif;
  67.             font-size: 14px;
  68.         }
  69.         #scratch-custom-gui #gui-content {
  70.             margin-top: 15px;
  71.         }
  72.         #scratch-custom-gui #modifiers-list div {
  73.             margin: 5px 0;
  74.             padding: 5px;
  75.             border: 1px dashed #d1a3a4;
  76.             border-radius: 8px;
  77.             background-color: #fbe8e8;
  78.         }
  79.         #scratch-custom-gui .theme-option {
  80.             display: flex;
  81.             align-items: center;
  82.             margin-bottom: 10px;
  83.         }
  84.         #scratch-custom-gui .theme-option img {
  85.             width: 50px;
  86.             height: 50px;
  87.             margin-right: 10px;
  88.             border-radius: 5px;
  89.         }
  90.         #scratch-custom-gui .close-button {
  91.             position: absolute;
  92.             top: 5px;
  93.             right: 10px;
  94.             background: #d1a3a4;
  95.             border: none;
  96.             color: white;
  97.             font-size: 16px;
  98.             cursor: pointer;
  99.             border-radius: 50%;
  100.             width: 25px;
  101.             height: 25px;
  102.             text-align: center;
  103.             line-height: 25px;
  104.         }
  105.     `);
  106.  
  107.     // Create and open GUI
  108.     function createAndOpenGUI() {
  109.         const gui = document.createElement('div');
  110.         gui.id = 'scratch-custom-gui';
  111.  
  112.         // Main GUI content
  113.         gui.innerHTML = `
  114.             <button class="close-button" onclick="closeGUI()">×</button>
  115.             <h2>Custom Scratch GUI</h2>
  116.             <button onclick="openBlockMaker()">Custom Block Maker</button>
  117.             <button onclick="openBlockEditor()">Block Editor</button>
  118.             <button onclick="openColorChanger()">Block Color Changer</button>
  119.             <button onclick="openThemeChanger()">Theme Changer</button>
  120.             <div id="gui-content"></div>
  121.         `;
  122.         document.body.appendChild(gui);
  123.  
  124.         // Function to open the GUI
  125.         window.openGUI = function() {
  126.             gui.style.display = 'block';
  127.         };
  128.  
  129.         // Function to close the GUI
  130.         window.closeGUI = function() {
  131.             gui.style.display = 'none';
  132.         };
  133.  
  134.         // Function to open custom block maker
  135.         window.openBlockMaker = function() {
  136.             document.getElementById('gui-content').innerHTML = `
  137.                 <h3>Custom Block Maker</h3>
  138.                 <label for="custom-block-name">Block Name:</label>
  139.                 <input type="text" id="custom-block-name" />
  140.                 <br/><br/>
  141.                 <label for="custom-block-color">Block Color:</label>
  142.                 <input type="color" id="custom-block-color" />
  143.                 <br/><br/>
  144.                 <label for="custom-block-inside-color">Inside Color:</label>
  145.                 <input type="color" id="custom-block-inside-color" />
  146.                 <br/><br/>
  147.                 <button onclick="createCustomBlock()">Create Custom Block</button>
  148.             `;
  149.         };
  150.  
  151.         // Function to create a custom block
  152.         window.createCustomBlock = function() {
  153.             const name = document.getElementById('custom-block-name').value;
  154.             const color = document.getElementById('custom-block-color').value;
  155.             const insideColor = document.getElementById('custom-block-inside-color').value;
  156.  
  157.             console.log('Creating custom block:', { name, color, insideColor });
  158.  
  159.             // Simulate adding a custom block to Scratch
  160.             addCustomBlockToScratch(name, color, insideColor);
  161.  
  162.             alert('Custom block created successfully!');
  163.         };
  164.  
  165.         // Function to simulate adding a custom block to Scratch
  166.         function addCustomBlockToScratch(name, color, insideColor) {
  167.             // Example implementation - this would depend on Scratch's actual capabilities
  168.             const customBlock = {
  169.                 name: name,
  170.                 color: color,
  171.                 insideColor: insideColor
  172.             };
  173.  
  174.             // Simulate adding the block to the Scratch editor
  175.             console.log('Simulating custom block addition:', customBlock);
  176.             // The actual Scratch editor does not allow direct modification through scripts
  177.         }
  178.  
  179.         // Function to open block editor (for block modification)
  180.         window.openBlockEditor = function() {
  181.             document.getElementById('gui-content').innerHTML = `
  182.                 <h3>Block Editor</h3>
  183.                 <label for="block-name">Block Name:</label>
  184.                 <input type="text" id="block-name" />
  185.                 <br/><br/>
  186.                 <label for="block-color">Block Color:</label>
  187.                 <input type="color" id="block-color" />
  188.                 <br/><br/>
  189.                 <label for="block-inside-color">Inside Color:</label>
  190.                 <input type="color" id="block-inside-color" />
  191.                 <br/><br/>
  192.                 <button onclick="editBlock()">Edit Block</button>
  193.             `;
  194.         };
  195.  
  196.         // Function to edit an existing block
  197.         window.editBlock = function() {
  198.             const name = document.getElementById('block-name').value;
  199.             const color = document.getElementById('block-color').value;
  200.             const insideColor = document.getElementById('block-inside-color').value;
  201.  
  202.             console.log('Editing block:', { name, color, insideColor });
  203.  
  204.             // Simulate editing an existing block
  205.             // In practice, this would require interaction with Scratch's internal data structures
  206.         };
  207.  
  208.         // Function to open block color changer
  209.         window.openColorChanger = function() {
  210.             document.getElementById('gui-content').innerHTML = `
  211.                 <h3>Block Color Changer</h3>
  212.                 <label for="change-color">Select Block Color:</label>
  213.                 <input type="color" id="change-color" />
  214.                 <br/><br/>
  215.                 <button onclick="changeBlockColor()">Change Block Color</button>
  216.             `;
  217.         };
  218.  
  219.         // Function to change block color
  220.         window.changeBlockColor = function() {
  221.             const color = document.getElementById('change-color').value;
  222.  
  223.             console.log('Changing block color to:', color);
  224.  
  225.             // Simulate changing block color
  226.             // The actual Scratch editor does not support this directly through scripts
  227.             alert('Block color changed successfully!');
  228.         };
  229.  
  230.         // Function to open theme changer
  231.         window.openThemeChanger = function() {
  232.             document.getElementById('gui-content').innerHTML = `
  233.                 <h3>Theme Changer</h3>
  234.                 <label for="theme-select">Select Theme:</label>
  235.                 <select id="theme-select">
  236.                     <option value="light">Light Theme</option>
  237.                     <option value="dark">Dark Theme</option>
  238.                     <option value="orange">Orange Theme</option>
  239.                 </select>
  240.                 <br/><br/>
  241.                 <button onclick="applyTheme()">Apply Theme</button>
  242.             `;
  243.         };
  244.  
  245.         // Function to apply selected theme
  246.         window.applyTheme = function() {
  247.             const theme = document.getElementById('theme-select').value;
  248.  
  249.             console.log('Applying theme:', theme);
  250.  
  251.             // Simulate applying a theme
  252.             switch (theme) {
  253.                 case 'light':
  254.                     document.body.style.backgroundColor = '#ffffff';
  255.                     document.body.style.color = '#000000';
  256.                     break;
  257.                 case 'dark':
  258.                     document.body.style.backgroundColor = '#333333';
  259.                     document.body.style.color = '#ffffff';
  260.                     break;
  261.                 case 'orange':
  262.                     document.body.style.backgroundColor = '#ffa500';
  263.                     document.body.style.color = '#000000';
  264.                     break;
  265.             }
  266.  
  267.             alert('Theme applied successfully!');
  268.         };
  269.     }
  270.  
  271.     // Initialize GUI
  272.     createAndOpenGUI();
  273. })();