Сef "Спидометр"

[6]

Здравствуйте, сливаю вам cef спидометр! 

Автор: я

 

pawn код

Спойлер

#include <a_samp>
#include <a_http>
#include <a_players>

#define SPEEDOMETER_URL "http://localhost/samp/cef/speedometer.html"
#define UPDATE_TIME 100

enum PlayerData
{
    CEFBrowser,
    bool:InCar,
    Speed,
    Gear,
    Float:Fuel,
    SpeedTimer
}
new pData[MAX_PLAYERS][PlayerData];

// Создание CEF браузера
stock CreateSpeedometer(playerid)
{
    if(!IsPlayerConnected(playerid)) return 0;
    
    // Создаем CEF браузер (пример функции)
    pData[playerid][CEFBrowser] = cef_create_browser(
        playerid, 
        0x12345, 
        SPEEDOMETER_URL,
        true, // прозрачный фон
        false // без фокуса
    );
    
    // Прячем сначала
    cef_hide_browser(playerid, pData[playerid][CEFBrowser]);
    
    // Запускаем таймер обновления
    pData[playerid][SpeedTimer] = SetTimerEx("UpdateSpeedometer", UPDATE_TIME, true, "i", playerid);
    
    return 1;
}

// Удаление CEF браузера
stock DestroySpeedometer(playerid)
{
    if(pData[playerid][CEFBrowser])
    {
        cef_destroy_browser(playerid, pData[playerid][CEFBrowser]);
        KillTimer(pData[playerid][SpeedTimer]);
        pData[playerid][CEFBrowser] = 0;
    }
}

// Обновление данных
forward UpdateSpeedometer(playerid);
public UpdateSpeedometer(playerid)
{
    if(!IsPlayerConnected(playerid)) return 0;
    
    new vehicleid = GetPlayerVehicleID(playerid);
    
    if(vehicleid && GetPlayerState(playerid) == PLAYER_STATE_DRIVER)
    {
        if(!pData[playerid][InCar])
        {
            pData[playerid][InCar] = true;
            cef_show_browser(playerid, pData[playerid][CEFBrowser]);
        }
        
        // Скорость
        new Float:vel[3];
        GetVehicleVelocity(vehicleid, vel[0], vel[1], vel[2]);
        pData[playerid][Speed] = floatround(floatsqroot(vel[0]*vel[0] + vel[1]*vel[1] + vel[2]*vel[2]) * 180.0);
        
        // Передача (примерно)
        if(pData[playerid][Speed] < 1) pData[playerid][Gear] = 0; // N
        else if(pData[playerid][Speed] < 30) pData[playerid][Gear] = 1;
        else if(pData[playerid][Speed] < 60) pData[playerid][Gear] = 2;
        else if(pData[playerid][Speed] < 90) pData[playerid][Gear] = 3;
        else if(pData[playerid][Speed] < 120) pData[playerid][Gear] = 4;
        else if(pData[playerid][Speed] < 150) pData[playerid][Gear] = 5;
        else pData[playerid][Gear] = 6;
        
        // Топливо (пример)
        pData[playerid][Fuel] -= 0.01;
        if(pData[playerid][Fuel] < 0) pData[playerid][Fuel] = 100.0;
        
        // Отправляем данные в CEF
        new data[256];
        format(data, sizeof(data), 
            "samp:updateData({speed: %d, gear: '%s', fuel: %.1f})",
            pData[playerid][Speed],
            pData[playerid][Gear] == 0 ? "N" : (pData[playerid][Gear] == 1 ? "1" : 
            pData[playerid][Gear] == 2 ? "2" : pData[playerid][Gear] == 3 ? "3" : 
            pData[playerid][Gear] == 4 ? "4" : pData[playerid][Gear] == 5 ? "5" : "6"),
            pData[playerid][Fuel]
        );
        
        cef_execute_js(playerid, pData[playerid][CEFBrowser], data);
    }
    else
    {
        if(pData[playerid][InCar])
        {
            pData[playerid][InCar] = false;
            cef_hide_browser(playerid, pData[playerid][CEFBrowser]);
        }
    }
    return 1;
}

// При подключении игрока
public OnPlayerConnect(playerid)
{
    CreateSpeedometer(playerid);
    return 1;
}

// При отключении
public OnPlayerDisconnect(playerid, reason)
{
    DestroySpeedometer(playerid);
    return 1;
}

// Управление поворотниками
public OnPlayerKeyStateChange(playerid, newkeys, oldkeys)
{
    if(!pData[playerid][InCar]) return 1;
    
    new left = 0, right = 0;
    
    if(newkeys & KEY_SUBMISSION) left = 1; // Левая стрелка
    if(newkeys & KEY_CROUCH) right = 1;    // Правая стрелка
    
    new js[128];
    format(js, sizeof(js), "samp:updateIndicators({left: %d, right: %d})", left, right);
    cef_execute_js(playerid, pData[playerid][CEFBrowser], js);
    
    return 1;
}

CEF. Создайте текстовый файл с любым названием, но добавьте расширение .html. Затем вставьте в него код, который приведен ниже.

Спойлер

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SAMP CEF Speedometer</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }

        body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background: transparent;
            font-family: 'Segoe UI', 'Roboto', sans-serif;
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
        }

        /* Основной контейнер спидометра */
        .speedo-container {
            position: relative;
            width: 380px;
            height: 200px;
            margin: 0 20px 20px 0;
            background: rgba(10, 10, 15, 0.92);
            backdrop-filter: blur(10px);
            border-radius: 25px;
            border: 1px solid rgba(0, 255, 255, 0.4);
            box-shadow: 
                0 20px 40px rgba(0, 0, 0, 0.6),
                0 0 30px rgba(0, 255, 255, 0.3),
                inset 0 0 30px rgba(0, 255, 255, 0.1);
            overflow: hidden;
            transform: translateZ(0);
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Анимированный фон */
        .speedo-container::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at 30% 50%, rgba(0, 255, 255, 0.1) 0%, transparent 50%);
            animation: rotate 10s linear infinite;
            z-index: 0;
        }

        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* Верхняя панель */
        .top-bar {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 15px;
            background: rgba(0, 255, 255, 0.1);
            border-bottom: 1px solid rgba(0, 255, 255, 0.3);
            z-index: 2;
        }

        .indicators {
            display: flex;
            gap: 15px;
        }

        .indicator {
            font-size: 22px;
            opacity: 0.2;
            transition: all 0.2s ease;
            filter: drop-shadow(0 0 5px currentColor);
        }

        .indicator.active {
            opacity: 1;
        }

        #left-indicator.active {
            color: #4cff4c;
            animation: pulseLeft 0.5s infinite;
        }

        #right-indicator.active {
            color: #4cff4c;
            animation: pulseRight 0.5s infinite;
        }

        #highbeam.active {
            color: #00a2ff;
            animation: pulse 1s infinite;
        }

        #engine-icon.active {
            color: #ffaa00;
            animation: rotate 3s linear infinite;
        }

        @keyframes pulseLeft {
            0%, 100% { transform: translateX(0); opacity: 1; }
            50% { transform: translateX(-3px); opacity: 0.8; }
        }

        @keyframes pulseRight {
            0%, 100% { transform: translateX(0); opacity: 1; }
            50% { transform: translateX(3px); opacity: 0.8; }
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .warnings {
            display: flex;
            gap: 10px;
            font-size: 11px;
            font-weight: bold;
            text-transform: uppercase;
        }

        .warning {
            display: none;
            color: #ff4444;
            text-shadow: 0 0 10px #ff4444;
            animation: blink 1s infinite;
        }

        .warning.active {
            display: block;
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }

        /* Основная часть */
        .main-panel {
            position: relative;
            display: flex;
            align-items: center;
            padding: 10px 20px;
            z-index: 2;
        }

        .speed-section {
            flex: 1;
            text-align: center;
        }

        .speed-value {
            font-size: 82px;
            font-weight: 900;
            background: linear-gradient(135deg, #fff, #00ffff, #0088ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1;
            text-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
            letter-spacing: 2px;
        }

        .speed-unit {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.5);
            letter-spacing: 3px;
            margin-top: -5px;
        }

        .gear-section {
            text-align: center;
            min-width: 80px;
        }

        .gear-label {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.4);
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .gear-value {
            font-size: 48px;
            font-weight: 800;
            color: #00ffff;
            text-shadow: 0 0 20px #00ffff;
            line-height: 1;
            margin-top: -5px;
        }

        /* Нижняя панель */
        .bottom-panel {
            position: relative;
            padding: 0 20px 15px 20px;
            z-index: 2;
        }

        .progress-item {
            margin-bottom: 8px;
        }

        .progress-header {
            display: flex;
            justify-content: space-between;
            font-size: 10px;
            color: rgba(255, 255, 255, 0.5);
            margin-bottom: 3px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .progress-bar {
            height: 8px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            overflow: hidden;
            position: relative;
        }

        .progress-fill {
            height: 100%;
            width: 0%;
            border-radius: 4px;
            transition: width 0.1s linear;
            position: relative;
        }

        .progress-fill::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
            animation: shine 2s infinite;
        }

        @keyframes shine {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        #rpm-fill {
            background: linear-gradient(90deg, #4cff4c, #ffaa00, #ff4444);
        }

        #fuel-fill {
            background: linear-gradient(90deg, #00a2ff, #00ffff);
        }

        /* Нижний ряд */
        .info-row {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            font-size: 11px;
            color: rgba(255, 255, 255, 0.4);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .info-item {
            display: flex;
            align-items: center;
            gap: 3px;
        }

        .info-value {
            color: #00ffff;
            font-weight: bold;
            text-shadow: 0 0 10px #00ffff;
        }

        #nitro.active {
            color: #00a2ff;
            animation: nitroPulse 0.3s infinite;
        }

        @keyframes nitroPulse {
            0%, 100% { opacity: 1; text-shadow: 0 0 20px #00a2ff; }
            50% { opacity: 0.5; text-shadow: 0 0 40px #00a2ff; }
        }

        /* Декоративный элемент */
        .glow-ring {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 25px;
            box-shadow: inset 0 0 30px rgba(0, 255, 255, 0.2);
            pointer-events: none;
            z-index: 3;
        }

        /* Иконки */
        .material-icons {
            font-size: 16px;
            margin-right: 2px;
        }
    </style>
</head>
<body>
    <div class="speedo-container" id="speedometer">
        <!-- Декоративное кольцо -->
        <div class="glow-ring"></div>
        
        <!-- Верхняя панель -->
        <div class="top-bar">
            <div class="indicators">
                <span class="indicator" id="left-indicator">←</span>
                <span class="indicator" id="right-indicator">→</span>
                <span class="indicator" id="highbeam">⚡</span>
                <span class="indicator" id="engine-icon">⚙️</span>
            </div>
            <div class="warnings">
                <span class="warning" id="low-fuel-warning">⛽ FUEL LOW</span>
                <span class="warning" id="temp-warning">🌡️ OVERHEAT</span>
                <span class="warning" id="check-warning">⚠ CHECK</span>
            </div>
        </div>

        <!-- Основная часть -->
        <div class="main-panel">
            <div class="speed-section">
                <div class="speed-value" id="speed">0</div>
                <div class="speed-unit">KM/H</div>
            </div>
            <div class="gear-section">
                <div class="gear-label">GEAR</div>
                <div class="gear-value" id="gear">N</div>
            </div>
        </div>

        <!-- Нижняя панель -->
        <div class="bottom-panel">
            <div class="progress-item">
                <div class="progress-header">
                    <span>RPM</span>
                    <span id="rpm-text">0%</span>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" id="rpm-fill"></div>
                </div>
            </div>
            
            <div class="progress-item">
                <div class="progress-header">
                    <span>FUEL</span>
                    <span id="fuel-text">100%</span>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" id="fuel-fill"></div>
                </div>
            </div>
            
            <div class="info-row">
                <div class="info-item">
                    <span>🌡️</span>
                    <span class="info-value" id="temp">90°</span>
                </div>
                <div class="info-item">
                    <span>⏱️</span>
                    <span class="info-value" id="trip">0.0</span>
                    <span>KM</span>
                </div>
                <div class="info-item">
                    <span id="nitro">⚡ NITRO</span>
                </div>
            </div>
        </div>
    </div>

    <script>
        class Speedometer {
            constructor() {
                this.speed = 0;
                this.gear = 'N';
                this.rpm = 0;
                this.fuel = 100;
                this.temp = 90;
                this.trip = 0;
                this.leftIndicator = false;
                this.rightIndicator = false;
                this.highbeam = false;
                this.engineOn = false;
                this.nitro = false;
                
                this.init();
            }

            init() {
                // Слушаем сообщения от SAMP
                window.addEventListener('message', (event) => {
                    if (event.data && event.data.type === 'samp') {
                        this.updateFromGame(event.data);
                    }
                });

                // Функции для вызова из PAWN
                window.samp = {
                    updateData: (data) => this.updateFromGame(data),
                    updateIndicators: (data) => this.updateIndicators(data)
                };

                // Тестовые данные (удалить в продакшене)
                this.startTest();
            }

            updateFromGame(data) {
                if (data.speed !== undefined) {
                    this.speed = Math.min(360, Math.max(0, Math.floor(data.speed)));
                    document.getElementById('speed').textContent = this.speed;
                    
                    // Меняем цвет скорости в зависимости от скорости
                    let color;
                    if (this.speed > 200) color = '#ff4444';
                    else if (this.speed > 150) color = '#ffaa00';
                    else color = '#00ffff';
                    
                    document.getElementById('speed').style.background = 
                        `linear-gradient(135deg, #fff, ${color})`;
                    document.getElementById('speed').style.webkitBackgroundClip = 'text';
                }

                if (data.gear !== undefined) {
                    const gears = ['R', 'N', '1', '2', '3', '4', '5', '6'];
                    this.gear = gears[data.gear] || 'N';
                    document.getElementById('gear').textContent = this.gear;
                }

                if (data.rpm !== undefined) {
                    this.rpm = Math.min(100, Math.max(0, data.rpm));
                    document.getElementById('rpm-fill').style.width = this.rpm + '%';
                    document.getElementById('rpm-text').textContent = this.rpm + '%';
                }

                if (data.fuel !== undefined) {
                    this.fuel = Math.min(100, Math.max(0, data.fuel));
                    document.getElementById('fuel-fill').style.width = this.fuel + '%';
                    document.getElementById('fuel-text').textContent = this.fuel + '%';
                    
                    // Предупреждение о низком топливе
                    const warning = document.getElementById('low-fuel-warning');
                    if (this.fuel < 15) {
                        warning.classList.add('active');
                        document.getElementById('fuel-fill').style.background = 
                            'linear-gradient(90deg, #ff4444, #ff8800)';
                    } else {
                        warning.classList.remove('active');
                        document.getElementById('fuel-fill').style.background = 
                            'linear-gradient(90deg, #00a2ff, #00ffff)';
                    }
                }

                if (data.temp !== undefined) {
                    this.temp = data.temp;
                    document.getElementById('temp').textContent = this.temp + '°';
                    
                    const warning = document.getElementById('temp-warning');
                    if (this.temp > 110) {
                        warning.classList.add('active');
                    } else {
                        warning.classList.remove('active');
                    }
                }

                if (data.trip !== undefined) {
                    this.trip = data.trip;
                    document.getElementById('trip').textContent = this.trip.toFixed(1);
                }

                if (data.engine !== undefined) {
                    this.engineOn = data.engine;
                    const engineIcon = document.getElementById('engine-icon');
                    if (this.engineOn) {
                        engineIcon.classList.add('active');
                    } else {
                        engineIcon.classList.remove('active');
                    }
                }

                if (data.nitro !== undefined) {
                    this.nitro = data.nitro;
                    const nitroElement = document.getElementById('nitro');
                    if (this.nitro) {
                        nitroElement.classList.add('active');
                    } else {
                        nitroElement.classList.remove('active');
                    }
                }

                // Обновляем индикаторы
                if (data.left !== undefined) {
                    this.leftIndicator = data.left;
                    this.updateIndicators();
                }
                if (data.right !== undefined) {
                    this.rightIndicator = data.right;
                    this.updateIndicators();
                }
                if (data.highbeam !== undefined) {
                    this.highbeam = data.highbeam;
                    this.updateIndicators();
                }
            }

            updateIndicators() {
                const left = document.getElementById('left-indicator');
                const right = document.getElementById('right-indicator');
                const highbeam = document.getElementById('highbeam');

                left.classList.toggle('active', this.leftIndicator);
                right.classList.toggle('active', this.rightIndicator);
                highbeam.classList.toggle('active', this.highbeam);
            }

            // Тестовые данные (удалить)
            startTest() {
                setInterval(() => {
                    this.updateFromGame({
                        speed: Math.floor(Math.random() * 240),
                        rpm: Math.floor(Math.random() * 100),
                        fuel: Math.max(0, this.fuel - 0.5),
                        temp: 70 + Math.floor(Math.random() * 40),
                        trip: this.trip + 0.1,
                        engine: true,
                        nitro: Math.random() > 0.7,
                        left: Math.random() > 0.7,
                        right: Math.random() > 0.7,
                        highbeam: Math.random() > 0.8
                    });
                }, 100);
            }
        }

        // Запуск
        document.addEventListener('DOMContentLoaded', () => {
            new Speedometer();
            
            // Показываем спидометр
            document.getElementById('speedometer').style.display = 'block';
        });
    </script>
</body>
</html>

отдельно индикаторы

cef_execute_js(playerid, browser, "samp.updateIndicators({left: 0, right: 1, highbeam: 0})");

cef_execute_js(playerid, browser, "samp.updateIndicators({left: 0, right: 1, highbeam: 0})");