WIP character select

# Conflicts:
#	src/components/screens/Characters.vue

.env.example

@@ -1,4 +1,4 @@
-VITE_NAME=New Quest
+VITE_NAME=Sylvan Quest
 VITE_DEVELOPMENT=true
 VITE_SERVER_ENDPOINT=http://localhost:4000
 VITE_TILE_SIZE_X=64

package.json

@@ -50,6 +50,7 @@
     "tailwindcss": "^3.4.13",
     "typescript": "~5.6.2",
     "vite": "^5.4.9",
+    "vite-plugin-compression": "^0.5.1",
     "vite-plugin-vue-devtools": "^7.5.2",
     "vitest": "^2.0.3",
     "vue-tsc": "^1.6.5"

public/assets/icons/male-icon.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_598_541)">
+<path d="M10.0327 5.69111L12.3905 3.33333H9.33333V2H14.6667V7.33333H13.3333V4.27614L10.9755 6.63392C11.6183 7.47513 12 8.52633 12 9.66667C12 12.4281 9.7614 14.6667 7 14.6667C4.23857 14.6667 2 12.4281 2 9.66667C2 6.90527 4.23857 4.66667 7 4.66667C8.14033 4.66667 9.19153 5.04843 10.0327 5.69111ZM7 13.3333C9.02507 13.3333 10.6667 11.6917 10.6667 9.66667C10.6667 7.6416 9.02507 6 7 6C4.97495 6 3.33333 7.6416 3.33333 9.66667C3.33333 11.6917 4.97495 13.3333 7 13.3333Z" fill="#999999"/>
+</g>
+<defs>
+<clipPath id="clip0_598_541">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/assets/ui-elements/ui-border-2-corners-bottom.svg

@@ -0,0 +1,18 @@
+<svg width="190" height="202" viewBox="0 0 190 202" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_i_598_514)">
+<path d="M0 3.60002C0 1.61179 1.61177 0 3.6 0H186.4C188.388 0 190 1.61177 190 3.6V193.658C190 195.646 188.388 197.258 186.4 197.258H184.894C183.584 197.258 182.523 198.32 182.523 199.629C182.523 200.938 181.461 202 180.152 202H9.84847C8.53901 202 7.47748 200.938 7.47748 199.629C7.47748 198.32 6.41596 197.258 5.1065 197.258H3.6C1.61178 197.258 0 195.646 0 193.658V3.60002Z" fill="#181818"/>
+</g>
+<path d="M0.3 3.60002C0.3 1.77747 1.77746 0.3 3.6 0.3H186.4C188.223 0.3 189.7 1.77746 189.7 3.6V193.658C189.7 195.481 188.223 196.958 186.4 196.958H184.894C183.418 196.958 182.223 198.154 182.223 199.629C182.223 200.773 181.295 201.7 180.152 201.7H9.84847C8.7047 201.7 7.77748 200.773 7.77748 199.629C7.77748 198.154 6.58164 196.958 5.1065 196.958H3.6C1.77746 196.958 0.3 195.481 0.3 193.658V3.60002Z" stroke="#454442" stroke-width="0.6"/>
+<defs>
+<filter id="filter0_i_598_514" x="0" y="0" width="190" height="204.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2.4"/>
+<feGaussianBlur stdDeviation="2.34"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_598_514"/>
+</filter>
+</defs>
+</svg>

src/App.vue

@@ -1,8 +1,7 @@
 <template>
   <Notifications />
-  <GmTools v-if="gameStore.character?.role === 'gm'" />
+  <BackgroundImageLoader />
   <GmPanel v-if="gameStore.character?.role === 'gm'" />
-
   <component :is="currentScreen" />
 </template>
 
@@ -10,24 +9,51 @@
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import Notifications from '@/components/utilities/Notifications.vue'
-import GmTools from '@/components/gameMaster/GmTools.vue'
+import BackgroundImageLoader from '@/components/utilities/BackgroundImageLoader.vue'
 import GmPanel from '@/components/gameMaster/GmPanel.vue'
-import Login from '@/screens/Login.vue'
-import Characters from '@/screens/Characters.vue'
-import Game from '@/screens/Game.vue'
-// import Loading from '@/screens/Loading.vue'
-import ZoneEditor from '@/screens/ZoneEditor.vue'
-import { computed } from 'vue'
+import Login from '@/components/screens/Login.vue'
+import Characters from '@/components/screens/Characters.vue'
+import Game from '@/components/screens/Game.vue'
+import ZoneEditor from '@/components/screens/ZoneEditor.vue'
+import { computed, watch } from 'vue'
 
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
 
 const currentScreen = computed(() => {
-  // if (!gameStore.isAssetsLoaded) return Loading
   if (!gameStore.connection) return Login
   if (!gameStore.token) return Login
   if (!gameStore.character) return Characters
   if (zoneEditorStore.active) return ZoneEditor
   return Game
 })
+
+// Watch zoneEditorStore.active and empty gameStore.game.loadedAssets
+watch(
+  () => zoneEditorStore.active,
+  () => {
+    gameStore.game.loadedAssets = []
+  }
+)
+
+// #209: Play sound when a button is pressed
+addEventListener('click', (event) => {
+  if (!(event.target instanceof HTMLButtonElement)) {
+    return
+  }
+  const audio = new Audio('/assets/music/click-btn.mp3')
+  audio.play()
+})
+
+// Watch for "G" key press and toggle the gm panel
+addEventListener('keydown', (event) => {
+  if (gameStore.character?.role !== 'gm') return // Only allow toggling the gm panel if the character is a gm
+
+  // Check if no input is active
+  if (event.repeat || event.isComposing || event.defaultPrevented) return
+
+  if (event.key === 'G') {
+    gameStore.toggleGmPanel()
+  }
+})
 </script>

src/assets/scss/main.scss

@@ -125,6 +125,12 @@ button {
   }
 }
 
+.character {
+  &.active {
+    @apply pr-px border-r-0;
+  }
+}
+
 .text-pixel {
   @apply text-white font-ui drop-shadow-pixel-black;
 }

src/components/Effects.vue

@@ -1,21 +1,41 @@
 <template>
-  <Scene name="effects" @preload="preloadScene" @create="createScene" @update="updateScene"> </Scene>
+  <Scene name="effects" @preload="preloadScene" @create="createScene" @update="updateScene" />
 </template>
 
 <script setup lang="ts">
 import { Scene } from 'phavuer'
 import { useZoneStore } from '@/stores/zoneStore'
+import { useGameStore } from '@/stores/gameStore'
 import { onBeforeUnmount, ref, watch } from 'vue'
+import type { WeatherState } from '@/types'
 
+// Constants
+const SUNRISE_HOUR = 6
+const SUNSET_HOUR = 20
+const DAY_STRENGTH = 100
+const NIGHT_STRENGTH = 30
+
+// Stores
+const gameStore = useGameStore()
 const zoneStore = useZoneStore()
 
+// Scene ref
 const sceneRef = ref<Phaser.Scene | null>(null)
 
-// Effect-related refs
+// Effect refs
 const lightEffect = ref<Phaser.GameObjects.Graphics | null>(null)
 const rainEmitter = ref<Phaser.GameObjects.Particles.ParticleEmitter | null>(null)
 const fogSprite = ref<Phaser.GameObjects.Sprite | null>(null)
 
+// State refs
+const weatherState = ref<WeatherState>({
+  isRainEnabled: false,
+  rainPercentage: 0,
+  isFogEnabled: false,
+  fogDensity: 0
+})
+
+// Scene lifecycle methods
 const preloadScene = async (scene: Phaser.Scene) => {
   scene.load.image('raindrop', 'assets/raindrop.png')
   scene.load.image('fog', 'assets/fog.png')
@@ -23,15 +43,21 @@ const preloadScene = async (scene: Phaser.Scene) => {
 
 const createScene = async (scene: Phaser.Scene) => {
   sceneRef.value = scene
-  createLightEffect(scene)
-  createRainEffect(scene)
-  createFogEffect(scene)
+  setupEffects(scene)
+  setupSocketListeners()
 }
 
 const updateScene = () => {
   updateEffects()
 }
 
+// Effect setup
+const setupEffects = (scene: Phaser.Scene) => {
+  createLightEffect(scene)
+  createRainEffect(scene)
+  createFogEffect(scene)
+}
+
 const createLightEffect = (scene: Phaser.Scene) => {
   lightEffect.value = scene.add.graphics()
   lightEffect.value.setDepth(1000)
@@ -59,14 +85,55 @@ const createFogEffect = (scene: Phaser.Scene) => {
   fogSprite.value.setDepth(950)
 }
 
+// Lighting calculations
+const calculateLightStrength = (time: Date): number => {
+  const hour = time.getHours()
+  const minute = time.getMinutes()
+
+  let strength = DAY_STRENGTH
+
+  // Night time (10 PM - 6 AM)
+  if (hour >= SUNSET_HOUR || hour < SUNRISE_HOUR) {
+    strength = NIGHT_STRENGTH
+  }
+  // Full daylight (7 AM - 7 PM)
+  else if (hour > SUNRISE_HOUR && hour < SUNSET_HOUR - 2) {
+    strength = DAY_STRENGTH
+  }
+  // Sunrise transition (6 AM - 7 AM)
+  else if (hour === SUNRISE_HOUR) {
+    strength = NIGHT_STRENGTH + ((DAY_STRENGTH - NIGHT_STRENGTH) * minute) / 60
+  }
+  // Sunset transition (8 PM - 10 PM)
+  else if (hour >= SUNSET_HOUR - 2 && hour < SUNSET_HOUR) {
+    const totalMinutes = (hour - (SUNSET_HOUR - 2)) * 60 + minute
+    const transitionProgress = totalMinutes / 120 // 2 hours = 120 minutes
+    strength = DAY_STRENGTH - (DAY_STRENGTH - NIGHT_STRENGTH) * transitionProgress
+  }
+
+  return strength
+}
+
+// Effect updates
 const updateEffects = () => {
   const effects = zoneStore.zone?.zoneEffects || []
 
+  if (effects.length > 0) {
+    updateZoneEffects(effects)
+  } else {
+    // Make sure we're getting the current time
+    const lightStrength = calculateLightStrength(gameStore.world.date)
+    updateLightEffect(lightStrength)
+    updateWeatherEffects()
+  }
+}
+
+const updateZoneEffects = (effects: any[]) => {
+  // Always update light based on time when zone effects are present
+  updateLightEffect(calculateLightStrength(gameStore.world.date))
+
   effects.forEach((effect) => {
     switch (effect.effect) {
-      case 'light':
-        updateLightEffect(effect.strength)
-        break
       case 'rain':
         updateRainEffect(effect.strength)
         break
@@ -77,6 +144,11 @@ const updateEffects = () => {
   })
 }
 
+const updateWeatherEffects = () => {
+  updateRainEffect(weatherState.value.isRainEnabled ? weatherState.value.rainPercentage : 0)
+  updateFogEffect(weatherState.value.isFogEnabled ? weatherState.value.fogDensity * 100 : 0)
+}
+
 const updateLightEffect = (strength: number) => {
   if (!lightEffect.value) return
   const darkness = 1 - strength / 100
@@ -100,11 +172,34 @@ const updateFogEffect = (strength: number) => {
   fogSprite.value.setAlpha(strength / 100)
 }
 
+// Socket handlers
+const setupSocketListeners = () => {
+  // Initial weather state
+  gameStore.connection?.emit('weather', (response: WeatherState) => {
+    if (zoneStore.zone?.zoneEffects) return
+    weatherState.value = response
+    updateEffects()
+  })
+
+  // Weather updates
+  gameStore.connection?.on('weather', (data: WeatherState) => {
+    weatherState.value = data
+    updateEffects()
+  })
+
+  // Time updates
+  gameStore.connection?.on('date', () => {
+    if (zoneStore.zone?.zoneEffects) return
+    updateEffects()
+  })
+}
+
+// Watchers
 watch(() => zoneStore.zone?.zoneEffects, updateEffects, { deep: true })
 
+// Cleanup
 onBeforeUnmount(() => {
   if (sceneRef.value) sceneRef.value.scene.remove('effects')
+  gameStore.connection?.off('weather')
 })
-
-// @TODO : Fix resize issue
 </script>

src/components/gameMaster/GmPanel.vue

@@ -6,6 +6,7 @@
         <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Users</button>
         <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Chats</button>
         <button @mousedown.stop class="btn-cyan active py-1.5 px-4 min-w-24">Asset manager</button>
+        <button class="btn-cyan py-1.5 px-4 min-w-24" type="button" @click="() => zoneEditorStore.toggleActive()">Zone manager</button>
       </div>
     </template>
     <template #modalBody>
@@ -21,8 +22,10 @@ import { ref } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
 import AssetManager from '@/components/gameMaster/assetManager/AssetManager.vue'
 import { useGameStore } from '@/stores/gameStore'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 
 const gameStore = useGameStore()
+const zoneEditorStore = useZoneEditorStore()
 
 let toggle = ref('asset-manager')
 </script>

src/components/gameMaster/GmTools.vue

@@ -1,44 +0,0 @@
-<template>
-  <Modal :isModalOpen="true" :closable="false" :is-resizable="false" :modal-width="modalWidth" :modal-height="modalHeight" :modal-position-x="posXY.x" :modal-position-y="posXY.y">
-    <template #modalHeader>
-      <h3 class="m-0 font-medium shrink-0 text-white">GM tools</h3>
-    </template>
-    <template #modalBody>
-      <div class="content flex flex-col gap-2.5 m-4 h-20">
-        <button class="btn-cyan py-1.5 px-4 w-full" type="button" @click="gameStore.toggleGmPanel()">Toggle GM panel</button>
-        <button class="btn-cyan py-1.5 px-4 w-full" type="button" @click="() => zoneEditorStore.toggleActive()">Zone manager</button>
-      </div>
-    </template>
-  </Modal>
-</template>
-<script setup lang="ts">
-import Modal from '@/components/utilities/Modal.vue'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { useGameStore } from '@/stores/gameStore'
-import { onMounted, ref } from 'vue'
-
-const zoneEditorStore = useZoneEditorStore()
-const gameStore = useGameStore()
-const modalWidth = ref(200)
-const modalHeight = ref(170)
-
-let posXY = ref({ x: 0, y: 0 })
-
-onMounted(() => {
-  window.addEventListener('resize', () => {
-    posXY.value = customPositionGmPanel(modalWidth.value)
-  })
-})
-
-const customPositionGmPanel = (modalWidth: number) => {
-  const padding = 25
-  const width = window.innerWidth
-
-  const x = width - (modalWidth + 4) - 25
-  const y = padding
-
-  return { x, y }
-}
-
-posXY.value = customPositionGmPanel(modalWidth.value)
-</script>

src/components/gameMaster/zoneEditor/Tiles.vue

@@ -1,146 +0,0 @@
-<template>
-  <Controls :layer="tiles" :depth="0" />
-</template>
-
-<script setup lang="ts">
-import config from '@/config'
-import { useScene } from 'phavuer'
-import { useGameStore } from '@/stores/gameStore'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { onBeforeMount, onBeforeUnmount } from 'vue'
-import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/zoneComposable'
-import Controls from '@/components/utilities/Controls.vue'
-
-const emit = defineEmits(['tilemap:create'])
-
-const scene = useScene()
-const gameStore = useGameStore()
-const zoneEditorStore = useZoneEditorStore()
-
-const zoneTilemap = createTilemap()
-const tiles = createTileLayer()
-
-function createTilemap() {
-  const zoneData = new Phaser.Tilemaps.MapData({
-    width: zoneEditorStore.zone?.width,
-    height: zoneEditorStore.zone?.height,
-    tileWidth: config.tile_size.x,
-    tileHeight: config.tile_size.y,
-    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
-    format: Phaser.Tilemaps.Formats.ARRAY_2D
-  })
-  const tilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
-  emit('tilemap:create', tilemap)
-  return tilemap
-}
-
-function createTileLayer() {
-  const tilesetImages = gameStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y }))
-  tilesetImages.push(zoneTilemap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))
-
-  const layer = zoneTilemap.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
-
-  layer.setDepth(0)
-  layer.setCullPadding(2, 2)
-
-  return layer
-}
-
-function pencil(pointer: Phaser.Input.Pointer) {
-  // Check if zone is set
-  if (!zoneEditorStore.zone) return
-
-  // Check if tool is pencil
-  if (zoneEditorStore.tool !== 'pencil') return
-
-  // Check if draw mode is tile
-  if (zoneEditorStore.drawMode !== 'tile') return
-
-  // Check if there is a selected tile
-  if (!zoneEditorStore.selectedTile) return
-
-  // Check if left mouse button is pressed
-  if (!pointer.isDown) return
-
-  // Check if shift is not pressed, this means we are moving the camera
-  if (pointer.event.shiftKey) return
-
-  // Check if there is a tile
-  const tile = getTile(tiles, pointer.worldX, pointer.worldY)
-  if (!tile) return
-
-  // Place tile
-  placeTile(zoneTilemap, tiles, tile.x, tile.y, zoneEditorStore.selectedTile.id)
-
-  // Adjust zoneEditorStore.zone.tiles
-  zoneEditorStore.zone.tiles[tile.y][tile.x] = zoneEditorStore.selectedTile.id
-}
-
-function eraser(pointer: Phaser.Input.Pointer) {
-  // Check if zone is set
-  if (!zoneEditorStore.zone) return
-
-  // Check if tool is pencil
-  if (zoneEditorStore.tool !== 'eraser') return
-
-  // Check if draw mode is tile
-  if (zoneEditorStore.eraserMode !== 'tile') return
-
-  // Check if left mouse button is pressed
-  if (!pointer.isDown) return
-
-  // Check if shift is not pressed, this means we are moving the camera
-  if (pointer.event.shiftKey) return
-
-  // Check if there is a tile
-  const tile = getTile(tiles, pointer.worldX, pointer.worldY)
-  if (!tile) return
-
-  // Place tile
-  placeTile(zoneTilemap, tiles, tile.x, tile.y, 'blank_tile')
-
-  // Adjust zoneEditorStore.zone.tiles
-  zoneEditorStore.zone.tiles[tile.y][tile.x] = 'blank_tile'
-}
-
-function paint(pointer: Phaser.Input.Pointer) {
-  // Check if zone is set
-  if (!zoneEditorStore.zone) return
-
-  // Check if tool is pencil
-  if (zoneEditorStore.tool !== 'paint') return
-
-  // Check if there is a selected tile
-  if (!zoneEditorStore.selectedTile) return
-
-  // Check if left mouse button is pressed
-  if (!pointer.isDown) return
-
-  // Set new tileArray with selected tile
-  setLayerTiles(zoneTilemap, tiles, createTileArray(zoneTilemap.width, zoneTilemap.height, zoneEditorStore.selectedTile.id))
-
-  // Adjust zoneEditorStore.zone.tiles
-  zoneEditorStore.zone.tiles = createTileArray(zoneTilemap.width, zoneTilemap.height, zoneEditorStore.selectedTile.id)
-}
-
-onBeforeMount(() => {
-  if (!zoneEditorStore.zone?.tiles) {
-    return
-  }
-  setLayerTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles)
-
-  scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
-  scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
-  scene.input.on(Phaser.Input.Events.POINTER_DOWN, paint)
-})
-
-onBeforeUnmount(() => {
-  scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
-  scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
-  scene.input.off(Phaser.Input.Events.POINTER_DOWN, paint)
-
-  zoneTilemap.destroyLayer('tiles')
-  zoneTilemap.removeAllLayers()
-  zoneTilemap.destroy()
-})
-</script>

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -1,9 +1,9 @@
 <template>
-  <Tiles @tilemap:create="tileMap = $event" />
-  <Objects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
-  <EventTiles v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
+  <ZoneTiles @tileMap:create="tileMap = $event" />
+  <ZoneObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
+  <ZoneEventTiles v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
 
-  <Toolbar @save="save" />
+  <Toolbar @save="save" @clear="clear" />
 
   <ZoneList />
   <TileList />
@@ -18,7 +18,6 @@ import { onUnmounted, ref } from 'vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { type Zone } from '@/types'
-
 // Components
 import Toolbar from '@/components/gameMaster/zoneEditor/partials/Toolbar.vue'
 import TileList from '@/components/gameMaster/zoneEditor/partials/TileList.vue'
@@ -26,15 +25,25 @@ import ObjectList from '@/components/gameMaster/zoneEditor/partials/ObjectList.v
 import ZoneSettings from '@/components/gameMaster/zoneEditor/partials/ZoneSettings.vue'
 import ZoneList from '@/components/gameMaster/zoneEditor/partials/ZoneList.vue'
 import TeleportModal from '@/components/gameMaster/zoneEditor/partials/TeleportModal.vue'
-import Tiles from '@/components/gameMaster/zoneEditor/Tiles.vue'
-import Objects from '@/components/gameMaster/zoneEditor/Objects.vue'
-import EventTiles from '@/components/gameMaster/zoneEditor/EventTiles.vue'
+import ZoneTiles from '@/components/gameMaster/zoneEditor/zonePartials/ZoneTiles.vue'
+import ZoneObjects from '@/components/gameMaster/zoneEditor/zonePartials/ZoneObjects.vue'
+import ZoneEventTiles from '@/components/gameMaster/zoneEditor/zonePartials/ZoneEventTiles.vue'
 
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
+console.log(zoneEditorStore.zone)
 
 const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
 
+function clear() {
+  if (!zoneEditorStore.zone) return
+
+  // Clear objects, event tiles and tiles
+  zoneEditorStore.zone.zoneObjects = []
+  zoneEditorStore.zone.zoneEventTiles = []
+  zoneEditorStore.triggerClearTiles()
+}
+
 function save() {
   if (!zoneEditorStore.zone) return
 
@@ -55,6 +64,7 @@ function save() {
   }
 
   gameStore.connection?.emit('gm:zone_editor:zone:update', data, (response: Zone) => {
+    console.log(response.updatedAt)
     zoneEditorStore.setZone(response)
   })
 }

src/components/gameMaster/zoneEditor/partials/ObjectList.vue

@@ -42,23 +42,18 @@
 
 <script setup lang="ts">
 import config from '@/config'
-import { ref, onMounted, computed, watch } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { useGameStore } from '@/stores/gameStore'
 import Modal from '@/components/utilities/Modal.vue'
-import type { Object } from '@/types'
+import type { Object, ZoneObject } from '@/types'
 
 const gameStore = useGameStore()
 const isModalOpen = ref(false)
 const zoneEditorStore = useZoneEditorStore()
 const searchQuery = ref('')
-// const objectDepth = ref(0)
 const selectedTags = ref<string[]>([])
 
-// watch(objectDepth, (depth) => {
-//   zoneEditorStore.setObjectDepth(depth)
-// })
-
 const uniqueTags = computed(() => {
   const allTags = zoneEditorStore.objectList.flatMap((obj) => obj.tags || [])
   return Array.from(new Set(allTags))
@@ -81,8 +76,6 @@ const toggleTag = (tag: string) => {
 }
 
 onMounted(async () => {
-  zoneEditorStore.setObjectDepth(0)
-
   isModalOpen.value = true
   gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
     zoneEditorStore.setObjectList(response)

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

@@ -52,7 +52,7 @@
                 class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
                 :src="`${config.server_endpoint}/assets/tiles/${selectedGroup.parent.id}.png`"
                 :alt="selectedGroup.parent.name"
-                @click="selectTile(selectedGroup.parent)"
+                @click="selectTile(selectedGroup.parent.id)"
                 :class="{
                   'border-cyan shadow-lg scale-105': isActiveTile(selectedGroup.parent),
                   'border-transparent hover:border-gray-300': !isActiveTile(selectedGroup.parent)
@@ -65,7 +65,7 @@
                 class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
                 :src="`${config.server_endpoint}/assets/tiles/${childTile.id}.png`"
                 :alt="childTile.name"
-                @click="selectTile(childTile)"
+                @click="selectTile(childTile.id)"
                 :class="{
                   'border-cyan shadow-lg scale-105': isActiveTile(childTile),
                   'border-transparent hover:border-gray-300': !isActiveTile(childTile)
@@ -218,12 +218,12 @@ function closeGroup() {
   selectedGroup.value = null
 }
 
-function selectTile(tile: Tile) {
+function selectTile(tile: string) {
   zoneEditorStore.setSelectedTile(tile)
 }
 
 function isActiveTile(tile: Tile): boolean {
-  return zoneEditorStore.selectedTile?.id === tile.id
+  return zoneEditorStore.selectedTile === tile.id
 }
 
 onMounted(async () => {

src/components/gameMaster/zoneEditor/zonePartials/ZoneEventTiles.vue

@@ -8,7 +8,7 @@ import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { Image, useScene } from 'phavuer'
 import { getTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { uuidv4 } from '@/utilities'
-import { onBeforeMount, onBeforeUnmount } from 'vue'
+import { onMounted, onUnmounted } from 'vue'
 
 const scene = useScene()
 const zoneEditorStore = useZoneEditorStore()
@@ -102,14 +102,14 @@ function eraser(pointer: Phaser.Input.Pointer) {
   zoneEditorStore.zone.zoneEventTiles = zoneEditorStore.zone.zoneEventTiles.filter((eventTile) => eventTile.id !== existingEventTile.id)
 }
 
-onBeforeMount(() => {
+onMounted(() => {
   scene.input.on(Phaser.Input.Events.POINTER_DOWN, pencil)
   scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
   scene.input.on(Phaser.Input.Events.POINTER_DOWN, eraser)
   scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
 })
 
-onBeforeUnmount(() => {
+onUnmounted(() => {
   scene.input.off(Phaser.Input.Events.POINTER_DOWN, pencil)
   scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
   scene.input.off(Phaser.Input.Events.POINTER_DOWN, eraser)

src/components/gameMaster/zoneEditor/zonePartials/ZoneObject.vue

@@ -0,0 +1,45 @@
+<template>
+  <Image v-if="gameStore.getLoadedAsset(props.zoneObject.object.id)" v-bind="imageProps" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Image, useScene } from 'phavuer'
+import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
+import { loadTexture } from '@/composables/gameComposable'
+import type { AssetDataT, ZoneObject } from '@/types'
+import { useGameStore } from '@/stores/gameStore'
+
+const props = defineProps<{
+  tilemap: Phaser.Tilemaps.Tilemap
+  zoneObject: ZoneObject
+  selectedZoneObject: ZoneObject | null
+  movingZoneObject: ZoneObject | null
+}>()
+
+const gameStore = useGameStore()
+const scene = useScene()
+
+const imageProps = computed(() => ({
+  alpha: props.movingZoneObject?.id === props.zoneObject.id ? 0.5 : 1,
+  tint: props.selectedZoneObject?.id === props.zoneObject.id ? 0x00ff00 : 0xffffff,
+  depth: calculateIsometricDepth(props.zoneObject.positionX, props.zoneObject.positionY, props.zoneObject.object.frameWidth, props.zoneObject.object.frameHeight),
+  x: tileToWorldX(props.tilemap, props.zoneObject.positionX, props.zoneObject.positionY),
+  y: tileToWorldY(props.tilemap, props.zoneObject.positionX, props.zoneObject.positionY),
+  flipX: props.zoneObject.isRotated,
+  texture: props.zoneObject.object.id,
+  originY: Number(props.zoneObject.object.originX),
+  originX: Number(props.zoneObject.object.originY)
+}))
+
+loadTexture(scene, {
+  key: props.zoneObject.object.id,
+  data: '/assets/objects/' + props.zoneObject.object.id + '.png',
+  group: 'objects',
+  updatedAt: props.zoneObject.object.updatedAt,
+  frameWidth: props.zoneObject.object.frameWidth,
+  frameHeight: props.zoneObject.object.frameHeight
+} as AssetDataT).catch((error) => {
+  console.error('Error loading texture:', error)
+})
+</script>

src/components/gameMaster/zoneEditor/zonePartials/ZoneObjects.vue

@@ -1,40 +1,27 @@
 <template>
-  <SelectedZoneObject v-if="selectedZoneObject" :zoneObject="selectedZoneObject" @move="moveZoneObject" @rotate="rotateZoneObject" @delete="deleteZoneObject" />
-  <Image v-for="object in zoneEditorStore.zone?.zoneObjects" v-bind="getImageProps(object)" @pointerup="() => (selectedZoneObject = object)" />
+  <SelectedZoneObject v-if="selectedZoneObject" :zoneObject="selectedZoneObject" :movingZoneObject="movingZoneObject" @move="moveZoneObject" @rotate="rotateZoneObject" @delete="deleteZoneObject" />
+  <ZoneObject v-for="zoneObject in zoneEditorStore.zone?.zoneObjects" :tilemap="tilemap" :zoneObject :selectedZoneObject :movingZoneObject @pointerup="clickZoneObject(zoneObject)" />
 </template>
 
 <script setup lang="ts">
 import { uuidv4 } from '@/utilities'
-import { calculateIsometricDepth, getTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
-import { Image, useScene } from 'phavuer'
+import { getTile } from '@/composables/zoneComposable'
+import { useScene } from 'phavuer'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import type { ZoneObject } from '@/types'
 import SelectedZoneObject from '@/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue'
-import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+import ZoneObject from '@/components/gameMaster/zoneEditor/zonePartials/ZoneObject.vue'
+import type { ZoneObject as ZoneObjectT } from '@/types'
 
 const scene = useScene()
 const zoneEditorStore = useZoneEditorStore()
-const selectedZoneObject = ref<ZoneObject | null>(null)
-const movingZoneObject = ref<ZoneObject | null>(null)
+const selectedZoneObject = ref<ZoneObjectT | null>(null)
+const movingZoneObject = ref<ZoneObjectT | null>(null)
 
 const props = defineProps<{
   tilemap: Phaser.Tilemaps.Tilemap
 }>()
 
-function getImageProps(zoneObject: ZoneObject) {
-  return {
-    alpha: zoneObject.id === movingZoneObject.value?.id ? 0.5 : 1,
-    depth: calculateIsometricDepth(zoneObject.positionX, zoneObject.positionY, zoneObject.object.frameWidth, zoneObject.object.frameHeight),
-    tint: selectedZoneObject.value?.id === zoneObject.id ? 0x00ff00 : 0xffffff,
-    x: tileToWorldX(props.tilemap, zoneObject.positionX, zoneObject.positionY),
-    y: tileToWorldY(props.tilemap, zoneObject.positionX, zoneObject.positionY),
-    flipX: zoneObject.isRotated,
-    texture: zoneObject.object.id,
-    originY: Number(zoneObject.object.originX),
-    originX: Number(zoneObject.object.originY)
-  }
-}
-
 function pencil(pointer: Phaser.Input.Pointer) {
   // Check if zone is set
   if (!zoneEditorStore.zone) return
@@ -54,6 +41,9 @@ function pencil(pointer: Phaser.Input.Pointer) {
   // Check if shift is not pressed, this means we are moving the camera
   if (pointer.event.shiftKey) return
 
+  // Check if alt is pressed, this means we are selecting the object
+  if (pointer.event.altKey) return
+
   // Check if there is a tile
   const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
   if (!tile) return
@@ -66,7 +56,7 @@ function pencil(pointer: Phaser.Input.Pointer) {
     id: uuidv4(),
     zoneId: zoneEditorStore.zone.id,
     zone: zoneEditorStore.zone,
-    objectId: zoneEditorStore.selectedObject.id,
+    objectId: zoneEditorStore.selectedObject,
     object: zoneEditorStore.selectedObject,
     depth: 0,
     isRotated: false,
@@ -94,6 +84,9 @@ function eraser(pointer: Phaser.Input.Pointer) {
   // Check if shift is not pressed, this means we are moving the camera
   if (pointer.event.shiftKey) return
 
+  // Check if alt is pressed, this means we are selecting the object
+  if (pointer.event.altKey) return
+
   // Check if there is a tile
   const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
   if (!tile) return
@@ -106,6 +99,37 @@ function eraser(pointer: Phaser.Input.Pointer) {
   zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.filter((object) => object.id !== existingObject.id)
 }
 
+function objectPicker(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'pencil') return
+
+  // Check if draw mode is object
+  if (zoneEditorStore.drawMode !== 'object') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // If alt is not pressed, return
+  if (!pointer.event.altKey) return
+
+  // Check if there is a tile
+  const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Check if object already exists on position
+  const existingObject = zoneEditorStore.zone.zoneObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
+  if (!existingObject) return
+
+  // Select the object
+  zoneEditorStore.setSelectedObject(existingObject)
+}
+
 function moveZoneObject(id: string) {
   // Check if zone is set
   if (!zoneEditorStore.zone) return
@@ -155,18 +179,29 @@ function deleteZoneObject(id: string) {
   selectedZoneObject.value = null
 }
 
-onBeforeMount(() => {
+function clickZoneObject(zoneObject: ZoneObjectT) {
+  selectedZoneObject.value = zoneObject
+
+  // If alt is pressed, select the object
+  if (scene.input.activePointer.event.altKey) {
+    zoneEditorStore.setSelectedObject(zoneObject.object)
+  }
+}
+
+onMounted(() => {
   scene.input.on(Phaser.Input.Events.POINTER_DOWN, pencil)
   scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
   scene.input.on(Phaser.Input.Events.POINTER_DOWN, eraser)
   scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, objectPicker)
 })
 
-onBeforeUnmount(() => {
+onUnmounted(() => {
   scene.input.off(Phaser.Input.Events.POINTER_DOWN, pencil)
   scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
   scene.input.off(Phaser.Input.Events.POINTER_DOWN, eraser)
   scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, objectPicker)
 })
 
 // watch zoneEditorStore.objectList and update originX and originY of objects in zoneObjects

src/components/gameMaster/zoneEditor/zonePartials/ZoneTiles.vue

@@ -0,0 +1,227 @@
+<template>
+  <Controls :layer="tileLayer" :depth="0" />
+</template>
+
+<script setup lang="ts">
+import config from '@/config'
+import { useScene } from 'phavuer'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { onMounted, onUnmounted, watch } from 'vue'
+import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/zoneComposable'
+import Controls from '@/components/utilities/Controls.vue'
+import { useGameStore } from '@/stores/gameStore'
+import type { AssetDataT } from '@/types'
+
+const emit = defineEmits(['tileMap:create'])
+
+const scene = useScene()
+const gameStore = useGameStore()
+const zoneEditorStore = useZoneEditorStore()
+const tileMap = createTileMap()
+const tileLayer = createTileLayer()
+
+/**
+ * A Tilemap is a container for Tilemap data.
+ * This isn't a display object, rather, it holds data about the map and allows you to add tilesets and tilemap layers to it.
+ * A map can have one or more tilemap layers, which are the display objects that actually render the tiles.
+ */
+function createTileMap() {
+  const zoneData = new Phaser.Tilemaps.MapData({
+    width: zoneEditorStore.zone?.width,
+    height: zoneEditorStore.zone?.height,
+    tileWidth: config.tile_size.x,
+    tileHeight: config.tile_size.y,
+    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
+    format: Phaser.Tilemaps.Formats.ARRAY_2D
+  })
+
+  const newTileMap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
+  emit('tileMap:create', newTileMap)
+
+  return newTileMap
+}
+
+/**
+ * A Tileset is a combination of a single image containing the tiles and a container for data about each tile.
+ */
+function createTileLayer() {
+  const tilesArray = gameStore.getLoadedAssetsByGroup('tiles')
+
+  const tilesetImages = Array.from(tilesArray).map((tile: AssetDataT, index: number) => {
+    return tileMap.addTilesetImage(tile.key, tile.key, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
+  }) as any
+
+  // Add blank tile
+  tilesetImages.push(tileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))
+  const layer = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
+
+  layer.setDepth(0)
+  layer.setCullPadding(2, 2)
+
+  return layer
+}
+
+function pencil(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'pencil') return
+
+  // Check if draw mode is tile
+  if (zoneEditorStore.drawMode !== 'tile') return
+
+  // Check if there is a selected tile
+  if (!zoneEditorStore.selectedTile) return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // Check if there is a tile
+  const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Place tile
+  placeTile(tileMap, tileLayer, tile.x, tile.y, zoneEditorStore.selectedTile)
+
+  // Adjust zoneEditorStore.zone.tiles
+  zoneEditorStore.zone.tiles[tile.y][tile.x] = zoneEditorStore.selectedTile
+}
+
+function eraser(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'eraser') return
+
+  // Check if draw mode is tile
+  if (zoneEditorStore.eraserMode !== 'tile') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // Check if alt is pressed
+  if (pointer.event.altKey) return
+
+  // Check if there is a tile
+  const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Place tile
+  placeTile(tileMap, tileLayer, tile.x, tile.y, 'blank_tile')
+
+  // Adjust zoneEditorStore.zone.tiles
+  zoneEditorStore.zone.tiles[tile.y][tile.x] = 'blank_tile'
+}
+
+function paint(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'paint') return
+
+  // Check if there is a selected tile
+  if (!zoneEditorStore.selectedTile) return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // Check if alt is pressed
+  if (pointer.event.altKey) return
+
+  // Set new tileArray with selected tile
+  setLayerTiles(tileMap, tileLayer, createTileArray(tileMap.width, tileMap.height, zoneEditorStore.selectedTile))
+
+  // Adjust zoneEditorStore.zone.tiles
+  zoneEditorStore.zone.tiles = createTileArray(tileMap.width, tileMap.height, zoneEditorStore.selectedTile)
+}
+
+// When alt is pressed, and the pointer is down, select the tile that the pointer is over
+function tilePicker(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'pencil') return
+
+  // Check if draw mode is tile
+  if (zoneEditorStore.drawMode !== 'tile') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // Check if alt is pressed
+  if (!pointer.event.altKey) return
+
+  // Check if there is a tile
+  const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Select the tile
+  zoneEditorStore.setSelectedTile(zoneEditorStore.zone.tiles[tile.y][tile.x])
+}
+
+watch(
+  () => zoneEditorStore.shouldClearTiles,
+  (shouldClear) => {
+    if (shouldClear && zoneEditorStore.zone) {
+      const blankTiles = createTileArray(tileMap.width, tileMap.height, 'blank_tile')
+      setLayerTiles(tileMap, tileLayer, blankTiles)
+      zoneEditorStore.zone.tiles = blankTiles
+      zoneEditorStore.resetClearTilesFlag()
+    }
+  }
+)
+
+onMounted(() => {
+  if (!zoneEditorStore.zone?.tiles) {
+    return
+  }
+
+  // First fill the entire map with blank tiles using current zone dimensions
+  const blankTiles = createTileArray(zoneEditorStore.zone.width, zoneEditorStore.zone.height, 'blank_tile')
+
+  // Then overlay the zone tiles, but only within the current zone dimensions
+  const zoneTiles = zoneEditorStore.zone.tiles
+  for (let y = 0; y < zoneEditorStore.zone.height; y++) {
+    for (let x = 0; x < zoneEditorStore.zone.width; x++) {
+      // Only copy if the source tiles array has this position
+      if (zoneTiles[y] && zoneTiles[y][x] !== undefined) {
+        blankTiles[y][x] = zoneTiles[y][x]
+      }
+    }
+  }
+
+  setLayerTiles(tileMap, tileLayer, blankTiles)
+
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, paint)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, tilePicker)
+})
+
+onUnmounted(() => {
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, paint)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, tilePicker)
+
+  tileMap.destroyLayer('tiles')
+  tileMap.removeAllLayers()
+  tileMap.destroy()
+})
+</script>

src/components/gui/CharacterProfile.vue

@@ -168,8 +168,8 @@ function stopDrag() {
 }
 
 function adjustPosition() {
-  x.value = Math.max(0, Math.min(x.value, window.innerWidth - width.value))
-  y.value = Math.max(0, Math.min(y.value, window.innerHeight - height.value))
+  x.value = Math.min(x.value, window.innerWidth - width.value)
+  y.value = Math.min(y.value, window.innerHeight - height.value)
 }
 
 function initializePosition() {
@@ -236,6 +236,7 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
+  removeEventListener('keydown', keyPress)
   removeEventListener('mousemove', drag)
   removeEventListener('mouseup', stopDrag)
 })

src/components/gui/Clock.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="absolute top-0 right-4 hidden lg:block">
+    <p class="text-white text-lg">{{ gameStore.world.date.toLocaleString() }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useGameStore } from '@/stores/gameStore'
+import { onUnmounted } from 'vue'
+
+const gameStore = useGameStore()
+
+// Listen for new date from socket
+gameStore.connection?.on('date', (data: Date) => {
+  gameStore.world.date = new Date(data)
+})
+
+onUnmounted(() => {
+  gameStore.connection?.off('date')
+})
+</script>

src/components/login/LoginForm.vue

@@ -0,0 +1,69 @@
+<template>
+  <form @submit.prevent="loginFunc" class="relative px-6 py-11">
+    <div class="flex flex-col gap-5 p-2 mb-8 relative">
+      <div class="w-full grid gap-3 relative">
+        <input class="input-field xs:min-w-[350px] min-w-64" id="username-login" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
+        <div class="relative">
+          <input class="input-field xs:min-w-[350px] min-w-64" id="password-login" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
+          <button type="button" @click.prevent="showPassword = !showPassword" :class="{ 'eye-open': showPassword }" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
+        </div>
+        <span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
+      </div>
+      <button @click.stop="() => emit('openResetPasswordModal')" type="button" class="inline-flex self-end p-0 text-cyan-300 text-base">Forgot password?</button>
+      <button class="btn-cyan px-0 xs:w-full" type="submit">Play now</button>
+
+      <!-- Divider shape -->
+      <div class="absolute w-40 h-0.5 -bottom-8 left-1/2 -translate-x-1/2 flex justify-between">
+        <div class="w-0.5 h-full bg-gray-300"></div>
+        <div class="w-36 h-full bg-gray-300"></div>
+        <div class="w-0.5 h-full bg-gray-300"></div>
+      </div>
+    </div>
+    <div class="pt-8">
+      <p class="m-0 text-center">Don't have an account? <button class="text-cyan-300 text-base p-0" @click.prevent="() => emit('switchToRegister')">Sign up</button></p>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { login } from '@/services/authentication'
+import { useGameStore } from '@/stores/gameStore'
+import { useCookies } from '@vueuse/integrations/useCookies'
+
+const emit = defineEmits(['openResetPasswordModal', 'switchToRegister'])
+
+const gameStore = useGameStore()
+const username = ref('')
+const password = ref('')
+const loginError = ref('')
+const showPassword = ref(false)
+
+// automatic login because of development
+onMounted(async () => {
+  const token = useCookies().get('token')
+  if (token) {
+    gameStore.setToken(token)
+    gameStore.initConnection()
+  }
+})
+
+async function loginFunc() {
+  // check if username and password are valid
+  if (username.value === '' || password.value === '') {
+    loginError.value = 'Please enter a valid username and password'
+    return
+  }
+
+  // send login event to server
+  const response = await login(username.value, password.value)
+
+  if (response.success === undefined) {
+    loginError.value = response.error
+    return
+  }
+  gameStore.setToken(response.token)
+  gameStore.initConnection()
+  return true // Indicate success
+}
+</script>

src/components/login/NewPasswordForm.vue

@@ -0,0 +1,77 @@
+<template>
+  <form @submit.prevent="newPasswordFunc" class="relative px-6 py-11">
+    <div class="flex flex-col gap-5 p-2 mb-8 relative">
+      <div class="w-full grid gap-3 relative">
+        <input class="input-field xs:min-w-[350px] min-w-64" id="password-register" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
+        <button type="button" @click.prevent="showPassword = !showPassword" :class="{ 'eye-open': showPassword }" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
+        <span v-if="newPasswordError" class="text-red-200 text-xs absolute top-full mt-1">{{ newPasswordError }}</span>
+      </div>
+      <button class="btn-cyan xs:w-full" type="submit">Change password</button>
+
+      <!-- Divider shape -->
+      <div class="absolute w-40 h-0.5 -bottom-8 left-1/2 -translate-x-1/2 flex justify-between">
+        <div class="w-0.5 h-full bg-gray-300"></div>
+        <div class="w-36 h-full bg-gray-300"></div>
+        <div class="w-0.5 h-full bg-gray-300"></div>
+      </div>
+    </div>
+    <div class="pt-8">
+      <p class="m-0 text-center"><button class="text-cyan-300 text-base p-0" @click.prevent="cancelNewPassword">Back to login</button></p>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { newPassword } from '@/services/authentication'
+import { useGameStore } from '@/stores/gameStore'
+import { useCookies } from '@vueuse/integrations/useCookies'
+
+const emit = defineEmits(['switchToLogin'])
+
+const gameStore = useGameStore()
+const password = ref('')
+const newPasswordError = ref('')
+const showPassword = ref(false)
+
+// automatic login because of development
+onMounted(async () => {
+  const token = useCookies().get('token')
+  if (token) {
+    gameStore.setToken(token)
+    gameStore.initConnection()
+  }
+})
+
+async function newPasswordFunc() {
+  // check if username and password are valid
+  if (password.value === '') {
+    newPasswordError.value = 'Please enter a password'
+    return
+  }
+
+  const urlToken = window.location.hash.split('#')[1]
+
+  // send new password event to server along with the token
+  const response = await newPassword(urlToken, password.value)
+
+  if (response.success === undefined) {
+    newPasswordError.value = response.error
+    return
+  }
+
+  /**
+   * @TODO: #238, this wont work if we redirect to the login page
+   * Find a way to just "close" this screen instead of redirecting
+   */
+  gameStore.addNotification({
+    title: 'Success',
+    message: 'Password changed successfully'
+  })
+  window.location.href = '/'
+}
+
+function cancelNewPassword() {
+  window.location.href = '/'
+}
+</script>

src/components/login/RegisterForm.vue

@@ -0,0 +1,97 @@
+<template>
+  <form @submit.prevent="registerFunc" class="relative px-6 py-11">
+    <div class="flex flex-col gap-5 p-2 mb-8 relative">
+      <div class="w-full grid gap-3 relative">
+        <input class="input-field xs:min-w-[350px] min-w-64" id="username-register" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
+        <input class="input-field xs:min-w-[350px] min-w-64" id="email-register" v-model="email" type="email" name="email" placeholder="Email" required />
+        <div class="relative">
+          <input class="input-field xs:min-w-[350px] min-w-64" id="password-register" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
+          <button type="button" @click.prevent="showPassword = !showPassword" :class="{ 'eye-open': showPassword }" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
+        </div>
+        <span v-if="loginError" class="text-red-200 text-xs -mt-2">{{ loginError }}</span>
+      </div>
+      <button class="btn-cyan xs:w-full" type="submit">Register now</button>
+
+      <!-- Divider shape -->
+      <div class="absolute w-40 h-0.5 -bottom-8 left-1/2 -translate-x-1/2 flex justify-between">
+        <div class="w-0.5 h-full bg-gray-300"></div>
+        <div class="w-36 h-full bg-gray-300"></div>
+        <div class="w-0.5 h-full bg-gray-300"></div>
+      </div>
+    </div>
+    <div class="pt-8">
+      <p class="m-0 text-center">Already have an account? <button class="text-cyan-300 text-base p-0" @click.prevent="() => emit('switchToLogin')">Log in</button></p>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { login, register } from '@/services/authentication'
+import { useGameStore } from '@/stores/gameStore'
+import { useCookies } from '@vueuse/integrations/useCookies'
+
+const emit = defineEmits(['switchToLogin'])
+
+const gameStore = useGameStore()
+const username = ref('')
+const password = ref('')
+const email = ref('')
+const loginError = ref('')
+const showPassword = ref(false)
+
+// automatic login because of development
+onMounted(async () => {
+  const token = useCookies().get('token')
+  if (token) {
+    gameStore.setToken(token)
+    gameStore.initConnection()
+  }
+})
+
+async function loginFunc() {
+  // check if username and password are valid
+  if (username.value === '' || password.value === '') {
+    loginError.value = 'Please enter a valid username and password'
+    return
+  }
+
+  // send login event to server
+  const response = await login(username.value, password.value)
+
+  if (response.success === undefined) {
+    loginError.value = response.error
+    return
+  }
+  gameStore.setToken(response.token)
+  gameStore.initConnection()
+  return true // Indicate success
+}
+
+async function registerFunc() {
+  // check if username and password are valid
+  if (username.value === '' || email.value === '' || password.value === '') {
+    loginError.value = 'Please enter a valid username, email, and password'
+    return
+  }
+
+  if (email.value === '') {
+    loginError.value = 'Please enter an email'
+    return
+  }
+
+  // send register event to server
+  const response = await register(username.value, email.value, password.value)
+
+  if (response.success === undefined) {
+    loginError.value = response.error
+    return
+  }
+
+  const loginSuccess = await loginFunc()
+  if (!loginSuccess) {
+    loginError.value = 'Login after registration failed. Please try logging in manually.'
+    return
+  }
+}
+</script>

src/components/login/ResetPasswordModal.vue

@@ -0,0 +1,71 @@
+<template>
+  <Modal :isModalOpen="true" :modal-width="400" :modal-height="300" :is-resizable="false" @modal:close="() => emit('close')">
+    <template #modalHeader>
+      <h3 class="m-0 font-medium shrink-0 text-white">Reset Password</h3>
+    </template>
+
+    <template #modalBody>
+      <div class="h-[calc(100%_-_32px)] p-4">
+        <form class="h-full flex flex-col justify-between" @submit.prevent="resetPasswordFunc">
+          <div class="flex flex-col relative">
+            <p>Fill in your email to receive a password reset request.</p>
+            <input type="email" name="email" class="input-field" v-model="email" placeholder="E-mail" />
+            <span v-if="resetPasswordError" class="text-red-200 text-xs absolute top-full mt-1">{{ resetPasswordError }}</span>
+          </div>
+          <div class="grid grid-flow-col justify-stretch gap-4">
+            <button class="btn-empty py-1.5 px-4 min-w-24 inline-block" @click.stop="() => emit('close')">Cancel</button>
+            <button class="btn-cyan py-1.5 px-4 min-w-24 inline-flex items-center justify-center" type="submit">
+              <svg v-if="isLoading" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 animate-spin mr-2" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              Send mail
+            </button>
+          </div>
+        </form>
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { resetPassword } from '@/services/authentication'
+import Modal from '@/components/utilities/Modal.vue'
+import { useGameStore } from '@/stores/gameStore'
+
+const emit = defineEmits(['close'])
+
+const gameStore = useGameStore()
+const isLoading = ref(false)
+const email = ref('')
+const resetPasswordError = ref('')
+
+async function resetPasswordFunc() {
+  // check if email is valid
+  if (email.value === '') {
+    resetPasswordError.value = 'Please enter an email'
+    return
+  }
+
+  isLoading.value = true
+
+  // send reset password event to server
+  const response = await resetPassword(email.value)
+
+  if (response.success === undefined) {
+    resetPasswordError.value = response.error
+    isLoading.value = false
+    return
+  }
+
+  gameStore.addNotification({
+    title: 'Success',
+    message: 'Password reset email sent'
+  })
+
+  isLoading.value = false
+
+  emit('close')
+}
+</script>

src/components/screens/Characters.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="relative max-lg:h-dvh flex flex-row-reverse">
+    <div class="lg:bg-gradient-to-l bg-gradient-to-b from-gray-900 to-transparent w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 z-10"></div>
+    <div class="bg-[url('/assets/login/login-bg.png')] opacity-20 w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center grayscale"></div>
+    <div class="bg-gray-900 z-20 w-full lg:w-1/2 h-[65dvh] lg:h-dvh relative"></div>
+    <div class="absolute top-8 right-0 py-[18px] pr-[15px] pl-32 bg-gradient-to-r from-transparent to-cyan-900 z-20">
+      <h2 class="text-white">CHARACTER SELECTION</h2>
+    </div>
+    <div class="ui-wrapper h-dvh w-[calc(100%_-_80px)] sm:w-[calc(100%_-_160px)] absolute flex flex-col justify-center items-center gap-14 px-10 sm:px-20 z-30">
+      <div class="filler"></div>
+      <div class="w-2/3 max-w-[860px]" v-if="!isLoading">
+        <div class="mb-5 flex flex-col gap-1">
+          <h1 class="text-white font-bold">SELECT CHARACTER TO PLAY</h1>
+          <p class="m-0">Maximum of 4 characters can be selected per player</p>
+        </div>
+        <div class="flex w-full h-[400px] border border-solid border-gray-500 rounded-md rounded-tl-none bg-gray">
+          <div class="w-1/3 h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center border-0 border-r border-solid border-gray-500 rounded-bl-md relative">
+            <div class="absolute right-full -top-px flex gap-1 flex-col">
+              <div v-for="character in characters" :key="character.id" class="character relative rounded-l border border-solid border-gray-500 w-9 h-[50px] bg-[url('/assets/ui-texture.png')]" :class="{ 'active': selected_character == character.id }">
+                <img src="/assets/avatar/default/head.png" class="w-9 h-9 object-contain absolute top-1/2 -translate-y-1/2" alt="Player head" />
+                <input class="opacity-0 h-full w-full absolute m-0 z-10 hover:cursor-pointer" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
+              </div>
+              <div class="character relative rounded-l border border-solid border-gray-500 w-9 h-[50px] bg-[url('/assets/ui-texture.png')]" :class="{'active': characters.length == 0}" v-if="characters.length < 4">
+                <button class="p-0 h-full w-full flex flex-col justify-between" @click="isModalOpen = true">
+                  <img class="w-6 h-6 object-contain absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2" draggable="false" src="/assets/icons/plus-icon.svg" />
+                </button>
+              </div>
+            </div>
+            <div class="py-6 px-8 h-[calc(100%_-_48px)] flex flex-col items-center gap-6" v-if="selected_character">
+              <input class="input-field w-[158px]" type="text" name="name" :placeholder="characters.find(c => c.id == selected_character)?.name" />
+              <div class="flex flex-col gap-4 items-center">
+                <div class="flex flex-col gap-3">
+                  <div class="bg-[url('/assets/ui-elements/ui-border-2-corners-bottom.svg')] w-[190px] h-52 bg-no-repeat bg-center flex items-center justify-center">
+                    <img class="w-12 object-contain mb-3.5" src="/assets/avatar/default/0.png" alt="Player avatar"/>
+                  </div>
+                  <div class="flex justify-between w-[190px]">
+                    <!-- TODO: replace with color swatches -->
+                    <div v-for="n in 9" class="w-4 h-4 rounded-sm bg-white"></div>
+                  </div>
+                </div>
+                <div class="flex justify-between w-[190px]">
+                  <button class="btn-empty flex gap-2">
+                    <img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
+                    <span class="text-white">Male</span>
+                  </button>
+                  <button class="btn-empty flex gap-2">
+                    <img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
+                    <span class="text-white">Female</span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="w-2/3 h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center rounded-r-md"></div>
+        </div>
+      </div>
+      <div v-else>
+        <img class="w-20 invert-80" src="/assets/icons/loading-icon1.svg" />
+      </div>
+
+      <div class="button-wrapper flex self-center justify-end gap-4 max-w-[860px] w-full" v-if="!isLoading">
+        <button
+          class="btn-empty min-w-48"
+          @click.stop="gameStore.disconnectSocket()"
+        >
+          Back
+        </button>
+        <button
+          class="btn-cyan min-w-48 disabled:bg-cyan-800 disabled:cursor-not-allowed"
+          :disabled="!selected_character"
+          @click="select_character()"
+        >
+          Play now
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- CREATE CHARACTER MODAL -->
+  <Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false" :modal-width="430" :modal-height="275">
+    <template #modalHeader>
+      <h3 class="m-0 font-medium text-white">Create your character</h3>
+    </template>
+
+    <template #modalBody>
+      <div class="p-4 h-[calc(100%_-_32px)]">
+        <form method="post" @submit.prevent="create" class="h-full flex flex-col justify-between">
+          <div class="form-field-full">
+            <label for="name" class="text-white">Nickname</label>
+            <input class="input-field" v-model="name" name="name" id="name" placeholder="Enter a nickname.." />
+          </div>
+          <div class="grid grid-flow-col justify-stretch gap-4">
+            <button type="button" class="btn-empty py-1.5 px-4 inline-block" @click.prevent="isModalOpen = false">Cancel</button>
+            <button class="btn-cyan py-1.5 px-4 inline-block" type="submit">Create</button>
+          </div>
+        </form>
+      </div>
+    </template>
+  </Modal>
+
+  <!-- DELETE CHARACTER MODAL -->
+  <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 text-white">Delete character?</h3>
+    </template>
+    <template #modalBody>
+      <p class="mt-0 mb-5 text-white text-lg">
+        Do you want to permanently delete <span class="font-extrabold text-white">{{ deletingCharacter.name }}</span
+        >?
+      </p>
+    </template>
+  </ConfirmationModal>
+</template>
+
+<script setup lang="ts">
+import { useGameStore } from '@/stores/gameStore'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import Modal from '@/components/utilities/Modal.vue'
+import { type Character as CharacterT } from '@/types'
+import ConfirmationModal from '@/components/utilities/ConfirmationModal.vue'
+
+const gameStore = useGameStore()
+const isLoading = ref(true)
+const characters = ref([] as CharacterT[])
+const deletingCharacter = ref(null as CharacterT | null)
+
+// Fetch characters
+gameStore.connection?.on('character:list', (data: any) => {
+  characters.value = data
+})
+
+onMounted(async () => {
+  // wait 0.75 sec
+  setTimeout(() => {
+    gameStore.connection?.emit('character:list')
+    isLoading.value = false
+  }, 750)
+})
+
+// Select character logics
+const selected_character = ref(null)
+function select_character() {
+  if (!selected_character.value) return
+  deletingCharacter.value = null
+  gameStore.connection?.emit('character:connect', { character_id: selected_character.value })
+  gameStore.connection?.on('character:connect', (data: CharacterT) => gameStore.setCharacter(data))
+}
+
+// Delete character logics
+function delete_character(character_id: number) {
+  if (!character_id) return
+  deletingCharacter.value = null
+  gameStore.connection?.emit('character:delete', { character_id: character_id })
+}
+
+// Create character logics
+const isModalOpen = ref(false)
+const name = ref('')
+function create() {
+  gameStore.connection?.on('character:create:success', (data: CharacterT) => {
+    gameStore.setCharacter(data)
+    isModalOpen.value = false
+  })
+  gameStore.connection?.emit('character:create', { name: name.value })
+}
+
+onBeforeUnmount(() => {
+  gameStore.connection?.off('character:list')
+  gameStore.connection?.off('character:connect')
+  gameStore.connection?.off('character:create:success')
+})
+</script>

src/components/screens/Game.vue

@@ -5,7 +5,7 @@
         <Menu />
         <Hud />
         <Hotkeys />
-        <Minimap />
+        <Clock />
         <Zone />
         <Chat />
         <ExpBar />
@@ -30,12 +30,11 @@ import Hotkeys from '@/components/gui/Hotkeys.vue'
 import Chat from '@/components/gui/Chat.vue'
 import CharacterProfile from '@/components/gui/CharacterProfile.vue'
 import Effects from '@/components/Effects.vue'
-import Minimap from '@/components/gui/Minimap.vue'
+// import Minimap from '@/components/gui/Minimap.vue'
+import Clock from '@/components/gui/Clock.vue'
 import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin'
-import { useAssetManager } from '@/utilities/assetManager'
 
 const gameStore = useGameStore()
-const assetManager = useAssetManager
 
 const gameConfig = {
   name: config.name,
@@ -78,41 +77,7 @@ function preloadScene(scene: Phaser.Scene) {
    */
   scene.load.image('blank_tile', '/assets/zone/blank_tile.png')
   scene.load.image('waypoint', '/assets/waypoint.png')
-
-  scene.load.rexAwait(async function (successCallback) {
-    await assetManager.getAssetsByGroup('tiles').then((assets) => {
-      assets.forEach((asset) => {
-        if (scene.load.textureManager.exists(asset.key)) return
-        scene.textures.addBase64(asset.key, asset.data)
-      })
-    })
-
-    // Load objects
-    await assetManager.getAssetsByGroup('objects').then((assets) => {
-      assets.forEach((asset) => {
-        if (scene.load.textureManager.exists(asset.key)) return
-        scene.textures.addBase64(asset.key, asset.data)
-      })
-    })
-
-    successCallback()
-  })
 }
 
-function createScene(scene: Phaser.Scene) {
-  /**
-   * Create sprite animations
-   * This is done here because phaser forces us to
-   */
-  assetManager.getAssetsByGroup('sprite_animations').then((assets) => {
-    assets.forEach((asset) => {
-      scene.anims.create({
-        key: asset.key,
-        frameRate: 7,
-        frames: scene.anims.generateFrameNumbers(asset.key, { start: 0, end: asset.frameCount! - 1 }),
-        repeat: -1
-      })
-    })
-  })
-}
+function createScene(scene: Phaser.Scene) {}
 </script>

src/components/screens/Loading.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="flex flex-col justify-center items-center h-dvh relative">
+    <button @click="continueBtnClick" class="w-32 h-12 rounded-full bg-gray-500 flex items-center justify-between px-4 hover:bg-gray-600 transition-colors">
+      <span class="text-white text-lg flex-1 text-center">Play</span>
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts" async>
+import { useGameStore } from '@/stores/gameStore'
+
+const gameStore = useGameStore()
+
+function continueBtnClick() {
+  // Play music
+  const audio = new Audio('/assets/music/login.mp3')
+  audio.play()
+
+  // Set isLoaded to true
+  gameStore.game.isLoaded = true
+}
+</script>

src/components/screens/Login.vue

@@ -0,0 +1,51 @@
+<template>
+  <!-- @TODO this must be shown over the login screen -->
+  <div class="relative max-lg:h-dvh flex flex-row-reverse">
+    <ResetPassword :isModalOpen="isPasswordResetFormShown" @close="() => (isPasswordResetFormShown = false)" />
+    <div class="lg:bg-gradient-to-l bg-gradient-to-b from-gray-900 to-transparent w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 z-10"></div>
+    <div class="bg-[url('/assets/login/login-bg.png')] w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center"></div>
+    <div class="bg-gray-900 z-20 w-full lg:w-1/2 h-[65dvh] lg:h-dvh relative">
+      <div class="h-dvh flex items-center lg:justify-center flex-col px-8 max-lg:pt-20">
+        <img src="/assets/login/sq-logo-v1.svg" class="mb-10" alt="Sylvan Quest logo" />
+        <div class="relative">
+          <img src="/assets/ui-elements/ui-box-outer.svg" class="absolute w-full h-full" alt="UI box outer" />
+          <img src="/assets/ui-elements/ui-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)] max-lg:hidden" alt="UI box inner" />
+
+          <!-- Login Form -->
+          <LoginForm v-if="currentForm === 'login' && !doesUrlHaveToken" @openResetPasswordModal="() => (isPasswordResetFormShown = true)" @switchToRegister="currentForm = 'register'" />
+
+          <!-- Register Form -->
+          <RegisterForm v-if="currentForm === 'register' && !doesUrlHaveToken" @switchToLogin="currentForm = 'login'" />
+
+          <!-- New Password Form -->
+          <NewPasswordForm v-if="doesUrlHaveToken" @switchToLogin="currentForm = 'login'" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useGameStore } from '@/stores/gameStore'
+import { useCookies } from '@vueuse/integrations/useCookies'
+import LoginForm from '@/components/login/LoginForm.vue'
+import RegisterForm from '@/components/login/RegisterForm.vue'
+import NewPasswordForm from '@/components/login/NewPasswordForm.vue'
+import ResetPassword from '@/components/login/ResetPasswordModal.vue'
+
+const isPasswordResetFormShown = ref(false)
+const doesUrlHaveToken = window.location.hash.includes('#')
+
+const gameStore = useGameStore()
+const currentForm = ref('login')
+
+// automatic login because of development
+onMounted(async () => {
+  const token = useCookies().get('token')
+  if (token) {
+    gameStore.setToken(token)
+    gameStore.initConnection()
+  }
+})
+</script>

src/components/screens/ZoneEditor.vue

@@ -2,7 +2,7 @@
   <div class="flex justify-center items-center h-dvh relative">
     <Game :config="gameConfig" @create="createGame">
       <Scene name="main" @preload="preloadScene" @create="createScene">
-        <ZoneEditor v-if="isLoaded" :key="JSON.stringify(`${zoneEditorStore.zone?.id}_${zoneEditorStore.zone?.createdAt}_${zoneEditorStore.zone?.updatedAt}`)" />
+        <ZoneEditor :key="JSON.stringify(`${zoneEditorStore.zone?.id}_${zoneEditorStore.zone?.createdAt}_${zoneEditorStore.zone?.updatedAt}`)" />
       </Scene>
     </Game>
   </div>
@@ -11,22 +11,32 @@
 <script setup lang="ts">
 import config from '@/config'
 import 'phaser'
-import { ref, onBeforeUnmount } from 'vue'
 import { Game, Scene } from 'phavuer'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import ZoneEditor from '@/components/gameMaster/zoneEditor/ZoneEditor.vue'
+import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin'
+import { loadTexture } from '@/composables/gameComposable'
+import type { AssetDataT } from '@/types'
 
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
-const isLoaded = ref(false)
 
 const gameConfig = {
   name: config.name,
   width: window.innerWidth,
   height: window.innerHeight,
   type: Phaser.AUTO, // AUTO, CANVAS, WEBGL, HEADLESS
-  resolution: 5
+  resolution: 5,
+  plugins: {
+    global: [
+      {
+        key: 'rexAwaitLoader',
+        plugin: AwaitLoaderPlugin,
+        start: true
+      }
+    ]
+  }
 }
 
 const createGame = (game: Phaser.Game) => {
@@ -48,43 +58,6 @@ const createGame = (game: Phaser.Game) => {
 }
 
 const preloadScene = async (scene: Phaser.Scene) => {
-  isLoaded.value = false
-
-  /**
-   * Create loading bar
-   */
-  const width = scene.cameras.main.width
-  const height = scene.cameras.main.height
-
-  const progressBox = scene.add.graphics()
-  const progressBar = scene.add.graphics()
-  progressBox.fillStyle(0x222222, 0.8)
-  progressBox.fillRect(width / 2 - 180, height / 2, 320, 50)
-
-  const loadingText = scene.make.text({
-    x: width / 2,
-    y: height / 2 - 50,
-    text: 'Loading...',
-    style: {
-      font: '20px monospace',
-      fill: '#ffffff'
-    }
-  })
-  loadingText.setOrigin(0.5, 0.5)
-
-  scene.load.on(Phaser.Loader.Events.PROGRESS, function (value: any) {
-    progressBar.clear()
-    progressBar.fillStyle(0x368f8b, 1)
-    progressBar.fillRect(width / 2 - 180 + 10, height / 2 + 10, 300 * value, 30)
-  })
-
-  scene.load.on(Phaser.Loader.Events.COMPLETE, function () {
-    progressBar.destroy()
-    progressBox.destroy()
-    loadingText.destroy()
-    isLoaded.value = true
-  })
-
   /**
    * Load the base assets into the Phaser scene
    */
@@ -92,26 +65,21 @@ const preloadScene = async (scene: Phaser.Scene) => {
   scene.load.image('TELEPORT', '/assets/zone/tp_tile.png')
   scene.load.image('blank_tile', '/assets/zone/blank_tile.png')
   scene.load.image('waypoint', '/assets/waypoint.png')
-}
 
-const createScene = async (scene: Phaser.Scene) => {
   /**
-   * Create sprite animations
-   * This is done here because phaser forces us to
+   * Because Phaser can't load tiles after the scene with map in it is created,
+   * we need to load and cache all the tiles first.
+   * Then load them into the scene.
    */
-  gameStore.assets.forEach((asset) => {
-    if (asset.group !== 'sprite_animations') return
+  scene.load.rexAwait(async function (successCallback: any) {
+    const tiles: AssetDataT[] = await fetch(config.server_endpoint + '/assets/list_tiles').then((response) => response.json())
+    for await (const tile of tiles) {
+      await loadTexture(scene, tile)
+    }
 
-    scene.anims.create({
-      key: asset.key,
-      frameRate: 7,
-      frames: scene.anims.generateFrameNumbers(asset.key, { start: 0, end: asset.frameCount! - 1 }),
-      repeat: -1
-    })
+    successCallback()
   })
 }
 
-onBeforeUnmount(() => {
-  isLoaded.value = false
-})
+const createScene = async (scene: Phaser.Scene) => {}
 </script>

src/components/sprites/Character.vue

@@ -18,12 +18,13 @@
 
 <script lang="ts" setup>
 import config from '@/config'
-import { type ExtendedCharacter } from '@/types'
+import { type ExtendedCharacter, type Sprite as SpriteT } from '@/types'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneStore } from '@/stores/zoneStore'
 import { watch, computed, ref, onMounted, onUnmounted } from 'vue'
 import { Container, refObj, RoundRectangle, Sprite, Text, useGame, useScene } from 'phavuer'
 import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
+import { loadSpriteTextures } from '@/composables/gameComposable'
 
 enum Direction {
   POSITIVE,
@@ -181,6 +182,15 @@ watch(
 watch(() => props.character.isMoving, updateSprite)
 watch(() => props.character.rotation, updateSprite)
 
+loadSpriteTextures(scene, props.character.characterType?.sprite as SpriteT)
+  .then(() => {
+    charSprite.value!.setTexture(charTexture.value)
+    charSprite.value!.setFlipX(isFlippedX.value)
+  })
+  .catch((error) => {
+    console.error('Error loading texture:', error)
+  })
+
 onMounted(() => {
   charChatContainer.value!.setName(`${props.character!.name}_chatContainer`)
   charChatContainer.value!.setVisible(false)
@@ -194,10 +204,6 @@ onMounted(() => {
     scene.cameras.main.stopFollow()
   }
 
-  // Set sprite
-  charSprite.value!.setTexture(charTexture.value)
-  charSprite.value!.setFlipX(isFlippedX.value)
-
   updatePosition(props.character.positionX, props.character.positionY, props.character.rotation)
 })
 

src/components/utilities/BackgroundImageLoader.vue

@@ -0,0 +1,23 @@
+<template>
+  <div style="display: none">
+    <img v-for="(url, index) in imageUrls" :key="index" :src="url" alt="" @load="handleImageLoad(index)" @error="handleImageError(index)" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// Internal array of images to preload
+const imageUrls = ref<string[]>(['/assets/ui-elements/ui-border-4-corners.svg', '/assets/ui-elements/ui-border-4-corners-light.svg', '/assets/ui-elements/ui-border-4-corners-small.svg'])
+
+const loadedImages = ref<Set<number>>(new Set())
+
+const handleImageLoad = (index: number) => {
+  loadedImages.value.add(index)
+  console.log(`Image ${index} loaded:`, imageUrls.value[index])
+}
+
+const handleImageError = (index: number) => {
+  console.log(`Image ${index} failed to load:`, imageUrls.value[index])
+}
+</script>

src/components/utilities/Modal.vue

@@ -1,22 +1,25 @@
 <template>
   <Teleport to="body">
     <div v-if="isModalOpenRef" class="fixed border-solid border-2 border-gray-500 z-50 flex flex-col backdrop-blur-sm shadow-lg" :style="modalStyle">
+      <!-- Header -->
       <div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-gray-500 relative">
-        <div class="rounded-t-md absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-center bg-cover opacity-90"></div>
+        <div class="rounded-t absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-center bg-cover opacity-90" />
         <div class="relative z-10">
           <slot name="modalHeader" />
         </div>
         <div class="flex gap-2.5">
-          <button @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out" v-if="canFullScreen">
-            <img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" draggable="false" :src="isFullScreen ? '/assets/icons/minimize.svg' : '/assets/icons/increase-size-option.svg'" class="w-3.5 h-3.5 invert" />
+          <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/minimize.svg' : '/assets/icons/increase-size-option.svg'" class="w-3.5 h-3.5 invert" draggable="false" />
           </button>
-          <button @click="close" v-if="closable" 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" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
+          <button v-if="closable" @click="emit('modal:close')" 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/close-button-white.svg" class="w-full h-full" draggable="false" />
           </button>
         </div>
       </div>
+
+      <!-- Body -->
       <div class="overflow-hidden grow relative">
-        <div class="rounded-b-md absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center opacity-90"></div>
+        <div class="rounded-b absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center opacity-90" />
         <div class="relative z-10 h-full">
           <slot name="modalBody" />
         </div>
@@ -27,219 +30,187 @@
 </template>
 
 <script setup lang="ts">
-import { defineEmits, onMounted, onUnmounted, ref, watch, computed } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
-const props = defineProps({
-  isModalOpen: {
-    type: Boolean,
-    default: false
-  },
-  closable: {
-    type: Boolean,
-    default: true
-  },
-  isResizable: {
-    type: Boolean,
-    default: true
-  },
-  canFullScreen: {
-    type: Boolean,
-    default: false
-  },
-  modalPositionX: {
-    type: Number,
-    default: 0
-  },
-  modalPositionY: {
-    type: Number,
-    default: 0
-  },
-  modalWidth: {
-    type: Number,
-    default: 500
-  },
-  modalHeight: {
-    type: Number,
-    default: 280
-  }
+interface ModalProps {
+  isModalOpen: boolean
+  closable?: boolean
+  isResizable?: boolean
+  canFullScreen?: boolean
+  modalPositionX?: number
+  modalPositionY?: number
+  modalWidth?: number
+  modalHeight?: number
+}
+
+interface Position {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+const props = withDefaults(defineProps<ModalProps>(), {
+  isModalOpen: false,
+  closable: true,
+  isResizable: true,
+  canFullScreen: false,
+  modalPositionX: 0,
+  modalPositionY: 0,
+  modalWidth: 500,
+  modalHeight: 280
 })
 
-const isModalOpenRef = ref(props.isModalOpen)
-const emit = defineEmits(['modal:close', 'character:create'])
+const emit = defineEmits<{
+  'modal:close': []
+  'character:create': []
+}>()
 
+const isModalOpenRef = ref(props.isModalOpen)
 const width = ref(props.modalWidth)
 const height = ref(props.modalHeight)
 const x = ref(0)
 const y = ref(0)
-
-const minWidth = ref(200)
-const minHeight = ref(100)
 const isResizing = ref(false)
 const isDragging = ref(false)
 const isFullScreen = ref(false)
 
-let startX = 0
-let startY = 0
-let initialX = 0
-let initialY = 0
-let startWidth = 0
-let startHeight = 0
-let preFullScreenState = { x: 0, y: 0, width: 0, height: 0 }
+const minDimensions = {
+  width: 200,
+  height: 100
+}
+
+let dragState = {
+  startX: 0,
+  startY: 0,
+  initialX: 0,
+  initialY: 0,
+  startWidth: 0,
+  startHeight: 0
+}
+
+let preFullScreenState: Position = { x: 0, y: 0, width: 0, height: 0 }
 
 const modalStyle = computed(() => ({
   borderRadius: isFullScreen.value ? '0' : '6px',
   top: isFullScreen.value ? '0' : `${y.value}px`,
   left: isFullScreen.value ? '0' : `${x.value}px`,
   width: isFullScreen.value ? '100vw' : `${width.value}px`,
-  height: isFullScreen.value ? '100vh' : `${height.value}px`,
-  maxWidth: '100vw',
-  maxHeight: '100vh'
+  height: isFullScreen.value ? '100vh' : `${height.value}px`
 }))
 
-function close() {
-  emit('modal:close')
-}
-
 function startResize(event: MouseEvent) {
   if (isFullScreen.value) return
   isResizing.value = true
-  startWidth = width.value - event.clientX
-  startHeight = height.value - event.clientY
+  dragState.startWidth = width.value - event.clientX
+  dragState.startHeight = height.value - event.clientY
   event.preventDefault()
 }
 
 function resizeModal(event: MouseEvent) {
   if (!isResizing.value || isFullScreen.value) return
-  const newWidth = Math.min(startWidth + event.clientX, window.innerWidth)
-  const newHeight = Math.min(startHeight + event.clientY, window.innerHeight)
-  width.value = Math.max(newWidth, minWidth.value)
-  height.value = Math.max(newHeight, minHeight.value)
-  adjustPosition()
-}
-
-function stopResize() {
-  isResizing.value = false
+  width.value = Math.max(dragState.startWidth + event.clientX, minDimensions.width)
+  height.value = Math.max(dragState.startHeight + event.clientY, minDimensions.height)
 }
 
 function startDrag(event: MouseEvent) {
   if (isFullScreen.value) return
   isDragging.value = true
-  startX = event.clientX
-  startY = event.clientY
-  initialX = x.value
-  initialY = y.value
+  dragState = {
+    startX: event.clientX,
+    startY: event.clientY,
+    initialX: x.value,
+    initialY: y.value,
+    startWidth: width.value,
+    startHeight: height.value
+  }
   event.preventDefault()
 }
 
 function drag(event: MouseEvent) {
   if (!isDragging.value || isFullScreen.value) return
-  const dx = event.clientX - startX
-  const dy = event.clientY - startY
-  x.value = initialX + dx
-  y.value = initialY + dy
-  adjustPosition()
-}
-
-function stopDrag() {
-  isDragging.value = false
-}
-
-function adjustPosition() {
-  if (isFullScreen.value) return
-  x.value = Math.max(0, Math.min(x.value, window.innerWidth - width.value))
-  y.value = Math.max(0, Math.min(y.value, window.innerHeight - height.value))
-}
-
-function handleResize() {
-  if (isFullScreen.value) return
-  width.value = Math.min(width.value, window.innerWidth)
-  height.value = Math.min(height.value, window.innerHeight)
-  adjustPosition()
-}
-
-function initializePosition() {
-  width.value = Math.min(props.modalWidth, window.innerWidth)
-  height.value = Math.min(props.modalHeight, window.innerHeight)
-  if (props.modalPositionX !== 0 && props.modalPositionY !== 0) {
-    x.value = props.modalPositionX
-    y.value = props.modalPositionY
-  } else {
-    x.value = (window.innerWidth - width.value) / 2
-    y.value = (window.innerHeight - height.value) / 2
-  }
+  x.value = dragState.initialX + (event.clientX - dragState.startX)
+  y.value = dragState.initialY + (event.clientY - dragState.startY)
 }
 
 function toggleFullScreen() {
   if (isFullScreen.value) {
-    // Exit full-screen
-    x.value = preFullScreenState.x
-    y.value = preFullScreenState.y
-    width.value = preFullScreenState.width
-    height.value = preFullScreenState.height
-    isFullScreen.value = false
+    Object.assign({ x, y, width, height }, preFullScreenState)
   } else {
-    // Enter full-screen
     preFullScreenState = { x: x.value, y: y.value, width: width.value, height: height.value }
-    isFullScreen.value = true
   }
+  isFullScreen.value = !isFullScreen.value
 }
 
+function initializePosition() {
+  width.value = props.modalWidth
+  height.value = props.modalHeight
+  x.value = props.modalPositionX || (window.innerWidth - width.value) / 2
+  y.value = props.modalPositionY || (window.innerHeight - height.value) / 2
+}
+
+// Watchers
 watch(
   () => props.isModalOpen,
   (value) => {
     isModalOpenRef.value = value
-    if (value) {
-      initializePosition()
-    }
+    if (value) initializePosition()
   }
 )
 
 watch(
   () => props.modalWidth,
-  (value) => {
-    width.value = Math.min(value, window.innerWidth)
-  }
+  (value) => (width.value = value)
 )
-
 watch(
   () => props.modalHeight,
-  (value) => {
-    height.value = Math.min(value, window.innerHeight)
-  }
+  (value) => (height.value = value)
 )
-
 watch(
   () => props.modalPositionX,
-  (value) => {
-    x.value = value
-  }
+  (value) => (x.value = value)
 )
-
 watch(
   () => props.modalPositionY,
-  (value) => {
-    y.value = value
-  }
+  (value) => (y.value = value)
 )
 
+// Lifecycle hooks
 onMounted(() => {
-  window.addEventListener('mousemove', drag)
-  window.addEventListener('mouseup', stopDrag)
-  window.addEventListener('mousemove', resizeModal)
-  window.addEventListener('mouseup', stopResize)
-  if (props.modalPositionX !== 0 && props.modalPositionY !== 0) {
-    window.addEventListener('resize', handleResize)
+  const handlers: Record<string, EventListener[]> = {
+    mousemove: [(e: Event) => drag(e as MouseEvent), (e: Event) => resizeModal(e as MouseEvent)],
+    mouseup: [
+      () => {
+        isDragging.value = false
+      },
+      () => {
+        isResizing.value = false
+      }
+    ]
   }
+
+  Object.entries(handlers).forEach(([event, fns]) => {
+    fns.forEach((fn) => window.addEventListener(event, fn))
+  })
+
   initializePosition()
 })
 
 onUnmounted(() => {
-  window.removeEventListener('mousemove', drag)
-  window.removeEventListener('mouseup', stopDrag)
-  window.removeEventListener('mousemove', resizeModal)
-  window.removeEventListener('mouseup', stopResize)
-  if (props.modalPositionX !== 0 && props.modalPositionY !== 0) {
-    window.removeEventListener('resize', handleResize)
+  const handlers: Record<string, EventListener[]> = {
+    mousemove: [(e: Event) => drag(e as MouseEvent), (e: Event) => resizeModal(e as MouseEvent)],
+    mouseup: [
+      () => {
+        isDragging.value = false
+      },
+      () => {
+        isResizing.value = false
+      }
+    ]
   }
+
+  Object.entries(handlers).forEach(([event, fns]) => {
+    fns.forEach((fn) => window.removeEventListener(event, fn))
+  })
 })
 </script>

src/components/utilities/Notifications.vue

@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { useGameStore } from '@/stores/gameStore'
 import Modal from '@/components/utilities/Modal.vue'
-import { onBeforeMount, onBeforeUnmount, watch } from 'vue'
+import { onBeforeMount, onBeforeUnmount, onMounted, onUnmounted, watch } from 'vue'
 
 const gameStore = useGameStore()
 
@@ -34,7 +34,7 @@ function setupNotificationListener(connection: any) {
   })
 }
 
-onBeforeMount(() => {
+onMounted(() => {
   const connection = gameStore.connection
   if (connection) {
     setupNotificationListener(connection)
@@ -49,7 +49,7 @@ onBeforeMount(() => {
   }
 })
 
-onBeforeUnmount(() => {
+onUnmounted(() => {
   const connection = gameStore.connection
   if (connection) {
     connection.off('notification')

src/components/zone/Zone.vue

@@ -1,18 +1,21 @@
 <template>
-  <ZoneTiles :key="zoneStore.zone?.id ?? 0" @tilemap:create="tileMap = $event" />
+  <ZoneTiles :key="zoneStore.zone?.id ?? 0" @tileMap:create="tileMap = $event" />
   <ZoneObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
   <Characters v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
 </template>
 
 <script setup lang="ts">
+import { ref, onUnmounted } from 'vue'
+import { useScene } from 'phavuer'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneStore } from '@/stores/zoneStore'
-import { onBeforeUnmount, ref, onBeforeMount } from 'vue'
+import { loadZoneTilesIntoScene } from '@/composables/zoneComposable'
 import type { Character as CharacterT, Zone as ZoneT, ExtendedCharacter as ExtendedCharacterT } from '@/types'
 import ZoneTiles from '@/components/zone/ZoneTiles.vue'
 import ZoneObjects from '@/components/zone/ZoneObjects.vue'
 import Characters from '@/components/zone/Characters.vue'
 
+const scene = useScene()
 const gameStore = useGameStore()
 const zoneStore = useZoneStore()
 
@@ -33,6 +36,7 @@ gameStore.connection!.on('zone:character:teleport', async (data: zoneLoadData) =
     zoneId: data.zone.id
   })
 
+  await loadZoneTilesIntoScene(data.zone, scene)
   zoneStore.setZone(data.zone)
   zoneStore.setCharacters(data.characters)
 })
@@ -51,15 +55,14 @@ gameStore.connection!.on('character:move', (data: ExtendedCharacterT) => {
   zoneStore.updateCharacter(data)
 })
 
-onBeforeMount(async () => {
-  gameStore!.connection!.emit('zone:character:join', async (response: zoneLoadData) => {
-    // Set zone and characters
-    zoneStore.setZone(response.zone)
-    zoneStore.setCharacters(response.characters)
-  })
+// Emit zone:character:join event to server and wait for response, then set zone and characters
+gameStore!.connection!.emit('zone:character:join', async (response: zoneLoadData) => {
+  await loadZoneTilesIntoScene(response.zone, scene)
+  zoneStore.setZone(response.zone)
+  zoneStore.setCharacters(response.characters)
 })
 
-onBeforeUnmount(() => {
+onUnmounted(() => {
   zoneStore.reset()
   gameStore.connection!.off('zone:character:teleport')
   gameStore.connection!.off('zone:character:join')

src/components/zone/ZoneTiles.vue

@@ -1,23 +1,29 @@
 <template>
-  <Controls :layer="tiles" :depth="0" />
+  <Controls :layer="tileLayer" :depth="0" />
 </template>
 
 <script setup lang="ts">
 import config from '@/config'
 import { useScene } from 'phavuer'
 import { useZoneStore } from '@/stores/zoneStore'
-import { onBeforeMount, onBeforeUnmount } from 'vue'
-import { setLayerTiles } from '@/composables/zoneComposable'
+import { onBeforeUnmount } from 'vue'
+import { FlattenZoneArray, setLayerTiles } from '@/composables/zoneComposable'
 import Controls from '@/components/utilities/Controls.vue'
+import { unduplicateArray } from '@/utilities'
 
-const emit = defineEmits(['tilemap:create'])
+const emit = defineEmits(['tileMap:create'])
 
-const zoneStore = useZoneStore()
 const scene = useScene()
-const zoneTilemap = createTilemap()
-const tiles = createTileLayer()
+const zoneStore = useZoneStore()
+const tileMap = createTileMap()
+const tileLayer = createTileLayer()
 
-function createTilemap() {
+/**
+ * A Tilemap is a container for Tilemap data.
+ * This isn't a display object, rather, it holds data about the map and allows you to add tilesets and tilemap layers to it.
+ * A map can have one or more tilemap layers, which are the display objects that actually render the tiles.
+ */
+function createTileMap() {
   const zoneData = new Phaser.Tilemaps.MapData({
     width: zoneStore.zone?.width,
     height: zoneStore.zone?.height,
@@ -26,22 +32,26 @@ function createTilemap() {
     orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
     format: Phaser.Tilemaps.Formats.ARRAY_2D
   })
-  const tilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
-  emit('tilemap:create', tilemap)
-  return tilemap
+
+  const newTileMap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
+  emit('tileMap:create', newTileMap)
+
+  return newTileMap
 }
 
+/**
+ * A Tileset is a combination of a single image containing the tiles and a container for data about each tile.
+ */
 function createTileLayer() {
-  const tilesFromZone = zoneStore.zone?.tiles || []
-  const uniqueTiles = new Set(tilesFromZone.flat().filter(Boolean))
+  const tilesArray = unduplicateArray(FlattenZoneArray(zoneStore.zone?.tiles ?? []))
 
-  const tilesetImages = Array.from(uniqueTiles).map((tile, index) => {
-    return zoneTilemap.addTilesetImage(tile, tile, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
+  const tilesetImages = Array.from(tilesArray).map((tile: any, index: number) => {
+    return tileMap.addTilesetImage(tile, tile, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
   }) as any
 
   // Add blank tile
-  tilesetImages.push(zoneTilemap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))
-  const layer = zoneTilemap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
+  tilesetImages.push(tileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))
+  const layer = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
 
   layer.setDepth(0)
   layer.setCullPadding(2, 2)
@@ -49,16 +59,11 @@ function createTileLayer() {
   return layer
 }
 
-onBeforeMount(() => {
-  if (!zoneStore.zone?.tiles) {
-    return
-  }
-  setLayerTiles(zoneTilemap, tiles, zoneStore.zone.tiles)
-})
+setLayerTiles(tileMap, tileLayer, zoneStore.zone?.tiles)
 
 onBeforeUnmount(() => {
-  zoneTilemap.destroyLayer('tiles')
-  zoneTilemap.removeAllLayers()
-  zoneTilemap.destroy()
+  tileMap.destroyLayer('tiles')
+  tileMap.removeAllLayers()
+  tileMap.destroy()
 })
 </script>

src/components/zone/partials/ZoneObject.vue

@@ -1,22 +1,22 @@
 <template>
-  <Image v-if="isTextureLoaded" v-bind="imageProps" />
+  <Image v-if="gameStore.getLoadedAsset(props.zoneObject.object.id)" v-bind="imageProps" />
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { computed, onMounted } from 'vue'
 import { Image, useScene } from 'phavuer'
 import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
-import { useAssetManager } from '@/utilities/assetManager'
-import type { ZoneObject } from '@/types'
+import { loadTexture } from '@/composables/gameComposable'
+import type { AssetDataT, ZoneObject } from '@/types'
+import { useGameStore } from '@/stores/gameStore'
 
 const props = defineProps<{
   tilemap: Phaser.Tilemaps.Tilemap
   zoneObject: ZoneObject
 }>()
 
+const gameStore = useGameStore()
 const scene = useScene()
-const assetManager = useAssetManager
-const isTextureLoaded = ref(false)
 
 const imageProps = computed(() => ({
   depth: calculateIsometricDepth(props.zoneObject.positionX, props.zoneObject.positionY, props.zoneObject.object.frameWidth, props.zoneObject.object.frameHeight),
@@ -28,36 +28,14 @@ const imageProps = computed(() => ({
   originX: Number(props.zoneObject.object.originY)
 }))
 
-const loadTexture = async () => {
-  const textureId = props.zoneObject.object.id
-
-  // Check if the texture is already loaded in Phaser
-  if (scene.textures.exists(textureId)) {
-    isTextureLoaded.value = true
-    return
-  }
-
-  let assetData = await assetManager.getAsset(textureId)
-
-  if (!assetData) {
-    await assetManager.downloadAsset(textureId, `/assets/objects/${textureId}.png`, 'objects', props.zoneObject.object.updatedAt)
-    assetData = await assetManager.getAsset(textureId)
-  }
-
-  if (assetData) {
-    return new Promise<void>((resolve) => {
-      scene.textures.addBase64(textureId, assetData.data)
-      scene.textures.once(`addtexture-${textureId}`, () => {
-        isTextureLoaded.value = true
-        resolve()
-      })
-    })
-  }
-}
-
-onMounted(() => {
-  loadTexture().catch((error) => {
-    console.error('Error loading texture:', error)
-  })
+loadTexture(scene, {
+  key: props.zoneObject.object.id,
+  data: '/assets/objects/' + props.zoneObject.object.id + '.png',
+  group: 'objects',
+  updatedAt: props.zoneObject.object.updatedAt,
+  frameWidth: props.zoneObject.object.frameWidth,
+  frameHeight: props.zoneObject.object.frameHeight
+} as AssetDataT).catch((error) => {
+  console.error('Error loading texture:', error)
 })
 </script>

src/composables/game/scene/loaderComposable.ts

@@ -0,0 +1,34 @@
+export function createSceneLoader(scene: Phaser.Scene) {
+  const width = scene.cameras.main.width
+  const height = scene.cameras.main.height
+
+  const progressBox = scene.add.graphics()
+  const progressBar = scene.add.graphics()
+  progressBox.fillStyle(0x222222, 0.8)
+  progressBox.fillRect(width / 2 - 180, height / 2, 320, 50)
+
+  const loadingText = scene.make.text({
+    x: width / 2,
+    y: height / 2 - 50,
+    text: 'Loading...',
+    style: {
+      font: '20px monospace',
+      // @ts-ignore
+      fill: '#ffffff'
+    }
+  })
+  loadingText.setOrigin(0.5, 0.5)
+
+  scene.load.on(Phaser.Loader.Events.PROGRESS, function (value: any) {
+    progressBar.clear()
+    progressBar.fillStyle(0x368f8b, 1)
+    progressBar.fillRect(width / 2 - 180 + 10, height / 2 + 10, 300 * value, 30)
+  })
+
+  scene.load.on(Phaser.Loader.Events.COMPLETE, function () {
+    progressBar.destroy()
+    progressBox.destroy()
+    loadingText.destroy()
+    return true
+  })
+}

src/composables/gameComposable.ts

@@ -0,0 +1,86 @@
+import type { AssetDataT, Sprite } from '@/types'
+import { useGameStore } from '@/stores/gameStore'
+import { AssetStorage } from '@/storage/assetStorage'
+import config from '@/config'
+
+const textureLoadingPromises = new Map<string, Promise<boolean>>()
+
+export async function loadTexture(scene: Phaser.Scene, assetData: AssetDataT): Promise<boolean> {
+  const gameStore = useGameStore()
+  const assetStorage = new AssetStorage()
+
+  // Check if the texture is already loaded in Phaser
+  if (gameStore.game.loadedAssets.find((asset) => asset.key === assetData.key)) {
+    return Promise.resolve(true)
+  }
+
+  // If there's already a loading promise for this texture, return it
+  if (textureLoadingPromises.has(assetData.key)) {
+    return await textureLoadingPromises.get(assetData.key)!
+  }
+
+  // Create new loading promise
+  const loadingPromise = (async () => {
+    // Check if the asset is already cached
+    let asset = await assetStorage.get(assetData.key)
+
+    // If asset is not found, download it
+    if (!asset) {
+      await assetStorage.download(assetData)
+      asset = await assetStorage.get(assetData.key)
+    }
+
+    // If asset is found, add it to the scene
+    if (asset) {
+      return new Promise<boolean>((resolve) => {
+        // Remove existing texture if it exists
+        if (scene.textures.exists(asset.key)) {
+          scene.textures.remove(asset.key)
+        }
+
+        scene.textures.addBase64(asset.key, asset.data)
+        scene.textures.once(`addtexture-${asset.key}`, () => {
+          gameStore.game.loadedAssets.push(assetData)
+          textureLoadingPromises.delete(assetData.key) // Clean up the promise
+          resolve(true)
+        })
+      })
+    }
+
+    textureLoadingPromises.delete(assetData.key) // Clean up the promise
+    return Promise.resolve(false)
+  })()
+
+  // Store the loading promise
+  textureLoadingPromises.set(assetData.key, loadingPromise)
+  return loadingPromise
+}
+
+export async function loadSpriteTextures(scene: Phaser.Scene, sprite: Sprite) {
+  const sprite_actions = await fetch(config.server_endpoint + '/assets/list_sprite_actions/' + sprite?.id).then((response) => response.json())
+  for await (const sprite_action of sprite_actions) {
+    await loadTexture(scene, {
+      key: sprite_action.key,
+      data: sprite_action.data,
+      group: sprite_action.isAnimated ? 'sprite_animations' : 'sprites',
+      updatedAt: sprite_action.updatedAt,
+      frameCount: sprite_action.frameCount,
+      frameWidth: sprite_action.frameWidth,
+      frameHeight: sprite_action.frameHeight
+    } as AssetDataT)
+
+    // If the sprite is not animated, skip
+    if (!sprite_action.isAnimated) continue
+
+    // Add the animation to the scene
+    const anim = scene.textures.get(sprite_action.key)
+    scene.textures.addSpriteSheet(sprite_action.key, anim, { frameWidth: sprite_action.frameWidth ?? 0, frameHeight: sprite_action.frameHeight ?? 0 })
+    scene.anims.create({
+      key: sprite_action.key,
+      frameRate: 7,
+      frames: scene.anims.generateFrameNumbers(sprite_action.key, { start: 0, end: sprite_action.frameCount! - 1 }),
+      repeat: -1
+    })
+  }
+  return Promise.resolve(true)
+}

src/composables/pointerHandlers/useGamePointerHandlers.ts

@@ -31,7 +31,7 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
     const { worldX, worldY } = pointer
     updateWaypoint(worldX, worldY)
 
-    if (gameStore.isPlayerDraggingCamera) {
+    if (gameStore.game.isPlayerDraggingCamera) {
       const distance = Phaser.Math.Distance.Between(pointerStartPosition.value.x, pointerStartPosition.value.y, pointer.x, pointer.y)
 
       if (distance > dragThreshold) {

src/composables/pointerHandlers/useZoneEditorPointerHandlers.ts

@@ -26,7 +26,7 @@ export function useZoneEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.
   }
 
   function dragZone(pointer: Phaser.Input.Pointer) {
-    if (gameStore.isPlayerDraggingCamera) {
+    if (gameStore.game.isPlayerDraggingCamera) {
       const { x, y, prevPosition } = pointer
       const { scrollX, scrollY, zoom } = camera
       camera.setScroll(scrollX - (x - prevPosition.x) / zoom, scrollY - (y - prevPosition.y) / zoom)

src/composables/zoneComposable.ts

@@ -3,6 +3,8 @@ import Tilemap = Phaser.Tilemaps.Tilemap
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 import Tileset = Phaser.Tilemaps.Tileset
 import Tile = Phaser.Tilemaps.Tile
+import type { AssetDataT, Zone as ZoneT } from '@/types'
+import { loadTexture } from '@/composables/gameComposable'
 
 export function getTile(layer: TilemapLayer | Tilemap, x: number, y: number): Tile | undefined {
   const tile = layer.getTileAtWorldXY(x, y)
@@ -45,12 +47,15 @@ export function tileToWorldY(layer: TilemapLayer | Tilemap, pos_x: number, pos_y
 export function placeTile(zone: Tilemap, layer: TilemapLayer, x: number, y: number, tileName: string) {
   let tileImg = zone.getTileset(tileName) as Tileset
   if (!tileImg) {
+    console.log('tile not found:', tileName)
     tileImg = zone.getTileset('blank_tile') as Tileset
   }
   layer.putTileAt(tileImg.firstgid, x, y)
 }
 
 export function setLayerTiles(zone: Tilemap, layer: TilemapLayer, tiles: string[][]) {
+  if (!tiles) return
+
   tiles.forEach((row: string[], y: number) => {
     row.forEach((tile: string, x: number) => {
       placeTile(zone, layer, x, y, tile)
@@ -69,3 +74,23 @@ export const calculateIsometricDepth = (x: number, y: number, width: number = 0,
   }
   return baseDepth + (width + height) / (2 * config.tile_size.x)
 }
+
+export function FlattenZoneArray(tiles: string[][]) {
+  const normalArray = []
+
+  for (const row of tiles) {
+    normalArray.push(...row)
+  }
+
+  return normalArray
+}
+
+export async function loadZoneTilesIntoScene(zone: ZoneT, scene: Phaser.Scene) {
+  // Fetch the list of tiles from the server
+  const tileArray: AssetDataT[] = await fetch(config.server_endpoint + '/assets/list_tiles/' + zone.id).then((response) => response.json())
+
+  // Load each tile into the scene
+  for (const tile of tileArray) {
+    await loadTexture(scene, tile)
+  }
+}

src/screens/Characters.vue

@@ -1,156 +0,0 @@
-<template>
-  <div class="bg-gray-900 relative">
-    <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>
-      <div class="flex gap-14 w-full max-h-[650px] overflow-x-auto" v-if="!isLoading">
-        <!-- CHARACTER LIST -->
-        <div v-for="character in characters" :key="character.id" class="group first:ml-auto last:mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 relative shadow-character" :class="{ active: selected_character == character.id }">
-          <img src="/assets/ui-elements/ui-box-outer.svg" class="absolute w-full h-full" />
-          <img src="/assets/ui-elements/ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)]" />
-          <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-4 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-300"
-            @click="
-              () => {
-                deletingCharacter = character
-              }
-            "
-          >
-            <img draggable="false" src="/assets/icons/trashcan.svg" />
-          </button>
-
-          <div class="sprite-container flex flex-col items-center m-auto">
-            <img class="drop-shadow-20" draggable="false" src="/assets/avatar/default/0.png" />
-          </div>
-          <span class="absolute bottom-6 w-full text-center translate-y-1/2 z-10">Lvl. {{ character.level }}</span>
-          <div class="selected-character group-[.active]:max-w-[170px] absolute max-w-0 w-4/6 h-[3px] bg-gray-500 rounded-[3px] left-1/2 -bottom-4 -translate-x-1/2 transition-all ease-in-out duration-300"></div>
-        </div>
-
-        <div class="character new-character first:ml-auto mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 rounded-2xl relative bg-gray-500/50 bg-no-repeat shadow-character" v-if="characters.length < 4">
-          <button class="h-full w-full py-10 flex flex-col justify-between" @click="isModalOpen = true">
-            <div class="filler"></div>
-            <img class="w-24 h-24 m-auto" draggable="false" src="/assets/icons/plus-icon.svg" />
-            <span class="self-center text-base absolute bottom-5 w-full text-center translate-y-1/2 z-10">Create new</span>
-          </button>
-        </div>
-      </div>
-      <div v-else>
-        <img class="w-20 invert-80" src="/assets/icons/loading-icon1.svg" />
-      </div>
-
-      <div class="button-wrapper flex gap-8" v-if="!isLoading">
-        <button
-          class="btn-red 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-red/50 disabled:hover:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]"
-          @click.stop="gameStore.disconnectSocket()"
-        >
-          <img class="h-8 drop-shadow-20 rotate-180" draggable="false" src="/assets/icons/arrow.svg" alt="Logout icon" />
-        </button>
-        <button
-          class="btn-cyan py-2 px-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-800 disabled:hover:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]"
-          :disabled="!selected_character"
-          @click="select_character()"
-        >
-          PLAY
-          <img class="h-8 drop-shadow-20" draggable="false" src="/assets/icons/arrow.svg" alt="Play icon" />
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <!-- CREATE CHARACTER MODAL -->
-  <Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false" :modal-width="430" :modal-height="275">
-    <template #modalHeader>
-      <h3 class="m-0 font-medium text-white">Create your character</h3>
-    </template>
-
-    <template #modalBody>
-      <div class="p-4 h-[calc(100%_-_32px)]">
-        <form method="post" @submit.prevent="create" class="h-full flex flex-col justify-between">
-          <div class="form-field-full">
-            <label for="name" class="text-white">Nickname</label>
-            <input class="input-field" v-model="name" name="name" id="name" placeholder="Enter a nickname.." />
-          </div>
-          <div class="grid grid-flow-col justify-stretch gap-4">
-            <button type="button" class="btn-empty py-1.5 px-4 inline-block" @click.prevent="isModalOpen = false">Cancel</button>
-            <button class="btn-cyan py-1.5 px-4 inline-block" type="submit">Create</button>
-          </div>
-        </form>
-      </div>
-    </template>
-  </Modal>
-
-  <!-- DELETE CHARACTER MODAL -->
-  <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 text-white">Delete character?</h3>
-    </template>
-    <template #modalBody>
-      <p class="mt-0 mb-5 text-white text-lg">
-        Do you want to permanently delete <span class="font-extrabold text-white">{{ deletingCharacter.name }}</span
-        >?
-      </p>
-    </template>
-  </ConfirmationModal>
-</template>
-
-<script setup lang="ts">
-import { useGameStore } from '@/stores/gameStore'
-import { onBeforeUnmount, onMounted, ref } from 'vue'
-import Modal from '@/components/utilities/Modal.vue'
-import { type Character as CharacterT } from '@/types'
-import ConfirmationModal from '@/components/utilities/ConfirmationModal.vue'
-
-const isLoading = ref(true)
-const characters = ref([])
-const gameStore = useGameStore()
-const deletingCharacter = ref(null)
-
-// Fetch characters
-gameStore.connection?.on('character:list', (data: any) => {
-  characters.value = data
-})
-
-onMounted(async () => {
-  // wait 0.75 sec
-  setTimeout(() => {
-    gameStore.connection?.emit('character:list')
-    isLoading.value = false
-  }, 750)
-})
-
-// Select character logics
-const selected_character = ref(null)
-function select_character() {
-  if (!selected_character.value) return
-  deletingCharacter.value = null
-  gameStore.connection?.emit('character:connect', { character_id: selected_character.value })
-  gameStore.connection?.on('character:connect', (data: CharacterT) => gameStore.setCharacter(data))
-}
-
-// Delete character logics
-function delete_character(character_id: number) {
-  if (!character_id) return
-  deletingCharacter.value = null
-  gameStore.connection?.emit('character:delete', { character_id: character_id })
-}
-
-// Create character logics
-const isModalOpen = ref(false)
-const name = ref('')
-function create() {
-  gameStore.connection?.on('character:create:success', (data: CharacterT) => {
-    gameStore.setCharacter(data)
-    isModalOpen.value = false
-  })
-  gameStore.connection?.emit('character:create', { name: name.value })
-}
-
-onBeforeUnmount(() => {
-  gameStore.connection?.off('character:list')
-  gameStore.connection?.off('character:connect')
-  gameStore.connection?.off('character:create:success')
-})
-</script>

src/screens/Loading.vue

@@ -1,74 +0,0 @@
-<template>
-  <div class="flex flex-col justify-center items-center h-dvh relative">
-    <div v-if="!isLoaded" class="w-20 h-20 rounded-full border-4 border-solid border-gray-300 border-t-transparent animate-spin"></div>
-    <button v-else @click="continueBtnClick" class="w-20 h-20 rounded-full bg-gray-500 flex items-center justify-center hover:bg-gray-600 transition-colors">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-      </svg>
-    </button>
-    <div v-if="!isLoaded" class="text-center mt-6">
-      <h1 class="text-2xl font-bold">Loading...</h1>
-      <p class="text-gray-400">Please wait while we load the assets.</p>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts" async>
-import { onMounted, ref } from 'vue'
-import config from '@/config'
-import type { AssetT as ServerAsset } from '@/types'
-import { useAssetManager } from '@/utilities/assetManager'
-import { useGameStore } from '@/stores/gameStore'
-
-/**
- * This component downloads all assets from the server and
- * stores them in the asset manager.
- */
-
-const gameStore = useGameStore()
-const assetManager = useAssetManager
-const isLoaded = ref(false)
-
-async function getAssets() {
-  return fetch(config.server_endpoint + '/assets/')
-    .then((response) => {
-      if (!response.ok) throw new Error('Failed to fetch assets')
-      console.log(response)
-      return response.json()
-    })
-    .catch((error) => {
-      console.error('Error fetching assets:', error)
-      return false
-    })
-}
-
-async function loadAssetsIntoAssetManager(assets: ServerAsset[]): Promise<void> {
-  for (const asset of assets) {
-    // Check if the asset is already loaded
-    const existingAsset = await assetManager.getAsset(asset.key)
-
-    // Check if the asset needs to be updated
-    if (!existingAsset || new Date(asset.updatedAt) > new Date(existingAsset.updatedAt)) {
-      // Check if the asset is already loaded, if so, delete it
-      if (existingAsset) {
-        await assetManager.deleteAsset(asset.key)
-      }
-
-      // Add the asset to the asset manager
-      await assetManager.downloadAsset(asset.key, asset.url, asset.group, asset.updatedAt, asset.frameCount, asset.frameWidth, asset.frameHeight)
-    }
-  }
-}
-
-function continueBtnClick() {
-  gameStore.isAssetsLoaded = true
-}
-
-onMounted(async () => {
-  const assets = await getAssets()
-  if (assets) {
-    await loadAssetsIntoAssetManager(assets)
-    isLoaded.value = true
-  }
-})
-</script>

src/screens/Login.vue

@@ -1,130 +0,0 @@
-<template>
-  <div class="relative max-lg:h-dvh flex flex-row-reverse">
-    <div class="lg:bg-gradient-to-l bg-gradient-to-b from-gray-900 to-transparent w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 z-10"></div>
-    <div class="bg-[url('/assets/login/login-bg.png')] w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center"></div>
-    <div class="bg-gray-900 z-20 w-full lg:w-1/2 h-[65dvh] lg:h-dvh relative">
-      <div class="h-dvh flex items-center lg:justify-center flex-col px-8 max-lg:pt-20">
-        <img src="/assets/login/sq-logo-v1.svg" class="mb-10" />
-        <div class="relative">
-          <img src="/assets/ui-elements/ui-box-outer.svg" class="absolute w-full h-full" />
-          <img src="/assets/ui-elements/ui-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)] max-lg:hidden" />
-
-          <!-- Login Form -->
-          <form v-show="switchForm === 'login'" @submit.prevent="loginFunc" class="relative px-6 py-11">
-            <div class="flex flex-col gap-5 p-2 mb-8 relative">
-              <div class="w-full grid gap-3 relative">
-                <input class="input-field xs:min-w-[350px] min-w-64" id="username-login" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
-                <div class="relative">
-                  <input class="input-field xs:min-w-[350px] min-w-64" id="password-login" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
-                  <button type="button" @click.prevent="showPassword = !showPassword" :class="{ 'eye-open': showPassword }" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
-                </div>
-                <span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
-              </div>
-              <button class="inline-flex self-end p-0 text-cyan-300 text-base">Forgot password?</button>
-              <button class="btn-cyan px-0 xs:w-full" type="submit">Play now</button>
-
-              <!-- Divider shape -->
-              <div class="absolute w-40 h-0.5 -bottom-8 left-1/2 -translate-x-1/2 flex justify-between">
-                <div class="w-0.5 h-full bg-gray-300"></div>
-                <div class="w-36 h-full bg-gray-300"></div>
-                <div class="w-0.5 h-full bg-gray-300"></div>
-              </div>
-            </div>
-            <div class="pt-8">
-              <p class="m-0 text-center">Don't have an account? <button class="text-cyan-300 text-base p-0" @click.prevent="switchForm = 'register'">Sign up</button></p>
-            </div>
-          </form>
-
-          <!-- Register Form -->
-          <form v-show="switchForm === 'register'" @submit.prevent="registerFunc" class="relative px-6 py-11">
-            <div class="flex flex-col gap-5 p-2 mb-8 relative">
-              <div class="w-full grid gap-3 relative">
-                <input class="input-field xs:min-w-[350px] min-w-64" id="username-register" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
-                <div class="relative">
-                  <input class="input-field xs:min-w-[350px] min-w-64" id="password-register" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
-                  <button type="button" @click.prevent="showPassword = !showPassword" :class="{ 'eye-open': showPassword }" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
-                </div>
-                <span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
-              </div>
-              <button class="btn-cyan xs:w-full" type="submit">Register now</button>
-
-              <!-- Divider shape -->
-              <div class="absolute w-40 h-0.5 -bottom-8 left-1/2 -translate-x-1/2 flex justify-between">
-                <div class="w-0.5 h-full bg-gray-300"></div>
-                <div class="w-36 h-full bg-gray-300"></div>
-                <div class="w-0.5 h-full bg-gray-300"></div>
-              </div>
-            </div>
-            <div class="pt-8">
-              <p class="m-0 text-center">Already have an account? <button class="text-cyan-300 text-base p-0" @click.prevent="switchForm = 'login'">Log in</button></p>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { login, register } from '@/services/authentication'
-import { useGameStore } from '@/stores/gameStore'
-import { useCookies } from '@vueuse/integrations/useCookies'
-
-const gameStore = useGameStore()
-const username = ref('')
-const password = ref('')
-const switchForm = ref('login')
-const loginError = ref('')
-const showPassword = ref(false)
-
-// automatic login because of development
-onMounted(async () => {
-  const token = useCookies().get('token')
-  if (token) {
-    gameStore.setToken(token)
-    gameStore.initConnection()
-  }
-})
-
-async function loginFunc() {
-  // check if username and password are valid
-  if (username.value === '' || password.value === '') {
-    loginError.value = 'Please enter a valid username and password'
-    return
-  }
-
-  // send login event to server
-  const response = await login(username.value, password.value)
-
-  if (response.success === undefined) {
-    loginError.value = response.error
-    return
-  }
-  gameStore.setToken(response.token)
-  gameStore.initConnection()
-  return true // Indicate success
-}
-
-async function registerFunc() {
-  // check if username and password are valid
-  if (username.value === '' || password.value === '') {
-    loginError.value = 'Please enter a valid username and password'
-    return
-  }
-
-  // send register event to server
-  const response = await register(username.value, password.value)
-
-  if (response.success === undefined) {
-    loginError.value = response.error
-    return
-  }
-
-  const loginSuccess = await loginFunc()
-  if (!loginSuccess) {
-    loginError.value = 'Login after registration failed. Please try logging in manually.'
-    return
-  }
-}
-</script>

src/services/authentication.ts

@@ -1,13 +1,17 @@
 import axios from 'axios'
 import config from '@/config'
 import { useCookies } from '@vueuse/integrations/useCookies'
+import { getDomain } from '@/utilities'
 
-export async function register(username: string, password: string) {
+export async function register(username: string, email: string, password: string) {
   try {
-    const response = await axios.post(`${config.server_endpoint}/register`, { username, password })
+    const response = await axios.post(`${config.server_endpoint}/register`, { username, email, password })
     useCookies().set('token', response.data.token as string)
     return { success: true, token: response.data.token }
   } catch (error: any) {
+    if (typeof error.response.data === 'undefined') {
+      return { error: 'Could not connect to server' }
+    }
     return { error: error.response.data.message }
   }
 }
@@ -16,12 +20,34 @@ export async function login(username: string, password: string) {
   try {
     const response = await axios.post(`${config.server_endpoint}/login`, { username, password })
     useCookies().set('token', response.data.token as string, {
-      // for whole domain
-      // @TODO : #190
-      // domain: window.location.hostname.split('.').slice(-2).join('.')
+      domain: getDomain()
     })
     return { success: true, token: response.data.token }
   } catch (error: any) {
     return { error: error.response.data.message }
   }
 }
+
+export async function resetPassword(email: string) {
+  try {
+    const response = await axios.post(`${config.server_endpoint}/reset-password`, { email })
+    return { success: true, token: response.data.token }
+  } catch (error: any) {
+    if (typeof error.response.data === 'undefined') {
+      return { error: 'Could not connect to server' }
+    }
+    return { error: error.response.data.message }
+  }
+}
+
+export async function newPassword(urlToken: string, password: string) {
+  try {
+    const response = await axios.post(`${config.server_endpoint}/new-password`, { urlToken, password })
+    return { success: true, token: response.data.token }
+  } catch (error: any) {
+    if (typeof error.response.data === 'undefined') {
+      return { error: 'Could not connect to server' }
+    }
+    return { error: error.response.data.message }
+  }
+}

src/storage/assetStorage.ts

@@ -0,0 +1,69 @@
+import config from '@/config'
+import Dexie from 'dexie'
+import type { AssetDataT } from '@/types'
+
+export class AssetStorage {
+  private db: Dexie
+
+  constructor() {
+    this.db = new Dexie('assets')
+    this.db.version(1).stores({
+      assets: 'key, group'
+    })
+  }
+
+  async download(asset: AssetDataT) {
+    try {
+      // Check if the asset already exists, then check if updatedAt is newer
+      const _asset = await this.db.table('assets').get(asset.key)
+      if (_asset && _asset.updatedAt > asset.updatedAt) {
+        return
+      }
+
+      // Download the asset
+      const response = await fetch(config.server_endpoint + asset.data)
+      const blob = await response.blob()
+
+      // Store the asset in the database
+      await this.db.table('assets').put({ key: asset.key, data: blob, group: asset.group, updatedAt: asset.updatedAt, frameCount: asset.frameCount, frameWidth: asset.frameWidth, frameHeight: asset.frameHeight })
+    } catch (error) {
+      console.error(`Failed to add asset ${asset.key}:`, error)
+    }
+  }
+
+  async get(key: string) {
+    try {
+      const asset = await this.db.table('assets').get(key)
+      if (asset) {
+        return {
+          ...asset,
+          data: URL.createObjectURL(asset.data) // Convert blob to data URL
+        }
+      }
+    } catch (error) {
+      console.error(`Failed to retrieve asset ${key}:`, error)
+    }
+    return null
+  }
+
+  async getByGroup(group: string) {
+    try {
+      const assets = await this.db.table('assets').where('group').equals(group).toArray()
+      return assets.map((asset) => ({
+        ...asset,
+        data: URL.createObjectURL(asset.data) // Convert blob to data URL
+      }))
+    } catch (error) {
+      console.error(`Failed to retrieve assets for group ${group}:`, error)
+      return []
+    }
+  }
+
+  async delete(key: string) {
+    try {
+      await this.db.table('assets').delete(key)
+    } catch (error) {
+      console.error(`Failed to delete asset ${key}:`, error)
+    }
+  }
+}

src/stores/gameStore.ts

@@ -1,27 +1,29 @@
 import { defineStore } from 'pinia'
 import { io, Socket } from 'socket.io-client'
-import type { Asset, Character, Notification, User, WorldSettings } from '@/types'
+import type { AssetDataT, Character, Notification, User, WorldSettings } from '@/types'
 import config from '@/config'
 import { useCookies } from '@vueuse/integrations/useCookies'
+import { getDomain } from '@/utilities'
 
 export const useGameStore = defineStore('game', {
   state: () => {
     return {
       notifications: [] as Notification[],
-      isAssetsLoaded: false,
-      loadedAssets: [] as string[],
       token: '' as string | null,
       connection: null as Socket | null,
       user: null as User | null,
       character: null as Character | null,
-      isPlayerDraggingCamera: false,
       world: {
         date: new Date(),
         isRainEnabled: false,
         isFogEnabled: false,
         fogDensity: 0.5
       } as WorldSettings,
-      gameSettings: {
+      game: {
+        isLoading: false,
+        isLoaded: false, // isLoaded is currently being used to determine if the player has interacted with the game
+        loadedAssets: [] as AssetDataT[],
+        isPlayerDraggingCamera: false,
         isCameraFollowingCharacter: false
       },
       uiSettings: {
@@ -31,6 +33,17 @@ export const useGameStore = defineStore('game', {
       }
     }
   },
+  getters: {
+    getLoadedAssets: (state) => {
+      return state.game.loadedAssets
+    },
+    getLoadedAsset: (state) => {
+      return (key: string) => state.game.loadedAssets.find((asset) => asset.key === key)
+    },
+    getLoadedAssetsByGroup: (state) => {
+      return (group: string) => state.game.loadedAssets.filter((asset) => asset.group === group)
+    }
+  },
   actions: {
     addNotification(notification: Notification) {
       if (!notification.id) {
@@ -53,17 +66,8 @@ export const useGameStore = defineStore('game', {
     toggleGmPanel() {
       this.uiSettings.isGmPanelOpen = !this.uiSettings.isGmPanelOpen
     },
-    togglePlayerDraggingCamera() {
-      this.isPlayerDraggingCamera = !this.isPlayerDraggingCamera
-    },
     setPlayerDraggingCamera(moving: boolean) {
-      this.isPlayerDraggingCamera = moving
-    },
-    toggleCameraFollowingCharacter() {
-      this.gameSettings.isCameraFollowingCharacter = !this.gameSettings.isCameraFollowingCharacter
-    },
-    setCameraFollowingCharacter(following: boolean) {
-      this.gameSettings.isCameraFollowingCharacter = following
+      this.game.isPlayerDraggingCamera = moving
     },
     toggleChat() {
       this.uiSettings.isChatOpen = !this.uiSettings.isChatOpen
@@ -101,21 +105,22 @@ export const useGameStore = defineStore('game', {
       this.connection?.disconnect()
 
       useCookies().remove('token', {
-        // for whole domain
-        // @TODO : #190
-        // domain: window.location.hostname.split('.').slice(-2).join('.')
+        domain: getDomain()
       })
 
-      this.isAssetsLoaded = false
       this.connection = null
       this.token = null
       this.user = null
       this.character = null
-      this.uiSettings.isGmPanelOpen = false
-      this.isPlayerDraggingCamera = false
-      this.gameSettings.isCameraFollowingCharacter = false
+
+      this.game.isLoaded = false
+      this.game.loadedAssets = []
+      this.game.isPlayerDraggingCamera = false
+      this.game.isCameraFollowingCharacter = false
+
       this.uiSettings.isChatOpen = false
       this.uiSettings.isCharacterProfileOpen = false
+      this.uiSettings.isGmPanelOpen = false
 
       this.world.date = new Date()
       this.world.isRainEnabled = false

src/stores/zoneEditorStore.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { useGameStore } from '@/stores/gameStore'
-import type { Zone, Object, Tile, ZoneEffect } from '@/types'
+import type { Zone, Object, Tile, ZoneEffect, ZoneObject } from '@/types'
 
 export type TeleportSettings = {
   toZoneId: number
@@ -20,14 +20,14 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
       zoneList: [] as Zone[],
       tileList: [] as Tile[],
       objectList: [] as Object[],
-      selectedTile: null as Tile | null,
+      selectedTile: '',
       selectedObject: null as Object | null,
-      objectDepth: 0,
       isTileListModalShown: false,
       isObjectListModalShown: false,
       isZoneListModalShown: false,
       isCreateZoneModalShown: false,
       isSettingsModalShown: false,
+      shouldClearTiles: false,
       zoneSettings: {
         name: '',
         width: 0,
@@ -88,15 +88,12 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     setObjectList(objects: Object[]) {
       this.objectList = objects
     },
-    setSelectedTile(tile: Tile) {
+    setSelectedTile(tile: string) {
       this.selectedTile = tile
     },
-    setSelectedObject(object: any) {
+    setSelectedObject(object: Object) {
       this.selectedObject = object
     },
-    setObjectDepth(depth: number) {
-      this.objectDepth = depth
-    },
     toggleSettingsModal() {
       this.isSettingsModalShown = !this.isSettingsModalShown
     },
@@ -110,6 +107,13 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     setTeleportSettings(teleportSettings: TeleportSettings) {
       this.teleportSettings = teleportSettings
     },
+    triggerClearTiles() {
+      this.shouldClearTiles = true
+    },
+
+    resetClearTilesFlag() {
+      this.shouldClearTiles = false
+    },
     reset(resetZone = false) {
       if (resetZone) this.zone = null
       this.zoneList = []
@@ -117,12 +121,14 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
       this.objectList = []
       this.tool = 'move'
       this.drawMode = 'tile'
-      this.selectedTile = null
+      this.selectedTile = ''
       this.selectedObject = null
-      this.objectDepth = 0
+      this.isTileListModalShown = false
+      this.isObjectListModalShown = false
       this.isSettingsModalShown = false
       this.isZoneListModalShown = false
       this.isCreateZoneModalShown = false
+      this.shouldClearTiles = false
     }
   }
 })

src/types.ts

@@ -4,11 +4,12 @@ export type Notification = {
   message?: string
 }
 
-export type AssetT = {
+export type AssetDataT = {
   key: string
-  url: string
+  data: string
   group: 'tiles' | 'objects' | 'sprites' | 'sprite_animations' | 'sound' | 'music' | 'ui' | 'font' | 'other'
   updatedAt: Date
+  isAnimated?: boolean
   frameCount?: number
   frameWidth?: number
   frameHeight?: number
@@ -223,3 +224,10 @@ export type WorldSettings = {
   isFogEnabled: boolean
   fogDensity: number
 }
+
+export type WeatherState = {
+  isRainEnabled: boolean
+  rainPercentage: number
+  isFogEnabled: boolean
+  fogDensity: number
+}

src/utilities.ts

@@ -1,3 +1,25 @@
 export function uuidv4() {
   return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) => (+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16))
 }
+
+export function unduplicateArray(array: any[]) {
+  return [...new Set(array.flat())]
+}
+
+export function getDomain() {
+  // Check if not localhost
+  if (window.location.hostname !== 'localhost') {
+    return window.location.hostname
+  }
+
+  // Check if not IP address
+  if (window.location.hostname.match(/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/)) {
+    return window.location.hostname
+  }
+
+  if (window.location.hostname.split('.').length < 3) {
+    return window.location.hostname
+  }
+
+  return window.location.hostname.split('.').slice(-2).join('.')
+}

src/utilities/assetManager.ts

@@ -1,72 +0,0 @@
-import config from '@/config'
-import Dexie from 'dexie'
-
-class AssetManager extends Dexie {
-  assets!: Dexie.Table<
-    {
-      key: string
-      data: Blob
-      group: string
-      updatedAt: Date
-      frameCount?: number
-      frameWidth?: number
-      frameHeight?: number
-    },
-    string
-  >
-
-  constructor() {
-    super('Assets')
-    this.version(1).stores({
-      assets: 'key, group'
-    })
-  }
-
-  async downloadAsset(key: string, url: string, group: string, updatedAt: Date, frameCount?: number, frameWidth?: number, frameHeight?: number) {
-    try {
-      const response = await fetch(config.server_endpoint + url)
-      const blob = await response.blob()
-      await this.assets.put({ key, data: blob, group, updatedAt, frameCount, frameWidth, frameHeight })
-    } catch (error) {
-      console.error(`Failed to add asset ${key}:`, error)
-    }
-  }
-
-  async getAsset(key: string) {
-    try {
-      const asset = await this.assets.get(key)
-      if (asset) {
-        return {
-          ...asset,
-          data: URL.createObjectURL(asset.data)
-        }
-      }
-    } catch (error) {
-      console.error(`Failed to retrieve asset ${key}:`, error)
-    }
-    return null
-  }
-
-  async getAssetsByGroup(group: string) {
-    try {
-      const assets = await this.assets.where('group').equals(group).toArray()
-      return assets.map((asset) => ({
-        ...asset,
-        data: URL.createObjectURL(asset.data)
-      }))
-    } catch (error) {
-      console.error(`Failed to retrieve assets for group ${group}:`, error)
-      return []
-    }
-  }
-
-  async deleteAsset(key: string) {
-    try {
-      await this.assets.delete(key)
-    } catch (error) {
-      console.error(`Failed to delete asset ${key}:`, error)
-    }
-  }
-}
-
-export const useAssetManager = new AssetManager()

vite.config.ts

@@ -2,12 +2,14 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue';
 import VueDevTools from 'vite-plugin-vue-devtools'
+import viteCompression from 'vite-plugin-compression';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
     VueDevTools(),
+    viteCompression()
   ],
   resolve: {
     alias: {