<?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, autodartsState } from "<?= asset("assets/js/websocket.js") ?>";


    document.addEventListener("keydown", (event) => {
      if (event.key == "F6"){
        event.preventDefault();
        fetch('http://localhost:3180/api/reset', {
          method: 'POST',
          headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
          },
      })
      }
      if (event.key == "F7"){
        event.preventDefault();
        fetch('http://localhost:3180/api/start', {
          method: 'PUT',
          headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
          },
      })
      }
      if (event.key == "F8"){
        event.preventDefault();
        fetch('http://localhost:3180/api/stop', {
          method: 'PUT',
          headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
          },
      })
      }
      if (event.key == "u"){
        event.preventDefault();
        connect("ws://localhost:3180/api/events", (event) => {
          let data = JSON.parse(event.data);
          if(data.type == "state"){
            autodartsState.status = data.data.status;
            const evt = new CustomEvent("autodarts", {detail: data});
            document.body.dispatchEvent(evt);
            console.log("Message from server ", data);
            console.log(autodartsState.status); 
          }
        });
      }
    });
    </script>
<?php snippet("footer") ?>
