Hi, today I'm going to show you how to display HTML in-game. (CSS, JavaScript can be used too).
Let's start. Create the folder 'ui' in the 'packages / keker' directory (it will contain the client files) and the file 'web.js', and declare it in 'packages / keker / index.js' by adding the line:
First, open the index.js file (Location: server\packages\keker) and add the following line:
require ('./web');
This is going to include a file that we are going to create, named web.js (created in the root folder, where index.js is located).
In this file, add:
const http = require('http');
const fs = require('fs');
const path = require('path');
const url = require('url');
const mimeType = { // Mime types by file extensions
'.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', '*'); // Allow cross-domain requests
let parsedUrl = url.parse(req.url); // We cut off all unnecessary url
let filePath = __dirname+'/ui' + parsedUrl.pathname; // Parse the URL
let ext = path.extname(filePath); // Get the file extension
fs.readFile(filePath, function(error, content) {
if (error) {
if(error.code == 'ENOENT'){ // If there is no file
res.writeHead(404, { 'Content-Type': 'text/plain' });
res.end('404 Not Found');
}
else { // Other errors
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); // We hang our web server on a free port, I have it 8080
Now, we add an ui folder.(If you want to change its name, modify it in the web.js too!)
I will add a simple test.html page in the folder:
<div style = "background: black;">Hello RAGE MP!</div>
Now, we add a main.js file:
const addr = "http://127.0.0.1:8080/"; // Here we must specify the address of your server and the port on which the web is hanging
var pl_enable = false; // We are going to use this to check whether our HTML is displayed or not
/*
*** Use this if you want to add CSS (replace main.css with your css file) ***
var css_el = document.createElement("link");
css_el.rel = "stylesheet";
css_el.href = addr+"main.css";
$("head").append(css_el);
*/
$.get( addr+"test.html", function( data ) { // Load the HTML using AJAX
$("body").append( data ); // Add it to the body element
});
$("body").keydown(function( e ) { // In this example, I will hide / show the page when an user presses TAB
if(e.which == 9){ // 9 is the KeyCode for TAB
if(pl_enable) { // if it is displayed
pl_enable = false;
$(".myDiv").hide(); // Hide the div we created in the HTML file
} else {
pl_enable = true;
$(".myDiv").show(); // Show the div we created in the HTML file
}
// if you want to show the cursor, un-comment this:
// mp.invoke("focus", pl_enable);
}
});
Now, you just have to include the main.js. This can be achieved in Server\packages\keker\events\common.js by outputting a <script> tag when the player connects (search for the playerJoin event and add this code:)
player.outputChatBox("<script src='http://127.0.0.1:8080/main.js'></script>");
Finally, I want to thank Gross for this tutorial (from the russian section), which has provided me with much of the code I used in this tutorial. The code has been tested and it works.