☰

DH3 Tick Pulse

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

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

// ==UserScript==
// @name         DH3 Tick Pulse
// @namespace    com.anwinity.dh3
// @version      1.0.1
// @description  Pulses each tick to aid in counting various things (e.g. shark bite).
// @author       Anwinity
// @match        dh3.diamondhunt.co
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const PULSE_DURATION = 1000;
    const KEY_TOP = "dh3-tick-pulse-top";
    const KEY_LEFT = "dh3-tick-pulse-left";

    function init() {
        if(!window.var_username) {
            setTimeout(init, 1000);
            return;
        }

        let fontAwesome = document.createElement("script");
        fontAwesome.src = "https://kit.fontawesome.com/044e12ee28.js"
        fontAwesome.crossorigin = "anonymous";
        fontAwesome.type = "text/javascript";
        $("head").append(fontAwesome);

        let top = localStorage.getItem(KEY_TOP);
        let left = localStorage.getItem(KEY_LEFT);

        const styles = document.createElement("style");
        styles.textContent = `
          #dh3-tick-pulse {
            width: 100px;
            height: 100px;
            position: absolute;
            left: ${left}px;
            top: ${top}px;
            z-index: 9999;
            padding: 0.25em;
            border: 1px solid rgb(64, 64, 64);
            border-radius: 2px;
            background-color: rgb(26, 26, 26);
            padding: 0px;
            margin: 0px;
          }
          #dh3-tick-pulse.collapsed {
            width: 32px !important;
            height: 32px !important;
          }
          #dh3-tick-pulse-circle-container {
            width: 80px;
            height: 80px;
          }
          #dh3-tick-pulse.collapsed > #dh3-tick-pulse-circle-container {
            display: none;
          }
          #dh3-tick-pulse-circle-container > .circle {
            width: 0px;
            height: 0px;
            margin-top: 0px;
            margin-left: 0px;
            -webkit-border-radius: 40px;
            -moz-border-radius: 40px;
            border-radius: 40px;
            background: rgb(42, 200, 200);
            opacity: 1;
            position: absolute;
            top: 50%;
            left: 50%;
          }
          .dh3-tick-pulse-button {
            color: rgb(196, 196, 196);
            position: absolute;
            left: 0px;
            top: 0px;
            cursor: pointer;
            opacity: 0.75;
          }
          .dh3-tick-pulse-button:hover {
            color: rgb(255, 255, 255);
            background-color: rgb(39, 39, 39);
            opacity: 1.0;
          }
          #dh3-tick-pulse-drag-message {
            display: none;
            position: absolute;
            width: 100%;
            text-align: center;
            bottom: 0px;
            opacity: 1;
          }

        `;
        $("head").append(styles);

        $("body").prepend(`
          <div id="dh3-tick-pulse">
            <div id="dh3-tick-plus" class="dh3-tick-pulse-button" style="display: none">
              <i class="far fa-plus-square"></i>
            </div>
            <div id="dh3-tick-minus" class="dh3-tick-pulse-button">
              <i class="far fa-minus-square"></i>
            </div>
            <div id="dh3-tick-pulse-drag-message">DRAG ME</div>
            <div id="dh3-tick-pulse-circle-container"></div>
          </div>
        `);

        $("#dh3-tick-plus").click(function() {
            $("#dh3-tick-pulse").removeClass("collapsed");
            $("#dh3-tick-plus").hide();
            $("#dh3-tick-minus").show();
        });
        $("#dh3-tick-minus").click(function() {
            $("#dh3-tick-pulse").addClass("collapsed");
            $("#dh3-tick-minus").hide();
            $("#dh3-tick-plus").show();
        });

        let el = $("#dh3-tick-pulse");
        el.draggable({
            appendTo: "body",
            containment: "document",
            cursor: "pointer"
        });
        el.on("dragstop", function(event, ui) {
            localStorage.setItem(KEY_TOP, ui.position.top);
            localStorage.setItem(KEY_LEFT, ui.position.left);
        });

        function pulse() {
            let container = $("#dh3-tick-pulse-circle-container");
            let circle = $('<div class="circle"></div>');
            circle.animate({
                "width": "80px",
                "height": "80px",
                "margin-top": "-40px",
                "margin-left": "-40px",
                "opacity": 0
            }, PULSE_DURATION, "swing");
            container.append(circle);
            setTimeout(function() {
                circle.remove();
            }, PULSE_DURATION);
        };

        const originalSetItems = window.setItems;
        window.setItems = function(data) {
            originalSetItems.apply(this, arguments);
            if(data.includes("playtime~")) {
                pulse();
            }
            let el = $("#dh3-tick-pulse");
            if(el.is(":hidden") && (!var_monsterName || var_monsterName != "none")) {
                let dragMessage = $("#dh3-tick-pulse-drag-message");
                dragMessage.show();
                dragMessage.css("opacity", 1);
                dragMessage.animate({
                    opacity: 0
                }, 2000);
                setTimeout(function() {
                    dragMessage.hide();
                }, 2000);
                el.show();
            }
            else if(el.is(":visible") && (var_monsterName && var_monsterName == "none")) {
                el.hide();
            }
        }
    }

    $(init);
})();