This webcomponent follows the open-wc recommendation.
npm i dartbot-board-canvas
<script type="module">
import 'dartbot-board-canvas/dartbot-board-canvas';
</script>
<dartbot-board-canvas></dartbot-board-canvas>
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
- HTML component that renders an interactive dartboard
- Render using HTMLCanvas
- Exported as a vanilla web component with not dependencies, libraries, or frameworks
- Control styling via css as much as possible
- Implement accessibility recommendations
- Typescript
- Attributes, input props, events, mutation observer
- Auto resizing
- Touch input
- Interactivity (hover, select, highlight, click)