Pixelbart Twitch

by Kevin Pliester

HTML

<div class="twitch-users"></div>

SCSS

body {
  background: #202225;
  color: #DCDDD4;
  font-family: "Gill Sans Extrabold", Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.twitch-users {
  padding: 15px;

  .twitch-user {
    width: calc(50% - 15px);
    float: left;
    color: #DCDDD4;
    text-decoration: none;
    height: auto;

    .twitch-user-inner {
      border: 1px solid #36393F;
      background: #2F3136;
      padding: 15px;
      display: flex;

      .username {
        font-weight: bold;
        margin-bottom: 7.5px;
      }

      .user-image {
        margin: 0 15px 15px 0;
        position: relative;

        img {
          width: 35px;
          height: 35px;
          border-radius: 50%;
        }

        .live {
          position: absolute;
          top: -2.5px;
          right: -2.5px;
          background: #F04747;
          height: 10px;
          width: 10px;
          border-radius: 50%;
        }
      }

      &:hover {
        background: #36393F;
      }
    }

    &:nth-child(2) {
      margin-left: 15px;
    }
  }
}

JavaScript

var container = $(".twitch-users");
var request = $.ajax({
  url: "https://pixelbart.de/wp-json/twitch/users/zurret,randlocher,pietsmiet",
  data: {
    code: "7a0eef051537aa9075c03dfd86b7cf",
  },
});

request.done(function(users) {
  console.log(users);
  if (users.length) {
    shuffleArray(users);
    $.each(users, function(key, user) {
      var live = "";

      if (0 !== user.live) {
        live = "<div class=\"live\"></div>";
      }

      $(container).append(`
      <a href="https://twitch.tv/` + user.login + `" target="_blank" class="twitch-user">
        <div class="twitch-user-inner">
           <div class="user-image">
        			` + live + `
           		<img src="` + user.profile_image_url + `" alt=` + user.display_name + `>
           </div>
          <div class="user-info">
        		<div class="username">` + user.display_name + `</div>
        		<div class="description">` + user.description + `</div>
           </div>
        </div>
      </a>
      `);
    });
  }
});

function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
}