@dartbot/dartboard NPM

Dartboards rendered with different styles

This webcomponent follows the open-wc recommendation.

Design Goals

🎨 HTML Canvas Render using HTMLCanvas

🍦 Vanilla Web Component Export as a dependency-free vanilla web component, usable with just HTML, CSS, and JS

#️⃣ Typescript Written in Typescript

🌈 Styles Offer fully customizable styling. Where possible use CSS to control customized settings

🧾 Support CSS props CSS properties like padding, margin, filters, etc., should affect the element as expected

🔎 Pan & Zoom Support ability to zoom in and change center point of the board

🌐 Accessibility Implement accessibility recommendations. WCAG, WAI-ARIA

🕹️ Interactivity Support user interactivity features including touch input, hover, selection, highlighting, and clicking.

npm i @dartbot/dartboard

<script type="module">
  import '@dartbot/dartboard/dartbot-dartboard.js';
</script>

<dartbot-dartboard></dartbot-dartboard>

To scan the project for linting and formatting errors, run

npm run lint

To automatically fix linting and formatting errors, run

npm run format

To execute a single test run:

npm run test

To run the tests in interactive watch mode run:

npm run test:watch

To run a local instance of Storybook for your component, run

npm run storybook

To build a production version of Storybook, run

npm run storybook:build

For most of the tools, the configuration is in the package.json to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

npm start

To run a local development server that serves the basic demo located in demo/index.html