<?php snippet("header", ['title' => "Game"]) ?>
  <body class="xoi">
    <main>
      <d-renderer :stack="stack"></d-renderer>
      <!-- <component :is="state.view"></component> -->
    </main>
    <script type="module">
    import { createApp, onMounted, reactive  } from "vue";
    import { vIndex, vAutofocus, EnterHandler } from "<?= asset("assets/js/handlers.js") ?>";
    import { xoiHandler, initXoiView } from "<?= asset("assets/js/views/xoi/main.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 xoiHandler(stack, "<?= $page->id() ?>");
        })
        return { stack }
      }
    }).directive("index", vIndex).directive("autofocus", vAutofocus);
    initComponents(app);
    initXoiView(app);
    app.component("d-renderer", renderer);
    app.mount('main')
    </script>
    <!-- <script type="module">
    import { connect } from "<?= asset("assets/js/websocket.js") ?>";
    connect("<?= $page->id() ?>", (event) => {
      console.log("Message from server ", JSON.parse(event.data));
    });

    </script> -->
<?php snippet("footer") ?>
