Webster.

Displaying HTML

Recommended Posts

Webster.    4

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 by Webster.
  • Like 4

Share this post


Link to post
Share on other sites
Captien    29

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.

Share this post


Link to post
Share on other sites
Mcfloy    6

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 by Mcfloy

Share this post


Link to post
Share on other sites
Kudze    0

@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 by Kudze

Share this post


Link to post
Share on other sites
Armyw0w    23
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.

Share this post


Link to post
Share on other sites
Kudze    0
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.