Merge pull request #18 from TheBlindHawk/v/3.0.2

v/3.0.2
TheBlindHawk · Apr 2, 2024 · 9a988e9 · 9a988e9
2 parents 604a686 + 11fac71
commit 9a988e9
Show file tree

Hide file tree

Showing 14 changed files with 110 additions and 82 deletions.
diff --git 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
@@ -19,9 +19,18 @@ npm install @theblindhawk/roulette
 
 </div>
 
+> [!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
 ```
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="ja">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git 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
diff --git a/src/adapters/react/index.js b/src/adapters/react/index.js
diff --git a/src/adapters/vuejs/index.js b/src/adapters/vuejs/index.js
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 = `<div id="roulette"></div>`
 
 test('roulette constructor', () => {

diff --git 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 = `<div id="roulette"></div>`
 
 test('roulette constructor id search fail', () => {

diff --git 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 = `<div id="roulette"></div>`
 
 test('roulette rollByIndex', () => {