Is there a way to refresh the animation on dougtesting.net?

I'm working with the dougtesting.net library to create a spinning wheel. I've been trying to figure out how to reset the animation once it finishes, but I can't seem to find any information on it. My goal is to completely clear all states so that the wheel returns to its original position (as if the startAnimation() function was never called). Can you suggest a solution for this?

let luckyDrawWheel = new Winwheel({
      canvasId: "lucky-draw-canvas",
      drawText: true,
      numSegments: 8,
      textAlignment: "inner",
      textFontSize: 10,
      textMargin: 35,
      textFontFamily: "TUV Poetsen One",
      imageOverlay: true,
      segments: [...],
      animation: {
        type: "spinToStop",
        duration: 5,
        spins: 8,
        callbackFinished: alertPrize,
      },
    });
    // Function called when the animation finishes.
    function alertPrize(indicatedSegment)
    {
        alert(indicatedSegment.text + ' says Hi');
    }
    luckyDrawWheel.draw();

    const runWheelBtn = document.getElementById("run_wheel");
    runWheelBtn.addEventListener("click", () => {
      luckyDrawWheel.startAnimation();
    });

Answer №1

To reset the Lucky Draw Wheel's rotation angle, simply use the following code:

luckyDrawWheel.rotationAngle = 0;
and then call luckyDrawWheel.draw();

Your complete code should resemble this:

let luckyDrawWheel = new Winwheel({
  canvasId: "lucky-draw-canvas",
  drawText: true,
  numSegments: 8,
  textAlignment: "inner",
  textFontSize: 10,
  textMargin: 35,
  textFontFamily: "TUV Poetsen One",
  imageOverlay: true,
  segments: [...],
  animation: {
    type: "spinToStop",
    duration: 5,
    spins: 8,
    callbackFinished: alertPrize,
  },
});

function alertPrize(indicatedSegment) {
  alert(indicatedSegment.text + ' says Hi');
  luckyDrawWheel.rotationAngle = 0;
  luckyDrawWheel.draw();
}
luckyDrawWheel.draw();

const runWheelBtn = document.getElementById("run_wheel");
runWheelBtn.addEventListener("click", () => {
  luckyDrawWheel.startAnimation();
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The error message "Adyencheckout is not a constructor" is popping up in my

Struggling to implement the Adyen dropin payment UI in NextJS and facing issues initializing the Adyen dropin component. Attempting to dynamically import Adyen web to avoid window is not defined error, but uncertain on how to use it as a constructor after ...

"Looking to extract GraphQL queries from strings in URQL? Here's how to do it

I'm currently working on a GraphQL testing tool. As part of this tool, there is an input field where users can write their query and then click the run button to execute it. query Message { messages { user content } } subscription Realti ...

Locate an element within an array of strings to refine the contents of a flatlist

Currently, I have a FlatList that I am attempting to filter using multiple inputs from dropdown selectors. Here is the code snippet for my FlatList component: <FlatList style={styles.list} data={data.filter(filteredUsers)} ...

Trouble in Paradise: Woocommerce Product Grid in Disarray

Currently working on a WordPress WooCommerce website and encountering an issue with the product listing. Despite trying various plugins and CSS adjustments, I am unable to correct the positioning problem. Strangely, everything seems to be functioning prope ...

What is the best way to utilize Link navigation in order to navigate away from a blocked route in the latest version of Next.js,

DISCLAIMER: I raised this issue on the Next.js GitHub repository, but it was closed without recognition. The solution provided did not resolve my problem, leading me to seek help here. The Issue at Hand I have created a demo app (accessible here) on Code ...

Sharing Iframes across various Components within a Single Page Application (like Youtube)

Did you know that Youtube now lets you minimize the player while browsing the site? It's similar to the functionality on LolEsports.com with Twitch and embedded Youtube players. I'm interested in adding this feature to my own website. Here' ...

Verifying PHP session through AJAX

How can I execute an AJAX request to run an INSERT query? The query requires a value from a PHP session, but the JavaScript request does not recognize that value. Why is this happening and what steps should I take? See some of the code below: JS: $(&apo ...

The dynamic alteration of BackgroundImage does not appear to be functioning correctly with tailwind and nextjs

Introduction While working on my weather application using nextJS and TailwindCSS, I encountered a UI issue towards the end of development. Unfortunately, I couldn't resolve this problem alone. My main concern is changing the background image dynami ...

Retrieving data from a database with Vue.js in Laravel version 8

I'm currently facing an issue where I am unable to fetch data from the database using vuejs in laravel 8 framework. Surprisingly, no data is returned nor do I receive any errors. Below are some screenshots and code snippets that illustrate the problem ...

Handling XML with namespaces using jQuery (or JavaScript)

My jQuery project was progressing smoothly until I hit a roadblock while trying to parse XML with namespaces. I've been using jQuery 1.4.2 and have experimented with various methods: $(xml).find('[nodeName=ns:blah]')... $(xml).find('ns ...

Create a password variable while typing

Looking to avoid interference from browsers with autocomplete and password suggestions while maintaining the show/hide letters feature. The goal is to keep the password stored as a variable, regardless of whether the characters are shown or hidden. The is ...

What is the best method to position a modal in the exact center of the screen?

Is there a way to position the modal at the center of the screen? I have tried implementing this HTML and JavaScript code. Interestingly, it works fine in Chrome console but fails when I try to refresh the page. $('.modal').css('top', ...

swapping between two lines within a div

i'm developing a new music app and I am in need of the following chord progression: Am F G Am Ab Gdim A# Hello these are just placeholder lyrics for demonstration purposes, hey hey hello which should look li ...

The variables $invalid and $valid in my AngularJS form have not been assigned any values

I came across a post on StackOverflow discussing the issue of both "myForm.$valid" and "myForm.$invalid" being undefined on an Angular form. However, my problem is slightly different. I have defined a form like this: <form name="EntityForm" role="form ...

Can someone please advise me on how to output the value of a var_dump for an array using console.log?

After writing the code in this manner, it functions properly and returns a JSON object. public function getElementsAction() { $currency = App::$app->getProperty('currency'); if(!empty($_POST)) { $sql = 'SELECT name, p ...

Having trouble retrieving all JSON properties

I am facing an issue with my json structure where I am unable to access certain properties. I can only access the main properties like type, properties, and so on within that hierarchy level. However, I cannot seem to access icon, iconURL, or title. The da ...

Issue with the loop function

When I try to loop through my code, I keep getting the same "y" value (5) and it doesn't change. What I actually want is to make the ajax call repeat X times [all], passing both the response and the current call number through an anonymous function. A ...

Using a ternary operator to render a span tag in ReactJS

I need to display a number in a span tag with larger font size in Spanish. Here is my React.js code using a ternary operator: <div> {togo !== 0 ? (<div className="text-center"><span className="display-4">{togo}</span>{togo > ...

What's the best way to conceal the navbar while attempting to print the page?

Currently, I am working on developing an application for my school project. One of the features is an invoice sheet with a print option. However, when I try to print by clicking the button or using ctrl+p, the navbar appears in a chaotic and disorganized m ...

Enhance the functionality of the custom transaction form in NetSuite by incorporating new actions

I'm currently working on incorporating a new menu option into the "Actions" menu within a custom transaction form in NetSuite. While I can successfully see my selection in the Actions Menu on the form, I'm running into an issue with triggering th ...