I have this page. Basically, it runs two Alpha-beta pruning -based AI bots in the game of Connect Four. The problem I am experiencing is that I get the entire output after the game is over even if I do add more progress text to the holder <div> via 'innerHTML' while the game is going.
How can make it to spit the intermediate state text to the <div>...</div> holding the output?
PS. If you decide to run the above page, it may take around 20 seconds to finish.
The culprit code
let text = ""; const output = document.getElementById('output-text-div'); const heuristicFunction = ...; const engine = ...; const depth = 8; let state = new ConnectFourBoard(); text += state.toString() +"<br/>"; function millis() { return new Date().valueOf(); } let totalDurationX = 0; let totalDurationO = 0; while (true) { text += "X's turn:<br/>"; let ta = millis(); state = engine.search(state, depth, X); let tb = millis(); totalDurationX += tb - ta; text += state.toString(); text += "<br/>"; text += "X AI duration: " + (tb - ta) +" milliseconds.<br/>"; output.innerHTML = text; if (state.isTie()) { text += "RESULT: It's a tie.<br/>"; break; } if (state.isWinningFor(X)) { text += "RESULT: X won.<br/>"; break; } text += "O's turn:<br/>"; output.innerHTML = text; var i = output.height; ta = millis(); state = engine.search(state, depth, O); tb = millis(); output.innerHTML = text; totalDurationO += tb - ta; text += state.toString(); text += "<br/>"; text += "O AI duration: " + (tb - ta) +" milliseconds.<br/>"; if (state.isTie()) { text += "RESULT: It's a tie.<br/>"; break; } if (state.isWinningFor(O)) { text += "RESULT: O won.<br/>"; break; } output.innerHTML = text; i = output.width; } text += "X AI total duration: " + totalDurationX +" milliseconds.<br/>"; text += "O AI total duration: " + totalDurationO +" milliseconds.<br/>"; output.innerHTML = text