<!--
  Copyright 2022 The Fuchsia Authors. All rights reserved.
  Use of this source code is governed by a BSD-style license that can be
  found in the LICENSE file.
-->
<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
  </head>
  <body>
    <main>
      <select name="rive-animations" id="rive">
        <option value="juice.riv">juice.riv</option>
        <option value="knight.riv">knight.riv</option>
        <option value="marty.riv">marty.riv</option>
      </select>
      <input type="checkbox" id="partials" name="partials">
      <label for="partials">Visualize partial updates</label>
      <p id="fps">FPS: ??? (???/???)</p>
      <canvas id="drawing" width="1000" height="1000" style="width: 500;"></canvas>
      <script type="module">
        const rive = document.getElementById('rive');
        const partials = document.getElementById('partials');

        const canvas = document.getElementById('drawing');
        const ctx = canvas.getContext('2d');

        const worker = new Worker(new URL('./worker.js', import.meta.url), {
          type: 'module'
        });
        worker.postMessage({
          'width': canvas.width,
          'height': canvas.height,
          'partials': partials.checked,
          'rive': rive.value,
        });

        const fps = document.getElementById('fps');

        let timings = [];
        function pushTiming(timing) {
          timings.push(timing);

          if (timings.length == 50) {
            const sum = timings.reduce((a, b) => a + b, 0);
            const avg = (sum / timings.length) || 0;
            const min = Math.min(...timings);
            const max = Math.max(...timings);

            fps.innerHTML = 'FPS: ' + (1 / avg).toFixed(2) + ' (' + (1 / max).toFixed(2) + '/' + (1 / min).toFixed(2) + ')';

            timings = [];
          }
        }

        let last_timestamp = 0;
        function animation(timestamp) {
          const elapsed = timestamp - last_timestamp;
          last_timestamp = timestamp;

          pushTiming(elapsed / 1000);

          worker.postMessage({
            'elapsed': elapsed,
            'width': canvas.width,
            'height': canvas.height,
            'partials': partials.checked,
            'rive': rive.value,
          });
        }

        worker.onmessage = function(message) {
          ctx.putImageData(new ImageData(
            new Uint8ClampedArray(message.data),
            canvas.width,
            canvas.height
          ), 0, 0);

          window.requestAnimationFrame(animation);
        }
      </script>
    </main>
  </body>
</html>