“This is the 15th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

Hey, guys, let’s get back to our gold digging project. Yesterday we have realized the lucky draw free and single draw function. Finally will also draw the results in the form of a pop-up window display to the user, but there are some deficiencies, in the epilogue has mentioned yesterday, is to click the draw button, the lucky guy didn’t turn up, but after a while of pa pop-up the lottery results, this is obviously very not friendly, today we’re going to add on to rotary animation effects, Let the user know that our wheel of fortune is spinning. There is also a ten draw has not been realized, we also realize in this sharing. Functions to be implemented in this sharing:

  • Wheel of Fortune animation effect
  • Ten consecutive drawing and results display

Wheel of Fortune animation effect

At the beginning, I didn’t know how to animate the wheel of Fortune, and I couldn’t see the official source code. Then I had a brainwave: use software to record the animation effect, not to mention the discovery (as shown below). Polling to add a chosen class for each prize, and this class has only one background, which means polling to change the background color of the prize. And so the idea opens up.It’s also simple to implement

  • First of all, after analysis, it is found that the element corresponding to each prize has two same class names: turntable-item and item
  • We only need to use the document. The querySelectorAll access to all the prizes elements
  • Then use a timer setInterval plus counter to add additional Chosen classes (adding backgrounds) to each prize. However, it should be noted that before adding chosen for one prize, the backgrounds of other prizes must be restored to their original state
  • Another thing to note is that some prizes need to be drawn many times to unlock, so the wheel of fortune should skip the prize before it is unlocked
    • It is also simple to implement by adding an additional locked attribute to unlock_count when the prize element is initialized with v-for
    • Skip the prize if unlock_count is greater than 0

The core code is shown as follows:

<div
   v-for="item in lottery"
   :key="item.lottery_id"
   class="turntable-item item"
   :locked="item.unlock_count" <!--newlockedattribute-->
 >
 <! -- Omit... -->
 </div>
Copy the code
const animate = function () {
     const items = document.querySelectorAll(".turntable-item.item");
     let counter = 0;
     let interval = setInterval(() = > {
       items.forEach((el) = > {
         el.className = "turntable-item item";
       });
       let locked = items[counter].getAttribute("locked");
       if (locked == 0) {// Skip unlocked prizes
         items[counter].className = "turntable-item item chosen";
       }
       counter++;
       if (counter === items.length) {
         counter = 0; }},100);
     return interval;
   };
Copy the code

Ten even smoke

Ten draw function is also very simple to implement, after the official website analysis found that ten draw and single draw with different background API, ten draw with a named ten_draw interface, POST request, return result is a length of 10 array. Therefore, the back-end needs to package a separate ten_draw API. In addition, the pop-up box that returns the result is different from that of the single draw. The single draw has only one result, and you pass the prize information as message to the Vant Dialog component. But because ten even pull back is a group of 10 results, so the pop-up window information also need to be processed separately, so that 10 results can be presented source code and renderings:

const draw = function (type) {
     if (type === 0) {
       // No need to smoke once
       let interval = animate();
       api.drawFree().then((res) = > {
         clearInterval(interval);
         const title = 'Congratulations on the draw${res.data.lottery_name}`;
         const message = `<div><img src="${res.data.lottery_image}" alt="image" /></div>; `;
         showResult(title, message);
       });
     } else if (type === 1) {
       // Single pump consumes 200 ore
       let interval = animate();
       api.draw1().then((res) = > {
         clearInterval(interval);
         const title = 'Congratulations on the draw${res.data.lottery_name}`;
         const message = `<div><img src="${res.data.lottery_image}" alt="image" /></div>; `;
         showResult(title, message);
       });
     } else if (type === 10) {
       / / ten even smoke
       let interval = animate();
       api.tenDraw().then((res) = > {
         clearInterval(interval);
         const message = '<div class="gifts">';
         res.data.forEach((item) = > {
           message += `<div class="gift"><img src="${item.lottery_image}" class="gift-img">
           <p class="gift-name">${item.lottery_name}</p>
       </div>`;
         });
         message += "</div>";
         showResult("Ten in a row.", message); }); }};Copy the code

conclusion

In today’s sharing, we have realized the animation effect of the wheel of Fortune, and also achieved ten consecutive drawing and related results display. In order to realize this lottery function, I have lost more than 1 w ore, ha ha ha. The core functions of this lottery page have been basically implemented. The next is some of the corners of the decoration, such as lucky value display, lottery announcement and grand prize onlookers. This is the end of today’s sharing, welcome friends to like and follow oh!