☰

Menu template for your script

I just did it because I'm bored... How you will use this menu depends on you! I did it for the developers of cheats on Moo Moo.io, but it can be used on any game.

  1. // ==UserScript==
  2. // @name         Menu template for your script
  3. // @namespace    none
  4. // @version      1
  5. // @description  I just did it because I'm bored... How you will use this menu depends on you! I did it for the developers of cheats on Moo Moo.io, but it can be used on any game.
  6. // @author       00100110#6361
  7. // @match        *://moomoo.io/*
  8. // @match        *://*.moomoo.io/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. /* Stting menu */
  13.  
  14. let menu = {
  15.     opacity: 1,
  16.     position: {
  17.         relative: `relative`,
  18.         absolute: `absolute`,
  19.         top: `${70}px`,
  20.         left: `${20}px`,
  21.         bottom: `${0}px`,
  22.         right: `${0}px`,
  23.     },
  24.     size: {
  25.         width: `${330}px`,
  26.         height: `${400}px`,
  27.         height_title_block: `${30}px`,
  28.         border_body_block: `${5}px`,
  29.         border_radius_body_block: `${7}px`,
  30.         font_size_title_block: `${21}px`,
  31.         font_size_inner_block: `${18}px`
  32.     },
  33.     colors: {
  34.         background_title_block: `rgba(66, 66, 66, 0.61)`,
  35.         background_body_block: `rgba(0, 0, 0, 0.25)`,
  36.         background_inner_block: `rgba(0, 0, 0, 0.25)`,
  37.         border_body_block: `rgba(38, 38, 38, 0.72)`,
  38.         title_text: `#fff`,
  39.         inner_block: `#fff`,
  40.     },
  41.     display: {
  42.         block: `block`,
  43.         flex: `flex`,
  44.         none: `none`
  45.     },
  46.     align: {
  47.         left: `left`,
  48.         center: `center`,
  49.         right: `right`,
  50.         bottom: `bottom`
  51.     }
  52. }
  53.  
  54. menu = new Proxy(menu, {
  55.     set(target, prop, val) {
  56.         if (prop in target) {
  57.             return true
  58.             if (typeof val != 'string') {
  59.                 target[prop] = val.toString()
  60.             } else {
  61.                 return target[prop]
  62.             }
  63.         } else {
  64.             return prop
  65.             return false
  66.             throw new Error(`Prop: ${prop} not defined in ${target}`)
  67.         }
  68.     }
  69. });
  70.  
  71. /* Create menu HTML code */
  72. const html = `
  73. <!--
  74. <main></main> & <passive></passive> - are not embedded tags in HTML.
  75. I use this to denote the significance of the blocks.
  76. class="" & id="" - I use to denote blocks, id for everything else
  77. -->
  78. <!-- Add holder -->
  79. <main class="menu--holder">
  80.   <main class="menu--body">
  81.     <passive id="menu--title">
  82.       Menu
  83.     </passive>
  84.     <main class="menu--inner-gui">
  85.       <passive class="menu--inner-gui-block">
  86.         <passive id="menu--inner-gui-block-text">
  87.           Your text <input type="checkbox" id="Your id">
  88.         </passive>
  89.  
  90.       </passive>
  91.     </main>
  92.   </main>
  93. </main>
  94. `
  95.  
  96. /* Create menu CSS code */
  97.  
  98. let css = `
  99. <style>
  100. /*
  101. . - use for class
  102. # - use for id
  103. */
  104.  
  105. /* Style for holder menu. */
  106. main.menu--holder {
  107. position: ${menu.position.absolute};
  108. top: ${menu.position.top};
  109. left: ${menu.position.left};
  110. width: ${menu.size.width};
  111. height: ${menu.size.height};
  112. display: ${menu.display.none};
  113. }
  114.  
  115. /* Style for body menu. */
  116. main.menu--body {
  117. width: 100% !important;
  118. height: 100% !important;
  119. background: ${menu.colors.background_body_block};
  120. border-radius: ${menu.size.border_radius_body_block};
  121. border: ${menu.size.border_body_block} solid ${menu.colors.border_body_block};
  122. opacity: ${menu.opacity};
  123. }
  124.  
  125. /* Style for title menu */
  126. passive#menu--title {
  127. cursor: move;
  128. position: ${menu.position.relative};
  129. display: ${menu.display.flex};
  130. width: 92.6% !important;
  131. background: ${menu.colors.background_title_block};
  132. color: ${menu.colors.title_text};
  133. align-content: ${menu.align.center};
  134. justify-content: ${menu.align.center};
  135. font-size: ${menu.size.font_size_title_block};
  136. text-align: ${menu.align.center};
  137. height: ${menu.size.height_title_block};
  138. box-shadow: 0px 0px 4px #1a1a1a;
  139. flex-wrap: wrap;
  140. margin-left: 12px;
  141. margin-top: 5px;
  142. }
  143.  
  144. /* Style for inner menu gui */
  145. main.menu--inner-gui {
  146. margin: 0px 2px;
  147. display: ${menu.display.flex};
  148. }
  149.  
  150. /* Style for inner menu gui block */
  151. passive.menu--inner-gui-block {
  152. width: 290px;
  153. vertical-align: top;
  154. height: 330px;
  155. margin: 0px 10px 10px 10px;
  156. background: rgba(66, 66, 66, 0.61);
  157. box-shadow: 0px 0px 4px #1a1a1a;
  158. border-radius: 3px;
  159. overflow-x: hidden;
  160. overflow-y: auto;
  161. color: #fff;
  162. padding: 10px;
  163. margin-top: 10px;
  164. }
  165.  
  166. /* Style for text in inner menu */
  167. passive#menu--inner-gui-block-text {
  168. color: ${menu.colors.inner_block};
  169. font-size: ${menu.size.font_size_inner_block};
  170. display: ${menu.display.block};
  171. }
  172.  
  173. input[type="checkbox"] {
  174. vertical-align: middle;
  175. user-select: none;
  176. box-sizing: border-box;
  177. cursor: pointer;
  178. }
  179. </style>
  180. `
  181.  
  182.  
  183. /* Create menu JS code */
  184.  
  185. let js = `
  186. <script>
  187.  
  188. // If you click outside of the menu location
  189. $(document).mouseup(function (e) {
  190.     let container = $(".menu--holder")
  191.     if (container.has(e.target).length === 0 && container.css('display') == 'block'){
  192.         container.css('opacity', '0.35')
  193.     } else {
  194.         container.css('opacity', '1')
  195.     }
  196. })
  197.  
  198. // Drag element
  199. dragElement(document.querySelector((".menu--holder")))
  200. function dragElement(elmnt) {
  201.     let pos1 = 0,
  202.     pos2 = 0,
  203.     pos3 = 0,
  204.     pos4 = 0
  205.     if (document.getElementById("menu--title")) {
  206.         /* if present, the header is where you move the DIV from:*/
  207.         document.getElementById("menu--title").onmousedown = dragMouseDown
  208.     } else {
  209.         /* otherwise, move the DIV from anywhere inside the DIV:*/
  210.         elmnt.onmousedown = dragMouseDown
  211.     }
  212.  
  213.     function dragMouseDown(e) {
  214.         e = e || window.event
  215.         // get the mouse cursor position at startup:
  216.         pos3 = e.clientX
  217.         pos4 = e.clientY
  218.         document.onmouseup = closeDragElement
  219.         // call a function whenever the cursor moves:
  220.         document.onmousemove = elementDrag
  221.     }
  222.  
  223.     function elementDrag(e) {
  224.         e = e || window.event
  225.         // calculate the new cursor position:
  226.         pos1 = pos3 - e.clientX
  227.         pos2 = pos4 - e.clientY
  228.         pos3 = e.clientX
  229.         pos4 = e.clientY
  230.         // set the element's new position:
  231.         elmnt.style.top = (elmnt.offsetTop - pos2) + "px"
  232.         elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"
  233.     }
  234.  
  235.     function closeDragElement() {
  236.         /* stop moving when mouse button is released:*/
  237.         document.onmouseup = null
  238.         document.onmousemove = null
  239.     }
  240. }
  241. </script>
  242. `
  243.  
  244. /* Add menu in body */
  245. $('body').append(html, css, js)
  246.  
  247. /* Add toggler for menu */
  248. let openMenu = true
  249. document.addEventListener("keydown", function(event) {
  250.     if (event.code == "Escape") {
  251.         if (openMenu) {
  252.             openMenu = false
  253.             $('.menu--holder').css('display', menu.display.block)
  254.         } else {
  255.             openMenu = true
  256.             $('.menu--holder').css('display', menu.display.none)
  257.         }
  258.     }
  259. })

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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