Разбор кода скрипта Simple Scoreboard

Скачать скрипт и ознакомиться с ним Вы можете по ссылке: Simple scoreboard
В нем мы используем CEF браузер для вывода списка игроков, перебрасываем данные между сервером, клиентом и браузером, работаем с биндами.

1604323777829.png
Видео версия разбора:

Начнем с серверной части. Для скрипта scoreboard нам нужен будет список игроков на сервере. Мы будем выводить в списке ID, имя и пинг игрока. Для этого напишем функцию которая будет формировать массив с данными игроков.
JavaScript:
function getScoreboardList(){
    let list = new Array();

    mp.players.forEach((player) => {
            list.push({id: player.id, name: player.name, ping: player.ping});
    });

    return list;
}

Актуальный список игроков мы будем отправлять каждому игроку на клиент
JavaScript:
function updateScoreboard(){
    mp.players.call("scoreboardUpdate", [ getScoreboardList() ] );
}

Обновлять список игроков мы будем при входе/выходе игрока с сервера, а также по таймеру (чтобы видеть актуальные значения пинга).
JavaScript:
mp.events.add('playerJoin', () => {
    updateScoreboard();
});

mp.events.add("playerQuit", () => {
    updateScoreboard();
});

setInterval(() => updateScoreboard(), 3000);


На этом с серверной частью у нас все готово. Перейдем к клиентской части.

Создадим html файл с таблицей client_packages/scoreboard/html/index.html. Это будет визуальная часть нашего списка игроков.
Туда же в папку html я с сайта https://purecss.io/ скачал библиотеку pure-min.css. Она позволит нам получить красиво отформатированную табличку и не морочиться сильно с оформлением.

Шаблон странички index.html будет выглядеть так:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="package://scoreboard/html/pure-min.css"> <!-- https://purecss.io/ -->
    <style>
        .scoreboard-table{
            width: auto;
            height: 80%;
            margin: 10% auto 0;
            background-color: white;
        }
    </style>
</head>
<body>
    <table class="scoreboard-table pure-table pure-table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th>Имя</th>
                <th>Пинг</th>
            </tr>
        </thead>
        <tbody id="scoreboard-body"></tbody>
    </table>

<script>
    // код для обновления списка игроков в браузере
</script>
</body>
</html>


Также в разделе <script> нам понадобиться код который позволит уже непосредственно в html страничке управлять списком игроков. Это будут две функции: 1. Очистить список - будет удалять всех игроков из списка. 2. Добавить игрока в список.
HTML:
<script>
    function listClear(){
        document.getElementById('scoreboard-body').innerHTML = '';
    }

    function listAddPlayer(id, name, ping){
        document.getElementById('scoreboard-body').innerHTML+= `<tr><td>${id}</td><td>${name}</td><td>${ping}</td></tr>`;
    }
</script>

Теперь напишем клиентскую часть нашего скрипта. Нам понадобиться браузер:
JavaScript:
let browser = mp.browsers.new('package://scoreboard/html/index.html');
browser.active = false;

По-умолчанию он скрыт. Мы будем показывать его при нажатии кнопки F3 и скрывать при отпускании этой кнопки.
JavaScript:
const KEY_CODE = 0x72; // F3

mp.keys.bind(KEY_CODE, true, () => {
    browser.active = true;
});

mp.keys.bind(KEY_CODE, false, () => {
    browser.active = false;
});

И непосредственно само событие обновления списка, которое будет прилетать с сервера с актуальным списком игроков.
JavaScript:
mp.events.add('scoreboardUpdate', (players) => {
    browser.execute(`listClear();`); // сначало очистим таблицу от всех записей
    players.forEach(function(player) {
        browser.execute(`listAddPlayer(${player.id}, \'${player.name}\', ${player.ping});`); // построчно добавим всех игроков
    })
});
 

test

Junior Developer
Спасибо! Как всегда все понятно) Я понимаю, что наглеть не нужно) Но если будет возможность сделайте пожалуйста урок про создание игрового персонажа вместе с регистрацией ( выбор ему там внешности игровой ) :D. Просто такого урока я нигде не нашел)
 

Lev Angel

Developer
Команда форума
@test в таком уроке будет супер много кода. Получится прям основа для РП мода😄
 
  • Like
Реакции: test

Lev Angel

Developer
Команда форума
У меня в планах есть нечто подобное. Но не в виде урока, а просто как open source мод.
 

Lev Angel

Developer
Команда форума
@test а как лучше воспринимается:
1. Текстом
2. В формате видео где по ходу пишем и объясняем (как работа дальнобойщика)
3. В формате видео где скрипт уже написан и просто делаем разбор
 

test

Junior Developer
@test а как лучше воспринимается:
1. Текстом
2. В формате видео где по ходу пишем и объясняем (как работа дальнобойщика)
3. В формате видео где скрипт уже написан и просто делаем разбор
Когда уже написан и просто разбираем) Так будет лучше, а то тебе на каждом моменте при написании кода останавливаться будет неудобно думаю)
 

Lev Angel

Developer
Команда форума
Ну да, мне конечно так проще. Сильно легче записать одним куском и выложить без подрезок и монтажа уже по готовому.
Мне хочется делать полезный контент для людей. Я учусь по немного монтажу и вообще делать скринкасты, поэтому сложности меня не пугают:) Просто пока еще ищу свой формат.
 
  • Like
Реакции: test

SlowSuicide

Middle Developer
Ну да, мне конечно так проще. Сильно легче записать одним куском и выложить без подрезок и монтажа уже по готовому.
Мне хочется делать полезный контент для людей. Я учусь по немного монтажу и вообще делать скринкасты, поэтому сложности меня не пугают:) Просто пока еще ищу свой формат.
С JS попроще чем с C# (в плане передачи объекта с клиента в CEF). А как передать список с клиента C# на CEF?
 
Яндекс.Метрика
Верх