The gameface-menu is part of the Gameface custom components suite. As most of the components in this suite it uses slots to allow dynamic content.

Installation

npm i coherent-gameface-menu

Usage with UMD:

<script src="./node_modules/coherent-gameface-menu/dist/menu.production.min.js"></script>

• add the menu component to your html:

<gameface-menu></gameface-menu>

This is all! Load the file in Gameface to see the menu.

Usage with JavaScript:

If you wish to import the GamefaceMenu using JavaScript you can remove the script tag and import it like this:

import { GamefaceMenu, GamefaceLeftMenu, GamefaceBottomMenu, GamefaceRightMenu } from 'coherent-gameface-menu';

or simply

import 'coherent-gameface-menu';

Note that this approach requires a module bundler like Webpack or Rollup to resolve the modules from the node_modules folder.

Usage in the HTML:

The menu component exposes several custom HTML elements:

• <gameface-menu> - the menu component, it has one slot name menu-item; this is where the menu elements go to; by default it is anchored to the top.

• <menu-item> - the menu item; provides navigation and onevent handlers

• <gameface-left-menu> - a gameface menu that is anchored to the left

• <gameface-right-menu> - a gameface menu that is anchored to the right

• <gameface-bottom-menu> - a gameface menu that is anchored to the bottom

<gameface-menu>
    <menu-item slot="menu-item">Start Game</menu-item>
    <menu-item slot="menu-item">Settings</menu-item>
    <menu-item slot="menu-item">Credits</menu-item>
</gameface-menu>

This will create a horizontal menu component. Use the orientation attribute to change the layout of the menu to vertical:

<gameface-menu orientation="vertical">
    <menu-item slot="menu-item">Start Game</menu-item>
    <menu-item slot="menu-item">Settings</menu-item>
    <menu-item slot="menu-item">Credits</menu-item>
</gameface-menu>

The supported orientation values are horizontal and vertical.

And you can use one of the anchored menus for easier positioning.

The <menu-item> element supports all onevent handlers. If you want to execute a function on click add it as you would normally add it to an HTMLElement:

<gameface-menu orientation="vertical">
    <menu-item slot="menu-item" onclick="console.log('Clicked on Start Game.')">Start Game</menu-item>
</gameface-menu>

or pass a function

<script>
function onStartGame() {
    console.log('Clicked on Start Game.);
}
</script>

<gameface-menu orientation="vertical">
    <menu-item slot="menu-item" onclick="onStartGame()">Start Game</menu-item>
</gameface-menu>

Nesting Menus

You can put a <gameface-menu> element as a child of <menu-item> of you want to have a sub-menu. The nested menu will be automatically displayed on click of the parent menu-item. It will also be automatically positioned.

<gameface-menu>
    <menu-item slot="menu-item">Start Game</menu-item>
    <menu-item slot="menu-item">
        Settings
        <gameface-menu id="settings" orientation="vertical">
            <menu-item slot="menu-item">Graphics</menu-item>
            <menu-item slot="menu-item">Keyboard</menu-item>
            <menu-item slot="menu-item">Mouse</menu-item>
        </gameface-menu>
    </menu-item>
    <menu-item slot="menu-item">Credits</menu-item>
</gameface-menu>

Add the Styles

<link rel="stylesheet" href="coherent-gameface-components-theme.css">
<link rel="stylesheet" href="menus/menu.css">
<link rel="stylesheet" href="menus/bottom/bottom.css">
<link rel="stylesheet" href="menus/left/left.css">
<link rel="stylesheet" href="menus/right/right.css">

To overwrite the default styles, simply create new rules for the class names that you wish to change and include them after the default styles.