Author Topic: Attempt: Developing Web Mids  (Read 53 times)

Joshex

  • Jr. Member
  • **
  • Posts: 76
  • Inf: +3/-1
    • View Profile
    • Awards
Attempt: Developing Web Mids
« on: January 24, 2023, 01:52:27 pm »
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: So far I have imported the little white box surround for the planner and attached it through CSS to my new menus and modified this and a bunch of stuff to %'s width rather than pixel counts. so far it is unable to do much of anything. previously I made a select tag menu for alignment choice, and wracked my brain trying to get a javascript to work to change the page's background based on your selection like on the old suckerpunch's planner. (they used a much longer peice of code to do it) in the end I got that working... mostly. it's not perfect.
It now has a Character Name field, Origin menu, Archetype Selector, and Primary and Secondary menus, they will need bool buttons under them. I have created a placeholder powersfield which will be where powers chosen will eventually go.
The UI layout is now fairly SOLID and will scale with your browser windows size.
The Archetype Selector now has all the archetypes on Rebirth. The Primary and Secondary Menus Now populate by javascript with options for Blaster Primaries and Secondaries and are now unlocked when Blaster is chosen. But This ONE javascript is turning out to be a LOOOONG script, so I have separated it into it's own document loadPowerSets.js and linked it in so that the HTML is short and easy to read.
Controller Powersets are now loaded into the primary and secondary selects when Controller is chosen from the archetype select.
Defender powersets added.
Scrapper powersets added.
Tanker Powersets added.
Peacebringer Powersets added.
Warshade Powersets added.
Guardian Powersets added.
Brute Powersets added.
Stalker Powersets added.
Dominator Powersets added.
Corruptor Powersets added.
Mastermind Powersets added.
Arachnos Widow PRIMARY powersets added. (Secondaries will be added in a different script on the primary powerset Select object)
Arachnos Soldier PRIMARY powersets added. (Secondaries will be added in a different script on the primary powerset Select object)
Individual Powers Still Cannot be chosen. I am not that far yet.

I have thought about using a for loop and a list to populate each menu, I've also questioned my addition of the id attribute as only the value matters for selects, id is only for when you need to target an element for some code purpose, but here they are values in a targetable <select> so it's moot point. the for loops will certainly make this code shorter, the only worry I have had is recursion limits as for loops can trigger them, I don't think 40 loops will trigger the recursion limit on most devices but, hey you never know.

I wrote and debugged 1000 lines of code yesterday to add in most of the ATs, now they are all in. next we'll deal with list length indexes and for loops and collapse the doc significantly (and hopefully not break it, in fact I'll make a separate script just for the for loops so if it gets hung up in recursion I can just switch back to the LONG script).

For Loops are MUCH shorter. And it is now MUCH easier to add in ATs and Powersets.


I have also stripped off most of the log-in arguments.

Delayed: Adding Pool Power Menus (meh I'll do that later, should it be a third column, or under the primary and secondary like in suckerpunch's?).

Next: More PowerSets for more Archetypes need to be programmed to be added to the Primary and secondary select menus.


After that: Create a list of powers for each option that can be added in the Primary and Secondary Selects, and +disabled the AT selector if a power is chosen.


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]
body, div, span, ul, li, select { margin: 0; padding: 1px; 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;}
/*.Character_Name_Box label, input {
    display: inline-block;
}
#Table { display: table; width: 100%;}
#Row { display: table-row; width: 100%;}
#Character_Info { display: table-cell; width: 40%;}
.alignment_selector {float: left;}
#PrimaryAndSecondarySets { float: Left; width: 50%;}
.PrimarySet_Cell {
  float: left;
  width: 20%;
}
.SecondarySet_Cell {
  display: inline-block;
  width: 20%;
}
#PowerChoices { display: table-cell; width: 50%;}
.C1 {
  float: left;
  width: 32.33%;
}
.C2 {
  display: inline-block;
  width: 32.33%;
}
.C3 {
  display: inline-block;
  width: 32.33%;
}*/
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;
}

HTML CoXHeroAndVillainBuilder.html (javascript included in page)
Code: [Select]
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>City of Heroes/Villains Web Build Maker</title>
    <link href="buildmaker.css" type="text/css" rel="stylesheet"/>
    <link rel="ICON" href="index.ico" type="image/ico" />
  </head>
  <body>
    <h3 style="color: white; padding: 15px;">City of Heroes/Villains Web Build Maker</h3>
    <h4 style="color: white; padding: 15px;">Based on Suckerpunch's Hero Planner and formerly RedTomax's Hero Designer</h4>
    <div id="CoXBuildMaker_body">
      <table cellspacing="0" cellpadding="0" style="border: none">
        <tr>
          <td style=" width: 45%; float: left;">
            <div id="alignment_selector">
              <select name="alignment" id="alignment" onChange="changeOptionValue();" style="width: 75%;">
                <option value="">Select Alignment:</option>
                <option value="Hero">Hero</option>
                <option value="Villain">Villain</option>
                <script language="javascript" type="text/javascript">
                  function changeOptionValue() {
                    console.log(document.getElementById("alignment").value) // this was for value testing because it wasn't working right. it's still not working on the first click of "hero" Sometimes! idk why.
                    alignmentChoice = document.getElementById("alignment").value
                    if (alignmentChoice == "Hero"){
                      document.body.style.backgroundColor = "#5095BE";
                    }
                    if (alignmentChoice == "Villain"){
                      document.body.style.backgroundColor = "#990000";
                    }
                  }
                  </script>
              </select>
            </div>
            <table cellspacing="0" cellpadding="0" style="border: none; width: 45%;">
              <tr>
                <td style="width: 8.5vw; float: left;">
                  <p id="NameTxt">Character Name:</p>
                </td>
                <td style="width: 18vw; float: initial;">
                  <input id="CharacterName" name="CharacterName" maxlength="20" style=" border-radius: 5px; width: 18vw; padding: 0.4vw; height: 2.4vh; border: 5px; font-size: 1vw; resize: none; background: #9F9F9F;"></input>
                </td>
              </tr>
            </table>
            <div id="Origin_Selector">
              <select name="Origin" id="Origin">
                <option value="">Select your Origin</option>
                <option value="Magic">Magic</option>
                <option value="Mutation">Mutation</option>
                <option value="Natural">Natural</option>
                <option value="Science">Science</option>
                <option value="Technology">Technology</option>
              </select>
            </div>
            <div id="Archetype_Selector">
              <select name="Archetype" id="Archetype" onChange="loadPowerSets()">
                <option value="default">Select your Archetype</option>
                <option value="Blaster">Blaster</option>
                <option value="Controller">Controller</option>
                <option value="Defender">Defender</option>
                <option value="Guardian">Guardian</option>
                <option value="Peacebringer">Peacebringer</option>
                <option value="Scrapper">Scrapper</option>
                <option value="Tanker">Tanker</option>
                <option value="Warshade">Warshade</option>
                <option value="ArachnosSoldier">Arachnos Soldier</option>
                <option value="ArachnosWidow">Arachnos Widow</option>
                <option value="Brute">Brute</option>
                <option value="Corruptor">Corruptor</option>
                <option value="Dominator">Dominator</option>
                <option value="Mastermind">Mastermind</option>
                <option value="Stalker">Stalker</option>
                <script language="javascript" type="text/javascript" src="loadPowerSets.js">
                  function loadPowerSets()
                </script>
              </select>
            </div>
            <table cellspacing="0" cellpadding="0" style="border: none; width: 45%;">
              <tr>
                <td id="PrimarySet_Cell" style=" width: 25%;">
                  <select name="Primary_Powerset" id="Primary_Powerset" disabled>
                    <option value="P_default" id="P_default">Select Primary Powerset</option>
                  </select>
                  <ul style="list-style-type: none;">
                    <li id="P1_L1">1:______________________</li>
                    <li id="P2_L1">1:______________________</li>
                    <li id="P3_L2">2:______________________</li>
                    <li id="P4_L6">6:______________________</li>
                    <li id="P5_L8">8:______________________</li>
                    <li id="P6_L12">12:_____________________</li>
                    <li id="P7_L18">18:_____________________</li>
                    <li id="P8_L26">26:_____________________</li>
                    <li id="P9_L32">32:_____________________</li>
                  </ul>
                  <p>Placeholder for the list of powers in the Primary set.</p>
                </td>
                <td id="SecondarySet_Cell" style=" width: 25%; vertical-align: top;">
                  <select name="Secondary_Powerset" id="Secondary_Powerset" disabled>
                    <option value="S_default" id="S_default">Select Secondary Powerset</option>
                  </select>
                  <ul style="list-style-type: none;">
                    <li id="S1_L1">1:______________________</li>
                    <li id="S2_L2">2:______________________</li>
                    <li id="S3_L4">4:______________________</li>
                    <li id="S4_L10">10:_____________________</li>
                    <li id="S5_L16">16:_____________________</li>
                    <li id="S6_L20">20:_____________________</li>
                    <li id="S7_L28">28:_____________________</li>
                    <li id="S8_L35">35:_____________________</li>
                    <li id="S9_L38">38:_____________________</li>
                  </ul>
                  <p>Placeholder for the list of powers in the Secondary set.</p>
                </td>
                <!--This may need to be in a form with the archetype selector for best results. It will contain 2 selects with no options other than the default "Select your Primary Powerset" and "Select your Secondary Powerset" respectively. A javascript will be necessary here to populate the lists with options based on the chosen Archetype. They will be set to ".PrimaryAndSecondarySets select {display:inline-block;"} in CSS. Below which will be 2 columns of buttons with javascript to modify the background on selection. and the powers field will also be populated with buttons at set locations after Level denotation labels.-->
              </tr>
            </table>
          </td>
          <td style="vertical-align: top; width: 55%;">
            <div id="C1" style="float: left; width: 31.33%;">
              <p>placeholder for Column 1 of the powersfield</p>
              <select>
                <option>Test</option>
              </select>
              <p>Test of table cell height and it's interaction with the row height and the height of a separate table placed in the first cell of this table to see if this LOOOOOONG text forces the Primary and Secondary set selects down or not.</p>
            </div>
            <div id="C2" style="display: inline-block; width: 31.33%;">
              <p>placeholder for Column 2 of the powersfield</p>
              <select>
                <option>Test</option>
              </select>
            </div>
            <div id="C3" style="display: inline-block; width: 31.33%;">
              <p>placeholder for Column 3 of the powersfield</p>
              <select>
                <option>Test</option>
              </select>
            </div>
          </td>
        </tr>
      </table>
    </div> <!--CoXBuildMaker_body-->
  </body>
</html>

loadPowerSets.js (LONG VERSION) attached   

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.
« Last Edit: Yesterday at 06:01:31 pm by Joshex »

brw316

  • Global Moderator
  • Newbie
  • *****
  • Posts: 13
  • Inf: +7/-0
    • View Profile
    • Awards
Re: Attempt: Developing Web Mids
« Reply #1 on: January 24, 2023, 02:37:42 pm »
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!