LastEpochTools EN 페이지 우측에 KO 미러 패널을 띄웁니다. /db/*, /skills/*, /ailments/*, /minions/* 지원. (스킬은 Hover/Scroll Sync 옵션 유지) • 패널 투명도 조절.
// ==UserScript==
// @name Last Epoch Tools KO Float (DB + Skills + Ailments + Minions)
// @namespace https://github.com/McCommi/letools-ko-float
// @version 1.7.2
// @description LastEpochTools EN 페이지 우측에 KO 미러 패널을 띄웁니다. /db/*, /skills/*, /ailments/*, /minions/* 지원. (스킬은 Hover/Scroll Sync 옵션 유지) • 패널 투명도 조절.
// @author McCommi
// @license MIT
// @match https://www.lastepochtools.com/*
// @run-at document-start
// @noframes
// @icon https://www.lastepochtools.com/img/favicon-32x32.png
// ==/UserScript==
(function () {
'use strict';
if (window.top !== window) return;
// ---------- helpers ----------
const sleep = (ms) => new Promise(r => setTimeout(r, ms));
const url = () => new URL(location.href);
const path = () => url().pathname;
const starts = (seg) => path().startsWith(seg);
const inKo = (seg) => path().startsWith(seg + 'ko/');
const isDbSection = () => starts('/db/') && !inKo('/db/');
const isSkillsSection = () => starts('/skills/') && !inKo('/skills/');
const isAilmentsSection = () => starts('/ailments/') && !inKo('/ailments/');
const isMinionsSection = () => starts('/minions/') && !inKo('/minions/');
function titleFor(seg, fallback='') {
const parts = path().split('/').filter(Boolean);
// parts[0] === seg without leading slash
const i = (parts[1] === 'ko') ? 2 : 1;
return parts[i] || fallback;
}
function buildKoUrl() {
const U = url();
if (isDbSection()) {
const rest = U.pathname.slice('/db'.length);
return `https://www.lastepochtools.com/db/ko${rest}${U.search}${U.hash}`;
}
if (isSkillsSection()) {
const rest = U.pathname.slice('/skills'.length);
return `https://www.lastepochtools.com/skills/ko${rest}${U.search}${U.hash}`;
}
if (isAilmentsSection()) {
const rest = U.pathname.slice('/ailments'.length);
return `https://www.lastepochtools.com/ailments/ko${rest}${U.search}${U.hash}`;
}
if (isMinionsSection()) {
const rest = U.pathname.slice('/minions'.length);
return `https://www.lastepochtools.com/minions/ko${rest}${U.search}${U.hash}`;
}
return null;
}
// SPA 네비 감지
const notifyNav = () => window.dispatchEvent(new Event('letools:navigate'));
(function hookHistory(){
const push = history.pushState, replace = history.replaceState;
history.pushState = function(){ const r = push.apply(this, arguments); notifyNav(); return r; };
history.replaceState = function(){ const r = replace.apply(this, arguments); notifyNav(); return r; };
window.addEventListener('popstate', notifyNav);
})();
// ---------- UI ----------
let panel, iframe, css, opacityInput;
const OP_KEY = 'letools-ko-opacity';
function getOpacity() {
const v = +localStorage.getItem(OP_KEY);
return isFinite(v) && v >= 0.2 && v <= 1 ? v : 1;
}
function setOpacity(v) {
v = Math.min(1, Math.max(0.2, +v || 1));
localStorage.setItem(OP_KEY, String(v));
if (panel) panel.style.opacity = String(v);
if (opacityInput) opacityInput.value = String(v);
}
function appendOnce(node) {
if (!node || node.isConnected) return;
(document.body || document.documentElement).appendChild(node);
}
function ensurePanel() {
if (!css) {
css = document.createElement('style');
css.textContent = `
#letools-ko-panel{position:fixed; top:80px; right:24px; width:440px; height:72vh; z-index:999999;
background:#0b0b0bcc; border:1px solid #333; border-radius:16px; overflow:hidden; color:#eee;
box-shadow:0 10px 30px rgba(0,0,0,.45); font-family:ui-sans-serif,system-ui,Roboto,Noto Sans KR;}
#letools-ko-panel .lekof-head{display:flex; align-items:center; justify-content:space-between;
padding:10px 12px; background:linear-gradient(180deg,#1a1a1acc,#111111cc); cursor:move; user-select:none;}
#letools-ko-panel .lekof-title{font-weight:700; max-width:50%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#letools-ko-panel .lekof-btns{display:flex; align-items:center; gap:8px;}
#letools-ko-panel .lekof-btns button{background:#1f1f1f; border:1px solid #2e2e2e; color:#ddd; border-radius:8px; padding:4px 8px; cursor:pointer;}
#letools-ko-panel .lekof-btns button:hover{background:#2a2a2a;}
#letools-ko-panel .lekof-btns .active{outline:2px solid #5fb3ff;}
#letools-ko-panel .lekof-op-slider{width:110px; height:20px; accent-color:#5fb3ff;}
#letools-ko-panel .lekof-frame{width:100%; height:calc(100% - 46px); border:0; background:transparent;}
#letools-ko-panel .lekof-resize{position:absolute; width:12px; height:12px; right:0; bottom:0; cursor:nwse-resize;
background:linear-gradient(135deg, transparent 0 50%, #555 50% 100%);}
#letools-ko-panel.pinned{ border-color:#5fb3ff; box-shadow:0 0 0 2px rgba(95,179,255,.25), 0 12px 32px rgba(0,0,0,.5); }
@media (max-width:1200px){ #letools-ko-panel{ width:min(92vw, 480px); right:8px; height:60vh; } }
`;
}
if (!panel) {
panel = document.createElement('div');
panel.id = 'letools-ko-panel';
panel.innerHTML = `
<div class="lekof-head">
<div class="lekof-title">KO 뷰</div>
<div class="lekof-btns">
<span title="투명도(𝛂)"><small>𝛂</small></span>
<input class="lekof-op-slider" type="range" min="0.2" max="1" step="0.05" value="1">
<button class="lekof-sync" title="(스킬 전용) Hover/Scroll Sync 토글">🔄</button>
<button class="lekof-refresh" title="새로고침">⟳</button>
<button class="lekof-pin" title="고정">📌</button>
<button class="lekof-close" title="닫기">✕</button>
</div>
</div>
<iframe class="lekof-frame"
sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox"
referrerpolicy="no-referrer"></iframe>
<div class="lekof-resize"></div>
`;
// 드래그
(function drag(){
let sx=0,sy=0,ox=0,oy=0,d=false;
panel.addEventListener('mousedown',e=>{
if (e.target && (e.target.classList?.contains('lekof-op-slider'))) return;
if (!e.target.closest('.lekof-head')) return;
d=true; sx=e.clientX; sy=e.clientY; const r=panel.getBoundingClientRect(); ox=r.left; oy=r.top; e.preventDefault();
});
window.addEventListener('mousemove',e=>{
if(!d) return; const dx=e.clientX-sx, dy=e.clientY-sy;
panel.style.left=`${Math.max(4,ox+dx)}px`; panel.style.top=`${Math.max(4,oy+dy)}px`; panel.style.right='auto';
});
window.addEventListener('mouseup',()=> d=false);
})();
// 리사이즈
(function resize(){
const handle = panel.querySelector('.lekof-resize');
let sw=0,sh=0,sx=0,sy=0,r=false;
handle.addEventListener('mousedown',e=>{
r=true; sx=e.clientX; sy=e.clientY; const b=panel.getBoundingClientRect(); sw=b.width; sh=b.height; e.preventDefault();
});
window.addEventListener('mousemove',e=>{
if(!r) return; const dx=e.clientX-sx, dy=e.clientY-sy;
panel.style.width=`${Math.max(320,sw+dx)}px`; panel.style.height=`${Math.max(360,sh+dy)}px`;
});
window.addEventListener('mouseup',()=> r=false);
})();
// 버튼 & 슬라이더
panel.querySelector('.lekof-close').addEventListener('click', ()=>{ panel.remove(); panel=null; iframe=null; });
panel.querySelector('.lekof-pin').addEventListener('click', ()=> panel.classList.toggle('pinned'));
panel.querySelector('.lekof-refresh').addEventListener('click', ()=> loadKo(true));
panel.querySelector('.lekof-sync').addEventListener('click', ()=> toggleHoverSync());
opacityInput = panel.querySelector('.lekof-op-slider');
opacityInput.addEventListener('input', (e)=>{
e.stopPropagation();
setOpacity(e.target.value);
});
iframe = panel.querySelector('.lekof-frame');
try { iframe.setAttribute('credentialless',''); } catch(e) {}
}
if (document.readyState === 'loading') {
if (!css._appended) {
document.addEventListener('DOMContentLoaded', () => { appendOnce(css); appendOnce(panel); applyOpacity(); });
css._appended = true;
}
} else {
appendOnce(css); appendOnce(panel); applyOpacity();
}
return panel;
}
function applyOpacity() { setOpacity(getOpacity()); }
function setTitle() {
if (!panel) return;
const t = panel.querySelector('.lekof-title');
if (!t) return;
if (isDbSection()) t.textContent = `KO DB • ${titleFor('db','db')}`;
else if (isSkillsSection()) t.textContent = `KO 스킬 • ${titleFor('skills','목록')}`;
else if (isAilmentsSection()) t.textContent = `KO Ailments • ${titleFor('ailments','index')}`;
else if (isMinionsSection()) t.textContent = `KO Minions • ${titleFor('minions','index')}`;
else t.textContent = `KO 뷰`;
}
function shouldShow(){
return isDbSection() || isSkillsSection() || isAilmentsSection() || isMinionsSection();
}
function loadKo(force=false){
if (!shouldShow()) {
if (panel && !panel.classList.contains('pinned')) { panel.remove(); panel=null; iframe=null; }
return;
}
ensurePanel();
setTitle();
const target = buildKoUrl();
if (!target) return;
if (force || !iframe || iframe.src !== target) {
iframe.src = target;
if (isSkillsSection()) {
iframe.addEventListener('load', setupIframeReceiverForSkills, { once:true });
}
}
}
async function maybeStart(){ await sleep(80); loadKo(); }
window.addEventListener('letools:navigate', maybeStart);
maybeStart();
// -------- Hover/Scroll Sync (스킬 전용) --------
let syncEnabled = true;
function toggleHoverSync(){
syncEnabled = !syncEnabled;
panel?.querySelector('.lekof-sync')?.classList.toggle('active', syncEnabled);
}
function extractNodeKey(el){
if (!el) return null;
const node = el.closest?.('[class*="node"], [class*="Node"], [class*="skill-node"], [class*="SkillNode"]');
if (!node) return null;
const ds = node.dataset || {};
const dataId = ds.nodeId || ds.id || ds.node || null;
if (dataId) return { type:'data', value:String(dataId) };
const a = node.querySelector('a[href*="node="]') || node.closest('a[href*="node="]');
if (a) {
try { const u = new URL(a.href, location.href); const q = u.searchParams.get('node'); if (q) return { type:'query', value:q }; } catch {}
}
if (node.id && /node[-_]/i.test(node.id)) return { type:'id', value:node.id.replace(/^.*?node[-_]/i,'') };
const img = node.querySelector('img[src]');
if (img) { try { return { type:'icon', value:new URL(img.src).pathname }; } catch {} }
return null;
}
(function startSkillBroadcaster(){
const sendScroll = ()=>{
if (!syncEnabled || !isSkillsSection() || !iframe?.contentWindow) return;
const doc = document.documentElement;
const max = (doc.scrollHeight - doc.clientHeight) || 1;
iframe.contentWindow.postMessage({ type:'LE_SYNC_DOC_SCROLL', pct: doc.scrollTop / max }, '*');
};
window.addEventListener('scroll', sendScroll, { passive:true });
document.addEventListener('mouseover', (e)=>{
if (!syncEnabled || !isSkillsSection() || !iframe?.contentWindow) return;
if (panel && panel.contains(e.target)) return;
const key = extractNodeKey(e.target);
if (!key) return;
iframe.contentWindow.postMessage({ type:'LE_SYNC_NODE_KEY', key }, '*');
}, true);
})();
function setupIframeReceiverForSkills(){
if (!iframe?.contentWindow) return;
try {
const w = iframe.contentWindow;
const d = w.document;
if (w.__le_id_sync_installed__) return;
w.__le_id_sync_installed__ = true;
function findByKey(key){
if (!key) return null;
const { type, value } = key;
if (type === 'data') {
const s = `[data-node-id="${CSS.escape(value)}"], [data-id="${CSS.escape(value)}"], [data-node="${CSS.escape(value)}"]`;
return d.querySelector(s);
}
if (type === 'query') {
const a = d.querySelector(`a[href*="node=${CSS.escape(value)}"]`);
return a ? (a.closest('[class*="node"], [class*="Node"], [class*="skill-node"], [class*="SkillNode"]') || a) : null;
}
if (type === 'id') {
return d.getElementById(`node-${value}`) || d.getElementById(`node_${value}`) || d.getElementById(value);
}
if (type === 'icon') {
let imgs = Array.from(d.querySelectorAll(`img[src$="${CSS.escape(value)}"]`));
if (!imgs.length) imgs = Array.from(d.querySelectorAll(`img[src*="${CSS.escape(value.split('/').pop()||'')}"]`));
const nodes = imgs.map(img => img.closest('[class*="node"], [class*="Node"], [class*="skill-node"], [class*="SkillNode"]') || img);
return nodes[0] || null;
}
return null;
}
w.addEventListener('message', (ev)=>{
const msg = ev.data || {};
if (msg.type === 'LE_SYNC_DOC_SCROLL') {
const doc = d.documentElement;
const max = (doc.scrollHeight - doc.clientHeight) || 1;
doc.scrollTop = msg.pct * max;
return;
}
if (msg.type === 'LE_SYNC_NODE_KEY') {
const node = findByKey(msg.key);
if (!node) return;
node.scrollIntoView({ block:'nearest', inline:'nearest', behavior:'auto' });
const r = node.getBoundingClientRect();
const x = Math.round(r.left + r.width/2);
const y = Math.round(r.top + r.height/2);
const move = new w.MouseEvent('mousemove', {bubbles:true, clientX:x, clientY:y});
const over = new w.MouseEvent('mouseover', {bubbles:true, clientX:x, clientY:y});
node.dispatchEvent(move); node.dispatchEvent(over);
}
});
} catch {}
}
})();