New to JS and making Plugins

[Aeon]

I've not have much experience with Javascript before, despite efforts to acquire learning material. I'm trying to create a plugin that allows a staff member to apply 6 unique number stats to a member, then have them displayed in their mini profile along with the modifier number from the stat. (Think like D&D's stat and stat modifier system)

I have an auto form set up to add members to the list, and separate fields to add the values of their 6 stats. My issue comes with actually trying to set up the JS for the plugin. If anyone could give me a good idea of a base code I'd need to work from for this to work I'm be very grateful.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Mar 29, 2015 11:06:51 GMT -8 Aeon said:

I've not have much experience with Javascript before, despite efforts to acquire learning material. I'm trying to create a plugin that allows a staff member to apply 6 unique number stats to a member, then have them displayed in their mini profile along with the modifier number from the stat. (Think like D&D's stat and stat modifier system)

I have an auto form set up to add members to the list, and separate fields to add the values of their 6 stats. My issue comes with actually trying to set up the JS for the plugin. If anyone could give me a good idea of a base code I'd need to work from for this to work I'm be very grateful.

All your variables will be on the right side. I'm glad to hear there is a coder in our ranks. 
The best learning material is something that works that you can play around with. 
I go to stackoverflow to look up questions on javascript code most of the time. 
www.proboards.com/developer/js
This is the api of special proboards like functions.
You will be working with the pb.data('user') variable a lot.
There's not much documentation on it.

You will probably use a lot of jquery to make things easier(not required)

proboards.data('user')

has some useful information about the current user such as
function : example
"username":admin
"is_staff":1 (tells if user is staff with value 1)
"id":1(id number)
group_ids":[1](array with group numbers)
"groups":{"1":"Administrator"}(object with group number and group name)

You can use the plugin Yootil to easily create a profile tab if you need one (if you don't want them to go into the admin area to add values which would also require a key (not recommended) 

So you would need to pick a place in the miniprofile like
$('div.mini-profile').find('div.info').append('Stat 1:'+pb.plugin.blah.autoform[the-users-data-in-array].stat1)

$('div.mini-profile').find('div.info').append('Stat 2:'+pb.plugin.blah.autoform[the-users-data-in-array].stat2)

And so on and so forth

[Aeon]

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓
If the stats are displayed in the mini profile won't it need a key to function at all? I know the monetary system requires the use of a super key and it can display on the miniprofile and the full profile. Or were you just meaning it'd require an additional key to have it editable in the admin panel?

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Mar 29, 2015 18:36:25 GMT -8 Aeon said:

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓
If the stats are displayed in the mini profile won't it need a key to function at all? I know the monetary system requires the use of a super key and it can display on the miniprofile and the full profile. Or were you just meaning it'd require an additional key to have it editable in the admin panel?

If you set everything in the admin panel, you don't need a key. If you set it somewhere else, you need a key.

[Aeon]

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓
Alright, thanks for clearing that up. Another quick question, there are a lot of mods that either require a certain line of html to be shown, or have the option of a custom location for the information with a line of html. All the ones I've seen are div or span tags with a class, and I'm wondering how you'd get that class set up to call the entirety of information to be displayed.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Mar 29, 2015 22:28:26 GMT -8 Aeon said:

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓
Alright, thanks for clearing that up. Another quick question, there are a lot of mods that either require a certain line of html to be shown, or have the option of a custom location for the information with a line of html. All the ones I've seen are div or span tags with a class, and I'm wondering how you'd get that class set up to call the entirety of information to be displayed.

The code I demonstrated puts it in the miniprofile at the bottom of the info class.
If you want it at a customizable location like some other plugins you would define your own class id.
This would be unique and is something that would not conflict with other plugins.
An Example would be: aeonstats
Making it where <div id="aeonstats"></div> or <span id="aeonstats"></span> will show your plugin data when the "administrators" add it to there forum.
The way you would put your information in it would be by running a code in the javascript box portion under build plugin.
This code would look like


$( document ).ready(function() {
   $('#aeonstats').html('All of the data you want to show');
});
Alternate codes for the middle could include a variable.
$('#aeonstats').html(global-variable-with-a-unique-name+'Text after your variable:<br>'+anothervariable)
That way you can combine information and html tags.

[Aeon]

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓
Alright, it's displaying now, but there's some error somewhere in the code because all my stat values are returning as 'undefined'. I'm going to post the code here, if you could take a look at point out where I'm making some kind of error would be great. (If this were C# I'd know what to do, but my high school programming classes never covered Javascript)

var userMagic = {
userName: pb.plugin.get('magic_stats').settings.member_stats.name,
statMan: pb.plugin.get('magic_stats').settings.member_stats.mana,
statIng: pb.plugin.get('magic_stats').settings.member_stats.ingenuity,
statDex: pb.plugin.get('magic_stats').settings.member_stats.dexterity,
statFoc: pb.plugin.get('magic_stats').settings.member_stats.focus,
statKno: pb.plugin.get('magic_stats').settings.member_stats.knowledge,
statEnd: pb.plugin.get('magic_stats').settings.member_stats.endurance
};

var statModif = [ -6, -5, -5, -4, -4, -3, -3, -2, -2, -1, -1, 0, 0, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17 ];

var manMod = statModif[userMagic.statMan];
var ingMod = statModif[userMagic.statIng];
var dexMod = statModif[userMagic.statDex];
var focMod = statModif[userMagic.statFoc];
var knoMod = statModif[userMagic.statKno];
var endMod = statModif[userMagic.statEnd];

var statMan, statIng, statDex, statFoc, statKno, statEnd;

if (userMagic.userName == proboards.data('user').username) {
statMan = userMagic.statMan + " [" + manMod + "]";
statIng = userMagic.statIng + " [" + ingMod + "]";
statDex = userMagic.statDex + " [" + dexMod + "]";
statFoc = userMagic.statFoc + " [" + focMod + "]";
statKno = userMagic.statKno + " [" + knoMod + "]";
statEnd = userMagic.statEnd + " [" + endMod + "]";
}

$(document).ready(function() {
$('#magicStats').html('<table><tr><td>MAN</td><td>' + statMan + '</td><td>FOC</td><td>' + statFoc + '</td></tr><tr><td>ING</td><td>' + statIng + '</td><td>KNO</td><td>' + statKno + '</td></tr><tr><td>DEX</td><td>' + statDex + '</td><td>END</td><td>' + statEnd + '</td></tr></table>');
});

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Mar 30, 2015 9:42:28 GMT -8 Aeon said:

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓
Alright, it's displaying now, but there's some error somewhere in the code because all my stat values are returning as 'undefined'. I'm going to post the code here, if you could take a look at point out where I'm making some kind of error would be great. (If this were C# I'd know what to do, but my high school programming classes never covered Javascript)

var userMagic = {
userName: pb.plugin.get('magic_stats').settings.member_stats.name,
statMan: pb.plugin.get('magic_stats').settings.member_stats.mana,
statIng: pb.plugin.get('magic_stats').settings.member_stats.ingenuity,
statDex: pb.plugin.get('magic_stats').settings.member_stats.dexterity,
statFoc: pb.plugin.get('magic_stats').settings.member_stats.focus,
statKno: pb.plugin.get('magic_stats').settings.member_stats.knowledge,
statEnd: pb.plugin.get('magic_stats').settings.member_stats.endurance
};

var statModif = [ -6, -5, -5, -4, -4, -3, -3, -2, -2, -1, -1, 0, 0, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17 ];

var manMod = statModif[userMagic.statMan];
var ingMod = statModif[userMagic.statIng];
var dexMod = statModif[userMagic.statDex];
var focMod = statModif[userMagic.statFoc];
var knoMod = statModif[userMagic.statKno];
var endMod = statModif[userMagic.statEnd];

var statMan, statIng, statDex, statFoc, statKno, statEnd;

if (userMagic.userName == proboards.data('user').username) {
statMan = userMagic.statMan + " [" + manMod + "]";
statIng = userMagic.statIng + " [" + ingMod + "]";
statDex = userMagic.statDex + " [" + dexMod + "]";
statFoc = userMagic.statFoc + " [" + focMod + "]";
statKno = userMagic.statKno + " [" + knoMod + "]";
statEnd = userMagic.statEnd + " [" + endMod + "]";
}

$(document).ready(function() {
$('#magicStats').html('<table><tr><td>MAN</td><td>' + statMan + '</td><td>FOC</td><td>' + statFoc + '</td></tr><tr><td>ING</td><td>' + statIng + '</td><td>KNO</td><td>' + statKno + '</td></tr><tr><td>DEX</td><td>' + statDex + '</td><td>END</td><td>' + statEnd + '</td></tr></table>');
});

It's because the autoform is an object holding an array of objects.

userName: pb.plugin.get('magic_stats').settings.member_stats.name,

statMan: pb.plugin.get('magic_stats').settings.member_stats.mana,

statIng: pb.plugin.get('magic_stats').settings.member_stats.ingenuity,

statDex: pb.plugin.get('magic_stats').settings.member_stats.dexterity,

statFoc: pb.plugin.get('magic_stats').settings.member_stats.focus,

statKno: pb.plugin.get('magic_stats').settings.member_stats.knowledge,

statEnd: pb.plugin.get('magic_stats').settings.member_stats.endurance

will need to be changed.


var magicstats = pb.plugin.get('magic_stats').settings.member_stats
var userMagic = {}
for(a=0;a<magicstats.length;a++)
{
if(pb.data('user').username==magicstats[a].name)
{
userMagic = {

userName: magicstats[a].name,

statMan: magicstats[a].mana,

statIng: magicstats[a].ingenuity,

statDex: magicstats[a].dexterity,

statFoc: magicstats[a].focus,

statKno: magicstats[a].knowledge,

statEnd: magicstats[a].endurance

};
}
}That will effectively assign your data based on the username of the current user.
This is NOT the display name. The display name can be changed. 
Like if you view your profile it should say  Aeon (admin)
admin is your username. Most people will have the same display name as username though.

[Aeon]

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓
The autoform is set up with a member search to get the name object. Does that automatically get the username or does it go by display name? (It shows display name in the list, but in the add members dialog is shows the username in parenthesis)

Also, I changed the userMagic array, but it's still coming back with "undefined". I'm not sure if this is due to the username thing or not (since I'm testing it with my admin account, but the display name is Aeon).

(Sorry if all these questions seem annoying, I'm just really confused by the differences between Javascript and C# on top of proboards API)

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Mar 30, 2015 18:04:42 GMT -8 Aeon said:

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓
The autoform is set up with a member search to get the name object. Does that automatically get the username or does it go by display name? (It shows display name in the list, but in the add members dialog is shows the username in parenthesis)

Also, I changed the userMagic array, but it's still coming back with "undefined". I'm not sure if this is due to the username thing or not (since I'm testing it with my admin account, but the display name is Aeon).

(Sorry if all these questions seem annoying, I'm just really confused by the differences between Javascript and C# on top of proboards API)

You almost answered your own question. It searches by both. But the funny thing...The user member search dialog actually returns the id of the user. It doesn't return the name or the display name. 
You would have to check it against the pb.data('user').id in that case.
(Which I had never used the member search until now to answer this question)

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Mar 30, 2015 18:04:42 GMT -8 Aeon said:

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓
The autoform is set up with a member search to get the name object. Does that automatically get the username or does it go by display name? (It shows display name in the list, but in the add members dialog is shows the username in parenthesis)

Also, I changed the userMagic array, but it's still coming back with "undefined". I'm not sure if this is due to the username thing or not (since I'm testing it with my admin account, but the display name is Aeon).

(Sorry if all these questions seem annoying, I'm just really confused by the differences between Javascript and C# on top of proboards API)

So you are actually going to parse it against the id
var magicstats = pb.plugin.get('magic_stats').settings.member_stats
var userMagic = {}
for(a=0;a<magicstats.length;a++)
{
if(pb.data('user').id==parseInt(magicstats[a].name))
{
userMagic = {
userName: magicstats[a].name,
statMan: magicstats[a].mana,
statIng: magicstats[a].ingenuity,
statDex: magicstats[a].dexterity,
statFoc: magicstats[a].focus,
statKno: magicstats[a].knowledge,
statEnd: magicstats[a].endurance
};
}
}
PS I love C#. I've made things in C# before. Coming from that experience, jquery library for javascript is as easy as c#

You will see that all I did was change the line to pb.data('user').id==parseInt(magicstats[a].name)
This will compare both variables as numbers that should be equal to each other

[Aeon]

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓
Thank you so much for all your help with my first foray into Javascript! The code is working, displaying the stats and the modifier numbers properly (once I removed that extra if statement toward the end of the full code).

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Mar 30, 2015 18:33:27 GMT -8 Aeon said:

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓
Thank you so much for all your help with my first foray into Javascript! The code is working, displaying the stats and the modifier numbers properly (once I removed that extra if statement toward the end of the full code).

can I look over your completed code that is working for potential errors in the future?

[Aeon]

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓
Of course

var magicstats = pb.plugin.get('magic_stats').settings.member_stats
var userMagic = {}
for(a=0;a<magicstats.length;a++) {
if(pb.data('user').id==parseInt(magicstats[a].name)) {
userMagic = {
userName: magicstats[a].name,
statMan: magicstats[a].mana,
statIng: magicstats[a].ingenuity,
statDex: magicstats[a].dexterity,
statFoc: magicstats[a].focus,
statKno: magicstats[a].knowledge,
statEnd: magicstats[a].endurance
};
}
}

var statModif = [ '-6', '-5', '-5', '-4', '-4', '-3', '-3', '-2', '-2', '-1', '-1', ' 0', ' 0', '+1', '+1', '+2', '+2', '+3', '+3', '+4', '+4', '+5', '+5', '+6', '+6', '+7', '+7', '+8', '+8', '+9', '+9', '+10', '+10', '+11', '+11', '+12', '+12', '+13', '+13', '+14', '+14', '+15', '+15', '+16', '+16', '+17', '+17' ];

var manMod = statModif[userMagic.statMan];
var ingMod = statModif[userMagic.statIng];
var dexMod = statModif[userMagic.statDex];
var focMod = statModif[userMagic.statFoc];
var knoMod = statModif[userMagic.statKno];
var endMod = statModif[userMagic.statEnd];

var statMan, statIng, statDex, statFoc, statKno, statEnd;

statMan = userMagic.statMan + " [" + manMod + "]";
statIng = userMagic.statIng + " [" + ingMod + "]";
statDex = userMagic.statDex + " [" + dexMod + "]";
statFoc = userMagic.statFoc + " [" + focMod + "]";
statKno = userMagic.statKno + " [" + knoMod + "]";
statEnd = userMagic.statEnd + " [" + endMod + "]";

$(document).ready(function() {
$('#magicStats').html('<table class="magicStats"><tr><td class="header">MAN|</td><td class="statsBox">' + statMan + '</td><td class="spacer"></td><td class="header">FOC|</td><td class="statsBox">' + statFoc + '</td></tr><tr><td class="header">ING|</td><td class="statsBox">' + statIng + '</td><td class="spacer"></td><td class="header">KNO|</td><td class="statsBox">' + statKno + '</td></tr><tr><td class="header">DEX|</td><td class="statsBox">' + statDex + '</td><td class="spacer"></td><td class="header">END|</td><td class="statsBox">' + statEnd + '</td></tr></table>');
});

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Mar 30, 2015 18:58:18 GMT -8 Aeon said:

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓
Of course

var magicstats = pb.plugin.get('magic_stats').settings.member_stats
var userMagic = {}
for(a=0;a<magicstats.length;a++) {
if(pb.data('user').id==parseInt(magicstats[a].name)) {
userMagic = {
userName: magicstats[a].name,
statMan: magicstats[a].mana,
statIng: magicstats[a].ingenuity,
statDex: magicstats[a].dexterity,
statFoc: magicstats[a].focus,
statKno: magicstats[a].knowledge,
statEnd: magicstats[a].endurance
};
}
}

var statModif = [ '-6', '-5', '-5', '-4', '-4', '-3', '-3', '-2', '-2', '-1', '-1', ' 0', ' 0', '+1', '+1', '+2', '+2', '+3', '+3', '+4', '+4', '+5', '+5', '+6', '+6', '+7', '+7', '+8', '+8', '+9', '+9', '+10', '+10', '+11', '+11', '+12', '+12', '+13', '+13', '+14', '+14', '+15', '+15', '+16', '+16', '+17', '+17' ];

var manMod = statModif[userMagic.statMan];
var ingMod = statModif[userMagic.statIng];
var dexMod = statModif[userMagic.statDex];
var focMod = statModif[userMagic.statFoc];
var knoMod = statModif[userMagic.statKno];
var endMod = statModif[userMagic.statEnd];

var statMan, statIng, statDex, statFoc, statKno, statEnd;

statMan = userMagic.statMan + " [" + manMod + "]";
statIng = userMagic.statIng + " [" + ingMod + "]";
statDex = userMagic.statDex + " [" + dexMod + "]";
statFoc = userMagic.statFoc + " [" + focMod + "]";
statKno = userMagic.statKno + " [" + knoMod + "]";
statEnd = userMagic.statEnd + " [" + endMod + "]";

$(document).ready(function() {
$('#magicStats').html('<table class="magicStats"><tr><td class="header">MAN|</td><td class="statsBox">' + statMan + '</td><td class="spacer"></td><td class="header">FOC|</td><td class="statsBox">' + statFoc + '</td></tr><tr><td class="header">ING|</td><td class="statsBox">' + statIng + '</td><td class="spacer"></td><td class="header">KNO|</td><td class="statsBox">' + statKno + '</td></tr><tr><td class="header">DEX|</td><td class="statsBox">' + statDex + '</td><td class="spacer"></td><td class="header">END|</td><td class="statsBox">' + statEnd + '</td></tr></table>');
});

Looks good. Variable names look unique. Html looks fine. So I'm guessing the administrator picks a value from 0-46? What is the significance of that?