npm update, removed player store and merged it with socket store, worked on character creation & selection (partially works)

src/components/screens/Characters.vue

@@ -5,7 +5,7 @@
      <h1>Select your character</h1>
      <div id="list">
        <div v-for="character in characters" :key="character.id">
-          <input type="radio" :id="character.id" name="character" :value="character.id">
+          <input type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
           <label :for="character.id">
             {{ character.name }}
             <img src="/assets/avatar/default/base_right_down.png" />
@@ -13,7 +13,7 @@
        </div>
      </div>
 
-     <button>Play</button>
+     <button @click="select_character()">Play</button>
 
      <hr>
      <Create />
@@ -28,6 +28,7 @@
 import { useSocketStore } from '@/stores/socket'
 import { ref } from 'vue'
 import Create from '@/components/screens/partials/characters/Create.vue'
+import type { Character } from '../../../env'
 
 const socket = useSocketStore();
 const characters = ref([]);
@@ -37,6 +38,17 @@ socket.getConnection.on('character:list', (data: any) => {
   console.log(data);
   characters.value = data;
 });
+
+const selected_character = ref(null);
+function select_character() {
+  console.log(selected_character.value);
+  if (selected_character.value) {
+    socket.getConnection.emit('character:connect', {character_id: selected_character.value});
+    socket.getConnection.on('character:connect', (data: Character) => {
+      socket.setCharacter(data);
+    });
+  }
+}
 </script>
 
 <style lang="scss">