☰

Diep.io Mod Menu

Loop upgrade custom builds, render aim line, render factory guide circle.

  1. // ==UserScript==
  2. // @name         Diep.io Mod Menu
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.5
  5. // @homepage     https://github.com/x032205/diep_mod_menu
  6. // @description  Loop upgrade custom builds, render aim line, render factory guide circle.
  7. // @author       https://github.com/x032205
  8. // @match        https://diep.io/*
  9. // @grant        none
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. const presets = [
  14.   {
  15.     name: "Rammer (triangles & annihilator) [ 5 / 7 / 7 / 0 / 0 / 0 / 7 / 7 ]",
  16.     build: "123123123123123888882382387777777",
  17.   },
  18.   {
  19.     name: "Bullet Umbrella (triangles) [ 0 / 1 / 2 / 2 / 7 / 7 / 7 / 7 ]",
  20.     build: "567445675675675675675678888888233",
  21.   },
  22.   {
  23.     name: "Glass Cannon (spreadshot, factory, etc) [ 0 / 0 / 0 / 6 / 7 / 7 / 7 / 6 ]",
  24.     build: "567456747654765476547566888821212",
  25.   },
  26.   {
  27.     name: "Balanced (overlord, fighter) [ 3 / 3 / 3 / 5 / 5 / 5 / 5 / 4 ]",
  28.     build: "567445674567456745671238123812388",
  29.   },
  30.   {
  31.     name: "The 1M Overlord [ 2 / 3 / 0 / 7 / 7 / 7 / 0 / 7 ]",
  32.     build: "564456456456456888456456888822112",
  33.   },
  34.   {
  35.     name: "Balanced Factory [ 2 / 3 / 0 / 5 / 6 / 7 / 6 / 4 ]",
  36.     build: "567456747654765476547566888821212",
  37.   },
  38.   {
  39.     name: "Armor (penta, rocketeer, trappers) [ 0 / 6 / 6 / 0 / 7 / 7 / 7 / 0 ]",
  40.     build: "567567567567567567567232323232323",
  41.   },
  42. ];
  43.  
  44. (function () {
  45.   "use strict";
  46.  
  47.   const backdrop = document.createElement("div");
  48.   backdrop.id = "backdrop";
  49.  
  50.   const toggle_text = document.createElement("code");
  51.   toggle_text.classList.add("watermark");
  52.   toggle_text.textContent = "Diep Mod Menu | Press [R] to toggle";
  53.  
  54.   backdrop.appendChild(toggle_text);
  55.  
  56.   const panel = document.createElement("div");
  57.   panel.id = "panel";
  58.  
  59.   const side_panel = document.createElement("nav");
  60.   panel.appendChild(side_panel);
  61.  
  62.   const separator = document.createElement("div");
  63.   separator.classList.add("separator");
  64.   panel.appendChild(separator);
  65.  
  66.   const display_panel = document.createElement("div");
  67.   display_panel.classList.add("inner_panel");
  68.   panel.appendChild(display_panel);
  69.  
  70.   // Auto Respawn
  71.   const auto_respawn = document.createElement("div");
  72.   auto_respawn.classList.add("view-option");
  73.  
  74.   const auto_respawn_text = document.createElement("span");
  75.   auto_respawn_text.textContent = "Auto Respawn (uses [X03] username)";
  76.  
  77.   const auto_respawn_label = document.createElement("label");
  78.   auto_respawn_label.classList.add("switch");
  79.  
  80.   const auto_respawn_toggle = document.createElement("input");
  81.   auto_respawn_toggle.setAttribute("type", "checkbox");
  82.   auto_respawn_label.appendChild(auto_respawn_toggle);
  83.  
  84.   const auto_respawn_div = document.createElement("div");
  85.   auto_respawn_label.appendChild(auto_respawn_div);
  86.   auto_respawn.appendChild(auto_respawn_label);
  87.   auto_respawn.appendChild(auto_respawn_text);
  88.  
  89.   // Aim Line
  90.   const view_line = document.createElement("div");
  91.   view_line.classList.add("view-option");
  92.  
  93.   const view_line_text = document.createElement("span");
  94.   view_line_text.textContent = "Aim line";
  95.  
  96.   const view_line_label = document.createElement("label");
  97.   view_line_label.classList.add("switch");
  98.  
  99.   const view_line_toggle = document.createElement("input");
  100.   view_line_toggle.setAttribute("type", "checkbox");
  101.   view_line_label.appendChild(view_line_toggle);
  102.  
  103.   const view_line_div = document.createElement("div");
  104.   view_line_label.appendChild(view_line_div);
  105.   view_line.appendChild(view_line_label);
  106.   view_line.appendChild(view_line_text);
  107.  
  108.   // Factory Circle
  109.   const view_circle = document.createElement("div");
  110.   view_circle.classList.add("view-option");
  111.  
  112.   const view_circle_text = document.createElement("span");
  113.   view_circle_text.textContent = "Factory circle";
  114.  
  115.   const view_circle_label = document.createElement("label");
  116.   view_circle_label.classList.add("switch");
  117.  
  118.   const view_circle_toggle = document.createElement("input");
  119.   view_circle_toggle.setAttribute("type", "checkbox");
  120.   view_circle_label.appendChild(view_circle_toggle);
  121.  
  122.   const view_circle_div = document.createElement("div");
  123.   view_circle_label.appendChild(view_circle_div);
  124.   view_circle.appendChild(view_circle_label);
  125.   view_circle.appendChild(view_circle_text);
  126.  
  127.   // Render Collisions
  128.   const render_collisions = document.createElement("div");
  129.   render_collisions.classList.add("view-option");
  130.  
  131.   const render_collisions_text = document.createElement("span");
  132.   render_collisions_text.textContent = "Render Collisions";
  133.  
  134.   const render_collisions_label = document.createElement("label");
  135.   render_collisions_label.classList.add("switch");
  136.  
  137.   const render_collisions_toggle = document.createElement("input");
  138.   render_collisions_toggle.setAttribute("type", "checkbox");
  139.   render_collisions_label.appendChild(render_collisions_toggle);
  140.  
  141.   const render_collisions_div = document.createElement("div");
  142.   render_collisions_label.appendChild(render_collisions_div);
  143.   render_collisions.appendChild(render_collisions_label);
  144.   render_collisions.appendChild(render_collisions_text);
  145.  
  146.   render_collisions_toggle.addEventListener("change", function () {
  147.     if (render_collisions_toggle.checked) {
  148.       input.execute("ren_debug_collisions true");
  149.     } else {
  150.       input.execute("ren_debug_collisions false");
  151.     }
  152.     localStorage.setItem(
  153.       "mm_render_collisions",
  154.       render_collisions_toggle.checked,
  155.     );
  156.   });
  157.  
  158.   // Render FPS
  159.   const render_fps = document.createElement("div");
  160.   render_fps.classList.add("view-option");
  161.  
  162.   const render_fps_text = document.createElement("span");
  163.   render_fps_text.textContent = "Render FPS";
  164.  
  165.   const render_fps_label = document.createElement("label");
  166.   render_fps_label.classList.add("switch");
  167.  
  168.   const render_fps_toggle = document.createElement("input");
  169.   render_fps_toggle.setAttribute("type", "checkbox");
  170.   render_fps_label.appendChild(render_fps_toggle);
  171.  
  172.   const render_fps_div = document.createElement("div");
  173.   render_fps_label.appendChild(render_fps_div);
  174.   render_fps.appendChild(render_fps_label);
  175.   render_fps.appendChild(render_fps_text);
  176.  
  177.   render_fps_toggle.addEventListener("change", function () {
  178.     if (render_fps_toggle.checked) {
  179.       input.execute("ren_fps true");
  180.     } else {
  181.       input.execute("ren_fps false");
  182.     }
  183.     localStorage.setItem("mm_render_fps", render_fps_toggle.checked);
  184.   });
  185.  
  186.   // Render Raw Health Values
  187.   const render_rhw = document.createElement("div");
  188.   render_rhw.classList.add("view-option");
  189.  
  190.   const render_rhw_text = document.createElement("span");
  191.   render_rhw_text.textContent = "Render Raw Health Values";
  192.  
  193.   const render_rhw_label = document.createElement("label");
  194.   render_rhw_label.classList.add("switch");
  195.  
  196.   const render_rhw_toggle = document.createElement("input");
  197.   render_rhw_toggle.setAttribute("type", "checkbox");
  198.   render_rhw_label.appendChild(render_rhw_toggle);
  199.  
  200.   const render_rhw_div = document.createElement("div");
  201.   render_rhw_label.appendChild(render_rhw_div);
  202.   render_rhw.appendChild(render_rhw_label);
  203.   render_rhw.appendChild(render_rhw_text);
  204.  
  205.   render_rhw_toggle.addEventListener("change", function () {
  206.     if (render_rhw_toggle.checked) {
  207.       input.execute("ren_raw_health_values true");
  208.     } else {
  209.       input.execute("ren_raw_health_values false");
  210.     }
  211.     localStorage.setItem("mm_render_raw_health", render_rhw_toggle.checked);
  212.   });
  213.  
  214.   // Hide UI
  215.   const hide_ui = document.createElement("div");
  216.   hide_ui.classList.add("view-option");
  217.  
  218.   const hide_ui_text = document.createElement("span");
  219.   hide_ui_text.textContent = "Hide Game UI";
  220.  
  221.   const hide_ui_label = document.createElement("label");
  222.   hide_ui_label.classList.add("switch");
  223.  
  224.   const hide_ui_toggle = document.createElement("input");
  225.   hide_ui_toggle.setAttribute("type", "checkbox");
  226.   hide_ui_label.appendChild(hide_ui_toggle);
  227.  
  228.   const hide_ui_div = document.createElement("div");
  229.   hide_ui_label.appendChild(hide_ui_div);
  230.   hide_ui.appendChild(hide_ui_label);
  231.   hide_ui.appendChild(hide_ui_text);
  232.  
  233.   hide_ui_toggle.addEventListener("change", function () {
  234.     if (hide_ui_toggle.checked) {
  235.       input.execute("ren_ui false");
  236.     } else {
  237.       input.execute("ren_ui true");
  238.     }
  239.     localStorage.setItem("mm_hide_ui", hide_ui_toggle.checked);
  240.   });
  241.  
  242.   // Visual Tab
  243.   const visual_tab = document.createElement("button");
  244.   visual_tab.classList.add("tab_button", "active");
  245.   side_panel.appendChild(visual_tab);
  246.  
  247.   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  248.   svg.setAttribute("width", "32");
  249.   svg.setAttribute("height", "32");
  250.   svg.setAttribute("viewBox", "0 0 24 24");
  251.   svg.setAttribute("fill", "none");
  252.   svg.setAttribute("stroke", "#BBBBBB");
  253.   svg.setAttribute("stroke-width", "2.5");
  254.   svg.setAttribute("stroke-linecap", "round");
  255.   svg.setAttribute("stroke-linejoin", "round");
  256.  
  257.   svg.innerHTML =
  258.     '<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/>';
  259.  
  260.   visual_tab.appendChild(svg);
  261.  
  262.   visual_tab.onclick = function () {
  263.     display_panel.innerHTML = ``;
  264.     display_panel.appendChild(auto_respawn);
  265.     display_panel.appendChild(view_line);
  266.     display_panel.appendChild(view_circle);
  267.     display_panel.appendChild(render_collisions);
  268.     display_panel.appendChild(render_fps);
  269.     display_panel.appendChild(render_rhw);
  270.     display_panel.appendChild(hide_ui);
  271.     setActiveTab(visual_tab);
  272.   };
  273.  
  274.   const au_label = document.createElement("span");
  275.   au_label.classList.add("subheading");
  276.   au_label.textContent = "Custom Build";
  277.  
  278.   const au_input = document.createElement("input");
  279.   au_input.ariaReadOnly = "true";
  280.   au_input.setAttribute("type", "number");
  281.   au_input.classList.add("custom-input");
  282.   au_input.placeholder = "000000000000000000000000000000000";
  283.   au_input.value = localStorage.getItem("diepModMenuBuild") || "";
  284.  
  285.   au_input.addEventListener("input", function () {
  286.     if (au_input.value.length > 33) {
  287.       au_input.value = au_input.value.slice(0, 33);
  288.     }
  289.     localStorage.setItem("diepModMenuBuild", au_input.value);
  290.   });
  291.  
  292.   const au_autoset = document.createElement("div");
  293.   au_autoset.classList.add("view-option");
  294.  
  295.   const au_autoset_text = document.createElement("span");
  296.   au_autoset_text.textContent = "Keep build on respawn";
  297.  
  298.   const au_autoset_label = document.createElement("label");
  299.   au_autoset_label.classList.add("switch");
  300.  
  301.   const au_autoset_toggle = document.createElement("input");
  302.   au_autoset_toggle.setAttribute("type", "checkbox");
  303.   au_autoset_label.appendChild(au_autoset_toggle);
  304.  
  305.   const au_autoset_div = document.createElement("div");
  306.   au_autoset_label.appendChild(au_autoset_div);
  307.   au_autoset.appendChild(au_autoset_label);
  308.   au_autoset.appendChild(au_autoset_text);
  309.  
  310.   au_autoset_toggle.addEventListener("change", function () {
  311.     localStorage.setItem("mm_keep_build_on_spawn", au_autoset_toggle.checked);
  312.   });
  313.  
  314.   // Presets
  315.   const au_presets_label = document.createElement("span");
  316.   au_presets_label.classList.add("subheading");
  317.   au_presets_label.textContent = "Presets";
  318.  
  319.   const preset_panel = document.createElement("div");
  320.   preset_panel.classList.add("preset-panel");
  321.  
  322.   presets.forEach((preset) => {
  323.     const presetButton = document.createElement("button");
  324.     presetButton.textContent = preset.name;
  325.     presetButton.classList.add("button");
  326.     presetButton.onclick = function () {
  327.       au_input.value = preset.build;
  328.       localStorage.setItem("diepModMenuBuild", preset.build);
  329.       input.execute("game_stats_build " + preset.build);
  330.     };
  331.     preset_panel.appendChild(presetButton);
  332.   });
  333.  
  334.   // Auto Upgrade Tab
  335.   const auto_upgrades_tab = document.createElement("button");
  336.   auto_upgrades_tab.classList.add("tab_button");
  337.   side_panel.appendChild(auto_upgrades_tab);
  338.  
  339.   const au_svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  340.   au_svg.setAttribute("width", "32");
  341.   au_svg.setAttribute("height", "32");
  342.   au_svg.setAttribute("viewBox", "0 0 24 24");
  343.   au_svg.setAttribute("fill", "none");
  344.   au_svg.setAttribute("stroke", "#BBBBBB");
  345.   au_svg.setAttribute("stroke-width", "2.5");
  346.   au_svg.setAttribute("stroke-linecap", "round");
  347.   au_svg.setAttribute("stroke-linejoin", "round");
  348.  
  349.   au_svg.innerHTML =
  350.     '<path d="M12 2a10 10 0 0 1 7.38 16.75"/><path d="m16 12-4-4-4 4"/><path d="M12 16V8"/><path d="M2.5 8.875a10 10 0 0 0-.5 3"/><path d="M2.83 16a10 10 0 0 0 2.43 3.4"/><path d="M4.636 5.235a10 10 0 0 1 .891-.857"/><path d="M8.644 21.42a10 10 0 0 0 7.631-.38"/>';
  351.  
  352.   auto_upgrades_tab.appendChild(au_svg);
  353.  
  354.   auto_upgrades_tab.onclick = function () {
  355.     display_panel.innerHTML = ``;
  356.     display_panel.appendChild(au_label);
  357.     display_panel.appendChild(au_input);
  358.     display_panel.appendChild(au_autoset);
  359.     display_panel.appendChild(au_presets_label);
  360.     display_panel.appendChild(preset_panel);
  361.     setActiveTab(auto_upgrades_tab);
  362.   };
  363.  
  364.   const credits_tab = document.createElement("button");
  365.   credits_tab.classList.add("tab_button");
  366.   side_panel.appendChild(credits_tab);
  367.  
  368.   const credit_svg = document.createElementNS(
  369.     "http://www.w3.org/2000/svg",
  370.     "svg",
  371.   );
  372.   credit_svg.setAttribute("width", "32");
  373.   credit_svg.setAttribute("height", "32");
  374.   credit_svg.setAttribute("viewBox", "0 0 24 24");
  375.   credit_svg.setAttribute("fill", "none");
  376.   credit_svg.setAttribute("stroke", "#BBBBBB");
  377.   credit_svg.setAttribute("stroke-width", "2.5");
  378.   credit_svg.setAttribute("stroke-linecap", "round");
  379.   credit_svg.setAttribute("stroke-linejoin", "round");
  380.  
  381.   credit_svg.innerHTML =
  382.     '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>';
  383.  
  384.   credits_tab.appendChild(credit_svg);
  385.  
  386.   credits_tab.onclick = function () {
  387.     display_panel.innerHTML = `<span><span class="text-muted">Discord:</span> <code>@x03</code></span>
  388. <span><span class="text-muted">Github:</span> <code>@x032205</code></span>`;
  389.     setActiveTab(credits_tab);
  390.   };
  391.  
  392.   const style = document.createElement("style");
  393.   style.textContent = `
  394.     code { font-family: monospace; }
  395.  
  396.     #panel {
  397.       font-family: 'Inter', sans-serif;
  398.       color: #EEEEEE;
  399.       font-size: 16px;
  400.       display: flex;
  401.       flex-direction: row;
  402.       max-width: 600px;
  403.       max-height: 400px;
  404.       width: 100%;
  405.       height: 100%;
  406.       padding: 12px;
  407.       position: absolute;
  408.       top: 50%;
  409.       left: 50%;
  410.       transform: translate(-50%, -50%);
  411.       gap: 6px;
  412.       background: hsla(0, 0%, 10%, 0.7);
  413.       backdrop-filter: blur(7px);
  414.       -webkit-backdrop-filter: blur(7px);
  415.       border: 1px solid hsla(0, 0%, 100%, 0.1);
  416.       border-radius: 8px;
  417.       z-index: 10;
  418.     }
  419.  
  420.     .separator {
  421.       width: 1px;
  422.       height: 100%;
  423.       background-color: hsla(0, 0%, 100%, 0.1);
  424.     }
  425.  
  426.     .switch {
  427.       display: inline-block;
  428.       font-size: 20px;
  429.       height: 1em;
  430.       width: 2em;
  431.       background: rgb(50, 50, 50);
  432.       border-radius: 1em;
  433.       margin-right: 10px;
  434.       cursor: pointer;
  435.     }
  436.  
  437.     .switch input {
  438.       position: absolute;
  439.       opacity: 0;
  440.       cursor: pointer;
  441.     }
  442.  
  443.     .switch div {
  444.       font-size: 20px;
  445.       height: 1em;
  446.       width: 1em;
  447.       border-radius: 1em;
  448.       background: rgb(100, 100, 100);
  449.       transition: all 100ms;
  450.       cursor: pointer;
  451.     }
  452.  
  453.     .switch input:checked + div {
  454.       transform: translate3d(100%, 0, 0);
  455.       background: #EEEEEE;
  456.     }
  457.  
  458.     nav {
  459.       display: flex;
  460.       flex-direction: column;
  461.       gap: 6px;
  462.     }
  463.  
  464.     .inner_panel {
  465.       display: flex;
  466.       flex-direction: column;
  467.       gap: 6px;
  468.       padding: 4px;
  469.       width: 100%;
  470.       margin-left: 4px;
  471.     }
  472.  
  473.     .tab_button {
  474.       display: flex;
  475.       width: 48px;
  476.       height: 48px;
  477.       justify-content: center;
  478.       align-items: center;
  479.       background: hsla(0, 0%, 20%, 0.5);
  480.       border-radius: 4px;
  481.       border: none;
  482.       transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1);
  483.     }
  484.  
  485.     .preset-panel {
  486.       display: flex;
  487.       flex-wrap: wrap;
  488.       gap: 6px;
  489.     }
  490.  
  491.     .button {
  492.       color: #EEEEEE;
  493.       background: hsla(0, 0%, 20%, 0.5);
  494.       border: none;
  495.       border-radius: 4px;
  496.       padding: 6px 12px;
  497.       cursor: pointer;
  498.       transition: background 0.2s;
  499.     }
  500.  
  501.     .button:hover {
  502.       background: hsla(0, 0%, 30%, 0.5);
  503.     }
  504.  
  505.     .tab_button:hover,
  506.     .tab_button.active {
  507.       background: hsla(0, 0%, 40%, 0.5);
  508.     }
  509.  
  510.     #backdrop {
  511.       position: fixed;
  512.       top: 0;
  513.       left: 0;
  514.       width: 100%;
  515.       height: 100%;
  516.       background-color: rgba(0, 0, 0, 0.5);
  517.       z-index: 9;
  518.       backdrop-filter: blur(5px);
  519.       -webkit-backdrop-filter: blur(5px);
  520.     }
  521.  
  522.     .watermark {
  523.       position: fixed;
  524.       top: 8px;
  525.       left: 50%;
  526.       transform: translateX(-50%);
  527.     }
  528.  
  529.     .subheading { font-weight: 600; }
  530.  
  531.     .view-option {
  532.       text-align: left;
  533.       align-items: center;
  534.       height: 28px;
  535.       display: flex;
  536.     }
  537.  
  538.     .custom-input {
  539.       color: #EEEEEE;
  540.       background: hsla(0, 0%, 10%, 0.7);
  541.       border: 1px solid hsla(0, 0%, 100%, 0.1);
  542.       border-radius: 4px;
  543.       padding: 6px;
  544.       outline: none;
  545.     }
  546.  
  547.     .text-muted { color: #BBBBBB; }
  548.  
  549.     input::-webkit-outer-spin-button,
  550.     input::-webkit-inner-spin-button {
  551.       -webkit-appearance: none;
  552.       margin: 0;
  553.     }
  554.  
  555.     input[type=number] {
  556.       -moz-appearance: textfield;
  557.     }
  558.   `;
  559.  
  560.   backdrop.appendChild(panel);
  561.   document.body.appendChild(backdrop);
  562.   document.head.appendChild(style);
  563.  
  564.   function toggleDisplay(elementId) {
  565.     const element = document.getElementById(elementId);
  566.     const backdrop = document.getElementById("backdrop");
  567.     const isHidden = element.style.display === "none";
  568.     element.style.display = isHidden ? "block" : "none";
  569.     backdrop.style.display = isHidden ? "block" : "none";
  570.   }
  571.  
  572.   function setActiveTab(activeTab) {
  573.     [visual_tab, auto_upgrades_tab, credits_tab].forEach((tab) =>
  574.       tab.classList.remove("active"),
  575.     );
  576.     activeTab.classList.add("active");
  577.   }
  578.  
  579.   let X, Y, x, y;
  580.   let Z = false;
  581.   let radius = [];
  582.  
  583.   document.body.onkeyup = function (ctx) {
  584.     if (ctx.keyCode === 82) {
  585.       toggleDisplay("backdrop");
  586.     } else if (document.activeElement === au_input) {
  587.       const key = parseInt(ctx.key);
  588.       if (key >= 1 && key <= 8) {
  589.         au_input.value += ctx.key;
  590.         localStorage.setItem("diepModMenuBuild", au_input.value);
  591.       } else if (ctx.keyCode === 8) {
  592.         au_input.value = au_input.value.slice(0, -1);
  593.         localStorage.setItem("diepModMenuBuild", au_input.value);
  594.       }
  595.     }
  596.   };
  597.  
  598.   document.onmousemove = (event) => {
  599.     x = event.clientX;
  600.     y = event.clientY;
  601.   };
  602.   document.onmousedown = (e) => {
  603.     if (e.button === 2) Z = true;
  604.   };
  605.   document.onmouseup = (e) => {
  606.     if (e.button === 2) Z = false;
  607.   };
  608.  
  609.   const canvas = document.createElement("canvas");
  610.   canvas.style.zIndex = "11";
  611.   canvas.style.position = "absolute";
  612.   canvas.style.top = "0px";
  613.   canvas.style.left = "0px";
  614.   canvas.style.pointerEvents = "none";
  615.  
  616.   function getRadius() {
  617.     X = window.innerWidth / 2;
  618.     Y = window.innerHeight / 2;
  619.     canvas.width = window.innerWidth;
  620.     canvas.height = window.innerHeight;
  621.  
  622.     radius = [
  623.       window.innerWidth * 0.17681239669,
  624.       window.innerWidth * 0.06545454545,
  625.       window.innerWidth * 0.16751239669,
  626.       window.innerWidth * 0.36,
  627.     ];
  628.   }
  629.  
  630.   getRadius();
  631.   window.addEventListener("resize", getRadius);
  632.  
  633.   document.body.appendChild(canvas);
  634.   const ctx = canvas.getContext("2d");
  635.  
  636.   let lastRun = 0;
  637.  
  638.   function draw() {
  639.     ctx.clearRect(0, 0, canvas.width, canvas.height);
  640.  
  641.     if (view_line_toggle.checked) {
  642.       ctx.beginPath();
  643.       ctx.moveTo(X, Y);
  644.       ctx.lineTo(x, y);
  645.       ctx.lineWidth = 50;
  646.       ctx.strokeStyle = "rgba(0, 0, 0, 0.05)";
  647.       ctx.stroke();
  648.  
  649.       ctx.beginPath();
  650.       ctx.moveTo(X, Y);
  651.       ctx.lineTo(x, y);
  652.       ctx.lineWidth = 2;
  653.       ctx.strokeStyle = "rgba(0, 0, 0, 0.7)";
  654.       ctx.stroke();
  655.     }
  656.  
  657.     if (view_circle_toggle.checked) {
  658.       ctx.lineWidth = 2;
  659.       ctx.strokeStyle = "rgba(0, 0, 0, 0.7)";
  660.  
  661.       ctx.beginPath();
  662.       ctx.arc(X, Y, radius[3], 0, 2 * Math.PI);
  663.       ctx.stroke();
  664.  
  665.       ctx.beginPath();
  666.       ctx.arc(x, y, radius[1], 0, 2 * Math.PI);
  667.       ctx.stroke();
  668.  
  669.       ctx.beginPath();
  670.       ctx.arc(x, y, Z ? radius[0] : radius[2], 0, 2 * Math.PI);
  671.       ctx.stroke();
  672.     }
  673.  
  674.     // Functions that run at a 3 second cooldown
  675.     if (Date.now() - lastRun >= 1000) {
  676.       if (auto_respawn_toggle.checked) {
  677.         input.execute("game_spawn [X03]");
  678.       }
  679.  
  680.       if (au_autoset_toggle.checked) {
  681.         input.execute("game_stats_build " + au_input.value);
  682.       }
  683.  
  684.       lastRun = Date.now();
  685.     }
  686.  
  687.     requestAnimationFrame(draw);
  688.   }
  689.   draw();
  690.  
  691.   // Load saved toggle states
  692.   auto_respawn_toggle.checked =
  693.     localStorage.getItem("mm_auto_respawn") === "true";
  694.   view_line_toggle.checked = localStorage.getItem("mm_view_line") === "true";
  695.   view_circle_toggle.checked =
  696.     localStorage.getItem("mm_view_circle") === "true";
  697.   au_autoset_toggle.checked =
  698.     localStorage.getItem("mm_keep_build_on_spawn") === "true";
  699.  
  700.   // Load + execute toggle states
  701.   render_collisions_toggle.checked =
  702.     localStorage.getItem("mm_render_collisions") === "true";
  703.  
  704.   render_fps_toggle.checked = localStorage.getItem("mm_render_fps") === "true";
  705.  
  706.   render_rhw_toggle.checked =
  707.     localStorage.getItem("mm_render_raw_health") === "true";
  708.  
  709.   hide_ui_toggle.checked = localStorage.getItem("mm_hide_ui") === "true";
  710.  
  711.   // Add event listeners to save toggle states
  712.   auto_respawn_toggle.addEventListener("change", function () {
  713.     localStorage.setItem("mm_auto_respawn", auto_respawn_toggle.checked);
  714.   });
  715.   view_line_toggle.addEventListener("change", function () {
  716.     localStorage.setItem("mm_view_line", view_line_toggle.checked);
  717.   });
  718.   view_circle_toggle.addEventListener("change", function () {
  719.     localStorage.setItem("mm_view_circle", view_circle_toggle.checked);
  720.   });
  721.  
  722.   visual_tab.click();
  723.  
  724.   setTimeout(() => {
  725.     if (input) {
  726.       if (render_collisions_toggle.checked) {
  727.         input.execute("ren_debug_collisions true");
  728.       }
  729.  
  730.       if (render_fps_toggle.checked) {
  731.         input.execute("ren_fps true");
  732.       }
  733.       if (render_rhw_toggle.checked) {
  734.         input.execute("ren_raw_health_values true");
  735.       }
  736.       if (hide_ui_toggle.checked) {
  737.         input.execute("ren_ui false");
  738.       }
  739.     }
  740.   }, 300);
  741. })();