For instance, imagine a 'Custom UI' tab in the campaign properties where you could define assets, styles, and markup for a simple widget to display your impersonated token's HP with a 'Update HP' macrolink in the top left corner, based on a dynamically applied body class maptool would apply when I impersonate a token:
Code: Select all
<style>
.my-hp { display: none; color: white; background: black; }
body.mt-token-impersonated .hp { display: block; }
</style>
<div class="my-hp">
[getProperty( HP, getImpersonated() )]/[getProperty( MaxHP, getImpersonated() )]<br>
<a href="[r:macroLinkText('ChangeHP@CAMPAIGN', 'none', '', getImpersonated())]">Update HP</a>
</div>
For dedicated framework builders, this could allow frameworks to move some or all of their functionality from the Selection/Impersonation/Campaign panels directly into the Map View UI for players, freeing up a lot of space and making the game more immersive. So many possibilities!
Considerations / Concerns
- UI Shouldn't interfere with Map View. I of course don't want HTML content that isn't clickable to interfere with normal use of the Map View. The Layer and Drawing Tools modal should hover above any HTML UI, like it does now above the map view. Since it is not visible to players using the pointer tool, it wouldn't interfere much with UI and wouldn't need to be configured.
- Port the 'Stat Sheet' to this overlay system in new campaigns. The hover-activated 'Stat Sheet' & 'Notes View' that appears when you click on an objects should be targetable via CSS. Perhaps it could be re-implemented via this new system by default to serve as a basis for frameworks to expand upon. Apart from that possibility, it should just sit directly over any HTML layer to preserve backwards compatibility.
- Maybe wait for Javascript? This idea might be better done once some method of getting properties with Javascript is implemented, as MT Script might not be a great choice for such a UI overlay frame in terms of performance. Hopeful some devs have some thoughts on that.
- UI must appear to update in real-time to be useful. Currently, frames (including the hover-stat sheet) must be reloaded manually/via macro to update their value. I would want this UI to be more dynamic, firing a refresh upon changes on selected/impersonated tokens, and perhaps other designated 'watched' tokens. I would want the experience for most people to be that the UI updating would 'just work' and wouldn't require emitting update events from other macros, for instance.
- UI should be toggleable. A menu item or toolbar button could simply turn the UI on or off if it is affecting performance or glitching out.
- Custom UI should be defined in Campaign properties. I wouldn't mind if a Macro or Library Token could load it or change it with macros, but I would prefer if it was core functionality in 'Campaign Properties', including special graphical assets used just for the UI.
- Including a Frontend Javascript Library..? Making this approach compatible with front end frameworks like vuejs would be.. uh, amazing? They are very performant, cross-browser, and compact, so being able to make a VueJS app and somehow 'drop' it into a campaign as a UI would be just incredible - though I admit I have no idea how this stuff would work under the hood.