Advertisement
deedspool

Shake

Apr 20th, 2022
117
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState, useEffect } from 'react'
  2. import { useHistory } from "react-router-dom";
  3. import { useQuery, useMutation } from '@apollo/client'
  4. import dayjs from 'dayjs'
  5. import queryString from 'query-string'
  6. import Shake from 'shake.js'
  7.  
  8. import lib from 'ui/app/lib'
  9. import config from 'ui/app/config'
  10.  
  11. import Spinner from 'ui/app/component/Spinner'
  12. import ModalX from './ModalX'
  13.  
  14. let shakeTimeout
  15.  
  16. const ShakeView = ({
  17.   lng,
  18.   loaded,
  19.   loadedUser,
  20.   delta,
  21.   event:{
  22.     card = [],
  23.     cardOpen = null
  24.   } ={},
  25.   user: {
  26.     id = null,
  27.     userId = null,
  28.     profile: {
  29.       gotCardReward = false
  30.     } = {}
  31.   } = {}
  32. }) => {
  33.  
  34.   let history = useHistory()  
  35.   const [modalStatus, setModalStatus] = useState(false)
  36.   const closeModal = () => setModalStatus(false)
  37.   const [shakeStatus, setShakeStatus] = useState(0) //0 none, 1 shaking, 2 shaked
  38.   let parsed = queryString.parse(location.search);
  39.  
  40.   const shake = () => {
  41.     if(shakeStatus) {
  42.       return false
  43.     }
  44.  
  45.     setShakeStatus(1)
  46.  
  47.     shakeTimeout = setTimeout(() => {
  48.       setShakeStatus(2)
  49.     }, 2000)
  50.  
  51.     setTimeout(() => {
  52.       setShakeStatus(0)
  53.       setModalStatus(true)
  54.     }, 4000)
  55.   }
  56.  
  57.   const handleShake = (e) => {
  58.     e.preventDefault()
  59.    
  60.     shake()
  61.   }
  62.  
  63.   const cupClass = {
  64.     0: '',
  65.     1: ' cup--shaking',
  66.     2: ' cup--shaked'
  67.   }
  68.  
  69.   useEffect(() => {
  70.     if(userId && loaded) {
  71.       let shared = parsed?.["shared"]
  72.       let img = parsed?.["reward-img"]
  73.       let name = parsed?.["reward-name"]
  74.       if (shared == "true") {    
  75.         if(img) {
  76.           lib.showMessage(`Bạn đã chia sẻ thành công và nhận được<br><img src="${img}" alt="" class="img-result" /><br>${name}`).then(res => {
  77.             history.push('/lac-que')
  78.           })
  79.         } else {
  80.           lib.showMessage(`Bạn đã chia sẻ thành công`)
  81.         }
  82.       }
  83.     }
  84.   }, [userId, loaded])
  85.  
  86.  
  87.   useEffect(() => {
  88.     const shakeEvent = new Shake({
  89.       threshold: 15,
  90.       timeout: 1000
  91.     });
  92.  
  93.     if(loaded && loadedUser) {
  94.       shakeEvent.start();
  95.      
  96.       window.addEventListener('shake', shake, false);
  97.     }
  98.  
  99.     return () => {
  100.       shakeEvent.stop();
  101.     }
  102.   }, [loaded, loadedUser])
  103.  
  104.   useEffect(() => {
  105.     if(cardOpen) {
  106.       if(dayjs().add(delta, 'ms') < dayjs(cardOpen)) {
  107.         lib.showMessage(`Sự kiện chưa bắt đầu<br>Vui lòng chờ tới ${dayjs(cardOpen).format('DD.MM')}`).then(res => {
  108.           history.push('/trang-chu')
  109.         })
  110.       }
  111.     }
  112.   }, [loaded, cardOpen])
  113.  
  114.   return (
  115.     <>
  116.       <div className={`main-content main-shake`}>
  117.         {cardOpen && dayjs().add(delta, 'ms') >= dayjs(cardOpen) && (
  118.           <>
  119.             <div className="tet tet--left"><img src="/images/tet.png" alt="" /></div>
  120.             <div className="tet tet--right"><img src="/images/tet.png" alt="" /></div>
  121.  
  122.             <h2 className="title-shake"><img src="/images/title-shake.png" alt="" /></h2>
  123.            
  124.             <div className={`cup${cupClass?.[shakeStatus]}`}>
  125.               <span className="cup-shadow"><img src="/images/cup-shadow.png" alt="" /></span>
  126.               <div className={`sticks`}>
  127.                 {lib.range(1, 7).map(index => (
  128.                   <span className={`stick stick--${index}`} key={index}>
  129.                     <img src="/images/stick.png" alt="" />
  130.                   </span>
  131.                 ))}
  132.               </div>
  133.               <span className={`stick stick--single`}>
  134.                 <img src="/images/stick.png" alt="" />
  135.               </span>
  136.             </div>
  137.  
  138.             <div className="shake-guide"><img src="/images/shake-guide.png" alt="" /></div>
  139.             <div className="text-center">
  140.               <a href="#" className={`btn btn--small btn--shake${shakeStatus ? ' btn--shake--shaking' : ''}`} onClick={e => handleShake(e)}>Lắc</a>
  141.             </div>
  142.           </>
  143.         )}
  144.       </div>
  145.  
  146.       {modalStatus && (
  147.         <ModalX
  148.           card={card}
  149.           userId={userId}
  150.           gotCardReward={gotCardReward}
  151.           modalStatus={modalStatus}
  152.           closeModal={closeModal}
  153.         />
  154.       )}
  155.     </>
  156.   )
  157. }
  158.  
  159. export default ShakeView
  160.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement