RWaLRp

index.html

<link href='https://fonts.googleapis.com/css?family=Gudea' rel='stylesheet' type='text/css'>
<div class='info_content'>
  <div class='row'>
    <div class='col-xs-12'>
      <div class='twitchlogo'>
        <img class='twitch_height'  src="http://s.jtvnw.net/jtv_user_pictures/hosted_images/Twitch_Logo_White.png">
      </div>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-4'></div>
    <div id='fafazulu' class='col-xs-4'></div>
    <div class='col-xs-4'></div>
  </div>
</div>

<div class='template'>
  <div class='template_container'>

    <!-- this template is repeated as list items -->
    <a target="_blank" href="{{link}}">
      <div class='container row'>
        <div class='img_holder col-xs-2'><img class='logo' src='{{image}}'></div>
          
        <div class='text_details col-xs-10'>
          <div class='title'>{{name}}</div>
          <div class='status'>{{status}}</div>
        </div>
      </div>
    </a>
    <!-- yes end -->

  </div>
</div>

RWaLRp.markdown

RWaLRp

A Pen by Dealga McArdle on CodePen.

License.

script.js

gresult = undefined

prefixr = 'http://static-cdn.jtvnw.net/jtv_user_pictures/'
fcc = 'freecodecamp-profile_image-'
placehold = 'http://placehold.it/50x50'
images = 
  'freecodecamp': prefixr + fcc + 'f1b681380c0b0380-300x300.png'
  'storbeck': prefixr + 'geoffstorbeck-profile_image-e3eaf467cf31ac06-300x300.jpeg'
  'terakilobyte': placehold
  'habathcx': prefixr + 'habathcx-profile_image-d75385dbe4f42a66-300x300.jpeg'
  'RobotCaleb': prefixr + 'robotcaleb-profile_image-9422645f2f0f093c-300x300.png'
  'comster404': placehold
  'brunofin': placehold
  'thomasballinger': placehold
  'noobs2ninjas': prefixr + 'noobs2ninjas-profile_image-34707f847a73d934-300x300.png'
  'beohoff': placehold
  'MedryBW': placehold
 

gen_string = (channel) ->
  gk = tpml = $('.template_container').html()
  gk = gk.replace('{{link}}', channel.link)
  gk = gk.replace('{{image}}', channel.image)
  gk = gk.replace('{{name}}', channel.name)
  gk = gk.replace('{{status}}', channel.status)
  gk

faux_twitch_object = []
 
availableTags = (k for k, v of images)

add_users_not_broadcasting = () ->
  collected = faux_twitch_object.map( (o) -> o.name )
  console.log(collected)
  for k, v of images
    if k not in collected
      obj = 
        link: 'http://www.twitch.tv/' + k
        image: v
        name: k
        status: 'off'
        viewers: 0
      faux_twitch_object.push(obj)


draw_info = (result) ->
  $ul = $('#fafazulu')

  result.streams.forEach (user) ->
    user_obj = 
      link: 'http://www.twitch.tv/' + user.channel.display_name
      image: user.channel.logo
      name: user.channel.display_name
      status: user.channel.status
      viewers: user.viewers
    
    faux_twitch_object.push(user_obj)
    
  add_users_not_broadcasting()

  $.each faux_twitch_object, (index, channel) ->
    $ul.append gen_string(channel)
    return
  return
    
$(document).ready ->


  jreq = "https://api.twitch.tv/kraken/streams?channel="
  tlist = availableTags.toString()
  fjreq = jreq + tlist + '&callback=?'
  
  $.getJSON(fjreq, (result) -> 
    if result
      gresult = result
      draw_info(result)
  )

scripts

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

style.css

#fafazulu
  //width: 40vw
  min-width: 500px

.twitch_height
  height: 60px
  float: right
  
.twitchlogo
  width: 500px
  


body
  font-family: 'Gudea', sans-serif
  background-color: #AFE3F7

.ar
  border: 1px solid #666
  height: 50px

.title
  color: #6F6D6D
  // border: 1px solid #666

.img_holder
  height: 50px
  float: left
  
.container
  height: 50px
  border: 1px solid #EBEBEB
  width: auto
  background-color: #FBFBFB
  margin-bottom: 5px
    
.status
  color: #9B9E9D
  overflow: hidden

.text_details
  float: left

.logo
  width: 50px

.template
  display: none

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />