☰

Cookie Clicker Editor

A draggable, resizable menu with smooth transitions, themes, and more buttons. Includes a minimize button to hide/show the menu. For Cookie Clicker

  1. // ==UserScript==
  2. // @name         Cookie Clicker Editor
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.16
  5. // @description  A draggable, resizable menu with smooth transitions, themes, and more buttons. Includes a minimize button to hide/show the menu. For Cookie Clicker
  6. // @author       Imnotwraith
  7. // @match        https://orteil.dashnet.org/cookieclicker/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11.  
  12.  
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     // Add the menu HTML to the page
  18.     const menuHTML = `
  19.     <div id="customMenu" style="display: none; position: fixed; top: 50px; left: 50px; width: 400px; height: auto; min-height: 400px; background-color: rgba(0, 0, 0, 0.8); border: 1px solid #444; z-index: 9999; resize: both; overflow: hidden; opacity: 0; transition: opacity 0.5s ease, visibility 0.5s ease;">
  20.         <div id="menuHeader" style="background-color: #555; padding: 10px; cursor: move; text-align: center;">
  21.             <span style="font-weight: bold; color: white;">Imnotwraith Developer Tool</span>
  22.             <button id="minimizeMenu" style="float: right; color: white; background-color: orange; border: none; margin-left: 5px;">_</button>
  23.             <button id="closeMenu" style="float: right; color: white; background-color: red; border: none;">X</button>
  24.         </div>
  25.         <div id="menuTabs" style="text-align: center; margin: 10px 0;">
  26.             <button id="tabMain" style="background-color: #ccc; color: black; border: 1px solid #888; padding: 10px 15px; margin-right: 5px; cursor: pointer;">Main</button>
  27.             <button id="tabAbout" style="background-color: #ccc; color: black; border: 1px solid #888; padding: 10px 15px; margin-right: 5px; cursor: pointer;">About</button>
  28.             <button id="tabThemes" style="background-color: #ccc; color: black; border: 1px solid #888; padding: 10px 15px; cursor: pointer;">Themes</button>
  29.         </div>
  30.         <div id="tabContentMain" style="display: none; padding: 20px; text-align: center;">
  31.             <div id="buttonContainer" style="display: flex; flex-wrap: wrap; justify-content: center;">
  32.                 <button class="toggleButton" id="loopMoneyButton" style="background-color: #777; color: white; border: none; padding: 10px; margin: 10px; cursor: pointer;">Loop Money</button>
  33.                 <button class="toggleButton" id="button2" style="background-color: #777; color: white; border: none; padding: 10px; margin: 10px; cursor: pointer;">Save Game</button>
  34.                 <button class="toggleButton" style="background-color: #777; color: white; border: none; padding: 10px; margin: 10px; cursor: pointer;">Button 3</button>
  35.                 <button class="toggleButton" style="background-color: #777; color: white; border: none; padding: 10px; margin: 10px; cursor: pointer;">Button 4</button>
  36.                 <button class="toggleButton" style="background-color: #777; color: white; border: none; padding: 10px; margin: 10px; cursor: pointer;">Button 5</button>
  37.                 <button class="toggleButton" style="background-color: #777; color: white; border: none; padding: 10px; margin: 10px; cursor: pointer;">Button 6</button>
  38.                 <button class="toggleButton" style="background-color: #777; color: white; border: none; padding: 10px; margin: 10px; cursor: pointer;">Button 7</button>
  39.                 <button class="toggleButton" style="background-color: #777; color: white; border: none; padding: 10px; margin: 10px; cursor: pointer;">Button 8</button>
  40.                 <button class="toggleButton" style="background-color: #777; color: white; border: none; padding: 10px; margin: 10px; cursor: pointer;">Button 9</button>
  41.             </div>
  42.         </div>
  43.         <div id="tabContentAbout" style="display: none; padding: 20px; text-align: center;">
  44.             <h2 style="color: white;">About This Menu</h2>
  45.             <p style="color: white;">This is a customizable draggable and resizable menu.</p>
  46.         </div>
  47.         <div id="tabContentThemes" style="display: none; padding: 20px; text-align: center;">
  48.             <h3 style="color: white;">Choose Your Colors</h3>
  49.             <label style="color: white;">Menu Background Color:</label>
  50.             <input type="color" id="menuBgColor" value="#000000" style="margin: 5px;">
  51.             <br>
  52.             <label style="color: white;">Text Color:</label>
  53.             <input type="color" id="textColor" value="#ffffff" style="margin: 5px;">
  54.             <br>
  55.             <button id="applyTheme" style="background-color: #777; color: white; border: none; padding: 10px 20px; margin-top: 10px; cursor: pointer;">Apply Theme</button>
  56.         </div>
  57.     </div>
  58.     <div id="toggleButton" style="display: none; position: fixed; bottom: 20px; left: 20px; width: 50px; height: 50px; background-color: rgba(255, 0, 0, 0.8); color: white; border: none; border-radius: 50%; text-align: center; line-height: 50px; cursor: pointer; z-index: 10000;">+</div>
  59.     `;
  60.  
  61.     document.body.insertAdjacentHTML('beforeend', menuHTML);
  62.  
  63.     const menu = document.getElementById('customMenu');
  64.     const toggleButton = document.getElementById('toggleButton');
  65.     const menuHeader = document.getElementById('menuHeader');
  66.     const closeMenu = document.getElementById('closeMenu');
  67.     const minimizeMenu = document.getElementById('minimizeMenu');
  68.     const tabMain = document.getElementById('tabMain');
  69.     const tabAbout = document.getElementById('tabAbout');
  70.     const tabThemes = document.getElementById('tabThemes');
  71.     const tabContentMain = document.getElementById('tabContentMain');
  72.     const tabContentAbout = document.getElementById('tabContentAbout');
  73.     const tabContentThemes = document.getElementById('tabContentThemes');
  74.     const menuBgColorInput = document.getElementById('menuBgColor');
  75.     const textColorInput = document.getElementById('textColor');
  76.     const applyThemeButton = document.getElementById('applyTheme');
  77.     const loopMoneyButton = document.getElementById('loopMoneyButton');
  78.     const button2 = document.getElementById('button2');
  79.  
  80.     let isHidden = true;
  81.     let loopMoneyInterval;
  82.  
  83.     // Show menu smoothly
  84.     const showMenuSmoothly = () => {
  85.         menu.style.display = 'block'; // Make sure it's set to block first
  86.         menu.style.opacity = '0';
  87.         setTimeout(() => {
  88.             menu.style.opacity = '1';
  89.             menu.style.visibility = 'visible';
  90.             menu.style.top = `${(window.innerHeight - menu.clientHeight) / 2}px`;
  91.             menu.style.left = `${(window.innerWidth - menu.clientWidth) / 2}px`;
  92.         }, 10); // Allow display change to take effect
  93.     };
  94.  
  95.     // Hide menu smoothly
  96.     const hideMenuSmoothly = () => {
  97.         menu.style.opacity = '0';
  98.         setTimeout(() => {
  99.             menu.style.visibility = 'hidden';
  100.             menu.style.display = 'none'; // Set display to none after opacity transition
  101.         }, 500); // matches the transition time
  102.         toggleButton.style.display = 'block'; // Show the toggle button
  103.     };
  104.  
  105.     // Minimize menu
  106.     minimizeMenu.addEventListener('click', () => {
  107.         hideMenuSmoothly();
  108.         isHidden = true;
  109.         clearInterval(loopMoneyInterval); // Stop the loop if menu is minimized
  110.     });
  111.  
  112.     // Close menu on 'X' button click
  113.     closeMenu.addEventListener('click', () => {
  114.         menu.style.display = 'none'; // Set display to none immediately
  115.         toggleButton.style.display = 'block'; // Show the toggle button
  116.         clearInterval(loopMoneyInterval); // Stop the loop if menu is closed
  117.     });
  118.  
  119.     // Show menu on toggle button click
  120.     toggleButton.addEventListener('click', () => {
  121.         showMenuSmoothly();
  122.         isHidden = false;
  123.         toggleButton.style.display = 'none'; // Hide the toggle button when menu is shown
  124.     });
  125.  
  126.     // Tab switching functionality
  127.     const switchTab = (mainDisplay, aboutDisplay, themesDisplay) => {
  128.         tabContentMain.style.display = mainDisplay;
  129.         tabContentAbout.style.display = aboutDisplay;
  130.         tabContentThemes.style.display = themesDisplay;
  131.     };
  132.  
  133.     tabMain.addEventListener('click', () => switchTab('block', 'none', 'none'));
  134.     tabAbout.addEventListener('click', () => switchTab('none', 'block', 'none'));
  135.     tabThemes.addEventListener('click', () => switchTab('none', 'none', 'block'));
  136.  
  137.     // Show Main tab by default
  138.     tabMain.click();
  139.  
  140.     // Initial setup
  141.     setTimeout(() => {
  142.         showMenuSmoothly();
  143.         isHidden = false; // Menu is now visible
  144.     }, 100);
  145.  
  146.     // Apply theme colors
  147.     applyThemeButton.addEventListener('click', () => {
  148.         const menuBgColor = menuBgColorInput.value;
  149.         const textColor = textColorInput.value;
  150.  
  151.         menu.style.backgroundColor = menuBgColor;
  152.         menuHeader.style.color = textColor;
  153.         tabMain.style.color = textColor;
  154.         tabAbout.style.color = textColor;
  155.         tabThemes.style.color = textColor;
  156.         tabContentMain.style.color = textColor;
  157.         tabContentAbout.style.color = textColor;
  158.         tabContentThemes.style.color = textColor;
  159.  
  160.         // Adjust button colors
  161.         const buttons = document.querySelectorAll('#buttonContainer button');
  162.         buttons.forEach(button => {
  163.             button.style.backgroundColor = textColor;
  164.         });
  165.     });
  166.  
  167.     // Loop Money functionality
  168.     loopMoneyButton.addEventListener('click', () => {
  169.         loopMoneyButton.classList.toggle('active');
  170.         loopMoneyButton.style.backgroundColor = loopMoneyButton.classList.contains('active') ? '#4caf50' : '#777';
  171.  
  172.         if (loopMoneyButton.classList.contains('active')) {
  173.             loopMoneyInterval = setInterval(() => {
  174.                 Game.Earn(1000); // Adjust this line as needed
  175.             }, 1); // Adjust interval as necessary
  176.         } else {
  177.             clearInterval(loopMoneyInterval);
  178.         }
  179.     });
  180.  
  181.     // Button 2 functionality
  182.     button2.addEventListener('click', () => {
  183.         Game.Tosave = true;
  184.         //alert('Game.Tosave is set to true'); // Optional alert for feedback
  185.     });
  186.  
  187.     // Draggable functionality
  188.     let isDragging = false;
  189.     let offsetX, offsetY;
  190.  
  191.     menuHeader.addEventListener('mousedown', (e) => {
  192.         isDragging = true;
  193.         offsetX = e.clientX - menu.getBoundingClientRect().left;
  194.         offsetY = e.clientY - menu.getBoundingClientRect().top;
  195.         menuHeader.style.cursor = 'grabbing';
  196.     });
  197.  
  198.     document.addEventListener('mousemove', (e) => {
  199.         if (isDragging) {
  200.             menu.style.left = `${e.clientX - offsetX}px`;
  201.             menu.style.top = `${e.clientY - offsetY}px`;
  202.         }
  203.     });
  204.  
  205.     document.addEventListener('mouseup', () => {
  206.         isDragging = false;
  207.         menuHeader.style.cursor = 'move';
  208.     });
  209. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址