Some game actions work

app.vue

@@ -2,11 +2,16 @@
 import { ref } from 'vue';
 const cards = useState<{ [key: string]: any }>('cards', () => ({}))
 const players = useState<{ [key: string]: any }>('players', () => ({}))
+const teams = useState<{ [key: string]: any }>('teams', () => ({}))
 const self = useState<string>('self')
-let gameObjects = useState<{ [key: string]: any }>('gameObject', () => ({}))
+const gameObjects = useState<{ [key: string]: any }>('gameObject', () => ({}))
+
+const socket = useState<WebSocket>('socket', () => new WebSocket("ws://127.0.0.1:8765"))
+
 let game = ref<any>({ started: true })
 let context = ref<string>('login')
-const socket = new WebSocket("ws://127.0.0.1:8765")
+let username = ref<string>('legonzaur')
+
 
 const createObject = {
   "card": (data: any) => {
@@ -21,14 +26,17 @@ const createObject = {
     game.value = data
     gameObjects.value[data.uuid] = data
   },
-  "team": () => { }
+  "team": (data: any) => {
+    teams.value[data.uuid] = data
+    gameObjects.value[data.uuid] = data
+  }
 } as { [id: string]: (data: Object) => any }
 
-socket.onopen = function (e) {
+socket.value.onopen = function (e) {
   console.log("[open] Connection established");
 };
 
-socket.onclose = function (event) {
+socket.value.onclose = function (event) {
   if (event.wasClean) {
     console.warn(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
   } else {
@@ -38,11 +46,11 @@ socket.onclose = function (event) {
   }
 };
 
-socket.onerror = function (error) {
+socket.value.onerror = function (error) {
   console.error(error);
 };
 
-socket.onmessage = function (event) {
+socket.value.onmessage = function (event) {
   const data = JSON.parse(event.data)
 
 
@@ -73,7 +81,7 @@ socket.onmessage = function (event) {
 
 
 async function register(username: string) {
-  socket.send(JSON.stringify({
+  socket.value.send(JSON.stringify({
     type: "register",
     data_type: "username",
     data: username
@@ -81,7 +89,7 @@ async function register(username: string) {
 }
 
 async function setReady(value: Event) {
-  socket.send(JSON.stringify({
+  socket.value.send(JSON.stringify({
     type: "ready",
     data_type: "ready_state",
     data: ((value.target as HTMLInputElement).checked)
@@ -90,7 +98,8 @@ async function setReady(value: Event) {
 </script>
 
 <template>
-  <button v-if="!self && !game.started" @click="register('legonzaur')">LOGIN</button>
+  <input v-if="!self && !game.started" type="text" v-model="username">
+  <button v-if="!self && !game.started" @click="register(username)">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>