|
|
|
|
<?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") ?>
|
