Worked on zone manager

src/components/screens/Characters.vue

@@ -7,9 +7,9 @@
           <label :for="character.id">{{ character.name }}</label>
           <!-- @TODO : Add a confirmation dialog -->
           <button class="delete" @click="delete_character(character.id)">
-            <img draggable="false" src="/assets/icons/trashcan.svg">
+            <img draggable="false" src="/assets/icons/trashcan.svg" />
           </button>
-  
+
           <div class="sprite-container">
             <img draggable="false" src="/assets/avatar/default/0.png" />
           </div>
@@ -32,7 +32,7 @@
       <div class="button-wrapper" v-if="!isLoading">
         <button class="btn-cyan" :disabled="!selected_character" @click="select_character()">
           PLAY
-          <img draggable="false" src="/assets/icons/arrow.svg">
+          <img draggable="false" src="/assets/icons/arrow.svg" />
         </button>
       </div>
     </div>
@@ -60,51 +60,57 @@
 
 <script setup lang="ts">
 import { useSocketStore } from '@/stores/socket'
-import { onBeforeMount, onMounted, ref } from 'vue'
+import { onBeforeMount, onBeforeUnmount, onMounted, ref } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
-import {type Character as CharacterT} from '@/types'
+import { type Character as CharacterT } from '@/types'
 
 const isLoading = ref(true)
 const characters = ref([])
-const socket = useSocketStore();
+const socket = useSocketStore()
 
 // Fetch characters
-socket.getConnection.on('character:list', (data: any) => {
+socket.connection.on('character:list', (data: any) => {
   characters.value = data
 })
 
 onMounted(() => {
   // wait 1.5 sec
   setTimeout(() => {
-    socket.getConnection.emit('character:list')
+    socket.connection.emit('character:list')
     isLoading.value = false
   }, 1000)
-});
+})
 
 // Select character logics
 const selected_character = ref(null)
 function select_character() {
   if (!selected_character.value) return
-  socket.getConnection.emit('character:connect', { character_id: selected_character.value })
-  socket.getConnection.on('character:connect', (data: CharacterT) => socket.setCharacter(data))
+  socket.connection.emit('character:connect', { character_id: selected_character.value })
+  socket.connection.on('character:connect', (data: CharacterT) => socket.setCharacter(data))
 }
 
 // Delete character logics
 function delete_character(character_id: number) {
   if (!character_id) return
-  socket.getConnection.emit('character:delete', { character_id: character_id })
+  socket.connection.emit('character:delete', { character_id: character_id })
 }
 
 // Create character logics
 const isModalOpen = ref(false)
 const name = ref('')
 function create() {
-  socket.getConnection.on('character:create:success', (data: CharacterT) => {
+  socket.connection.on('character:create:success', (data: CharacterT) => {
     socket.setCharacter(data)
     isModalOpen.value = false
   })
-  socket.getConnection.emit('character:create', { name: name.value })
+  socket.connection.emit('character:create', { name: name.value })
 }
+
+onBeforeUnmount(() => {
+  socket.connection.off('character:list')
+  socket.connection.off('character:connect')
+  socket.connection.off('character:create:success')
+})
 </script>
 
 <style lang="scss">