diff --git a/examples/web/index.html b/examples/web/index.html index 1955eab7d0104d07bd00447ef965f216b8ffc937..112efba843e2cd86ddfae48726903388e6ee3407 100644 --- a/examples/web/index.html +++ b/examples/web/index.html @@ -37,9 +37,10 @@ </div> <div id="separator-diag" class="separator"></div> <div class="section"> + <span id="button-pause" class="tiny-button tiny-button-left border padded">Pause</span> <span id="button-benchmark" class="tiny-button tiny-button-left border padded">Benchmark</span> <span id="button-fullscreen" class="tiny-button tiny-button-left border padded">Fullscreen</span> - <span id="button-information" class="tiny-button tiny-button-left padded enabled">Information</span> + <span id="button-information" class="tiny-button tiny-button-left border padded enabled">Information</span> </div> </div> </div> diff --git a/examples/web/index.js b/examples/web/index.js index 07fc40924b37012cabaffdc875921fe4d63abe7a..26b9496160d10c9775ad234f6c0ef9902b968061 100644 --- a/examples/web/index.js +++ b/examples/web/index.js @@ -45,7 +45,8 @@ const state = { canvasScaledCtx: null, image: null, videoBuff: null, - toastTimeout: null + toastTimeout: null, + paused: false }; (async () => { @@ -76,6 +77,13 @@ const state = { // runs the sequence as an infinite loop, running // the associated CPU cycles accordingly while (true) { + if (state.paused) { + await new Promise((resolve) => { + setTimeout(resolve, 100); + }); + continue; + } + const ratioLogic = state.logicFrequency / VISUAL_HZ; for (let i = 0; i < ratioLogic; i++) { state.chip8.clock_ws(); @@ -93,7 +101,7 @@ const state = { // waits a little bit for the next frame to be draw // @todo NEED TO DEFINE A TARGET TIME - await new Promise((resolve, reject) => { + await new Promise((resolve) => { setTimeout(resolve, 1000 / VISUAL_HZ); }); } @@ -197,9 +205,28 @@ const registerButtons = () => { setLogicFrequency(state.logicFrequency - 60); }); + const buttonPause = document.getElementById("button-pause"); + buttonPause.addEventListener("click", (event) => { + toggleRunning(); + }); + const buttonBenchmark = document.getElementById("button-benchmark"); - buttonBenchmark.addEventListener("click", (event) => { - console.info("Going to benchmark stuff"); + buttonBenchmark.addEventListener("click", async (event) => { + buttonBenchmark.classList.add("enabled"); + pause(); + try { + const initial = Date.now(); + const count = 500000000; + for(let i = 0; i < count; i++) { + state.chip8.clock_ws(); + } + const delta = (Date.now() - initial) / 1000; + const frequency_mhz = count / delta / 1000 / 1000; + showToast(`Took ${delta.toFixed(2)} seconds to run ${count} ticks (${frequency_mhz.toFixed(2)} Mhz)!`); + } finally { + resume(); + buttonBenchmark.classList.remove("enabled"); + } }); const buttonFullscreen = document.getElementById("button-fullscreen"); @@ -258,6 +285,27 @@ const setLogicFrequency = (value) => { document.getElementById("logic-frequency").textContent = value; }; +const toggleRunning = () => { + const buttonPause = document.getElementById("button-pause"); + if (buttonPause.textContent === "Resume") { + resume(); + } else { + pause(); + } +}; + +const pause = () => { + state.paused = true; + const buttonPause = document.getElementById("button-pause"); + buttonPause.textContent = "Resume"; +} + +const resume = () => { + state.paused = false; + const buttonPause = document.getElementById("button-pause"); + buttonPause.textContent = "Pause"; +} + const init = () => { initCanvas(); };