Browser Implants panel with CSS hover; MarketHover, AutoBank & QuickBuy icons appear instantly; panel shifted right smoothly inside left-margin cell; QuickBuy tooltip updated.
目前為
// ==UserScript==
// @name Dead Frontier – Browser Implants + True CSS Hover (v5.19 Fancy Right Move)
// @namespace Zega
// @version 5.25
// @description Browser Implants panel with CSS hover; MarketHover, AutoBank & QuickBuy icons appear instantly; panel shifted right smoothly inside left-margin cell; QuickBuy tooltip updated.
// @match https://fairview.deadfrontier.com/onlinezombiemmo/index.php*
// @grant none
// @run-at document-start
// ==/UserScript==
(function() {
'use strict';
// — AUTO-BANK QUEUEING —
let _autoBankQueued = false, _autoBankDone = false;
function _onAutoBank() {
if (_autoBankDone) return;
_autoBankQueued = true;
if (typeof fillAutoBankSlot === 'function') fillAutoBankSlot();
}
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; }
});
// — QUICKBUY QUEUEING —
let _qbQueued = false, _qbDone = false;
function _onQuickBuy() {
if (_qbDone) return;
_qbQueued = true;
if (typeof fillQuickBuySlot === 'function') fillQuickBuySlot();
}
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('DOMContentLoaded', init);
function init() {
const marginTd = document.querySelector("td.design2010[style*='left_margin.jpg']");
if (!marginTd) return console.warn('Left-margin TD not found');
marginTd.style.position = 'relative';
const panel = document.createElement('div');
panel.id = 'browser-implant-panel';
panel.innerHTML = `
<strong style="color:#ffd700;display:block;margin-bottom:4px;text-align:center;">
Browser Implants
</strong>
<div class="implant-grid">
${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>
`;
marginTd.appendChild(panel);
const slots = panel.querySelectorAll('.slot');
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;
}
// slot 0: Browser Implant
fill(
slots[next++],
'https://files.catbox.moe/y2n5ij.png',
'Browser Implant',
'Gain Efficiency In Outpost +20%'
);
// slot 1: Market Hover
if (window.BrowserImplant_MarketHover) {
fill(
slots[next++],
'https://files.catbox.moe/kqee23.png',
'Market Hover Implant',
'Quick Access to Trade Values +15%'
);
}
// slot 2: Auto Bank
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();
// slot 3: QuickBuy
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();
// disable clicks on slots
slots.forEach(s => s.addEventListener('click', e => e.stopPropagation()));
}
// — STYLES —
const css = `
#browser-implant-panel {
position:absolute;
top:120px;
left:225px;
transform:translateX(50px);
background:rgba(0,0,0,0.5);
padding:8px 12px;
border-radius:6px;
text-align:center;
z-index:999;
transition:transform 0.4s ease; /* (optional) smooth entry effect */
}
#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);
})();