Add files via upload

2026-07-02 05:43:39 +03:00 · 2026-03-14 15:04:17 +05:00
parent 46b77e60a5
commit 8f4a1e2436
1 changed files with 99 additions and 68 deletions
@@ -236,50 +236,49 @@
        .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 {
+        /* === КОМПАКТНЫЙ BEATLEADER === */
+        #bl-wrapper {
            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;
+            width: 75px;
+            height: 75px;
            border-radius: 12px;
-            border: 2px solid var(--neon-cyan);
-            box-shadow: 0 0 10px rgba(0,255,255,0.4);
+            border: 2px solid rgba(255,255,255,0.2);
+            box-shadow: 0 0 10px var(--neon-cyan);
            object-fit: cover;
            display: none;
+            animation: rainbow 10s linear infinite;
        }
-        
-        #bl-name-container {
+
+        #bl-info {
            display: flex;
            flex-direction: column;
-            gap: 2px;
+            justify-content: center;
+            gap: 3px;
        }
-        
+
        #bl-name {
            font-size: 18px;
            font-weight: 900;
            color: var(--neon-magenta);
            text-shadow: 0 0 5px rgba(255,0,255,0.5);
+            margin-bottom: 2px;
        }

-        .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-compact {
+            font-size: 13px;
+            color: #ccc;
+        }
+        
+        .bl-stat-compact span {
+            color: var(--neon-cyan);
+            font-weight: bold;
+            text-shadow: 0 0 5px rgba(0,255,255,0.5);
        }
-        .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 {
@@ -303,11 +302,33 @@
        #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 {
+        .setting-row input[type="text"], .setting-row input[type="number"] {
            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 input:focus { border-color: var(--neon-cyan); }
+        
+        /* Сетка для Radio Button'ов (вместо Select) */
+        .radio-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 8px;
+        }
+        .radio-label {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            background: rgba(0,0,0,0.5);
+            padding: 6px 8px;
+            border: 1px solid #444;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 12px;
+            transition: 0.2s;
+        }
+        .radio-label:hover { border-color: var(--neon-cyan); }
+        .radio-label input { margin: 0; cursor: pointer; accent-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;
@@ -326,16 +347,15 @@

    <div id="app-container">
        <div id="menu-overlay" class="view-mode glass-panel">
-            <div id="bl-profile">
+            <div id="bl-wrapper">
                <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 id="bl-info">
+                    <div id="bl-name">Loading...</div>
+                    <div class="bl-stat-compact">Global: <span id="bl-global">#--</span></div>
+                    <div class="bl-stat-compact">Local: <span id="bl-local">#--</span></div>
+                    <div class="bl-stat-compact">PP: <span id="bl-pp">-- pp</span></div>
                </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">
@@ -387,13 +407,13 @@
            <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>
+            <label>Layout (Выравнивание)</label>
+            <div class="radio-grid">
+                <label class="radio-label"><input type="radio" name="layout" value="top-left"> Top Left</label>
+                <label class="radio-label"><input type="radio" name="layout" value="top-right"> Top Right</label>
+                <label class="radio-label"><input type="radio" name="layout" value="bottom-left"> Bottom Left</label>
+                <label class="radio-label"><input type="radio" name="layout" value="bottom-right"> Bottom Right</label>
+            </div>
        </div>
        <div class="setting-row">
            <label>Scale (0.5 - 2.0)</label>
@@ -466,19 +486,25 @@
            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;
+            
+            // Устанавливаем радио-кнопку
+            const radio = document.querySelector(`input[name="layout"][value="${config.layout}"]`);
+            if(radio) radio.checked = true;
        }

        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;
            
+            // Читаем радио-кнопку
+            const checkedRadio = document.querySelector('input[name="layout"]:checked');
+            if(checkedRadio) config.layout = checkedRadio.value;
+            
            localStorage.setItem('bsCyberConfig', JSON.stringify(config));
            els.settings.classList.remove('show');
            
@@ -500,13 +526,16 @@
            els.app.style.left = isLeft ? '20px' : 'auto';
            els.app.style.right = isLeft ? 'auto' : '20px';

-            // 2. ИСПРАВЛЕНИЕ: привязка к нужной грани внутри контейнера для нижних режимов
+            // 2. ИНВЕРСИЯ ВЕРТИКАЛИ ДЛЯ BOTTOM:
+            // Если режим bottom, переворачиваем flex-поток, чтобы стеклянная панель была у края экрана
+            els.playingOverlay.style.flexDirection = isTop ? 'column' : 'column-reverse';
+            
            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. Отзеркаливание контейнеров
+            // 3. Отзеркаливание контейнеров (Left / Right)
            els.app.style.alignItems = isLeft ? 'flex-start' : 'flex-end';
            els.playingOverlay.style.alignItems = isLeft ? 'flex-start' : 'flex-end';
            
@@ -520,7 +549,12 @@
            document.getElementById('bottom-stats').style.alignItems = isLeft ? 'flex-start' : 'flex-end';
            document.querySelector('.bottom-stat-row').style.flexDirection = isLeft ? 'row' : 'row-reverse';
            
-            // 6. Направление заполнения полосок (если справа, заполняются справа налево)
+            // 6. Отзеркаливание плашки BeatLeader
+            document.getElementById('bl-wrapper').style.flexDirection = isLeft ? 'row' : 'row-reverse';
+            document.getElementById('bl-info').style.alignItems = isLeft ? 'flex-start' : 'flex-end';
+            document.getElementById('bl-info').style.textAlign = isLeft ? 'left' : 'right';
+
+            // 7. Направление заполнения прогресс-баров
            els.hpFill.style.marginLeft = isLeft ? '0' : 'auto';
            els.progFill.style.marginLeft = isLeft ? '0' : 'auto';
        }
@@ -570,38 +604,35 @@
            }
        }

-        // === ИСПРАВЛЕННЫЙ 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("Игрок не найден");
+                let originalUrl;
+                if (isNumeric) {
+                    originalUrl = `https://api.beatleader.xyz/player/${config.blId}?stats=true`;
+                } else {
+                    originalUrl = `https://api.beatleader.xyz/players?search=${encodeURIComponent(config.blId)}`;
                }
                
+                const proxiedUrl = `https://api.allorigins.win/raw?url=${encodeURIComponent(originalUrl)}`;
+                const res = await fetch(proxiedUrl, { headers: { 'Accept': 'application/json' } });
+                
+                if (!res.ok) throw new Error(`Network error: ${res.status}`);
+                
+                const json = await res.json();
+                const player = json.data ? json.data[0] : json;
+                
+                if (!player || !player.name) throw new Error("Player not found");
+                
                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`;
+                els.blGlobal.textContent = player.rank ? `#${player.rank.toLocaleString()}` : "#--";
+                els.blLocal.textContent = player.countryRank ? `#${player.countryRank.toLocaleString()} (${player.country || 'N/A'})` : "#-- (N/A)";
+                els.blPp.textContent = player.pp ? `${Math.round(player.pp).toLocaleString()}` : "--";
                
                if (player.avatar) {
                    els.blAvatar.src = player.avatar;
@@ -611,11 +642,11 @@
                }
                
                lastBlFetch = Date.now();
-                showDebug("BeatLeader updated");
+                showDebug("BeatLeader updated ✓");
            } catch (err) {
                showDebug("BL Error: " + err.message);
-                els.blName.textContent = "Error: Проверь ID/Ник";
-                console.error(err);
+                els.blName.textContent = "Error loading profile";
+                console.error("BeatLeader fetch failed:", err);
            }
        }