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>
-
-     <hr>
-     <Create />
-   </div>
+    <div class="buttons-wrapper">
+      <button @click="select_character()">Play</button>
+      <button @click="openCreator">Create New</button>
+      
+    </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;