Bhumba Board

This is a web component library for rendering visualizations of Battlesnake board states.

It is purpose-built for some of my own Battlesnake projects and experiments, and as such may not be very customizable or useful to others.

Screenshot

Status

This project is experimental and your milage may vary.

Components

bhumba-board

Architecture

Bhumba Board is built using Stencil.

Stencil is a compiler for building fast web apps using Web Components.

Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.

Stencil components are just Web Components, so they work in any major framework or with no framework at all.

How to Build

npm install
npm run build

How to Test

Run Tests Once

npm run test

Reload Tests When Files Change

npm run test-watch

How to Preview in Development Server

npm start

How to Use

See the source code of src/index.html for an example of how to use the bhumba-board component in a web page and how to set its board state using JavaScript. This is the same page which is served when you run npm start.

See Components for component-specific documentation.

The build script provides output in various formats in the dist directory. Refer to Stencil's documentation for how to import the components in your own application.

This project is not yet published as a pre-built package.

Example Using NPM Link (Just for Testing)

In the bhumba-board source root directory, run npm link
In the consuming app's source root directory, run npm link bhumba-board --save-dev
Add something like the following to the consuming app's HTML head:

<script type="module" src="./node_modules/bhumba-board/dist/bhumba-board/bhumba-board.esm.js"></script>
<script nomodule src="./node_modules/bhumba-board/dist/cjs/bhumba-board.cjs.js"></script>

Open Invite

If you have any questions, or just wish to geek out and chat about Battlesnake feel free to reach out!

If you're using this library for a project, I'd love to hear about it.

You can reach me at xtagon@gmail.com, or catch me in Battlesnake Discord (username: @xtagon).

License

This project is released under the terms of the MIT License.

xtagon/bhumba-board