Displaying HTML

[Webster.]

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.

Edited May 11, 2017 by Webster.

[Captien]

Thank you for your Tutorial. I learned a new thing from you today, and i wish that i could do like you in near future.

[Mcfloy]

You forgot to add a class name to your div block, and you should hide it just after getting the data from your ajax call.

Good tutorial tho

Edited May 12, 2017 by Mcfloy

[ragempdev]

@Armyw0w@Mcfloy This topic is not about JQuery. You are warned.

[Kudze]

@ragempdev If i would use my existing Apache server to store main.js and test.html files. If I'm correct this thing would still work, wouldn't it?

Edited June 18, 2017 by Kudze

[Armyw0w]

2 hours ago, Kudze said:

@ragempdev If i would use my existing Apache server to store main.js and test.html files. If I'm correct this thing would still work, wouldn't it?

it isn't necessary to be stored in apache, you can store the script in root and just load it, or import directly, without any sources.

but it's just a temporally tutorial, I am sure as the devs will make some CEF functions, which haven't any html relation with the chat.

[Kudze]

56 minutes ago, Armyw0w said:

it isn't necessary to be stored in apache, you can store the script in root and just load it, or import directly, without any sources.

but it's just a temporally tutorial, I am sure as the devs will make some CEF functions, which haven't any html relation with the chat.

Ah allright. Got ya. Thanks.