npm run format, removed container that character was in

src/App.vue

@@ -2,7 +2,7 @@
   <Debug />
   <Notifications />
   <BackgroundImageLoader />
-  <GmPanel v-if="gameStore.character?.role === 'gm'" @open-map-editor="mapEditor.toggleActive"/>
+  <GmPanel v-if="gameStore.character?.role === 'gm'" @open-map-editor="mapEditor.toggleActive" />
   <component :is="currentScreen" />
 </template>
 
@@ -16,10 +16,10 @@ import MapEditor from '@/components/screens/MapEditor.vue'
 import BackgroundImageLoader from '@/components/utilities/BackgroundImageLoader.vue'
 import Debug from '@/components/utilities/Debug.vue'
 import Notifications from '@/components/utilities/Notifications.vue'
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { computed, ref, useTemplateRef, watch } from 'vue'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 
 const gameStore = useGameStore()
 const mapEditor = useMapEditorComposable()

src/components/game/character/Character.vue

@@ -1,9 +1,7 @@
 <template>
   <ChatBubble :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" />
   <Healthbar :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" />
-  <Container ref="charContainer" :depth="isometricDepth" :x="currentPositionX" :y="currentPositionY">
+  <Sprite ref="charSprite" :depth="isometricDepth" :x="currentPositionX" :y="currentPositionY" :origin-y="1" :flipX="isFlippedX" />
-    <Sprite ref="charSprite" :origin-y="1" :flipX="isFlippedX" />
-  </Container>
 </template>
 
 <script lang="ts" setup>
@@ -16,7 +14,7 @@ import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composabl
 import { CharacterTypeStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapStore } from '@/stores/mapStore'
-import { Container, refObj, Sprite, useScene } from 'phavuer'
+import { refObj, Sprite, useScene } from 'phavuer'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 enum Direction {
@@ -30,7 +28,6 @@ const props = defineProps<{
   mapCharacter: MapCharacter
 }>()
 
-const charContainer = refObj<Phaser.GameObjects.Container>()
 const charSprite = refObj<Phaser.GameObjects.Sprite>()
 const charSpriteId = ref('')
 
@@ -161,13 +158,13 @@ onMounted(async () => {
   charSprite.value!.setTexture(charTexture.value)
   charSprite.value!.setFlipX(isFlippedX.value)
 
-  charContainer.value!.setName(props.mapCharacter.character!.name)
+  charSprite.value!.setName(props.mapCharacter.character!.name)
 
   if (character.id === gameStore.character!.id) {
     mapStore.setCharacterLoaded(true)
 
     // #146 : Set camera position to character, need to be improved still
-    scene.cameras.main.startFollow(charContainer.value as Phaser.GameObjects.Container)
+    scene.cameras.main.startFollow(charSprite.value as Phaser.GameObjects.Sprite)
   }
 
   updatePosition(character.positionX, character.positionY, character.rotation)

src/components/game/map/MapTiles.vue

@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import config from '@/application/config'
-import type { UUID, Map as MapT} from '@/application/types'
+import type { Map as MapT, UUID } from '@/application/types'
 import { unduplicateArray } from '@/application/utilities'
 import Controls from '@/components/utilities/Controls.vue'
 import { loadMapTilesIntoScene, setLayerTiles } from '@/composables/mapComposable'

src/components/gameMaster/GmPanel.vue

@@ -20,8 +20,8 @@
 <script setup lang="ts">
 import AssetManager from '@/components/gameMaster/assetManager/AssetManager.vue'
 import Modal from '@/components/utilities/Modal.vue'
-import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
+import { useGameStore } from '@/stores/gameStore'
 import { ref } from 'vue'
 
 defineEmits(['open-map-editor'])

src/components/gameMaster/mapEditor/Map.vue

@@ -9,8 +9,8 @@ import MapEventTiles from '@/components/gameMaster/mapEditor/mapPartials/MapEven
 import MapTiles from '@/components/gameMaster/mapEditor/mapPartials/MapTiles.vue'
 import PlacedMapObjects from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { onMounted, onUnmounted, shallowRef, useTemplateRef } from 'vue'
 import { useScene } from 'phavuer'
+import { onMounted, onUnmounted, shallowRef, useTemplateRef } from 'vue'
 
 const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
 const mapEditor = useMapEditorComposable()
@@ -51,5 +51,4 @@ onUnmounted(() => {
   scene.input.off(Phaser.Input.Events.POINTER_DOWN, handlePointer)
   mapEditor.reset()
 })
-
 </script>

src/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue

@@ -1,19 +1,18 @@
 <template>
-    <Image v-for="tile in mapEditor.currentMap.value?.mapEventTiles" v-bind="getImageProps(tile)" />
+  <Image v-for="tile in mapEditor.currentMap.value?.mapEventTiles" v-bind="getImageProps(tile)" />
 </template>
 
 <script setup lang="ts">
-import { MapEventTileType, type MapEventTile } from '@/application/types'
+import { MapEventTileType, type MapEventTile, type Map as MapT } from '@/application/types'
 import { uuidv4 } from '@/application/utilities'
 import { getTile, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
-import { Image, useScene } from 'phavuer'
-import { type Map as MapT } from "@/application/types"
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { shallowRef} from 'vue'
+import { Image, useScene } from 'phavuer'
+import { shallowRef } from 'vue'
 
 const mapEditor = useMapEditorComposable()
 
-defineExpose({handlePointer})
+defineExpose({ handlePointer })
 
 const props = defineProps<{
   tileMap: Phaser.Tilemaps.Tilemap
@@ -90,8 +89,12 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
   if (pointer.event.shiftKey) return
 
   switch (mapEditor.tool.value) {
-    case 'pencil': pencil(pointer, map) ; break
+    case 'pencil':
-    case 'eraser': erase(pointer, map) ; break
+      pencil(pointer, map)
+      break
+    case 'eraser':
+      erase(pointer, map)
+      break
   }
 }
 </script>

src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue

@@ -22,7 +22,7 @@ const tileStorage = new TileStorage()
 const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
 const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
 
-defineExpose({handlePointer})
+defineExpose({ handlePointer })
 
 function createTileMap() {
   const mapData = new Phaser.Tilemaps.MapData({
@@ -144,7 +144,7 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
 
   // Check if alt is pressed
   if (pointer.event.altKey) {
-    tilePicker(pointer);
+    tilePicker(pointer)
     return
   }
 

src/components/gameMaster/mapEditor/partials/CreateMap.vue

@@ -37,9 +37,9 @@
 <script setup lang="ts">
 import type { Map } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { MapStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { ref, useTemplateRef } from 'vue'
 
 const emit = defineEmits(['create'])
@@ -53,7 +53,7 @@ const width = ref(0)
 const height = ref(0)
 const pvp = ref(false)
 
-defineExpose({ open: () => modalRef.value?.open()})
+defineExpose({ open: () => modalRef.value?.open() })
 
 async function submit() {
   gameStore.connection?.emit('gm:map:create', { name: name.value, width: width.value, height: height.value }, async (response: Map | false) => {

src/components/gameMaster/mapEditor/partials/MapObjectList.vue

@@ -44,8 +44,8 @@
 import config from '@/application/config'
 import type { MapObject } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
-import { MapObjectStorage } from '@/storage/storages'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
+import { MapObjectStorage } from '@/storage/storages'
 import { liveQuery } from 'dexie'
 import { computed, onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
 

src/components/gameMaster/mapEditor/partials/TeleportModal.vue

@@ -52,13 +52,15 @@ const mapList = ref<Map[]>([])
 const modalRef = useTemplateRef('modalRef')
 
 defineExpose({
-  open: () => modalRef.value?.open(),
+  open: () => modalRef.value?.open()
 })
 
 onMounted(fetchMaps)
 
 function fetchMaps() {
-  gameStore.connection?.emit('gm:map:list', {}, (response: Map[]) => { mapList.value = response })
+  gameStore.connection?.emit('gm:map:list', {}, (response: Map[]) => {
+    mapList.value = response
+  })
 }
 
 const { toPositionX, toPositionY, toRotation, toMap } = useRefTeleportSettings()

src/components/gameMaster/mapEditor/partials/TileList.vue

@@ -84,8 +84,8 @@
 import config from '@/application/config'
 import type { Tile } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
-import { TileStorage } from '@/storage/storages'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
+import { TileStorage } from '@/storage/storages'
 import { liveQuery } from 'dexie'
 import { computed, onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
 

src/components/gameMaster/mapEditor/partials/Toolbar.vue

@@ -16,19 +16,44 @@
               <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/mapEditor/chevron.svg" alt="" />
             </div>
             <div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray rounded min-w-28 border border-gray-500 border-solid text-left" v-show="selectPencilOpen && mapEditor.tool.value === 'pencil'">
-              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('tile'); setPencilMode">
+              <span
+                class="py-2 px-2.5 relative hover:bg-cyan hover:text-white"
+                @click="
+                  setDrawMode('tile')
+                  setPencilMode
+                "
+              >
                 Tile
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('map_object'); setPencilMode">
+              <span
+                class="py-2 px-2.5 relative hover:bg-cyan hover:text-white"
+                @click="
+                  setDrawMode('map_object')
+                  setPencilMode
+                "
+              >
                 Map object
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('teleport'); setPencilMode">
+              <span
+                class="py-2 px-2.5 relative hover:bg-cyan hover:text-white"
+                @click="
+                  setDrawMode('teleport')
+                  setPencilMode
+                "
+              >
                 Teleport
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('blocking tile'); setPencilMode">Blocking tile</span>
+              <span
+                class="py-2 px-2.5 relative hover:bg-cyan hover:text-white"
+                @click="
+                  setDrawMode('blocking tile')
+                  setPencilMode
+                "
+                >Blocking tile</span
+              >
             </div>
           </div>
         </button>
@@ -43,19 +68,44 @@
               <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/mapEditor/chevron.svg" />
             </div>
             <div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray rounded min-w-28 border border-gray-500 border-solid text-left" v-show="selectEraserOpen">
-              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('tile'); setEraserMode">
+              <span
+                class="py-2 px-2.5 relative hover:bg-cyan hover:text-white"
+                @click="
+                  setDrawMode('tile')
+                  setEraserMode
+                "
+              >
                 Tile
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('map_object'); setEraserMode">
+              <span
+                class="py-2 px-2.5 relative hover:bg-cyan hover:text-white"
+                @click="
+                  setDrawMode('map_object')
+                  setEraserMode
+                "
+              >
                 Map object
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('teleport'); setEraserMode">
+              <span
+                class="py-2 px-2.5 relative hover:bg-cyan hover:text-white"
+                @click="
+                  setDrawMode('teleport')
+                  setEraserMode
+                "
+              >
                 Teleport
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('blocking tile'); setEraserMode">Blocking tile</span>
+              <span
+                class="py-2 px-2.5 relative hover:bg-cyan hover:text-white"
+                @click="
+                  setDrawMode('blocking tile')
+                  setEraserMode
+                "
+                >Blocking tile</span
+              >
             </div>
           </div>
         </button>
@@ -73,7 +123,7 @@
         <div class="w-px bg-cyan"></div>
 
         <label class="my-auto gap-0" for="checkbox">Continuous Drawing</label>
-        <input type="checkbox">
+        <input type="checkbox" />
       </div>
 
       <div class="toolbar fixed bottom-0 right-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10 space-x-2">
@@ -89,8 +139,8 @@
 <script setup lang="ts">
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { onClickOutside } from '@vueuse/core'
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useScene } from 'phavuer'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 
 const mapEditor = useMapEditorComposable()
 
@@ -106,11 +156,10 @@ let selectEraserOpen = ref(false)
 let tileListShown = ref(false)
 let mapObjectListShown = ref(false)
 
-defineExpose({tileListShown, mapObjectListShown})
+defineExpose({ tileListShown, mapObjectListShown })
 
 // drawMode
 function setDrawMode(value: string) {
-
   if (mapEditor.tool.value === 'paint' || mapEditor.tool.value === 'pencil') {
     emit('close-lists')
     if (value === 'tile') emit('open-tile-list')

src/components/screens/MapEditor.vue

@@ -5,13 +5,21 @@
         <div v-if="!isLoaded" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-3xl font-ui">Loading...</div>
         <div v-else>
           <Map :key="mapEditor.currentMap.value?.id" />
-          <Toolbar ref="toolbar" @save="save" @clear="clear" @open-maps="mapModal?.open" @open-settings="mapSettingsModal?.open"
+          <Toolbar
-                   @close-editor="mapEditor.toggleActive" @close-lists="tileModal?.close" @closeLists="objectModal?.close"
+            ref="toolbar"
-                   @open-tile-list="tileModal?.open"
+            @save="save"
-                   @open-map-object-list="objectModal?.open"/>
+            @clear="clear"
-          <MapList ref="mapModal" @open-create-map="mapSettingsModal?.open"/>
+            @open-maps="mapModal?.open"
-          <TileList ref="tileModal"/>
+            @open-settings="mapSettingsModal?.open"
-          <ObjectList ref="objectModal"/>
+            @close-editor="mapEditor.toggleActive"
+            @close-lists="tileModal?.close"
+            @closeLists="objectModal?.close"
+            @open-tile-list="tileModal?.open"
+            @open-map-object-list="objectModal?.open"
+          />
+          <MapList ref="mapModal" @open-create-map="mapSettingsModal?.open" />
+          <TileList ref="tileModal" />
+          <ObjectList ref="objectModal" />
           <MapSettings ref="mapSettingsModal" />
           <TeleportModal ref="teleportModal" />
         </div>
@@ -42,12 +50,12 @@ const mapStorage = new MapStorage()
 const mapEditor = useMapEditorComposable()
 const gameStore = useGameStore()
 
-const toolbar = useTemplateRef("toolbar")
+const toolbar = useTemplateRef('toolbar')
-const mapModal = useTemplateRef("mapModal")
+const mapModal = useTemplateRef('mapModal')
-const tileModal = useTemplateRef("tileModal")
+const tileModal = useTemplateRef('tileModal')
-const objectModal = useTemplateRef("objectModal")
+const objectModal = useTemplateRef('objectModal')
-const mapSettingsModal = useTemplateRef("mapSettingsModal")
+const mapSettingsModal = useTemplateRef('mapSettingsModal')
-const teleportModal = useTemplateRef("teleportModal")
+const teleportModal = useTemplateRef('teleportModal')
 
 const isLoaded = ref(false)
 

src/components/utilities/Modal.vue

@@ -17,7 +17,7 @@
           <button v-if="canFullScreen" @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out">
             <img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" :src="isFullScreen ? '/assets/icons/modal/minimize.svg' : '/assets/icons/modal/increase-size-option.svg'" class="w-3.5 h-3.5 invert" draggable="false" />
           </button>
-          <button v-if="closable" @click="isModalOpenRef=false" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
+          <button v-if="closable" @click="isModalOpenRef = false" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
             <img alt="close" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" draggable="false" />
           </button>
         </div>
@@ -84,12 +84,11 @@ const emit = defineEmits<{
   'character:create': []
 }>()
 
-defineExpose(
+defineExpose({
-  {
+  open: () => (isModalOpenRef.value = true),
-    open: () => isModalOpenRef.value = true,
+  close: () => (isModalOpenRef.value = false),
-    close: () => isModalOpenRef.value = false,
+  toggle: () => (isModalOpenRef.value = !isModalOpenRef.value)
-    toggle: () => isModalOpenRef.value = !isModalOpenRef.value,
+})
-  })
 
 const isModalOpenRef = ref(props.isModalOpen)
 const width = ref(props.modalWidth)

src/composables/mapComposable.ts

@@ -1,5 +1,5 @@
 import config from '@/application/config'
-import type { HttpResponse, TextureData, UUID } from '@/application/types'
+import type { HttpResponse, TextureData, Tile as TileT, UUID } from '@/application/types'
 import { unduplicateArray } from '@/application/utilities'
 import { loadTexture } from '@/composables/gameComposable'
 import { MapStorage, TileStorage } from '@/storage/storages'
@@ -9,8 +9,6 @@ import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 import Tileset = Phaser.Tilemaps.Tileset
 import Tile = Phaser.Tilemaps.Tile
 
-import type { Tile as TileT } from '@/application/types'
-
 export function getTile(layer: TilemapLayer | Tilemap, positionX: number, positionY: number): Tile | null {
   return layer.getTileAtWorldXY(positionX, positionY)
 }

src/composables/pointerHandlers/useMapEditorPointerHandlers.ts

@@ -1,7 +1,7 @@
 import config from '@/application/config'
 import { getTile, tileToWorldXY } from '@/composables/mapComposable'
-import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
+import { useGameStore } from '@/stores/gameStore'
 import { computed, ref, type Ref } from 'vue'
 
 export function useMapEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {

src/composables/usePointerHandlers.ts

@@ -1,7 +1,7 @@
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { computed, watch, type Ref } from 'vue'
 import { useGamePointerHandlers } from './pointerHandlers/useGamePointerHandlers'
 import { useMapEditorPointerHandlers } from './pointerHandlers/useMapEditorPointerHandlers'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 
 export function usePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
   const mapEditor = useMapEditorComposable()

src/stores/mapEditorStore.ts

@@ -1,6 +1,5 @@
-import type { MapObject } from '@/application/types'
+import type { MapObject, Map as MapT } from '@/application/types'
 import { defineStore } from 'pinia'
-import type { Map as MapT } from '@/application/types'
 
 export type TeleportSettings = {
   toMapId: string