Basic html & js page that gets some data and then crashes due to lack of proper promise chaining.

2026-07-15 03:43:46 +00:00 · 2019-09-17 22:27:33 +01:00
parent 85ff9e6d33
commit 092ac9c244
4 changed files with 167 additions and 0 deletions
@@ -1,4 +1,5 @@
 # what-games-should-I-stream
+
 A web app to show, in real time, which games have most viewers and least streamers, that can be played to best grow a Twitch audience.

 ## Algorithm
@@ -0,0 +1,16 @@
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>What games should I stream?</title>
+
+    <link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet" />
+    <link href="style.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script src="scripts.js"></script>
+  </body>
+</html>
@@ -0,0 +1,124 @@
+const app = document.getElementById('root');
+
+const container = document.createElement('div');
+container.setAttribute('class', 'container');
+
+app.appendChild(container);
+
+// !todo - Currently only getting top 100 games (a single page of results), need to get more for more accurate data analysi
+
+function getTopGames(cursor) {
+    console.log('--> getTopGames');
+    // See https://dev.twitch.tv/docs/api/reference/#get-top-games
+    
+    var requestUrl = 'https://api.twitch.tv/helix/games/top?first=100';
+    if(cursor.length > 0)
+    {
+        requestUrl += '&after=' + cursor;
+    }
+    var request = new Request(requestUrl, {
+        headers: new Headers({
+            'Client-ID': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx' // Hide this for github, it's my application's Client ID
+        })
+    });
+
+    // List to hold the top games, to be returned by the function
+    var tempList = []; 
+    var tempCursor = '';
+
+    fetch(request)
+    .then(response => {
+        return response.json()
+    })
+    .then(data => {
+        // Get the cursor 
+        console.log(data.pagination.cursor);
+        tempCursor = data.pagination.cursor;
+        
+        // Get each game from the returned JSON data and add it to the list
+        data.data.forEach(game => {
+            tempList.push(game);
+        });
+        
+    })
+    .catch(err => {
+        // Do something for an error here
+        const errorMessage = document.createElement('marquee')
+        errorMessage.textContent = `Gah, it's not working! Error is ` + err
+        app.appendChild(errorMessage)
+    })
+
+    return { 'data': tempList, 'cursor': tempCursor };
+}
+
+
+var numberOfResultsToReturn = 1000;
+var topGames = [];
+
+// Loop to get the right amount of data back
+var cursor1 = '';
+for (i = 0; i < (numberOfResultsToReturn / 100); i++) {
+    console.log('--> loop ' + i);
+    // Get back a list of 100 games and data.pagination.cursor as a string
+    var returnedData = getTopGames(cursor1);
+    console.log(returnedData);
+    // Concatenate that list and save the next cursor
+    topGames = topGames.concat(returnedData.data);
+    cursor1 = returnedData.cursor;
+};
+
+
+
+
+
+function getTopStreams() {
+    // See https://dev.twitch.tv/docs/api/reference/#get-streams
+    var request = new Request('https://api.twitch.tv/helix/streams?first=100', {
+        headers: new Headers({
+            'Client-ID': 'eawzslliv2kz89gj58ul8tvy6p7fm3' // Hide this for github, it's my application's Client ID
+        })
+    });
+
+    // List to hold the top games, to be returned by the function
+    var tempList = []; 
+
+    fetch(request)
+    .then(response => {
+        return response.json()
+    })
+    .then(data => {
+        // Get each game from the returned JSON data and add it to the list
+        data.data.forEach(game => {
+            tempList.push(game);
+        });
+    })
+    .catch(err => {
+        // Do something for an error here
+        const errorMessage = document.createElement('marquee')
+        errorMessage.textContent = `Gah, it's not working! Error is ` + err
+        app.appendChild(errorMessage)
+    })
+
+    return tempList;
+}
+
+
+
+
+
+// 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);
+// })
@@ -0,0 +1,26 @@
+#root {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.card {
+  margin: 1rem;
+  border: 1px solid gray;
+}
+
+@media screen and (min-width: 600px) {
+  .card {
+    flex: 1 1 calc(50% - 2rem);
+  }
+}
+
+@media screen and (min-width: 900px) {
+  .card {
+    flex: 1 1 calc(33% - 2rem);
+  }
+}