<?php snippet("header", ['title' => "Dart Scorer"]) ?>
  <body class="home">
    <!-- <div>Error:<?= $error ?></div> -->
    <main>
      <header>
        <img src="<?= asset("assets/img/YGDC.png")->url() ?>">
      </header>
      <nav class="menu">
        <d-renderer :stack="stack"></d-renderer>
      </nav>
    </main>
    <script type="module">
    import { createApp, onMounted, reactive  } from "vue";
    import { vIndex, vAutofocus, EnterHandler } from "<?= asset("assets/js/handlers.js") ?>";
    import { state } from "<?= asset("assets/js/stateMgr.js") ?>";
    import { homeHandler, initHomeView } from "<?= asset("assets/js/views/home.js") ?>";
    import initComponents from "<?= asset("assets/js/components/init.js") ?>";
    import { renderer, overlayAndGet } from "<?= asset("assets/js/componentPromise.js") ?>";

    const app = createApp({
      setup() {
        const stack = reactive([]);
        const mounted = onMounted(async () => {
          document.addEventListener("keydown", EnterHandler);
          await homeHandler(stack);
        })
        return { stack }
      }
    }).directive("index", vIndex).directive("autofocus", vAutofocus);
    initComponents(app);
    initHomeView(app);
    app.component("d-renderer", renderer);
    app.mount('main')
    </script>
<?php snippet("footer") ?>
