Dead Frontier BOSS
// ==UserScript==
// @name DF BossMini Window
// @namespace http://tampermonkey.net/
// @version 3.1
// @description Dead Frontier BOSS
// @author SHUN
// @license SHUN
// @match https://fairview.deadfrontier.com/onlinezombiemmo/index.php?page=35
// @match https://fairview.deadfrontier.com/onlinezombiemmo/index.php?page=25
// @match https://fairview.deadfrontier.com/onlinezombiemmo/index.php
// @match https://fairview.deadfrontier.com/onlinezombiemmo/index.php?page=15
// @match https://fairview.deadfrontier.com/onlinezombiemmo/index.php?action=profile
// @match https://fairview.deadfrontier.com/onlinezombiemmo/index.php?page=84
// @match https://fairview.deadfrontier.com/onlinezombiemmo/index.php?page=61
// @match https://fairview.deadfrontier.com/onlinezombiemmo/index.php?page=0
// @match https://fairview.deadfrontier.com/onlinezombiemmo/index.php?page=24
// @match https://fairview.deadfrontier.com/onlinezombiemmo/index.php?page=49
// @match https://fairview.deadfrontier.com/onlinezombiemmo/index.php?page=21
// @grant none
// @run-at document-end
// ==/UserScript==
(function() {
'use strict';
console.log('=== DF BossMini Window 腳本啟動 ===');
// 額外的頁面檢查（雙重保險）
const url = window.location.href;
const path = window.location.pathname;
// 檢查是否為遊戲內頁面
if (!path.includes('/onlinezombiemmo/')) {
console.log('不是遊戲頁面，跳過');
return;
}
// 檢查是否為登入相關頁面
if (url.includes('autologin=1') ||
url.includes('action=reminder') ||
url.includes('page=login') ||
url.includes('index.php?autologin=1') ||
url.includes('page=forgot') ||
url.includes('page=register')) {
console.log('登入頁面，跳過');
return;
}
console.log('遊戲頁面確認，開始創建190x76橫向面板...');
// ========== 創建190x76橫向主容器 ==========
const mainContainer = document.createElement('div');
mainContainer.id = 'df-main-container';
mainContainer.style.cssText = `
position: fixed !important;
top: 10px !important;
right: 10px !important;
z-index: 10000 !important;
background: rgba(30, 30, 30, 0.95) !important;
border: 2px solid #444 !important;
border-radius: 6px !important;
padding: 8px !important;
width: 190px !important;
height: 76px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
overflow: hidden !important;
box-sizing: border-box !important;
`;
document.body.appendChild(mainContainer);
// ========== 左邊區域：計時器和刷新 ==========
const leftSection = document.createElement('div');
leftSection.style.cssText = `
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
height: 100% !important;
justify-content: center !important;
`;
mainContainer.appendChild(leftSection);
// 計時器顯示
const timerContainer = document.createElement('div');
timerContainer.style.cssText = `
display: flex !important;
align-items: center !important;
gap: 6px !important;
padding: 4px 8px !important;
background: rgba(20, 20, 20, 0.8) !important;
border: 1px solid #333 !important;
border-radius: 3px !important;
height: 24px !important;
box-sizing: border-box !important;
`;
const timerLabel = document.createElement('span');
timerLabel.textContent = 'Timer:';
timerLabel.style.cssText = `
color: #aaa !important;
font-size: 10px !important;
font-weight: bold !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
white-space: nowrap !important;
`;
const timerDisplay = document.createElement('span');
timerDisplay.id = 'df-timer-display';
timerDisplay.textContent = '0s';
timerDisplay.style.cssText = `
color: #fff !important;
font-family: 'Courier New', monospace !important;
font-size: 11px !important;
font-weight: bold !important;
background: rgba(0, 0, 0, 0.5) !important;
padding: 1px 4px !important;
border-radius: 2px !important;
border: 1px solid #555 !important;
min-width: 30px !important;
text-align: center !important;
box-sizing: border-box !important;
`;
timerContainer.appendChild(timerLabel);
timerContainer.appendChild(timerDisplay);
leftSection.appendChild(timerContainer);
// 刷新控制
const refreshContainer = document.createElement('div');
refreshContainer.style.cssText = `
display: flex !important;
align-items: center !important;
gap: 6px !important;
padding: 4px 8px !important;
background: rgba(20, 20, 20, 0.8) !important;
border: 1px solid #333 !important;
border-radius: 3px !important;
height: 24px !important;
box-sizing: border-box !important;
`;
const refreshLabel = document.createElement('span');
refreshLabel.textContent = 'Auto:';
refreshLabel.style.cssText = `
color: #aaa !important;
font-size: 9px !important;
font-weight: bold !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
white-space: nowrap !important;
`;
const refreshBtn = document.createElement('button');
refreshBtn.id = 'df-refresh-btn';
refreshBtn.textContent = 'Off';
refreshBtn.style.cssText = `
background: linear-gradient(to bottom, #3a3a3a, #2a2a2a) !important;
color: #ccc !important;
border: 1px solid #555 !important;
border-radius: 2px !important;
padding: 2px 6px !important;
font-size: 9px !important;
cursor: pointer !important;
min-width: 40px !important;
text-align: center !important;
font-weight: bold !important;
text-shadow: 0 1px 1px rgba(0,0,0,0.5) !important;
height: 18px !important;
line-height: 1 !important;
box-sizing: border-box !important;
`;
refreshContainer.appendChild(refreshLabel);
refreshContainer.appendChild(refreshBtn);
leftSection.appendChild(refreshContainer);
// ========== 右邊區域：BOSS按鈕和Minimap按鈕 ==========
const rightSection = document.createElement('div');
rightSection.style.cssText = `
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 2px !important;
height: 100% !important;
justify-content: center !important;
`;
mainContainer.appendChild(rightSection);
// BOSS按鈕
const bossButton = document.createElement('button');
bossButton.id = 'df-boss-button';
bossButton.textContent = 'BOSS\nMAP';
bossButton.style.cssText = `
background: linear-gradient(to bottom, #8b0000, #660000) !important;
color: #ffcc00 !important;
border: 2px solid #b30000 !important;
border-radius: 4px !important;
padding: 8px 12px !important;
font-weight: bold !important;
font-size: 11px !important;
cursor: pointer !important;
text-align: center !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
box-shadow: 0 2px 8px rgba(139,0,0,0.4) !important;
transition: all 0.2s !important;
width: 70px !important;
height: 34px !important;
line-height: 1.1 !important;
white-space: pre-line !important;
box-sizing: border-box !important;
margin-bottom: 2px !important;
`;
// Minimap按鈕
const minimapButton = document.createElement('button');
minimapButton.id = 'df-minimap-button';
minimapButton.textContent = 'MINIMAP';
minimapButton.style.cssText = `
background: linear-gradient(to bottom, #1a3a5f, #0a2a4f) !important;
color: #66ccff !important;
border: 1px solid #2a5a8a !important;
border-radius: 3px !important;
padding: 2px 4px !important;
font-weight: bold !important;
font-size: 9px !important;
cursor: pointer !important;
text-align: center !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
text-shadow: 0 1px 1px rgba(0,0,0,0.8) !important;
box-shadow: 0 1px 4px rgba(26,58,95,0.4) !important;
transition: all 0.2s !important;
width: 70px !important;
height: 16px !important;
line-height: 1.2 !important;
box-sizing: border-box !important;
`;
// 標籤容器
const buttonLabelContainer = document.createElement('div');
buttonLabelContainer.style.cssText = `
display: flex !important;
justify-content: center !important;
width: 100% !important;
`;
const bossMiniLabel = document.createElement('div');
bossMiniLabel.textContent = 'mini';
bossMiniLabel.style.cssText = `
color: #aaa !important;
font-size: 7px !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
margin-top: 1px !important;
`;
rightSection.appendChild(bossButton);
rightSection.appendChild(minimapButton);
buttonLabelContainer.appendChild(bossMiniLabel);
rightSection.appendChild(buttonLabelContainer);
// ========== 創建彩虹變色動畫樣式 ==========
const rainbowStyle = document.createElement('style');
rainbowStyle.textContent = `
@keyframes rainbowGlow {
0% { color: #ff0000; text-shadow: 0 0 10px #ff0000; }
16% { color: #ff7f00; text-shadow: 0 0 10px #ff7f00; }
32% { color: #ffff00; text-shadow: 0 0 10px #ffff00; }
48% { color: #00ff00; text-shadow: 0 0 10px #00ff00; }
64% { color: #0000ff; text-shadow: 0 0 10px #0000ff; }
80% { color: #4b0082; text-shadow: 0 0 10px #4b0082; }
96% { color: #9400d3; text-shadow: 0 0 10px #9400d3; }
100% { color: #ff0000; text-shadow: 0 0 10px #ff0000; }
}
#df-minimap-title {
animation: rainbowGlow 3s linear infinite !important;
}
`;
document.head.appendChild(rainbowStyle);
// ========== Minimap 地圖選擇視窗 ==========
const minimapWindow = document.createElement('div');
minimapWindow.id = 'df-minimap-window';
minimapWindow.style.cssText = `
display: none !important;
position: fixed !important;
top: 120px !important;
right: 10px !important;
background: rgba(15, 25, 35, 0.95) !important;
border: 2px solid #2a5a8a !important;
border-radius: 8px !important;
padding: 15px !important;
z-index: 10002 !important;
width: 420px !important;
min-height: 360px !important;
box-shadow: 0 8px 30px rgba(0,0,0,0.9) !important;
backdrop-filter: blur(5px) !important;
overflow: hidden !important;
`;
// 添加背景圖層
const backgroundOverlay = document.createElement('div');
backgroundOverlay.style.cssText = `
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background-image: url('https://i.imgur.com/XdLdwYN.png') !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
opacity: 0.3 !important;
z-index: -1 !important;
`;
minimapWindow.appendChild(backgroundOverlay);
// 關閉按鈕
const minimapCloseBtn = document.createElement('button');
minimapCloseBtn.textContent = '×';
minimapCloseBtn.style.cssText = `
position: absolute !important;
top: 10px !important;
right: 10px !important;
background: #ff4444 !important;
color: white !important;
border: none !important;
border-radius: 50% !important;
width: 26px !important;
height: 26px !important;
font-size: 18px !important;
font-weight: bold !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
z-index: 10003 !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
`;
minimapWindow.appendChild(minimapCloseBtn);
// 標題 - 彩虹變色效果
const minimapTitle = document.createElement('div');
minimapTitle.textContent = 'MINI MAP SELECTION';
minimapTitle.id = 'df-minimap-title';
minimapTitle.style.cssText = `
color: #66ccff !important;
font-size: 18px !important;
font-weight: bold !important;
text-align: center !important;
margin-bottom: 20px !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
padding-bottom: 10px !important;
border-bottom: 2px solid rgba(102, 204, 255, 0.4) !important;
position: relative !important;
z-index: 1 !important;
`;
minimapWindow.appendChild(minimapTitle);
// 網格容器 - 5行3列
const gridContainer = document.createElement('div');
gridContainer.style.cssText = `
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
grid-template-rows: repeat(5, 1fr) !important;
gap: 12px !important;
width: 100% !important;
height: 280px !important;
position: relative !important;
z-index: 1 !important;
`;
minimapWindow.appendChild(gridContainer);
// ========== 地圖預覽窗口 ==========
const mapPreview = document.createElement('div');
mapPreview.id = 'df-map-preview';
mapPreview.style.cssText = `
display: none !important;
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 600px !important;
height: 400px !important;
background: rgba(0, 0, 0, 0.95) !important;
border: 3px solid #2a5a8a !important;
border-radius: 10px !important;
z-index: 10004 !important;
box-shadow: 0 10px 40px rgba(0,0,0,0.9) !important;
overflow: hidden !important;
`;
const previewImage = document.createElement('img');
previewImage.id = 'df-preview-image';
previewImage.style.cssText = `
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
`;
const previewCloseBtn = document.createElement('button');
previewCloseBtn.textContent = '×';
previewCloseBtn.style.cssText = `
position: absolute !important;
top: 10px !important;
right: 10px !important;
background: #ff4444 !important;
color: white !important;
border: none !important;
border-radius: 50% !important;
width: 30px !important;
height: 30px !important;
font-size: 20px !important;
font-weight: bold !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
z-index: 10005 !important;
box-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
`;
previewCloseBtn.onclick = () => {
mapPreview.style.display = 'none';
};
mapPreview.appendChild(previewImage);
mapPreview.appendChild(previewCloseBtn);
document.body.appendChild(mapPreview);
// 地圖數據 - 5行3列
const mapData = [
// 第1行
{ id: 'empty1', name: '', row: 1, col: 1, isEmpty: true },
{ id: 'camp', name: 'CAMP VALCREST', row: 1, col: 2, image: 'https://i.imgur.com/JQ7CacU.jpg' },
{ id: 'nez', name: 'NEZ', row: 1, col: 3, image: 'https://imgur.com/yJhQ4bf.jpg' },
// 第2行
{ id: 'dogg', name: "Dogg's Stockade", row: 2, col: 1, image: 'https://i.imgur.com/oWnLP8x.jpg' },
{ id: 'empty2', name: '', row: 2, col: 2, isEmpty: true },
{ id: 'secronom', name: 'Secronom Bunker', row: 2, col: 3, image: 'https://imgur.com/pXgslg2.jpg' },
// 第3行
{ id: 'nastya', name: "Nastya's Holdout", row: 3, col: 1, image: 'https://imgur.com/Q7BBICi.jpg' },
{ id: 'fort', name: 'Fort Pastor', row: 3, col: 2, image: 'https://imgur.com/DLpsSX2.jpg' },
{ id: 'empty3', name: '', row: 3, col: 3, isEmpty: true },
// 第4行
{ id: 'precinct', name: 'Precinct 13', row: 4, col: 1, image: 'https://imgur.com/pYer6Eg.jpg' },
{ id: 'empty4', name: '', row: 4, col: 2, isEmpty: true },
{ id: 'sez', name: 'SEZ South Eastern', row: 4, col: 3, image: 'https://i.imgur.com/SJmJrQw.jpg' },
// 第5行
{ id: 'wasteland', name: 'Wasteland', row: 5, col: 1, image: 'https://i.imgur.com/UYa9z15.jpg' },
{ id: 'empty5', name: '', row: 5, col: 2, isEmpty: true },
{ id: 'empty6', name: '', row: 5, col: 3, isEmpty: true }
];
// 創建網格按鈕
mapData.forEach(map => {
const btn = document.createElement('button');
btn.className = 'minimap-grid-btn';
btn.dataset.mapId = map.id;
btn.dataset.imageUrl = map.image || '';
if (map.isEmpty) {
// 空位按鈕
btn.style.cssText = `
grid-column: ${map.col} !important;
grid-row: ${map.row} !important;
background: rgba(30, 40, 60, 0.3) !important;
border: 1px dashed #3a5a8a !important;
border-radius: 6px !important;
cursor: default !important;
visibility: visible !important;
pointer-events: none !important;
`;
} else {
// 地圖按鈕
btn.textContent = map.name;
btn.style.cssText = `
grid-column: ${map.col} !important;
grid-row: ${map.row} !important;
background: linear-gradient(to bottom, rgba(42, 74, 106, 0.8), rgba(26, 58, 90, 0.8)) !important;
color: #aaddff !important;
border: 2px solid #3a6a9a !important;
border-radius: 6px !important;
padding: 12px 6px !important;
font-size: 11px !important;
font-weight: bold !important;
cursor: pointer !important;
text-align: center !important;
transition: all 0.3s !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
word-break: break-word !important;
line-height: 1.1 !important;
width: 100% !important;
height: 100% !important;
text-shadow: 1px 1px 2px rgba(0,0,0,0.7) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
`;
// 懸停效果
btn.onmouseover = () => {
btn.style.background = 'linear-gradient(to bottom, rgba(58, 106, 154, 0.9), rgba(42, 90, 138, 0.9))';
btn.style.color = '#ffffff';
btn.style.borderColor = '#4a8acc';
btn.style.boxShadow = '0 0 12px rgba(74, 138, 204, 0.6)';
btn.style.transform = 'translateY(-2px)';
};
btn.onmouseout = () => {
btn.style.background = 'linear-gradient(to bottom, rgba(42, 74, 106, 0.8), rgba(26, 58, 90, 0.8))';
btn.style.color = '#aaddff';
btn.style.borderColor = '#3a6a9a';
btn.style.boxShadow = '0 2px 8px rgba(0,0,0,0.4)';
btn.style.transform = 'translateY(0)';
};
// 點擊事件 - 顯示地圖圖片
btn.onclick = (e) => {
e.stopPropagation();
if (map.image) {
previewImage.src = map.image;
mapPreview.style.display = 'block';
console.log(`打開地圖: ${map.name}`);
}
};
}
gridContainer.appendChild(btn);
});
document.body.appendChild(minimapWindow);
// ========== 刷新選單 ==========
const refreshMenu = document.createElement('div');
refreshMenu.id = 'df-refresh-menu';
refreshMenu.style.cssText = `
display: none !important;
position: fixed !important;
top: 60px !important;
right: 120px !important;
background: rgba(20, 20, 20, 0.98) !important;
border: 1px solid #666 !important;
border-radius: 3px !important;
padding: 5px !important;
z-index: 10003 !important;
min-width: 80px !important;
box-shadow: 0 5px 20px rgba(0,0,0,0.8) !important;
`;
// 刷新選項
const refreshOptions = [
{ text: 'Off', value: 0 },
{ text: '5s', value: 5000 },
{ text: '15s', value: 15000 },
{ text: '30s', value: 30000 },
{ text: '1min', value: 60000 },
{ text: '15min', value: 900000 },
{ text: '20min', value: 1200000 }
];
// 創建選單項目
refreshOptions.forEach(option => {
const menuItem = document.createElement('div');
menuItem.textContent = option.text;
menuItem.style.cssText = `
padding: 4px 8px !important;
color: #ccc !important;
cursor: pointer !important;
font-size: 9px !important;
border-radius: 2px !important;
margin: 1px 0 !important;
text-align: center !important;
border: 1px solid transparent !important;
transition: all 0.2s !important;
`;
menuItem.onmouseover = () => menuItem.style.background = 'rgba(255, 100, 100, 0.2)';
menuItem.onmouseout = () => menuItem.style.background = 'transparent';
menuItem.onclick = () => {
setRefreshInterval(option.value, option.text);
refreshMenu.style.display = 'none';
};
refreshMenu.appendChild(menuItem);
});
mainContainer.appendChild(refreshMenu);
// ========== BOSS地圖視窗 ==========
const mapWindow = document.createElement('div');
mapWindow.id = 'df-map-window';
mapWindow.style.cssText = `
display: none !important;
position: fixed !important;
top: 100px !important;
right: 10px !important;
width: 900px !important;
height: 500px !important;
background: white !important;
border: 2px solid #ff0000 !important;
z-index: 10000 !important;
box-shadow: 0 5px 25px rgba(0,0,0,0.5) !important;
border-radius: 5px !important;
overflow: hidden !important;
`;
const iframe = document.createElement('iframe');
iframe.id = 'boss-map-iframe';
iframe.src = 'https://www.dfprofiler.com/bossmap';
iframe.style.cssText = 'width: 100%; height: 100%; border: none;';
mapWindow.appendChild(iframe);
const closeBtn = document.createElement('button');
closeBtn.textContent = '×';
closeBtn.style.cssText = `
position: absolute !important;
top: 5px !important;
right: 5px !important;
background: #ff4444 !important;
color: white !important;
border: none !important;
border-radius: 50% !important;
width: 25px !important;
height: 25px !important;
font-size: 16px !important;
font-weight: bold !important;
cursor: pointer !important;
z-index: 10001 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
`;
mapWindow.appendChild(closeBtn);
document.body.appendChild(mapWindow);
// ========== 功能變數 ==========
let lastClosedTime = Date.now();
let refreshIntervalId = null;
// 設定刷新間隔函數
function setRefreshInterval(intervalMs, displayText) {
// 清除現有計時器
if (refreshIntervalId) {
clearInterval(refreshIntervalId);
refreshIntervalId = null;
}
// 保存到 localStorage
localStorage.setItem('df-refresh-interval', intervalMs.toString());
localStorage.setItem('df-refresh-text', displayText || 'Off');
// 更新按鈕文字
refreshBtn.textContent = displayText;
// 根據間隔設置顏色
if (intervalMs > 0) {
const colorStyle = getRefreshColorStyle(intervalMs);
refreshBtn.style.background = colorStyle.background;
refreshBtn.style.color = colorStyle.color;
refreshBtn.style.borderColor = colorStyle.borderColor;
// 啟動自動刷新
refreshIntervalId = setInterval(() => {
console.log(`自動刷新 (${intervalMs/1000}秒間隔)`);
location.reload();
}, intervalMs);
} else {
refreshBtn.style.background = 'linear-gradient(to bottom, #3a3a3a, #2a2a2a)';
refreshBtn.style.color = '#ccc';
refreshBtn.style.borderColor = '#555';
}
}
// 獲取刷新顏色樣式
function getRefreshColorStyle(ms) {
switch(ms) {
case 5000:
return {
background: 'linear-gradient(to bottom, #006600, #004400)',
color: '#00ff00',
borderColor: '#00aa00'
};
case 15000:
return {
background: 'linear-gradient(to bottom, #0066cc, #004499)',
color: '#66ccff',
borderColor: '#0088ff'
};
case 30000:
return {
background: 'linear-gradient(to bottom, #6600cc, #440099)',
color: '#cc66ff',
borderColor: '#9900ff'
};
case 60000:
return {
background: 'linear-gradient(to bottom, #cc6600, #994400)',
color: '#ffcc66',
borderColor: '#ff9900'
};
case 900000:
return {
background: 'linear-gradient(to bottom, #cc0000, #990000)',
color: '#ff6666',
borderColor: '#ff3333'
};
case 1200000:
return {
background: 'linear-gradient(to bottom, #cc0066, #990044)',
color: '#ff66cc',
borderColor: '#ff3399'
};
default:
return {
background: 'linear-gradient(to bottom, #3a3a3a, #2a2a2a)',
color: '#ccc',
borderColor: '#555'
};
}
}
// 載入保存的刷新設定
function loadSavedRefresh() {
const savedInterval = localStorage.getItem('df-refresh-interval');
const savedText = localStorage.getItem('df-refresh-text');
if (savedInterval && parseInt(savedInterval) > 0) {
const option = refreshOptions.find(opt => opt.value === parseInt(savedInterval));
if (option) {
setRefreshInterval(option.value, option.text);
}
}
}
// ========== 計時器功能 ==========
function updateTimer() {
const elapsedTime = Math.floor((Date.now() - lastClosedTime) / 1000);
timerDisplay.textContent = `${elapsedTime}s`;
}
// ========== 事件監聽 ==========
// BOSS按鈕點擊
bossButton.addEventListener('click', (e) => {
e.stopPropagation();
iframe.src = iframe.src;
mapWindow.style.display = mapWindow.style.display === 'none' ? 'block' : 'none';
lastClosedTime = Date.now();
minimapWindow.style.display = 'none';
mapPreview.style.display = 'none';
});
// Minimap按鈕點擊
minimapButton.addEventListener('click', (e) => {
e.stopPropagation();
minimapWindow.style.display = minimapWindow.style.display === 'none' ? 'block' : 'none';
mapWindow.style.display = 'none';
mapPreview.style.display = 'none';
});
// 關閉minimap視窗
minimapCloseBtn.addEventListener('click', (e) => {
e.stopPropagation();
minimapWindow.style.display = 'none';
mapPreview.style.display = 'none';
});
// 關閉BOSS地圖視窗
closeBtn.addEventListener('click', (e) => {
e.stopPropagation();
mapWindow.style.display = 'none';
});
// 刷新按鈕點擊
refreshBtn.addEventListener('click', (e) => {
e.stopPropagation();
refreshMenu.style.display = refreshMenu.style.display === 'none' ? 'block' : 'none';
});
// 點擊外部關閉選單和視窗
document.addEventListener('click', (e) => {
if (!refreshMenu.contains(e.target) && e.target !== refreshBtn) {
refreshMenu.style.display = 'none';
}
if (mapWindow.style.display === 'block' &&
!mapWindow.contains(e.target) &&
e.target !== bossButton) {
mapWindow.style.display = 'none';
}
if (minimapWindow.style.display === 'block' &&
!minimapWindow.contains(e.target) &&
e.target !== minimapButton) {
minimapWindow.style.display = 'none';
mapPreview.style.display = 'none';
}
if (mapPreview.style.display === 'block' &&
!mapPreview.contains(e.target)) {
mapPreview.style.display = 'none';
}
});
// 防止選單點擊冒泡
refreshMenu.addEventListener('click', (e) => {
e.stopPropagation();
});
minimapWindow.addEventListener('click', (e) => {
e.stopPropagation();
});
mapPreview.addEventListener('click', (e) => {
e.stopPropagation();
});
// ========== 初始化 ==========
// 載入保存的刷新設定
loadSavedRefresh();
// 啟動計時器
setInterval(updateTimer, 1000);
console.log('190x76橫向面板創建完成！包含Minimap按鈕和5x3網格佈局！');
})();