Скачать скрипт и ознакомиться с ним Вы можете по ссылке: Simple scoreboard
В нем мы используем CEF браузер для вывода списка игроков, перебрасываем данные между сервером, клиентом и браузером, работаем с биндами.
Видео версия разбора:
Начнем с серверной части. Для скрипта scoreboard нам нужен будет список игроков на сервере. Мы будем выводить в списке ID, имя и пинг игрока. Для этого напишем функцию которая будет формировать массив с данными игроков.
Актуальный список игроков мы будем отправлять каждому игроку на клиент
Обновлять список игроков мы будем при входе/выходе игрока с сервера, а также по таймеру (чтобы видеть актуальные значения пинга).
На этом с серверной частью у нас все готово. Перейдем к клиентской части.
Создадим html файл с таблицей client_packages/scoreboard/html/index.html. Это будет визуальная часть нашего списка игроков.
Туда же в папку html я с сайта https://purecss.io/ скачал библиотеку pure-min.css. Она позволит нам получить красиво отформатированную табличку и не морочиться сильно с оформлением.
Шаблон странички index.html будет выглядеть так:
Также в разделе <script> нам понадобиться код который позволит уже непосредственно в html страничке управлять списком игроков. Это будут две функции: 1. Очистить список - будет удалять всех игроков из списка. 2. Добавить игрока в список.
Теперь напишем клиентскую часть нашего скрипта. Нам понадобиться браузер:
По-умолчанию он скрыт. Мы будем показывать его при нажатии кнопки F3 и скрывать при отпускании этой кнопки.
И непосредственно само событие обновления списка, которое будет прилетать с сервера с актуальным списком игроков.
В нем мы используем CEF браузер для вывода списка игроков, перебрасываем данные между сервером, клиентом и браузером, работаем с биндами.
Видео версия разбора:
Начнем с серверной части. Для скрипта 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});`); // построчно добавим всех игроков
})
});