mirror of
https://github.com/deadcxap/bs-overlay.git
synced 2026-07-02 05:43:39 +03:00
Add files via upload
This commit is contained in:
Yury
+713
@@ -0,0 +1,713 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>BS+ Cyberpunk Overlay</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
|
||||
|
||||
:root {
|
||||
--neon-cyan: #0ff;
|
||||
--neon-magenta: #f0f;
|
||||
--neon-lime: #39ff14;
|
||||
--neon-red: #ff3b3b;
|
||||
--bg-glass: rgba(10, 10, 15, 0.65);
|
||||
--border-glow: 0 0 10px rgba(0, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* === АНИМАЦИИ === */
|
||||
@keyframes rainbow {
|
||||
0% { filter: hue-rotate(0deg); }
|
||||
100% { filter: hue-rotate(360deg); }
|
||||
}
|
||||
|
||||
/* === ОБЩИЕ КОНТЕЙНЕРЫ === */
|
||||
#app-container {
|
||||
position: absolute;
|
||||
transition: transform 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: max-content;
|
||||
max-width: 90vw;
|
||||
}
|
||||
|
||||
.view-mode {
|
||||
position: absolute;
|
||||
transition: opacity 0.4s ease, transform 0.4s ease;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.view-mode.active {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/* === PLAYING MODE (GLASS PANEL) === */
|
||||
.glass-panel {
|
||||
background: var(--bg-glass);
|
||||
backdrop-filter: blur(6px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
box-shadow: var(--border-glow);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
#header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
#cover {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 10px;
|
||||
object-fit: cover;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
box-shadow: 0 0 10px var(--neon-cyan);
|
||||
animation: rainbow 10s linear infinite;
|
||||
}
|
||||
|
||||
#text-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
background: linear-gradient(45deg, var(--neon-cyan), #fff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
line-height: 1.2;
|
||||
filter: drop-shadow(0 0 5px rgba(0,255,255,0.4));
|
||||
}
|
||||
|
||||
#artist-mapper {
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
letter-spacing: 0.5px;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
#meta-line {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
#meta-line span { margin-right: 12px; }
|
||||
#difficulty { color: var(--neon-lime); text-shadow: 0 0 5px rgba(57, 255, 20, 0.5); }
|
||||
|
||||
/* === СТАТИСТИКА (Внутри панели) === */
|
||||
#stats-row {
|
||||
display: flex;
|
||||
padding-top: 5px;
|
||||
border-top: 1px dashed rgba(255,255,255,0.1);
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* === HP PROGRESS BAR === */
|
||||
#hp-bar-wrapper {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 18px;
|
||||
background: rgba(0,0,0,0.6);
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(255, 0, 255, 0.4);
|
||||
box-shadow: 0 0 8px rgba(255, 0, 255, 0.3);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#hp-bar-fill {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #8b0000, var(--neon-magenta));
|
||||
transition: width 0.1s linear;
|
||||
}
|
||||
|
||||
#hp-val {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
text-shadow: 1px 1px 2px #000, -1px -1px 2px #000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* === PROGRESS BAR === */
|
||||
#progress-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
background: rgba(0,0,0,0.6);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#progress-fill {
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--neon-magenta), var(--neon-cyan));
|
||||
transition: width 0.1s linear;
|
||||
}
|
||||
|
||||
#time-prog {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 2px #000, -1px -1px 2px #000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* === НИЖНИЕ СТАТЫ (Без фона) === */
|
||||
#bottom-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bottom-stat-row {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stat-item .label {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
.stat-item .val {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
text-shadow: 1px 1px 3px #000;
|
||||
}
|
||||
|
||||
#combo-val { color: var(--neon-cyan); text-shadow: 0 0 8px rgba(0, 255, 255, 0.6), 1px 1px 2px #000; }
|
||||
#miss-val { color: var(--neon-red); text-shadow: 0 0 8px rgba(255, 59, 59, 0.6), 1px 1px 2px #000; }
|
||||
|
||||
.stat-item.acc-large .label { font-size: 14px; }
|
||||
.stat-item.acc-large #acc-num { font-size: 32px; color: #fff; }
|
||||
.stat-item.acc-large #acc-grade { font-size: 32px; }
|
||||
|
||||
/* === MENU MODE (BeatLeader) === */
|
||||
#menu-overlay { width: 340px; }
|
||||
|
||||
#bl-profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px dashed rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
#bl-avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 12px;
|
||||
border: 2px solid var(--neon-cyan);
|
||||
box-shadow: 0 0 10px rgba(0,255,255,0.4);
|
||||
object-fit: cover;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#bl-name-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
#bl-name {
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
color: var(--neon-magenta);
|
||||
text-shadow: 0 0 5px rgba(255,0,255,0.5);
|
||||
}
|
||||
|
||||
.bl-stat {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
padding-bottom: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.bl-stat span:last-child { color: var(--neon-cyan); text-shadow: 0 0 5px rgba(0,255,255,0.5); font-weight: bold; }
|
||||
|
||||
/* === SETTINGS MODAL (F1) === */
|
||||
#settings-modal {
|
||||
position: fixed;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%) scale(0.9);
|
||||
background: rgba(10, 10, 15, 0.95);
|
||||
border: 1px solid var(--neon-cyan);
|
||||
box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
|
||||
padding: 25px;
|
||||
border-radius: 12px;
|
||||
z-index: 999;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
width: 320px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s, transform 0.2s;
|
||||
}
|
||||
#settings-modal.show { display: flex; opacity: 1; transform: translate(-50%, -50%) scale(1); }
|
||||
#settings-modal h2 { margin: 0; color: var(--neon-cyan); text-align: center; font-size: 18px; }
|
||||
.setting-row { display: flex; flex-direction: column; gap: 5px; }
|
||||
.setting-row.checkbox-row { flex-direction: row; align-items: center; gap: 10px; cursor: pointer; }
|
||||
.setting-row input[type="text"], .setting-row input[type="number"], .setting-row select {
|
||||
background: rgba(0,0,0,0.5); color: #fff; border: 1px solid #444;
|
||||
padding: 8px; font-family: 'Orbitron', sans-serif; border-radius: 4px; outline: none;
|
||||
}
|
||||
.setting-row input:focus, .setting-row select:focus { border-color: var(--neon-cyan); }
|
||||
.setting-row button {
|
||||
background: transparent; color: var(--neon-cyan); border: 1px solid var(--neon-cyan); padding: 10px;
|
||||
font-weight: bold; cursor: pointer; border-radius: 4px; margin-top: 5px;
|
||||
font-family: 'Orbitron', sans-serif; transition: 0.2s;
|
||||
}
|
||||
.setting-row button:hover { background: var(--neon-cyan); color: #000; box-shadow: 0 0 15px var(--neon-cyan); }
|
||||
|
||||
#debug {
|
||||
position: fixed; bottom: 10px; left: 10px; background: rgba(0,0,0,0.8);
|
||||
color: var(--neon-lime); padding: 4px 8px; font-size: 11px;
|
||||
border-radius: 4px; opacity: 0; transition: opacity 0.5s; z-index: 1000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="app-container">
|
||||
<div id="menu-overlay" class="view-mode glass-panel">
|
||||
<div id="bl-profile">
|
||||
<img id="bl-avatar" src="" alt="Avatar">
|
||||
<div id="bl-name-container">
|
||||
<span style="font-size: 10px; color: #888; text-transform: uppercase;">Player Profile</span>
|
||||
<span id="bl-name">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bl-stat"><span>Global Rank:</span> <span id="bl-global">#--</span></div>
|
||||
<div class="bl-stat"><span>Local Rank:</span> <span id="bl-local">#--</span></div>
|
||||
<div class="bl-stat"><span>Performance:</span> <span id="bl-pp">-- pp</span></div>
|
||||
</div>
|
||||
|
||||
<div id="playing-overlay" class="view-mode">
|
||||
<div class="glass-panel">
|
||||
<div id="header-row">
|
||||
<img id="cover" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==" alt="Cover">
|
||||
<div id="text-block">
|
||||
<div id="title">Waiting for song...</div>
|
||||
<div id="artist-mapper">-</div>
|
||||
<div id="meta-line">
|
||||
<span id="difficulty">-</span>
|
||||
<span id="bpm">BPM -</span>
|
||||
<span id="key">BSR: -</span>
|
||||
</div>
|
||||
|
||||
<div id="stats-row">
|
||||
<div id="hp-bar-wrapper">
|
||||
<div id="hp-bar-fill"></div>
|
||||
<div id="hp-val">100%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="progress-wrapper">
|
||||
<div id="progress-fill"></div>
|
||||
<div id="time-prog">0:00 / 0:00</div>
|
||||
</div>
|
||||
|
||||
<div id="bottom-stats">
|
||||
<div class="bottom-stat-row">
|
||||
<div class="stat-item"><span class="label">Miss</span><span class="val" id="miss-val">0</span></div>
|
||||
<div class="stat-item"><span class="label">Combo</span><span class="val" id="combo-val">0</span></div>
|
||||
</div>
|
||||
<div class="stat-item acc-large">
|
||||
<span class="label">Acc</span>
|
||||
<span class="val" id="acc-num">0.0%</span>
|
||||
<span class="val" id="acc-grade" style="color:var(--neon-cyan); text-shadow: 0 0 10px var(--neon-cyan)">SS</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="settings-modal">
|
||||
<h2>SYSTEM SETUP</h2>
|
||||
<div class="setting-row">
|
||||
<label>WebSocket URL</label>
|
||||
<input type="text" id="inp-ws" placeholder="ws://127.0.0.1:2947/socket">
|
||||
</div>
|
||||
<div class="setting-row">
|
||||
<label>Layout</label>
|
||||
<select id="inp-layout">
|
||||
<option value="top-left">Top Left</option>
|
||||
<option value="top-right">Top Right</option>
|
||||
<option value="bottom-left">Bottom Left</option>
|
||||
<option value="bottom-right">Bottom Right</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="setting-row">
|
||||
<label>Scale (0.5 - 2.0)</label>
|
||||
<input type="number" step="0.1" id="inp-scale">
|
||||
</div>
|
||||
<div class="setting-row">
|
||||
<label>BeatLeader ID / Nickname</label>
|
||||
<input type="text" id="inp-bl" placeholder="Например: 76561198029377687">
|
||||
</div>
|
||||
<label class="setting-row checkbox-row">
|
||||
<input type="checkbox" id="inp-show-bl">
|
||||
Показывать BeatLeader в меню
|
||||
</label>
|
||||
<div class="setting-row">
|
||||
<button onclick="saveSettings()">APPLY & RECONNECT</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="debug">System init...</div>
|
||||
|
||||
<script>
|
||||
const els = {
|
||||
app: document.getElementById('app-container'),
|
||||
menuOverlay: document.getElementById('menu-overlay'),
|
||||
playingOverlay: document.getElementById('playing-overlay'),
|
||||
progFill: document.getElementById('progress-fill'),
|
||||
time: document.getElementById('time-prog'),
|
||||
title: document.getElementById('title'),
|
||||
artist: document.getElementById('artist-mapper'),
|
||||
diff: document.getElementById('difficulty'),
|
||||
bpm: document.getElementById('bpm'),
|
||||
key: document.getElementById('key'),
|
||||
cover: document.getElementById('cover'),
|
||||
accNum: document.getElementById('acc-num'),
|
||||
accGrade: document.getElementById('acc-grade'),
|
||||
combo: document.getElementById('combo-val'),
|
||||
miss: document.getElementById('miss-val'),
|
||||
hpVal: document.getElementById('hp-val'),
|
||||
hpFill: document.getElementById('hp-bar-fill'),
|
||||
debug: document.getElementById('debug'),
|
||||
settings: document.getElementById('settings-modal'),
|
||||
blAvatar: document.getElementById('bl-avatar'),
|
||||
blName: document.getElementById('bl-name'),
|
||||
blGlobal: document.getElementById('bl-global'),
|
||||
blLocal: document.getElementById('bl-local'),
|
||||
blPp: document.getElementById('bl-pp')
|
||||
};
|
||||
|
||||
let config = { ws: 'ws://127.0.0.1:2947/socket', layout: 'top-left', scale: 1.0, blId: '', showBL: true };
|
||||
let ws = null;
|
||||
let reconnectAttempts = 0;
|
||||
let reconnectTimeout = null;
|
||||
let debugTimeout = null;
|
||||
let duration = 0;
|
||||
let lastBlFetch = 0;
|
||||
|
||||
function init() {
|
||||
loadSettings();
|
||||
applyLayout();
|
||||
connectWS();
|
||||
setMode('menu');
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'F1') els.settings.classList.toggle('show');
|
||||
});
|
||||
}
|
||||
|
||||
function loadSettings() {
|
||||
const saved = localStorage.getItem('bsCyberConfig');
|
||||
if (saved) config = { ...config, ...JSON.parse(saved) };
|
||||
|
||||
document.getElementById('inp-ws').value = config.ws;
|
||||
document.getElementById('inp-layout').value = config.layout;
|
||||
document.getElementById('inp-scale').value = config.scale;
|
||||
document.getElementById('inp-bl').value = config.blId;
|
||||
document.getElementById('inp-show-bl').checked = config.showBL !== false;
|
||||
}
|
||||
|
||||
function saveSettings() {
|
||||
config.ws = document.getElementById('inp-ws').value;
|
||||
config.layout = document.getElementById('inp-layout').value;
|
||||
config.scale = parseFloat(document.getElementById('inp-scale').value) || 1.0;
|
||||
config.blId = document.getElementById('inp-bl').value.trim();
|
||||
config.showBL = document.getElementById('inp-show-bl').checked;
|
||||
|
||||
localStorage.setItem('bsCyberConfig', JSON.stringify(config));
|
||||
els.settings.classList.remove('show');
|
||||
|
||||
applyLayout();
|
||||
connectWS();
|
||||
setMode('menu');
|
||||
}
|
||||
|
||||
function applyLayout() {
|
||||
const isLeft = config.layout.includes('left');
|
||||
const isTop = config.layout.includes('top');
|
||||
|
||||
// 1. Позиция на экране и точка масштабирования
|
||||
els.app.style.transformOrigin = `${isLeft ? 'left' : 'right'} ${isTop ? 'top' : 'bottom'}`;
|
||||
els.app.style.transform = `scale(${config.scale})`;
|
||||
|
||||
els.app.style.top = isTop ? '20px' : 'auto';
|
||||
els.app.style.bottom = isTop ? 'auto' : '20px';
|
||||
els.app.style.left = isLeft ? '20px' : 'auto';
|
||||
els.app.style.right = isLeft ? 'auto' : '20px';
|
||||
|
||||
// 2. ИСПРАВЛЕНИЕ: привязка к нужной грани внутри контейнера для нижних режимов
|
||||
els.menuOverlay.style.top = isTop ? '0' : 'auto';
|
||||
els.menuOverlay.style.bottom = isTop ? 'auto' : '0';
|
||||
els.playingOverlay.style.top = isTop ? '0' : 'auto';
|
||||
els.playingOverlay.style.bottom = isTop ? 'auto' : '0';
|
||||
|
||||
// 3. Отзеркаливание контейнеров
|
||||
els.app.style.alignItems = isLeft ? 'flex-start' : 'flex-end';
|
||||
els.playingOverlay.style.alignItems = isLeft ? 'flex-start' : 'flex-end';
|
||||
|
||||
// 4. Отзеркаливание контента внутри карточки
|
||||
document.getElementById('header-row').style.flexDirection = isLeft ? 'row' : 'row-reverse';
|
||||
document.getElementById('text-block').style.alignItems = isLeft ? 'flex-start' : 'flex-end';
|
||||
document.getElementById('text-block').style.textAlign = isLeft ? 'left' : 'right';
|
||||
document.getElementById('stats-row').style.justifyContent = isLeft ? 'flex-start' : 'flex-end';
|
||||
|
||||
// 5. Отзеркаливание нижних статов
|
||||
document.getElementById('bottom-stats').style.alignItems = isLeft ? 'flex-start' : 'flex-end';
|
||||
document.querySelector('.bottom-stat-row').style.flexDirection = isLeft ? 'row' : 'row-reverse';
|
||||
|
||||
// 6. Направление заполнения полосок (если справа, заполняются справа налево)
|
||||
els.hpFill.style.marginLeft = isLeft ? '0' : 'auto';
|
||||
els.progFill.style.marginLeft = isLeft ? '0' : 'auto';
|
||||
}
|
||||
|
||||
function showDebug(msg) {
|
||||
clearTimeout(debugTimeout);
|
||||
els.debug.textContent = msg;
|
||||
els.debug.style.opacity = 1;
|
||||
console.log("[BS+ Overlay]", msg);
|
||||
debugTimeout = setTimeout(() => els.debug.style.opacity = 0, 5000);
|
||||
}
|
||||
|
||||
function setMode(mode) {
|
||||
if (mode === 'playing') {
|
||||
els.menuOverlay.classList.remove('active');
|
||||
els.playingOverlay.classList.add('active');
|
||||
} else {
|
||||
els.playingOverlay.classList.remove('active');
|
||||
if (config.showBL) {
|
||||
els.menuOverlay.classList.add('active');
|
||||
fetchBL();
|
||||
} else {
|
||||
els.menuOverlay.classList.remove('active');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getGrade(acc) {
|
||||
if (acc >= 0.9) return { grade: 'SS', color: 'var(--neon-cyan)' };
|
||||
if (acc >= 0.8) return { grade: 'S', color: '#fff' };
|
||||
if (acc >= 0.65) return { grade: 'A', color: 'var(--neon-lime)' };
|
||||
if (acc >= 0.5) return { grade: 'B', color: '#ffeb3b' };
|
||||
if (acc >= 0.35) return { grade: 'C', color: '#ff9800' };
|
||||
if (acc >= 0.2) return { grade: 'D', color: 'var(--neon-red)' };
|
||||
return { grade: 'E', color: 'darkred' };
|
||||
}
|
||||
|
||||
async function fetchBSR(hash) {
|
||||
try {
|
||||
els.key.textContent = `BSR: Loading...`;
|
||||
const res = await fetch(`https://api.beatsaver.com/maps/hash/${hash}`);
|
||||
if (!res.ok) throw new Error("Not found");
|
||||
const data = await res.json();
|
||||
els.key.textContent = `BSR: ${data.id}`;
|
||||
} catch (err) {
|
||||
els.key.textContent = `BSR: N/A`;
|
||||
}
|
||||
}
|
||||
|
||||
// === ИСПРАВЛЕННЫЙ BEATLEADER API ===
|
||||
async function fetchBL(force = false) {
|
||||
if (!config.blId || !config.showBL) return;
|
||||
if (!force && Date.now() - lastBlFetch < 60000) return;
|
||||
|
||||
try {
|
||||
showDebug("Fetching BeatLeader data...");
|
||||
|
||||
// Проверяем, ввел ли пользователь только цифры (Steam ID)
|
||||
const isNumeric = /^\d+$/.test(config.blId);
|
||||
|
||||
// ИСПОЛЬЗУЕМ ДОМЕН .xyz! Домен .com выдает ошибку CORS.
|
||||
const url = isNumeric
|
||||
? `https://api.beatleader.xyz/player/${config.blId}?stats=true`
|
||||
: `https://api.beatleader.xyz/players?search=${config.blId}`;
|
||||
|
||||
const res = await fetch(url);
|
||||
|
||||
if (!res.ok) throw new Error(`Network response was not ok: ${res.status}`);
|
||||
const json = await res.json();
|
||||
|
||||
// Если искали по никнейму, API возвращает объект { data: [...] }
|
||||
const player = json.data ? json.data[0] : json;
|
||||
|
||||
if (!player) {
|
||||
throw new Error("Игрок не найден");
|
||||
}
|
||||
|
||||
els.blName.textContent = player.name || "Unknown";
|
||||
els.blGlobal.textContent = `#${(player.rank || 0).toLocaleString()}`;
|
||||
els.blLocal.textContent = `#${(player.countryRank || 0).toLocaleString()} (${player.country || 'N/A'})`;
|
||||
els.blPp.textContent = `${Math.round(player.pp || 0).toLocaleString()} pp`;
|
||||
|
||||
if (player.avatar) {
|
||||
els.blAvatar.src = player.avatar;
|
||||
els.blAvatar.style.display = 'block';
|
||||
} else {
|
||||
els.blAvatar.style.display = 'none';
|
||||
}
|
||||
|
||||
lastBlFetch = Date.now();
|
||||
showDebug("BeatLeader updated");
|
||||
} catch (err) {
|
||||
showDebug("BL Error: " + err.message);
|
||||
els.blName.textContent = "Error: Проверь ID/Ник";
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
function connectWS() {
|
||||
if (ws) { ws.onclose = null; ws.close(); }
|
||||
clearTimeout(reconnectTimeout);
|
||||
|
||||
showDebug(`Connecting to ${config.ws}...`);
|
||||
try { ws = new WebSocket(config.ws); } catch (e) { handleDisconnect(); return; }
|
||||
|
||||
ws.onopen = () => { showDebug('✅ WebSocket Connected'); reconnectAttempts = 0; };
|
||||
ws.onclose = () => handleDisconnect();
|
||||
ws.onerror = () => handleDisconnect();
|
||||
|
||||
ws.onmessage = (ev) => {
|
||||
const data = JSON.parse(ev.data);
|
||||
const event = data._event;
|
||||
|
||||
if (event === 'gameState') {
|
||||
if (data.gameStateChanged === 'Playing') setMode('playing');
|
||||
else setMode('menu');
|
||||
}
|
||||
|
||||
if (event === 'mapInfo' && data.mapInfoChanged) {
|
||||
const m = data.mapInfoChanged;
|
||||
els.title.textContent = m.sub_name ? `${m.name} ${m.sub_name}` : m.name;
|
||||
|
||||
const mapper = (m.mapper && m.mapper !== 'Not mapped') ? m.mapper : '';
|
||||
els.artist.textContent = mapper ? `${m.artist} // ${mapper}` : m.artist;
|
||||
|
||||
els.diff.textContent = `${m.characteristic} ${m.difficulty}`;
|
||||
els.bpm.textContent = `BPM ${Math.round(m.BPM || 0)}`;
|
||||
if (m.coverRaw) els.cover.src = `data:image/png;base64,${m.coverRaw}`;
|
||||
|
||||
duration = (m.duration || 0) / 1000;
|
||||
|
||||
if (m.BSRKey) {
|
||||
els.key.textContent = `BSR: ${m.BSRKey}`;
|
||||
} else if (m.level_id?.startsWith('custom_level_')) {
|
||||
fetchBSR(m.level_id.substring(13));
|
||||
} else {
|
||||
els.key.textContent = `OST/DLC`;
|
||||
}
|
||||
}
|
||||
|
||||
if (event === 'score' && data.scoreEvent) {
|
||||
const s = data.scoreEvent;
|
||||
|
||||
if (s.accuracy !== undefined) {
|
||||
const accRaw = s.accuracy;
|
||||
const accObj = getGrade(accRaw);
|
||||
els.accNum.textContent = `${(accRaw * 100).toFixed(1)}%`;
|
||||
els.accGrade.textContent = accObj.grade;
|
||||
els.accGrade.style.color = accObj.color;
|
||||
els.accGrade.style.textShadow = `0 0 10px ${accObj.color}, 1px 1px 3px #000`;
|
||||
}
|
||||
|
||||
if (s.combo !== undefined) els.combo.textContent = s.combo;
|
||||
if (s.missCount !== undefined) els.miss.textContent = s.missCount;
|
||||
|
||||
if (s.currentHealth !== undefined) {
|
||||
const hpPct = Math.round(s.currentHealth * 100);
|
||||
els.hpVal.textContent = `${hpPct}%`;
|
||||
els.hpFill.style.width = `${hpPct}%`;
|
||||
}
|
||||
|
||||
if (duration > 0 && s.time !== undefined) {
|
||||
const pct = Math.min((s.time / duration) * 100, 100);
|
||||
els.progFill.style.width = `${pct}%`;
|
||||
|
||||
const curM = Math.floor(s.time / 60);
|
||||
const curS = Math.floor(s.time % 60).toString().padStart(2, '0');
|
||||
const totM = Math.floor(duration / 60);
|
||||
const totS = Math.floor(duration % 60).toString().padStart(2, '0');
|
||||
els.time.textContent = `${curM}:${curS} / ${totM}:${totS}`;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function handleDisconnect() {
|
||||
if (reconnectAttempts < 10) {
|
||||
const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 30000);
|
||||
showDebug(`❌ WS Lost. Reconnecting in ${delay/1000}s...`);
|
||||
reconnectAttempts++;
|
||||
reconnectTimeout = setTimeout(connectWS, delay);
|
||||
} else {
|
||||
showDebug(`❌ Max reconnects reached. F1 to reconfigure.`);
|
||||
}
|
||||
}
|
||||
|
||||
init();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user