유튜브 추첨기

핫식스
Fra 05.06.2023. Se den seneste versjonen.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         유튜브 추첨기
// @namespace    핫식스 존나 맛있다
// @version      0.3
// @description  핫식스
// @author       핫식스
// @match        https://www.youtube.com/live_chat*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
  console.log("로딩중..."); //로딩

  var userList = [];

  //옵저버
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      var added = mutation.addedNodes[0];
      if(added.tagName == 'YT-LIVE-CHAT-TEXT-MESSAGE-RENDERER'){
           var userData = {};
      userData.img = added.querySelector("yt-img-shadow img").src;
      userData.name = added.querySelector("yt-live-chat-author-chip").innerText;

      if (
        userList.filter((e) => e.img == userData.img && e.name == userData.name)
        .length == 0
      ) {
        userList.push(userData);
          modal.querySelector('#rouletteParticipant ul').innerHTML += `<li style="display:flex;flex-direction:row;align-items:center" id="unSelected"><img src="${userData.img}">${userData.name}</li>`;
      }
      }

    });
  });
  var config = {
    childList: true,
  };


  //모달창
  var modal = document.createElement('div');
  document.querySelector('body').style = '100vh';
  modal.style.cssText = 'width:100%;height:100%;background-color:white;top:0px;left:0px;position:absolute;display:none;font-size:15px;overflow-y:auto';
  modal.innerHTML = `<div id="rouletteControl">
        <button id="gatherBtn">시작</button>
        <button id="raffleBtn">추첨</button>
        <button id="closeModal">닫기</button>
    </div>
    <div id="rouletteResult" style="display:flex;flex-direction:column;align-items:center">
        <h3>당첨자</h3>
        <span style="height:35px"></span>
    </div>
    <div id="rouletteParticipant" style="display:flex;flex-direction:column;align-items:center">
        <h2>참가자</h2>
        <ul style="list-style-type: none;padding-left:0;">

        </ul>
    </div>`;
  var gatherBtn = modal.querySelector('#gatherBtn');
  var raffleBtn = modal.querySelector('#raffleBtn');
    var closeBtn = modal.querySelector('#closeModal');
  gatherBtn.addEventListener("click", function() {
      if (this.innerText == "시작") {
        userList = [];
        modal.querySelector('#rouletteParticipant ul').innerHTML = '';
          modal.querySelector('#rouletteResult span').innerHTML = '';
        var target = document.querySelectorAll("#items")[1];
        observer.observe(target, config);
        this.innerText = "중지";
      } else {
        observer.disconnect();
        this.innerText = "시작";
      }
    });

    raffleBtn.addEventListener("click", function() {
      if (userList.length !== 0) {
        var rand = Math.floor(Math.random() * userList.length);

        modal.querySelector('#rouletteResult span').innerHTML = `<div style="display:flex;flex-direction:row;align-items:center"><img src="${userList[rand].img}">${userList[rand].name}</div>`;
          console.log(rand);
        modal.querySelectorAll('li#unSelected')[rand].style.opacity = '30%';
          modal.querySelectorAll('li#unSelected')[rand].setAttribute('id', 'selected');

        userList.splice(rand, 1);
      }
    });

    closeBtn.addEventListener("click", function(){
    modal.style.display = 'none';
    })

  document.querySelector('body').appendChild(modal);


  //모달창 열기
  var toggle = document.createElement('button');
  toggle.innerText = '추첨 열기';
  toggle.addEventListener('click', function() {
    modal.style.display = 'block'
  });
  document.querySelector("#primary-content").appendChild(toggle);
  /*
  document.querySelector("yt-live-chat-header-renderer").style.height = "200px";
  document.querySelector("#primary-content").appendChild(roulette);
  */
  console.log("로딩 완료");
})();