Building your own overlay

Getting Started

First you will need to create a new .js file in the nodecg/bundles/slippi-hud/graphics/elements/templates folder

Then you'll need to either copy one of my existing js into it and edit it as you'd like it to look/work

or you can take this barebones stucture and built your own overlay from scratch

Lets take a look at the Slippi-HUD template structure.

import { html, css } from 'lit';
import { repeat } from 'lit/directives/repeat.js';

import '@vaadin/vaadin-ordered-layout/vaadin-vertical-layout';
import '@vaadin/vaadin-ordered-layout/vaadin-horizontal-layout';

export const template = function () {

if (!this.ready)
return html``;

return html`
<Everything that makes up the overlay>
'

export const style = function () {

return css`

:host {
}


`;
}

To make this work with the overlay switching compatibility of the dashboard you will style script the webpage with the <style></style> tags in the return html instead of the return css LIT function.

You can find a list of variables here