@dartbot/dartboard

{ "schemaVersion": "1.0.0", "readme": "", "modules": [ { "kind": "javascript-module", "path": "src/Dartboard.ts", "declarations": [ { "kind": "class", "description": "", "name": "Dartboard", "members": [ { "kind": "field", "name": "#canvas", "privacy": "private", "type": { "text": "HTMLCanvasElement" }, "default": "this.#shadow.querySelector('canvas')!" }, { "kind": "field", "name": "#hits", "privacy": "private", "type": { "text": "PolarPoint[]" }, "default": "[]" }, { "kind": "field", "name": "#zoom", "privacy": "private", "default": "0", "type": { "text": "number" } }, { "kind": "field", "name": "#fit", "privacy": "private", "type": { "text": "string" }, "default": "'contain'" }, { "kind": "field", "name": "#centerPoint", "privacy": "private", "type": { "text": "object" }, "default": "{ radius: 0, angle: 0 }" }, { "kind": "field", "name": "#shadow", "privacy": "private", "type": { "text": "ShadowRoot" } }, { "kind": "field", "name": "#board", "privacy": "private", "type": { "text": "Board.Board" } }, { "kind": "field", "name": "board", "type": { "text": "Board.Board" } }, { "kind": "field", "name": "zoom", "type": { "text": "number" } }, { "kind": "field", "name": "centerPoint", "type": { "text": "PolarPoint" } }, { "kind": "field", "name": "hits", "type": { "text": "PolarPoint[]" } }, { "kind": "field", "name": "fit", "type": { "text": "string" } }, { "kind": "method", "name": "handleEvent", "parameters": [ { "name": "event", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "render" }, { "kind": "method", "name": "translatePoint", "parameters": [ { "name": "x", "type": { "text": "number" }, "description": "X coordinate in canvas space" }, { "name": "y", "type": { "text": "number" }, "description": "Y coordinate in canvas space" } ], "description": "Translates a point from the coordinate system of the canvas.\nThe point is adjusted so that 0,0 is the center of the board with\nthe y-axis pointing up. The units are translated from pixels to\nmillimeters relative to the board radius." }, { "kind": "field", "name": "innerHTML", "default": "` <style> :host { display: flex; width: 100%; aspect-ratio: 1 / 1; box-sizing: border-box; user-select: none; } canvas { width: 100%; height: 100%; background-color: var(${Token.canvasBg}, transparent); } </style> <canvas></canvas> `" } ], "attributes": [ { "name": "zoom" }, { "name": "center-angle" }, { "name": "center-radius" }, { "name": "fit" } ], "superclass": { "name": "HTMLElement" }, "tagName": "dartbot-dartboard", "customElement": true } ], "exports": [ { "kind": "js", "name": "Dartboard", "declaration": { "name": "Dartboard", "module": "src/Dartboard.ts" } } ] }, { "kind": "javascript-module", "path": "src/dartbot-dartboard.ts", "declarations": [], "exports": [ { "kind": "custom-element-definition", "name": "dartbot-dartboard", "declaration": { "name": "Dartboard", "module": "/src/Dartboard" } } ] }, { "kind": "javascript-module", "path": "src/index.ts", "declarations": [], "exports": [ { "kind": "js", "name": "Dartboard", "declaration": { "name": "Dartboard", "module": "./Dartboard.js" } }, { "kind": "js", "name": "*", "declaration": { "name": "*", "package": "./utils" } } ] }, { "kind": "javascript-module", "path": "stories/_s1_playground.stories.ts", "declarations": [ { "kind": "variable", "name": "meta", "default": "{ title: 'Playground', render: () => `<dartbot-dartboard></dartbot-dartboard>`, args: {}, decorators: [withActions], parameters: { actions: { handles: [ 'dartboard-click', 'dartboard-pointerdown', 'dartboard-pointerup', ], }, }, } satisfies Meta<DartboardProps>" }, { "kind": "variable", "name": "Playground", "type": { "text": "Story" }, "default": "{ name: 'Playground', args: { [Token.boardBg]: tokenDefaults[Token.boardBg], [Token.sectorBg1]: tokenDefaults[Token.sectorBg1], [Token.sectorBg2]: tokenDefaults[Token.sectorBg2], [Token.sectorBg3]: tokenDefaults[Token.sectorBg3], [Token.sectorBg4]: tokenDefaults[Token.sectorBg4], [Token.wireShow]: tokenDefaults[Token.wireShow] === '1', [Token.wireWidth]: parseFloat(tokenDefaults[Token.wireWidth]), [Token.wireColor]: tokenDefaults[Token.wireColor], [Token.wireShadowShow]: tokenDefaults[Token.wireShadowShow] === '1', [Token.wireShadowColor]: tokenDefaults[Token.wireShadowColor], [Token.wireShadowBlur]: parseFloat(tokenDefaults[Token.wireShadowBlur]), [Token.wireShadowOffsetX]: parseFloat( tokenDefaults[Token.wireShadowOffsetX], ), [Token.wireShadowOffsetY]: parseFloat( tokenDefaults[Token.wireShadowOffsetY], ), [Token.wireRingOffset]: parseFloat(tokenDefaults[Token.wireRingOffset]), [Token.numberShow]: tokenDefaults[Token.numberShow] === '1', [Token.numberWidth]: parseFloat(tokenDefaults[Token.numberWidth]), [Token.numberColor]: tokenDefaults[Token.numberColor], [Token.numberInset]: parseFloat(tokenDefaults[Token.numberInset]), [Token.numberWireColor]: tokenDefaults[Token.numberWireColor], [Token.numberWireShow]: tokenDefaults[Token.numberWireShow] === '1', [Token.numberWireWidth]: parseFloat(tokenDefaults[Token.numberWireWidth]), [Token.hitRadius]: parseFloat(tokenDefaults[Token.hitRadius]), [Token.hitFillColor]: tokenDefaults[Token.hitFillColor], [Token.hitStokeColor]: tokenDefaults[Token.hitStokeColor], [Token.hitStrokeWidth]: parseFloat(tokenDefaults[Token.hitStrokeWidth]), }, argTypes: { [Token.boardBg]: { description: 'Background color of the board', control: { type: 'color' }, }, [Token.sectorBg1]: { description: 'Board sector color 1', control: { type: 'color' }, }, [Token.sectorBg2]: { description: 'Board sector color 2', control: { type: 'color' }, }, [Token.sectorBg3]: { description: 'Board sector color 3', control: { type: 'color' }, }, [Token.sectorBg4]: { description: 'Board sector color 4', control: { type: 'color' }, }, [Token.wireShow]: { description: 'Show the wire between sections' }, [Token.wireColor]: { description: 'Color of the wire', control: { type: 'color' }, }, [Token.wireWidth]: { description: 'Width of the wire', control: { type: 'number' }, }, [Token.wireShadowShow]: { description: 'Show a drop shadow under the wire', }, [Token.wireShadowColor]: { description: 'Color of the wire shadow', control: { type: 'color' }, }, [Token.wireShadowBlur]: { description: 'Blur radius of the wire shadow' }, [Token.wireShadowOffsetX]: { description: 'X offset of the wire shadow' }, [Token.wireShadowOffsetY]: { description: 'Y offset of the wire shadow' }, [Token.wireRingOffset]: { description: 'Distance the wire should extend outside the last ring', }, [Token.numberShow]: { description: 'Show the sector numbers around the edge of the board', }, [Token.numberColor]: { description: 'Color of the sector numbers', control: { type: 'color' }, }, [Token.numberWidth]: { description: 'Width of the line stroke for numbers', }, [Token.numberInset]: { description: 'Distance the numbers should be inset from the edge of the board', }, [Token.numberWireShow]: { description: 'Show the outer ring wire around the numbers', }, [Token.numberWireColor]: { description: 'Color of the number wire', control: { type: 'color' }, }, [Token.numberWireWidth]: { description: 'Width of the line stroke for the number wire', }, [Token.hitRadius]: { description: 'Radius of the hit marker', control: { type: 'number' }, }, [Token.hitFillColor]: { description: 'Fill color of the hit marker', control: { type: 'color' }, }, [Token.hitStokeColor]: { description: 'Stroke color of the hit marker', control: { type: 'color' }, }, [Token.hitStrokeWidth]: { description: 'Width of the stroke of the hit marker', control: { type: 'number' }, }, }, render: (params, { id }) => { const style = ` .story-playground { dartbot-dartboard ${Token.boardBg}: ${params[Token.boardBg]}; ${Token.sectorBg1}: ${params[Token.sectorBg1]}; ${Token.sectorBg2}: ${params[Token.sectorBg2]}; ${Token.sectorBg3}: ${params[Token.sectorBg3]}; ${Token.sectorBg4}: ${params[Token.sectorBg4]}; ${Token.wireShow}: ${params[Token.wireShow] ? '1' : '0'}; ${Token.wireColor}: ${params[Token.wireColor]}; ${Token.wireWidth}: ${params[Token.wireWidth]}; ${Token.wireShadowShow}: ${params[Token.wireShadowShow] ? '1' : '0'}; ${Token.wireShadowColor}: ${params[Token.wireShadowColor]}; ${Token.wireShadowBlur}: ${params[Token.wireShadowBlur]}; ${Token.wireShadowOffsetX}: ${params[Token.wireShadowOffsetX]}; ${Token.wireShadowOffsetY}: ${params[Token.wireShadowOffsetY]}; ${Token.wireRingOffset}: ${params[Token.wireRingOffset]}; ${Token.numberShow}: ${params[Token.numberShow] ? '1' : '0'}; ${Token.numberColor}: ${params[Token.numberColor]}; ${Token.numberWidth}: ${params[Token.numberWidth]}; ${Token.numberInset}: ${params[Token.numberInset]}; ${Token.numberWireShow}: ${params[Token.numberWireShow] ? '1' : '0'}; ${Token.numberWireColor}: ${params[Token.numberWireColor]}; ${Token.numberWireWidth}: ${params[Token.numberWireWidth]}; ${Token.hitRadius}: ${params[Token.hitRadius]}; ${Token.hitFillColor}: ${params[Token.hitFillColor]}; ${Token.hitStokeColor}: ${params[Token.hitStokeColor]}; ${Token.hitStrokeWidth}: ${params[Token.hitStrokeWidth]}; } } `; const template = ` <style> dartbot-dartboard { width: 100%; height: unset; aspect-ratio: 1 / 1; padding: 0rem; --dartbot-fit: cover; } </style> <style>${style}</style> <script defer> (() => { const root = document.getElementById('${id}'); const board = root.querySelector('dartbot-dartboard'); board.addEventListener('dartboard-click', (event) => { // Get the point and ring/sector info from the event const { detail, target } = event; const { polar, point, sector, ring } = detail; // Add a new hit to the board target.hits = [...target.hits, polar]; }); })(); </script> <div id=\"${id}\" class=\"story-playground\"> <dartbot-dartboard></dartbot-dartboard> </div> `; return template; }, }" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "meta", "module": "stories/_s1_playground.stories.ts" } }, { "kind": "js", "name": "Playground", "declaration": { "name": "Playground", "module": "stories/_s1_playground.stories.ts" } } ] }, { "kind": "javascript-module", "path": "stories/_s2_resize.stories.ts", "declarations": [ { "kind": "variable", "name": "meta", "default": "{ title: 'Resize', decorators: [baseDecorator, themeDecorator], parameters: { docs: { source: { transform } }, }, } satisfies Meta" }, { "kind": "variable", "name": "Dimensions", "type": { "text": "Story" }, "default": "{ name: 'story-dimensions', tags: ['hidden'], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { dartbot-dartboard { border: .1em dashed #0002; } } </style> <style> #${id} { dartbot-dartboard:nth-child(1) { width: 8em; height: 18em; } dartbot-dartboard:nth-child(2) { width: 18em; height: 10em; } dartbot-dartboard:nth-child(3) { width: 10em; height: 12em; } } </style> <div id=\"${id}\"> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> </div> `, }" }, { "kind": "variable", "name": "Dynamic", "type": { "text": "Story" }, "default": "{ name: 'Resize', decorators: [], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { border: 2px dashed #0002; max-width: 60em; min-width: 10em; display: flex; dartbot-dartboard { padding: 1em; width 100%; height: 100%; } } </style> <style> #${id} { overflow: auto; resize: both; width: 30em; } </style> <pre>Click and drag the bottom right corner to resize</pre> <div id=\"${id}\"> <dartbot-dartboard></dartbot-dartboard> </div> `, }" }, { "kind": "variable", "name": "Width", "type": { "text": "Story" }, "default": "{ name: 'story-width', tags: ['hidden'], decorators: [], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { dartbot-dartboard { border: 2px dashed #0002; } } </style> <style> #${id} { dartbot-dartboard:nth-child(1) { width: 30em; } dartbot-dartboard:nth-child(2) { width: 20em; } dartbot-dartboard:nth-child(3) { width: 10em; } } </style> <div id=\"${id}\"> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> </div> `, }" }, { "kind": "variable", "name": "AspectRatio", "type": { "text": "Story" }, "default": "{ name: 'story-aspect', tags: ['hidden'], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { dartbot-dartboard { border: 2px dashed #0002; } } </style> <style> #${id} { dartbot-dartboard:nth-child(1) { aspect-ratio: 1 / 1; width: 20em; } dartbot-dartboard:nth-child(2) { aspect-ratio: 21 / 9; width: 20em; } } </style> <div id=\"${id}\"> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> </div> `, }" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "meta", "module": "stories/_s2_resize.stories.ts" } }, { "kind": "js", "name": "Dimensions", "declaration": { "name": "Dimensions", "module": "stories/_s2_resize.stories.ts" } }, { "kind": "js", "name": "Dynamic", "declaration": { "name": "Dynamic", "module": "stories/_s2_resize.stories.ts" } }, { "kind": "js", "name": "Width", "declaration": { "name": "Width", "module": "stories/_s2_resize.stories.ts" } }, { "kind": "js", "name": "AspectRatio", "declaration": { "name": "AspectRatio", "module": "stories/_s2_resize.stories.ts" } } ] }, { "kind": "javascript-module", "path": "stories/_s4_color-wall.stories.ts", "declarations": [ { "kind": "variable", "name": "meta", "default": "{ title: 'Color Wall', } satisfies Meta" }, { "kind": "variable", "name": "ColorWall", "type": { "text": "StoryObj" }, "default": "{ name: 'Color Wall', args: { width: 16, height: 12, color1: '#00f', color2: '#f0b', color3: '#0fd', }, argTypes: { color1: { control: 'color' }, color2: { control: 'color' }, color3: { control: 'color' }, }, render: ({ color1, color2, color3, width, height }, { id }) => ` <script> document.addEventListener('DOMContentLoaded', () => { const interp = (c1, c2, percent) => c1 + percent * (c2 - c1); const container = document.getElementById('${id}'); if (container === null) return; container.replaceChildren(); const grid = { width: ${width}, height: ${height} }; const boards = [...new Array(grid.width * grid.height)] .map(() => document.createElement('dartbot-dartboard')); const max = Math.sqrt(grid.width ** 2 + grid.height ** 2); const c1 = { r: 200, g: 0, b: 50 }; const c2 = { r: 0, g: 0, b: 225 }; const c3 = { r: 0, g: 255, b: 0 }; boards.forEach((board, i) => { const x = i % grid.width; const y = Math.floor(i / grid.width); const dist = Math.sqrt(x ** 2 + y ** 2); const percent = 1 - dist / max; const color = \\`color-mix(in srgb, $\\{'${color1}'} $\\{percent * 100}%, $\\{'${color2}'})\\`; const color1 = 'hsl(from var(--dartbot-color) h s 30%'; const color2 = 'hsl(from var(--dartbot-color) h s 50%'; board.style.setProperty('--dartbot-color', color); board.style.setProperty('--dartbot-board-bg', color1); board.style.setProperty('--dartbot-sector-bg-1', color1); board.style.setProperty('--dartbot-sector-bg-2', color2); board.style.setProperty('--dartbot-sector-bg-3', color2); board.style.setProperty('--dartbot-sector-bg-4', color1); container.appendChild(board); // Change color on clicked board.addEventListener('mouseover', () => { board.style.setProperty('--dartbot-color', '${color3}'); board.render(); }); }); }); </script> <style data-dartbot-remove> #${id} { display: grid; grid-template-columns: repeat(${width}, 1fr); grid-column-gap: .1em; --dartbot-number-show: 0; --dartbot-wire-show: 0; } </style> <div id=\"${id}\"></div> `, }" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "meta", "module": "stories/_s4_color-wall.stories.ts" } }, { "kind": "js", "name": "ColorWall", "declaration": { "name": "ColorWall", "module": "stories/_s4_color-wall.stories.ts" } } ] }, { "kind": "javascript-module", "path": "stories/board.stories.ts", "declarations": [ { "kind": "variable", "name": "meta", "default": "{ title: 'Components/Dartboard', decorators: [baseDecorator, themeDecorator], parameters: { docs: { source: { transform } }, }, } satisfies Meta" }, { "kind": "variable", "name": "Rings", "type": { "text": "Story" }, "default": "{ name: 'story-rings', tags: ['hidden'], render: (_, { id }) => ` <script> (() => { const boards = document.querySelectorAll('#${id} dartbot-dartboard'); boards[0].board.rings = [10, 30, 80, 110, 150, 170]; boards[1].board.rings = [6.35, 16, 29, 37, 162, 170]; boards[2].board.rings = [6.35, 16, 30, 38, 79, 87, 120, 128, 162, 170]; const container = document.getElementById('${id}'); container?.replaceChildren(); boards.forEach((board) => { container?.appendChild(board); }); })(); </script> <div id=\"${id}\"> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> </div> `, }" }, { "kind": "variable", "name": "Sectors", "type": { "text": "Story" }, "default": "{ name: 'story-sectors', tags: ['hidden'], render: (_, { id }) => ` <script> (() => { const boards = document.querySelectorAll('#${id} dartbot-dartboard'); boards[0].board.sectors = [...new Array(20)].map((_, i) => i + 100); boards[1].board.sectors = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]; boards[2].board.sectors = [...new Array(40)].map((_, i) => i + 1); })(); </script> <div id=\"${id}\"> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> </div> `, }" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "meta", "module": "stories/board.stories.ts" } }, { "kind": "js", "name": "Rings", "declaration": { "name": "Rings", "module": "stories/board.stories.ts" } }, { "kind": "js", "name": "Sectors", "declaration": { "name": "Sectors", "module": "stories/board.stories.ts" } } ] }, { "kind": "javascript-module", "path": "stories/css.stories.ts", "declarations": [ { "kind": "variable", "name": "meta", "default": "{ title: 'Components/Dartboard', decorators: [baseDecorator, themeDecorator], parameters: { docs: { source: { transform } }, }, } satisfies Meta" }, { "kind": "variable", "name": "Padding", "type": { "text": "Story" }, "default": "{ name: 'story-padding', tags: ['hidden'], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { column-gap: 2px; dartbot-dartboard { width: 33%; border: 2px dashed #0002; background: #d0e2cc; --dartbot-canvas-bg: #fff; } } </style> <style> #${id} { dartbot-dartboard:nth-child(1) { padding: 2%; } dartbot-dartboard:nth-child(2) { padding: 4%; } dartbot-dartboard:nth-child(3) { padding: 8%; } } </style> <div id=\"${id}\"> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> </div> `, }" }, { "kind": "variable", "name": "Margin", "type": { "text": "Story" }, "default": "{ name: 'story-margin', tags: ['hidden'], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { background: #f443; dartbot-dartboard { background: #d0e2cc; --dartbot-canvas-bg: #fff; } } </style> <style> #${id} { dartbot-dartboard { padding: 2em; } dartbot-dartboard:nth-child(1) { margin: 1em; } dartbot-dartboard:nth-child(2) { margin: 2em; } dartbot-dartboard:nth-child(3) { margin: 4em; } } </style> <div id=\"${id}\"> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> </div> `, }" }, { "kind": "variable", "name": "Border", "type": { "text": "Story" }, "default": "{ name: 'story-border', tags: ['hidden'], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { column-gap: .25em; } </style> <style> #${id} { dartbot-dartboard { border: 0 dashed #5500b852; } dartbot-dartboard:nth-child(1) { border-width: .1em; } dartbot-dartboard:nth-child(2) { border-width: 1em; } dartbot-dartboard:nth-child(3) { border-width: 4em; } } </style> <div id=\"${id}\"> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> </div> `, }" }, { "kind": "variable", "name": "Filters", "type": { "text": "Story" }, "default": "{ name: 'story-filters', tags: ['hidden'], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { dartbot-dartboard { transition: filter .5s; } } </style> <style> #${id} { dartbot-dartboard:hover { filter: unset!important; } dartbot-dartboard:nth-child(1) { filter: blur(.25em); } dartbot-dartboard:nth-child(2) { filter: drop-shadow(2px 2px 10px black); } dartbot-dartboard:nth-child(3) { filter: opacity(.2); } dartbot-dartboard:nth-child(4) { filter: invert(1); } } </style> <div id=\"${id}\"> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> </div> `, }" }, { "kind": "variable", "name": "Transform", "type": { "text": "Story" }, "default": "{ name: 'story-transform', tags: ['hidden'], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { overflow: hidden; dartbot-dartboard { transition: transform .5s ease-out; } } </style> <style> #${id} { dartbot-dartboard:hover { transform: unset!important; } dartbot-dartboard:nth-child(1) { transform: rotate(180deg); } dartbot-dartboard:nth-child(2) { transform: rotate3d(0, 1, 0, 240deg) } dartbot-dartboard:nth-child(3) { transform: skew(10deg, 5deg); } dartbot-dartboard:nth-child(4) { transform: scale(1.2); } } </style> <div id=\"${id}\"> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> </div> `, }" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "meta", "module": "stories/css.stories.ts" } }, { "kind": "js", "name": "Padding", "declaration": { "name": "Padding", "module": "stories/css.stories.ts" } }, { "kind": "js", "name": "Margin", "declaration": { "name": "Margin", "module": "stories/css.stories.ts" } }, { "kind": "js", "name": "Border", "declaration": { "name": "Border", "module": "stories/css.stories.ts" } }, { "kind": "js", "name": "Filters", "declaration": { "name": "Filters", "module": "stories/css.stories.ts" } }, { "kind": "js", "name": "Transform", "declaration": { "name": "Transform", "module": "stories/css.stories.ts" } } ] }, { "kind": "javascript-module", "path": "stories/hits.stories.ts", "declarations": [ { "kind": "variable", "name": "meta", "default": "{ title: 'Components/Dartboard', decorators: [withActions, baseDecorator, zoomDecorator], parameters: { actions: { handles: [ 'dartboard-click', 'dartboard-pointerdown', 'dartboard-pointerup', ], }, docs: { source: { transform } }, }, } satisfies Meta" }, { "kind": "variable", "name": "Hits", "type": { "text": "Story" }, "default": "{ name: 'Hits', tags: ['hidden'], parameters: { aspectRatio: '16/9', zoom: 2, center: '{ radius: 140, angle: 1.57 }', }, render: (_, { id }) => ` <style data-dartbot-remove> #${id} { display: block; } </style> <script data-dartbot-remove defer> (() => { const root = document.getElementById('${id}'); const board = root.querySelector('dartbot-dartboard'); board.addEventListener('dartboard-click', (event) => { const { detail, target } = event; const { polar, point, sector, ring } = detail; target.hits = [...target.hits, polar]; }); })(); </script> <script defer> (() => { const root = document.getElementById('${id}'); const board = root.querySelector('dartbot-dartboard'); board.hits = [ {radius: 144, angle: 1.66 }, {radius: 143, angle: 1.54 }, {radius: 150, angle: 1.50 }, {radius: 128, angle: 1.55 }, {radius: 131, angle: 1.62 }, {radius: 135, angle: 1.51 }, {radius: 147, angle: 1.57 }, {radius: 104, angle: 0.57 }, {radius: 97, angle: 0.60 }, {radius: 100, angle: 0.54 }, {radius: 107, angle: 0.68 }, {radius: 97, angle: 0.69 }, {radius: 103, angle: 0.74 }, {radius: 102, angle: 0.66 }, {radius: 104, angle: 0.57 } ]; })(); </script> <div id=\"${id}\"> <dartbot-dartboard></dartbot-dartboard> </div> `, }" }, { "kind": "variable", "name": "Clicks", "type": { "text": "StoryObj" }, "default": "{ name: 'Click', tags: ['hidden'], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { display: block; } </style> <script defer> (() => { const root = document.getElementById('${id}'); const board = root.querySelector('dartbot-dartboard'); board.addEventListener('dartboard-click', (event) => { // Get the point and ring/sector info from the event const { detail, target } = event; const { polar, point, sector, ring } = detail; // Add a new hit to the board target.hits = [...target.hits, polar]; }); })(); </script> <div id=\"${id}\"> <pre>Click on the board to add a hit</pre> <dartbot-dartboard></dartbot-dartboard> </div> `, }" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "meta", "module": "stories/hits.stories.ts" } }, { "kind": "js", "name": "Hits", "declaration": { "name": "Hits", "module": "stories/hits.stories.ts" } }, { "kind": "js", "name": "Clicks", "declaration": { "name": "Clicks", "module": "stories/hits.stories.ts" } } ] }, { "kind": "javascript-module", "path": "stories/styles.stories.ts", "declarations": [ { "kind": "variable", "name": "meta", "default": "{ title: 'Components/Dartboard', decorators: [zoomDecorator, baseDecorator], parameters: { docs: { source: { transform } }, }, } satisfies Meta<DartboardProps>" }, { "kind": "variable", "name": "Default", "type": { "text": "Story" }, "default": "{ name: 'color-pallets', tags: ['hidden'], render: () => `<dartbot-dartboard></dartbot-dartboard>`, }" }, { "kind": "variable", "name": "Colors", "type": { "text": "Story" }, "default": "{ name: 'colors', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { flex-flow: row wrap; dartbot-dartboard { width: 33%; } dartbot-dartboard:nth-child(1) { --dartbot-board-bg: #283618; --dartbot-sector-bg-1: #606c38; --dartbot-sector-bg-2: #fefae0; --dartbot-sector-bg-3: #edbf8c; --dartbot-sector-bg-4: #bc6c25; --dartbot-wire-color: #271300; --dartbot-wire-shadow-show: 0; } dartbot-dartboard:nth-child(2) { --dartbot-board-bg: #574133; --dartbot-sector-bg-1: #f0ead2; --dartbot-sector-bg-3: #22764d; --dartbot-sector-bg-2: #4a6d67; --dartbot-sector-bg-4: #a53c3c; --dartbot-wire-color: #414833; --dartbot-wire-shadow-show: 0; } dartbot-dartboard:nth-child(3) { --dartbot-board-bg: #45003c; --dartbot-sector-bg-2: #e36414; --dartbot-sector-bg-4: #9a031e; --dartbot-sector-bg-3: #fb8b24; --dartbot-sector-bg-1: #5f0f40; --dartbot-wire-color: #000000; --dartbot-wire-shadow-show: 0; --dartbot-number-wire-color: #ff0092; --dartbot-number-color: #ff0092; } dartbot-dartboard:nth-child(4) { --dartbot-board-bg: #ff7b00; --dartbot-sector-bg-1: #ffdd00; --dartbot-sector-bg-2: #ffa200; --dartbot-sector-bg-3: #ffc300; --dartbot-sector-bg-4: #ffea00; --dartbot-wire-color: #c4580f; --dartbot-wire-shadow-show: 0; --dartbot-wire-width: 2; } dartbot-dartboard:nth-child(5) { --dartbot-board-bg: #111; --dartbot-sector-bg-1: #111; --dartbot-sector-bg-2: #eee; --dartbot-sector-bg-3: #ddd; --dartbot-sector-bg-4: #444; --dartbot-wire-color: #fff; --dartbot-wire-show: 0; --dartbot-wire-ring-offset: 20; --dartbot-number-inset: 24; } dartbot-dartboard:nth-child(6) { --dartbot-board-bg: #111; --dartbot-sector-bg-1: #111; --dartbot-sector-bg-2: #222; --dartbot-sector-bg-3: #111; --dartbot-sector-bg-4: #222; --dartbot-wire-color: #666; --dartbot-wire-width: 2; --dartbot-number-show: 0; --dartbot-wire-shadow-show: 0; } } </style> <div id=\"${id}\"> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> </div> `, }" }, { "kind": "variable", "name": "WireWidth", "type": { "text": "Story" }, "default": "{ name: 'wire-width', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { dartbot-dartboard:nth-child(1) { --dartbot-wire-show: 0; } dartbot-dartboard:nth-child(2) { --dartbot-wire-width: 1; } dartbot-dartboard:nth-child(3) { --dartbot-wire-width: 4; } } </style> <div id=\"${id}\"> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> </div> `, }" }, { "kind": "variable", "name": "WireShadowBlur", "type": { "text": "Story" }, "default": "{ name: 'shadow-blur', tags: ['hidden'], parameters: { aspectRatio: '16/9', zoom: 6, }, render: (_, { id }) => ` <style> #${id} { dartbot-dartboard:nth-child(1) { --dartbot-wire-shadow-show: 0; } dartbot-dartboard:nth-child(2) { --dartbot-wire-shadow-blur: 2; } dartbot-dartboard:nth-child(3) { --dartbot-wire-shadow-blur: 6; } } </style> <div id=\"${id}\"> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> </div> `, }" }, { "kind": "variable", "name": "WireShadowOffset", "type": { "text": "Story" }, "default": "{ name: 'shadow-offset', tags: ['hidden'], parameters: { aspectRatio: '16/9', zoom: 6, }, render: (_, { id }) => ` <style> #${id} { dartbot-dartboard:nth-child(1) { --dartbot-wire-shadow-offset-x: 0; --dartbot-wire-shadow-offset-y: 0; } dartbot-dartboard:nth-child(2) { --dartbot-wire-shadow-offset-x: 1; --dartbot-wire-shadow-offset-y: 1; } dartbot-dartboard:nth-child(3) { --dartbot-wire-shadow-offset-x: 4; --dartbot-wire-shadow-offset-y: 4; } } </style> <div id=\"${id}\"> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> </div> `, }" }, { "kind": "variable", "name": "WireRingOffset", "type": { "text": "Story" }, "default": "{ name: 'ring-offset', tags: ['hidden'], parameters: { aspectRatio: '16/9', zoom: 4, center: '{ radius: 170, angle: 1.57 }', }, render: (_, { id }) => ` <style> #${id} { dartbot-dartboard:nth-child(1) { --dartbot-wire-ring-offset: 0; } dartbot-dartboard:nth-child(2) { --dartbot-wire-ring-offset: 10; } dartbot-dartboard:nth-child(3) { --dartbot-wire-ring-offset: 25; } } </style> <div id=\"${id}\"> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> </div> `, }" }, { "kind": "variable", "name": "NumberShow", "type": { "text": "Story" }, "default": "{ name: 'numbers-show', tags: ['hidden'], parameters: { aspectRatio: '1/1', }, render: (_, { id }) => ` <style> #${id} { dartbot-dartboard:nth-child(1) { --dartbot-number-show: 1; } dartbot-dartboard:nth-child(2) { --dartbot-number-show: 1; --dartbot-number-wire-show: 0; } dartbot-dartboard:nth-child(3) { --dartbot-number-show: 0; --dartbot-wire-shadow-show: 0; } } </style> <div id=\"${id}\"> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> </div> `, }" }, { "kind": "variable", "name": "NumberInset", "type": { "text": "Story" }, "default": "{ name: 'numbers-inset', tags: ['hidden'], parameters: { aspectRatio: '16/9', zoom: 3, center: '{ radius: 170, angle: 1.57 }', }, render: (_, { id }) => ` <style> #${id} { dartbot-dartboard:nth-child(1) { --dartbot-number-inset: 0; } dartbot-dartboard:nth-child(2) { --dartbot-number-inset: 10; } dartbot-dartboard:nth-child(3) { --dartbot-number-inset: 30; } } </style> <div id=\"${id}\"> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> <dartbot-dartboard></dartbot-dartboard> </div> `, }" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "meta", "module": "stories/styles.stories.ts" } }, { "kind": "js", "name": "Default", "declaration": { "name": "Default", "module": "stories/styles.stories.ts" } }, { "kind": "js", "name": "Colors", "declaration": { "name": "Colors", "module": "stories/styles.stories.ts" } }, { "kind": "js", "name": "WireWidth", "declaration": { "name": "WireWidth", "module": "stories/styles.stories.ts" } }, { "kind": "js", "name": "WireShadowBlur", "declaration": { "name": "WireShadowBlur", "module": "stories/styles.stories.ts" } }, { "kind": "js", "name": "WireShadowOffset", "declaration": { "name": "WireShadowOffset", "module": "stories/styles.stories.ts" } }, { "kind": "js", "name": "WireRingOffset", "declaration": { "name": "WireRingOffset", "module": "stories/styles.stories.ts" } }, { "kind": "js", "name": "NumberShow", "declaration": { "name": "NumberShow", "module": "stories/styles.stories.ts" } }, { "kind": "js", "name": "NumberInset", "declaration": { "name": "NumberInset", "module": "stories/styles.stories.ts" } } ] }, { "kind": "javascript-module", "path": "src/draw-board/clear-board.ts", "declarations": [ { "kind": "function", "name": "clearBoard", "parameters": [ { "name": "context", "type": { "text": "CanvasRenderingContext2D" } } ] } ], "exports": [ { "kind": "js", "name": "clearBoard", "declaration": { "name": "clearBoard", "module": "src/draw-board/clear-board.ts" } } ] }, { "kind": "javascript-module", "path": "src/draw-board/draw-board.ts", "declarations": [ { "kind": "function", "name": "drawBoard", "parameters": [ { "name": "board", "type": { "text": "Board.Board" }, "description": "Board dimensions" }, { "name": "theme", "type": { "text": "Theme" }, "description": "Theme to style the board" }, { "name": "context", "type": { "text": "CanvasRenderingContext2D" }, "description": "Canvas context to draw the board to" } ], "description": "Draw a dartboard to the canvas" } ], "exports": [ { "kind": "js", "name": "drawBoard", "declaration": { "name": "drawBoard", "module": "src/draw-board/draw-board.ts" } } ] }, { "kind": "javascript-module", "path": "src/draw-board/draw-hits.ts", "declarations": [ { "kind": "function", "name": "drawHits", "parameters": [ { "name": "theme", "type": { "text": "Theme" } }, { "name": "context", "type": { "text": "CanvasRenderingContext2D" } }, { "name": "hits", "type": { "text": "PolarPoint[]" } } ] } ], "exports": [ { "kind": "js", "name": "drawHits", "declaration": { "name": "drawHits", "module": "src/draw-board/draw-hits.ts" } } ] }, { "kind": "javascript-module", "path": "src/draw-board/draw-numbers.ts", "declarations": [ { "kind": "function", "name": "drawNumbers", "parameters": [ { "name": "board", "type": { "text": "Board.Board" } }, { "name": "theme", "type": { "text": "Theme" } }, { "name": "context", "type": { "text": "CanvasRenderingContext2D" } } ] } ], "exports": [ { "kind": "js", "name": "drawNumbers", "declaration": { "name": "drawNumbers", "module": "src/draw-board/draw-numbers.ts" } } ] }, { "kind": "javascript-module", "path": "src/draw-board/draw-sectors.ts", "declarations": [ { "kind": "function", "name": "drawSectors", "parameters": [ { "name": "board", "type": { "text": "Board.Board" }, "description": "Board dimensions" }, { "name": "theme", "type": { "text": "Theme" }, "description": "Theme to use for drawing" }, { "name": "context", "type": { "text": "CanvasRenderingContext2D" }, "description": "HTML canvas context to draw to" } ], "description": "Draw the sectors of the board." } ], "exports": [ { "kind": "js", "name": "drawSectors", "declaration": { "name": "drawSectors", "module": "src/draw-board/draw-sectors.ts" } } ] }, { "kind": "javascript-module", "path": "src/draw-board/draw-wire.ts", "declarations": [ { "kind": "function", "name": "drawWire", "parameters": [ { "name": "board", "type": { "text": "Board.Board" } }, { "name": "theme", "type": { "text": "Theme" } }, { "name": "context", "type": { "text": "CanvasRenderingContext2D" } } ] } ], "exports": [ { "kind": "js", "name": "drawWire", "declaration": { "name": "drawWire", "module": "src/draw-board/draw-wire.ts" } } ] }, { "kind": "javascript-module", "path": "src/draw-board/index.ts", "declarations": [], "exports": [ { "kind": "js", "name": "*", "declaration": { "name": "*", "package": "./clear-board" } }, { "kind": "js", "name": "*", "declaration": { "name": "*", "package": "./draw-board" } }, { "kind": "js", "name": "*", "declaration": { "name": "*", "package": "./draw-hits" } }, { "kind": "js", "name": "*", "declaration": { "name": "*", "package": "./draw-numbers" } }, { "kind": "js", "name": "*", "declaration": { "name": "*", "package": "./draw-sectors" } }, { "kind": "js", "name": "*", "declaration": { "name": "*", "package": "./draw-wire" } }, { "kind": "js", "name": "*", "declaration": { "name": "*", "package": "./set-context" } } ] }, { "kind": "javascript-module", "path": "src/draw-board/render.ts", "declarations": [ { "kind": "function", "name": "render", "parameters": [ { "name": "board", "type": { "text": "Board.Board" } }, { "name": "zoom", "type": { "text": "number" } }, { "name": "center", "type": { "text": "PolarPoint" } }, { "name": "fit", "type": { "text": "string" } }, { "name": "hits", "type": { "text": "PolarPoint[]" } }, { "name": "theme", "type": { "text": "Theme" } }, { "name": "context", "type": { "text": "CanvasRenderingContext2D" } } ] } ], "exports": [ { "kind": "js", "name": "render", "declaration": { "name": "render", "module": "src/draw-board/render.ts" } } ] }, { "kind": "javascript-module", "path": "src/draw-board/set-context.ts", "declarations": [ { "kind": "function", "name": "setContext", "parameters": [ { "name": "radius", "type": { "text": "number" }, "description": "The radius of the board in millimeters" }, { "name": "zoom", "type": { "text": "number" }, "description": "Zoom level of the board. 1 is normal" }, { "name": "centerPoint", "type": { "text": "PolarPoint" }, "description": "Point on the board that the canvas should be centered on" }, { "name": "fit", "type": { "text": "string" }, "description": "How the board should fit in the canvas. 'contain' or 'cover'" }, { "name": "context", "type": { "text": "CanvasRenderingContext2D" }, "description": "Canvas rendering context to draw the board to" } ], "description": "Set the scale and rotation of the canvas to match the dimensions\nof a darboard. Positions will be relative to the center of the board\nand units will be in millimeters. This allows us to draw the board\nusing coordinates that match the physical board." } ], "exports": [ { "kind": "js", "name": "setContext", "declaration": { "name": "setContext", "module": "src/draw-board/set-context.ts" } } ] }, {