npm update & npm run format

src/screens/Characters.vue

@@ -3,17 +3,13 @@
     <div class="absolute bg-[url('/assets/shapes/select-screen-bg-shape.svg')] bg-no-repeat bg-center w-full h-full"></div>
     <div class="ui-wrapper h-dvh flex flex-col justify-center items-center gap-20 px-10 sm:px-20">
       <div class="filler"></div>
-      <ConfirmationModal
-        v-if="deletingCharacter != null"
-        :confirm-function="delete_character.bind(this, deletingCharacter.id)"
-        :cancel-function="(() => deletingCharacter = null).bind(this)"
-        confirm-button-text="Delete"
-      >
+      <ConfirmationModal v-if="deletingCharacter != null" :confirm-function="delete_character.bind(this, deletingCharacter.id)" :cancel-function="(() => (deletingCharacter = null)).bind(this)" confirm-button-text="Delete">
         <template #modalHeader>
           <h3 class="m-0 font-medium">Deleting character</h3>
         </template>
         <template #modalBody>
-          You are about to delete <span class="font-extrabold">{{deletingCharacter.name}}</span>, are you sure about that?
+          You are about to delete <span class="font-extrabold">{{ deletingCharacter.name }}</span
+          >, are you sure about that?
         </template>
       </ConfirmationModal>
       <div class="flex gap-14 w-full max-h-[650px] overflow-x-auto" v-if="!isLoading">
@@ -26,7 +22,14 @@
           <input class="opacity-0 h-full w-full absolute m-0 z-10" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
           <label class="font-bold absolute left-1/2 top-5 max-w-32 -translate-x-1/2 -translate-y-1/2 text-center text-ellipsis overflow-hidden whitespace-nowrap drop-shadow-text" :for="character.id">{{ character.name }}</label>
 
-          <button class="delete bg-red w-8 h-8 p-[3px] rounded-full absolute -right-4 top-0 -translate-y-1/2 z-10 border-2 border-solid border-white hover:bg-red-100" @click="() => { deletingCharacter = character }">
+          <button
+            class="delete bg-red w-8 h-8 p-[3px] rounded-full absolute -right-4 top-0 -translate-y-1/2 z-10 border-2 border-solid border-white hover:bg-red-100"
+            @click="
+              () => {
+                deletingCharacter = character
+              }
+            "
+          >
             <img draggable="false" src="/assets/icons/trashcan.svg" />
           </button>
 
@@ -50,7 +53,10 @@
       </div>
 
       <div class="button-wrapper flex gap-8" v-if="!isLoading">
-        <button class="btn-bordeaux py-2 pr-2.5 pl-8 min-w-24 relative rounded text-xl flex gap-4 items-center transition-all ease-in-out duration-200 hover:gap-5 disabled:bg-cyan/50 disabled:hover:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]" @click="gameStore.disconnectSocket()">
+        <button
+          class="btn-bordeaux py-2 pr-2.5 pl-8 min-w-24 relative rounded text-xl flex gap-4 items-center transition-all ease-in-out duration-200 hover:gap-5 disabled:bg-cyan/50 disabled:hover:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]"
+          @click="gameStore.disconnectSocket()"
+        >
           <img class="h-8 drop-shadow-20 rotate-180" draggable="false" src="/assets/icons/arrow.svg" />
         </button>
         <button
@@ -97,7 +103,7 @@ import ConfirmationModal from '@/components/utilities/ConfirmationModal.vue'
 const isLoading = ref(true)
 const characters = ref([])
 const gameStore = useGameStore()
-const deletingCharacter = ref(null);
+const deletingCharacter = ref(null)
 
 // Fetch characters
 gameStore.connection?.on('character:list', (data: any) => {
@@ -116,7 +122,7 @@ onMounted(() => {
 const selected_character = ref(null)
 function select_character() {
   if (!selected_character.value) return
-  deletingCharacter.value = null;
+  deletingCharacter.value = null
   console.log('selected_character', selected_character.value)
   gameStore.connection?.emit('character:connect', { character_id: selected_character.value })
   gameStore.connection?.on('character:connect', (data: CharacterT) => gameStore.setCharacter(data))
@@ -125,7 +131,7 @@ function select_character() {
 // Delete character logics
 function delete_character(character_id: number) {
   if (!character_id) return
-  deletingCharacter.value = null;
+  deletingCharacter.value = null
   gameStore.connection?.emit('character:delete', { character_id: character_id })
 }
 

src/screens/Login.vue

@@ -47,9 +47,9 @@ onMounted(async () => {
    * Fetch assets from the server
    */
 
-  const token = useCookies().get('token');
-  if(token) {
-    gameStore.setToken(token);
+  const token = useCookies().get('token')
+  if (token) {
+    gameStore.setToken(token)
     gameStore.initConnection()
   }