Forum:New javascript calculators

From the RuneScape Wiki, the wiki for all things RuneScape
Jump to: navigation, search
Forums: Yew Grove > New javascript calculators
This page or section is an archive.
Please do not edit the contents of this page.
This thread was archived on 17 March 2012 by Liquidhelium.

Following from the discussions here and here, I propose that a new javascript calculator script, demonstrated here, be added sitewide alongside Quarenon's javascript calculator script.

Specifically, I propose that

  • this script be added to [[MediaWiki:Common.js]].
  • the new script be used for new javascript calculators.
  • existing javascript calculators be converted to the new script, in cases where this would improve them.

Some wikians would be needed to carry out the second and third points, of which I would of course be one.

The new script offers several advantages over the old:

  • Most of the action happens on the client's computer, meaning less strain on wikia's server and faster responses.
  • Rather than having a fixed format, the calculator's appearance can be customised by the calculator writer as much as any other wiki page.
  • The calculator can have more dynamic features such as toggling whether an input is displayed or enabled, changing background colours of elements and variable images.
  • There are additional input types - radio buttons and checkboxes.
  • The syntax is less clunky than the wiki markup used in the templates of old calculators.

Note that the new script would not interfere with the old; its addition would not affect the functionality of any existing calculators.

One consideration in making the calculator scripts more powerful is whether it could be abused by a malicious editor; this is why editors cannot normally add javascript to pages. Concerning this:

  • The calculators are limited to a specific set of commands which can only add plain text or content parsed by Wikia to the page.
  • There are no looping commands, so the time spent executing a calculator script is linear in the length of the calculator code.
  • String concatenations that exceed a fixed number of characters are disallowed, in the same way that Wikia only allows a fixed number of characters per page for template expansion.


Support - as proposer. Stewbasic 03:48, March 5, 2012 (UTC)

Strong support - Well, I tested it, it's godly. That's really all I can say. I didn't have time to look at the syntax of making calculators, but looking through your examples, I can only say I am very impressed (particularly the second POH room planner). All the calculators seem faster for me, although without the CSS, you see a load of jumbled text before the JS loads. I was also unable to get the hiscore "calculator" to work for me; my account name would appear in the corner of the table, but no stats would appear (and yes, the account is a member and is ranked). Regardless, I think it's a vast improvement over our current calculator script, and could certainly be used to allow our calculators to get with the program.

Two totally unrelated notes concerning your examples (that in no way impact the script's effectiveness); in melee mode, the max hit calculator ignores the strength bonus value, and the dungeoneering flip tiles puzzle calculator should be improved so no forcing is necessary. Since the flip puzzle is essentially the game "lights out", this is possibly by following the same strategy lights out used (which didn't have any way to "force" anyway), see Wikipedia:Lights Out (game)#Light_chasing. Hofmic Talk 06:44, March 5, 2012 (UTC)

I notice you seemed to have fixed the HS lookup, as it's working now, which is excellent, as a proper HS lookup is something that our calculators have been seriously lacking and I think will be crucially important. Hofmic Talk 13:21, March 6, 2012 (UTC)

Some concerns:

  • That page looks really bad for users who don't have JavaScript enabled, even if you import User:Stewbasic/calc.css. The way it looks without importing the script is the way it will look for users that don't have javascript enabled, which just looks bad. The tables used for the inputs should have display:none; by default (probably using a class which will be hidden in MWI:C.CSS), then the script should add display:table; after the script loaded. That way it won't mess up pages for people without Javascript.
  • Your script is very spammy in the JavaScript Console. I've noticed it adds a new line of code for every single image the script loads, which is very spammy. Maybe you could use Special:FilePath to get the images' urls. It is possible to do <img src=""> to load the image. If you don't want to use that, please do remove the console spam.
  • This script is very big, so the import should be like this:
if ($('.jcInput').length) {
  • The POH planner is not really clear where the different rooms are. Could you make it have a border between the different cells, so that it is easier to see where the different cells are
  • Some things on the page only work when clicking somewhere else on the page, and some things work when pressing enter, while some other things work when pressing a button, and not when pressing enter. Could you please add some consistency that clicking away ($('input').blur() is better than $('body').click() here btw), pressing enter and, if available, pressing a button, will always work? And it's probably good to make it possible to let it submit on .keyup() too, for cases like the Woodcutting calculator.
  • The Hiscores script doesn't work for me. It only shows my account in the top row and leaves the other fields empty.

I know it's a lot, but I hope you can fix those things. If it all works perfectly I'll support. JOEYTJE50TALKpull my finger 16:13, March 5, 2012 (UTC)

Question - I know I'm according to Gareth a "technologically impaired duck" (though let the record stand that I beg to differ), but I can't seem to get the demonstration page to do anything. It's a mass of code for me ([1]). Is that what I'm supposed to see, or was I supposed to do something fancy with my css page? --LiquidTalk 16:20, March 5, 2012 (UTC)

You need to add importScript('User:Stewbasic/calc.js'); to your Special:MyPage/skin.js for it to load. Alternatively you could press F12 and open the "Console" tab in the window that appears then, and enter the import there and press enter (requires greasemonkey for FireFox). That will make it load once, if you don't want to import it, test, and remove it. JOEYTJE50TALKpull my finger 16:27, March 5, 2012 (UTC)

Support - It's awesome, plus the hiscores thing actually works! Hunter cape (t).png Sentra246Blue hallowe'en mask.png 05:46, March 6, 2012 (UTC)

Update - Thanks for the comments and suggestions. In response:

  • The hiscores example is fixed.
  • The lights out game can't be solved with legal moves from every position, hence the forcing in some cases.
  • The javascript console logging has been removed.
  • I've added a border to the POH table (note that this example was meant to be a proof of concept; I'll make a more useful version if the script is added).
  • The css file now hides jcInput elements as well, so as long as this is included, a user should never see any calculator "code", with or without javascript. I've also made the entire examples section hidden when javascript is disabled (again, assuming the css file is included). To some extent, the calculator writer will need to hide whatever is appropriate using the "jcJSOnly" class.
  • Using Special:FilePath would be more elegant than the way I'm getting image urls at the moment. Do you know if it's possible to get thumb images in the same way?
  • The examples which should compute immediately now do so onKeyUp rather than onChange (it was onChange that was firing when clicking away). Those that have some delay (ie need to request something from wikia or jagex) can be submitted by clicking a button or pressing enter on the text input. Hopefully this makes the examples more consistent. Note that this too is, to some extent, up to the calculator writer, who is free to make various things happen in response to various events.
  • I agree about the import, though a calculator with only pane inputs is conceivable, so I think it should be
if ($('.jcInput').length||$('[class*="jcPane"]').length) {

Hope I didn't miss anything. Stewbasic 23:13, March 8, 2012 (UTC)

I've checked, and unfortunately it's not possible to get thumbs that way. What you could do instead is getting the full size image with Special:FilePath, and the thumbnail with the method you use now. JOEYTJE50TALKpull my finger 08:41, March 9, 2012 (UTC)

Support - Now all the (minor) flaws I've found are fixed, I don't see a reason why not to have this. Great script. JOEYTJE50TALKpull my finger 08:41, March 9, 2012 (UTC)

Support - I think this is indeed a very big improvement of the current calculators, but I would like if there were more functionality before it being implemented globally. Prayer-icon.pngTyiloTalkQuest.png 15:18, March 9, 2012 (UTC)

Such as? Hofmic Talk 19:42, March 9, 2012 (UTC)
To name some of them:
  • Looping over arrays
  • Changing options in a select input
  • Functions
  • Needs more testing as some bugs still exists.
Prayer-icon.pngTyiloTalkQuest.png 22:11, March 9, 2012 (UTC)
The options of a select input can be changed; see User:Stewbasic/calc#Setting_range_example. Stewbasic 23:49, March 9, 2012 (UTC)
With arrays? Prayer-icon.pngTyiloTalkQuest.png 12:19, March 10, 2012 (UTC)

I've added the LetArrays command, so setting range with an array is now possible. Regarding loops and calling subs, my feeling is the number of calculators that would need them are not sufficient to warrant the extra code and concerns about abuse. However I'd like to hear how others feel about it. Stewbasic 17:55, March 13, 2012 (UTC)

Could you at least make a foreach command which loops over an array? Prayer-icon.pngTyiloTalkQuest.png 17:58, March 13, 2012 (UTC)

Closed - The proposals will be implemented. --LiquidTalk 20:50, March 17, 2012 (UTC)