63 lines
1.7 KiB
Vue
63 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
const cards = useState<{ [key: string]: any }>('cards', () => ({}))
|
|
let game = ref<any>({})
|
|
const socket = new WebSocket("ws://127.0.0.1:8765")
|
|
|
|
const createObject = {
|
|
"card": (data: any) => {
|
|
cards.value[data.uuid] = data
|
|
},
|
|
"player": () => { },
|
|
"game": (data: any) => { game.value = data },
|
|
"team": () => { }
|
|
} as { [id: string]: (data: Object) => any }
|
|
|
|
socket.onopen = function (e) {
|
|
console.log("[open] Connection established");
|
|
};
|
|
|
|
socket.onclose = function (event) {
|
|
if (event.wasClean) {
|
|
console.warn(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
|
|
} else {
|
|
// e.g. server process killed or network down
|
|
// event.code is usually 1006 in this case
|
|
console.error('[close] Connection died');
|
|
}
|
|
};
|
|
|
|
socket.onerror = function (error) {
|
|
console.error(error);
|
|
};
|
|
|
|
socket.onmessage = function (event) {
|
|
const data = JSON.parse(event.data)
|
|
|
|
|
|
if (data.type == "create" && data.data_type == "object") {
|
|
if (!(data.data.object_type in createObject)) {
|
|
throw new Error(`Object ${data.data.object_type} couldn't be created`)
|
|
}
|
|
createObject[data.data.object_type](data.data)
|
|
} else {
|
|
console.log(data.type, data.data_type, data.data);
|
|
}
|
|
|
|
// if (data.type == "context" && data.data_type == "game_context_id" && data.data == "pregame") {
|
|
// setTimeout(() => socket.send(JSON.stringify({ type: "ready", data_type: "ready_state", data: true })), 1000)
|
|
// }
|
|
};
|
|
|
|
|
|
async function register(username: string) {
|
|
socket.send(JSON.stringify({ type: "register", data_type: "username", data: username }))
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<GameBoard :game="game"></GameBoard>
|
|
</div>
|
|
</template>
|