Question about the Client-side

[State Valentin]

So far i've understand that using player.call you can call an client-side event on a specific player but also send variables to be used on the client-side

And then for example i can use mp.browser.new to show that player an index.html with 'Welcome, you're now X years older.'

The question is: How can i use an variable let's say let Age = 20; on the index.html ?  

Another questions:

• I've seen that most people use Vue to create Interfaces, why ?
• Is it better to use mp.browser.new once and then just hide and show interfaces that are created on one page ? (SPA) An example or some hints would be great. I have some ideas now to use browser.execute to do so .. 

 

 

 

[paccoderpster]

Server-Side (js)

player.call("loadAgeBrowser", [age]);

Client-Side

You need to have a placeholder in your HTML. Like that:

Welcome, you're now <div id='age'></div> years older.

let browser = mp.browsers.new(SOME_URL);

mp.events.add('loadAgeBrowser', (age) => {
	browser.execute(`document.getElementById('age').innerHTML = ${age}`); //Call JS-Code in the Browser
});

Quote

• I've seen that most people use Vue to create Interfaces, why ?

I don't know why there are using Vue.js, but i'm using jQuery, since bootstrap is based upon that. But you should use whatever you want and fits your needs/skills the best.

Quote

Is it better to use mp.browser.new once and then just hide and show interfaces that are created on one page ?

There is no ultimate answer to this question, but in most cases, i would say no. I use multiple sites (Intercom for apartments, player stats overview, stores, ...) in a single browser, which i destroy after every use. So when i open the overview while the store is open, the store closes and the overview opens. If i would open a second browser and close the second one, i would have to check if the first is still open, because 

mp.gui.cursor.show(false, false);

would deactivate the cursor for the first browser. I don't know how well the garbage collection works in JS, so this might could slow down the client.

let browserInfo = {
    browser: null,
    active: false
};

function loadBrowser(package) {
    if (browserInfo.active)
        browserInfo.browser.destroy();
    browserInfo.browser = mp.browsers.new(package);
    browserInfo.active = true;
    mp.gui.cursor.show(true, true);
}

//Abort-Button is clicked
mp.events.add("abort", () => {
    if (browserInfo.active)
        browserInfo.browser.destroy();
    browserInfo.active = false;
    mp.gui.cursor.show(false, false);
});

 

Edited September 10, 2018 by paccoderpster

[State Valentin]

21 hours ago, paccoderpster said:

Server-Side (js)

player.call("loadAgeBrowser", [age]);

Client-Side

You need to have a placeholder in your HTML. Like that:

Welcome, you're now <div id='age'></div> years older.

let browser = mp.browsers.new(SOME_URL);

mp.events.add('loadAgeBrowser', (age) => {
	browser.execute(`document.getElementById('age').innerHTML = ${age}`); //Call JS-Code in the Browser
});

I don't know why there are using Vue.js, but i'm using jQuery, since bootstrap is based upon that. But you should use whatever you want and fits your needs/skills the best.

There is no ultimate answer to this question, but in most cases, i would say no. I use multiple sites (Intercom for apartments, player stats overview, stores, ...) in a single browser, which i destroy after every use. So when i open the overview while the store is open, the store closes and the overview opens. If i would open a second browser and close the second one, i would have to check if the first is still open, because 

mp.gui.cursor.show(false, false);

would deactivate the cursor for the first browser. I don't know how well the garbage collection works in JS, so this might could slow down the client.

let browserInfo = {
    browser: null,
    active: false
};

function loadBrowser(package) {
    if (browserInfo.active)
        browserInfo.browser.destroy();
    browserInfo.browser = mp.browsers.new(package);
    browserInfo.active = true;
    mp.gui.cursor.show(true, true);
}

//Abort-Button is clicked
mp.events.add("abort", () => {
    if (browserInfo.active)
        browserInfo.browser.destroy();
    browserInfo.active = false;
    mp.gui.cursor.show(false, false);
});

 

 

Thank you very much !!!!