@dartbot/dartboard
Version:
Dartboard implemented as a vanilla web component
56 lines (55 loc) • 1.92 kB
TypeScript
import { PolarPoint, Board } from './utils';
/**
* Custom pointer event that includes additional detail about what section
* of the board was interacted and points translated to the boards coordinates.
* The dartboard works with left hand coordinates with 0,0 centered in the
* middle of the boar. Browser events are reported with 0,0 in the upper left
* corner with the y-axis pointing down. Custom pointer events include the
* points translated to coordinates the board understands. Units are reported
* in mm relative to the board radius.
*/
export type DartboardPointerEvent = CustomEvent<{
event: PointerEvent;
point: {
x: number;
y: number;
};
polar: PolarPoint;
sector: number;
ring: number;
}>;
export declare class Dartboard extends HTMLElement {
#private;
get board(): Board.Board;
set board(value: Board.Board);
get zoom(): number;
set zoom(value: number);
get centerPoint(): PolarPoint;
set centerPoint(value: PolarPoint);
get hits(): PolarPoint[];
set hits(value: PolarPoint[]);
get fit(): string;
set fit(value: string);
static get observedAttributes(): string[];
constructor();
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
handleEvent(event: Event): void;
render(): void;
/**
* Translates a point from the coordinate system of the canvas.
* The point is adjusted so that 0,0 is the center of the board with
* the y-axis pointing up. The units are translated from pixels to
* millimeters relative to the board radius.
* @param x - X coordinate in canvas space
* @param y - Y coordinate in canvas space
*/
translatePoint(x: number, y: number): {
point: {
x: number;
y: number;
};
polar: PolarPoint;
sector: number;
ring: number | undefined;
};
}