Set up basic display and styling with a spinner while loading data.

2026-07-12 18:33:46 +00:00 · 2019-09-19 21:41:59 +01:00
parent facd549597
commit c124771532
3 changed files with 114 additions and 36 deletions
@@ -10,6 +10,12 @@
  </head>

  <body>
+    <div class="spinner">
+        <p>Loading data from Twitch</p>
+      <div class="bounce1"></div>
+      <div class="bounce2"></div>
+      <div class="bounce3"></div>
+    </div>
    <div id="root"></div>
    <script src="scripts.js"></script>
  </body>
@@ -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);
-// })
+}).then(() => {
+    document.getElementsByClassName('spinner')[0].style.display = 'none';
+    displayData();
+});
@@ -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) {