Search the Community

Showing results for tags 'HTML'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • RAGE Multiplayer
    • Announcements
    • Discussion
    • Suggestions
  • Scripting
    • Scripting
    • Resources
  • Community
    • Support
    • Servers
    • Media Gallery
  • Non-English
    • Русский - Russian
    • Français - French
    • Deutsch - German
    • Espanol - Spanish
    • Română - Romanian
    • Portuguesa - Portuguese
    • Polski - Polish

Categories

  • Scripts
  • Gamemodes
  • Libraries
  • Plugins
  • Maps
  • Tools

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Facebook


Youtube


Skype


Web


VK

Found 8 results

  1. В целях изучения разбираю примеры уже готовых серверов, и появился вопрос, как лучше поступать с UI через CEF ? Использовать единый html в котором собрать все элементы интерфейса и управлять ими изнутри, те в одном html будет к примеру компонент и чата и спидометра. Или инициализировать несколько CEF, допустим в один элемент CEF закинуть chat.html, и по верх него еще один элемент с CEF только уже с spedometr.html ? В чем плюсы и минуты того и другого?
  2. Ребят, хелпаните пожалуйста. Нужно создать таблицу id|Nickname|Убийства|Смерти. Как создать событие, которое бы передавало значение в поле ''Убийства''/''Смерти''? Возможно ли упорядочить игроков в таблице по кол-ву убийств? К примеру, на первом месте игрок с самым большем кол-вом убийств, а на последнем с самым маленьким. Как передать значения ''Убийства''/''Смерти'' в MySQL базу данных? HTML таблицы: <!-- Online players --> <div id="online_players" style="display: none;"> <h1>Online players</h1> <table id="online_players_table"> <thead> <tr> <th class="id">ID</th> <th class="name">Name</th> <th class="kills" id="kills">Kills</th> <th class="death" id="death">death</th> </tr> </thead> <tbody> </tbody> </table> </div> javascript таблицы: let centered = false; // Show players online. document.addEventListener('keydown', function(e) { if ((e.key === 'z' || e.keyCode === 90) && !chatActive) { if (!centered) { $('#online_players').css('top', Math.max(0, (($(window).height() - $('#online_players').outerHeight()) / 2) + $(window).scrollTop()) + 'px'); $('#online_players').css('left', Math.max(0, (($(window).width() - $('#online_players').outerWidth()) / 2) + $(window).scrollLeft()) + 'px'); centered = true; } $('#online_players').css('display', 'block'); } }); function addPlayerInTheTable(id, name, kill, death) { let text = ` <tr id="player-${id}"> <td class="id">${id}</td> <td class="name">${name}</td> <td class="kill" id="kill">fh</td> <td class="death">${death}</td> </tr>`; $("#kill").text(`fedffdxvb`); // (${kills}).text(`1`); let formated = text.replace(/\n/g, '').replace(/"/g, '"'); $('#online_players #online_players_table tbody').append(text);
  3. Version 1.0.0

    350 downloads

    Login Window Design
  4. Проблема такова, когда игрок садится на скутер, вызывается окно аренды (|Арендовать | Отмена|), после нажатия на кнопку ''Арендовать'' у него должно списаться 100$, но проблема в том, что после того как он садится на этот же скутер еще раз, сумма снятия становится на 100$ больше. То есть 1-й раз снимает 100$, 2-й раз снимает 200$, 3-й раз снимает 300$ и т.д. Как сделать, так чтобы снималась конкретно установленная сумма (100$), и чтобы после нажатия на кнопку ''Арендовать'' при повторной посадке на арендованный скутер окно аренды не вызывалось? HTML окна аренды: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css" type="text/css"/> <title>Title</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script type="text/javascript" src="js/arenda.js"> </script> </head> <body> <div class="container" id="container"> <form> <h3>Аренда данного транспорта стоит 100$</h3> <input type="button" class="testbutton" id="rent" onclick= "mp.trigger('playerClickRent');" value="Арендовать"/> <input type="button" class="testbutton" id="otmena" name="otmena" onclick = "$('.container').hide()" value="Отмена"/> </form> </div> <script> $("#rent").click(function() { $('#container').fadeOut("slow", function() { }); }); </script> </body> </html> JavaScript, который принимает событие клика по кнопке ''Арендовать'' на Client-Side: function playerEnterVehicleHandler(vehicle, seat) { const vehicleID = vehicle.id; if (vehicleID == 9){ mp.browsers.new('package://freeroam/arenda/arenda.html'); mp.gui.cursor.visible = true; mp.events.add("playerClickRent", () => { mp.events.callRemote("rent");//отправляет данные на сервер }); }; }; mp.events.add("playerEnterVehicle", playerEnterVehicleHandler); JavaScript, который принимает событие клика по кнопке "Арендовать" на Server-Side: mp.events.add('rent', (player) => { console.log(`нажал кнопку Арендовать`); player.outputChatBox(`${player.name}"арендовал скутер"`); if (player.data.customMoney >= 100){ player.data.customMoney -= 100;} else { player.removeFromVehicle() player.outputChatBox("Недостаточно средств")}; });
  5. Проблема такова, когда игрок садится на скутер, вызывается окно аренды (|Арендовать | Отмена|), после нажатия на кнопку ''Арендовать'' у него должно списаться 100$, но проблема в том, что после того как он садится на этот же скутер еще раз, сумма снятия становится на 100$ больше. То есть 1-й раз снимает 100$, 2-й раз снимает 200$, 3-й раз снимает 300$ и т.д. Как сделать, так чтобы снималась конкретно установленная сумма (100$), и чтобы после нажатия на кнопку ''Арендовать'' при повторной посадке на арендованный скутер окно аренды не вызывалось? HTML окна аренды: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css" type="text/css"/> <title>Title</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script type="text/javascript" src="js/arenda.js"> </script> </head> <body> <div class="container" id="container"> <form> <h3>Аренда данного транспорта стоит 100$</h3> <input type="button" class="testbutton" id="rent" onclick= "mp.trigger('playerClickRent');" value="Арендовать"/> <input type="button" class="testbutton" id="otmena" name="otmena" onclick = "$('.container').hide()" value="Отмена"/> </form> </div> <script> $("#rent").click(function() { $('#container').fadeOut("slow", function() { }); }); </script> </body> </html> JavaScript, который принимает событие клика по кнопке ''Арендовать'' на Client-Side: function playerEnterVehicleHandler(vehicle, seat) { const vehicleID = vehicle.id; if (vehicleID == 9){ mp.browsers.new('package://freeroam/arenda/arenda.html'); mp.gui.cursor.visible = true; mp.events.add("playerClickRent", () => { mp.events.callRemote("rent");//отправляет данные на сервер }); }; }; mp.events.add("playerEnterVehicle", playerEnterVehicleHandler); JavaScript, который принимает событие клика по кнопке "Арендовать" на Server-Side: mp.events.add('rent', (player) => { console.log(`нажал кнопку Арендовать`); player.outputChatBox(`${player.name}"арендовал скутер"`); if (player.data.customMoney >= 100){ player.data.customMoney -= 100;} else { player.removeFromVehicle() player.outputChatBox("Недостаточно средств")}; });
  6. Один из способов работы с UI клиента, с помощью CEF(HTML), на примере модального окна со списком игроков(ник, ip, ping) Дабы не использовать хостинг, развернем веб-сервер прямо в игровом сервере. Начнём. Создаем в каталоге 'packages/keker' папку 'ui' (в ней будут лежать клиентские файлы) и файл 'web.js', и объявляем его в 'packages/keker/index.js' добавив туда строку: require('./web'); В 'web.js' вставляем этот код: const http = require('http'); const fs = require('fs'); const path = require('path'); const url = require('url'); const mimeType = { // mime типы по расширениям файлов '.ico': 'image/x-icon', '.html': 'text/html', '.js': 'text/javascript', '.json': 'application/json', '.css': 'text/css', '.png': 'image/png', '.jpg': 'image/jpeg', '.wav': 'audio/wav', '.mp3': 'audio/mpeg', '.svg': 'image/svg+xml', '.pdf': 'application/pdf', '.doc': 'application/msword', '.eot': 'appliaction/vnd.ms-fontobject', '.ttf': 'aplication/font-sfnt' }; http.createServer(function (req, res) { res.setHeader('Access-Control-Allow-Origin', '*'); // разрешаем кросс-деменые запросы let parsedUrl = url.parse(req.url); // отсекаем от url все лишнее let filePath = __dirname+'/ui' + parsedUrl.pathname; // Парсим url в путь к файлу let ext = path.extname(filePath); // получаем расширение файла if(req.url=="/api/players_list.json"){ // отдельная ссылка для генерации JSON списка игроков let pl = { online: mp.players.length, slots: mp.players.size, players: [] } mp.players.forEach(player => { pl.players.push({ name: player.name, ip: player.ip, ping: player.ping }); }); res.writeHead(200, { 'Content-Type': mimeType['.json'] }); res.end(JSON.stringify(pl), 'utf-8'); } else { fs.readFile(filePath, function(error, content) { if (error) { if(error.code == 'ENOENT'){ // если файл отсутсвует res.writeHead(404, { 'Content-Type': 'text/plain' }); res.end('404 Not Found'); } else { // другие ошибки res.writeHead(500); res.end('Error: '+error.code+' ..\n'); } } else { res.writeHead(200, { 'Content-Type': mimeType[ext] || 'text/plain' }); res.end(content, 'utf-8'); } }); } }).listen(8080); // вешаем наш веб сервер на свободный порт, у меня это 8080 Он создает веб-сервер для выдачи статики из нашей папки 'ui'. В папку 'ui' добавляем наш HTML и CSS и JS файлы, HTML и CSS комментировать не буду, тут у всех на свой вкус players_list.html: <div class="p-list"> <p>Игроков онлайн: 0/100</p> <table id="pl-table" border="0" cellpadding="5"> <tr> <th>Имя:</th> <th>IP:</th> <th>Ping:</th> </tr> <tr><td>Nick</td><td>0.0.0.0</td><td>0</td></tr> </table> </div> main.css: .p-list { cursor: none; position: absolute; top: 20%; left: 20%; width: 60%; height: 60%; background: rgba(96,125,139,0.8); text-align: center; align-content: center; color: #eee; font-size: 18px; overflow-y: scroll; border: 1px solid #eee; border-radius: 5px; display: none; } .p-list p { padding: 8px 0px; } .p-list table { width: 100%; color: #eee; } .p-list tr { text-align: center; } .p-list td { border-top: 1px solid #eee; width: 30%; } ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; } ::-webkit-scrollbar-thumb { background: #37474F; border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } Туда же добавим и JS файл который будет отвечать за функционал. JQuery у нас уже подключен, его можно спокойно использовать. main.js: const addr = "http://127.0.0.1:8080/"; // Здесь обязательно задаем адресс вашего сервера и порт на котором висит веб var pl_enable = false; // флаг проверки открыто/скрыто окно со списком игроков var css_el = document.createElement("link"); // создаем элемент подключающий css css_el.rel = "stylesheet"; css_el.href = addr+"main.css"; $("head").append(css_el);// подключаем его в head $.get( addr+"players_list.html", function( data ) { // загружаем HTML нашего модального окна $("body").append( data ); // вставляем его в body }); $("body").keydown(function( e ) { // событие нажания на кнопку if(e.which == 9){ // 9 KeyCode кнопки TAB if(pl_enable){ // если модальное окно открыто скрываем его pl_enable = false; $('.p-list').hide(); } else { pl_enable = true; $.getJSON( addr+"api/players_list.json", function( data ) { // получаем список игроков $(".p-list p").html("<b>Игроков онлайн: "+data.online+"/"+data.slots+"</b>"); // кол-во онлайна let str = "<tr><th>Ник:</th><th>IP:</th><th>Ping:</th></tr>"; for(let i = 0; i < data.players.length; i++){ str += "<tr><td>"+data.players[i].name+"</td><td>"+data.players[i].ip+"</td><td>"+data.players[i].ping+"</td>"; } $("#pl-table").html(str); // запихиваем список в модальное окно }); $('.p-list').show(); // делаем его видимым } mp.invoke("focus", pl_enable); // отключаем игровой процесс делаем видимым курсор (он лагучий и находится под меню) //курсор можно накатать свой но нам это пока не надо } }); Теперь нужно отослать наш скрипт на исполнение игроку, я это сделал в 'common.js' на событие о подключении игрока: player.outputChatBox("<script src='http://127.0.0.1:8080/main.js'></script>"); // указываем ваш адрес сервера и веб порт /*кавычки только так, снаружи двойные внутри одинарные, по другому не сработало, если у вас обьем кода больше не забывайте экранировать кавычки */ Ну вот и все, теперь при нажатии на TAB в игре, должно открыться модальное окно со списком игроков. Так же в папку 'ui' можно полностью перенести стандартное меню и изменять уже его, переход на него будет выполнятся так: player.outputChatBox("<script>document.location.href = 'http://127.0.0.1:8080/index.html';</script>"); // не забываем подставить свой адрес и порт Так же в клиентских скриптах можно использовать этот метод для отправки команд на сервер: mp.invoke("command", "команда агрумент1 агрумент2 ..."); Веб-сервер выдает большинство mime типов так что можно подключать всякие фреймворки типа Bootstrap, Angular, React и прочие плюшки.
  7. Доброго времени суток! У меня проблема, сервер не поддерживает html-коды, уже час сижу ума не приложу. Как быть? Код: Итог:
  8. HTML Урок №1 - Введение Предисловие В связи со скорым (я надеюсь) выходом версии 0.2, в которой нам обещали клиентскую часть, я решил написать несколько уроков посвященных HTML и CSS. Это мой первый урок, так скажем проба пера, сильно не серчайте. Пожалуй, приступим. Содержание: Что такое HTML? Базовая структура документа Создание вашей первой HTML страницы 1. Что такое HTML? HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML. Язык разметки использует теги для определения содержания. Например, вот так выглядит элемент параграфа: <p>Я параграф</p> Он состоит из открывающего тега <p> и закрывающего тега </p> и содержания, в данном случае он содержит текст "Я параграф". 2.Базовая структура документа Теги <html></html> - указывает программе просмотра страниц, что это HTML документ. Теги <head></head> - определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин. Теги <body></body> - определяет видимую часть документа. Базовая структура HTML документа выглядит следующим образом: <html> <head></head> <body></body> </html> 3.Создание вашей первой HTML страницы Теги <title></title> - определяет заголовок документа. Писать HTML разметку можно в любом текстовом редакторе, вы можете использовать обычный блокнот. Создадим файл, назовем его "index.html", заметьте что расширение файла .html обязательно. Далее откроем файл любым текстовым редактором, и добавим в него базовую структуру документа, которую мы рассмотрели выше. Между тегами <head></head> напишем текст "Hello World!". Также добавим теги <title></title> между открывающим и закрывающим тегами элемента head. В итоге у нас должно получиться вот так: <html> <head> <title>Заголовок</title> </head> <body> Hello World! </body> </html> Послесловие На этом введение в язык гипертекстовой разметки HTML закончено, прошу оставлять ваши отзывы, замечания и пожелания. Буду рад услышать всех. Спасибо за внимание. Для самостоятельного изучения: http://htmlacademy.ru