101 lines
3.0 KiB
Vue
101 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
const cards = useState<{ [key: string]: any }>('cards', () => ({}))
|
|
const players = useState<{ [key: string]: any }>('players', () => ({}))
|
|
const self = useState<any>('self', () => (null))
|
|
let gameObjects = useState<{ [key: string]: any }>('gameObject', () => ({}))
|
|
let game = ref<any>({})
|
|
let context = ref<string>('login')
|
|
const socket = new WebSocket("ws://127.0.0.1:8765")
|
|
|
|
const createObject = {
|
|
"card": (data: any) => {
|
|
cards.value[data.uuid] = data
|
|
gameObjects.value[data.uuid] = data
|
|
},
|
|
"player": (data: any) => {
|
|
players.value[data.uuid] = data
|
|
gameObjects.value[data.uuid] = data
|
|
},
|
|
"game": (data: any) => {
|
|
game.value = data
|
|
gameObjects.value[data.uuid] = 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 if (data.type == "update" && data.data_type == "object") {
|
|
if (!(data.data.uuid in gameObjects.value)) {
|
|
throw new Error(`Object ${data.data.uuid} doesn't exists`)
|
|
}
|
|
gameObjects.value[data.data.uuid] = data.data
|
|
createObject[data.data.object_type](data.data)
|
|
} else if (data.type === "context") {
|
|
context.value = data.data
|
|
console.log(context.value)
|
|
} else if (data.type === "set" && data.data_type == "self") {
|
|
self.value = players.value[data.data]
|
|
console.log(self.value)
|
|
} 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
|
|
}))
|
|
}
|
|
|
|
async function setReady(value: Event) {
|
|
socket.send(JSON.stringify({
|
|
type: "ready",
|
|
data_type: "ready_state",
|
|
data: ((value.target as HTMLInputElement).checked)
|
|
}))
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<button v-if="!self" @click="register('legonzaur')">LOGIN</button>
|
|
<input @change="setReady" v-if="self && !game.started" type="checkbox" id="ready">
|
|
<label v-if="self && !game.started" for="scales">Ready</label>
|
|
<div>
|
|
<GameBoard :game="game"></GameBoard>
|
|
</div>
|
|
</template>
|