IdleHacking Drop Log Panel moveable

Drop item log — draggable, tooltip, removes deleted items

Vous devrez installer une extension telle que Tampermonkey, Greasemonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Userscripts pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey pour installer ce script.

Vous devrez installer une extension de gestionnaire de script utilisateur pour installer ce script.

(J'ai déjà un gestionnaire de scripts utilisateur, laissez-moi l'installer !)

Advertisement:

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

(J'ai déjà un gestionnaire de style utilisateur, laissez-moi l'installer!)

Advertisement:

// ==UserScript==
// @name         IdleHacking Drop Log Panel moveable
// @author       Fusi0n + claude
// @namespace    http://tampermonkey.net/
// @version      6.0
// @description  Drop item log — draggable, tooltip, removes deleted items
// @match        *://*.idlehacking.com/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function () {
    'use strict';

    const seenItems = new Map();

    let isDraggable = false;
    let dragging = false;
    let dragOffX = 0, dragOffY = 0;
    let panel = null;

    function waitForInventory() {
        const grid = document.querySelector('#inventory-grid');
        if (!grid) { setTimeout(waitForInventory, 1000); return; }
        createPanel();
        startScanner();
    }

    function createPanel() {
        if (document.getElementById('drop-log-panel')) return;

        panel = document.createElement('div');
        panel.id = 'drop-log-panel';
        panel.innerHTML = `
            <div id="drop-log-header">
                <span id="drop-log-title">Drop Log</span>
                <button id="drop-log-drag-btn" title="Toggle free drag">&#x2B1C;</button>
            </div>
            <div id="drop-log-content"></div>
        `;

        Object.assign(panel.style, {
            position: 'fixed',
            bottom: '20px',
            right: '5px',        // nudged right
            width: '260px',
            height: '300px',
            background: '#0b0f1a',
            border: '1px solid #1f2a44',
            borderRadius: '10px',
            zIndex: 1000,
            display: 'flex',
            flexDirection: 'column',
            boxShadow: '0 0 15px rgba(0,0,0,0.6)',
            fontSize: '13px',
            color: '#cdd6f4',
            fontFamily: 'sans-serif',
            boxSizing: 'border-box',
            overflow: 'hidden',
            transition: 'box-shadow 0.2s'
        });

        const header = panel.querySelector('#drop-log-header');
        Object.assign(header.style, {
            padding: '6px 8px',
            borderBottom: '1px solid #1f2a44',
            fontWeight: 'bold',
            background: '#121a2b',
            borderRadius: '10px 10px 0 0',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            userSelect: 'none',
            cursor: 'default'
        });

        const btn = panel.querySelector('#drop-log-drag-btn');
        Object.assign(btn.style, {
            background: 'transparent',
            border: '1px solid #2a3a5a',
            borderRadius: '4px',
            color: '#5a7ab5',
            cursor: 'pointer',
            fontSize: '11px',
            padding: '2px 5px',
            lineHeight: '1',
            transition: 'color 0.2s, border-color 0.2s'
        });
        btn.onmouseenter = () => { btn.style.color = '#89b4fa'; btn.style.borderColor = '#89b4fa'; };
        btn.onmouseleave = () => {
            if (!isDraggable) { btn.style.color = '#5a7ab5'; btn.style.borderColor = '#2a3a5a'; }
        };

        const content = panel.querySelector('#drop-log-content');
        Object.assign(content.style, {
            padding: '6px 6px 6px 8px',
            overflowY: 'auto',
            overflowX: 'hidden',
            flex: '1',
            minWidth: '0'
        });

        document.body.appendChild(panel);
        btn.addEventListener('click', toggleDrag);
    }

    // ── Drag toggle ────────────────────────────────────────────────────────────
    function toggleDrag() {
        isDraggable = !isDraggable;
        const btn    = document.getElementById('drop-log-drag-btn');
        const header = document.getElementById('drop-log-header');

        if (isDraggable) {
            const rect = panel.getBoundingClientRect();
            panel.style.top    = rect.top + 'px';
            panel.style.left   = rect.left + 'px';
            panel.style.bottom = '';
            panel.style.right  = '';
            btn.innerHTML = '&#x2714;';
            btn.title = 'Lock back to bottom-right';
            btn.style.color = '#89b4fa';
            btn.style.borderColor = '#89b4fa';
            panel.style.boxShadow = '0 0 20px rgba(137,180,250,0.35)';
            header.style.cursor = 'grab';
            enableDrag();
        } else {
            disableDrag();
            panel.style.bottom = '20px';
            panel.style.right  = '5px';
            panel.style.top    = '';
            panel.style.left   = '';
            btn.innerHTML = '&#x2B1C;';
            btn.title = 'Toggle free drag';
            btn.style.color = '#5a7ab5';
            btn.style.borderColor = '#2a3a5a';
            panel.style.boxShadow = '0 0 15px rgba(0,0,0,0.6)';
            header.style.cursor = 'default';
        }
    }

    function enableDrag() {
        document.getElementById('drop-log-header').addEventListener('mousedown', onDragStart);
    }

    function disableDrag() {
        document.getElementById('drop-log-header').removeEventListener('mousedown', onDragStart);
    }

    function onDragStart(e) {
        if (e.target.id === 'drop-log-drag-btn') return;
        dragging = true;
        const rect = panel.getBoundingClientRect();
        dragOffX = e.clientX - rect.left;
        dragOffY = e.clientY - rect.top;
        document.getElementById('drop-log-header').style.cursor = 'grabbing';
        e.preventDefault();
    }

    document.addEventListener('mousemove', e => {
        if (!dragging) return;
        panel.style.left = (e.clientX - dragOffX) + 'px';
        panel.style.top  = (e.clientY - dragOffY) + 'px';
    });

    document.addEventListener('mouseup', () => {
        if (!dragging) return;
        dragging = false;
        if (isDraggable) document.getElementById('drop-log-header').style.cursor = 'grab';
    });

    // ── Scanner — unchanged v5.2 logic ────────────────────────────────────────
    function startScanner() {
        setInterval(() => {
            const items = document.querySelectorAll('#inventory-grid .inventory-slot');
            const currentItems = new Set();

            items.forEach(node => {
                const itemId = node.getAttribute('data-item-id');
                if (!itemId) return;

                currentItems.add(itemId);

                if (!seenItems.has(itemId)) {
                    seenItems.set(itemId, node);

                    const name        = node.querySelector('.item-name')?.innerText || 'Unknown';
                    const level       = node.querySelector('.inventory-item-level-top')?.innerText || '';
                    const rarityClass = [...node.classList].find(c => c.startsWith('rarity-')) || 'rarity-common';
                    const rarity      = rarityClass.replace('rarity-', '');

                    addToLog(name, level, rarity, itemId);
                }
            });

            // Remove deleted items
            seenItems.forEach((_, itemId) => {
                if (!currentItems.has(itemId)) {
                    removeFromLog(itemId);
                    seenItems.delete(itemId);
                }
            });

        }, 1000);
    }

    // ── Rarity colours ────────────────────────────────────────────────────────
    function getRarityColor(rarity) {
        return {
            common:    '#aaa',
            uncommon:  '#4caf50',
            rare:      '#2196f3',
            epic:      '#9c27b0',
            legendary: '#ff9800'
        }[rarity] || '#fff';
    }

    // ── Log entry ─────────────────────────────────────────────────────────────
    function addToLog(name, level, rarity, itemId) {
        const content = document.getElementById('drop-log-content');
        if (!content) return;

        const entry = document.createElement('div');
        entry.dataset.itemId = itemId;
        entry.style.marginBottom = '6px';

        const rarityEl = document.createElement('div');
        rarityEl.textContent = rarity.toUpperCase();
        Object.assign(rarityEl.style, {
            color: getRarityColor(rarity),
            fontWeight: 'bold',
            fontSize: '11px'
        });

        const nameEl = document.createElement('div');
        nameEl.textContent = name;
        Object.assign(nameEl.style, {
            cursor: 'pointer',
            textDecoration: 'underline dotted',
            textUnderlineOffset: '2px',
            color: '#cdd6f4'
        });
        nameEl.title = 'Click to show tooltip';
        nameEl.onmouseenter = () => nameEl.style.color = '#fff';
        nameEl.onmouseleave = () => nameEl.style.color = '#cdd6f4';

        nameEl.addEventListener('click', () => {
            const node = seenItems.get(itemId);
            if (node) {
                node.scrollIntoView({ behavior: 'smooth', block: 'center' });
                node.click();
            }
        });

        const levelEl = document.createElement('div');
        levelEl.textContent = level ? `Lv ${level}` : '';
        Object.assign(levelEl.style, { fontSize: '11px', opacity: '0.7' });

        const hr = document.createElement('hr');
        Object.assign(hr.style, { border: '0', borderTop: '1px solid #1f2a44', margin: '4px 0 0' });

        entry.appendChild(rarityEl);
        entry.appendChild(nameEl);
        if (level) entry.appendChild(levelEl);
        entry.appendChild(hr);

        content.prepend(entry);

        if (content.children.length > 100) content.removeChild(content.lastChild);
    }

    function removeFromLog(itemId) {
        const entry = document.querySelector(`#drop-log-content [data-item-id="${itemId}"]`);
        if (entry) {
            entry.style.transition = 'opacity 0.3s';
            entry.style.opacity = '0';
            setTimeout(() => entry.remove(), 300);
        }
    }

    waitForInventory();
})();