First Time Plugin Coding/ Tutorial Wanted

[Aedo]

So I'm fairly new to this whole "plugin" thing and new to coding in general. I've got some know how and lessons under my belt but I've never actually made a plug in before. I don't know if this is even the right place to be posting this.

Anyway, I'm looking for something of a step by step tutorial on the very basics of putting together a proboards plugin. From what I can tell, it's a matter of setting up variables and then making functions that use said variables to do things. I've watched the tutorial videos that Jordan provided and those have been quite helpful. I guess I'm not entirely sure where to start for the coding aspect of things. I have a solid idea and plan of what to make and now I'm working to get down to brass tacks.

As you might imagine, I'm a little anxious about wanting to make a real product for the first time. I feel kind of like I want a coach or mentor for this process and a tutorial would help that out a lot.


Anyway, for those interested, the plugin idea I have is similar to woop's w_experience but a little expanded from there. Below you can see the design doc I came up with that outlines what it is I'm trying to do.

Objective: I want to create a proboards plugin that will store and display six stats that are useful to every user on the Emerald Empire board. These six stats are Earth, Fire, Wind, Water, Void, and Experience Points (XP). The most important of these stats is XP. XP is a variable that will grow as a result of users posting in character threads. The other five stats will grow as a result of the user expending stored XP to "buy" higher stats. Therefore, this plugin will also need to implement a form of "store" page where players can execute the buying functions of the plugin.

This plugin will facilitate the basic game mechanics of the new EE forum role-playing game. Users will be rewarded for making role-playing posts with the XP stat and the store aspect provides a use for the XP stat to increase the other five, which in turn makes the user more powerful within the game.

Necessary Concrete Resources:
Yootil Library
One (or more) Super user key
Javascript Editor
Plugin Build Tool
Javascript Reference Library


Foreseen Variables(per user):
Earth Stat
Air Stat
Fire Stat
Water Stat
Void Stat
Temporary versions of each of the five stats for shopping purposes
Total XP
Current XP
Temporary Current XP
Growing Costs for Each of the Five Stats


Proposed Functions:
(displayStats)
A function which accesses the stored six stats and shows them in a list within each user's miniprofile.

(displayStats_2)
A function which accesses the stored six stats and displays them within each user's main profile.

(xpGain)
A function which increases the value each time the user posts within a certain category in the board (Which will be the In Character Category). This gain is permanent and will need to be stored in the Total XP variable.

(setXP)
A function which allows Admins to reset a user's XP value to a new value.

(storefrontPage)
A function which creates a new page wherein players can exchange earned XP for increases in each of their Five Stats. This page should include individual functions for buying up stats as well as a save button to finalize stat buying.

(buyStat_1-5)
A function which temporarily raises one of the five stats. There will actually need to be five of these.

(sellStat_1-5)
A function which allows a user to temporarily regain XP in exchange for lowering a temporary five stat value to a minimum of the current permanent stat level.

(finalizeStats)
A function which allows a user to save changes to the five stats and therefore permanently exchange XP for higher stat values.

Proposed Listeners:
Reset XP (On the user's profile page)
-Input field used to execute (xpSet)

The following should be on the store page.

5 Increase Stat buttons
-button used to execute (buyStat)

5 Decrease Stat buttons
-button used to execute (sellStat)

Save Button
-button used to execute (finalizeStat)

[Wormopolis]

a single superuser key can be used to store everything yo need. it holds up to 4K worth of data on each member, so unless you think you are going to encroach on that, its probably safe to just need one.

my advice is to take baby steps. dont worry so much about the spending of the points until you are sure the earning of the points is working.

do you know what a JSON object is? because I highly recommend understanding what they are and utilizing them to store data in keys, because they make it really easy to reference later. devise what your JSON object is going to look like that gets stored in the userkey

there are built in listeners for modifying a key when a new post is made, when a new thread is made, or when a post is edited. what isnt so clear is knowing that editing the first post of a thread is termed "edit_thread" instead of "edit_post". so keep that in mind. there is a thread about how keys work that lists how to get and set keys.

start with that. you can check a key value by viewing source after a post is made to see if your set function worked.

[Former Member]

Just so you know, I'd love you to death for this plugin. Best of luck! =D

[Aedo]

Wormopolis

So If I'm hearing you right, I can use a JSON object to store my stats and xp values which will make them easier to pull up later in the process. Is that right?

Also, in the line of baby steps, I think my first goalpoint will be to have the stats set to 5 and display properly in the miniprofiles.

[Wormopolis]

yes. the key can store simple text, an array, and a JSON object (stringified). if you store it as JSON, the you can do a get call on your key, and it returns a variable that is basically a JSON object. what I do is use full names for things while writing, and then at the end go back and shorten the object key names to conserve space (there is a limit on a plugin of 64K).

utilize jQuery to help make things faster. targetting mini-profiles is as easy as $('div.mini-profile')

and if you use an each() function on the collection, it goes through them all one by one. the $(this) variable points to the current one in the loop.

[Aedo]

I really wish I could look at the source code for some other plug-ins to see what they did and sort of get a hang for the syntax.

But on to other things.

I'm looking over Jordan's plug-in video and trying to alter that code to point to the 'info' section of the mini profile. I'm trying to get anything to change there. currently, my code looks something like this.


function display_stats()
{
var txt1 = ("Hello World.");
   $('div.mini-profile').each(function(){
    var mProfile = $(this);
       var info_panel = mProfile.find('div.info');
       
       info_panel.css('cursor','pointer');
   });
}
Right now the txt1 variable is superfluous but ultimately I would like to get that text to show in the mini profile info section. As I understand it, though, this code should make it so that there's a clicky pointer over the info section. I'm still not sure if I'm accessing the miniprofile correctly. Thoughts?

[Jordan]

Oct 18, 2013 10:08:38 GMT -8 Aedo said:

I really wish I could look at the source code for some other plug-ins to see what they did and sort of get a hang for the syntax.

You can actually. If the plugin used the Javascript component, their code will be stored in an external file that you can view in your browser's developer tools.

If you are using Chrome, CRLT+SHIFT+J to open the developer console, click the "Sources" tab, find the URL on the left panel that looks something like s1.storage.proboards.com, then in the J folder you will find all the plugin Javascript files.

If they just stuck their code in the header or footer component of the plugin, then you just need to view the page source and find it.

Oct 18, 2013 10:08:38 GMT -8 Aedo said:

But on to other things.

I'm looking over Jordan's plug-in video and trying to alter that code to point to the 'info' section of the mini profile. I'm trying to get anything to change there. currently, my code looks something like this.


function display_stats()
{
var txt1 = ("Hello World.");
   $('div.mini-profile').each(function(){
    var mProfile = $(this);
       var info_panel = mProfile.find('div.info');
       
       info_panel.css('cursor','pointer');
   });
}
Right now the txt1 variable is superfluous but ultimately I would like to get that text to show in the mini profile info section. As I understand it, though, this code should make it so that there's a clicky pointer over the info section. I'm still not sure if I'm accessing the miniprofile correctly. Thoughts?

Are you sure the function display_stats is even being called?

You should add the code alert(true); right above your txt1 variable to see if the code is even being executed.

You should also remove the red on this line: var txt1 = ("Hello World.");

[Aedo]

Jordan, Super Thanks a million times over!

Looking at other people's codes will be totally helpful.

Also, yes, I made sure that the function was called in a line right after what I showed here. I knew that was working so I was just focusing on the function itself. However the alert has also proved helpful to confirm that it loads on every page. Thank you for the heads up on the Hello World.

Edit: Here's what we're looking at right now.


function display_stats()
{
   
   var mp_show = $(".mini-profile div.info"); //Accesses mini profile and info section
   
   
   mp_show.each(function(){ //Creates "Hello World" at bottom of mini profile
       alert (true); //checks to see if function is working
    var stat_str = "Hello World."; //creates value for Hello World
       var container = $("<span></span>"); //accesses a span in the current info section?
container.append($("<br /><br />" + stat_str)); //defines append method?
$(this).append(container); //appends container to the current info section
   });
   
}

display_stats();
Note that each line is commented with what I think it's supposed to be doing. Right now, the alert isn't going off, which tells me that the anonymous function attached to mp_show isn't being called (I think). Why might that be? Am I only defining a function and not calling it anywhere?

[Jordan]

Your script was working, except for container.append($("<br /><br />" + stat_str)); which needed to be html() instead which takes a string.

<script type="text/javascript">

function display_stats()
{
    $(".mini-profile div.info").each(function() {
        alert($(this).html()); // I do this to make sure I am grabbing the correct element, if you get "undefined", it's not finding the element

        var stat_str = "Hello World.";
        var container = $("<span></span>") // This creates a new span element
            .html("<br /><br />" + stat_str); // We "chain" on the html() method rather than write container.html(...) so less typing
        // You don't use append() because in this case you are inserting html (which is a string/text)

        $(this).append(container); // We use append() here because "container" is a javascript variable that is NOT a string
    });
}

// Make sure the DOM (basically, the page) is fully parsed and ready to be manipulated
// This is a JQuery function
$(document).ready(function() {
    display_stats();
});

</script>

[Jordan]

I thought it would be helpful to show you how to debug your code. Debugging allows you to pause your code at specific lines and go through it line by line to see exactly what is happening. It's a skill you must have if you want to be successful.

This example shows you how to debug a script that is loaded in an external file, which is what most plugins do. You can see that the plugin external scripts on my forum come from the server s23283.proboards.com. The number can be anything.



Note that when you set a breakpoint, you have to reload the page for the code to be executed again.

The next example shows your own code that I put in my Global Footer which means it gets inserted directly onto the page.



And to show you how to find errors, I purposely set var mp_show = null; to cause an error to occur. You can see the error happening in the image below.



After clicking the error, this page appears where it shows you what happened.

[Aedo]

Thanks for the tip.

So here's a fun one to puzzle out. Using pretty much the code above I have no bugs (which makes sense since a professional like Jordan made it). the whole thing runs and I can insert an alert down after the append method and it goes off; showing that everything is working. HOWEVER, for some strange reason 'stat_str' doesn't print out. the breaks show in the miniprofile but stat_str doesn't. I also tried replacing it with just "Hello World" and still no luck.

In the interest of checking stuff out, I switched around some variable names so that they didn't agree and then I got bugs popping up, but upon switching them back the bugs disappeared. So from what I can tell, the code is "correct" in that it all runs cleanly, but that final bit of the container variable doesn't append the way it's supposed to.

I also tried turning off all other plugins to see if they were interfering, but no change.

[Jordan]

Strange, can I get your forum URL?

[Aedo]

eesandbox.proboards.com/

if you need to be an admin or anything to do stuff, give me a quick pm and we can set you up.

[Jordan]

You need to remove the red.

function display_stats()
{

var mp_show = $(".mini-profile div.info");

   mp_show.each(function(){

      var stat_str = "Hello World.";

      var container = $("<span></span>")
         .html($("<br />" + stat_str));

      $(this).append(container);
      //alert (true);
   });
}

$(document).ready(function() {
   display_stats();
});

[Aedo]

Brilliant. I feel like a derp for not noticing that.

Why does that not throw an error?