Skip to content
On this page

Custom start menu buttons

Customm start menu buttons can be added to the game using the plugin system. Plugins can have a startMenuButtons array containing objects that define those custom buttons

How to use

in src/index.ts (or any other typescript file), create a new plugin:

ts
export class StartButtonsPlugin extends NarratPlugin {
  public startMenuButtons = [
    {
      id: 'test1',
      text: 'Test 1',
      action: () => window.open('https://get-narrat.com')
    },
    {
      id: 'test2',
      text: 'Test 2',
      popupComponent: {
        name: 'SkillsWindow',
        component: SkillsWindow,
      },
    },
  ];
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Remember to register the plugin before starting the app:

ts
const onPageLoad = () => {
  registerPlugin(new StartButtonsPlugin());
  startApp({
    baseAssetsPath: assetsPath,
    baseDataPath: dataPath,
    configPath: `${dataPath}data/config.yaml`,
    logging: false,
    debug,
  });
};
1
2
3
4
5
6
7
8
9
10

The menu buttons have the following props:

  • id: string id of the button. Will be used to give a unique css class to the button and potential popups created with it
  • text: Text to display on the button (and title of the popup if using it)
  • action (optional): A function to run when the button is clicked
  • popupComponent (optional): An object containing info about a component to display in a popup when clicking the button.
    • name: Name of the component to use, as a string
    • component: The actual Vue component to use

If using the popup component option, when clicking the button a modal will open, and inside the modal will be the Vue component that has been supplied.