Ability Calculator Frontend

[Bossner]

Hey everyone,

We're looking to get an Ability Calculator (see here for WoW's (http://www.wowhead.com/talent#j)) up on the website.

First, if anyone has first-hand experience working on one of these, any insight you can provide would be a huge help. I imagine an html form with some javascript for a backend should suffice, but I'm not entirely sure since all my javascript experience is in scripting engines and not web pages.

Second, I can handle the backend but I don't know web design very well, so we're looking for someone who can do the graphical work and the form work for the front end. Or, if you're only able to do one of those, that'd be great to and we can get a few people working on this project.

Thanks everyone!

[FalkonSwiftblade]

I left ya a post on the other thread, I am also trying to come it this from graphics end. I know some web design, but I don't have much experience working inside forums. I don't know if that's PHP or something else. I know html, css, and familiar with javascript enough to know how to adjust timing or swap images I think, but I am more of a designer and graphics guy first. I can help, I'm limited to my time to make really nice art for it right now, but I'm working on a ui interface right now just to practice my texture skinning techniques. I was thinking a steel/metal theme for the might tree, a wooden/leather theme for the rogue, and silky/magic glowy stuff for the sorcery. I don't have current reference info yet on skills, but I did manage to capture all the lore stone info from the game. I may make all new icons for the skills, and a fresh background for everything, but it may take me a week or two with all that's going on right now.

[Bossner]

Hm. I have some basic HTML/CSS stuff going, but I'm incredibly new to it. I'm mostly wanting to do the javascript backend. I think we're going to stick this on an actual webpage, so something .html or .php I think. As far as graphics we need:

* High res backgrounds of the three trees (not sure if they're different) without the icons.
* high res icons with transparent backgrounds - mostly important for the circular abilities so nothing outisde the circle stands out
* background graphics for the side "summary" panel - total points spent, level required, points spent in might/finesse/sorcery
* a big X for resetting your entire tree
* big buttons for the top of the thing to swap which tree is currently active, IE a big button that says Might or Finesse, etc.

That's all I got so far. Let me know if you want to check out the HTML. I'm currently fighting javascript to make the table content dynamic for those buttons up top but I'm having a rough time. WTB php, Union. :p

[Kurik Lein]

Just in case someone on the Watch forums hasn't seen it yet. :P http://www.38watch.com/calculator/

[Haiven]

Let us know when you want this shared out across the interwebs. We'll be happy to do it!

[Bossner]

Let us know when you want this shared out across the interwebs. We'll be happy to do it!

Awesome news, Haiven.

I'm thinking that there's a few things left to do first. My buddy at work has some tooltip javascript/html stuff that I'm going to borrow and implement tonight (hopefully! - need to go food shopping blegh) and then all that should be left is getting the on/off icons into the system.

Should be set to let loose then, and then I can casually rewrite the backend so that if we want / need to do one for Copernicus it's a matter of simply swapping the tiles in and out.

[Koroem]

Don't think I can help much with programing but as Bossner knows, and some in the IRC channel I jumped in to help with the artwork on the calculator. Finally registered to say Hi and post. Just found the site 2 days ago heh. If there is anything else I can help with on this Bossner let me know!

[Union]

Welcome to the Watch, Koroem.

[Nybling]

Man Bossner, you've done a badass job with this bro. I appreciate it.

[Leorwen]

Looks great Bossner. I've toyed with the idea of trying to implement JavaScript to whip up something similar over at the Foundry, but I've got such a long to-do list with that project that I haven't even gotten close to starting.

May I ask what was your method for figuring out the syntax for most of the calls and functions you needed. Did you start from scratch and build up, or did you reverse engineer another games talent calc?

[Finneon]

Very nice folks. Should become hugely popular in a couple of weeks. :coolmunch:

[Nybling]

Yeah, Bossner is a coding beast. He's done a ton of work in like 2.5 days :P

[Bossner]

Looks great Bossner. I've toyed with the idea of trying to implement JavaScript to whip up something similar over at the Foundry, but I've got such a long to-do list with that project that I haven't even gotten close to starting.

May I ask what was your method for figuring out the syntax for most of the calls and functions you needed. Did you start from scratch and build up, or did you reverse engineer another games talent calc?

I'm a professional software engineer and I do a ton of work with scripting engines (I do a lot of .NET testing applications for my company's simulation games and we use a lot of scripting). We use javascript as our primary scripting language, so I already know a good deal about it.

I had some basic ideas on how it should work: you need a grid that can tell you which cell is being clicked (left or right click), and the cells need to know their current count, their max count, what they should display, etc.

I started writing the JavaScript (which is weakly typed) to be completely modular, meaning that expansion is easy. I then treated it a bit like my stuff at work: the user does something, we react, and then update what they see. So I created the basic program flow using that - skeleton it out using a lot of dumby data to test small pieces as you go along. JavaScript is just that: script, so you need to constantly be testing what you're writing because there's no compile. If it breaks, you have to basically throw alert()'s everyone to find out where the flow is going.

After that is mapped out, you can start filling in the pieces: logic checks, clear functions, etc.

Honestly? For me, the hard part is the HTML. I'm not a web developer (all of my scripts are run in applications that run on Windows) so figuring out all the document.getElementByID() jazz was where I got bogged down. Plus, having to write for 4 browsers at once which I still don't have correct.

If there's one thing I wish they taught me about programming in college is that Googling your problem and the language you're using will result in some kind of code to get you started like 99% of the time. Seriously - if you're trying to do it, someone's probably beat you to it.

As for looking at other calculators, I glanced at Wowhead's and MMO-Champion's. Wowhead is doing something with anchors, where it does a redirect without changing the page or something - I'm guessing this is AJAX or something. MMO-Champ's is done in about 90% JavaScript but it's very convoluted - they're forced to keep track of three trees per class and a lot more HTML stuff, so it became too much to even use their code as a guide. I will admit that I figured out how to offset the counter numbers from MMO-Champ. :p

[Leorwen]

Thanks for the suggestions boss. I've started some work on my own version, but I'm only 5 or 6 hours into the coding (I'm also pretty slow). I've coded up the HTML and CSS containers for my builder first because that's the easy part for me. Now I get to slave over javascript for the next several days and try to get it all through.

One MAJOR question though! WHERE did you find those absolutely beautiful talent icons? Are those super secret leaked talent trees from the release version? Those icons are SOOO much prettier than the ones I have from my demo screencaps.

EDIT: nevermind, I just figured out they are from the ability summary videos on the Reckoning site. Man, I wish the talent trees looked that crisp in-game! Nice work :)

[Sylee]

I just spent way too much time playing with this...
Thanks, Boss. Good job! :)

[Bossner]

Ladies and gentlemen:

TOOLTIPS!

[Finneon]

Awesome, Boss! Thanks.

[Nybling]

Wow, awesome job Bossner.