npm update, start updating components, removed obselete fields

src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue

@@ -6,16 +6,6 @@
           <label class="mb-1.5 font-titles" for="name">Name</label>
           <input v-model="spriteName" class="input-field" type="text" name="name" placeholder="New sprite" />
         </div>
-
-        <div class="form-field-half">
-          <label class="mb-1.5 font-titles" for="name">Width override</label>
-          <input v-model="spriteWidth" class="input-field" type="number" name="width" />
-        </div>
-        <div class="form-field-half">
-          <label class="mb-1.5 font-titles" for="name">Height override</label>
-          <input v-model="spriteHeight" class="input-field" type="number" name="height" />
-        </div>
-
         <div class="w-full flex gap-2 mt-2 pb-4 relative">
           <button class="btn-cyan px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="saveSprite">Save</button>
           <button class="btn-red px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="deleteSprite">Delete</button>
@@ -32,12 +22,13 @@
           <div class="flex items-center">
             {{ action.action }}
             <div class="ml-auto space-x-2">
-              <button class="btn-cyan px-4 py-1.5 min-w-24" type="button" @click.stop.prevent="openPreviewModal(action)">View</button>
+              <button class="btn-cyan px-4 py-1.5 min-w-24" type="button" @click.stop.prevent="openEditorModal(action)">Editor</button>
               <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.stop.prevent="() => spriteActions.splice(spriteActions.indexOf(action), 1)">Delete</button>
             </div>
           </div>
         </template>
         <template #content>
+<!--          IMAGES COME HERE, REMOVE FIELDS -->
           <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveSprite">
             <div class="form-field-full">
               <label for="action">Action</label>
@@ -61,7 +52,7 @@
           </form>
         </template>
       </Accordion>
-      <SpritePreview
+      <SpriteEditor
         v-if="selectedAction"
         :sprites="selectedAction.sprites"
         :frame-rate="selectedAction.frameRate"
@@ -80,7 +71,7 @@ import { SocketEvent } from '@/application/enums'
 import type { Sprite, SpriteAction } from '@/application/types'
 import { downloadCache, uuidv4 } from '@/application/utilities'
 import SpriteActionsInput from '@/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue'
-import SpritePreview from '@/components/gameMaster/assetManager/partials/sprite/partials/SpritePreview.vue'
+import SpriteEditor from '@/components/gameMaster/assetManager/partials/sprite/partials/SpriteEditor.vue'
 import Accordion from '@/components/utilities/Accordion.vue'
 import { socketManager } from '@/managers/SocketManager'
 import { SpriteStorage } from '@/storage/storages'
@@ -92,8 +83,6 @@ const assetManagerStore = useAssetManagerStore()
 const selectedSprite = computed(() => assetManagerStore.selectedSprite)
 
 const spriteName = ref('')
-const spriteWidth = ref(0)
-const spriteHeight = ref(0)
 const spriteActions = ref<SpriteAction[]>([])
 const isModalOpen = ref(false)
 const selectedAction = ref<SpriteAction | null>(null)
@@ -104,8 +93,6 @@ if (!selectedSprite.value) {
 
 if (selectedSprite.value) {
   spriteName.value = selectedSprite.value.name
-  spriteWidth.value = selectedSprite.value.width
-  spriteHeight.value = selectedSprite.value.height
   spriteActions.value = sortSpriteActions(selectedSprite.value.spriteActions)
 }
 
@@ -152,8 +139,6 @@ async function saveSprite() {
   const updatedSprite = {
     id: selectedSprite.value.id,
     name: spriteName.value,
-    width: spriteWidth.value,
-    height: spriteHeight.value,
     spriteActions:
       spriteActions.value?.map((action) => {
         return {
@@ -206,7 +191,7 @@ function sortSpriteActions(actions: SpriteAction[]): SpriteAction[] {
   return [...actions].sort((a, b) => a.action.localeCompare(b.action))
 }
 
-function openPreviewModal(action: SpriteAction) {
+function openEditorModal(action: SpriteAction) {
   selectedAction.value = action
   isModalOpen.value = true
 }
@@ -231,8 +216,6 @@ function handleTempOffsetChange(action: SpriteAction, index: number, offset: { x
 watch(selectedSprite, (sprite: Sprite | null) => {
   if (!sprite) return
   spriteName.value = sprite.name
-  spriteWidth.value = sprite.width
-  spriteHeight.value = sprite.height
   spriteActions.value = sortSpriteActions(sprite.spriteActions)
 })
 

src/components/gameMaster/assetManager/partials/sprite/partials/SpriteEditor.vue

@@ -1,7 +1,7 @@
 <template>
-  <Modal :is-modal-open="isModalOpen" :modal-width="700" :modal-height="330" bg-style="none" @modal:close="closeModal">
+  <Modal :is-modal-open="isModalOpen" :modal-width="700" :modal-height="330" :can-full-screen="true" bg-style="none" @modal:close="closeModal">
     <template #modalHeader>
-      <h3 class="m-0 font-medium shrink-0 text-white">View sprite</h3>
+      <h3 class="m-0 font-medium shrink-0 text-white">Sprite editor</h3>
     </template>
     <template #modalBody>
       <div class="m-4 flex gap-8">