Adding a Scroll bar for RageMP Chat

[MrPancakers]

This will add a scrollbar/chat history to your server. You can edit how much the chat history keeps but for now it's set to 30.

Download Link

Preview

Installation

Open the ragemp_scrollchat.zip and drag the contents into your client_packages folder. If you already have an index.js, copy/paste it into your current index.js file. Now you should be all ready to go.

How can I change the chat history length? 

If you want to change how many messages are stored, go to chatUI/js/main.js and you'll see history_limit with a comment next to it at the top, change that number to how many messages you'd like to be kept in chat.

 

If you have any questions about changing anything else in the chat such as font just ask and I'll do my best to assist.

[Joshua]

Awesome resource!

[ynhhoJ]

You just copy my resources and change css code...
 

 

[MrPancakers]

1 hour ago, ynhhoJ said:

You just copy my resources and change css code...
 

 

Nice try but no, I simply copied Rages chat and changed the CSS code to add a scroll bar, you did more with your chat which is not seen in this.

[Chainksain]

how can i enable chat colors in the messages? seems it doesnt recognize codes like "!{#E6E6E6}"

[MrPancakers]

29 minutes ago, Chainksain said:

how can i enable chat colors in the messages? seems it doesnt recognize codes like "!{#E6E6E6}"

I've been told in the past things like that don't work, you probably have to use HTML elements and use the style attribute to add color, otherwise, I'm not sure.

Edited September 24, 2018 by MrPancakers

[Chainksain]

I managed to solve the problem with colors in server-side using C#, some ppl ask me about this in discord, so i'm posting the solution which i used:

first of all u need to create a function for the chat, dont use NAPI.Chat.SendChatMessage cuz u need to send an html code with the color code to the client-side, like this:

public static void SendClientMessage(Client player, String color, String message)
{
	NAPI.Chat.SendChatMessageToPlayer(player, "<strong style='color:" + color + "'>" + message + "</strong>");
}

 then u need to use this function instead of NAPI.Chat.SendChatMessage

After this u need to remove the brackets and exclamtion from color definitions like this:

public const string CHAT_COLOR_INFO = "#FDFE8B";

With this, the colors should be work fine, but your server should be vulnerable to html injection, so, to solve this problem we will implement the following function in our chat function:

public static string StripHTML(string input)
{
	return Regex.Replace(input, "<.*?>", String.Empty);
}

so with this function our chat function will be protected and now should be like this:

public static void SendClientMessage(Client player, String color, String message)
{
	StripHTML(message);
	NAPI.Chat.SendChatMessageToPlayer(player, "<strong style='color:" + color + "'>" + message + "</strong>");
}

And that's all, if u want u can test with this cmd:

[Command("hi", Alias = "hello, hey, howdy")]
public void SayHi(Client player)
{
	SendClientMessage(player, CHAT_COLOR_INFO, "Hello!");
}

 

[hubba]

18 hours ago, Chainksain said:

I managed to solve the problem with colors in server-side using C#, some ppl ask me about this in discord, so i'm posting the solution which i used:

first of all u need to create a function for the chat, dont use NAPI.Chat.SendChatMessage cuz u need to send an html code with the color code to the client-side, like this:

public static void SendClientMessage(Client player, String color, String message)
{
	NAPI.Chat.SendChatMessageToPlayer(player, "<strong style='color:" + color + "'>" + message + "</strong>");
}

 then u need to use this function instead of NAPI.Chat.SendChatMessage

After this u need to remove the brackets and exclamtion from color definitions like this:

public const string CHAT_COLOR_INFO = "#FDFE8B";

With this, the colors should be work fine, but your server should be vulnerable to html injection, so, to solve this problem we will implement the following function in our chat function:

public static string StripHTML(string input)
{
	return Regex.Replace(input, "<.*?>", String.Empty);
}

so with this function our chat function will be protected and now should be like this:

public static void SendClientMessage(Client player, String color, String message)
{
	StripHTML(message);
	NAPI.Chat.SendChatMessageToPlayer(player, "<strong style='color:" + color + "'>" + message + "</strong>");
}

And that's all, if u want u can test with this cmd:

[Command("hi", Alias = "hello, hey, howdy")]
public void SayHi(Client player)
{
	SendClientMessage(player, CHAT_COLOR_INFO, "Hello!");
}

 

thanks,very useful, thankyou)

[joew]

Could you help me with an error, please?

I'm installing and i'm using Open Source Roleplay Server

But after i use the command: npm run build

 

The index.js file inside client_packages  is been replaced with original without the changes i made to load this script.
Any idea how deal with it, please?

@MrPancakers any idea, please? Still can't fix it =( ty!!!!

Thank you!!!!

Edited April 19, 2019 by joew

[MrPancakers]

On 4/17/2019 at 10:00 AM, joew said:

Could you help me with an error, please?

I'm installing and i'm using Open Source Roleplay Server

But after i use the command: npm run build

 

The index.js file inside client_packages  is been replaced with original without the changes i made to load this script.
Any idea how deal with it, please?

@MrPancakers any idea, please? Still can't fix it =( ty!!!!

Thank you!!!!

I'm not sure what this has to do with my thread?