Now that we have our data being sent from the game to the website, we can actually show it on the web profile. A custom code hook lets us add new tabs to the “System” section of the character profile without touching the core code.
First we’re going to define the tab navigation control. Edit ares-webportal/app/templates/components/profile-custom-tabs.hbs and add:
<li class="nav-item"><a data-bs-toggle="tab" class="nav-link" href="#systemgoals">Goals</a></li>
Next we’ll define the contents of the tab. This lives in a different file, so edit ares-webportal/app/templates/components/profile-custom.hbs and add:
<div id="systemgoals" class="tab-pane fade">
{{{ansi-format text=this.char.custom.goals}}}
</div>
id=systemgoals must match the name you used in the tab navigation control, but without the # in front. This name must be unique across the entire character edit template, so it’s suggested that you use something like myplugin-tabname.
Here we’re using the ansi-format helper because the goals can contain fancy formatting. For a raw text field we could have just used char.goals by itself.
If you ever want more tabs, add them the same way as the first. Just make sure they all have unique IDs.
You should have enough in place now to test the display component. But first we need to tell the game to reload your new code.
load profile - Loads the web request updates on the game side.
website/deploy - Updates the templates on the web side.