mirror of
https://github.com/jcreek/what-games-should-I-stream.git
synced 2026-07-12 18:33:46 +00:00
Set up basic display and styling with a spinner while loading data.
This commit is contained in:
Josh Creek
@@ -10,6 +10,12 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<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>
|
<div id="root"></div>
|
||||||
<script src="scripts.js"></script>
|
<script src="scripts.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
+40
-33
@@ -2,6 +2,7 @@ const app = document.getElementById('root');
|
|||||||
|
|
||||||
var clientID = 'xxxxxx'; // Hide this for github, it's my application's Client ID
|
var clientID = 'xxxxxx'; // Hide this for github, it's my application's Client ID
|
||||||
var streamDataSet = [];
|
var streamDataSet = [];
|
||||||
|
var finalData = [];
|
||||||
|
|
||||||
async function getTopGamesAsync(){
|
async function getTopGamesAsync(){
|
||||||
console.log('--> getTopGamesAsync');
|
console.log('--> getTopGamesAsync');
|
||||||
@@ -73,43 +74,49 @@ async function consolidateDataSet() {
|
|||||||
return topGames;
|
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) => {
|
consolidateDataSet().then((result) => {
|
||||||
console.log('--> streamDataSet is ready for analysis');
|
console.log('--> streamDataSet is ready for analysis');
|
||||||
streamDataSet = result;
|
streamDataSet = result;
|
||||||
console.log(streamDataSet);
|
console.log(streamDataSet);
|
||||||
|
}).then(() => {
|
||||||
|
document.getElementsByClassName('spinner')[0].style.display = 'none';
|
||||||
|
displayData();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 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);
|
|
||||||
// })
|
|
||||||
@@ -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 {
|
#root {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.appContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
margin: 1rem;
|
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) {
|
@media screen and (min-width: 600px) {
|
||||||
|
|||||||
Reference in New Issue
Block a user