Finally, we modify the web portal to let us enter some goals. A custom code hook lets us add new tabs to the character edit screen without touching the core code.
First we’re going to define the tab navigation control. Edit ares-webportal/app/templates/components/char-edit-custom-tabs.hbs and add:
<li><a data-bs-toggle="tab" class="nav-link" href="#goals">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/char-edit-custom.hbs and add:
<div id="goals" class="tab-pane fade in">
{{markdown-editor text=this.char.custom.goals}}
</div>
id=goals 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.
The markdown-editor control lets players easily edit and preview markdown text.
The controls above let us enter the data. To actually send the data to the game, there’s one more place we need to wire up: the edit controller. That lives here: ares-webportal/app/components/char-edit-custom.js
The controller has as an onUpdate method that gets activated when the player clicks the ‘save’ button. In there it sets up a hash with all the profile data the player entered. We’ll add our goals to it.
return { goals: this.get('char.custom.goals') }
return { goals: xxx, other: xxx }