☰

DH3 Tick Pulse

Pulses each tick to aid in counting various things (e.g. shark bite).

目前为 2020-10-11 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         DH3 Tick Pulse
  3. // @namespace    com.anwinity.dh3
  4. // @version      1.2.0
  5. // @description  Pulses each tick to aid in counting various things (e.g. shark bite).
  6. // @author       Anwinity
  7. // @match        dh3.diamondhunt.co
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     const PULSE_DURATION = 500;
  15.     const KEY_TOP = "dh3-tick-pulse-top";
  16.     const KEY_LEFT = "dh3-tick-pulse-left";
  17.  
  18.     function init() {
  19.         if(!window.var_username) {
  20.             setTimeout(init, 1000);
  21.             return;
  22.         }
  23.  
  24.         let animationStart = Date.now();
  25.  
  26.         let fontAwesome = document.createElement("script");
  27.         fontAwesome.src = "https://kit.fontawesome.com/044e12ee28.js"
  28.         fontAwesome.crossorigin = "anonymous";
  29.         fontAwesome.type = "text/javascript";
  30.         $("head").append(fontAwesome);
  31.  
  32.         let top = localStorage.getItem(KEY_TOP);
  33.         let left = localStorage.getItem(KEY_LEFT);
  34.  
  35.         const styles = document.createElement("style");
  36.         styles.textContent = `
  37.           #dh3-tick-pulse {
  38.             min-width: 50px;
  39.             min-height: 50px;
  40.             position: absolute;
  41.             left: ${left}px;
  42.             top: ${top}px;
  43.             z-index: 9999;
  44.             padding: 0.25em;
  45.             border: 1px solid rgb(64, 64, 64);
  46.             border-radius: 2px;
  47.             background-color: rgb(26, 26, 26);
  48.             padding: 0px;
  49.             margin: 0px;
  50.           }
  51.           #dh3-tick-pulse-circle-container {
  52.             width: 40px;
  53.             height: 40px;
  54.           }
  55.           #dh3-tick-pulse.collapsed > #dh3-tick-pulse-circle-container {
  56.             display: none;
  57.           }
  58.           #dh3-tick-pulse-circle-container > .circle {
  59.             width: 0px;
  60.             height: 0px;
  61.             margin-top: 0px;
  62.             margin-left: 0px;
  63.             -webkit-border-radius: 20px;
  64.             -moz-border-radius: 20px;
  65.             border-radius: 20px;
  66.             background: rgb(42, 200, 200);
  67.             opacity: 1;
  68.             position: absolute;
  69.             top: calc(20px + 0.25em);
  70.             left: 50%;
  71.           }
  72.           #dh3-tick-pulse-animation-info {
  73.             padding: 0.25em;
  74.             text-align: center;
  75.             font-size: 18pt;
  76.           }
  77.  
  78.         `;
  79.         $("head").append(styles);
  80.  
  81.         $("body").prepend(`
  82.           <div id="dh3-tick-pulse">
  83.             <div id="dh3-tick-pulse-circle-container"></div>
  84.             <div id="dh3-tick-pulse-animation-info"></div>
  85.           </div>
  86.         `);
  87.  
  88.         let el = $("#dh3-tick-pulse");
  89.         el.draggable({
  90.             appendTo: "body",
  91.             containment: "document",
  92.             cursor: "pointer"
  93.         });
  94.         el.on("dragstop", function(event, ui) {
  95.             localStorage.setItem(KEY_TOP, ui.position.top);
  96.             localStorage.setItem(KEY_LEFT, ui.position.left);
  97.         });
  98.  
  99.         function pulse() {
  100.             let container = $("#dh3-tick-pulse-circle-container");
  101.             let circle = $('<div class="circle"></div>');
  102.             circle.animate({
  103.                 "width": "40px",
  104.                 "height": "40px",
  105.                 "margin-top": "-20px",
  106.                 "margin-left": "-20px",
  107.                 "opacity": 0
  108.             }, PULSE_DURATION, "swing");
  109.             container.append(circle);
  110.             setTimeout(function() {
  111.                 circle.remove();
  112.             }, PULSE_DURATION);
  113.         };
  114.  
  115.         setInterval(function() {
  116.             let monsterObj = window[`${var_monsterName}MonsterObj`];
  117.             if(monsterObj) {
  118.                 let animation = monsterObj.currentAnimation;
  119.                 let delta = Date.now() - animationStart;
  120.                 let info = `${animation.name}: ${Math.floor(delta/1000)}`;
  121.                 $("#dh3-tick-pulse-animation-info").text(info);
  122.             }
  123.         }, 100);
  124.  
  125.         const originalSetItems = window.setItems;
  126.         window.setItems = function(data) {
  127.             originalSetItems.apply(this, arguments);
  128.  
  129.             if(data.includes("playtime~")) {
  130.                 pulse();
  131.             }
  132.  
  133.             let el = $("#dh3-tick-pulse");
  134.             if(el.is(":hidden") && (!var_monsterName || var_monsterName != "none")) {
  135.                 el.show();
  136.             }
  137.             else if(el.is(":visible") && (var_monsterName && var_monsterName == "none")) {
  138.                 el.hide();
  139.             }
  140.         }
  141.  
  142.         const originalOnMessage = global_webSocket.onmessage;
  143.         global_webSocket.onmessage = function(e) {
  144.             originalOnMessage.apply(global_webSocket, arguments);
  145.             if(typeof e.data === "string" && e.data.startsWith("START_MONSTER_ANIMATION")) {
  146.                 animationStart = Date.now();
  147.             }
  148.         };
  149.     }
  150.  
  151.     $(init);
  152. })();