Vue 3 Win Wheel

This is based on library winwheel.js, all examples are in vue 3 composition api, it helps you programatically stop at any segment of your criteria just pass segment number in stopAt variable.

install with

npm i @zohaibtariq/vuewinwheel

npmjs

@zohaibtariq/vuewinwheel

Vue 3 Winwheel Examples

Basic code wheel

<template>
  <VueWinWheel ref="winWheel" :options="allOptions" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" :stopAt="stopAt" />
  <br/>
  <br/>
  <br/>
  <button @click="spinWinWheel">Random Spin</button>
  <button @click="spinWinWheelStopAt">Defined Spin</button>
</template>

<script setup>
import {VueWinWheel} from '@zohaibtariq/vuewinwheel'
import '@zohaibtariq/vuewinwheel/dist/style.css';
import { ref, onMounted } from 'vue';

const winWheel = ref();

const spinWinWheel = () => {
  spinStartTime = Date.now() // if you miss this sound will not play after first run
  if(winWheel.value)
    winWheel.value.spin() // winWheelInstances is only required for the (2 part wheel)
};

const spinWinWheelStopAt = () => {
  spinStartTime = Date.now() // if you miss this sound will not play after first run
  if(winWheel.value)
    winWheel.value.spinAndStopAt(stopAt)
};

const canvasWidth = 500; // set custom canvas width
const canvasHeight = 500; // set custom canvas height
const stopAt = 3; // Segment at which you want to stop at

let spinningAudio = new Audio('./spinning.mp3'); // update this with your own tik sound
let winnerAudio = new Audio('./winner.mp3'); // update this with your own win sound

// Called when the animation has finished.
function spinStopped(indicatedSegment)
{
  playWinningSound()
  // Display different message if win/lose/bankrupt.
  // this must need to be updated according to your segment text
  if (indicatedSegment.text == 'LOOSE TURN')
    alert('Sorry but you loose a turn.');
  else if (indicatedSegment.text == 'BANKRUPT')
    alert('Oh no, you have gone BANKRUPT!');
  else
    alert("You have won " + indicatedSegment.text);
}

function eachSegmentSpin()
{
  playSpinningSound()
}

let spinStartTime;

function playSpinningSound()
{
  if(!spinStartTime){
    spinStartTime = Date.now(); // this must start when spin starts
  }
  spinningAudio.pause();
  const spinEndTime = Date.now();
  const diffInSpinTime = spinEndTime - spinStartTime
  // do not play this sound if animation time is exceeded
  if(options?.animation?.duration === undefined || diffInSpinTime < ((options.animation.duration * 1000)/1.4)) { // if you observe wheel stop but tik sound continues to play increase value of 1.4 to gradually a higher digit number like 1.5, 1.6 what ever suites you, animation duration and spin setting effects it
    spinningAudio.currentTime = 0;
    spinningAudio.play();
  }
}

function playWinningSound()
{
  winnerAudio.pause();
  winnerAudio.currentTime = 0;
  winnerAudio.play();
}

const options = { // basic_code_wheel
  'numSegments'  : 8,            // Number of segments
  'outerRadius'  : 212,        // The size of the wheel.
  'centerX'      : 217,        // Used to position on the background correctly.
  'centerY'      : 219,
  'textFontSize' : 28,        // Font size.
  'segments'     :            // Definition of all the segments.
      [
        {'fillStyle' : '#eae56f', 'text' : 'Prize 1'},
        {'fillStyle' : '#89f26e', 'text' : 'Prize 2'},
        {'fillStyle' : '#7de6ef', 'text' : 'Prize 3'},
        {'fillStyle' : '#e7706f', 'text' : 'Prize 4'},
        {'fillStyle' : '#eae56f', 'text' : 'Prize 5'},
        {'fillStyle' : '#89f26e', 'text' : 'Prize 6'},
        {'fillStyle' : '#7de6ef', 'text' : 'Prize 7'},
        {'fillStyle' : '#e7706f', 'text' : 'Prize 8'}
      ],
  'animation' :                // Definition of the animation
      {
        'type'     : 'spinToStop',
        'duration' : 5,
        'spins'    : 8,
        'callbackFinished' : spinStopped,  // Function to call when the spinning has stopped.
        'callbackSound'    : eachSegmentSpin,   // Called when the tick sound is to be played.
      }
};

const allOptions = {
  ...options,
  outerRadius: (canvasWidth / 2) - (options.lineWidth || 1)
};

onMounted(() => {
  allOptions.outerRadius = (canvasWidth / 2) - (options.lineWidth || 1);
});

</script>

<style scoped>
/* Define your css here inspect dom to see what ids and classes are available */
</style>

Wheel of fortune

<template>
  <VueWinWheel ref="winWheel" :options="allOptions" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" :stopAt="stopAt" />
  <br/>
  <br/>
  <br/>
  <button @click="spinWinWheel">Random Spin</button>
  <button @click="spinWinWheelStopAt">Defined Spin</button>
</template>

<script setup>
import {VueWinWheel} from '@zohaibtariq/vuewinwheel'
import '@zohaibtariq/vuewinwheel/dist/style.css';
import { ref, onMounted } from 'vue';

const winWheel = ref();

const spinWinWheel = () => {
  spinStartTime = Date.now() // if you miss this sound will not play after first run
  if(winWheel.value)
    winWheel.value.spin() // winWheelInstances is only required for the (2 part wheel)
};

const spinWinWheelStopAt = () => {
  spinStartTime = Date.now() // if you miss this sound will not play after first run
  if(winWheel.value)
    winWheel.value.spinAndStopAt(stopAt)
};

const canvasWidth = 500; // set custom canvas width
const canvasHeight = 500; // set custom canvas height
const stopAt = 3; // Segment at which you want to stop at

let spinningAudio = new Audio('./spinning.mp3'); // update this with your own tik sound
let winnerAudio = new Audio('./winner.mp3'); // update this with your own win sound

// Called when the animation has finished.
function spinStopped(indicatedSegment)
{
  playWinningSound()
  // Display different message if win/lose/bankrupt.
  // this must need to be updated according to your segment text
  if (indicatedSegment.text == 'LOOSE TURN')
    alert('Sorry but you loose a turn.');
  else if (indicatedSegment.text == 'BANKRUPT')
    alert('Oh no, you have gone BANKRUPT!');
  else
    alert("You have won " + indicatedSegment.text);
}

function eachSegmentSpin()
{
  playSpinningSound()
}

let spinStartTime;

function playSpinningSound()
{
  if(!spinStartTime){
    spinStartTime = Date.now(); // this must start when spin starts
  }
  spinningAudio.pause();
  const spinEndTime = Date.now();
  const diffInSpinTime = spinEndTime - spinStartTime
  // do not play this sound if animation time is exceeded
  if(options?.animation?.duration === undefined || diffInSpinTime < ((options.animation.duration * 1000)/1.4)) { // if you observe wheel stop but tik sound continues to play increase value of 1.4 to gradually a higher digit number like 1.5, 1.6 what ever suites you, animation duration and spin setting effects it
    spinningAudio.currentTime = 0;
    spinningAudio.play();
  }
}

function playWinningSound()
{
  winnerAudio.pause();
  winnerAudio.currentTime = 0;
  winnerAudio.play();
}

const options = { // wheel_of_fortune
  'outerRadius'     : 212,        // Set outer radius so wheel fits inside the background.
  'innerRadius'     : 75,         // Make wheel hollow so segments don't go all way to center.
  'textFontSize'    : 24,         // Set default font size for the segments.
  'textOrientation' : 'vertical', // Make text vertical so goes down from the outside of wheel.
  'textAlignment'   : 'outer',    // Align text to outside of wheel.
  'numSegments'     : 24,         // Specify number of segments.
  'segments'        :             // Define segments including colour and text.
      [                               // font size and text colour overridden on bankrupt segments.
        {'fillStyle' : '#ee1c24', 'text' : '300'},
        {'fillStyle' : '#3cb878', 'text' : '450'},
        {'fillStyle' : '#f6989d', 'text' : '600'},
        {'fillStyle' : '#00aef0', 'text' : '750'},
        {'fillStyle' : '#f26522', 'text' : '500'},
        {'fillStyle' : '#000000', 'text' : 'BANKRUPT', 'textFontSize' : 16, 'textFillStyle' : '#ffffff'},
        {'fillStyle' : '#e70697', 'text' : '3000'},
        {'fillStyle' : '#fff200', 'text' : '600'},
        {'fillStyle' : '#f6989d', 'text' : '700'},
        {'fillStyle' : '#ee1c24', 'text' : '350'},
        {'fillStyle' : '#3cb878', 'text' : '500'},
        {'fillStyle' : '#f26522', 'text' : '800'},
        {'fillStyle' : '#a186be', 'text' : '300'},
        {'fillStyle' : '#fff200', 'text' : '400'},
        {'fillStyle' : '#00aef0', 'text' : '650'},
        {'fillStyle' : '#ee1c24', 'text' : '1000'},
        {'fillStyle' : '#f6989d', 'text' : '500'},
        {'fillStyle' : '#f26522', 'text' : '400'},
        {'fillStyle' : '#3cb878', 'text' : '900'},
        {'fillStyle' : '#000000', 'text' : 'BANKRUPT', 'textFontSize' : 16, 'textFillStyle' : '#ffffff'},
        {'fillStyle' : '#a186be', 'text' : '600'},
        {'fillStyle' : '#fff200', 'text' : '700'},
        {'fillStyle' : '#00aef0', 'text' : '800'},
        {'fillStyle' : '#ffffff', 'text' : 'LOOSE TURN', 'textFontSize' : 12}
      ],
  'animation' :           // Specify the animation to use.
      {
        'type'     : 'spinToStop',
        'duration' : 3,
        'spins'    : 10,
        'callbackFinished' : spinStopped,  // Function to call when the spinning has stopped.
        'callbackSound'    : eachSegmentSpin,   // Called when the tick sound is to be played.
        'soundTrigger'     : 'pin'        // Specify pins are to trigger the sound.
      },
  'pins' :                // Turn pins on.
      {
        'number'     : 24,
        'fillStyle'  : 'silver',
        'outerRadius': 4,
      }
};

const allOptions = {
  ...options,
  outerRadius: (canvasWidth / 2) - (options.lineWidth || 1)
};

onMounted(() => {
  allOptions.outerRadius = (canvasWidth / 2) - (options.lineWidth || 1);
});

</script>

<style scoped>
/* Define your css here inspect dom to see what ids and classes are available */
</style>

Basic image wheel

<template>
  <VueWinWheel ref="winWheel" :options="allOptions" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" :stopAt="stopAt" />
  <br/>
  <br/>
  <br/>
  <button @click="spinWinWheel">Random Spin</button>
  <button @click="spinWinWheelStopAt">Defined Spin</button>
</template>

<script setup>
import {VueWinWheel} from '@zohaibtariq/vuewinwheel'
import '@zohaibtariq/vuewinwheel/dist/style.css';
import { ref, onMounted } from 'vue';

const winWheel = ref();

const spinWinWheel = () => {
  spinStartTime = Date.now() // if you miss this sound will not play after first run
  if(winWheel.value)
    winWheel.value.spin() // winWheelInstances is only required for the (2 part wheel)
};

const spinWinWheelStopAt = () => {
  spinStartTime = Date.now() // if you miss this sound will not play after first run
  if(winWheel.value)
    winWheel.value.spinAndStopAt(stopAt)
};

const canvasWidth = 500; // set custom canvas width
const canvasHeight = 500; // set custom canvas height
const stopAt = 3; // Segment at which you want to stop at

let spinningAudio = new Audio('./spinning.mp3'); // update this with your own tik sound
let winnerAudio = new Audio('./winner.mp3'); // update this with your own win sound

// Called when the animation has finished.
function spinStopped(indicatedSegment)
{
  playWinningSound()
  // Display different message if win/lose/bankrupt.
  // this must need to be updated according to your segment text
  if (indicatedSegment.text == 'LOOSE TURN')
    alert('Sorry but you loose a turn.');
  else if (indicatedSegment.text == 'BANKRUPT')
    alert('Oh no, you have gone BANKRUPT!');
  else
    alert("You have won " + indicatedSegment.text);
}

function eachSegmentSpin()
{
  playSpinningSound()
}

let spinStartTime;

function playSpinningSound()
{
  if(!spinStartTime){
    spinStartTime = Date.now(); // this must start when spin starts
  }
  spinningAudio.pause();
  const spinEndTime = Date.now();
  const diffInSpinTime = spinEndTime - spinStartTime
  // do not play this sound if animation time is exceeded
  if(options?.animation?.duration === undefined || diffInSpinTime < ((options.animation.duration * 1000)/1.4)) { // if you observe wheel stop but tik sound continues to play increase value of 1.4 to gradually a higher digit number like 1.5, 1.6 what ever suites you, animation duration and spin setting effects it
    spinningAudio.currentTime = 0;
    spinningAudio.play();
  }
}

function playWinningSound()
{
  winnerAudio.pause();
  winnerAudio.currentTime = 0;
  winnerAudio.play();
}

const options = { // basic_image_wheel
  'numSegments'       : 4,            // Specify number of segments.
  'outerRadius'       : 150,          // Set outer radius so wheel fits inside the background.
  'drawMode'          : 'image',      // drawMode must be set to image.
  'imageSrc'          : "./wheel-colored.png",
  'drawText'          : true,         // Need to set this true if want code-drawn text on image wheels.
  'textFontSize'      : 24,
  'textOrientation'   : 'curved',        // Note use of curved text.
  'textDirection'     : 'reversed',    // Set other text options as desired.
  'textAlignment'     : 'outer',
  'textMargin'        : 5,
  'textFontFamily'    : 'monospace',
  'textStrokeStyle'   : 'black',
  'textLineWidth'     : 2,
  'textFillStyle'     : 'white',
  'segments'     :                // Define segments.
      [
        {'text' : 'T-55 Vampire'},
        {'text' : 'P-40 Kittyhawk'},
        {'text' : 'North American Harvard'},
        {'text' : 'L-39C Albatross'}
      ],
  'animation' :                   // Specify the animation to use.
      {
        'type'     : 'spinToStop',
        'duration' : 5,             // Duration in seconds.
        'spins'    : 8,             // Number of complete spins.
        'callbackFinished' : spinStopped
      }
};

const allOptions = {
  ...options,
  outerRadius: (canvasWidth / 2) - (options.lineWidth || 1)
};

onMounted(() => {
  allOptions.outerRadius = (canvasWidth / 2) - (options.lineWidth || 1);
});

</script>

<style scoped>
/* Define your css here inspect dom to see what ids and classes are available */
</style>

One image per segment

<template>
  <VueWinWheel ref="winWheel" :options="allOptions" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" :stopAt="stopAt" />
  <br/>
  <br/>
  <br/>
  <button @click="spinWinWheel">Random Spin</button>
  <button @click="spinWinWheelStopAt">Defined Spin</button>
</template>

<script setup>
import {VueWinWheel} from '@zohaibtariq/vuewinwheel'
import '@zohaibtariq/vuewinwheel/dist/style.css';
import { ref, onMounted } from 'vue';

const winWheel = ref();

const spinWinWheel = () => {
  spinStartTime = Date.now() // if you miss this sound will not play after first run
  if(winWheel.value)
    winWheel.value.spin() // winWheelInstances is only required for the (2 part wheel)
};

const spinWinWheelStopAt = () => {
  spinStartTime = Date.now() // if you miss this sound will not play after first run
  if(winWheel.value)
    winWheel.value.spinAndStopAt(stopAt)
};

const canvasWidth = 500; // set custom canvas width
const canvasHeight = 500; // set custom canvas height
const stopAt = 3; // Segment at which you want to stop at

let spinningAudio = new Audio('./spinning.mp3'); // update this with your own tik sound
let winnerAudio = new Audio('./winner.mp3'); // update this with your own win sound

// Called when the animation has finished.
function spinStopped(indicatedSegment)
{
  playWinningSound()
  // Display different message if win/lose/bankrupt.
  // this must need to be updated according to your segment text
  if (indicatedSegment.text == 'LOOSE TURN')
    alert('Sorry but you loose a turn.');
  else if (indicatedSegment.text == 'BANKRUPT')
    alert('Oh no, you have gone BANKRUPT!');
  else
    alert("You have won " + indicatedSegment.text);
}

function eachSegmentSpin()
{
  playSpinningSound()
}

let spinStartTime;

function playSpinningSound()
{
  if(!spinStartTime){
    spinStartTime = Date.now(); // this must start when spin starts
  }
  spinningAudio.pause();
  const spinEndTime = Date.now();
  const diffInSpinTime = spinEndTime - spinStartTime
  // do not play this sound if animation time is exceeded
  if(options?.animation?.duration === undefined || diffInSpinTime < ((options.animation.duration * 1000)/1.4)) { // if you observe wheel stop but tik sound continues to play increase value of 1.4 to gradually a higher digit number like 1.5, 1.6 what ever suites you, animation duration and spin setting effects it
    spinningAudio.currentTime = 0;
    spinningAudio.play();
  }
}

function playWinningSound()
{
  winnerAudio.pause();
  winnerAudio.currentTime = 0;
  winnerAudio.play();
}

const options = { // one_image_per_segment
  'numSegments'       : 8,                // Specify number of segments.
  'outerRadius'       : 200,              // Set outer radius so wheel fits inside the background.
  'drawText'          : true,             // Code drawn text can be used with segment images.
  'textFontSize'      : 16,                // Set text options as desired.
  'textOrientation'   : 'curved',
  'textAlignment'     : 'inner',
  'textMargin'        : 90,
  'textFontFamily'    : 'monospace',
  'textStrokeStyle'   : 'black',
  'textLineWidth'     : 3,
  'textFillStyle'     : 'white',
  'drawMode'          : 'segmentImage',    // Must be segmentImage to draw wheel using one image per segemnt.
  'segments'          :                    // Define segments including image and text.
      [
        {'image' : './tom.png',  'text' : 'Jane'}, // please update tom.png with your image path
        {'image' : './tom.png',   'text' : 'Tom'},
        {'image' : './tom.png',  'text' : 'Mary'},
        {'image' : './tom.png',  'text' : 'Alex'},
        {'image' : './tom.png', 'text' : 'Sarah'},
        {'image' : './tom.png', 'text' : 'Bruce'},
        {'image' : './tom.png',  'text' : 'Rose'},
        {'image' : './tom.png', 'text' : 'Steve'}
      ],
  'animation' :           // Specify the animation to use.
      {
        'type'     : 'spinToStop',
        'duration' : 5,
        'spins'    : 8,
        'callbackFinished' : spinStopped
      }
}

const allOptions = {
  ...options,
  outerRadius: (canvasWidth / 2) - (options.lineWidth || 1)
};

onMounted(() => {
  allOptions.outerRadius = (canvasWidth / 2) - (options.lineWidth || 1);
});

</script>

<style scoped>
/* Define your css here inspect dom to see what ids and classes are available */
</style>

Hollow wheel

<template>
  <VueWinWheel ref="winWheel" :options="allOptions" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" :stopAt="stopAt" />
  <br/>
  <br/>
  <br/>
  <button @click="spinWinWheel">Random Spin</button>
  <button @click="spinWinWheelStopAt">Defined Spin</button>
</template>

<script setup>
import {VueWinWheel} from '@zohaibtariq/vuewinwheel'
import '@zohaibtariq/vuewinwheel/dist/style.css';
import { ref, onMounted } from 'vue';

const winWheel = ref();

const spinWinWheel = () => {
  spinStartTime = Date.now() // if you miss this sound will not play after first run
  if(winWheel.value)
    winWheel.value.spin() // winWheelInstances is only required for the (2 part wheel)
};

const spinWinWheelStopAt = () => {
  spinStartTime = Date.now() // if you miss this sound will not play after first run
  if(winWheel.value)
    winWheel.value.spinAndStopAt(stopAt)
};

const canvasWidth = 500; // set custom canvas width
const canvasHeight = 500; // set custom canvas height
const stopAt = 3; // Segment at which you want to stop at

let spinningAudio = new Audio('./spinning.mp3'); // update this with your own tik sound
let winnerAudio = new Audio('./winner.mp3'); // update this with your own win sound

// Called when the animation has finished.
function spinStopped(indicatedSegment)
{
  playWinningSound()
  // Display different message if win/lose/bankrupt.
  // this must need to be updated according to your segment text
  if (indicatedSegment.text == 'LOOSE TURN')
    alert('Sorry but you loose a turn.');
  else if (indicatedSegment.text == 'BANKRUPT')
    alert('Oh no, you have gone BANKRUPT!');
  else
    alert("You have won " + indicatedSegment.text);
}

function eachSegmentSpin()
{
  playSpinningSound()
}

let spinStartTime;

function playSpinningSound()
{
  if(!spinStartTime){
    spinStartTime = Date.now(); // this must start when spin starts
  }
  spinningAudio.pause();
  const spinEndTime = Date.now();
  const diffInSpinTime = spinEndTime - spinStartTime
  // do not play this sound if animation time is exceeded
  if(options?.animation?.duration === undefined || diffInSpinTime < ((options.animation.duration * 1000)/1.4)) { // if you observe wheel stop but tik sound continues to play increase value of 1.4 to gradually a higher digit number like 1.5, 1.6 what ever suites you, animation duration and spin setting effects it
    spinningAudio.currentTime = 0;
    spinningAudio.play();
  }
}

function playWinningSound()
{
  winnerAudio.pause();
  winnerAudio.currentTime = 0;
  winnerAudio.play();
}

const options = { // hollow_wheel
  'numSegments'   : 16,   // Specify number of segments.
  'outerRadius'   : 212,  // Set radius to so wheel fits the background.
  'innerRadius'   : 120,  // Set inner radius to make wheel hollow.
  'textFontSize'  : 16,   // Set font size accordingly.
  'textMargin'    : 0,    // Take out default margin.
  'segments'      :       // Define segments including colour and text.
      [
        {'fillStyle' : '#eae56f', 'text' : 'Prize 1'},
        {'fillStyle' : '#89f26e', 'text' : 'Prize 2'},
        {'fillStyle' : '#7de6ef', 'text' : 'Prize 3'},
        {'fillStyle' : '#e7706f', 'text' : 'Prize 4'},
        {'fillStyle' : '#eae56f', 'text' : 'Prize 5'},
        {'fillStyle' : '#89f26e', 'text' : 'Prize 6'},
        {'fillStyle' : '#7de6ef', 'text' : 'Prize 7'},
        {'fillStyle' : '#e7706f', 'text' : 'Prize 8'},
        {'fillStyle' : '#eae56f', 'text' : 'Prize 9'},
        {'fillStyle' : '#89f26e', 'text' : 'Prize 10'},
        {'fillStyle' : '#7de6ef', 'text' : 'Prize 11'},
        {'fillStyle' : '#e7706f', 'text' : 'Prize 12'},
        {'fillStyle' : '#eae56f', 'text' : 'Prize 13'},
        {'fillStyle' : '#89f26e', 'text' : 'Prize 14'},
        {'fillStyle' : '#7de6ef', 'text' : 'Prize 15'},
        {'fillStyle' : '#e7706f', 'text' : 'Prize 16'}
      ],
  'animation' :           // Define spin to stop animation.
      {
        'type'     : 'spinToStop',
        'duration' : 5,
        'spins'    : 8,
        'callbackFinished' : spinStopped
      }
};

const allOptions = {
  ...options,
  outerRadius: (canvasWidth / 2) - (options.lineWidth || 1)
};

onMounted(() => {
  allOptions.outerRadius = (canvasWidth / 2) - (options.lineWidth || 1);
});

</script>

<style scoped>
/* Define your css here inspect dom to see what ids and classes are available */
</style>

2 Part Wheel

<template>
  <VueWinWheel ref="winWheel" :options="allOptions" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" :stopAt="stopAt" />
  <br/>
  <br/>
  <br/>
  <button @click="spinWinWheel">Random Spin</button>
  <button @click="spinWinWheelStopAt">Defined Spin</button>
</template>

<script setup>
import {VueWinWheel} from '@zohaibtariq/vuewinwheel'
import '@zohaibtariq/vuewinwheel/dist/style.css';
import { ref, onMounted } from 'vue';

const winWheel = ref();

const spinWinWheel = () => {
  spinStartTime = Date.now() // if you miss this sound will not play after first run
  if(winWheel.value)
    winWheel.value.spin(winWheelInstances) // winWheelInstances is only required for the (2 part wheel)
};

const spinWinWheelStopAt = () => {
  spinStartTime = Date.now() // if you miss this sound will not play after first run
  if(winWheel.value)
    winWheel.value.spinAndStopAt(stopAt, winWheelInstances)
};

const canvasWidth = 500; // set custom canvas width
const canvasHeight = 500; // set custom canvas height
const stopAt = 3; // Segment at which you want to stop at

let spinningAudio = new Audio('./spinning.mp3'); // update this with your own tik sound
let winnerAudio = new Audio('./winner.mp3'); // update this with your own win sound

// Called when the animation has finished.
function spinStopped(indicatedSegment)
{
  playWinningSound()
  // Display different message if win/lose/bankrupt.
  // this must need to be updated according to your segment text
  if (indicatedSegment.text == 'LOOSE TURN')
    alert('Sorry but you loose a turn.');
  else if (indicatedSegment.text == 'BANKRUPT')
    alert('Oh no, you have gone BANKRUPT!');
  else
    alert("You have won " + indicatedSegment.text);
}

function eachSegmentSpin()
{
  playSpinningSound()
}

let spinStartTime;

function playSpinningSound()
{
  if(!spinStartTime){
    spinStartTime = Date.now(); // this must start when spin starts
  }
  spinningAudio.pause();
  const spinEndTime = Date.now();
  const diffInSpinTime = spinEndTime - spinStartTime
  // do not play this sound if animation time is exceeded
  if(options?.animation?.duration === undefined || diffInSpinTime < ((options.animation.duration * 1000)/1.4)) { // if you observe wheel stop but tik sound continues to play increase value of 1.4 to gradually a higher digit number like 1.5, 1.6 what ever suites you, animation duration and spin setting effects it
    spinningAudio.currentTime = 0;
    spinningAudio.play();
  }
}

function playWinningSound()
{
  winnerAudio.pause();
  winnerAudio.currentTime = 0;
  winnerAudio.play();
}

const innerWheelOptions = { // two_part_wheel
  'numSegments' : 4,
  'outerRadius' : 110,        // Set the outer radius to make the wheel smaller than the outer wheel.
  'segments': [
    {'fillStyle' : '#eae56f', 'text' : 'Inner 1'},
    {'fillStyle' : '#89f26e', 'text' : 'Inner 2'},
    {'fillStyle' : '#7de6ef', 'text' : 'Inner 3'},
    {'fillStyle' : '#e7706f', 'text' : 'Inner 4'}
  ]
};

const outerWheelOptions = {
  'numSegments': 8,
  'textMargin' : 0,
  'outerRadius' : 210,
  'innerRadius' : 110,    // Set inner radius to the size of the inner wheel since the inner part of the wheel
  'segments': [           //   is being drawn by the inner wheel we don't need to draw there.
    {'fillStyle' : '#8C8A42', 'text' : 'Outer 1'},
    {'fillStyle' : '#F2F0A8', 'text' : 'Outer 2'},
    {'fillStyle' : '#519142', 'text' : 'Outer 3'},
    {'fillStyle' : '#B7F7A8', 'text' : 'Outer 4'},
    {'fillStyle' : '#4B898F', 'text' : 'Outer 5'},
    {'fillStyle' : '#B1EFF5', 'text' : 'Outer 6'},
    {'fillStyle' : '#8A4342', 'text' : 'Outer 7'},
    {'fillStyle' : '#F0A9A8', 'text' : 'Outer 8'}
  ],
  'animation':
      {
        'type': 'spinToStop',                     // Define animation more or less as normal, except for the callbackAfter().
        'duration': 5,
        'spins': 5,
        'easing': 'Power3.easeOut',
        'callbackAfter' : drawInnerWheel,     // Call back after each frame of the animation a function we can draw the inner wheel from.
        'callbackFinished': alertPrize
      }
};

// This function is called after the outer wheel has drawn during the animation.
function drawInnerWheel()
{
  // Update the rotationAngle of the innerWheel to match that of the outer wheel - this is a big part of what
  // links them to appear as one 2-part wheel. Call the draw function passing false so the outer wheel is not wiped.
  innerWinWheelInstance.rotationAngle = outerWinWheelInstance.rotationAngle;
  innerWinWheelInstance.draw(false);
}

// Called when the animation has finished.
function alertPrize()
{
  // The indicated segments from the 2 wheels.
  let winningInnerSegment = innerWinWheelInstance.getIndicatedSegment();
  let winningOuterSegment = outerWinWheelInstance.getIndicatedSegment();

  // Alert the combination of prizes won.
  alert('You won ' + winningInnerSegment.text + ', ' + winningOuterSegment.text);

  // Set things so power and spin button can be clicked again.
  // wheelSpinning = false;

  // Remove all colours from the power level indicators.
  // document.getElementById('pw1').className = "";
  // document.getElementById('pw2').className = "";
  // document.getElementById('pw3').className = "";
}

const options = {
  ...outerWheelOptions,
  innerWheelOptions
};

// this instances code is required only for (2 part wheel)
let outerWinWheelInstance;
let innerWinWheelInstance;

const winWheelInstances = (outerWheelInstance, innerWheelInstance) => {
  if(outerWheelInstance) {
    outerWinWheelInstance = outerWheelInstance
    // Call draw on the outerWheel then the inner wheel to ensure that both are rendered on the canvas.
  }
  if(innerWheelInstance) {
    innerWinWheelInstance = innerWheelInstance
  }
  if(outerWheelInstance && innerWheelInstance) { // now tackled with drawInnerWheel
    // Update the rotationAngle of the innerWheel to match that of the outer wheel - this is a big part of what
    // links them to appear as one 2-part wheel. Call the draw function passing false so the outer wheel is not wiped.
    innerWheelInstance.rotationAngle = outerWheelInstance.rotationAngle;
    if(innerWheelInstance.draw)
      innerWheelInstance.draw(false);
  }
}

const allOptions = {
  ...options,
  outerRadius: (canvasWidth / 2) - (options.lineWidth || 1)
};

onMounted(() => {
  allOptions.outerRadius = (canvasWidth / 2) - (options.lineWidth || 1);
});

</script>

<style scoped>
/* Define your css here inspect dom to see what ids and classes are available */
</style>

DOCS WINWHEEL

Original Author

Douglas McKechie https://github.com/zarocknz

Maintainer

@zohaibtariq https://github.com/zohaibtariq

Please note

This wasn't created by me; It is just a fork of Winwheel.js that supports javascript esm (Ecma Script Modules)