Vue + Typescript Rewrite

[christianlegge]

The tracker has been entirely rewritten in Vue and Typescript. All functionality from the current iteration has been maintained or improved. I will try to address any potential concerns in this PR.

New features

This PR introduces several features to the tracker:

• Bootless/Hammerless logic: added a setting for starting boots/hammer which is read from seed import. This will give you the proper equipment on reset, and the logic has been updated to lock you out of things when you don't have them.
• Bowser's Castle and Peach's Castle: added maps and checks for these two areas. Bowser's is hidden by default unless Fast Bowser's Castle is off, and Peach's Castle is also hidden by default.
• Customizable layout: instead of being resolved by the browser based on floats, the layout is now locked to a fine grid and the panels are all resizable in both dimensions. The layout has min-width 1900px so that the browser window can be made smaller without screwing up the layout.
• Trading Event: added item checks to misc. items for the 3 trade events, with tooltips telling the user when they become available.
• Localstorage: everything is saved to localstorage by default, including playthrough progress, seed settings, tracker config and tracker layout. Any or all of those 4 categories can be selected when exporting data, which will overwrite only those selected things when loaded later. Save data can be exported/imported through downloading a JSON file or via copy/paste.
• Intra-tracker linking: Several elements of the tracker are now linked to each other (more correctly, all the UI is updated based on the same backend). For example, right-clicking a letter to add a checkmark will also mark that check on the map tracker, and vice versa. This type of behavior exists in other places where it makes sense.
• Check counts: the map region buttons (Toad Town, Pleasant Path, etc) now append a number when checks are available in logic. This is the number of checks currently available there. On each map screen, there is more count information, presented in the format (checked/available/total).
• Granular show/hide: Tracker items are shown based on seed settings (e.g. the Forest Pass is hidden if Open Forest is on). Most items are shown by default. This PR adds a feature to override the default behavior for every item in the game individually.
• Star Spirit annotations: You can now right-click the star spirits to mark useful information about them, including chapter difficulty scaling and dungeon shuffle locations. If Limit Chapter Logic is active, you can also mark star spirits as disabled, which will mark the checks in those chapters out of logic and optionally hide the items and areas from the tracker entirely.
• Font: added an option to disable the Paper Mario font, as I find it kind of hard to read at times so I imagine other people probably do as well. Defaults to the Paper Mario font.

Potential concerns

Feature parity

All features that exist in the current tracker have been ported to this one, along with the above.

JS bundle size

The gzipped Javascript bundle for this project is ~170 kB. This includes most images since they're small enough to encode in base64. (I wish I could take credit for this, but I guess Vite does it automatically when images are small enough.) The total transferred size on page load is ~265 kB. For comparison, the total transferred size on the current tracker is ~400 kB.

Performance

In my testing on both desktop and mobile, the tracker is at least as responsive as the current one (in terms of time to update on input) and in most cases much more so.

DX

I respect that writing a Vue project is much different than writing a project like the current tracker and that none of the current contributors may even know (or want to learn) how to write code using Vue and Typescript. In my opinion, it's much easier to follow the logic of what's happening in this codebase, and I've tried to keep it as DRY as possible. That said, anyone who wants to contribute but isn't familiar with this stack can tag me somewhere and I'm totally willing to help you out.

Hosting complications

This project builds a static site which can be hosted with any usual web hosting method (apache, nginx, npm serve, etc). This pull request will merge in a Github Actions config which tests the project's formatting and linting, builds it, and uploads the build artifacts to Github. The dist folder from there is the static site, ready to be hosted. Build artifacts are kept for 90 days by default. More details on how to download these artifacts is here.

PR size

This is a very large PR, and because of the way Git works, the old files that have been deleted are kind of stuck in the repository, available to be checked out from older commits. I ultimately decided to make this PR anyway since keeping the history is a good thing even if it increases checkout times (it's not a huge repo anyway so the change is probably not that significant). However, if this is an issue, I can transfer ownership of the repo I've been using to build this to Phantom, which starts from the Vue project and doesn't have any of the history of this repo.

The site build from this codebase is hosted at https://pmr-tracker.christianlegge.dev/ and will update automatically when I push a new commit. You can use this for testing instead of building yourself if you want. (I also added myself to the credits, which I'm totally fine with removing if you want but I basically worked on this nonstop for 2 weeks and basically built it from scratch minus the design/assets so I thought it was appropriate lol)

Fixes #17, #41, #51, #56, #71, #73, #85, #86, #87, and #89. Obsoletes #65. Incorporates features from #81 and #82.

[christianlegge]

Oh, I also thought it was best not to squash the commits since if I did it would be one massive commit that would be a black hole for trying to find the source of any bugs I might have introduced. But I can squash them if you would prefer.