API tools faq
paste
Advertisement
Guest User

Emote Rain

a guest
Mar 22nd, 2017
146
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.67 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>emote</title>
  6.   </head>
  7.   <body>
  8.     <div id="emotes">
  9.       <h1>EMOTES:</h1>
  10.     </div>
  11.     <div id="chosen">
  12.       <h1>CHOSEN:</h1>
  13.  
  14.     </div>
  15.     <div id="testMote">
  16.  
  17.     </div>
  18.     <button id="d1">Drop 1</button>
  19.     <button id="d5">Drop 5</button>
  20.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  21.     <script src="http://cdn.tmijs.org/js/1.1.2/tmi.min.js"></script>
  22.     <script>
  23.     var options = {
  24.         options: {
  25.             debug: false
  26.         },
  27.         connection: {
  28.             cluster: "aws",
  29.             reconnect: true
  30.         },
  31.         identity: {
  32.             username: <username>,
  33.             password: <oauth including oauth:>
  34.         },
  35.             channels: ["channel1", "channel2", "channel3", etc]
  36.     };
  37.  
  38.     var client = new tmi.client(options);
  39.     client.connect();
  40.     var chosen = [];
  41.     var queue = [];
  42.     $.getJSON('https://api.twitch.tv/kraken/chat/summit1g/emoticons?client_id=jucl44orsw1z6t0io4yhkrm84lra4n', function(data) {
  43.     for(i = 0; i < data.emoticons.length; i++){
  44.  
  45.      if(data.emoticons[i].subscriber_only){
  46.        //console.log(data.emoticons[i].url);
  47.        var id = data.emoticons[i].url.split("-")[2];
  48.        if(! isNaN(id)){
  49.  
  50.          link = "https://static-cdn.jtvnw.net/emoticons/v1/"+id+"/2.0"
  51.          $("#emotes").append("<image id='"+id+"' class='emote' src='"+link+"'></image>");
  52.         }
  53.  
  54.       }
  55.     }
  56.     fixRows();
  57.     $(".emote").click(function(){
  58.       if($(this).parents('#emotes').length > 0) {
  59.       $(this).appendTo("#chosen");
  60.       chosen.push($(this)[0].id);
  61.       console.log(chosen);
  62.     }else{
  63.       $(this).appendTo("#emotes");
  64.       chosen.splice(chosen.indexOf($(this)[0].id), 1);
  65.     }
  66. fixRows();
  67.     })
  68.     function fixRows(){
  69.     $('#emotes br').remove();
  70.       for(i = 0; i < $("#emotes").children('.emote').length; i++){
  71.        if((i+1) % 5 == 0){
  72.            $( "<br>" ).insertAfter( $("#emotes").children('.emote')[i] );
  73.         }
  74.       }
  75.  
  76.       $('#chosen br').remove();
  77.         for(i = 0; i < $("#chosen").children('.emote').length; i++){
  78.          if((i+1) % 5 == 0){
  79.              $( "<br>" ).insertAfter( $("#chosen").children('.emote')[i] );
  80.           }
  81.         }
  82.     }
  83.     client.on("resub", function (channel, username, months, message) {
  84.       queue.push(months);
  85.       //dropEmotes(months);
  86.     });
  87.     $("#d5").click(function(){
  88.       queue.push(22);
  89.     //  dropEmotes(22);
  90.     })
  91.     setInterval(function(){
  92.       if(queue.length > 0){
  93.         dropEmotes(queue[0]);
  94.         queue.splice(0,1);
  95.       }
  96.     },7000)
  97.     function dropEmotes(months){
  98.  
  99.             $("#testMote").html("");
  100.             for(i = 0; i< months; i++){
  101.  
  102.              var randomEmote = chosen[Math.floor(Math.random() * chosen.length)];
  103.              console.log(randomEmote);
  104.              var randomLink = "https://static-cdn.jtvnw.net/emoticons/v1/"+randomEmote+"/3.0"
  105.              $("#testMote").append("<image class='falling' src='"+randomLink+"'></image>");
  106.             }
  107.             $(".falling").each(function(){
  108.               var posx = (Math.random() * ($(document).width() - 112)).toFixed();
  109.               var posy = (Math.random() * (-200 - 10)).toFixed();
  110.               $( this ).css({
  111.                 'position':'absolute',
  112.                 'left':posx+'px',
  113.                 'top': posy+'px',
  114.               })
  115.             })
  116.             $(".falling").css({
  117.         "-webkit-animation-name":"rotatebox",
  118.         "-webkit-animation-duration":"7s",
  119.         "-webkit-animation-iteration-count":"1",
  120.  
  121.         });
  122.         $(".falling")
  123. .on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
  124.  function(e){
  125.     $("#testMote").html("");
  126.     $(this).off(e);
  127.  });
  128.  
  129.     }
  130.     });
  131.     </script>
  132.     <style>
  133.  
  134.  
  135. @-webkit-keyframes rotatebox /*--for webkit--*/{
  136.  
  137.     to{
  138.         -webkit-transform:translate(0%,125vh) rotate(0deg);
  139.     }
  140.     from{
  141.         -webkit-transform:translate(0%,-112px) rotate(720deg);
  142.     }
  143.  
  144. }
  145. html{
  146.   overflow-y:hidden;
  147.   overflow-x:hidden;
  148. }
  149. .falling{
  150.   max-width: 112px;
  151.   max-height: 112px;
  152.   height: 100%;
  153.   position: absolute;
  154. }
  155.     .emote{
  156.       margin-right: 5px;
  157.       margin-bottom: 5px;
  158.     }
  159.       #emotes{
  160.         float: left;
  161.         width: 320px;
  162.         padding: 20px;
  163.         padding-top: 0px;
  164.         border-style: solid;
  165.         border-radius: 15px;
  166.       }
  167.       #chosen{
  168.         width: 10%;
  169.         margin-left: 5%;
  170.         float: left;
  171.         width: 320px;
  172.         padding: 20px;
  173.         padding-top: 0px;
  174.         border-style: solid;
  175.         border-radius: 15px;
  176.       }
  177.     </style>
  178.   </body>
  179. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!