twitch.tv-Zealot

index.jade

mixin tile
   div.block.tile
          div.pivoter
             div
               span#status ◉
               span#username
               img(src='')#prev   
// All the good stuff :) 
meta(name='viewport', content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0')

div#formP
  div#inputPanel
    form
      input(type='text' name="myUsername" placeholder="Twitch.tv username")#myUsername
main.animated.fadeIn.blur
  section
    div.page
      div#search
        i.fa.fa-search
      div#togglerParent
        div#status-area
        div.toggler
          button#onL
            i.fa.fa-toggle-on
            //span ◎
          button#offL
            i.fa.fa-toggle-off
            //span ⦿

script.babel

 comments => {
    /**
     ** let vs var
     ** let is faster than var ---- https://jsperf.com/var-vs-let ----
     **
     ** MDN
     ** let - The let statement declares a block scope local variable, optionally initializing it to a value.
     **       https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
     **---------------------------------------------------------------------------------------------------------
     ** var - The variable statement declares a variable, optionally initializing it to a value.
     **       https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
     **
     **/

    // NETWORK REQ FROM TWITCH FOR USERS FOR WHO YOU ARE
    /*
     ** var myUsername = $('#myUsername').val;
     ** PUT IN GET JSON BELOW-> 'https://api.twitch.tv/kraken/users/' + myUsername + '/follows /channels?callback=?' 
     */
 }
 var myUsername = "";

 $('form').submit(function() {
    $('button').prop('disabled', false);
    $('form').fadeToggle(1000);
    $('#search').css('display', 'block');
    $('#inputPanel').css('z-index', -9999);
    $('.block').remove();
    myUsername = $('#myUsername').val().trim();
    getFriendsList(myUsername);
    $('main').removeClass('blur');
    return false;
 });
 $('#search').on('click', () => {
    $('button').prop('disabled', true);
    $('form').show(1000);
    $('main').addClass('blur');
    clearInt = setInterval(loading, 500)
    $('.block').remove();
    $('#myUsername').val('');
    $('#inputPanel').css('z-index', 9999);
    $('#search').css('display', 'none');
    $('.block').remove();
    $('#myUsername').val('');

 });
 //1
 function getFriendsList(myUsername) {
    //console.log(myUsername);
    $.getJSON('https://api.twitch.tv/kraken/users/' + myUsername + '/follows/channels?callback=?', (usersJSON) => {

       let usernames = usersJSON.follows.map(usersJSON => {
          return usersJSON.channel['display_name']
       });

       let usersData = usersJSON.follows.map(usersJSON => {
          return usersJSON.channel['display_name'] + ' ' + usersJSON.channel['logo']
       });
       usersData.forEach(newTile);
    });
    clearTimeout(clearInt);
    setTimeout(checkList, 1000);
 }
 //2
 function newTile(element) {
    let elementArr = element.split(' ');
    /** 
     ** I can talk to each onlineStatus by using $('#' + username + ' .onlineStatus').css('color', 'green');
     ** 
     ** TESTED 
     ** username = "Meteos"
     ** $('#' + username + ' .onlineStatus').css('color', 'yellow');
     **
     */

    $('.page').append(
       '<div class="block tile" id="' + elementArr[0] + '">' +
       '<div class="pivoter">' +
       '<div><span class="onlineStatus">◉</span>' +
       '<a href="http://www.twitch.tv/' + elementArr[0] + '">' +
       '<span class="username">' + elementArr[0] + '</span>' +
       '</a>' +
       '</div>' +
       '</div>' +
       '<img src="' + elementArr[1] + '" class="profileImg"/>' +
       '</div>');

    getOnlineStatus(elementArr[0]);

 }
 //3
 function getOnlineStatus(username) {
    //console.log('this is ' + userName)
    let url = 'https://api.twitch.tv/kraken/streams/' + username + '?callback=?';
    $.getJSON(url, json => {

       let status = "";
       if (json.stream === null) {

          $('#' + username + ' .onlineStatus').attr('status', 'offline');
          $('#' + username + ' .onlineStatus').css('color', 'red');
          //console.log(userName + ' is offline'); 
       } else {

          $('#' + username + ' .onlineStatus').attr('status', 'online');
          $('#' + username + ' .onlineStatus').css('color', 'green');
          //console.log(userName + ' is online');
       }
    });
    clearTimeout(clearInt);
    init();
 }
 //4
 var checkList = () => {
    if ($('div .block').length == 0) {
       $('#status-area').flash_message({
          text: 'Could not find username',
          how: 'append',
          class_name: 'noFriends'
       });
       $('.page').addClass('animated wobble');
    }

    setTimeout(function removeAnimation() {
       $('.page').removeClass('animated wobble')
    }, 1000);
 }

 var init = init => {
       $('#onL').on('click', () => {
          if ($('.onlineStatus[status="online"]').length === 0) {
             $('#offL').click();
             $('#status-area').flash_message({
                text: 'Everyones offline!',
                how: 'append',
                class_name: 'offline'
             });
          } else {
             $('#status-area').flash_message({
                text: 'Friends now streaming! 🎮',
                how: 'append',
                class_name: 'online'
             });
          }
          $('.onlineStatus[status="offline"]').parent().parent().parent().fadeOut(200);
          $('.onlineStatus[status="online"]').parent().parent().parent().fadeIn(200);
       });
       $('#offL').on('click', () => {
          if ($('.onlineStatus[status="offline"]').length == 0) {
             $('#onL').click();
             $('#status-area').flash_message({
                text: 'Everyones online!',
                how: 'append',
                class_name: 'online'
             });
          } else {
             $('#status-area').flash_message({
                text: 'Friends now sleeping?!💤',
                how: 'append',
                class_name: 'offline'
             });
          }

          $('.onlineStatus[status="online"]').parent().parent().parent().fadeOut(200);
          $('.onlineStatus[status="offline"]').parent().parent().parent().fadeIn(200);
       });

    }
    //ajax loading pretty
 var loading = loading => {
    $("#onL").css('opacity', '.1');
    $("#offL").css('opacity', '.1');
    setTimeout(loadingHelper, 100);
 }
 var clearInt = setInterval(loading, 500);
 var loadingHelper = loadingHelper => {
       $('#onL').css('opacity', '1');
       $("#offL").css('opacity', '1');
    }
    //Special thanks to BaylorRae for this snippet: http://jsfiddle.net/BaylorRae/vwvAd/
 $.fn.flash_message = function(options) {

    options = $.extend({
       text: 'Done',
       time: 1000,
       how: 'before',
       class_name: ''
    }, options);

    return $(this).each(function() {
       if ($(this).parent().find('.flash_message').get(0))
          return;

       var message = $('<span />', {
          'class': 'flash_message ' + options.class_name,
          text: options.text
       }).hide().fadeIn('fast');

       $(this)[options.how](message);

       message.delay(options.time).fadeOut('normal', function() {
          $(this).remove();
       });

    });
 };

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

style.sass

$g1: rgb(random(255),random(255),random(255))
$g2: rgb(random(255),random(255),random(255))
$pageChildren: #011

body
  color: white
  font-family: verdana
  text-transform: uppercase
  font-size: 2em

#prev
  position: absolute
  right: 10px
  bottom: 5px

body > *
  margin: auto
  //overflow: auto
  overflow: hidden

main
  position: absolute
  top: 0
  bottom: 0
  left: 0
  right: 0
  width: 100%
  height: 100%
  background-color: blue
  background-image: linear-gradient(#014, #aff)
  //padding-top: 10%

section
  margin-top: 50px
  //overflow: hidden
  position: relative
  width: 100%
  //background-color: pink
  min-height: 500px
  overflow: auto
  max-height: 400px

i.fa-toggle-on , .fa-toggle-off
  font-size: 1.8em
 
.page
  //position: relative
  margin: 0 auto
  padding: 20px
  resize: both
  width: 300px
  height: 100%
  background-color: #ccc
  border-radius: 10px
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1), 0 6px 20px 0 rgba(0, 0, 0, 0.3)

.pivoter
  border-radius: 10px
  //z-index: 100
  width: 50px
  //height: 100%
  background-color: $pageChildren
  //border-radius: 4px
  box-shadow: 0 0 0 0 rgba(0, 0, 0, .2), 0 0 10px 5px rgba(0, 0, 0, 0.3)

.pivoter span
  //color: black
  //font-size: 1em !important
  padding-left: 20%

.pivoter #username
  font-size: .6em
  //padding: 10%

.pivoter a
  text-decoration: none
  color: rgba(255,255,255, 1)
  font-size: .6em

.pivoter a:visited
  color: #ee0
   
.block
  margin: auto
  width: 290px
  height: 80px
  background-color: $pageChildren
  border-radius: 15px
  margin-bottom: .5em

.profileImg
  width: 40px
  border-radius: 10px
  margin-left: 248px
  

.tile
  -webkit-transition: all linear 2s
  -webkit-transition: all 1s linear
  -o-transition: all 1s linear
  -moz-transition: all 1s linear
  -ms-transition: all 1s linear
  -kthtml-transition: all 1s linear
  transition: all 1s linear

.tile:hover
  -webkit-box-shadow: 0px 0px 4px 2px $pageChildren
  -moz-box-shadow: 0px 0px 4px 2px $pageChildren
  box-shadow: 0px 0px 4px 2px $pageChildren
  -webkit-transition: all .1s linear
  -o-transition: all .1s linear
  -moz-transition: all .1s linear
  -ms-transition: all .1s linear
  -kthtml-transition: all .1s linear
  transition: all .1s linear


// Toggler styling

#togglerParent
  //width: 70px
  //border: dashed 1px black
  background-color: rgba(255,255,255, .1)
  margin-bottom: 20px

#onL
  background-color: green

#onL:active
  opacity: .5 !important
   
#offL
  margin-bottom: 5px
  background-color: red
  

#offL:active
  opacity: .5 !important

button
  //opacity: .3
  margin: 0px
  //font-size: 1em
  border: 0
  border-radius: 5px
  padding: 20px
  width: 300px
  height: 5px
  text-align: center
  vertical-align: middle

// Input panel
#inputPanel
  z-index: 9
  position: absolute
  margin: auto
  top: 0
  right: 100px
  bottom: 0
  left: 0
  width: 250px
  height: 250px
  //background-color: #ccc
  border-radius: 3px

#inputPanel input
  background-color: rgba(255, 255, 255, .2)
  border-radius: 10px
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1), 0 6px 20px 0 rgba(0, 0, 0, 0.3)
  text-decoration: underline
  border: none
  height: 5em
  width: 345px
  font-size: 1em
  //background-color: rgba(255, 255, 255, .5)

input[type="text"] 
  color: black
  font-family: Verdana
  appearance: none
  box-shadow: none
  border-radius: none
  text-align: center


//search style
#search
  margin: 0 auto
  display: none
  //color: white
  //position: relative
  top: 0
  //overf1ow-x: hidden
  //width: 100px
  font-size: 1em
  cursor: pointer
  margin-left: 44%

#search > * 
  margin: 0 0 20px 0
  font-size: 1em

//mobile
@media screen and (max-width: 620px)
  body
    //background-color: lightgreen
    overflow-x: hidden
    overflow: -moz-scrollbars-horizontal
  .page, .block
    width: 90%
    //height: 100%
    overflow: hidden
  .page
    background-color: rgba(255,255,255, 0)
    overflow-x: hidden
    resize: none
    width: 80%
  button
    z-index: -999
    position: fixed
    top: 0
  form input
    width: 80%
    padding: 10%

.blur
  filter: blur(5px)
  -webkit-filter: blur(5px)
  -moz-filter: blur(5px)
  -o-filter: blur(5px)
  -ms-filter: blur(5px)

//flash message
.flash_message
  //color: yellow
  //padding: 15px
  border: solid blue .02em
  background-color: #1a1
  border-radius: 10px
  position: fixed
  top: 0
  left: 10%
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1), 0 6px 20px 0 rgba(0, 0, 0, 0.3)

.online
  color: white
  background-color: green

.offline
  color: white
  background-color: red

.noFriends
  color: #014
  background-color: #aff

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />

twitch-tv-zealot.markdown

twitch.tv-Zealot

A Pen by Kameron Robinson on CodePen.

License.

twitch.tv-Zealot

A Pen by Kameron Robinson on CodePen.

License.