arclib-overlay

a flexible base sprite for use in browser games.

Usage no npm install needed!

<script type="module">
  import arclibOverlay from 'https://cdn.skypack.dev/arclib-overlay';
</script>

README

Overlay

a simple overlay for use in browser games.

Install

    npm install --save arclib-overlay

Usage

const overlay = createOverlay(<node>, <callback>)

Create the overlay passing in a root node to attach to. Return a template function in the callback.

Create

Create a new overlay and attach a new lit-html template function. html and styleMap are provided to the callback.

    const overlay = createOverlay(document.body, ({ html, styleMap }) => {
        let styles = {
            color: 'red'
        }

        let overlayTemplate = (data) => {
            return html`
                <div style=${styleMap(styles)}>
                    <p>Score: ${data.score}</p>
                </div>
            `;
        }

        return overlayTemplate;
    });

Update

Update the overlay

    // set score to 10
    overlay.update({
        score: 10
    })