☰

Modern Scratch Modifier GUI

Provides a modern GUI to modify Scratch blocks and create games using the Scratch API.

当前为 2024-08-27 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Modern Scratch Modifier GUI
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2
  5. // @description  Provides a modern GUI to modify Scratch blocks and create games using the Scratch API.
  6. // @match        *://scratch.mit.edu/*
  7. // @match        *://scratch.mit.edu/projects/*
  8. // @grant        none
  9. // @require      https://code.jquery.com/jquery-3.6.0.min.js
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Add CSS for the modern GUI
  16.     const style = `
  17.         #scratch-modifier-gui {
  18.             position: fixed;
  19.             top: 10px;
  20.             right: 10px;
  21.             width: 350px;
  22.             background-color: #f9f9f9;
  23.             border: 1px solid #ddd;
  24.             border-radius: 8px;
  25.             padding: 15px;
  26.             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  27.             z-index: 9999;
  28.             font-family: Arial, sans-serif;
  29.             transition: opacity 0.3s ease;
  30.         }
  31.         #scratch-modifier-gui .section {
  32.             margin-bottom: 15px;
  33.             position: relative;
  34.         }
  35.         #scratch-modifier-gui .close-btn {
  36.             position: absolute;
  37.             top: 5px;
  38.             right: 10px;
  39.             cursor: pointer;
  40.             color: #333;
  41.             font-size: 18px;
  42.             transition: color 0.3s ease;
  43.         }
  44.         #scratch-modifier-gui .close-btn:hover {
  45.             color: #f00;
  46.         }
  47.         #scratch-modifier-gui h2 {
  48.             font-size: 16px;
  49.             color: #333;
  50.             margin-bottom: 10px;
  51.         }
  52.         #scratch-modifier-gui input[type="color"] {
  53.             border: none;
  54.             border-radius: 4px;
  55.             width: 100%;
  56.             height: 30px;
  57.             cursor: pointer;
  58.             outline: none;
  59.         }
  60.         #scratch-modifier-gui textarea {
  61.             border: 1px solid #ddd;
  62.             border-radius: 4px;
  63.             width: 100%;
  64.             padding: 8px;
  65.             box-sizing: border-box;
  66.             resize: vertical;
  67.         }
  68.         #scratch-modifier-gui button {
  69.             background-color: #007bff;
  70.             border: none;
  71.             border-radius: 4px;
  72.             color: #fff;
  73.             padding: 10px 15px;
  74.             cursor: pointer;
  75.             transition: background-color 0.3s ease;
  76.             width: 100%;
  77.             font-size: 14px;
  78.             margin-top: 10px;
  79.         }
  80.         #scratch-modifier-gui button:hover {
  81.             background-color: #0056b3;
  82.         }
  83.         #scratch-modifier-gui #tips {
  84.             background-color: #e9ecef;
  85.             border: 1px solid #ddd;
  86.             border-radius: 4px;
  87.             padding: 10px;
  88.             margin-top: 10px;
  89.             display: none;
  90.         }
  91.     `;
  92.  
  93.     $('<style>').text(style).appendTo('head');
  94.  
  95.     // Create GUI structure
  96.     const guiHTML = `
  97.         <div id="scratch-modifier-gui">
  98.             <div class="section">
  99.                 <div class="close-btn">×</div>
  100.                 <h2>Block Modifier</h2>
  101.                 <label for="block-color">Block Color:</label>
  102.                 <input type="color" id="block-color">
  103.                 <label for="inside-color">Inside Color:</label>
  104.                 <input type="color" id="inside-color">
  105.                 <button id="apply-colors">Apply Colors</button>
  106.             </div>
  107.             <div class="section">
  108.                 <h2>Game Generator</h2>
  109.                 <textarea id="game-prompt" rows="4" placeholder="Enter your game prompt here..."></textarea>
  110.                 <button id="generate-game">Generate Game</button>
  111.             </div>
  112.             <div class="section">
  113.                 <h2>Tips & Tricks</h2>
  114.                 <button id="show-tips">Show Tips</button>
  115.                 <div id="tips">
  116.                     <p>Tip 1: Use variables to keep track of scores.</p>
  117.                     <p>Tip 2: Test your game frequently to catch bugs.</p>
  118.                 </div>
  119.             </div>
  120.         </div>
  121.     `;
  122.  
  123.     $('body').append(guiHTML);
  124.  
  125.     // Close button functionality
  126.     $('#scratch-modifier-gui .close-btn').click(function() {
  127.         $('#scratch-modifier-gui').fadeOut();
  128.     });
  129.  
  130.     // Apply colors functionality
  131.     $('#apply-colors').click(function() {
  132.         const blockColor = $('#block-color').val();
  133.         const insideColor = $('#inside-color').val();
  134.         // Here you would use the Scratch API to apply these colors to blocks
  135.         console.log(`Applying Block Color: ${blockColor}, Inside Color: ${insideColor}`);
  136.     });
  137.  
  138.     // Generate game functionality
  139.     $('#generate-game').click(function() {
  140.         const prompt = $('#game-prompt').val();
  141.         // Here you would use the Scratch API to generate a game based on the prompt
  142.         console.log(`Generating game with prompt: ${prompt}`);
  143.     });
  144.  
  145.     // Show tips functionality
  146.     $('#show-tips').click(function() {
  147.         $('#tips').toggle();
  148.     });
  149.  
  150.     // Add additional functionality and API integration as needed
  151. })();