worked on modal

src/components/screens/Characters.vue

@@ -1,10 +1,8 @@
 <template>
 <div>
-  <div id="characters-wrapper">
+  <div class="characters-wrapper">
-   <div id="characters">
+    <div class="list">
-     <h1>Select your character</h1>
+      <div v-for="character in characters" :key="character.id" class="character">
-     <div id="list">
-       <div v-for="character in characters" :key="character.id">
         <input type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
         <label :for="character.id">
           {{ character.name }}
@@ -13,11 +11,12 @@
       </div>
     </div>
 
+    <div class="buttons-wrapper">
       <button @click="select_character()">Play</button>
+      <button @click="openCreator">Create New</button>
       
-     <hr>
-     <Create />
     </div> 
+    <Create :isOpen="isCharacterCreatorOpened" @modal-close="closeCreator" @submit="submitHandler" name="character-create" />
   </div>
 
 
@@ -49,10 +48,24 @@ function select_character() {
     });
   }
 }
+
+const isCharacterCreatorOpened = ref(false);
+
+const openCreator = () => {
+  isCharacterCreatorOpened.value = true;
+};
+const closeCreator = () => {
+  isCharacterCreatorOpened.value = false;
+};
+
+const submitHandler = ()=>{
+  //here you do whatever
+}
+
 </script>
 
 <style lang="scss">
-#characters-wrapper {
+.characters-wrapper {
   // vertical and vertical center
   height: 100vh;
   display: flex;
@@ -61,13 +74,7 @@ function select_character() {
   align-items: center;
 }
 
-#characters {
+.list {
-  background: #FFFFFF;
-  padding:30px;
-  color:black;
-}
-
-#list {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;

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

@@ -1,19 +1,32 @@
 <template>
-<form method="post" @submit.prevent="create">
+  <div class="create-container" v-if="isOpen">
+    <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>
+        <button @click.stop="create">Create</button>
+      </div>
+    </form>
+    <button @click.stop="emit('modal-close')">Cancel</button>
   </div>
-</form>
 </template>
 
 <script setup lang="ts">
 import { useSocketStore } from '@/stores/socket'
-import { ref, defineEmits } from 'vue'
+import { ref, defineEmits, defineProps } from 'vue'
+import {onClickOutside} from '@vueuse/core'
+
+const props = defineProps({
+  isOpen: Boolean
+});
+
+const emit = defineEmits(["modal-close"]);
+
+const target = ref(null)
+onClickOutside(target, () => emit('modal-close'));
 
 const socket = useSocketStore();
 
@@ -24,5 +37,6 @@ function create() {
   socket.getConnection.emit('character:create', { name: name.value });
   // emit('character:create');
   name.value = '';
+  props.isOpen = false;
 }
 </script>