@jingx/three-dice-roll 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +120 -0
- package/dist/index.cjs +1 -0
- package/dist/index.d.ts +33 -0
- package/dist/index.js +1703 -0
- package/dist/style.css +1 -0
- package/package.json +59 -0
package/README.md
ADDED
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
# three-dice-roll
|
|
2
|
+
|
|
3
|
+
Reusable Three.js dice components with deterministic end results.
|
|
4
|
+
|
|
5
|
+
The package exports:
|
|
6
|
+
|
|
7
|
+
- `DiceComponent`: full casino-style three-dice game scene
|
|
8
|
+
- `SpinnerDiceComponent`: one spinner-style die
|
|
9
|
+
|
|
10
|
+
The animations are authored, not physics-simulated. A result is chosen first, then the component animates toward a valid final orientation for that result.
|
|
11
|
+
|
|
12
|
+
## Install
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install three-dice-roll three
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
`three` is a peer dependency and must be installed by the consuming app.
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
|
|
22
|
+
### Three dice
|
|
23
|
+
|
|
24
|
+
```js
|
|
25
|
+
import { DiceComponent } from 'three-dice-roll';
|
|
26
|
+
import 'three-dice-roll/style.css';
|
|
27
|
+
|
|
28
|
+
const dice = new DiceComponent({
|
|
29
|
+
container: document.getElementById('app'),
|
|
30
|
+
result: [2, 5, 6],
|
|
31
|
+
startRoll: 1,
|
|
32
|
+
rollDoneCallBack(results) {
|
|
33
|
+
console.log(results);
|
|
34
|
+
},
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
dice.setProps({
|
|
38
|
+
result: [1, 1, 1],
|
|
39
|
+
startRoll: 2,
|
|
40
|
+
});
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Spinner die
|
|
44
|
+
|
|
45
|
+
```js
|
|
46
|
+
import { SpinnerDiceComponent } from 'three-dice-roll';
|
|
47
|
+
import 'three-dice-roll/style.css';
|
|
48
|
+
|
|
49
|
+
const spinner = new SpinnerDiceComponent({
|
|
50
|
+
container: document.getElementById('app'),
|
|
51
|
+
result: 4,
|
|
52
|
+
startRoll: 1,
|
|
53
|
+
rollDoneCallBack(result) {
|
|
54
|
+
console.log(result);
|
|
55
|
+
},
|
|
56
|
+
});
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
## API
|
|
60
|
+
|
|
61
|
+
### `DiceComponent`
|
|
62
|
+
|
|
63
|
+
Wraps the full three-dice casino game scene:
|
|
64
|
+
|
|
65
|
+
- table stage
|
|
66
|
+
- plate
|
|
67
|
+
- dome
|
|
68
|
+
- roll button and hand art
|
|
69
|
+
- Three.js dice renderer and roll animation
|
|
70
|
+
|
|
71
|
+
Props:
|
|
72
|
+
|
|
73
|
+
- `container?: HTMLElement`
|
|
74
|
+
- `result?: number[] | null`
|
|
75
|
+
- `rollDoneCallBack?: (results: number[]) => void`
|
|
76
|
+
- `startRoll?: boolean | number | string`
|
|
77
|
+
- `interactive?: boolean`
|
|
78
|
+
|
|
79
|
+
Methods:
|
|
80
|
+
|
|
81
|
+
- `setProps(nextProps)`
|
|
82
|
+
- `roll(result?)`
|
|
83
|
+
- `getResults()`
|
|
84
|
+
- `destroy()`
|
|
85
|
+
|
|
86
|
+
### `SpinnerDiceComponent`
|
|
87
|
+
|
|
88
|
+
Props:
|
|
89
|
+
|
|
90
|
+
- `container?: HTMLElement`
|
|
91
|
+
- `result?: number | null`
|
|
92
|
+
- `rollDoneCallBack?: (result: number) => void`
|
|
93
|
+
- `startRoll?: boolean | number | string`
|
|
94
|
+
- `interactive?: boolean`
|
|
95
|
+
|
|
96
|
+
Methods:
|
|
97
|
+
|
|
98
|
+
- `setProps(nextProps)`
|
|
99
|
+
- `roll(result?)`
|
|
100
|
+
- `getResult()`
|
|
101
|
+
- `destroy()`
|
|
102
|
+
|
|
103
|
+
## Notes
|
|
104
|
+
|
|
105
|
+
- Ships ESM and CommonJS entrypoints
|
|
106
|
+
- Ships a Vite library build from `dist/`
|
|
107
|
+
- Requires a bundler that can compile ESM dependencies
|
|
108
|
+
|
|
109
|
+
### Next.js
|
|
110
|
+
|
|
111
|
+
Use the components from a client component and import `three-dice-roll/style.css` once in that client boundary or in your app styles. There is a working example in `examples/next-ts`.
|
|
112
|
+
|
|
113
|
+
## Local development
|
|
114
|
+
|
|
115
|
+
```bash
|
|
116
|
+
npm install
|
|
117
|
+
npm run dev
|
|
118
|
+
npm run build
|
|
119
|
+
npm run publish:dry-run
|
|
120
|
+
```
|