Some Chess Stream Stuff
In hope to 'help' someone ...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;
display: flex;
flex-direction: row;
align-items: left;
justify-content: left;
margin: auto;
}
td {
padding: 5px;
text-align: left;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
flex-grow: 1;
flex-basis: 0;
}
th {
padding: 5px;
text-align: right;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
flex-grow: 1;
flex-basis: 0;
}
th:last-child, td:last-child {
border-right: none;
}
th, td {
font-weight: bold;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>Today's Chess Results</td>
</tr>
<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 Win Streak</td>
<td id="current\_win\_streak">-</td>
</tr>
<tr>
<td>Highest Win Streak</td>
<td id="highest\_win\_streak">-</td>
</tr>
</tbody>
</table>
<script>
let initialTotalWins = -1;
let initialTotalLosses = -1;
let initialTotalDraws = -1;
let currentWinStreak = -1;
let highestWinStreak = -1;
// update wins, losses, and draws
document.getElementById('todays_wins').textContent = initialTotalWins;
document.getElementById('todays_losses').textContent = initialTotalLosses;
document.getElementById('todays_draws').textContent = initialTotalDraws;
document.getElementById('current_win_streak').textContent = currentWinStreak;
document.getElementById('highest_win_streak').textContent = highestWinStreak;
setInterval(() => {
// update values every minute
fetch('https://lichess.org/api/user/jackietheswede')
.then(response => response.json())
.then(data => {
const currentTotalWins = data.count.win;
const currentTotalLosses = data.count.loss;
const currentTotalDraws = data.count.draw;
// check for win and update streaks
if (currentTotalWins > initialTotalWins) {
currentWinStreak++;
if (currentWinStreak > highestWinStreak) {
highestWinStreak = currentWinStreak;
}
} else if (currentTotalLosses > initialTotalLosses || currentTotalDraws > initialTotalDraws) {
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 (currentTotalWins > initialTotalWins) {
todaysWinsElement.textContent = parseInt(todaysWinsElement.textContent) + 1;
}
if (currentTotalLosses > initialTotalLosses) {
todaysLossesElement.textContent = parseInt(todaysLossesElement.textContent) + 1;
}
if (currentTotalDraws > initialTotalDraws) {
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
initialTotalWins = currentTotalWins;
initialTotalLosses = currentTotalLosses;
initialTotalDraws = currentTotalDraws;
})
.catch(error => console.error(error));
}, 60000); // 1 minute 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.
setInterval(() => {
// update values every minute
fetch('https://lichess.org/api/user/jackietheswede'
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: stats.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"