Skip to content

Commit

Permalink
Merge branch 'release/4.1.1'
Browse files Browse the repository at this point in the history
  • Loading branch information
CrazyTim committed Jun 3, 2023
2 parents a9ebed8 + 2a7fb98 commit 01c8ca9
Show file tree
Hide file tree
Showing 9 changed files with 1,095 additions and 1,255 deletions.
8 changes: 3 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,13 @@ An easy to use, themeable component for randomising choices and prizes.
### ESM

```javascript
import {Wheel} from 'https://cdn.jsdelivr.net/npm/[email protected].0/dist/spin-wheel-esm.js';
import {Wheel} from 'https://cdn.jsdelivr.net/npm/[email protected].1/dist/spin-wheel-esm.js';
```

### IIFE

```html
<script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/spin-wheel-iife.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/spin-wheel-iife.js"></script>
```

### Local
Expand Down Expand Up @@ -73,7 +73,7 @@ The most useful way is to call `Wheel.spinToItem()`. The wheel will spin for a c
const winningItemIndex = await fetchWinningItemIndex(); // For example, this might return a value of 2.
const duration = 4000;
const easing = easing.cubicOut;
wheel.spinToItem(2, duration, false, 2, 1, easing)
wheel.spinToItem(winningItemIndex, duration, true, 2, 1, easing)
```

If precision is less important, you can use `Wheel.spin()` to immediately start spinning the wheel at a certain speed. This sets the wheel's `rotationSpeed`, which will be reduced over time according to `Wheel.rotationResistance`.
Expand All @@ -90,8 +90,6 @@ You can also set `Wheel.isInteractive = true` to allow the user to spin the whee

## Configuration

For example configurations see [./examples/themes/js/props.js](https://github.com/CrazyTim/spin-wheel/blob/master/examples/themes/js/props.js).

Everything is easy to configure. The wheel is responsive and resizes automatically to fit it's container, so when the size of the container changes you don't have to worry about updating fiddly things like widths and font sizes. For that reason, some numeric properties are expressed as percentages, while others are expressed as pixels.

* **Percentage properties** are a percent of the container size. For example, a `Wheel.radius` of `0.9` means the wheel will fill `90%` of the container.
Expand Down
4 changes: 2 additions & 2 deletions dist/spin-wheel-esm.js

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/spin-wheel-iife.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion examples/esm/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<link rel="stylesheet" href="./css/index.css"/>

<script type='module'>
import {Wheel} from 'https://cdn.jsdelivr.net/npm/spin-wheel/dist/spin-wheel-esm.js';
import {Wheel} from '/dist/spin-wheel-esm.js';

window.onload = () => {

Expand Down
2 changes: 1 addition & 1 deletion examples/iife/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<link rel="icon" href="data:image/x-icon;," type="image/x-icon">
<link rel="stylesheet" href="./css/index.css"/>

<script src="https://cdn.jsdelivr.net/npm/spin-wheel/dist/spin-wheel-iife.js"></script>
<script src="/dist/spin-wheel-iife.js"></script>

<script>
window.onload = () => {
Expand Down
Loading

0 comments on commit 01c8ca9

Please sign in to comment.