Biography Page Preview - click picto to visit in a new tab

If a group of pictos cover over a picto you want to see, press Escape to shrink the group.

Click to toggle hover biography previews

Feel free to comment here or throw suggestions at https://discord.gg/MrmWCXNJmS, and in particular let me know if your picto isn't rendering correctly, and I'll look into the problem!

Disclaimer

I do not intend for this to replace the incredible work of GMSuerte et. al., merely a supplemental tool, demo, test platform, or proof of concept.

I am not a system designer like GMS and you javascript geniuses are; I cannot guarantee an absence of catastrophic bugs. The code is monolithic. There is no design pattern. I don't even know what a design pattern is. I don't even know what javascript is.

Author Note

HHhhhhh rut roles are hacked in temporarily, I'll try to do a better job asap, and generally catch up ;w; <3

So yes! A handful of you have been waiting (a long time), but finally: here's a thing for all you, my friends, to use if you want to!

The aim was to prototype a little tool to help find players, with specific aims being load times, ease of picto clicking, and custom previews! ...I think I managed to only failed one of those, but I'll let you be the judge. ^^' If all that this accomplishes is to serve as inspiration for more talented coders to make the map or site even better, then I'll call it a success.

If you've gotten this far and are curious, please allow me to explain some strangeness in the design...
- Nowhere in the code are links to TEFc, rather, URLs are read from text in this post. That way, you can get from TEFc to the js code, but you can't naively get from the js code to TEFc, which I (maybe wrongly) figured was important.
- I've at least tried to get some encapsulation by making the map its own object.
- I've tried to maintain cross-browser compatibility, yielding some code which I'm sure is not modern best practice. In as many cases as I could, I chose functions that are supported by all the browsers (even IE, bane of js).
- No cookies yet. They'd easily allow you to save your fav map options, but I haven't learned the code or the legal considerations about requiring permission to save cookies... it seems like a whole thing. If there's enough interest I'll look into it soon. In the mean time, to let you save your options, I'm (ab)using the anchor portion of the page href so you can bookmark the page with your chosen settings. This is most likely temporary.
- Sorry that the js file is one monolithic function fest. It at least has the benefit of a single external URL to resolve.
- More that I've forgotten about, I'm sure...

A tiny spin-off from this I'd like to make is a tool that renders out a big version of a player's picto given their username or pictoword.

Improvements

If enough people find it useful, I have a bunch of future improvements in mind. If you have some, please let me know! In the mean time here are mine:

- Option to click a picto to open preview rather than hover over it. Then double click, middle click, or click a link inside preview to visit the bio page
- If a lot of people recognise the deer by the URL, I can add that to the preview box for an easier place to find it rather than in the bottom left hand corner
- A list of pictos who have logged off in the current session, in case you missed someone you wanna check
- Custom preview titles and text, which you can set with special syntax inside your own biographies. This is already half implemented but is currently too slow to post in good conscience
- Cookies to replace #args and give a nicer way of saving settings
- Settings for sizes of various things like pictos, locations, expanded pictos, perhaps the map itself
- What are comments
- Fix a logic error in the spreading (which for now looks pretty good but is technically wrong)
- Better spreading, where pictos go outwards in the direction nearest to their position instead of randomly as now
- BETTER PREVIEWS which are actually the correct height. You'd be surprised how hard it is to tell js how tall something is, or position something in js when it's not deterministic, or have css clamp a box inside another box when the height isn't deterministic, etc Fixed, perhaps satisfactorily
- Maybe, y'know, make the code less horrendous.

Thanks to

Everyone who has done work into pictograms and player data, including:
- Aivilo
- GMSuerte
Everyone who helped me to design and build this thing, including:
- HootinOwl
- ShrinkingRose
- MisMantis
- LolCoyote
- Unplugged
For this game and this community:
- M&A
For being here, and being strong for those who need it:
- You <3