jcreek/what-games-should-I-stream
1
0
Fork 0
mirror of https://github.com/jcreek/what-games-should-I-stream.git synced 2026-07-14 11:23:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Josh Creek
2019-09-17 22:27:33 +01:00
parent 85ff9e6d33
commit 092ac9c244
4 changed files with 167 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1
View File
@@ -1,4 +1,5 @@
# what-games-should-I-stream # 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. 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 ## Algorithm
index.html
+16
View File
@@ -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>
scripts.js
+124
View File
@@ -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);
// })
style.css
+26
View File
@@ -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);
}
}