Some Chess Stream Stuff
Today the post is somewhat different, it's a .html page to use with OBS as a browsersource. It displays the wins, losses, draws, current winstreak and the highest winstreak played under a streaming session.
My thought is that maybe I should just release it here for all streamers to use, no strings attached more than maybe a shoutout, if someone ask about it, for doing it. Not a must though!
A streamer asking me if I could do something like I just described - so I did. It works! A couple of months later I saw another streamer using it so I went to the channel and asked where he got it from. He answered that he became it from another streamer, the one I wrote the thing for, and that streamer told him that he did the "coding" - after some chatting - that he did some work on the code and and and, it's just not true. It just felt a bit sad, I felt sad, someone taking credit for doing something they didn't do. That's the reason why I put it here for all to use. I've sent it to some other streamers to but they didn't use it so far. Maybe they never will - there can only be love!
The Code:
<!DOCTYPE html>
<html>
<head>
<title>Chess Stats Today</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html,
body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
table {
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: center;
border-bottom: 1px solid #ddd;
}
th {
font-weight: bold;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Stats</th>
<th>Today</th>
</tr>
</thead>
<tbody>
<tr>
<td>Wins</td>
<td id="todays_wins">-</td>
</tr>
<tr>
<td>Losses</td>
<td id="todays_losses">-</td>
</tr>
<tr>
<td>Draws</td>
<td id="todays_draws">-</td>
</tr>
<tr>
<td>Current Winning Streak</td>
<td id="current_win_streak">-</td>
</tr>
<tr>
<td>Highest Winning Streak</td>
<td id="highest_win_streak">-</td>
</tr>
</tbody>
</table>
<script>
let initialTodaysWins = -1;
let initialTodaysLosses = -1;
let initialTodaysDraws = -1;
let currentWinStreak = -1;
let highestWinStreak = -1;
// update wins, losses, and draws
document.getElementById('todays_wins').textContent = initialTodaysWins;
document.getElementById('todays_losses').textContent = initialTodaysLosses;
document.getElementById('todays_draws').textContent = initialTodaysDraws;
document.getElementById('current_win_streak').textContent = currentWinStreak;
document.getElementById('highest_win_streak').textContent = highestWinStreak;
setInterval(() => {
// update values every minute
fetch('https://api.chess.com/pub/player/jackietheswede/stats')
.then(response => response.json())
.then(data => {
const currentTodaysWins = data.chess_blitz.record.win;
const currentTodaysLosses = data.chess_blitz.record.loss;
const currentTodaysDraws = data.chess_blitz.record.draw;
// check for win and update streaks
if (currentTodaysWins > initialTodaysWins) {
currentWinStreak++;
if (currentWinStreak > highestWinStreak) {
highestWinStreak = currentWinStreak;
}
} else if (currentTodaysLosses > initialTodaysLosses || currentTodaysDraws > initialTodaysDraws) {
currentWinStreak = 0;
}
// update wins, losses, and draws
const todaysWinsElement = document.getElementById('todays_wins');
const todaysLossesElement = document.getElementById('todays_losses');
const todaysDrawsElement = document.getElementById('todays_draws');
if (currentTodaysWins > initialTodaysWins) {
todaysWinsElement.textContent = parseInt(todaysWinsElement.textContent) + 1;
}
if (currentTodaysLosses > initialTodaysLosses) {
todaysLossesElement.textContent = parseInt(todaysLossesElement.textContent) + 1;
}
if (currentTodaysDraws > initialTodaysDraws) {
todaysDrawsElement.textContent = parseInt(todaysDrawsElement.textContent) + 1;
}
// update streak values
document.getElementById('current_win_streak').textContent = currentWinStreak;
document.getElementById('highest_win_streak').textContent = highestWinStreak;
// update initial values after the first API call
initialTodaysWins = currentTodaysWins;
initialTodaysLosses = currentTodaysLosses;
initialTodaysDraws = currentTodaysDraws;
})
.catch(error => console.error(error));
}, 5000); // 5 second interval
</script>
</body>
</html>
So WTF is this you may ask, well ...
Open notepad on your computer and copy/paste the code into it. Change my name to yours in this part of the code. Also change if you play bullet, blitz, rapid or classical. Just change the word.
fetch('https://api.chess.com/pub/player/jackietheswede/stats')
.then(response => response.json())
.then(data => {
const currentTodaysWins = data.chess_blitz.record.win;
const currentTodaysLosses = data.chess_blitz.record.loss;
const currentTodaysDraws = data.chess_blitz.record.draw;
Choose 'save as', choose a name and after your name add .html, then change fileformat under file name to "all files".
So for an example: statsblitz.html
Save it on your PC - (if you have an Apple, can't help you but enjoy.)
In OBS use this file as an browser source (Local File) and add this as "Custom CSS":
body {
font-family: Comic Sans MS;
margin: 0px auto;
overflow: hidden;
color: lightgrey;
text-shadow: 2px 2px 4px #000000;
text-align: center;
font-weight: bold;
font-size: 18px;
}
I use (among other things) width 800 and height 600 and then resize them in OBS. I also use a colorsource as background with filter controlling the opacity (chroma key, color correction or color key), either one work. Or do something else - experiment. Mine look like this:
I hope it can be useful for someone.
Yours "JackieTheSwede"
