Scratch Custom Blocks and Theme GUI

Custom blocks and theme changer for Scratch editor
安裝腳本 ?
Wrap lines
// ==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();
})();
欢迎访问Greasy Fork镜像
