Worked on creating new characters

src/components/screens/Characters.vue

@@ -1,32 +1,42 @@
 <template>
 <div>
-  <!-- radio controls with characters that belongs to user in plain html -->
   <div id="characters-wrapper">
    <div id="characters">
      <h1>Select your character</h1>
      <div>
-       <input type="radio" id="character1" name="character" value="character1">
-       <label for="character1">
-         Weed
-       </label>
-       <input type="radio" id="character2" name="character" value="character2">
-       <label for="character2">
-         Ethereal
-       </label>
+       <div v-for="character in characters" :key="character.id">
+          <input type="radio" :id="character.id" name="character" :value="character.id">
+          <label :for="character.id">
+            <img src="/assets/avatar/default/base_right_down.png" />
+            {{ character.name }}
+          </label>
+       </div>
      </div>
 
      <button>Play</button>
+
+     <hr>
+     <Create />
    </div>
   </div>
 
+
 </div>
 </template>
 
 <script setup lang="ts">
 import { useSocketStore } from '@/stores/socket'
+import { ref } from 'vue'
+import Create from '@/components/screens/partials/characters/Create.vue'
 
 const socket = useSocketStore();
-socket.connection.emit('characters:get');
+const characters = ref([]);
+socket.getConnection.emit('character:list');
+
+socket.getConnection.on('character:list', (data: any) => {
+  console.log(data);
+  characters.value = data;
+});
 </script>
 
 <style lang="scss">

src/components/screens/Login.vue

@@ -28,7 +28,7 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 import { useSocketStore } from '@/stores/socket.ts'
-import {login, register} from '@/services/authService'
+import {login, register} from '@/services/authentication.ts'
 import { useCookies } from '@vueuse/integrations/useCookies'
 
 const bgm = ref('bgm');

src/components/screens/partials/characters/Create.vue

@@ -0,0 +1,28 @@
+<template>
+<form method="post" @submit.prevent="create">
+  <h1>Create your character</h1>
+  <div>
+    <label for="name">Name</label>
+    <input v-model="name" type="text" name="name" id="name">
+  </div>
+  <div>
+    <button>Create</button>
+  </div>
+</form>
+</template>
+
+<script setup lang="ts">
+import { useSocketStore } from '@/stores/socket'
+import { ref, defineEmits } from 'vue'
+
+const socket = useSocketStore();
+
+// const emit = defineEmits(['character:create']);
+let name: any = ref('');
+
+function create() {
+  socket.getConnection.emit('character:create', { name: name.value });
+  // emit('character:create');
+  name.value = '';
+}
+</script>