show basic game information

app.vue

@@ -1,5 +1,62 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+const cards = reactive<{ [key: string]: any }>({})
+let game = ref<any>({})
+const socket = new WebSocket("ws://127.0.0.1:8765")
+
+const createObject = {
+  "card": (data: any) => {
+    cards[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>
-    <NuxtWelcome />
+    <GameBoard :game="game"></GameBoard>
   </div>
 </template>