☰

Scratch GUI and Theme Changer

Add custom GUI and theme changer to Scratch

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