diff --git a/index.html b/index.html index 9c1d5ea..a8c5c43 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,12 @@ +
diff --git a/scripts.js b/scripts.js index c2c14e9..666265f 100644 --- a/scripts.js +++ b/scripts.js @@ -2,6 +2,7 @@ const app = document.getElementById('root'); var clientID = 'xxxxxx'; // Hide this for github, it's my application's Client ID var streamDataSet = []; +var finalData = []; async function getTopGamesAsync(){ console.log('--> getTopGamesAsync'); @@ -73,43 +74,49 @@ async function consolidateDataSet() { return topGames; } +function displayData() { + // Display logic + const appContainer = document.createElement('div'); + appContainer.setAttribute('class', 'appContainer'); + + app.appendChild(appContainer); + + finalData = streamDataSet.slice(0,21); // Set to first 21 for testing purposes + + finalData.forEach(game => { + const card = document.createElement('div'); + card.setAttribute('class', 'card'); + + const img = document.createElement('img'); + img.setAttribute('style', 'width:100%'); + img.src = game.box_art_url.replace('{width}', '376').replace('{height}', '500'); + + const container = document.createElement('div'); + container.setAttribute('class', 'container'); + + const h4 = document.createElement('h4'); + h4.textContent = game.name; + + // Show number of viewers for game, number of streamers and average number of viewers per streamer + const p = document.createElement('p'); + p.textContent = 'Info here'; + + appContainer.appendChild(card); + card.appendChild(img); + card.appendChild(container); + container.appendChild(h4); + container.appendChild(p); + }) +} + + consolidateDataSet().then((result) => { console.log('--> streamDataSet is ready for analysis'); streamDataSet = result; console.log(streamDataSet); -}); - - - - - - - - - -// Display logic -const container = document.createElement('div'); -container.setAttribute('class', 'container'); - -app.appendChild(container); - - - -// finalData.forEach(game => { -// const card = document.createElement('div'); -// card.setAttribute('class', 'card'); - -// const h1 = document.createElement('h1'); -// h1.textContent = game.name; -// // use game.box_art_url to get the image for each game - -// // Show number of viewers for game, number of streamers and average number of viewers per streamer -// const p = document.createElement('p'); -// p.textContent = ''; - -// container.appendChild(card); -// card.appendChild(h1); -// card.appendChild(p); -// }) \ No newline at end of file +}).then(() => { + document.getElementsByClassName('spinner')[0].style.display = 'none'; + displayData(); +}); \ No newline at end of file diff --git a/style.css b/style.css index ac4fe0d..0ca4012 100644 --- a/style.css +++ b/style.css @@ -1,16 +1,81 @@ +/* ----------- Spinner ----------- */ +.spinner { + margin: 100px auto 0; + width: 70px; + text-align: center; +} + +.spinner > div { + width: 18px; + height: 18px; + background-color: #6441a5; /* Twitch colour */ + + border-radius: 100%; + display: inline-block; + -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; + animation: sk-bouncedelay 1.4s infinite ease-in-out both; +} + +.spinner .bounce1 { + -webkit-animation-delay: -0.32s; + animation-delay: -0.32s; +} + +.spinner .bounce2 { + -webkit-animation-delay: -0.16s; + animation-delay: -0.16s; +} + +@-webkit-keyframes sk-bouncedelay { + 0%, 80%, 100% { -webkit-transform: scale(0) } + 40% { -webkit-transform: scale(1.0) } +} + +@keyframes sk-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); + } 40% { + -webkit-transform: scale(1.0); + transform: scale(1.0); + } +} + +/* ----------- App ----------- */ + #root { max-width: 1200px; margin: 0 auto; } -.container { +.appContainer { display: flex; flex-wrap: wrap; } .card { margin: 1rem; - border: 1px solid gray; + + /* Add shadows to create the "card" effect */ + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); + transition: 0.3s; + + border-radius: 5px; /* 5px rounded corners */ +} + +/* On mouse-over, add a deeper shadow */ +.card:hover { + box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); +} + +/* Add some padding inside the card container */ +.container { + padding: 2px 16px; +} + +/* Add rounded corners to the top left and the top right corner of the image */ +img { + border-radius: 5px 5px 0 0; } @media screen and (min-width: 600px) {