Dead Frontier – Browser Implants + True CSS Hover (v5.32 Final Fancy)

Browser Implants injected below QuickBuy; full hover popups; collapsible/expandable panel; state save; scroll and zoom stable; polished style matching QuickBuy/AutoBank

当前为 2025-04-28 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         Dead Frontier – Browser Implants + True CSS Hover (v5.32 Final Fancy)
// @namespace    Zega
// @version      5.32
// @description  Browser Implants injected below QuickBuy; full hover popups; collapsible/expandable panel; state save; scroll and zoom stable; polished style matching QuickBuy/AutoBank
// @match        https://fairview.deadfrontier.com/onlinezombiemmo/index.php*
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function() {
  'use strict';

  let _autoBankQueued = false, _autoBankDone = false;
  let _qbQueued = false, _qbDone = false;

  function _onAutoBank() {
    if (_autoBankDone) return;
    _autoBankQueued = true;
    if (typeof fillAutoBankSlot === 'function') fillAutoBankSlot();
  }
  function _onQuickBuy() {
    if (_qbDone) return;
    _qbQueued = true;
    if (typeof fillQuickBuySlot === 'function') fillQuickBuySlot();
  }

  Object.defineProperty(window, 'BrowserImplant_AutoBank', {
    configurable: true,
    enumerable: true,
    set(val) {
      if (val) _onAutoBank();
      Object.defineProperty(window, 'BrowserImplant_AutoBank', {
        value: val,
        writable: true,
        configurable: true,
        enumerable: true
      });
    },
    get() { return false; }
  });

  Object.defineProperty(window, 'BrowserImplant_QuickBuy', {
    configurable: true,
    enumerable: true,
    set(val) {
      if (val) _onQuickBuy();
      Object.defineProperty(window, 'BrowserImplant_QuickBuy', {
        value: val,
        writable: true,
        configurable: true,
        enumerable: true
      });
    },
    get() { return false; }
  });

  window.addEventListener('load', initWhenReady);

  function initWhenReady() {
    const tryAttach = setInterval(() => {
      const rightTd = document.querySelector('td.design2010[style*="right_margin.jpg"]');
      const quickBuyFieldset = rightTd?.querySelector('fieldset');
      if (rightTd && quickBuyFieldset) {
        clearInterval(tryAttach);
        attachImplants(rightTd);
      }
    }, 100);
  }

  function attachImplants(rightTd) {
    rightTd.style.position = 'relative';

    const panel = document.createElement('div');
    panel.id = 'browser-implant-panel';
    panel.innerHTML = `
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;">
        <strong style="color:#ffd700;">Browser Implants</strong>
        <button id="collapse-browser-implant" style="background:none;border:none;color:#ffd700;font-size:16px;cursor:pointer;">[–]</button>
      </div>
      <div class="implant-grid" id="implant-grid-container">
        ${Array(8).fill(0).map((_,i)=>`
          <div class="slot" data-slot="${i}">
            <img class="implant-icon" style="display:none;" />
            <div class="hover-popup">
              <img class="hover-img" src="" />
              <div class="hover-name"></div>
              <div class="hover-stat"></div>
            </div>
          </div>
        `).join('')}
      </div>
    `;
    Object.assign(panel.style, {
      position: 'absolute',
      top: '660px',
      left: '10px',
      width: '420px',
      background: 'rgba(0,0,0,0.35)',
      padding: '8px 12px',
      border: '1px solid #666',
      borderRadius: '8px',
      boxShadow: '0 4px 12px rgba(0,0,0,0.6)',
      textAlign: 'center',
      zIndex: '10000'
    });

    rightTd.appendChild(panel);

    const slots = panel.querySelectorAll('.slot');
    const grid = document.getElementById('implant-grid-container');
    const collapseBtn = document.getElementById('collapse-browser-implant');

    // Restore collapse state
    if (localStorage.getItem('browserImplantCollapsed') === 'true') {
      grid.style.display = 'none';
      collapseBtn.textContent = '[+]';
    }

    collapseBtn.addEventListener('click', () => {
      if (grid.style.display === 'none') {
        grid.style.display = 'grid';
        collapseBtn.textContent = '[–]';
        localStorage.setItem('browserImplantCollapsed', 'false');
      } else {
        grid.style.display = 'none';
        collapseBtn.textContent = '[+]';
        localStorage.setItem('browserImplantCollapsed', 'true');
      }
    });

    let next = 0;

    function fill(slot, url, name, stat) {
      const img = slot.querySelector('img.implant-icon');
      const pop = slot.querySelector('.hover-popup');
      img.src = url;
      img.style.display = 'block';
      img.style.width = '100%';
      img.style.height = '100%';
      img.style.objectFit = 'contain';
      pop.querySelector('.hover-img').src = url;
      pop.querySelector('.hover-name').textContent = name;
      pop.querySelector('.hover-stat').textContent = stat;
    }

    fill(slots[next++], 'https://files.catbox.moe/y2n5ij.png', 'Browser Implant', 'Gain Efficiency In Outpost +20%');

    if (window.BrowserImplant_MarketHover) {
      fill(slots[next++], 'https://files.catbox.moe/kqee23.png', 'Market Hover Implant', 'Quick Access to Trade Values +15%');
    }

    window.fillAutoBankSlot = () => {
      if (_autoBankDone || next >= slots.length) return;
      fill(slots[next++], 'https://files.catbox.moe/ry7yd2.png', 'Auto Bank Implant', 'Instant bank link—deposits & withdrawals +60% speed!');
      _autoBankDone = true;
    };
    if (_autoBankQueued) window.fillAutoBankSlot();

    window.fillQuickBuySlot = () => {
      if (_qbDone || next >= slots.length) return;
      fill(slots[next++], 'https://files.catbox.moe/urko7b.png', 'QuickBuy Implant', 'Quickly buy your survival items. 70% Barter Speed!');
      _qbDone = true;
    };
    if (_qbQueued) window.fillQuickBuySlot();
  }

  const css = `
    #browser-implant-panel .implant-grid {
      display: grid;
      grid-template-columns: repeat(4, 36px);
      grid-template-rows: repeat(2, 36px);
      gap: 4px;
      justify-content: center;
    }
    #browser-implant-panel .slot {
      width: 36px;
      height: 36px;
      background: rgba(255,255,255,0.05);
      border: 1px solid #888;
      border-radius: 4px;
      position: relative;
    }
    #browser-implant-panel .slot img.implant-icon {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: contain;
      cursor: default;
      display: none;
    }
    #browser-implant-panel .hover-popup {
      display: none;
      position: absolute;
      bottom: -18px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0,0,0,0.85);
      padding: 6px;
      border: 1px solid #555;
      border-radius: 6px;
      flex-direction: column;
      align-items: center;
      z-index: 1000;
      opacity: 0;
      transition: opacity .2s;
      width: 130px;
    }
    #browser-implant-panel .hover-popup .hover-img {
      width: 50px;
      height: 50px;
      margin-bottom: 4px;
      object-fit: contain;
    }
    #browser-implant-panel .hover-name,
    #browser-implant-panel .hover-stat {
      color: gold;
      font-size: 12px;
      margin: 1px 0;
      line-height: 1.1;
      text-align: center;
    }
    #browser-implant-panel .slot:hover .hover-popup {
      display: flex;
      opacity: 1;
    }
    #browser-implant-panel .slot:not(:has(img.implant-icon[style*="display: block"])) .hover-popup {
      display: none!important;
      opacity: 0!important;
    }
  `;
  const style = document.createElement('style');
  style.textContent = css;
  document.head.appendChild(style);

})();