diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 6204e5d..4cd4983 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -27,5 +27,8 @@ jobs: node-version: ${{ matrix.node-version }} cache: 'npm' - run: npm ci + - run: npm run lint + - run: npm run format-check - run: npm run build --if-present - - run: npm test + - run: npm run test + - run: npm run test-coverage diff --git a/README.md b/README.md index e9226cc..45ffe03 100644 --- a/README.md +++ b/README.md @@ -19,9 +19,18 @@ npm install @theblindhawk/roulette +> [!WARNING] +> **@theblindhawk/roulette** will soon be renamed into **roulette-spinner** therefore marked as deprecated (the github repository will stay the same). +> The following changes will be applied on the new package: +> 1. the license will be changed from ISC to MIT for convenience +> 2. a few keywords such as "roll" will be changing into "spin" +> 3. Vue and React utilities will be coming in the form of new packages (roulette-spinner-react and roulette-spinner-vue) +> +> Apologies for the inconvinience! + ## v3.0 Features -- **Compatible** with Javascript, TypeScript, React, Vue +- **Compatible** with Javascript, TypeScript - **Customize** the view of the Roulette down to the details - **Customize** the click sound, the spin duration and more - **Control** the value the Roulette will land at @@ -30,7 +39,16 @@ npm install @theblindhawk/roulette - **Test it** out by running "npm run dev" after cloning NB: check out the change log to see what changed from version 2! -(change log is currently Work In Progress) +https://github.com/TheBlindHawk/Roulette/releases/tag/v%2F3.0.0 + +## v3.1 Objectives + +- possibility of empty spinning a roulette while waiting for a value. + +## v4.0 Objectives + +- library name change @theblindhawk/roulette => roulette-spinner +- separate packages for react and vue implementations ## Table of Contents - [Features](#features) @@ -250,6 +268,81 @@ If you want to try your own code/settings edit the file ```index.html``` and the Here is an example of a fully set up Roulette: +```typescript +const img = new Image() +img.src = 'https://link_to_my_board_image.png' + +const roulette = new Roulette({ + container: 'roulette', + board: { + element: img, + doughnut: { radius: 10, color: 'white' }, + shift: 10, // degrees + border: { + width: 4, + color: 'grey', + }, + radius: 120, + padding: 20, + }, + arrow: { + element: 'standard', + width: 20, + height: 40, + padding: 20, + color: '#000', + shift: 0, + } + sections: [{ + value: 'fail', + probability: 7, + font: 'Arial', + font_size: 12, + font_color: 'red', + radius: 50 + }, { + value: 'grey car', + probability: 1, + src: 'https://link_to_some_image.svg', + radius: 50 + }, { + value: 'blue car', + probability: 1, + src: 'https://link_to_some_image.svg', + radius: 50 + }, { + value: 'red car', + probability: 1, + src: 'https://link_to_some_image.svg', + radius: 50 + }], + settings: { + roll: { + duration: 10000, // milliseconds + landing: 'edge', + delay: 0, // WIP + }, + font: 'Arial', + font_size: 12, + font_color: 'black', + border: { + width: 4, + color: 'grey', + }, + } + colors: [ 'yellow', 'white', 'white', 'white' ], + audio: { + src: 'https://link_to_some_audio' + volume: 1, + play: { once: true }, + } +}); +``` + +You can then roll the roulette like so. + ``` -// WIP... +roll() // to a random value given equal probabilities +rollIndex(2) // to the grey car +rollProbabilities() // using the probabilities given in the costructor ``` \ No newline at end of file diff --git a/index.html b/index.html index d168eb3..91e74d4 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/package.json b/package.json index 94bba05..4bc9daa 100644 --- a/package.json +++ b/package.json @@ -30,9 +30,7 @@ "lint:tsc": "tsc --noEmit", "format": "dprint fmt '**/*.{js,ts,tsx,json}'", "format-check": "dprint check '**/*.{js,ts,tsx,json}'", - "build": "tsc && run-s build:*", - "build:react": "mkdir -p dist/adapters/react && cp src/adapters/react/* dist/adapters/react/", - "build:vuejs": "mkdir -p dist/adapters/vuejs && cp src/adapters/vuejs/* dist/adapters/vuejs/" + "build": "tsc" }, "repository": { "type": "git", diff --git a/src/adapters/react/index.d.ts b/src/adapters/react/index.d.ts deleted file mode 100644 index 9b581e8..0000000 --- a/src/adapters/react/index.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react' -import { OptionalConstruct } from '../../utils/construct' - -export type Format = 'CODE128' | 'EAN' | 'CODE39' | 'ITF' | 'MSI' | 'Pharmacode' | 'Codabar' - -declare class Roulette extends React.PureComponent, unknow> {} - -export default Roulette diff --git a/src/adapters/react/index.js b/src/adapters/react/index.js deleted file mode 100644 index 8850022..0000000 --- a/src/adapters/react/index.js +++ /dev/null @@ -1,35 +0,0 @@ -import PropTypes from 'prop-types' -import React from 'react' -import JSRoulette from '../../index' - -export default class Roulette extends React.PureComponent { - static PropTypes = { - props: PropTypes.object.isRequired, - roulette: PropTypes.object, - container: PropTypes.object, - } - - static defaultProps = { - roulette: {}, - container: {}, - } - - constructor(props) { - super(props) - this.props = props - } - - componentDidMount() { - // eslint-disable-next-line no-undef - this.container = document.getElementById('blindhawk_roulette') - this.roulette = new JSRoulette({ - props: this.props, - container: this.container, - }) - } - - render() { - this.update() - return
- } -} diff --git a/src/adapters/vuejs/index.js b/src/adapters/vuejs/index.js deleted file mode 100644 index cd47833..0000000 --- a/src/adapters/vuejs/index.js +++ /dev/null @@ -1,22 +0,0 @@ -import JSRoulette from '../../index' - -export const roulette = { - props: ['board', 'arrow', 'settings', 'sections', 'audio', 'onstart', 'onstop'], - - setUp(props) { - this.props = props - }, - - data() { - return { roulette: {} } - }, - - mounted() { - // eslint-disable-next-line no-undef - const container = document.getElementById('blindhawk_roulette') - this.roulette = new JSRoulette({ ...this.props, container }) - }, - template: `
`, -} - -export default roulette diff --git a/src/builders/section.ts b/src/builders/section.ts index a98572a..76e3ae2 100644 --- a/src/builders/section.ts +++ b/src/builders/section.ts @@ -62,7 +62,7 @@ export class SectionBuilder { } public getSectionElement(section: RefinedSectionData, translate: string, rotate: string) { - if(section.src && section.radius) { + if (section.src && section.radius) { const img = document.createElementNS('http://www.w3.org/2000/svg', 'image') img.setAttribute('transform', translate + rotate) img.setAttribute('href', section.src) diff --git a/src/index.ts b/src/index.ts index 2674677..fbc5b9e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -116,8 +116,8 @@ export default class Roulette { if (rotation >= sprint || milliseconds >= this.settings.roll.duration) { clearInterval(ival) this.rotation = rotation % 360 - this.rolling = false this.onstop?.(section) + this.rolling = false } milliseconds += 20 }, 20) diff --git a/src/utils/construct.d.ts b/src/utils/construct.d.ts index 2310da4..df82ca7 100644 --- a/src/utils/construct.d.ts +++ b/src/utils/construct.d.ts @@ -98,8 +98,6 @@ export type AudioPlayOptions = { export type BorderData = { width: number color: string - line_width: number - line_color: string } /* Data type section end */ diff --git a/src/utils/defaults.ts b/src/utils/defaults.ts index b0f8777..87b00b6 100644 --- a/src/utils/defaults.ts +++ b/src/utils/defaults.ts @@ -11,8 +11,6 @@ export const defaultFontSize = 16 export const defaultBorder: BorderData = { width: 5, color: '#888', - line_width: 0, - line_color: '#000', } export const defaultBoard: BoardData = { diff --git a/tests/custom.test.js b/tests/custom.test.js index 6194fdb..bf48c23 100644 --- a/tests/custom.test.js +++ b/tests/custom.test.js @@ -1,10 +1,11 @@ /* @jest-environment jsdom */ /* jslint browser: true */ -/* global document */ +/* global document window */ import { test, vi } from 'vitest' import Roulette from '../src/index' vi.useFakeTimers({ shouldAdvanceTime: true }) +vi.spyOn(window.HTMLMediaElement.prototype, 'play').mockImplementation(() => {}) document.body.innerHTML = `
` test('roulette constructor', () => { diff --git a/tests/exception.test.js b/tests/exception.test.js index c04d362..53ecdbe 100644 --- a/tests/exception.test.js +++ b/tests/exception.test.js @@ -1,10 +1,11 @@ /* @jest-environment jsdom */ /* jslint browser: true */ -/* global document */ +/* global document window */ import { test, vi } from 'vitest' import Roulette from '../src/index' vi.useFakeTimers({ shouldAdvanceTime: true }) +vi.spyOn(window.HTMLMediaElement.prototype, 'play').mockImplementation(() => {}) document.body.innerHTML = `
` test('roulette constructor id search fail', () => { diff --git a/tests/last-roll.test.js b/tests/last-roll.test.js index c0b4810..6d4fe66 100644 --- a/tests/last-roll.test.js +++ b/tests/last-roll.test.js @@ -1,10 +1,11 @@ /* @jest-environment jsdom */ /* jslint browser: true */ -/* global document */ +/* global document window */ import { test, vi } from 'vitest' import Roulette from '../src/index' vi.useFakeTimers({ shouldAdvanceTime: true }) +vi.spyOn(window.HTMLMediaElement.prototype, 'play').mockImplementation(() => {}) document.body.innerHTML = `
` test('roulette rollByIndex', () => {