request_observable_api/breakout/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Minimal HTML head elements -->
    <meta charset="utf-8" />
    <title>Breakout!</title>
  </head>
  <body>
    <!-- Title of the page -->
    <h1>Breakout!</h1>

    <!-- Empty placeholders -->
    <div id="game"></div>
    <div id="controls">
      <p class="button"></p>
      <p>Speed: <span class="slider"></span></p>
    </div>

    <!-- JavaScript code to fill the empty placeholders with notebook cells
         Note that the script is not vanilla JavaScript but an ES module
         (type="module")
      -->
    <script type="module">
      // Import Observable notebook
      // To get the URL, go to the
      // [notebook](https://observablehq.com/@jashkenas/breakout), click on
      // "…" and then on "Download code"
      import notebook from 'https://api.observablehq.com/@jashkenas/breakout.js?v=3';

      // Import Observable library
      import {
        Runtime,
        Inspector,
      } from 'https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js';

      // Render selected notebook cells into DOM elements of this page
      const runtime = new Runtime();
      const main = runtime.module(notebook, name => {
        switch (name) {
          case 'viewof c':
            // render 'viewof c' notebook cell into <div id="game"></div>
            return new Inspector(document.querySelector('#game'));
            break;
          case 'viewof newgame':
            // render 'viewof newgame' notebook cell into <p class="button"></p>
            return new Inspector(document.querySelector('#controls .button'));
            break;
          case 'viewof speed':
            // render 'viewof speed' notebook cell into <span class="slider"></span>
            return new Inspector(document.querySelector('#controls .slider'));
            break;
          default:
            // force the evaluation of all the notebook cells (required for this notebook)
            return true;
        }
      });
    </script>
  </body>
</html>