TWPayGame/public/game/luckydraw/js/couponItem.js

/**
 *
 * @authors Eric Hsiao
 *
 */

var couponItem = function (_index, _status) {

  //private menbers
  var $container;
  var itemIndex;
  var status = {"id":1,"lp":1,"gp":10,"issoldout":false,"isredeemed":false,"isnomoney":false,"canuse":false,"video":''}

  //template

  var couponTemplate = 
  `<div class="coupon__item">
    <div class="coupon__item__content">
      <div class="coupon__item__btn"></div>
      <div class="coupon__item__lp"></div>
      <div class="coupon__item__gp"></div>
    </div>
    <div class="coupon__item__overlayer"></div>
    <div class="coupon__item__hitArea"></div>
  </div>`;

  /***********************************/

  //private methods
  function init() {
    console.log('coupon__item__hitArea');
    // $container = _container;
    itemIndex = _index;
    $container = $(couponTemplate).appendTo($('.game__store__coupon'));

    status = $.extend(status, _status);

    updateCoupon();

    $container.find('.coupon__item__hitArea').click(function (e) {
      // e.preventDefault();
      console.log('click');
      doClick();
    });
  }

  function updateCoupon() {

    $container.find('.coupon__item__lp').text(status.lp);
    $container.find('.coupon__item__gp').text(status.gp);

    //////////////////////////////////////

    if(status.video != '' && !status.isredeemed && !status.issoldout){
      $container.addClass('coupon__item__video');
    }

    if (status.lock && !status.isredeemed && !status.issoldout) {
      $container.find('.coupon__item__btn').addClass('lock');
    } else {
      $container.find('.coupon__item__btn').removeClass('lock');
    }

    if (status.issoldout) {
      $container.addClass('sellout');
    } else {
      $container.removeClass('sellout');
    }

    if (status.isredeemed) {
      $container.find('.coupon__item__btn').addClass('used');
    } else {
      $container.find('.coupon__item__btn').removeClass('used');
    }
  }

  function doClick() {

    console.log('點選 ' + status.gp + '吉點 交換 LINE Point : ' + status.lp + '點');


    if (status.issoldout) {
      // alert('已換完');
      // $('.game__popout__content .content').hide();
      // $('.game__popout__submit').hide();
      // $('.content__no').show();

      $('.game__popout__content .content').hide();
      $('.game__popout__submit').hide();
      $('.game__popout__content .content__result').show();
      $('.game__popout__content .content__result__text').html('<p>獎項已兌換完畢</p>');

      main.showPopout();
    } else if (status.lock) {
      // alert('未解鎖');
      $('.video__popout').show();
      TweenMax.set('.video__popout', { autoAlpha: 0 });
      TweenMax.to('.video__popout', 0.5, { autoAlpha: 1 });
      // $('.video__content').html('<iframe width="640" height="360" src="https://www.youtube.com/embed/' + status.video + '" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>');

      console.log('VIDEO = ' + status.video);
      player.loadVideoById(status.video);
      player.stopVideo(0);

      videoCallback = function () {
        TweenMax.to('.video__popout', 0.5, { autoAlpha: 0 });
        status.lock = false;

        console.log('SET cookie');
        $.cookie('luckydraw.isVideoUnlock', true);
        console.log('luckydraw.isVideoUnlock = ' + $.cookie('luckydraw.isVideoUnlock'));

        updateCoupon();
        setTimeout(function () {
          doClick();
        },300);
      }

    } else if (status.isredeemed) {

      $('.game__popout__content .content').hide();
      $('.game__popout__submit').hide();
      $('.game__popout__content .content__result').show();
      $('.game__popout__content .content__result__text').html('<p>本週已兌換</p>');
      TweenMax.to('.game__popout', 0.5, { autoAlpha: 1 });

      main.showPopout();
    } else if (status.isnomoney) {
      $('.game__popout__content .content').hide();
      $('.game__popout__submit').hide();
      $('.game__popout__content .content__result').show();
      $('.game__popout__content .content__result__text').html('<p>很抱歉，兌換吉點餘額不足。</p>');
      TweenMax.to('.game__popout', 0.5, { autoAlpha: 1 });
      main.showPopout();
    } else {
      $('.game__popout__content .content').hide();
      $('.game__popout__submit').show();
      $('.game__popout__submit__text').text(status.gp);
      $('.game__popout .content__lp .lp').text(status.lp);
      $('.game__popout .content__lp').show();
      TweenMax.set('.game__popout__submit', { y: 50 });
      TweenMax.to('.game__popout__submit', 0.5, { y: 0, ease: Back.easeOut.config(1.7) });

      main.showPopout(function () {
        //使用Coupon
        main.useCoupon(status.id,-status.gp, function () {
          status.isredeemed = true;
          updateCoupon();
        });
      });
    }
  }

  //constructor

  {
    $(document).ready(function () {
      init();
    });
  }

  //public

  return {
    // videoComplete:function () {
    //   console.log('videoComplete : ' + status.gp);
    // }
  };
};

var videoCallback;

// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
  console.log('Yiutube API Ready');

  player = new YT.Player('video__content', {
    height: '360',
    width: '640',
    videoId: 'H8EAsiZfqnc',
    playerVars: { 'autoplay': 0, 'controls': 0 },
    events: {
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerStateChange(e) {
  console.log('onPlayerStateChange'); 
  if(e.data == 0){
    videoCallback();
  }
}