Customizing the WL3 Tracker

Location tracker

The location tracker is contained in a single .html file. All the styling should be contained within the <style> tag near the top of the file, in case you want to change colors, spacing, etc.

Regarding changing the key/coin location names: This will take more effort. It would have been smarter if I used some simple javascript to populate the select boxes with their options instead of having everything duplicated within a static file, but changing it would require some extra effort that seems unnecessary since the file works as-is. However, I will share the script I used to generate the level sections. It is the following Powershell script:

$mi = Read-Host "Map index (i.e. n1)"
$mn = Read-Host "Level name (don't include map index)"
$l1 = Read-Host "l1"
$l2 = Read-Host "l2"
$l3 = Read-Host "l3"
$l4 = Read-Host "l4"
$l5 = Read-Host "l5"
$l6 = Read-Host "l6"
$l7 = Read-Host "l7"
$l8 = Read-Host "l8"
$l9 = Read-Host "l9"
$la = Read-Host "la"
$lb = Read-Host "lb"
$lc = Read-Host "lc"

$mi = $mi.ToLower()
$mn = $mi.ToUpper() + " " + $mn

$html = "<div id=`"{0}`">
  <h3>{1}</h3>
  <select>
    <option>?</option>
    <option>N</option>
    <option>W</option>
    <option>S</option>
    <option>E</option>
  </select>
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
  </select>
  <br />
  <input type=`"checkbox`" class=`"checkgrey`" />
  <input type=`"checkbox`" class=`"checkred`" />
  <input type=`"checkbox`" class=`"checkgreen`" />
  <input type=`"checkbox`" class=`"checkblue`" />
  <br />
  <select class=`"grey`">
    <option>--</option>
    <option>{2}</option>
    <option>{3}</option>
    <option>{4}</option>
    <option>{5}</option>
    <option>{6}</option>
    <option>{7}</option>
    <option>{8}</option>
    <option>{9}</option>
    <option>{10}</option>
    <option>{11}</option>
    <option>{12}</option>
    <option>{13}</option>
    <option>-- not needed --</option>
  </select>
  <select class=`"red`">
    <option>--</option>
    <option>{2}</option>
    <option>{3}</option>
    <option>{4}</option>
    <option>{5}</option>
    <option>{6}</option>
    <option>{7}</option>
    <option>{8}</option>
    <option>{9}</option>
    <option>{10}</option>
    <option>{11}</option>
    <option>{12}</option>
    <option>{13}</option>
    <option>-- not needed --</option>
  </select>
  <select class=`"green`">
    <option>--</option>
    <option>{2}</option>
    <option>{3}</option>
    <option>{4}</option>
    <option>{5}</option>
    <option>{6}</option>
    <option>{7}</option>
    <option>{8}</option>
    <option>{9}</option>
    <option>{10}</option>
    <option>{11}</option>
    <option>{12}</option>
    <option>{13}</option>
    <option>-- not needed --</option>
  </select>
  <select class=`"blue`">
    <option>--</option>
    <option>{2}</option>
    <option>{3}</option>
    <option>{4}</option>
    <option>{5}</option>
    <option>{6}</option>
    <option>{7}</option>
    <option>{8}</option>
    <option>{9}</option>
    <option>{10}</option>
    <option>{11}</option>
    <option>{12}</option>
    <option>{13}</option>
    <option>-- not needed --</option>
  </select>
  <textarea placeholder=`"Notes...`"></textarea>
  <p>
    <a href=`"#contents`">Back to level list</a>
  </p>
</div>
" -f $mi,$mn,$l1,$l2,$l3,$l4,$l5,$l6,$l7,$l8,$l9,$la,$lb,$lc

Clear-Host
Set-Clipboard -Value $html

Using the above script will prompt you for the level number, name, and your desired names of the 12 locations as they will appear in the select boxes. When you input these, it will copy an HTML snippet into your clipboard that you can then insert into your customized tracker page.

Item tracker

For the item tracker, I actually handled the page generation "properly". The function generateItemTable() is called when the document is loaded, with a "scale" parameter of 2 by default. This scale parameter affects how large the interface and icons are (valid scales are 1, 2, 4, and 8). The code in general should be readable enough as-is, so I won't go into detail. Basically, an html table is generated with 9 rows and 8 columns, each with inline styles ensuring that the icon is displayed properly. As with the location tracker, you can change the styling of the page as a whole by modifying the stylesheet contained in the <style> tag.

Note that I originally coded this specific tracker in mid-March and only made a cosmetic fix when I ported it over here. I am not aware of any bugs or issues with the functionality, but I can't guarantee that everything works. Unfortunately, there was some problem I had with the positioning of the icons that I didn't find a fix for, but it should look fine at the default scale.