Attempt: Developing Web Mids

[Joshex]

Hi Rebirth, this is being started as an amatuer project. I really don't know what I'm doing. but I've started anyways.

What am I doing? I have copied some of the broken sourcecode for the old Suckerpunch's hero planner, which was an early webpage version of what would eventually inspire Mids. The goal is to modify, fix and update that code to the current database version of rebirth mids (and eventually others) to produce a page where you can plan your hero/villain builds in any webbrowser without any login. so if you save the page you could even use it offline.


Long story short, there has been some interest in a hero/villain planner that can be used on all devices. The Mids team has plans for such a thing (though not actually a webpage version), but they have expressed it's not going to be in the near future as they are focusing on current mids dev which is an extensive task.

Source: Suckerpunch's sourcecode can be found on archive.org from the old cohtitan page for it. the software at that time required you to be logged in to cohtitan to use it, as you cannot validly login to cohtitan via archive.org and as even if you did so the titan staff have long since taken the necessary files to support suckerpunch's offline; the code is effectively broken. but you can find it here:
view-source:https://web.archive.org/web/20110824142004/http://planner.cohtitan.com/planner
and the broken planner looks like this:
https://web.archive.org/web/20110824142004/http://planner.cohtitan.com/planner

Progress:


New hero crest image for the background. spent all day making it. I added it tot he background in the doc. This image will end up in a zip of images later as more images become necessary so as to save attachment space.
   [attachment id=0 msg=4490]
I have also stripped off the log-in arguments.

Right now: KEYBOARD REPLACED. It's been a long time. I got back into it today and started inputting the secondary power selections. Blaster's secondaries are all selectable (but still no data and no anything else). I'm not going to try to upload the script today, I'll wait till it's done. I'll upload a new image of the state of things so far tomorrow or something.

Also I'm thinking up a better method to do the tabs in the power info/totals table. I'm hesitant on using position:absolute and the z axis to control which tab's content is visible, instead I'm literally building the table from code on tab click. the downside for that is I'll need somewhere to store dynamic power info for the table, based on which power last had the mouse over it or is locked. I'm thinking a hidden object, with the data printed on it. could make a button to make it visible but it'll be multiple tabs worth of info so, a lot of text.

Next: Do the whole process again for power pools and Ancillary/Patron pools. And I plan to rework the power info table and tabs to be on different Z locations with backgrounds on the table cells so the can literally work as real tabs.


After that: Create Power Info Dictionaries and a power info table to display the information from the dictionary on button select or mouse-over.

Even Further: The Chosen Powers Field


Future concerns: the mids team has noted that Javascript's floating point numbers might not be compatible with City of heroes numbers. I have talked with them about this and determined that javascript with floats set to a precision of 4 to 6 decimal places might be able to equate it to CoH's floats.

Because of that there is a chance that even if I can make a visibly working planner in a webpage, the numbers wont be right and it may be worthless.  but whatever lets try anyways.. maybe thats why suckerpunch's was taken down, though I seem to remember it was taken down because the guy that made it did not want to maintain it.


This is an open project, if someone knows more than me and wants to spearhead it, by all means please do so, I look forwards to your leadership lol. I'd share my test page, but I'm afraid people would visit my main page. my site is a joke and so I don't feel comfortable sharing it. a site written by a madman for the purpose of html testing and trolllery.. it was supposed to be a portfolio page.. yeah.. troll+freewebpage to do whatever with = webpage poop. If my progress gets closer to something that looks usable, I will clean the poop off my site and share it.

Meanwhile I'll share the source code so far:
CSS buildmaker.css an incomplete cropping of suckerpunch's planner.css with just the bits I need to make what I have work (and some others I have yet to know if I need them)

Code Select Expand

body, div, span, ul, li, select { margin: 0; padding: 0.2vw; font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, sans-serif; font-size: 1vw; }

body {
  background: #5095BE
}

#CoXBuildMaker_body { width: 75%; margin: 10px auto 0; position: relative; background: white; border: 1px solid #CCC; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; overflow: hidden;}

select option[value="Hero"]{
  margin: 40px;
  background: #5095BE;
  color:#fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  font-size: 1vw;
}

select option[value="Villain"]{
  margin: 40px;
  background: #990000;
  color:#fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  font-size: 1vw;
}

div.powerSelection {
  border-right: 0.2vw solid #909090;
  border-bottom: 0.3vh solid #909090;
  border-top: 0.3vh solid #F3F3F3;
  border-left: 0.2vw solid #F3F3F3;
}

div.powerSelection:active {
  border-right: 0.2vw solid #F3F3F3;
  border-bottom: 0.3vh solid #F3F3F3;
  border-top: 0.3vh solid #909090;
  border-left: 0.2vw solid #909090;
}
HTML CoXHeroAndVillainBuilder.html (javascript included in page, had to attach it getting too long for the post)
  [attachment id=3 msg=4490]

loadPowerSetsForLoop.js (Short Version) attached   [attachment id=1 msg=4490]
primaryPowersList.js attached   [attachment id=2 msg=4490]

As always any help in this project is appreciated. any final outcome will be posted in source (or source documents) here, by someone. and available to place as a page on any city of heroes website.

I don't own any rights to suckerpunch's nor did I get expreess permission to use their code, but I've changed it so drastically that it's vaguely resembling their code anyways, and it's abandonned. I'm not sure if this can be licensed, the plan is to GNU GPL it = Free to use, modify and distribute.

I'll get back into this one of these days here soon. just catching up on a backlog of stuff.

[brw316]

Hey, Joshex! Glad to see someone working on this project for the community. I have tossed a link on the Discord with a small description of the project to give it some more visibility. Good luck!

[Joshex]

OK decided to do some work on this, Redlynne suggested I add a hash feature so that I could eventually add build details directly into the URL. I thought it was a good idea so after some testing the following javascript will be used:

window.location.href

this gets the current page URL, I double checked that it grabs the changed URL as well with a simple console.log(window.location.href) before and after the hash statement.

next is

location.hash = "whatever you want to put after the URL"

from here I can work with the information, so if I wanted to list out everything in a hero/villain build as text I could do so. it's as simple as .split()ting the string like .split("#")[1].

that information was fairly easy to figure out.  However I'm not at the point where I can even construct much of a build doc at this point. I could potentially do so upto archetype>primary powerset>chosen primary powers, secondary powerset>chosen secondary powers. but I still have yet to finish the master dictionary of power values, and haven't even gotten to enhancements yet.

When the whole web mids thing is functional, I would need to figure out the data format used for mids forum posts and use that system for making the URL hash.

Originally I planned to have the user able to store the information in a cookie and output/readfrom a txt file in a specified folder. but I haven't even gotten to that yet.

anyways at least the hashing will be possible.

[Redlynne]

Redlynne suggested I add a hash feature so that I could eventually add build details directly into the URL.

I just have too much experience with the (much simpler!) World of Warcraft online talent calculators, where the build details are encoded into the URL directly as a hash code.

Here are some examples used for a vanilla WoW talent calculator:

• Classic DB Talent Calculator LINK (website is a .ch domain, in case that's an issue for anyone)
• Warrior (11/5/35) LINK
• Rogue (12/16/23) LINK
• Druid (35/11/5) LINK
• Priest (21/25/5) LINK
• Hunter (13/0/38) LINK
• Warlock (15/31/5) LINK
• Mage (33/15/3) LINK
• Paladin (11/23/17) LINK
• Shaman (31/0/20) LINK

This then gives an idea of how dynamically updating the hash code in the URL works from an end user perspective (just copy the URL into a bookmark on your browser or link to it in a post on a forum). It makes things VERY User Friendly™ for someone who wants to make use of the online tool ... no fuss, no muss.

Of course, the HARD part becomes working out the encoding pattern for creating the hash code ... and at this point I'm not even sure that the current generation of Mids' Reborn is using an optimized parsing of data pointers for the purpose. I wouldn't be at all surprised if a refactor from scratch approach to the issue would be superior (especially if intentionally designed to be extensible to account for future developments and additions), rather than trying to retain backwards compatibility with the Mids' Reborn application, including trying to maintain congruency between app and web page calculator going forward (so common hash coding for both). We've already encountered backwards compatibility issues within Mids' itself, such that newer versions are not compatible with old version code hashes (and vice versa) ... so I'm thinking that trying to reverse engineer the Mids' code hash and stay congruent with it going forward is not necessarily the best plan from a code longevity standpoint. Hence why I'm thinking that a complete refactor into a "better" hash code parsing method that is more suitable for a web page build calculator would be the superior choice to make, rather than dragging forward (and on into the future) whatever it is that Mids' is doing, specifically.

[Joshex]

Redlynne suggested I add a hash feature so that I could eventually add build details directly into the URL.

I just have too much experience with the (much simpler!) World of Warcraft online talent calculators, where the build details are encoded into the URL directly as a hash code.

Here are some examples used for a vanilla WoW talent calculator:

• Classic DB Talent Calculator LINK (website is a .ch domain, in case that's an issue for anyone)
• Warrior (11/5/35) LINK
• Rogue (12/16/23) LINK
• Druid (35/11/5) LINK
• Priest (21/25/5) LINK
• Hunter (13/0/38) LINK
• Warlock (15/31/5) LINK
• Mage (33/15/3) LINK
• Paladin (11/23/17) LINK
• Shaman (31/0/20) LINK

This then gives an idea of how dynamically updating the hash code in the URL works from an end user perspective (just copy the URL into a bookmark on your browser or link to it in a post on a forum). It makes things VERY User Friendly™ for someone who wants to make use of the online tool ... no fuss, no muss.

Of course, the HARD part becomes working out the encoding pattern for creating the hash code ... and at this point I'm not even sure that the current generation of Mids' Reborn is using an optimized parsing of data pointers for the purpose. I wouldn't be at all surprised if a refactor from scratch approach to the issue would be superior (especially if intentionally designed to be extensible to account for future developments and additions), rather than trying to retain backwards compatibility with the Mids' Reborn application, including trying to maintain congruency between app and web page calculator going forward (so common hash coding for both). We've already encountered backwards compatibility issues within Mids' itself, such that newer versions are not compatible with old version code hashes (and vice versa) ... so I'm thinking that trying to reverse engineer the Mids' code hash and stay congruent with it going forward is not necessarily the best plan from a code longevity standpoint. Hence why I'm thinking that a complete refactor into a "better" hash code parsing method that is more suitable for a web page build calculator would be the superior choice to make, rather than dragging forward (and on into the future) whatever it is that Mids' is doing, specifically.

encoding the data can be in whatever format we want, that's not an issue, I just got a new hardrive installed and copied most of my files over, looks like I didn't lose anything that important. but I'm rebuilding all my settings and such. bonus? my nvidia graphics card seems to work again now! ~for now~. but once I get .net 6 installed again I'll reinstall mids and check if they even do an "export to forum post" feature. if they do, then we'll just use that as the hash system. reading from the hash in the URL will then be in a start-up script on page load if # is present and there's a valid build after it, otherwise "error message"

for a lesson on this you'll have to learn string/text manipulation tactics, it's really simple stuff

strings are text, in code a string is text wrapped in "" or '' or is formatted into a string using a type converting codeword like str() but strings can be indexed by character by doing "text string"[index] like

Code Select Expand

"textstring"[0] means (the first letter "t") it can also be indexed by a range of letters, so if the primary powerset was always represented by 2 characters 1 after the first character we'd do "insert build string here"[1:3], that'd return the 2 characters we want.

so, as long as you can figure out where something is in the string you can then test for it in a simple javascript if statement: if ("insert build string here"[1:3] == "ns"){your code to run here} then you just have one if statement and bend for each section of the possible build text. and maybe a statement to check if it doesn't match any expected combination and then output a visible error prompt "build failed to load 'ns' is an unknown primary powerset"

strings can be searched as well, if ("string" in "my string"){your code here}

so once I understand the mids export to forum post text system I can write a reader no problem. then it's just a case of telling the different parts of the page what to put where and what text and values to give them.

writing to the same format is fairly easy as well. it's mostly just appending a bunch of indexes of the url string.

so you change something in your build and that button or div or whatever will run a script to update the url feild's hash.

it'd just be tedious work to put it together. but that's no issue for me.
I think I have my neocities sites usernames and passwords saved so I should be able to pick-up right where I left off. but I have other things to set-up before I get back to any real coding work lol.. can't even play city of heroes again till I reinstall .net and mess with getting tequila set-up and such. I might be able to just copy the launcher to my desktop as the CoH install folder is in the exact same drive and folder as on the old harddrive. but if it needs registry entries then I'll have to do a new install.... let me just check that the costume files and mission files are actually there. - yep all good. surprisingly I lost close to no data.



EDIT:
at current mids forum export feature does not work. it does give build links which could be used if I knew the data format they represent. I know it's hex, I assume 2 hex characters represent each various component of a build (which is ironically what I was thinking would be smart to do).

Edit 12/19/24 I will be working on this for the rest of the week, my computer set-up is done everything is installed and back to normal. and my game dev work for the week was just to review what will be necessary for the remaining menu buttons to work in my puzzle game. so I'm done with that.

this week's work on webmids will be similar, mostly review so I understand what I was doing and where things are. I'll likely focus on totals tabs.

Edit: Totals table tabs tested, I had the backgrounds of the totals table transparent prior to this so the background image could show through. that will no longer be possible when using position: absolute and z-index for tabbing, but the benefit is I wont have to rebuild the entire totals table in javascript every time a tab is clicked lol. it also means I no longer need hidden <p>'s with data stored in them, now data will be input in permanent table entries, which makes everything easier. after I setup the other tabs tables and set specific ids for each element and make the tab buttons work, then I'll have to get back to the tedious grueling work of the power info dictionary, which will be one of the main databases to support things and give this web-page it's first breaths returning actual numbers.

lol secondaryPowersList.js only has blaster and controller entries atm. I know I finished that one, or at least I think I did.. I'll check my backups and see if I have a more complete version. if not I'll need to fill that in, again.

nope I don't have another copy, maybe I never finished it? oh well, it's something to do, can probably finish filling in the lists tonight, the code to make the buttons may need some reworking. lesson for would be developers, "backup backup backup, after working on something, when you think you have a backup of something already, back it up again just to be sure."

I finished up the missing entries in Controller, and am currently upto Scrapper secondaries. this work I'm doing really could be done by anyone, it's simple text data entry. if anyone would like to help, let me know. I'll need a lot more help with text data entry for pool and ancillary powers, and all the power dictionaries once I define their structure.