worked on modal

src/components/screens/Characters.vue

@@ -1,23 +1,22 @@
 <template>
 <div>
-  <div id="characters-wrapper">
-   <div id="characters">
-     <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" v-model="selected_character" />
-          <label :for="character.id">
-            {{ character.name }}
-            <img src="/assets/avatar/default/base_right_down.png" />
-          </label>
-       </div>
-     </div>
+  <div class="characters-wrapper">
+    <div class="list">
+      <div v-for="character in characters" :key="character.id" class="character">
+        <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" />
+        </label>
+      </div>
+    </div>
 
-     <button @click="select_character()">Play</button>
+    <div class="buttons-wrapper">
+      <button @click="select_character()">Play</button>
+      <button @click="openCreator">Create New</button>
       
-     <hr>
-     <Create />
-   </div>
+    </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 {
-  background: #FFFFFF;
-  padding:30px;
-  color:black;
-}
-
-#list {
+.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">
-  <h1>Create your character</h1>
-  <div>
-    <label for="name">Name</label>
-    <input v-model="name" type="text" name="name" id="name">
+  <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 @click.stop="create">Create</button>
+      </div>
+    </form>
+    <button @click.stop="emit('modal-close')">Cancel</button>
   </div>
-  <div>
-    <button>Create</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>