Great work on the new update! I've been playing occasionally on an iPad, and there seems to be a bug with Webkit-based browsers. When the game-output div has some text content, and it gets updated with fresh content, it won't always fully redraw. This means that some of the old text lingers on the screen if the new text is shorter than the old text.
This seems to be a known issue with Webkit, and the workaround is to do a funky little dance with hiding the content, refresh it, and then forcing it to re-layout by accessing a layout-sensitive property.
I've tested a fix for this locally by wrapping changes to game-output into two functions. Anywhere you assign the game-output's innerHTML, I use the setGameContentHtml function, and anywhere you assign the game-output's innerText, I instead use the setGameContentText function.
This seems to fix the issue, and the game-content div properly redraws in the testing I've been able to do. Hope this helps!
function setGameOutputHtml(inHtml) {
const gameOutput = document.getElementById('game-output');
const oldDisplayValue = gameOutput.style.display;
gameOutput.style.display = 'none';
gameOutput.innerHTML = '';
gameOutput.innerHTML = inHtml;
gameOutput.offsetHeight; // force re-layout
gameOutput.style.display = oldDisplayValue;
}
function setGameOutputText(inText) {
const gameOutput = document.getElementById('game-output');
const oldDisplayValue = gameOutput.style.display;
gameOutput.style.display = 'none';
gameOutput.innerHTML = '';
gameOutput.innerText = inText;
gameOutput.offsetHeight; // force re-layout
gameOutput.style.display = oldDisplayValue;
}