UniverseWheel

This library was generated with Angular CLI version 18.0.0.

Click here for demo

Installation

To install this library, run:

$ npm install universe-wheel --save

Use force if you have version conflicts:

$ npm install universe-wheel --force

Then inside your index.html file located in the src directory add these 2 lines:

<script src="https://rawcdn.githack.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/Winwheel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

Usage

<universe-wheel
  width='600'
  height='600'
  spinDuration='8'
  [disableSpinOnClick]='true'
  [items]='items'
  [innerRadius]='50'
  [spinAmount]='10'
  [textOrientation]='textOrientation'
  [textAlignment]='textAlignment'
  pointerStrokeColor='red'
  pointerFillColor='purple'
  [idToLandOn]='idToLandOn'
  (onSpinStart)='before()'
  (onSpinComplete)='after()'
>
</universe-wheel>

Options

Inputs

• height is the height of the wheel canvas
• width is the width of the wheel canvas
• spinDuration is the number of seconds the wheel wil be spinning for
• spinAmount is the number of spins the wheel will make before stopping
• innerRadius is the inner radius of the wheel. Allows you to make the wheel hollow from the center
• pointerStrokeColor is the color of the pointer's stroke
• pointerFillColor is the color of the pointer's fill
• textAlignment and textOrientation both have the types TextAlignment and TextOrientation, respectively.
• disableSpinOnClick disabled the default behaviour of spinning the wheel on clicking it.
• idToLandOn is the id value of the item to land on (Can be fetched from server).
• items is an array of of JSON objects that represent thw wheel's segments.

Outputs

• onSpinStart is called before the wheel spin
• onSpinComplete is called after the wheel spin

Accessing wheel functions

• Pass true to the disableSpinOnClick prop to disable spinning when clicking on the wheel. This is optional.

• In your parent component ts file, refer to the wheel using ViewChild

import { ..., ViewChild, ... } from '@angular/core';
import { UniverseWheelComponent } from 'universe-wheel';

// ...

export class ParentComponent {
   @ViewChild(UniverseWheelComponent, { static: false }) wheel: any;

   ngAfterViewInit() {
      console.log('only after THIS EVENT "wheel" is usable!!');
      // Call the spin function whenever and wherever you want after the AfterViewInit Event
      this.wheel.spin();
   }

   reset(){
      // Reset allows you to redraw the wheel
      // Use it after any change to wheel configurations or to allow re-spinning
      this.wheel.reset();
   }

   before() {
    // works before start spin.
    alert('Your wheel is about to spin');
   }

   after() {
    // works after spin.
    alert('You have been bamboozled');
    this.wheel.reset()
   }
}

One thing to keep in mind when using the spin function this way. If you want to change the idToLandOn, you need to wait for a tick before calling the spin function in order for the update to propagate:

  async spin(prize) {
    this.idToLandOn = prize
    await new Promise(resolve => setTimeout(resolve, 0)); // Wait here for one tick
    this.wheel.spin()
  }