character selection work

src/components/screens/Characters.vue

@@ -1,7 +1,7 @@
 <template>
-<div>
-  <div class="characters-wrapper">
-    <div class="list">
+<div class="character-select-screen">
+  <div class="ui-wrapper">
+    <div class="characters-wrapper">
       <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">
@@ -13,94 +13,136 @@
 
     <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" />
+      <button @click="isModalOpen = true">Create New</button>
+    </div>
   </div>
-
-
 </div>
+
+<Modal :isModalOpen="isModalOpen">
+  <form method="post" @submit.prevent="create">
+    <h1>Create your character</h1>
+    <div>
+      <label for="name">Name</label>
+      <input v-model="name" name="name" id="name">
+    </div>
+    <div>
+      <button @click="create">Create</button>
+    </div>
+  </form>
+  <button @click="isModalOpen = false">Cancel</button>
+</Modal>
 </template>
 
 <script setup lang="ts">
 import { useSocketStore } from '@/stores/socket'
 import { ref } from 'vue'
-import Create from '@/components/screens/partials/characters/Create.vue'
 import type { Character } from '../../../env'
+import Modal from '@/components/utilities/Modal.vue'
 
 const socket = useSocketStore();
-const characters = ref([]);
-socket.getConnection.emit('character:list');
 
+// Fetch characters
+socket.getConnection.emit('character:list');
 socket.getConnection.on('character:list', (data: any) => {
   console.log(data);
   characters.value = data;
 });
 
+// Select character logics
+const characters = ref([]);
 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);
-    });
+    socket.getConnection.on('character:connect', (data: Character) => socket.setCharacter(data));
   }
 }
 
-const isCharacterCreatorOpened = ref(false);
-
-const openCreator = () => {
-  isCharacterCreatorOpened.value = true;
-};
-const closeCreator = () => {
-  isCharacterCreatorOpened.value = false;
-};
-
-const submitHandler = ()=>{
-  //here you do whatever
+// Create character logics
+const isModalOpen = ref(false);
+let name: any = ref('');
+function create() {
+  socket.getConnection.emit('character:create', { name: name.value });
+  name.value = '';
+  isModalOpen.value = false;
 }
-
 </script>
 
 <style lang="scss">
-.characters-wrapper {
-  // vertical and vertical center
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
+@import '@/assets/scss/main';
 
-.list {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-
-  // make all the divs same width
-  div {
-    width: 100px;
-  }
-
-  // hide the radio buttons
-  input[type="radio"] {
-    display: none;
-  }
-
-  // img under the label
-  label {
+.character-select-screen {
+  background-image: url("/assets/bglogin.png");
+  .ui-wrapper {
+    // vertical and vertical center
+    height: 100vh;
     display: flex;
     flex-direction: column;
+    justify-content: center;
     align-items: center;
-    margin: 10px;
-  }
+    gap: 6.25rem;
+    padding: 0 5rem;
+    &::before {
+      content: '';
 
-  // for selected radio, give bg color
-  input[type="radio"]:checked + label {
-    background: #ff0000;
-    padding: 5px;
+    }
+
+    .characters-wrapper {
+      display: flex;
+      justify-content: center;
+      gap: 5rem;
+      width: 100%;
+
+      .character {
+        min-width: 150px;
+        min-height: 250px;
+        display: flex;
+        flex-direction: column;
+        background-color: rgba($white, 0.8);
+        border-radius: 20px;
+        position: relative;
+        &::before {
+          content: '';
+          position: absolute;
+          width: 100%;
+          height: 40px;
+          background-color: rgba($purple, 0.6);
+          border-top-left-radius: 20px;
+          border-top-right-radius: 20px;
+        }
+
+        // hide the radio buttons
+        input[type="radio"] {
+          display: none;
+        }
+
+        // img under the label
+        label {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          margin: auto;
+        }
+
+        // for selected radio, give bg color
+        input[type="radio"]:checked + label {
+          background: rgba($purple, 0.6);
+          padding: 5px;
+        }
+      }
+    }
+
+    .buttons-wrapper {
+      display: flex;
+      gap: 30px;
+      button {
+        padding: 5px 12px;
+      }
+    }
   }
 }
+
+
+
 </style>