Replaced walk sound, removed redundant logic, removed emits in favour of using mapEditor directly (less logic), added soundStorage clear to reset cmd

# Conflicts:
#	src/components/gameMaster/mapEditor/partials/Toolbar.vue

.env.example

@@ -1,5 +1,6 @@
 VITE_NAME=Noxious
-VITE_DEVELOPMENT=true
+VITE_DOMAIN=localhost
+VITE_ENVIRONMENT=development
 VITE_SERVER_ENDPOINT=http://localhost:4000
 VITE_TILE_SIZE_WIDTH=64
 VITE_TILE_SIZE_HEIGHT=32

Caddyfile

@@ -0,0 +1,70 @@
+{
+	# Global options
+	admin off # Disable admin API
+
+	# Global logging configuration
+	log {
+		output file /var/log/caddy/access.log
+		format json
+		level INFO
+	}
+}
+
+noxious.gg {
+	# Root directory for your Vue app
+	root * ./dist
+
+	# Enable compression with optimal settings
+	encode zstd gzip
+
+	# Handle SPA routing
+	try_files {path} /index.html
+
+	# Serve static files with optimizations
+	file_server
+
+	# Enhanced security headers
+	header {
+		# Existing headers with improvements
+		X-Frame-Options "SAMEORIGIN"
+		X-XSS-Protection "1; mode=block"
+		X-Content-Type-Options "nosniff"
+		Referrer-Policy "strict-origin-when-cross-origin"
+
+		# Additional security headers
+		Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
+		Permissions-Policy "accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()"
+
+		# Remove server information
+		-Server
+	}
+
+	# Improved cache configuration for static assets
+	@static {
+		file
+		path *.js *.css *.png *.jpg *.jpeg *.gif *.ico *.svg *.woff *.woff2 *.ttf *.eot
+	}
+	header @static {
+		Cache-Control "public, max-age=31536000, immutable"
+		Vary Accept-Encoding
+	}
+
+	# Cache control for HTML files
+	@html {
+		file
+		path *.html
+	}
+	header @html {
+		Cache-Control "no-cache, must-revalidate"
+	}
+
+	# Handle errors
+	handle_errors {
+		respond "{http.error.status_code} {http.error.status_text}" {http.error.status_code}
+	}
+}
+
+# Improved redirect configuration
+www.noxious.gg {
+	redir https://noxious.gg{uri} permanent
+}

Dockerfile

@@ -1,32 +0,0 @@
-# Build stage
-FROM node:22.4.1-alpine as builder
-WORKDIR /usr/src/app
-COPY package*.json ./
-RUN npm ci
-COPY . .
-
-# Set environment variables
-ARG VITE_NAME=${VITE_NAME}
-ENV VITE_NAME=${VITE_NAME}
-
-ARG VITE_DEVELOPMENT=${VITE_DEVELOPMENT}
-ENV VITE_DEVELOPMENT=${VITE_DEVELOPMENT}
-
-ARG VITE_SERVER_ENDPOINT=${VITE_SERVER_ENDPOINT}
-ENV VITE_SERVER_ENDPOINT=${VITE_SERVER_ENDPOINT}
-
-ARG VITE_TILE_SIZE_X=${VITE_TILE_SIZE_X}
-ENV VITE_TILE_SIZE_X=${VITE_TILE_SIZE_X}
-
-ARG VITE_TILE_SIZE_Y=${VITE_TILE_SIZE_Y}
-ENV VITE_TILE_SIZE_Y=${VITE_TILE_SIZE_Y}
-
-# Build the application
-RUN npm run build-ntc
-
-# Production stage
-FROM nginx:1.26.1-alpine
-COPY --from=builder /usr/src/app/dist /usr/share/nginx/html
-COPY nginx.conf /etc/nginx/conf.d/default.conf
-EXPOSE 80
-CMD ["nginx", "-g", "daemon off;"]

captain-definition

@@ -1,4 +0,0 @@
-{
-	"schemaVersion": 2,
-	"dockerfilePath" :"./Dockerfile"
-}

package-lock.json

@@ -86,14 +86,14 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.26.5",
+      "version": "7.26.8",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.8.tgz",
-      "integrity": "sha512-2caSP6fN9I7HOe6nqhtft7V4g7/V/gfDsC3Ag4W7kEzzvRGKqiv0pu0HogPiZ3KaVSoNDhUws6IJjDjpfmYIXw==",
+      "integrity": "sha512-ef383X5++iZHWAXX0SXQR6ZyQhw/0KtTkrTz61WXRhFM6dhpHulO/RJz79L8S6ugZHJkOOkUrUdxgdF2YiPFnA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.26.5",
+        "@babel/parser": "^7.26.8",
-        "@babel/types": "^7.26.5",
+        "@babel/types": "^7.26.8",
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25",
         "jsesc": "^3.0.2"
@@ -121,12 +121,12 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.26.7",
+      "version": "7.26.8",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.7.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.8.tgz",
-      "integrity": "sha512-kEvgGGgEjRUutvdVvZhbn/BxVt+5VSpwXz1j3WYXQbXDo8KzFOPNG2GQbdAiNq8g6wn1yKk7C/qrke03a84V+w==",
+      "integrity": "sha512-TZIQ25pkSoaKEYYaHbbxkfL36GNsQ6iFiBbeuzAkLnXayKR1yP1zFe+NxuZWWsUyvt8icPU9CCq0sgWGXR1GEw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.26.7"
+        "@babel/types": "^7.26.8"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -149,32 +149,32 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.25.9",
+      "version": "7.26.8",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.26.8.tgz",
-      "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==",
+      "integrity": "sha512-iNKaX3ZebKIsCvJ+0jd6embf+Aulaa3vNBqZ41kM7iTWjx5qzWKXGHiJUW3+nTpQ18SG11hdF8OAzKrpXkb96Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.25.9",
+        "@babel/code-frame": "^7.26.2",
-        "@babel/parser": "^7.25.9",
+        "@babel/parser": "^7.26.8",
-        "@babel/types": "^7.25.9"
+        "@babel/types": "^7.26.8"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.26.7",
+      "version": "7.26.8",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.7.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.8.tgz",
-      "integrity": "sha512-1x1sgeyRLC3r5fQOM0/xtQKsYjyxmFjaOrLJNtZ81inNjyJHGIolTULPiSc/2qe1/qfpFLisLQYFnnZl7QoedA==",
+      "integrity": "sha512-nic9tRkjYH0oB2dzr/JoGIm+4Q6SuYeLEiIiZDwBscRMYFJ+tMAz98fuel9ZnbXViA2I0HVSSRRK8DW5fjXStA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.26.2",
-        "@babel/generator": "^7.26.5",
+        "@babel/generator": "^7.26.8",
-        "@babel/parser": "^7.26.7",
+        "@babel/parser": "^7.26.8",
-        "@babel/template": "^7.25.9",
+        "@babel/template": "^7.26.8",
-        "@babel/types": "^7.26.7",
+        "@babel/types": "^7.26.8",
         "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
@@ -183,9 +183,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.26.7",
+      "version": "7.26.8",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.7.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.8.tgz",
-      "integrity": "sha512-t8kDRGrKXyp6+tjUh7hw2RLyclsW4TRoRvRHtSyAX9Bb5ldlFh+90YAYY6awRXrlB4G5G2izNeGySpATlFzmOg==",
+      "integrity": "sha512-eUuWapzEGWFEpHFxgEaBG8e3n6S8L3MSu0oda755rOfabWPnh0Our1AozNFVUxGFIhbKgd1ksprsoDGMinTOTA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.25.9",
@@ -1161,9 +1161,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.34.0",
+      "version": "4.34.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.6.tgz",
-      "integrity": "sha512-Eeao7ewDq79jVEsrtWIj5RNqB8p2knlm9fhR6uJ2gqP7UfbLrTrxevudVrEPDM7Wkpn/HpRC2QfazH7MXLz3vQ==",
+      "integrity": "sha512-+GcCXtOQoWuC7hhX1P00LqjjIiS/iOouHXhMdiDSnq/1DGTox4SpUvO52Xm+div6+106r+TcvOeo/cxvyEyTgg==",
       "cpu": [
         "arm"
       ],
@@ -1175,9 +1175,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.34.0",
+      "version": "4.34.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.34.6.tgz",
-      "integrity": "sha512-yVh0Kf1f0Fq4tWNf6mWcbQBCLDpDrDEl88lzPgKhrgTcDrTtlmun92ywEF9dCjmYO3EFiSuJeeo9cYRxl2FswA==",
+      "integrity": "sha512-E8+2qCIjciYUnCa1AiVF1BkRgqIGW9KzJeesQqVfyRITGQN+dFuoivO0hnro1DjT74wXLRZ7QF8MIbz+luGaJA==",
       "cpu": [
         "arm64"
       ],
@@ -1189,9 +1189,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.34.0",
+      "version": "4.34.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.6.tgz",
-      "integrity": "sha512-gCs0ErAZ9s0Osejpc3qahTsqIPUDjSKIyxK/0BGKvL+Tn0n3Kwvj8BrCv7Y5sR1Ypz1K2qz9Ny0VvkVyoXBVUQ==",
+      "integrity": "sha512-z9Ib+OzqN3DZEjX7PDQMHEhtF+t6Mi2z/ueChQPLS/qUMKY7Ybn5A2ggFoKRNRh1q1T03YTQfBTQCJZiepESAg==",
       "cpu": [
         "arm64"
       ],
@@ -1203,9 +1203,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.34.0",
+      "version": "4.34.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.6.tgz",
-      "integrity": "sha512-aIB5Anc8hngk15t3GUkiO4pv42ykXHfmpXGS+CzM9CTyiWyT8HIS5ygRAy7KcFb/wiw4Br+vh1byqcHRTfq2tQ==",
+      "integrity": "sha512-PShKVY4u0FDAR7jskyFIYVyHEPCPnIQY8s5OcXkdU8mz3Y7eXDJPdyM/ZWjkYdR2m0izD9HHWA8sGcXn+Qrsyg==",
       "cpu": [
         "x64"
       ],
@@ -1217,9 +1217,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.34.0",
+      "version": "4.34.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.34.6.tgz",
-      "integrity": "sha512-kpdsUdMlVJMRMaOf/tIvxk8TQdzHhY47imwmASOuMajg/GXpw8GKNd8LNwIHE5Yd1onehNpcUB9jHY6wgw9nHQ==",
+      "integrity": "sha512-YSwyOqlDAdKqs0iKuqvRHLN4SrD2TiswfoLfvYXseKbL47ht1grQpq46MSiQAx6rQEN8o8URtpXARCpqabqxGQ==",
       "cpu": [
         "arm64"
       ],
@@ -1231,9 +1231,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.34.0",
+      "version": "4.34.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.34.6.tgz",
-      "integrity": "sha512-D0RDyHygOBCQiqookcPevrvgEarN0CttBecG4chOeIYCNtlKHmf5oi5kAVpXV7qs0Xh/WO2RnxeicZPtT50V0g==",
+      "integrity": "sha512-HEP4CgPAY1RxXwwL5sPFv6BBM3tVeLnshF03HMhJYCNc6kvSqBgTMmsEjb72RkZBAWIqiPUyF1JpEBv5XT9wKQ==",
       "cpu": [
         "x64"
       ],
@@ -1245,9 +1245,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.34.0",
+      "version": "4.34.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.34.6.tgz",
-      "integrity": "sha512-mCIw8j5LPDXmCOW8mfMZwT6F/Kza03EnSr4wGYEswrEfjTfVsFOxvgYfuRMxTuUF/XmRb9WSMD5GhCWDe2iNrg==",
+      "integrity": "sha512-88fSzjC5xeH9S2Vg3rPgXJULkHcLYMkh8faix8DX4h4TIAL65ekwuQMA/g2CXq8W+NJC43V6fUpYZNjaX3+IIg==",
       "cpu": [
         "arm"
       ],
@@ -1259,9 +1259,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.34.0",
+      "version": "4.34.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.34.6.tgz",
-      "integrity": "sha512-AwwldAu4aCJPob7zmjuDUMvvuatgs8B/QiVB0KwkUarAcPB3W+ToOT+18TQwY4z09Al7G0BvCcmLRop5zBLTag==",
+      "integrity": "sha512-wM4ztnutBqYFyvNeR7Av+reWI/enK9tDOTKNF+6Kk2Q96k9bwhDDOlnCUNRPvromlVXo04riSliMBs/Z7RteEg==",
       "cpu": [
         "arm"
       ],
@@ -1273,9 +1273,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.34.0",
+      "version": "4.34.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.6.tgz",
-      "integrity": "sha512-e7kDUGVP+xw05pV65ZKb0zulRploU3gTu6qH1qL58PrULDGxULIS0OSDQJLH7WiFnpd3ZKUU4VM3u/Z7Zw+e7Q==",
+      "integrity": "sha512-9RyprECbRa9zEjXLtvvshhw4CMrRa3K+0wcp3KME0zmBe1ILmvcVHnypZ/aIDXpRyfhSYSuN4EPdCCj5Du8FIA==",
       "cpu": [
         "arm64"
       ],
@@ -1287,9 +1287,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.34.0",
+      "version": "4.34.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.6.tgz",
-      "integrity": "sha512-SXYJw3zpwHgaBqTXeAZ31qfW/v50wq4HhNVvKFhRr5MnptRX2Af4KebLWR1wpxGJtLgfS2hEPuALRIY3LPAAcA==",
+      "integrity": "sha512-qTmklhCTyaJSB05S+iSovfo++EwnIEZxHkzv5dep4qoszUMX5Ca4WM4zAVUMbfdviLgCSQOu5oU8YoGk1s6M9Q==",
       "cpu": [
         "arm64"
       ],
@@ -1301,9 +1301,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
-      "version": "4.34.0",
+      "version": "4.34.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.34.6.tgz",
-      "integrity": "sha512-e5XiCinINCI4RdyU3sFyBH4zzz7LiQRvHqDtRe9Dt8o/8hTBaYpdPimayF00eY2qy5j4PaaWK0azRgUench6WQ==",
+      "integrity": "sha512-4Qmkaps9yqmpjY5pvpkfOerYgKNUGzQpFxV6rnS7c/JfYbDSU0y6WpbbredB5cCpLFGJEqYX40WUmxMkwhWCjw==",
       "cpu": [
         "loong64"
       ],
@@ -1315,9 +1315,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.34.0",
+      "version": "4.34.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.34.6.tgz",
-      "integrity": "sha512-3SWN3e0bAsm9ToprLFBSro8nJe6YN+5xmB11N4FfNf92wvLye/+Rh5JGQtKOpwLKt6e61R1RBc9g+luLJsc23A==",
+      "integrity": "sha512-Zsrtux3PuaxuBTX/zHdLaFmcofWGzaWW1scwLU3ZbW/X+hSsFbz9wDIp6XvnT7pzYRl9MezWqEqKy7ssmDEnuQ==",
       "cpu": [
         "ppc64"
       ],
@@ -1329,9 +1329,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.34.0",
+      "version": "4.34.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.34.6.tgz",
-      "integrity": "sha512-B1Oqt3GLh7qmhvfnc2WQla4NuHlcxAD5LyueUi5WtMc76ZWY+6qDtQYqnxARx9r+7mDGfamD+8kTJO0pKUJeJA==",
+      "integrity": "sha512-aK+Zp+CRM55iPrlyKiU3/zyhgzWBxLVrw2mwiQSYJRobCURb781+XstzvA8Gkjg/hbdQFuDw44aUOxVQFycrAg==",
       "cpu": [
         "riscv64"
       ],
@@ -1343,9 +1343,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.34.0",
+      "version": "4.34.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.34.6.tgz",
-      "integrity": "sha512-UfUCo0h/uj48Jq2lnhX0AOhZPSTAq3Eostas+XZ+GGk22pI+Op1Y6cxQ1JkUuKYu2iU+mXj1QjPrZm9nNWV9rg==",
+      "integrity": "sha512-WoKLVrY9ogmaYPXwTH326+ErlCIgMmsoRSx6bO+l68YgJnlOXhygDYSZe/qbUJCSiCiZAQ+tKm88NcWuUXqOzw==",
       "cpu": [
         "s390x"
       ],
@@ -1357,9 +1357,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.34.0",
+      "version": "4.34.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.6.tgz",
-      "integrity": "sha512-chZLTUIPbgcpm+Z7ALmomXW8Zh+wE2icrG+K6nt/HenPLmtwCajhQC5flNSk1Xy5EDMt/QAOz2MhzfOfJOLSiA==",
+      "integrity": "sha512-Sht4aFvmA4ToHd2vFzwMFaQCiYm2lDFho5rPcvPBT5pCdC+GwHG6CMch4GQfmWTQ1SwRKS0dhDYb54khSrjDWw==",
       "cpu": [
         "x64"
       ],
@@ -1371,9 +1371,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.34.0",
+      "version": "4.34.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.6.tgz",
-      "integrity": "sha512-jo0UolK70O28BifvEsFD/8r25shFezl0aUk2t0VJzREWHkq19e+pcLu4kX5HiVXNz5qqkD+aAq04Ct8rkxgbyQ==",
+      "integrity": "sha512-zmmpOQh8vXc2QITsnCiODCDGXFC8LMi64+/oPpPx5qz3pqv0s6x46ps4xoycfUiVZps5PFn1gksZzo4RGTKT+A==",
       "cpu": [
         "x64"
       ],
@@ -1385,9 +1385,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.34.0",
+      "version": "4.34.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.6.tgz",
-      "integrity": "sha512-Vmg0NhAap2S54JojJchiu5An54qa6t/oKT7LmDaWggpIcaiL8WcWHEN6OQrfTdL6mQ2GFyH7j2T5/3YPEDOOGA==",
+      "integrity": "sha512-3/q1qUsO/tLqGBaD4uXsB6coVGB3usxw3qyeVb59aArCgedSF66MPdgRStUd7vbZOsko/CgVaY5fo2vkvPLWiA==",
       "cpu": [
         "arm64"
       ],
@@ -1399,9 +1399,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.34.0",
+      "version": "4.34.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.34.6.tgz",
-      "integrity": "sha512-CV2aqhDDOsABKHKhNcs1SZFryffQf8vK2XrxP6lxC99ELZAdvsDgPklIBfd65R8R+qvOm1SmLaZ/Fdq961+m7A==",
+      "integrity": "sha512-oLHxuyywc6efdKVTxvc0135zPrRdtYVjtVD5GUm55I3ODxhU/PwkQFD97z16Xzxa1Fz0AEe4W/2hzRtd+IfpOA==",
       "cpu": [
         "ia32"
       ],
@@ -1413,9 +1413,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.34.0",
+      "version": "4.34.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.6.tgz",
-      "integrity": "sha512-g2ASy1QwHP88y5KWvblUolJz9rN+i4ZOsYzkEwcNfaNooxNUXG+ON6F5xFo0NIItpHqxcdAyls05VXpBnludGw==",
+      "integrity": "sha512-0PVwmgzZ8+TZ9oGBmdZoQVXflbvuwzN/HRclujpl4N/q3i+y0lqLw8n1bXA8ru3sApDjlmONaNAuYr38y1Kr9w==",
       "cpu": [
         "x64"
       ],
@@ -1465,9 +1465,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "20.17.16",
+      "version": "20.17.17",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.16.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.17.tgz",
-      "integrity": "sha512-vOTpLduLkZXePLxHiHsBLp98mHGnl8RptV4YAO3HfKO5UHjDvySGbxKtpYfy8Sx5+WKcgc45qNreJJRVM3L6mw==",
+      "integrity": "sha512-/WndGO4kIfMicEQLTi/mDANUu/iVUhT7KboZPdEqqHQ4aTS+3qT3U5gIqWDFV+XouorjfgGqvKILJeHhuQgFYg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1502,14 +1502,14 @@
       }
     },
     "node_modules/@vitest/expect": {
-      "version": "2.1.8",
+      "version": "2.1.9",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.1.8.tgz",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.1.9.tgz",
-      "integrity": "sha512-8ytZ/fFHq2g4PJVAtDX57mayemKgDR6X3Oa2Foro+EygiOJHUXhCqBAAKQYYajZpFoIfvBCF1j6R6IYRSIUFuw==",
+      "integrity": "sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/spy": "2.1.8",
+        "@vitest/spy": "2.1.9",
-        "@vitest/utils": "2.1.8",
+        "@vitest/utils": "2.1.9",
         "chai": "^5.1.2",
         "tinyrainbow": "^1.2.0"
       },
@@ -1518,13 +1518,13 @@
       }
     },
     "node_modules/@vitest/mocker": {
-      "version": "2.1.8",
+      "version": "2.1.9",
-      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-2.1.8.tgz",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-2.1.9.tgz",
-      "integrity": "sha512-7guJ/47I6uqfttp33mgo6ga5Gr1VnL58rcqYKyShoRK9ebu8T5Rs6HN3s1NABiBeVTdWNrwUMcHH54uXZBN4zA==",
+      "integrity": "sha512-tVL6uJgoUdi6icpxmdrn5YNo3g3Dxv+IHJBr0GXHaEdTcw3F+cPKnsXFhli6nO+f/6SDKPHEK1UN+k+TQv0Ehg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/spy": "2.1.8",
+        "@vitest/spy": "2.1.9",
         "estree-walker": "^3.0.3",
         "magic-string": "^0.30.12"
       },
@@ -1545,9 +1545,9 @@
       }
     },
     "node_modules/@vitest/pretty-format": {
-      "version": "2.1.8",
+      "version": "2.1.9",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.8.tgz",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.9.tgz",
-      "integrity": "sha512-9HiSZ9zpqNLKlbIDRWOnAWqgcA7xu+8YxXSekhr0Ykab7PAYFkhkwoqVArPOtJhPmYeE2YHgKZlj3CP36z2AJQ==",
+      "integrity": "sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1558,13 +1558,13 @@
       }
     },
     "node_modules/@vitest/runner": {
-      "version": "2.1.8",
+      "version": "2.1.9",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.1.8.tgz",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.1.9.tgz",
-      "integrity": "sha512-17ub8vQstRnRlIU5k50bG+QOMLHRhYPAna5tw8tYbj+jzjcspnwnwtPtiOlkuKC4+ixDPTuLZiqiWWQ2PSXHVg==",
+      "integrity": "sha512-ZXSSqTFIrzduD63btIfEyOmNcBmQvgOVsPNPe0jYtESiXkhd8u2erDLnMxmGrDCwHCCHE7hxwRDCT3pt0esT4g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/utils": "2.1.8",
+        "@vitest/utils": "2.1.9",
         "pathe": "^1.1.2"
       },
       "funding": {
@@ -1572,13 +1572,13 @@
       }
     },
     "node_modules/@vitest/snapshot": {
-      "version": "2.1.8",
+      "version": "2.1.9",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.1.8.tgz",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.1.9.tgz",
-      "integrity": "sha512-20T7xRFbmnkfcmgVEz+z3AU/3b0cEzZOt/zmnvZEctg64/QZbSDJEVm9fLnnlSi74KibmRsO9/Qabi+t0vCRPg==",
+      "integrity": "sha512-oBO82rEjsxLNJincVhLhaxxZdEtV0EFHMK5Kmx5sJ6H9L183dHECjiefOAdnqpIgT5eZwT04PoggUnW88vOBNQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "2.1.8",
+        "@vitest/pretty-format": "2.1.9",
         "magic-string": "^0.30.12",
         "pathe": "^1.1.2"
       },
@@ -1587,9 +1587,9 @@
       }
     },
     "node_modules/@vitest/spy": {
-      "version": "2.1.8",
+      "version": "2.1.9",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.1.8.tgz",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.1.9.tgz",
-      "integrity": "sha512-5swjf2q95gXeYPevtW0BLk6H8+bPlMb4Vw/9Em4hFxDcaOxS+e0LOX4yqNxoHzMR2akEB2xfpnWUzkZokmgWDg==",
+      "integrity": "sha512-E1B35FwzXXTs9FHNK6bDszs7mtydNi5MIfUWpceJ8Xbfb1gBMscAnwLbEu+B44ed6W3XjL9/ehLPHR1fkf1KLQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1600,13 +1600,13 @@
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "2.1.8",
+      "version": "2.1.9",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.8.tgz",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.9.tgz",
-      "integrity": "sha512-dwSoui6djdwbfFmIgbIjX2ZhIoG7Ex/+xpxyiEgIGzjliY8xGkcpITKTlp6B4MgtGkF2ilvm97cPM96XZaAgcA==",
+      "integrity": "sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "2.1.8",
+        "@vitest/pretty-format": "2.1.9",
         "loupe": "^3.1.2",
         "tinyrainbow": "^1.2.0"
       },
@@ -1926,13 +1926,13 @@
       }
     },
     "node_modules/abbrev": {
-      "version": "2.0.0",
+      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-3.0.0.tgz",
-      "integrity": "sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==",
+      "integrity": "sha512-+/kfrslGQ7TNV2ecmQwMJj/B65g5KVq1/L3SGVZ3tCYGqlzFuFCGBZJtMP99wH3NpEUyAjn0zPdPUg0D+DwrOA==",
       "dev": true,
       "license": "ISC",
       "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+        "node": "^18.17.0 || >=20.5.0"
       }
     },
     "node_modules/agent-base": {
@@ -2168,9 +2168,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001696",
+      "version": "1.0.30001699",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001696.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001699.tgz",
-      "integrity": "sha512-pDCPkvzfa39ehJtJ+OwGT/2yvT2SbjfHhiIW2LWOAcMQ7BzwxT/XuyUp4OTOd0XFWA6BKw0JalnBHgSi5DGJBQ==",
+      "integrity": "sha512-b+uH5BakXZ9Do9iK+CkDmctUSEqZl+SP056vc5usa0PL+ev5OHw003rZXcnjNDv3L8P5j6rwT6C0BPKSikW08w==",
       "dev": true,
       "funding": [
         {
@@ -2535,9 +2535,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.90",
+      "version": "1.5.96",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.90.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.96.tgz",
-      "integrity": "sha512-C3PN4aydfW91Natdyd449Kw+BzhLmof6tzy5W1pFC5SpQxVXT+oyiyOG9AgYYSN9OdA/ik3YkCrpwqI8ug5Tug==",
+      "integrity": "sha512-8AJUW6dh75Fm/ny8+kZKJzI1pgoE8bKLZlzDU2W1ENd+DXKJrx7I7l9hb8UWR4ojlnb5OlixMt00QWiYJoVw1w==",
       "dev": true,
       "license": "ISC"
     },
@@ -2881,22 +2881,25 @@
       }
     },
     "node_modules/glob": {
-      "version": "10.4.5",
+      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-11.0.1.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "integrity": "sha512-zrQDm8XPnYEKawJScsnM0QzobJxlT/kHOOlRTio8IH/GrmxRE5fjllkzdaHclIuNjUQTJYH2xHNIGfdpJkDJUw==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
         "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
+        "jackspeak": "^4.0.1",
-        "minimatch": "^9.0.4",
+        "minimatch": "^10.0.0",
         "minipass": "^7.1.2",
         "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
+        "path-scurry": "^2.0.0"
       },
       "bin": {
         "glob": "dist/esm/bin.mjs"
       },
+      "engines": {
+        "node": "20 || >=22"
+      },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
       }
@@ -2915,16 +2918,16 @@
       }
     },
     "node_modules/glob/node_modules/minimatch": {
-      "version": "9.0.5",
+      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.0.1.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "integrity": "sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
       "engines": {
-        "node": ">=16 || 14 >=14.17"
+        "node": "20 || >=22"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
@@ -3201,19 +3204,19 @@
       "license": "ISC"
     },
     "node_modules/jackspeak": {
-      "version": "3.4.3",
+      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.0.2.tgz",
-      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "integrity": "sha512-bZsjR/iRjl1Nk1UkjGpAzLNfQtzuijhn2g+pbZb98HQ1Gk8vM9hfbxeMBP+M2/UUdwj0RqGG3mlvk2MsAqwvEw==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
       },
+      "engines": {
+        "node": "20 || >=22"
+      },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
       }
     },
     "node_modules/jiti": {
@@ -3227,17 +3230,17 @@
       }
     },
     "node_modules/js-beautify": {
-      "version": "1.15.1",
+      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.15.1.tgz",
+      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.15.2.tgz",
-      "integrity": "sha512-ESjNzSlt/sWE8sciZH8kBF8BPlwXPwhR6pWKAw8bw4Bwj+iZcnKW6ONWUutJ7eObuBZQpiIb8S7OYspWrKt7rA==",
+      "integrity": "sha512-mcG6CHJxxih+EFAbd5NEBwrosIs6MoJmiNLFYN6kj5SeJMf7n29Ii/H4lt6zGTvmdB9AApuj5cs4zydjuLeqjw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "config-chain": "^1.1.13",
         "editorconfig": "^1.0.4",
-        "glob": "^10.3.3",
+        "glob": "^11.0.0",
         "js-cookie": "^3.0.5",
-        "nopt": "^7.2.0"
+        "nopt": "^8.0.0"
       },
       "bin": {
         "css-beautify": "js/bin/css-beautify.js",
@@ -3610,19 +3613,19 @@
       "license": "MIT"
     },
     "node_modules/nopt": {
-      "version": "7.2.1",
+      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-7.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-8.1.0.tgz",
-      "integrity": "sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==",
+      "integrity": "sha512-ieGu42u/Qsa4TFktmaKEwM6MQH0pOWnaB3htzh0JRtx84+Mebc0cbZYN5bC+6WTZ4+77xrL9Pn5m7CV6VIkV7A==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
-        "abbrev": "^2.0.0"
+        "abbrev": "^3.0.0"
       },
       "bin": {
         "nopt": "bin/nopt.js"
       },
       "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+        "node": "^18.17.0 || >=20.5.0"
       }
     },
     "node_modules/normalize-path": {
@@ -3784,22 +3787,32 @@
       "license": "MIT"
     },
     "node_modules/path-scurry": {
-      "version": "1.11.1",
+      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.0.tgz",
-      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "integrity": "sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
-        "lru-cache": "^10.2.0",
+        "lru-cache": "^11.0.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+        "minipass": "^7.1.2"
       },
       "engines": {
-        "node": ">=16 || 14 >=14.18"
+        "node": "20 || >=22"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "11.0.2",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.0.2.tgz",
+      "integrity": "sha512-123qHRfJBmo2jXDbo/a5YOQrJoHF/GNQTLzQ5+IdK5pWpceK17yRc6ozlWd25FxvGKQbIUs91fDFkXmDHTKcyA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
     "node_modules/pathe": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
@@ -3852,9 +3865,9 @@
       "license": "MIT"
     },
     "node_modules/phavuer": {
-      "version": "0.16.4",
+      "version": "0.16.5",
-      "resolved": "https://registry.npmjs.org/phavuer/-/phavuer-0.16.4.tgz",
+      "resolved": "https://registry.npmjs.org/phavuer/-/phavuer-0.16.5.tgz",
-      "integrity": "sha512-mlsGGDVoFUl67J6B8NtLHghmzsd316/VGn6c13/4eb7Upwl+ur382xtb711oBGmsK1NbptI1zkUWqVSWPykXNA==",
+      "integrity": "sha512-NuUghQU1cZ8ePGJ9rt9czahtzPiJb7H5wALuP2ZDn8W4ELYuBk5Fz/nMzyxBFFme78Px7q38YTY3nW7xQMu1Ww==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
@@ -4086,9 +4099,9 @@
       "license": "MIT"
     },
     "node_modules/prettier": {
-      "version": "3.4.2",
+      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.0.tgz",
-      "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==",
+      "integrity": "sha512-quyMrVt6svPS7CjQ9gKb3GLEX/rl3BCL2oa/QkNcXv4YNVBC9olt3s+H7ukto06q7B1Qz46PbrKLO34PR6vXcA==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -4250,9 +4263,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.34.0",
+      "version": "4.34.6",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.34.6.tgz",
-      "integrity": "sha512-+4C/cgJ9w6sudisA0nZz0+O7lTP9a3CzNLsoDwaRumM8QHwghUsu6tqHXiTmNUp/rqNiM14++7dkzHDyCRs0Jg==",
+      "integrity": "sha512-wc2cBWqJgkU3Iz5oztRkQbfVkbxoz5EhnCGOrnJvnLnQ7O0WhQUYyv18qQI79O8L7DdHrrlJNeCHd4VGpnaXKQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4266,25 +4279,25 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.34.0",
+        "@rollup/rollup-android-arm-eabi": "4.34.6",
-        "@rollup/rollup-android-arm64": "4.34.0",
+        "@rollup/rollup-android-arm64": "4.34.6",
-        "@rollup/rollup-darwin-arm64": "4.34.0",
+        "@rollup/rollup-darwin-arm64": "4.34.6",
-        "@rollup/rollup-darwin-x64": "4.34.0",
+        "@rollup/rollup-darwin-x64": "4.34.6",
-        "@rollup/rollup-freebsd-arm64": "4.34.0",
+        "@rollup/rollup-freebsd-arm64": "4.34.6",
-        "@rollup/rollup-freebsd-x64": "4.34.0",
+        "@rollup/rollup-freebsd-x64": "4.34.6",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.34.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.34.6",
-        "@rollup/rollup-linux-arm-musleabihf": "4.34.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.34.6",
-        "@rollup/rollup-linux-arm64-gnu": "4.34.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.34.6",
-        "@rollup/rollup-linux-arm64-musl": "4.34.0",
+        "@rollup/rollup-linux-arm64-musl": "4.34.6",
-        "@rollup/rollup-linux-loongarch64-gnu": "4.34.0",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.34.6",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.34.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.34.6",
-        "@rollup/rollup-linux-riscv64-gnu": "4.34.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.34.6",
-        "@rollup/rollup-linux-s390x-gnu": "4.34.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.34.6",
-        "@rollup/rollup-linux-x64-gnu": "4.34.0",
+        "@rollup/rollup-linux-x64-gnu": "4.34.6",
-        "@rollup/rollup-linux-x64-musl": "4.34.0",
+        "@rollup/rollup-linux-x64-musl": "4.34.6",
-        "@rollup/rollup-win32-arm64-msvc": "4.34.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.34.6",
-        "@rollup/rollup-win32-ia32-msvc": "4.34.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.34.6",
-        "@rollup/rollup-win32-x64-msvc": "4.34.0",
+        "@rollup/rollup-win32-x64-msvc": "4.34.6",
         "fsevents": "~2.3.2"
       }
     },
@@ -4327,9 +4340,9 @@
       "license": "MIT"
     },
     "node_modules/sass": {
-      "version": "1.83.4",
+      "version": "1.84.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.83.4.tgz",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.84.0.tgz",
-      "integrity": "sha512-B1bozCeNQiOgDcLd33e2Cs2U60wZwjUUXzh900ZyQF5qUasvMdDZYbQ566LJu7cqR+sAHlAfO6RMkaID5s6qpA==",
+      "integrity": "sha512-XDAbhEPJRxi7H0SxrnOpiXFQoUJHwkR2u3Zc4el+fK/Tt5Hpzw5kkQ59qVDfvdaUq6gCrEZIbySFBM2T9DNKHg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4361,9 +4374,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.7.0",
+      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-      "integrity": "sha512-DrfFnPzblFmNrIZzg5RzHegbiRWg7KMR7btwi2yjHwx06zsUbO5g613sVwEV7FTwmzJu+Io0lJe2GJ3LxqpvBQ==",
+      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -4651,6 +4664,76 @@
         "node": ">= 6"
       }
     },
+    "node_modules/sucrase/node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sucrase/node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/sucrase/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sucrase/node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -5040,9 +5123,9 @@
       }
     },
     "node_modules/vite-node": {
-      "version": "2.1.8",
+      "version": "2.1.9",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.1.8.tgz",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.1.9.tgz",
-      "integrity": "sha512-uPAwSr57kYjAUux+8E2j0q0Fxpn8M9VoyfGiRI8Kfktz9NcYMCenwY5RnZxnF1WTu3TGiYipirIzacLL3VVGFg==",
+      "integrity": "sha512-AM9aQ/IPrW/6ENLQg3AGY4K1N2TGZdR5e4gu/MmmR2xR3Ll1+dib+nook92g4TV3PXVyeyxdWwtaCAiUL0hMxA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5078,19 +5161,19 @@
       }
     },
     "node_modules/vitest": {
-      "version": "2.1.8",
+      "version": "2.1.9",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.1.8.tgz",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.1.9.tgz",
-      "integrity": "sha512-1vBKTZskHw/aosXqQUlVWWlGUxSJR8YtiyZDJAFeW2kPAeX6S3Sool0mjspO+kXLuxVWlEDDowBAeqeAQefqLQ==",
+      "integrity": "sha512-MSmPM9REYqDGBI8439mA4mWhV5sKmDlBKWIYbA3lRb2PTHACE0mgKwA8yQ2xq9vxDTuk4iPrECBAEW2aoFXY0Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/expect": "2.1.8",
+        "@vitest/expect": "2.1.9",
-        "@vitest/mocker": "2.1.8",
+        "@vitest/mocker": "2.1.9",
-        "@vitest/pretty-format": "^2.1.8",
+        "@vitest/pretty-format": "^2.1.9",
-        "@vitest/runner": "2.1.8",
+        "@vitest/runner": "2.1.9",
-        "@vitest/snapshot": "2.1.8",
+        "@vitest/snapshot": "2.1.9",
-        "@vitest/spy": "2.1.8",
+        "@vitest/spy": "2.1.9",
-        "@vitest/utils": "2.1.8",
+        "@vitest/utils": "2.1.9",
         "chai": "^5.1.2",
         "debug": "^4.3.7",
         "expect-type": "^1.1.0",
@@ -5102,7 +5185,7 @@
         "tinypool": "^1.0.1",
         "tinyrainbow": "^1.2.0",
         "vite": "^5.0.0",
-        "vite-node": "2.1.8",
+        "vite-node": "2.1.9",
         "why-is-node-running": "^2.3.0"
       },
       "bin": {
@@ -5117,8 +5200,8 @@
       "peerDependencies": {
         "@edge-runtime/vm": "*",
         "@types/node": "^18.0.0 || >=20.0.0",
-        "@vitest/browser": "2.1.8",
+        "@vitest/browser": "2.1.9",
-        "@vitest/ui": "2.1.8",
+        "@vitest/ui": "2.1.9",
         "happy-dom": "*",
         "jsdom": "*"
       },

public/assets/icons/mapEditor/dropdown-chevron.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 9.5L12 14.5L7 9.5" stroke="#fff" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/assets/icons/mapEditor/search.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.3333 17.5L11.0833 12.25C10.6667 12.5833 10.1875 12.8472 9.64583 13.0417C9.10417 13.2361 8.52778 13.3333 7.91667 13.3333C6.40278 13.3333 5.12153 12.809 4.07292 11.7604C3.02431 10.7118 2.5 9.43056 2.5 7.91667C2.5 6.40278 3.02431 5.12153 4.07292 4.07292C5.12153 3.02431 6.40278 2.5 7.91667 2.5C9.43056 2.5 10.7118 3.02431 11.7604 4.07292C12.809 5.12153 13.3333 6.40278 13.3333 7.91667C13.3333 8.52778 13.2361 9.10417 13.0417 9.64583C12.8472 10.1875 12.5833 10.6667 12.25 11.0833L17.5 16.3333L16.3333 17.5ZM7.91667 11.6667C8.95833 11.6667 9.84375 11.3021 10.5729 10.5729C11.3021 9.84375 11.6667 8.95833 11.6667 7.91667C11.6667 6.875 11.3021 5.98958 10.5729 5.26042C9.84375 4.53125 8.95833 4.16667 7.91667 4.16667C6.875 4.16667 5.98958 4.53125 5.26042 5.26042C4.53125 5.98958 4.16667 6.875 4.16667 7.91667C4.16667 8.95833 4.53125 9.84375 5.26042 10.5729C5.98958 11.3021 6.875 11.6667 7.91667 11.6667Z" fill="#808080"/>
+</svg>

public/assets/icons/mapEditor/settings.svg

@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M490.667,405.333h-56.811C424.619,374.592,396.373,352,362.667,352s-61.931,22.592-71.189,53.333H21.333
+			C9.557,405.333,0,414.891,0,426.667S9.557,448,21.333,448h270.144c9.237,30.741,37.483,53.333,71.189,53.333
+			s61.931-22.592,71.189-53.333h56.811c11.797,0,21.333-9.557,21.333-21.333S502.464,405.333,490.667,405.333z M362.667,458.667
+			c-17.643,0-32-14.357-32-32s14.357-32,32-32s32,14.357,32,32S380.309,458.667,362.667,458.667z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M490.667,64h-56.811c-9.259-30.741-37.483-53.333-71.189-53.333S300.736,33.259,291.477,64H21.333
+			C9.557,64,0,73.557,0,85.333s9.557,21.333,21.333,21.333h270.144C300.736,137.408,328.96,160,362.667,160
+			s61.931-22.592,71.189-53.333h56.811c11.797,0,21.333-9.557,21.333-21.333S502.464,64,490.667,64z M362.667,117.333
+			c-17.643,0-32-14.357-32-32c0-17.643,14.357-32,32-32s32,14.357,32,32C394.667,102.976,380.309,117.333,362.667,117.333z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M490.667,234.667H220.523c-9.259-30.741-37.483-53.333-71.189-53.333s-61.931,22.592-71.189,53.333H21.333
+			C9.557,234.667,0,244.224,0,256c0,11.776,9.557,21.333,21.333,21.333h56.811c9.259,30.741,37.483,53.333,71.189,53.333
+			s61.931-22.592,71.189-53.333h270.144c11.797,0,21.333-9.557,21.333-21.333C512,244.224,502.464,234.667,490.667,234.667z
+			 M149.333,288c-17.643,0-32-14.357-32-32s14.357-32,32-32c17.643,0,32,14.357,32,32S166.976,288,149.333,288z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/App.vue

@@ -2,7 +2,7 @@
   <Debug />
   <Notifications />
   <BackgroundImageLoader />
-  <GmPanel v-if="gameStore.character?.role === 'gm'" @open-map-editor="mapEditor.toggleActive" />
+  <GmPanel v-if="gameStore.character?.role === 'gm'" />
   <component :is="currentScreen" />
 </template>
 
@@ -17,12 +17,14 @@ import BackgroundImageLoader from '@/components/utilities/BackgroundImageLoader.
 import Debug from '@/components/utilities/Debug.vue'
 import Notifications from '@/components/utilities/Notifications.vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
+import { useSoundComposable } from '@/composables/useSoundComposable'
 import { useGameStore } from '@/stores/gameStore'
-import { useMapEditorStore } from '@/stores/mapEditorStore'
+import { computed, watch } from 'vue'
-import { computed, ref, useTemplateRef, watch } from 'vue'
 
 const gameStore = useGameStore()
+
 const mapEditor = useMapEditorComposable()
+const { playSound } = useSoundComposable()
 
 const currentScreen = computed(() => {
   if (!gameStore.game.isLoaded) return Loading
@@ -42,13 +44,13 @@ watch(
 )
 
 // #209: Play sound when a button is pressed
-// @TODO: Not all button-like elements will actually be a button, so we need to find a better way to do this
 addEventListener('click', (event) => {
-  if (!(event.target instanceof HTMLButtonElement)) {
+  const classList = ['btn-cyan', 'btn-red', 'btn-indigo', 'btn-empty', 'btn-sound']
-    return
+  const target = event.target as HTMLElement
+  // console.log(target) // Uncomment to log the clicked element
+  if (classList.some((className) => target.classList.contains(className))) {
+    playSound('/assets/sounds/button-click.wav')
   }
-  const audio = new Audio('/assets/music/click-btn.mp3')
-  audio.play()
 })
 
 // Watch for "G" key press and toggle the gm panel

src/application/config.ts

@@ -1,6 +1,7 @@
 export default {
   name: import.meta.env.VITE_NAME,
-  development: import.meta.env.VITE_DEVELOPMENT === 'true',
+  domain: import.meta.env.VITE_DOMAIN,
+  environment: import.meta.env.VITE_ENVIRONMENT,
   server_endpoint: import.meta.env.VITE_SERVER_ENDPOINT,
   tile_size: {
     width: Number(import.meta.env.VITE_TILE_SIZE_WIDTH),

src/application/types.ts

@@ -26,7 +26,7 @@ export type TextureData = {
 }
 
 export type Tile = {
-  id: UUID
+  id: string
   name: string
   tags: any | null
   createdAt: Date
@@ -34,7 +34,7 @@ export type Tile = {
 }
 
 export type MapObject = {
-  id: UUID
+  id: string
   name: string
   tags: any | null
   originX: number
@@ -47,7 +47,7 @@ export type MapObject = {
 }
 
 export type Item = {
-  id: UUID
+  id: string
   name: string
   description: string | null
   itemType: ItemType
@@ -62,7 +62,7 @@ export type ItemType = 'WEAPON' | 'HELMET' | 'CHEST' | 'LEGS' | 'BOOTS' | 'GLOVE
 export type ItemRarity = 'COMMON' | 'UNCOMMON' | 'RARE' | 'EPIC' | 'LEGENDARY'
 
 export type Map = {
-  id: UUID
+  id: string
   name: string
   width: number
   height: number
@@ -78,17 +78,14 @@ export type Map = {
 }
 
 export type MapEffect = {
-  id: UUID
+  id: string
-  map: Map
   effect: string
   strength: number
 }
 
 export type PlacedMapObject = {
-  id: UUID
+  id: string
-  map: Map
+  mapObject: MapObject | string
-  mapObject: MapObject
-  depth: number
   isRotated: boolean
   positionX: number
   positionY: number
@@ -102,8 +99,8 @@ export enum MapEventTileType {
 }
 
 export type MapEventTile = {
-  id: UUID
+  id: string
-  mapId: UUID
+  mapid: string
   type: MapEventTileType
   positionX: number
   positionY: number
@@ -111,7 +108,7 @@ export type MapEventTile = {
 }
 
 export type MapEventTileTeleport = {
-  id: UUID
+  id: string
   mapEventTile: MapEventTile
   toMap: Map
   toPositionX: number
@@ -120,7 +117,7 @@ export type MapEventTileTeleport = {
 }
 
 export type User = {
-  id: UUID
+  id: string
   username: string
   password: string
   characters: Character[]
@@ -140,7 +137,7 @@ export enum CharacterRace {
 }
 
 export type CharacterType = {
-  id: UUID
+  id: string
   name: string
   gender: CharacterGender
   race: CharacterRace
@@ -151,7 +148,7 @@ export type CharacterType = {
 }
 
 export type CharacterHair = {
-  id: UUID
+  id: string
   name: string
   sprite?: Sprite
   gender: CharacterGender
@@ -159,8 +156,8 @@ export type CharacterHair = {
 }
 
 export type Character = {
-  id: UUID
+  id: string
-  userId: UUID
+  userid: string
   user: User
   name: string
   hitpoints: number
@@ -187,14 +184,14 @@ export type MapCharacter = {
 }
 
 export type CharacterItem = {
-  id: UUID
+  id: string
   character: Character
   item: Item
   quantity: number
 }
 
 export type CharacterEquipment = {
-  id: UUID
+  id: string
   slot: CharacterEquipmentSlotType
   characterItem: CharacterItem
 }
@@ -209,7 +206,7 @@ export enum CharacterEquipmentSlotType {
 }
 
 export type Sprite = {
-  id: UUID
+  id: string
   name: string
   createdAt: Date
   updatedAt: Date
@@ -256,6 +253,6 @@ export type WeatherState = {
 }
 
 export type mapLoadData = {
-  mapId: UUID
+  mapId: string
   characters: MapCharacter[]
 }

src/application/utilities.ts

@@ -7,25 +7,8 @@ export function uuidv4() {
 }
 
 export function unduplicateArray(array: any[]) {
-  return [...new Set(array.flat())]
+  const arrayToProcess = typeof array.flat === 'function' ? array.flat() : array
-}
+  return [...new Set(arrayToProcess)]
-
-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('.')
 }
 
 export async function downloadCache<T extends { id: string; updatedAt: Date }>(endpoint: string, storage: BaseStorage<T>) {
@@ -41,7 +24,7 @@ export async function downloadCache<T extends { id: string; updatedAt: Date }>(e
 
   for (const item of items) {
     let overwrite = false
-    const existingItem = await storage.get(item.id)
+    const existingItem = await storage.getById(item.id)
 
     if (!existingItem || item.updatedAt > existingItem.updatedAt) {
       overwrite = true

src/assets/scss/main.scss

@@ -73,7 +73,7 @@ input {
 }
 
 .input-field {
-  @apply px-4 py-2.5 text-base leading-5 bg-gray border border-solid border-gray-500 rounded text-gray-300;
+  @apply px-4 py-2.5 text-base leading-5 bg-gray border border-solid border-gray-500 rounded text-gray-300 font-default;
   &:focus-visible {
     @apply outline-none border-cyan rounded bg-gray-900;
   }
@@ -88,6 +88,12 @@ input {
   }
 }
 
+select {
+  &.input-field {
+    @apply appearance-none bg-[url('/assets/icons/mapEditor/dropdown-chevron.svg')] bg-no-repeat bg-[calc(100%_-_10px)_center] bg-[length:20px] text-white;
+  }
+}
+
 .form-field-full {
   @apply w-full flex flex-col mb-5;
   label {
@@ -122,6 +128,15 @@ button {
     }
   }
 
+  &.btn-indigo {
+    @apply bg-indigo-500 text-gray-50 text-base leading-5 rounded py-2.5;
+
+    &.active,
+    &:hover {
+      @apply bg-indigo-600;
+    }
+  }
+
   &.btn-empty {
     @apply text-gray-50 border-2 border-solid border-gray-500 text-base leading-5 rounded py-2.5;
 
@@ -149,6 +164,10 @@ button {
   @apply bg-gray bg-none;
 }
 
+.list-open {
+  @apply w-[calc(75%_-_40px)] max-xl:w-[calc(100%_-_360px)];
+}
+
 .hair-deselect:has(:checked) {
   img {
     @apply brightness-200;

src/components/game/character/Character.vue

@@ -8,19 +8,19 @@
 </template>
 
 <script lang="ts" setup>
-import { Direction } from '@/application/enums'
 import { type MapCharacter } from '@/application/types'
 import CharacterHair from '@/components/game/character/partials/CharacterHair.vue'
 import ChatBubble from '@/components/game/character/partials/ChatBubble.vue'
 import HealthBar from '@/components/game/character/partials/HealthBar.vue'
-import { useCharacterSprite } from '@/composables/useCharacterSpriteComposable'
+import { useCharacterSpriteComposable } from '@/composables/useCharacterSpriteComposable'
+import { useSoundComposable } from '@/composables/useSoundComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapStore } from '@/stores/mapStore'
 import { Container, Sprite, useScene } from 'phavuer'
 import { onMounted, onUnmounted, watch } from 'vue'
 
 const props = defineProps<{
-  tilemap: Phaser.Tilemaps.Tilemap
+  tileMap: Phaser.Tilemaps.Tilemap
   mapCharacter: MapCharacter
 }>()
 
@@ -28,14 +28,14 @@ const gameStore = useGameStore()
 const mapStore = useMapStore()
 const scene = useScene()
 
-const { characterContainer, characterSprite, currentPositionX, currentPositionY, isometricDepth, isFlippedX, updatePosition, calcDirection, updateSprite, initializeSprite, cleanup } = useCharacterSprite(scene, props.tilemap, props.mapCharacter)
+const { characterContainer, characterSprite, currentPositionX, currentPositionY, isometricDepth, isFlippedX, updatePosition, playAnimation, calcDirection, updateSprite, initializeSprite, cleanup } = useCharacterSpriteComposable(scene, props.tileMap, props.mapCharacter)
+const { playSound, stopSound } = useSoundComposable()
 
 const handlePositionUpdate = (newValues: any, oldValues: any) => {
   if (!newValues) return
 
   if (!oldValues || newValues.positionX !== oldValues.positionX || newValues.positionY !== oldValues.positionY) {
-    const direction = !oldValues ? Direction.POSITIVE : calcDirection(oldValues.positionX, oldValues.positionY, newValues.positionX, newValues.positionY)
+    updatePosition(newValues.positionX, newValues.positionY)
-    updatePosition(newValues.positionX, newValues.positionY, direction)
   }
 
   if (newValues.isMoving !== oldValues?.isMoving || newValues.rotation !== oldValues?.rotation) {
@@ -43,6 +43,39 @@ const handlePositionUpdate = (newValues: any, oldValues: any) => {
   }
 }
 
+/**
+ * Plays walk sound when character is moving
+ */
+watch(
+  () => props.mapCharacter.isMoving,
+  (newValue) => {
+    if (newValue) {
+      playSound('/assets/sounds/walk.wav', false, true)
+    } else {
+      stopSound('/assets/sounds/walk.wav')
+    }
+  }
+)
+
+/**
+ * Plays attack animation and sound when character is attacking
+ */
+watch(
+  () => props.mapCharacter.isAttacking,
+  (newValue) => {
+    if (newValue) {
+      playAnimation('attack')
+      playSound('/assets/sounds/attack.wav', false, true)
+    } else {
+      stopSound('/assets/sounds/attack.wav')
+    }
+    mapStore.updateCharacterProperty(props.mapCharacter.character.id, 'isAttacking', false)
+  }
+)
+
+/**
+ * Handles position updates and movement delay
+ */
 watch(
   () => ({
     positionX: props.mapCharacter.character.positionX,
@@ -51,12 +84,13 @@ watch(
     rotation: props.mapCharacter.character.rotation,
     isAttacking: props.mapCharacter.isAttacking
   }),
-  handlePositionUpdate
+  (oldValues, newValues) => {
+    handlePositionUpdate(oldValues, newValues)
+  }
 )
 
 onMounted(async () => {
   await initializeSprite()
-
   if (props.mapCharacter.character.id === gameStore.character!.id) {
     mapStore.setCharacterLoaded(true)
     scene.cameras.main.startFollow(characterContainer.value as Phaser.GameObjects.Container)

src/components/game/character/partials/CharacterChest.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts" setup>
 import type { MapCharacter, Sprite as SpriteT } from '@/application/types'
-import { loadSpriteTextures } from '@/composables/gameComposable'
+import { loadSpriteTextures } from '@/services/textureService'
 import { useGameStore } from '@/stores/gameStore'
 import { Image, useScene } from 'phavuer'
 import { computed } from 'vue'

src/components/game/character/partials/CharacterHair.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts" setup>
 import type { MapCharacter, Sprite as SpriteT } from '@/application/types'
-import { loadSpriteTextures } from '@/composables/gameComposable'
+import { loadSpriteTextures } from '@/services/textureService'
 import { CharacterHairStorage, CharacterTypeStorage, SpriteStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { Image, useScene } from 'phavuer'
@@ -48,7 +48,7 @@ onMounted(async () => {
 
   hairSpriteId.value = spriteId
   const spriteStorage = new SpriteStorage()
-  sprite.value = await spriteStorage.get(spriteId)
+  sprite.value = await spriteStorage.getById(spriteId)
   await loadSpriteTextures(scene, spriteId)
 })
 </script>

src/components/game/map/Characters.vue

@@ -1,14 +1,46 @@
 <template>
-  <Character v-for="item in mapStore.characters" :key="item.character.id" :tilemap="tilemap" :mapCharacter="item" />
+  <Character v-for="item in mapStore.characters" :key="item.character.id" :tileMap :mapCharacter="item" />
 </template>
 
 <script setup lang="ts">
+import type { MapCharacter, UUID } from '@/application/types'
 import Character from '@/components/game/character/Character.vue'
+import { useGameStore } from '@/stores/gameStore'
 import { useMapStore } from '@/stores/mapStore'
+import { onUnmounted } from 'vue'
 
+const gameStore = useGameStore()
 const mapStore = useMapStore()
 
 const props = defineProps<{
-  tilemap: Phaser.Tilemaps.Tilemap
+  tileMap: Phaser.Tilemaps.Tilemap
 }>()
+
+gameStore.connection?.on('map:character:join', async (data: MapCharacter) => {
+  mapStore.addCharacter(data)
+})
+
+gameStore.connection?.on('map:character:leave', (characterId: UUID) => {
+  mapStore.removeCharacter(characterId)
+})
+
+gameStore.connection?.on('map:character:move', (data: { characterId: UUID; positionX: number; positionY: number; rotation: number; isMoving: boolean }) => {
+  mapStore.updateCharacterPosition(data)
+  // @TODO: Replace with universal class, composable or store
+  if (data.characterId === gameStore.character?.id) {
+    gameStore.character!.positionX = data.positionX
+    gameStore.character!.positionY = data.positionY
+    gameStore.character!.rotation = data.rotation
+  }
+})
+
+gameStore.connection?.on('map:character:attack', (characterId: UUID) => {
+  mapStore.updateCharacterProperty(characterId, 'isAttacking', true)
+})
+
+onUnmounted(() => {
+  gameStore.connection?.off('map:character:join')
+  gameStore.connection?.off('map:character:leave')
+  gameStore.connection?.off('map:character:move')
+})
 </script>

src/components/game/map/Map.vue

@@ -1,22 +1,31 @@
 <template>
-  <MapTiles :key="mapStore.mapId" @tileMap:create="tileMap = $event" />
+  <MapTiles v-if="tileMap && tileMapLayer" :tileMap :tileMapLayer />
-  <PlacedMapObjects v-if="tileMap" :key="mapStore.mapId" :tilemap="tileMap" />
+  <PlacedMapObjects v-if="tileMap && tileMapLayer" :tileMap :tileMapLayer />
-  <Characters v-if="tileMap && mapStore.characters" :tilemap="tileMap" />
+  <Characters v-if="tileMap && mapStore.characters" :tileMap />
 </template>
 
 <script setup lang="ts">
-import type { MapCharacter, mapLoadData, UUID } from '@/application/types'
+import type { mapLoadData } from '@/application/types'
+import { unduplicateArray } from '@/application/utilities'
 import Characters from '@/components/game/map/Characters.vue'
 import MapTiles from '@/components/game/map/MapTiles.vue'
 import PlacedMapObjects from '@/components/game/map/PlacedMapObjects.vue'
+import { createTileLayer, createTileMap, loadTileTexturesFromMapTileArray } from '@/services/mapService'
+import { MapStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapStore } from '@/stores/mapStore'
-import { onUnmounted, shallowRef } from 'vue'
+import { useScene } from 'phavuer'
+import { onMounted, onUnmounted, shallowRef, watch } from 'vue'
+
+const scene = useScene()
 
 const gameStore = useGameStore()
 const mapStore = useMapStore()
 
+const mapStorage = new MapStorage()
+
 const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
+const tileMapLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
 
 // Event listeners
 gameStore.connection?.on('map:character:teleport', async (data: mapLoadData) => {
@@ -24,33 +33,37 @@ gameStore.connection?.on('map:character:teleport', async (data: mapLoadData) =>
   mapStore.setCharacters(data.characters)
 })
 
-gameStore.connection?.on('map:character:join', async (data: MapCharacter) => {
+async function initialize() {
-  mapStore.addCharacter(data)
+  if (!mapStore.mapId) return
-})
 
-gameStore.connection?.on('map:character:leave', (characterId: UUID) => {
+  const map = await mapStorage.getById(mapStore.mapId)
-  mapStore.removeCharacter(characterId)
+  if (!map) return
-})
 
-gameStore.connection?.on('map:character:attack', (characterId: UUID) => {
+  await loadTileTexturesFromMapTileArray(mapStore.mapId, scene)
-  mapStore.updateCharacterProperty(characterId, 'isAttacking', true)
-})
 
-gameStore.connection?.on('map:character:move', (data: { characterId: UUID; positionX: number; positionY: number; rotation: number; isMoving: boolean }) => {
+  tileMap.value = createTileMap(scene, map)
-  mapStore.updateCharacterPosition(data)
+  tileMapLayer.value = createTileLayer(tileMap.value, unduplicateArray(map.tiles))
-  // @TODO: Replace with universal class, composable or store
+}
-  if (data.characterId === gameStore.character?.id) {
+
-    gameStore.character!.positionX = data.positionX
+watch(
-    gameStore.character!.positionY = data.positionY
+  () => mapStore.mapId,
-    gameStore.character!.rotation = data.rotation
+  async () => {
+    await initialize()
   }
+)
+
+onMounted(async () => {
+  if (!mapStore.mapId) return
+  await initialize()
 })
 
 onUnmounted(() => {
-  mapStore.reset()
+  if (tileMap.value) {
+    tileMap.value.destroyLayer('tiles')
+    tileMap.value.removeAllLayers()
+    tileMap.value.destroy()
+  }
+
   gameStore.connection?.off('map:character:teleport')
-  gameStore.connection?.off('map:character:join')
-  gameStore.connection?.off('map:character:leave')
-  gameStore.connection?.off('map:character:move')
 })
 </script>

src/components/game/map/MapTiles.vue

@@ -1,74 +1,32 @@
 <template>
-  <Controls v-if="tileLayer" :layer="tileLayer" :depth="0" />
+  <Controls v-if="tileMapLayer" :layer="tileMapLayer" :depth="0" />
 </template>
 
 <script setup lang="ts">
-import config from '@/application/config'
-import type { Map as MapT, UUID } from '@/application/types'
-import { unduplicateArray } from '@/application/utilities'
 import Controls from '@/components/utilities/Controls.vue'
-import { loadMapTilesIntoScene, setLayerTiles } from '@/composables/mapComposable'
+import { loadTileTexturesFromMapTileArray, placeTiles } from '@/services/mapService'
 import { MapStorage } from '@/storage/storages'
 import { useMapStore } from '@/stores/mapStore'
 import { useScene } from 'phavuer'
-import { onBeforeUnmount, shallowRef } from 'vue'
+import { onMounted } from 'vue'
 
-import Tileset = Phaser.Tilemaps.Tileset
-
-const emit = defineEmits(['tileMap:create'])
 const scene = useScene()
 const mapStore = useMapStore()
 const mapStorage = new MapStorage()
 
-const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
+const props = defineProps<{
-const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
+  tileMap: Phaser.Tilemaps.Tilemap
+  tileMapLayer: Phaser.Tilemaps.TilemapLayer
+}>()
 
-function createTileMap(map: MapT) {
+onMounted(async () => {
-  const mapConfig = new Phaser.Tilemaps.MapData({
+  if (!mapStore.mapId) return
-    width: map.width,
-    height: map.height,
-    tileWidth: config.tile_size.width,
-    tileHeight: config.tile_size.height,
-    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
-    format: Phaser.Tilemaps.Formats.ARRAY_2D
-  })
 
-  const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapConfig)
+  const map = await mapStorage.getById(mapStore.mapId)
-  emit('tileMap:create', newTileMap)
+  if (!map) return
-  return newTileMap
-}
 
-function createTileLayer(currentTileMap: Phaser.Tilemaps.Tilemap, mapData: any) {
+  await loadTileTexturesFromMapTileArray(mapStore.mapId, scene)
-  const tilesArray = unduplicateArray(mapData?.tiles.flat())
 
-  const tilesetImages = tilesArray.map((tile: string, index: number) => {
+  placeTiles(props.tileMap, props.tileMapLayer, map.tiles)
-    return currentTileMap.addTilesetImage(tile, tile, config.tile_size.width, config.tile_size.height, 1, 2, index + 1, { x: 0, y: -config.tile_size.height })
-  })
-
-  // Add blank tile
-  tilesetImages.push(currentTileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.width, config.tile_size.height, 1, 2, 0, { x: 0, y: -config.tile_size.height }))
-
-  const layer = currentTileMap.createBlankLayer('tiles', tilesetImages as Tileset[], 0, config.tile_size.height) as Phaser.Tilemaps.TilemapLayer
-
-  layer.setDepth(0)
-  layer.setCullPadding(2, 2)
-  return layer
-}
-
-loadMapTilesIntoScene(mapStore.mapId as UUID, scene)
-  .then(() => mapStorage.get(mapStore.mapId))
-  .then((mapData) => {
-    if (!mapData || !mapData?.tiles) return
-    tileMap.value = createTileMap(mapData)
-    tileLayer.value = createTileLayer(tileMap.value, mapData)
-    setLayerTiles(tileMap.value, tileLayer.value, mapData.tiles)
-  })
-  .catch((error) => console.error('Failed to initialize map:', error))
-
-onBeforeUnmount(() => {
-  if (!tileMap.value) return
-  tileMap.value.destroyLayer('tiles')
-  tileMap.value.removeAllLayers()
-  tileMap.value.destroy()
 })
 </script>

src/components/game/map/PlacedMapObjects.vue

@@ -1,5 +1,5 @@
 <template>
-  <PlacedMapObject v-for="placedMapObject in items" :tilemap="tilemap" :placedMapObject />
+  <PlacedMapObject v-for="placedMapObject in items" :tileMap :tileMapLayer :placedMapObject />
 </template>
 
 <script setup lang="ts">
@@ -9,8 +9,11 @@ import { MapStorage } from '@/storage/storages'
 import { useMapStore } from '@/stores/mapStore'
 import { onMounted, ref } from 'vue'
 
+import TilemapLayer = Phaser.Tilemaps.TilemapLayer
+
 defineProps<{
-  tilemap: Phaser.Tilemaps.Tilemap
+  tileMap: Phaser.Tilemaps.Tilemap
+  tileMapLayer: TilemapLayer
 }>()
 
 const mapStore = useMapStore()
@@ -20,7 +23,7 @@ const items = ref<PlacedMapObjectT[]>([])
 onMounted(async () => {
   if (!mapStore.mapId) return
 
-  const map = await mapStorage.get(mapStore.mapId)
+  const map = await mapStorage.getById(mapStore.mapId)
   if (!map) return
 
   items.value = map.placedMapObjects

src/components/game/map/partials/PlacedMapObject.vue

@@ -1,43 +1,82 @@
 <template>
-  <Image v-if="gameStore.isTextureLoaded(props.placedMapObject.mapObject.id)" v-bind="imageProps" />
+  <Image v-if="mapObject && gameStore.isTextureLoaded(props.placedMapObject.mapObject as string)" v-bind="imageProps" />
 </template>
 
 <script setup lang="ts">
-import type { PlacedMapObject, TextureData } from '@/application/types'
+import config from '@/application/config'
-import { loadTexture } from '@/composables/gameComposable'
+import type { MapObject, PlacedMapObject } from '@/application/types'
-import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
+import { calculateIsometricDepth, loadMapObjectTextures, tileToWorldXY } from '@/services/mapService'
+import { MapObjectStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { Image, useScene } from 'phavuer'
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
+
+import Tilemap = Phaser.Tilemaps.Tilemap
+import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 
 const props = defineProps<{
-  tilemap: Phaser.Tilemaps.Tilemap
   placedMapObject: PlacedMapObject
+  tileMap: Tilemap
+  tileMapLayer: TilemapLayer
 }>()
 
-const gameStore = useGameStore()
 const scene = useScene()
 
+const gameStore = useGameStore()
+const mapEditor = useMapEditorComposable()
+
+const mapObject = ref<MapObject>()
+
+async function initialize() {
+  if (!props.placedMapObject.mapObject) return
+
+  /**
+   * Check if mapObject is an string or object, if its an object we assume its a mapObject and change it to a string
+   * We do this because this component is shared with the map editor, which gets sent the mapObject as an object by the server
+   */
+  if (typeof props.placedMapObject.mapObject === 'object') {
+    // @ts-ignore
+    props.placedMapObject.mapObject = props.placedMapObject.mapObject.id
+  }
+
+  const mapObjectStorage = new MapObjectStorage()
+  const _mapObject = await mapObjectStorage.getById(props.placedMapObject.mapObject as string)
+  if (!_mapObject) return
+
+  mapObject.value = _mapObject
+
+  await loadMapObjectTextures([_mapObject], scene)
+}
+
+function calculateObjectPlacement(mapObj: PlacedMapObject): { x: number; y: number } {
+  let position = tileToWorldXY(props.tileMapLayer, mapObj.positionX, mapObj.positionY)
+
+  return {
+    x: position.worldPositionX - mapObject.value!.frameWidth / 2,
+    y: position.worldPositionY - mapObject.value!.frameHeight / 2 + config.tile_size.height
+  }
+}
+
 const imageProps = computed(() => ({
-  depth: calculateIsometricDepth(props.placedMapObject.positionX, props.placedMapObject.positionY, props.placedMapObject.mapObject.frameWidth, props.placedMapObject.mapObject.frameHeight),
+  alpha: mapEditor.movingPlacedObject.value?.id == props.placedMapObject.id ? 0.5 : 1,
-  x: tileToWorldX(props.tilemap, props.placedMapObject.positionX, props.placedMapObject.positionY),
+  tint: mapEditor.selectedPlacedObject.value?.id == props.placedMapObject.id ? 0x00ff00 : 0xffffff,
-  y: tileToWorldY(props.tilemap, props.placedMapObject.positionX, props.placedMapObject.positionY),
+  depth: calculateIsometricDepth(props.placedMapObject.positionX, props.placedMapObject.positionY, mapObject.value!.frameWidth, mapObject.value!.frameHeight),
+  ...calculateObjectPlacement(props.placedMapObject),
   flipX: props.placedMapObject.isRotated,
-  texture: props.placedMapObject.mapObject.id,
+  texture: mapObject.value!.id,
-  originY: Number(props.placedMapObject.mapObject.originX),
+  originX: mapObject.value!.originX,
-  originX: Number(props.placedMapObject.mapObject.originY)
+  originY: mapObject.value!.originY
 }))
 
-loadTexture(scene, {
+watch(
-  key: props.placedMapObject.mapObject.id,
+  () => mapEditor.refreshMapObject.value,
-  data: '/textures/map_objects/' + props.placedMapObject.mapObject.id + '.png',
+  async () => {
-  group: 'map_objects',
+    await initialize()
-  updatedAt: props.placedMapObject.mapObject.updatedAt,
+  }
-  frameWidth: props.placedMapObject.mapObject.frameWidth,
+)
-  frameHeight: props.placedMapObject.mapObject.frameHeight
-} as TextureData).catch((error) => {
-  console.error('Error loading texture:', error)
-})
 
-onMounted(async () => {})
+onMounted(async () => {
+  await initialize()
+})
 </script>

src/components/gameMaster/GmPanel.vue

@@ -6,7 +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="$emit('open-map-editor')">Map editor</button>
+        <button class="btn-cyan py-1.5 px-4 min-w-24" type="button" @click="mapEditor.toggleActive()">Map editor</button>
       </div>
     </template>
     <template #modalBody>
@@ -20,13 +20,12 @@
 <script setup lang="ts">
 import AssetManager from '@/components/gameMaster/assetManager/AssetManager.vue'
 import Modal from '@/components/utilities/Modal.vue'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { ref } from 'vue'
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 
-defineEmits(['open-map-editor'])
-const gameStore = useGameStore()
 const mapEditor = useMapEditorComposable()
+const gameStore = useGameStore()
 
 let toggle = ref('asset-manager')
 </script>

src/components/gameMaster/assetManager/partials/mapObject/MapObjectList.vue

@@ -49,7 +49,7 @@ const handleFileUpload = (e: Event) => {
   if (!files) return
   gameStore.connection?.emit('gm:mapObject:upload', files, (response: boolean) => {
     if (!response) {
-      if (config.development) console.error('Failed to upload object')
+      if (config.environment === 'development') console.error('Failed to upload map object')
       return
     }
 

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

@@ -10,7 +10,7 @@
         <div class="w-full flex gap-2 mt-2 pb-4 relative">
           <button class="btn-cyan px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="saveSprite">Save</button>
           <button class="btn-red px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="deleteSprite">Delete</button>
-          <button class="btn bg-indigo-500 hover:bg-indigo-600 rounded text-white px-4 py-2 flex-1 sm:flex-none" type="button" @click.prevent="copySprite">
+          <button class="btn-indigo px-4 py-2 flex-1 sm:flex-none" type="button" @click.prevent="copySprite">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
             </svg>

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

@@ -42,7 +42,7 @@ const elementToScroll = ref()
 function newButtonClickHandler() {
   gameStore.connection?.emit('gm:sprite:create', {}, (response: boolean) => {
     if (!response) {
-      if (config.development) console.error('Failed to create new sprite')
+      if (config.environment === 'development') console.error('Failed to create new sprite')
       return
     }
 

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

@@ -2,7 +2,7 @@
   <div class="flex flex-wrap gap-3">
     <div v-for="(image, index) in modelValue" :key="index" class="h-20 w-20 p-4 bg-gray-300 bg-opacity-50 rounded text-center relative group cursor-move" draggable="true" @dragstart="dragStart($event, index)" @dragover.prevent @dragenter.prevent @drop="drop($event, index)">
       <img :src="image.url" class="max-w-full max-h-full object-contain pointer-events-none" alt="Uploaded image" @load="updateImageDimensions($event, index)" />
-      <div v-if="imageDimensions[index]" class="absolute bottom-1 right-1 bg-black/50 text-white text-xs px-1 py-0.5 rounded transition-opacity font-default">{{ image.dimensions.width }}x{{ image.dimensions.height }}</div>
+      <div v-if="imageDimensions[index]" class="absolute bottom-1 right-1 bg-black/50 text-white text-xs px-1 py-0.5 rounded transition-opacity font-default">{{ imageDimensions[index].width }}x{{ imageDimensions[index].height }}</div>
       <div class="absolute top-1 left-1 flex-row space-y-1">
         <button @click.stop="deleteImage(index)" class="bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity" aria-label="Delete image">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -17,7 +17,7 @@
         </button>
       </div>
 
-      <Modal :is-modal-open="selectedImageIndex === index" :modal-width="300" :modal-height="210" :is-resizable="false" :bg-style="'none'" @modal:close="closeOffsetModal">
+      <Modal :is-modal-open="selectedImageIndex === index" :modal-width="300" :modal-height="210" :is-resizable="false" bg-style="none" @modal:close="closeOffsetModal">
         <template #modalHeader>
           <h3 class="m-0 font-medium shrink-0 text-white">Action offset ({{ selectedImageIndex }})</h3>
         </template>

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

@@ -1,5 +1,5 @@
 <template>
-  <Modal :is-modal-open="isModalOpen" :modal-width="700" :modal-height="330" :bg-style="'none'" @modal:close="closeModal">
+  <Modal :is-modal-open="isModalOpen" :modal-width="700" :modal-height="330" bg-style="none" @modal:close="closeModal">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0 text-white">View sprite</h3>
     </template>

src/components/gameMaster/assetManager/partials/tile/TileList.vue

@@ -49,7 +49,7 @@ const handleFileUpload = (e: Event) => {
   if (!files) return
   gameStore.connection?.emit('gm:tile:upload', files, (response: boolean) => {
     if (!response) {
-      if (config.development) console.error('Failed to upload tile')
+      if (config.environment === 'development') console.error('Failed to upload tile')
       return
     }
 

src/components/gameMaster/mapEditor/Map.vue

@@ -1,7 +1,7 @@
 <template>
-  <MapTiles ref="mapTiles" @tileMap:create="tileMap = $event" />
+  <MapTiles ref="mapTiles" v-if="tileMap && tileMapLayer" :tileMap :tileMapLayer />
-  <PlacedMapObjects ref="mapObjects" v-if="tileMap" :tileMap="tileMap as Phaser.Tilemaps.Tilemap" />
+  <PlacedMapObjects ref="mapObjects" v-if="tileMap && tileMapLayer" :tileMap :tileMapLayer />
-  <MapEventTiles ref="eventTiles" v-if="tileMap" :tileMap="tileMap as Phaser.Tilemaps.Tilemap" />
+  <MapEventTiles ref="eventTiles" v-if="tileMap" :tileMap />
 </template>
 
 <script setup lang="ts">
@@ -9,10 +9,14 @@ import MapEventTiles from '@/components/gameMaster/mapEditor/mapPartials/MapEven
 import MapTiles from '@/components/gameMaster/mapEditor/mapPartials/MapTiles.vue'
 import PlacedMapObjects from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
+import { createTileLayer, createTileMap } from '@/services/mapService'
+import { TileStorage } from '@/storage/storages'
 import { useScene } from 'phavuer'
-import { onMounted, onUnmounted, shallowRef, useTemplateRef } from 'vue'
+import { onBeforeUnmount, onMounted, onUnmounted, shallowRef, useTemplateRef } from 'vue'
 
 const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
+const tileMapLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
+
 const mapEditor = useMapEditorComposable()
 
 const scene = useScene()
@@ -21,26 +25,87 @@ const mapTiles = useTemplateRef('mapTiles')
 const mapObjects = useTemplateRef('mapObjects')
 const eventTiles = useTemplateRef('eventTiles')
 
-function handlePointer(pointer: Phaser.Input.Pointer) {
+function handlePointerDown(pointer: Phaser.Input.Pointer) {
   if (!mapTiles.value || !mapObjects.value || !eventTiles.value) return
 
   // Check if left mouse button is pressed
   if (!pointer.isDown) return
 
-  // Check if shift is pressed or if we're in move mode, this means we are moving the camera
+  // Check if shift is not pressed, this means we are moving the camera
-  if (pointer.event.shiftKey || mapEditor.tool.value === 'move') return
+  if (pointer.event.shiftKey) return
 
   // Check if draw mode is tile
   switch (mapEditor.drawMode.value) {
     case 'tile':
       mapTiles.value.handlePointer(pointer)
       break
-    case 'object':
+    case 'map_object':
       mapObjects.value.handlePointer(pointer)
       break
-    case 'event':
+    case 'teleport':
+      eventTiles.value.handlePointer(pointer)
+      break
+    case 'blocking tile':
       eventTiles.value.handlePointer(pointer)
       break
   }
 }
+
+function handleKeyDown(event: KeyboardEvent) {
+  //CTRL+Y
+  if (event.key === 'y' && event.ctrlKey) {
+    mapTiles.value!.redo()
+  }
+
+  //CTRL+Z
+  if (event.key === 'z' && event.ctrlKey) {
+    mapTiles.value!.undo()
+  }
+}
+
+function handlePointerMove(pointer: Phaser.Input.Pointer) {
+  if (mapEditor.inputMode.value === 'hold' && pointer.isDown) {
+    handlePointerDown(pointer)
+  }
+}
+
+function handlePointerUp(pointer: Phaser.Input.Pointer) {
+  if (mapEditor.drawMode.value === 'tile') {
+    mapTiles.value?.finalizeCommand()
+  }
+}
+
+onMounted(async () => {
+  let mapValue = mapEditor.currentMap.value
+  if (!mapValue) return
+
+  const tileStorage = new TileStorage()
+  const allTiles = await tileStorage.getAll()
+  const allTileIds = allTiles.map((tile) => tile.id)
+
+  tileMap.value = createTileMap(scene, mapValue)
+  tileMapLayer.value = createTileLayer(tileMap.value, allTileIds)
+
+  addEventListener('keydown', handleKeyDown)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
+  scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
+})
+
+onUnmounted(() => {
+  if (tileMap.value) {
+    tileMap.value.destroyLayer('tiles')
+    tileMap.value.removeAllLayers()
+    tileMap.value.destroy()
+  }
+
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
+  scene.input.off(Phaser.Input.Events.POINTER_UP, handlePointerUp)
+  mapEditor.reset()
+})
+
+onBeforeUnmount(() => {
+  removeEventListener('keydown', handleKeyDown)
+})
 </script>

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

@@ -3,11 +3,11 @@
 </template>
 
 <script setup lang="ts">
-import { MapEventTileType, type MapEventTile, type Map as MapT } from '@/application/types'
+import { MapEventTileType, type MapEventTile, type Map as MapT, type UUID } from '@/application/types'
 import { uuidv4 } from '@/application/utilities'
-import { getTile, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { Image, useScene } from 'phavuer'
+import { getTile, tileToWorldX, tileToWorldY } from '@/services/mapService'
+import { Image } from 'phavuer'
 import { shallowRef } from 'vue'
 
 const mapEditor = useMapEditorComposable()
@@ -30,10 +30,8 @@ function getImageProps(tile: MapEventTile) {
 }
 
 function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
-  if (!tileLayer.value) return
-
   // Check if there is a tile
-  const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
+  const tile = getTile(props.tileMap, pointer.worldX, pointer.worldY)
   if (!tile) return
 
   // Check if event tile already exists on position
@@ -44,9 +42,9 @@ function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
   if (mapEditor.drawMode.value === 'teleport' && !mapEditor.teleportSettings.value.toMapId) return
 
   const newEventTile = {
-    id: uuidv4(),
+    id: uuidv4() as UUID,
-    mapId: map?.id,
+    mapId: map.id,
-    map: map?.id,
+    map: map.id,
     type: mapEditor.drawMode.value === 'blocking tile' ? MapEventTileType.BLOCK : MapEventTileType.TELEPORT,
     positionX: tile.x,
     positionY: tile.y,
@@ -61,19 +59,24 @@ function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
         : undefined
   }
 
-  map!.mapEventTiles = map!.mapEventTiles.concat(newEventTile as MapEventTile)
+  map.mapEventTiles.push(newEventTile)
 }
 
 function erase(pointer: Phaser.Input.Pointer, map: MapT) {
-  if (!tileLayer.value) return
   // Check if there is a tile
-  const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
+  const tile = getTile(props.tileMap, pointer.worldX, pointer.worldY)
   if (!tile) return
 
   // Check if event tile already exists on position
   const existingEventTile = map.mapEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
   if (!existingEventTile) return
 
+  if (mapEditor.drawMode.value !== existingEventTile.type.toLowerCase()) {
+    if (mapEditor.drawMode.value === 'blocking tile' && existingEventTile.type === MapEventTileType.BLOCK)
+      null //skip this case
+    else return
+  }
+
   // Remove existing event tile
   map.mapEventTiles = map.mapEventTiles.filter((eventTile) => eventTile.id !== existingEventTile.id)
 }
@@ -82,11 +85,7 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
   const map = mapEditor.currentMap.value
   if (!map) return
 
-  // Check if left mouse button is pressed
+  if (pointer.event.altKey) return
-  if (!pointer.isDown) return
-
-  // Check if shift is not pressed, this means we are moving the camera
-  if (pointer.event.shiftKey) return
 
   switch (mapEditor.tool.value) {
     case 'pencil':

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

@@ -1,62 +1,40 @@
 <template>
-  <Controls v-if="tileLayer" :layer="tileLayer" :depth="0" />
+  <Controls v-if="tileMapLayer" :layer="tileMapLayer" :depth="0" />
 </template>
 
 <script setup lang="ts">
-import config from '@/application/config'
 import Controls from '@/components/utilities/Controls.vue'
-import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/mapComposable'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { TileStorage } from '@/storage/storages'
+import { createTileArray, getTile, placeTile, placeTiles } from '@/services/mapService'
-import { useScene } from 'phavuer'
+import { onMounted, ref, watch } from 'vue'
-import { onMounted, onUnmounted, shallowRef, watch } from 'vue'
 
-import Tileset = Phaser.Tilemaps.Tileset
-
-const emit = defineEmits(['tileMap:create'])
-
-const scene = useScene()
 const mapEditor = useMapEditorComposable()
-const tileStorage = new TileStorage()
 
-const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
+defineExpose({ handlePointer, finalizeCommand, undo, redo })
-const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
 
-defineExpose({ handlePointer })
+const props = defineProps<{
+  tileMap: Phaser.Tilemaps.Tilemap
+  tileMapLayer: Phaser.Tilemaps.TilemapLayer
+}>()
 
-function createTileMap() {
+class EditorCommand {
-  const mapData = new Phaser.Tilemaps.MapData({
+  public operation: 'draw' | 'erase' = 'draw'
-    width: mapEditor.currentMap.value?.width,
+  public tileName: string = 'blank_tile'
-    height: mapEditor.currentMap.value?.height,
+  public affectedTiles: number[][]
-    tileWidth: config.tile_size.width,
-    tileHeight: config.tile_size.height,
-    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
-    format: Phaser.Tilemaps.Formats.ARRAY_2D
-  })
 
-  const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapData)
+  constructor(operation: 'draw' | 'erase', tileName: string) {
-  emit('tileMap:create', newTileMap)
+    this.operation = operation
-  return newTileMap
+    this.tileName = tileName
-}
+    this.affectedTiles = []
-
-async function createTileLayer(currentTileMap: Phaser.Tilemaps.Tilemap) {
-  const tiles = await tileStorage.getAll()
-  const tilesetImages = []
-
-  for (const tile of tiles) {
-    tilesetImages.push(currentTileMap.addTilesetImage(tile.id, tile.id, config.tile_size.width, config.tile_size.height, 1, 2, tilesetImages.length + 1, { x: 0, y: -config.tile_size.height }))
   }
-
-  // Add blank tile
-  tilesetImages.push(currentTileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.width, config.tile_size.height, 1, 2, 0, { x: 0, y: -config.tile_size.height }))
-
-  const layer = currentTileMap.createBlankLayer('tiles', tilesetImages as Tileset[], 0, config.tile_size.height) as Phaser.Tilemaps.TilemapLayer
-
-  layer.setDepth(0)
-  layer.setCullPadding(2, 2)
-  return layer
 }
 
+//Record of commands
+let commandStack: EditorCommand[] = []
+let currentCommand: EditorCommand | null = null
+let commandIndex = ref(0)
+let originTiles: string[][] = []
+
 function pencil(pointer: Phaser.Input.Pointer) {
   let map = mapEditor.currentMap.value
   if (!map) return
@@ -64,14 +42,14 @@ function pencil(pointer: Phaser.Input.Pointer) {
   // Check if there is a selected tile
   if (!mapEditor.selectedTile.value) return
 
-  if (!tileMap.value || !tileLayer.value) return
-
   // Check if there is a tile
-  const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
+  const tile = getTile(props.tileMapLayer, pointer.worldX, pointer.worldY)
   if (!tile) return
 
   // Place tile
-  placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, mapEditor.selectedTile.value)
+  placeTile(props.tileMap, props.tileMapLayer, tile.x, tile.y, mapEditor.selectedTile.value)
+
+  createCommandUpdate(tile.x, tile.y, mapEditor.selectedTile.value, 'draw')
 
   // Adjust mapEditorStore.map.tiles
   map.tiles[tile.y][tile.x] = mapEditor.selectedTile.value
@@ -81,29 +59,29 @@ function eraser(pointer: Phaser.Input.Pointer) {
   let map = mapEditor.currentMap.value
   if (!map) return
 
-  if (!tileMap.value || !tileLayer.value) return
-
   // Check if there is a tile
-  const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
+  const tile = getTile(props.tileMapLayer, pointer.worldX, pointer.worldY)
   if (!tile) return
 
   // Place tile
-  placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, 'blank_tile')
+  placeTile(props.tileMap, props.tileMapLayer, tile.x, tile.y, 'blank_tile')
+
+  createCommandUpdate(tile.x, tile.y, 'blank_tile', 'erase')
 
   // Adjust mapEditorStore.map.tiles
   map.tiles[tile.y][tile.x] = 'blank_tile'
 }
 
 function paint(pointer: Phaser.Input.Pointer) {
-  if (!tileMap.value || !tileLayer.value) return
+  let map = mapEditor.currentMap.value
+  if (!map) return
+
   // Set new tileArray with selected tile
-  const tileArray = createTileArray(tileMap.value.width, tileMap.value.height, mapEditor.selectedTile.value)
+  const tileArray = createTileArray(props.tileMap.width, props.tileMap.height, mapEditor.selectedTile.value)
-  setLayerTiles(tileMap.value, tileLayer.value, tileArray)
+  placeTiles(props.tileMap, props.tileMapLayer, tileArray)
 
   // Adjust mapEditorStore.map.tiles
-  if (mapEditor.currentMap.value) {
+  map.tiles = tileArray
-    mapEditor.currentMap.value.tiles = tileArray
-  }
 }
 
 // When alt is pressed, and the pointer is down, select the tile that the pointer is over
@@ -111,33 +89,17 @@ function tilePicker(pointer: Phaser.Input.Pointer) {
   let map = mapEditor.currentMap.value
   if (!map) return
 
-  if (!tileMap.value || !tileLayer.value) return
-
   // Check if there is a tile
-  const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
+  const tile = getTile(props.tileMapLayer, pointer.worldX, pointer.worldY)
   if (!tile) return
 
   // Select the tile
   mapEditor.setSelectedTile(map.tiles[tile.y][tile.x])
 }
 
-watch(
-  () => mapEditor.shouldClearTiles,
-  (shouldClear) => {
-    if (shouldClear && mapEditor.currentMap.value && tileMap.value && tileLayer.value) {
-      const blankTiles = createTileArray(tileLayer.value.width, tileLayer.value.height, 'blank_tile')
-      setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
-      mapEditor.currentMap.value.tiles = blankTiles
-      mapEditor.resetClearTilesFlag()
-    }
-  }
-)
-
 function handlePointer(pointer: Phaser.Input.Pointer) {
-  if (!tileMap.value || !tileLayer.value) return
-
   // Check if left mouse button is pressed
-  if (!pointer.isDown) return
+  if (!pointer.isDown && pointer.button === 0) return
 
   // Check if shift is not pressed, this means we are moving the camera
   if (pointer.event.shiftKey) return
@@ -162,33 +124,90 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
   }
 }
 
-onMounted(async () => {
+function createCommandUpdate(x: number, y: number, tileName: string, operation: 'draw' | 'erase') {
-  if (!mapEditor.currentMap.value) return
+  if (!currentCommand) {
+    currentCommand = new EditorCommand(operation, tileName)
+  }
 
-  tileMap.value = createTileMap()
+  //If position is already in, do not proceed
-  tileLayer.value = await createTileLayer(tileMap.value)
+  for (const vec of currentCommand.affectedTiles) {
+    if (vec[0] === x && vec[1] === y) return
+  }
 
-  // First fill the entire map with blank tiles using current map dimensions
+  currentCommand.affectedTiles.push([x, y])
-  const blankTiles = createTileArray(mapEditor.currentMap.value.width, mapEditor.currentMap.value.height, 'blank_tile')
+}
 
-  // Then overlay the map tiles, but only within the current map dimensions
+function finalizeCommand() {
-  const mapTiles = mapEditor.currentMap.value.tiles
+  if (!currentCommand) return
-  for (let y = 0; y < mapEditor.currentMap.value.height; y++) {
+  //Cut the stack so the current edit is the last
-    for (let x = 0; x < mapEditor.currentMap.value.width; x++) {
+  commandStack = commandStack.slice(0, commandIndex.value)
-      if (mapTiles[y] && mapTiles[y][x] !== undefined) {
+  commandStack.push(currentCommand)
-        blankTiles[y][x] = mapTiles[y][x]
+  if (commandStack.length >= 9) {
-      }
+    originTiles = applyCommands(originTiles, commandStack.shift()!)
+  }
+
+  commandIndex.value = commandStack.length
+  currentCommand = null
+}
+
+function undo() {
+  if (commandIndex.value > 0) {
+    commandIndex.value--
+    updateMapTiles()
+  }
+}
+
+function redo() {
+  if (commandIndex.value <= 9 && commandIndex.value <= commandStack.length) {
+    commandIndex.value++
+    updateMapTiles()
+  }
+}
+
+function applyCommands(tiles: string[][], ...commands: EditorCommand[]): string[][] {
+  let tileVersion = cloneArray(tiles)
+  for (let command of commands) {
+    for (const position of command.affectedTiles) {
+      tileVersion[position[1]][position[0]] = command.tileName
     }
   }
+  return tileVersion
+}
 
-  setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
+function updateMapTiles() {
-})
+  if (!mapEditor.currentMap.value) return
 
-onUnmounted(() => {
+  let indexedCommands = commandStack.slice(0, commandIndex.value)
-  if (tileMap.value) {
+  let modifiedTiles = applyCommands(originTiles, ...indexedCommands)
-    tileMap.value.destroyLayer('tiles')
+
-    tileMap.value.removeAllLayers()
+  placeTiles(props.tileMap, props.tileMapLayer, modifiedTiles)
-    tileMap.value.destroy()
+  mapEditor.currentMap.value.tiles = modifiedTiles
+}
+
+//Recursive Array Clone
+function cloneArray(arr: any[]): any[] {
+  return arr.map((item) => (item instanceof Array ? cloneArray(item) : item))
+}
+
+watch(
+  () => mapEditor.shouldClearTiles.value,
+  (shouldClear) => {
+    if (shouldClear && mapEditor.currentMap.value) {
+      const blankTiles = createTileArray(props.tileMapLayer.width, props.tileMapLayer.height, 'blank_tile')
+      placeTiles(props.tileMap, props.tileMapLayer, blankTiles)
+      mapEditor.currentMap.value.tiles = blankTiles
+      mapEditor.resetClearTilesFlag()
+    }
   }
+)
+
+onMounted(async () => {
+  if (!mapEditor.currentMap.value) return
+  const mapState = mapEditor.currentMap.value
+
+  //Clone
+  originTiles = cloneArray(mapState.tiles)
+
+  placeTiles(props.tileMap, props.tileMapLayer, mapState.tiles)
 })
 </script>

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

@@ -1,45 +0,0 @@
-<template>
-  <Image v-if="gameStore.isTextureLoaded(props.placedMapObject.mapObject.id)" v-bind="imageProps" />
-</template>
-
-<script setup lang="ts">
-import type { PlacedMapObject, TextureData } from '@/application/types'
-import { loadTexture } from '@/composables/gameComposable'
-import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
-import { useGameStore } from '@/stores/gameStore'
-import { Image, useScene } from 'phavuer'
-import { computed } from 'vue'
-
-const props = defineProps<{
-  tileMap: Phaser.Tilemaps.Tilemap
-  placedMapObject: PlacedMapObject
-  selectedPlacedMapObject: PlacedMapObject | null
-  movingPlacedMapObject: PlacedMapObject | null
-}>()
-
-const gameStore = useGameStore()
-const scene = useScene()
-
-const imageProps = computed(() => ({
-  alpha: props.movingPlacedMapObject?.id === props.placedMapObject.id ? 0.5 : 1,
-  tint: props.selectedPlacedMapObject?.id === props.placedMapObject.id ? 0x00ff00 : 0xffffff,
-  depth: calculateIsometricDepth(props.placedMapObject.positionX, props.placedMapObject.positionY, props.placedMapObject.mapObject.frameWidth, props.placedMapObject.mapObject.frameHeight),
-  x: tileToWorldX(props.tileMap, props.placedMapObject.positionX, props.placedMapObject.positionY),
-  y: tileToWorldY(props.tileMap, props.placedMapObject.positionX, props.placedMapObject.positionY),
-  flipX: props.placedMapObject.isRotated,
-  texture: props.placedMapObject.mapObject.id,
-  originY: Number(props.placedMapObject.mapObject.originX),
-  originX: Number(props.placedMapObject.mapObject.originY)
-}))
-
-loadTexture(scene, {
-  key: props.placedMapObject.mapObject.id,
-  data: '/textures/map_objects/' + props.placedMapObject.mapObject.id + '.png',
-  group: 'map_objects',
-  updatedAt: props.placedMapObject.mapObject.updatedAt,
-  frameWidth: props.placedMapObject.mapObject.frameWidth,
-  frameHeight: props.placedMapObject.mapObject.frameHeight
-} as TextureData).catch((error) => {
-  console.error('Error loading texture:', error)
-})
-</script>

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

@@ -1,112 +1,119 @@
 <template>
-  <SelectedPlacedMapObjectComponent v-if="selectedPlacedMapObject" :placedMapObject="selectedPlacedMapObject" @move="moveMapObject" @rotate="rotatePlacedMapObject" @delete="deletePlacedMapObject" />
+  <SelectedPlacedMapObjectComponent v-if="mapEditor.selectedPlacedObject.value" :key="mapEditor.selectedPlacedObject.value.id" :map :placedMapObject="mapEditor.selectedPlacedObject.value" @move="moveMapObject" @rotate="rotatePlacedMapObject" @delete="deletePlacedMapObject" />
-  <PlacedMapObject v-for="placedMapObject in mapEditor.currentMap.value?.placedMapObjects" :tileMap="tileMap" :placedMapObject :selectedPlacedMapObject :movingPlacedMapObject @pointerup="clickPlacedMapObject(placedMapObject)" />
+  <PlacedMapObject v-for="placedMapObject in mapEditor.currentMap.value?.placedMapObjects" :tileMap :tileMapLayer :placedMapObject @pointerdown="clickPlacedMapObject(placedMapObject)" />
 </template>
 
 <script setup lang="ts">
-import type { Map as MapT, PlacedMapObject as PlacedMapObjectT } from '@/application/types'
+import type { MapObject, Map as MapT, PlacedMapObject as PlacedMapObjectT } from '@/application/types'
 import { uuidv4 } from '@/application/utilities'
-import PlacedMapObject from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObject.vue'
+import PlacedMapObject from '@/components/game/map/partials/PlacedMapObject.vue'
 import SelectedPlacedMapObjectComponent from '@/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
+import { getTile } from '@/services/mapService'
 import { useScene } from 'phavuer'
-import { ref, watch } from 'vue'
+import { computed } from 'vue'
+
+import Tilemap = Phaser.Tilemaps.Tilemap
+import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 
 const scene = useScene()
 const mapEditor = useMapEditorComposable()
-const selectedPlacedMapObject = ref<PlacedMapObjectT | null>(null)
+const map = computed(() => mapEditor.currentMap.value!)
-const movingPlacedMapObject = ref<PlacedMapObjectT | null>(null)
-
-const props = defineProps<{
-  tileMap: Phaser.Tilemaps.Tilemap
-}>()
 
 defineExpose({ handlePointer })
 
+const props = defineProps<{
+  tileMap: Tilemap
+  tileMapLayer: TilemapLayer
+}>()
+
 function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
+  const tile = getTile(props.tileMap, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
   // Check if object already exists on position
-  const existingPlacedMapObject = findInMap(pointer, map)
+  const existingPlacedMapObject = findObjectByPointer(pointer, map)
   if (existingPlacedMapObject) return
 
+  if (!mapEditor.selectedMapObject.value) return
+
   const newPlacedMapObject: PlacedMapObjectT = {
     id: uuidv4(),
-    depth: 0,
+    mapObject: mapEditor.selectedMapObject.value,
-    map: map,
-    mapObject: mapEditor.selectedMapObject.value!,
     isRotated: false,
-    positionX: pointer.x,
+    positionX: tile.x,
-    positionY: pointer.y
+    positionY: tile.y
   }
 
   // Add new object to mapObjects
-  map.placedMapObjects.concat(newPlacedMapObject)
+  map.placedMapObjects.push(newPlacedMapObject)
+  mapEditor.selectedPlacedObject.value = newPlacedMapObject
 }
 
 function eraser(pointer: Phaser.Input.Pointer, map: MapT) {
   // Check if object already exists on position
-  const existingPlacedMapObject = findInMap(pointer, map)
+  const existingPlacedMapObject = findObjectByPointer(pointer, map)
   if (!existingPlacedMapObject) return
 
   // Remove existing object
   map.placedMapObjects = map.placedMapObjects.filter((placedMapObject) => placedMapObject.id !== existingPlacedMapObject.id)
 }
 
-function findInMap(pointer: Phaser.Input.Pointer, map: MapT) {
+function findObjectByPointer(pointer: Phaser.Input.Pointer, map: MapT): PlacedMapObjectT | undefined {
-  return map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === pointer.worldX && placedMapObject.positionY === pointer.worldY)
+  const tile = getTile(props.tileMap, pointer.worldX, pointer.worldY)
+  if (!tile) return undefined
+
+  return map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
 }
 
 function objectPicker(pointer: Phaser.Input.Pointer, map: MapT) {
   // Check if object already exists on position
-  const existingPlacedMapObject = findInMap(pointer, map)
+  const existingPlacedMapObject = findObjectByPointer(pointer, map)
   if (!existingPlacedMapObject) return
 
   // Select the object
-  mapEditor.setSelectedMapObject(existingPlacedMapObject.mapObject)
+  mapEditor.setSelectedMapObject(existingPlacedMapObject.mapObject as MapObject)
 }
 
 function moveMapObject(id: string, map: MapT) {
-  movingPlacedMapObject.value = map.placedMapObjects.find((object) => object.id === id) as PlacedMapObjectT
+  mapEditor.movingPlacedObject.value = map.placedMapObjects.find((object) => object.id === id) as PlacedMapObjectT
 
   function handlePointerMove(pointer: Phaser.Input.Pointer) {
-    if (!movingPlacedMapObject.value) return
+    if (!mapEditor.movingPlacedObject.value) return
+    const tile = getTile(props.tileMap, pointer.worldX, pointer.worldY)
+    if (!tile) return
 
-    movingPlacedMapObject.value.positionX = pointer.worldX
+    mapEditor.movingPlacedObject.value.positionX = tile.x
-    movingPlacedMapObject.value.positionY = pointer.worldY
+    mapEditor.movingPlacedObject.value.positionY = tile.y
   }
 
   scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
 
   function handlePointerUp() {
     scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
-    movingPlacedMapObject.value = null
+    mapEditor.movingPlacedObject.value = null
   }
 
   scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
 }
 
 function rotatePlacedMapObject(id: string, map: MapT) {
-  map.placedMapObjects = map.placedMapObjects.map((placedMapObject) => {
+  const matchingObject = map.placedMapObjects.find((placedMapObject) => placedMapObject.id === id)
-    if (placedMapObject.id === id) {
+  matchingObject!.isRotated = !matchingObject!.isRotated
-      return {
-        ...placedMapObject,
-        isRotated: !placedMapObject.isRotated
-      }
-    }
-    return placedMapObject
-  })
 }
 
 function deletePlacedMapObject(id: string, map: MapT) {
-  map.placedMapObjects = map.placedMapObjects.filter((object) => object.id !== id)
+  let mapE = mapEditor.currentMap.value!
-  selectedPlacedMapObject.value = null
+  mapE.placedMapObjects = map.placedMapObjects.filter((object) => object.id !== id)
+  mapEditor.selectedPlacedObject.value = null
 }
 
 function clickPlacedMapObject(placedMapObject: PlacedMapObjectT) {
-  selectedPlacedMapObject.value = placedMapObject
+  mapEditor.selectedPlacedObject.value = placedMapObject
 
   // If alt is pressed, select the object
   if (scene.input.activePointer.event.altKey) {
-    mapEditor.setSelectedMapObject(placedMapObject.mapObject)
+    mapEditor.setSelectedMapObject(placedMapObject.mapObject as MapObject)
   }
 }
 
@@ -114,21 +121,13 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
   const map = mapEditor.currentMap.value
   if (!map) return
 
-  if (mapEditor.drawMode.value !== 'map_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
-
   // Check if alt is pressed, this means we are selecting the object
   if (pointer.event.altKey) return
 
   // Check if tool is pencil
   switch (mapEditor.tool.value) {
     case 'pencil':
-      if (mapEditor.selectedMapObject.value) pencil(pointer, map)
+      pencil(pointer, map)
       break
     case 'eraser':
       eraser(pointer, map)
@@ -138,44 +137,4 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
       break
   }
 }
-
-// watch mapEditorStore.mapObjectList and update originX and originY of objects in mapObjects
-watch(
-  () => mapEditor.currentMap.value,
-  () => {
-    const map = mapEditor.currentMap.value
-    if (!map) return
-
-    const updatedMapObjects = map.placedMapObjects.map((mapObject) => {
-      const updatedMapObject = map.placedMapObjects.find((obj) => obj.id === mapObject.mapObject.id)
-      if (updatedMapObject) {
-        return {
-          ...mapObject,
-          mapObject: {
-            ...mapObject.mapObject,
-            originX: updatedMapObject.positionX,
-            originY: updatedMapObject.positionY
-          }
-        }
-      }
-      return mapObject
-    })
-
-    // Update the map with the new mapObjects
-    map.placedMapObjects = [...map.placedMapObjects, ...updatedMapObjects]
-
-    // Update mapObject if it's set
-    if (mapEditor.selectedMapObject.value) {
-      const updatedMapObject = map.placedMapObjects.find((obj) => obj.id === mapEditor.selectedMapObject.value?.id)
-      if (updatedMapObject) {
-        mapEditor.setSelectedMapObject({
-          ...mapEditor.selectedMapObject.value,
-          originX: updatedMapObject.positionX,
-          originY: updatedMapObject.positionY
-        })
-      }
-    }
-  }
-  // { deep: true }
-)
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <Modal ref="modalRef" :modal-width="300" :modal-height="420" :is-resizable="false" :bg-style="'none'">
+  <Modal ref="modalRef" :modal-width="300" :modal-height="420" :is-resizable="false" bg-style="none">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0 text-white">Create new map</h3>
     </template>
@@ -58,10 +58,6 @@ defineExpose({ open: () => modalRef.value?.open() })
 async function submit() {
   gameStore.connection?.emit('gm:map:create', { name: name.value, width: width.value, height: height.value }, async (response: Map | false) => {
     if (!response) {
-      gameStore.addNotification({
-        title: 'Error',
-        message: 'Failed to create map.'
-      })
       return
     }
 
@@ -72,8 +68,6 @@ async function submit() {
     pvp.value = false
 
     // Add map to storage
-
-    console.log(response)
     await mapStorage.add(response)
 
     // Let list know to fetch new maps

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

@@ -1,5 +1,5 @@
 <template>
-  <Modal ref="modalRef" :is-resizable="false" :modal-width="300" :modal-height="360" :bg-style="'none'">
+  <Modal ref="modalRef" :is-resizable="false" :modal-width="300" :modal-height="360" bg-style="none">
     <template #modalHeader>
       <h3 class="text-lg text-white">Maps</h3>
     </template>

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

@@ -1,46 +1,43 @@
 <template>
-  <div class="absolute border-0 border-l-2 border-solid border-gray-500 w-1/4 min-w-80 flex flex-col top-0 right-0 z-10 h-dvh bg-gray-800 z-20" v-if="isOpen">
+  <div class="absolute border-0 border-l-2 border-solid border-gray-500 w-1/4 min-w-80 flex flex-col top-0 right-0 z-10 h-dvh bg-gray-800">
-    <div class="relative z-10 p-2.5 border-solid border-0 border-b border-gray-500">
+    <div class="flex flex-col gap-2.5 p-2.5">
-      <h3 class="text-lg text-white">Map objects</h3>
+      <div class="relative flex">
+        <img src="/assets/icons/mapEditor/search.svg" class="w-4 h-4 py-0.5 absolute top-1/2 -translate-y-1/2 left-2.5" alt="Search icon" />
+        <label class="mb-1.5 font-titles hidden" for="search">Search</label>
+        <input @mousedown.stop class="!pl-7 input-field w-full" type="text" name="search" placeholder="Search" v-model="searchQuery" />
+      </div>
+      <div class="flex">
+        <select class="input-field w-full" name="lists">
+          <option value="tile">Tiles</option>
+          <option value="map_object">Objects</option>
+        </select>
+      </div>
     </div>
-    <div class="overflow-hidden grow relative">
+    <div class="h-full overflow-auto relative border-0 border-t border-solid border-gray-500 p-2.5">
-      <div class="absolute w-full h-full top-0 left-0">
+      <div class="h-full overflow-auto">
-        <div class="relative z-10 h-full">
+        <div class="flex justify-between flex-wrap gap-2.5 items-center">
-          <div class="flex pt-4 pl-4">
+          <div v-for="(mapObject, index) in filteredMapObjects" :key="index" class="max-w-1/4 inline-block">
-            <div class="w-full flex gap-1.5 flex-row">
+            <img
-              <div>
+              class="border-2 border-solid rounded max-w-full"
-                <label class="mb-1.5 font-titles hidden" for="search">Search...</label>
+              :src="`${config.server_endpoint}/textures/map_objects/${mapObject.id}.png`"
-                <input @mousedown.stop class="input-field" type="text" name="search" placeholder="Search" v-model="searchQuery" />
+              alt="Object"
-              </div>
+              @click="mapEditor.setSelectedMapObject(mapObject)"
-            </div>
+              :class="{
-          </div>
+                'cursor-pointer transition-all duration-300': true,
-          <div class="flex flex-col h-[calc(100%_-_170px)] p-4 pb-24">
+                'border-cyan shadow-lg': mapEditor.selectedMapObject.value?.id === mapObject.id,
-            <div class="mb-4 flex flex-wrap gap-2">
+                'border-transparent hover:border-gray-300': mapEditor.selectedMapObject.value?.id !== mapObject.id
-              <button v-for="tag in uniqueTags" :key="tag" @click="toggleTag(tag)" class="btn-cyan" :class="{ 'opacity-50': !selectedTags.includes(tag) }">
+              }"
-                {{ tag }}
+            />
-              </button>
-            </div>
-            <div class="h-full overflow-auto">
-              <div class="flex justify-between flex-wrap gap-2.5 items-center">
-                <div v-for="(mapObject, index) in filteredMapObjects" :key="index" class="max-w-1/4 inline-block">
-                  <img
-                    class="border-2 border-solid rounded max-w-full"
-                    :src="`${config.server_endpoint}/textures/map_objects/${mapObject.id}.png`"
-                    alt="Object"
-                    @click="mapEditor.setSelectedMapObject(mapObject)"
-                    :class="{
-                      'cursor-pointer transition-all duration-300': true,
-                      'border-cyan shadow-lg': mapEditor.selectedMapObject.value?.id === mapObject.id,
-                      'border-transparent hover:border-gray-300': mapEditor.selectedMapObject.value?.id !== mapObject.id
-                    }"
-                  />
-                </div>
-              </div>
-            </div>
           </div>
         </div>
       </div>
     </div>
+    <div class="flex flex-col h-40 gap-2.5 p-3.5 border-t border-0 border-solid border-gray-500">
+      <span>Tags:</span>
+      <div class="flex grow items-center flex-wrap gap-1.5 overflow-auto">
+        <span class="m-auto">No tags selected</span>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -52,13 +49,6 @@ import { MapObjectStorage } from '@/storage/storages'
 import { liveQuery } from 'dexie'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
-defineExpose({
-  open: () => (isOpen.value = true),
-  close: () => (isOpen.value = false),
-  toggle: () => (isOpen.value = !isOpen.value)
-})
-
-const isOpen = ref(false)
 const mapObjectStorage = new MapObjectStorage()
 const mapEditor = useMapEditorComposable()
 const searchQuery = ref('')
@@ -70,14 +60,6 @@ const uniqueTags = computed(() => {
   return Array.from(new Set(allTags))
 })
 
-const filteredMapObjects = computed(() => {
-  return mapObjectList.value.filter((object) => {
-    const matchesSearch = !searchQuery.value || object.name.toLowerCase().includes(searchQuery.value.toLowerCase())
-    const matchesTags = selectedTags.value.length === 0 || (object.tags && selectedTags.value.some((tag) => object.tags.includes(tag)))
-    return matchesSearch && matchesTags
-  })
-})
-
 const toggleTag = (tag: string) => {
   if (selectedTags.value.includes(tag)) {
     selectedTags.value = selectedTags.value.filter((t) => t !== tag)
@@ -86,6 +68,14 @@ const toggleTag = (tag: string) => {
   }
 }
 
+const filteredMapObjects = computed(() => {
+  return mapObjectList.value.filter((object) => {
+    const matchesSearch = !searchQuery.value || object.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+    const matchesTags = selectedTags.value.length === 0 || (object.tags && selectedTags.value.some((tag) => object.tags.includes(tag)))
+    return matchesSearch && matchesTags
+  })
+})
+
 let subscription: any = null
 
 onMounted(() => {
@@ -94,14 +84,13 @@ onMounted(() => {
       mapObjectList.value = result
     },
     error: (error) => {
-      console.error('Failed to fetch objects:', error)
+      console.error('Failed to fetch tiles:', error)
     }
   })
 })
 
 onUnmounted(() => {
-  if (subscription) {
+  if (!subscription) return
-    subscription.unsubscribe()
+  subscription.unsubscribe()
-  }
 })
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <Modal ref="modalRef" :modal-width="600" :modal-height="430" :bg-style="'none'">
+  <Modal ref="modalRef" :modal-width="600" :modal-height="430" bg-style="none">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0 text-white">Map settings</h3>
     </template>
@@ -14,22 +14,19 @@
           <div class="gap-2.5 flex flex-wrap mt-4">
             <div class="form-field-full">
               <label for="name">Name</label>
-              <input class="input-field" v-model="name" name="name" id="name" />
+              <input class="input-field" v-model="name" @input="updateValue" name="name" id="name" />
             </div>
             <div class="form-field-half">
               <label for="width">Width</label>
-              <input class="input-field" v-model="width" name="width" id="width" type="number" />
+              <input class="input-field" v-model="width" @input="updateValue" name="width" id="width" type="number" />
             </div>
             <div class="form-field-half">
               <label for="height">Height</label>
-              <input class="input-field" v-model="height" name="height" id="height" type="number" />
+              <input class="input-field" v-model="height" @input="updateValue" name="height" id="height" type="number" />
             </div>
-            <div class="form-field-full">
+            <div>
-              <label for="pvp">PVP enabled</label>
+              <label class="mr-4" for="pvp">PVP enabled</label>
-              <select v-model="pvp" class="input-field" name="pvp" id="pvp">
+              <input type="checkbox" v-model="pvp" @input="updateValue" class="input-field scale-125" name="pvp" id="pvp" />
-                <option :value="false">No</option>
-                <option :value="true">Yes</option>
-              </select>
             </div>
           </div>
         </form>
@@ -51,15 +48,15 @@ import type { UUID } from '@/application/types'
 import { uuidv4 } from '@/application/utilities'
 import Modal from '@/components/utilities/Modal.vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { ref, useTemplateRef, watch } from 'vue'
+import { onMounted, ref, useTemplateRef, watch } from 'vue'
 
 const mapEditor = useMapEditorComposable()
 const screen = ref('settings')
 
-const name = ref(mapEditor.currentMap.value?.name)
+const name = ref<string | undefined>('Map')
-const width = ref(mapEditor.currentMap.value?.width)
+const width = ref<number>(0)
-const height = ref(mapEditor.currentMap.value?.height)
+const height = ref<number>(0)
-const pvp = ref(mapEditor.currentMap.value?.pvp)
+const pvp = ref<boolean>(false)
 const mapEffects = ref(mapEditor.currentMap.value?.mapEffects || [])
 const modalRef = useTemplateRef('modalRef')
 
@@ -67,36 +64,35 @@ defineExpose({
   open: () => modalRef.value?.open()
 })
 
-watch(name, (value) => {
+function updateValue(event: Event) {
-  mapEditor.updateProperty('name', value!)
+  let ev = event.target as HTMLInputElement
-})
+  const value = ev.name === 'pvp' ? (ev.checked ? 1 : 0) : ev.value
+  mapEditor.updateProperty(ev.name as 'name' | 'width' | 'height' | 'pvp' | 'mapEffects', value)
+}
 
-watch(width, (value) => {
+watch(
-  mapEditor.updateProperty('width', value!)
+  () => mapEditor.currentMap.value,
-})
+  (map) => {
-
+    if (!map) return
-watch(height, (value) => {
+    name.value = map.name
-  mapEditor.updateProperty('height', value!)
+    width.value = map.width
-})
+    height.value = map.height
-
+    pvp.value = map.pvp
-watch(pvp, (value) => {
+    mapEffects.value = map.mapEffects
-  mapEditor.updateProperty('pvp', value!)
+  }
-})
+)
-
-watch(mapEffects, (value) => {
-  mapEditor.updateProperty('mapEffects', value!)
-})
 
 const addEffect = () => {
   mapEffects.value.push({
-    id: uuidv4() as UUID, // Simple unique id generation
+    id: uuidv4(),
-    map: mapEditor.currentMap.value!,
     effect: '',
     strength: 1
   })
+  mapEditor.updateProperty('mapEffects', mapEffects.value)
 }
 
 const removeEffect = (index: number) => {
   mapEffects.value.splice(index, 1)
+  mapEditor.updateProperty('mapEffects', mapEffects.value)
 }
 </script>

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

@@ -1,33 +1,113 @@
 <template>
-  <div class="flex flex-col items-center py-5 px-3 fixed bottom-14 right-0">
+  <div class="flex flex-col items-center px-5 py-1 fixed bottom-20 left-0 z-20">
-    <div class="self-end mt-2 flex gap-2">
+    <div class="flex h-10 gap-2">
-      <button @mousedown.stop @click="handleDelete" class="btn-red py-1.5 px-4">
+      <button @mousedown.stop @click="handleDelete" class="btn-red !py-3 px-4">
         <img src="/assets/icons/trashcan.svg" class="w-4 h-4" alt="Delete" />
       </button>
+      <button @mousedown.stop @click="showMapObjectSettings = !showMapObjectSettings" class="btn-indigo !py-3 px-4">
+        <img src="/assets/icons/mapEditor/gear.svg" class="w-4 h-4 invert" alt="Delete" />
+      </button>
       <button @mousedown.stop @click="handleRotate" class="btn-cyan py-1.5 px-4">Rotate</button>
       <button @mousedown.stop @click="handleMove" class="btn-cyan py-1.5 px-4 min-w-24">Move</button>
     </div>
   </div>
+
+  <Modal :is-modal-open="showMapObjectSettings" @modal:close="showMapObjectSettings = false" :modal-height="320" bg-style="none">
+    <template #modalHeader>
+      <h3 class="m-0 font-medium shrink-0 text-white">Map object settings</h3>
+    </template>
+    <template #modalBody>
+      <div class="m-4">
+        <form method="post" @submit.prevent="" class="inline">
+          <div class="gap-2.5 flex flex-wrap">
+            <div class="form-field-full">
+              <label for="name">Name</label>
+              <input class="input-field" v-model="mapObjectName" name="name" id="name" />
+            </div>
+            <div class="form-field-half">
+              <label for="originX">Origin X</label>
+              <input class="input-field" v-model="mapObjectOriginX" name="originX" id="originX" type="number" min="0.0" step="0.01" />
+            </div>
+            <div class="form-field-half">
+              <label for="originY">Origin Y</label>
+              <input class="input-field" v-model="mapObjectOriginY" name="originY" id="originY" type="number" min="0.0" step="0.01" />
+            </div>
+          </div>
+          <button class="btn-cyan px-4 py-1.5 min-w-24" @click="handleUpdate">Save</button>
+        </form>
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script setup lang="ts">
-import type { PlacedMapObject } from '@/application/types'
+import type { MapObject, Map as MapT, PlacedMapObject } from '@/application/types'
+import Modal from '@/components/utilities/Modal.vue'
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
+import { MapObjectStorage } from '@/storage/storages'
+import { useGameStore } from '@/stores/gameStore'
+import { onMounted, ref } from 'vue'
 
 const props = defineProps<{
   placedMapObject: PlacedMapObject
+  map: MapT
 }>()
 
 const emit = defineEmits(['move', 'rotate', 'delete'])
 
+const gameStore = useGameStore()
+const mapEditor = useMapEditorComposable()
+
+const mapObjectStorage = new MapObjectStorage()
+const mapObject = ref<MapObject | null>(null)
+const showMapObjectSettings = ref(false)
+const mapObjectName = ref('')
+const mapObjectOriginX = ref(0)
+const mapObjectOriginY = ref(0)
+
 const handleMove = () => {
-  emit('move', props.placedMapObject.id)
+  emit('move', props.placedMapObject.id, props.map)
 }
 
 const handleRotate = () => {
-  emit('rotate', props.placedMapObject.id)
+  emit('rotate', props.placedMapObject.id, props.map)
 }
 
 const handleDelete = () => {
-  emit('delete', props.placedMapObject.id)
+  emit('delete', props.placedMapObject.id, props.map)
 }
+
+async function handleUpdate() {
+  if (!mapObject.value) return
+
+  gameStore.connection?.emit(
+    'gm:mapObject:update',
+    {
+      id: props.placedMapObject.mapObject as string,
+      name: mapObjectName.value,
+      originX: mapObjectOriginX.value,
+      originY: mapObjectOriginY.value
+    },
+    async (response: boolean) => {
+      if (!response) return
+      await mapObjectStorage.update(mapObject.value!.id, {
+        name: mapObjectName.value,
+        originX: mapObjectOriginX.value,
+        originY: mapObjectOriginY.value
+      })
+      mapEditor.triggerMapObjectRefresh()
+    }
+  )
+}
+
+onMounted(async () => {
+  if (!props.placedMapObject.mapObject) return
+
+  mapObject.value = await mapObjectStorage.getById(props.placedMapObject.mapObject as string)
+  if (!mapObject.value) return
+
+  mapObjectName.value = mapObject.value.name
+  mapObjectOriginX.value = mapObject.value.originX
+  mapObjectOriginY.value = mapObject.value.originY
+})
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <Modal ref="modalRef" @modal:close="() => mapEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false" :bg-style="'none'">
+  <Modal ref="modalRef" @modal:close="() => mapEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false" bg-style="none">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0 text-white">Teleport settings</h3>
     </template>

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

@@ -1,86 +1,81 @@
 <template>
-  <div class="absolute border-0 border-l-2 border-solid border-gray-500 w-1/4 min-w-80 flex flex-col top-0 right-0 z-10 h-dvh bg-gray-800 z-20" v-if="isOpen">
+  <div class="absolute border-0 border-l-2 border-solid border-gray-500 w-1/4 min-w-80 flex flex-col top-0 right-0 z-10 h-dvh bg-gray-800">
-    <div class="relative z-10 p-2.5 border-solid border-0 border-b border-gray-500">
+    <div class="flex flex-col gap-2.5 p-2.5">
-      <h3 class="text-lg text-white">Tiles</h3>
+      <div class="relative flex">
+        <img src="/assets/icons/mapEditor/search.svg" class="w-4 h-4 py-0.5 absolute top-1/2 -translate-y-1/2 left-2.5" alt="Search icon" />
+        <label class="mb-1.5 font-titles hidden" for="search">Search</label>
+        <input @mousedown.stop class="!pl-7 input-field w-full" type="text" name="search" placeholder="Search" v-model="searchQuery" />
+      </div>
+      <div class="flex">
+        <select class="input-field w-full" name="lists">
+          <option value="tile">Tiles</option>
+          <option value="map_object">Objects</option>
+        </select>
+      </div>
     </div>
-    <div class="overflow-hidden grow relative">
+    <div class="h-full overflow-auto relative border-0 border-t border-solid border-gray-500 p-2.5">
-      <div class="absolute top-0 left-0 h-full w-full">
+      <div class="h-full" v-if="!selectedGroup">
-        <div class="relative z-10 h-full">
+        <div class="grid grid-cols-4 gap-2 justify-items-center">
-          <div class="h-full" v-if="!selectedGroup">
+          <div v-for="group in groupedTiles" :key="group.parent.id" class="flex flex-col items-center justify-center relative">
-            <div class="flex pt-4 pl-4">
+            <img
-              <div class="w-full flex gap-1.5 flex-row">
+              class="max-w-full max-h-full border-2 border-solid rounded cursor-pointer transition-all duration-300"
-                <div>
+              :src="`${config.server_endpoint}/textures/tiles/${group.parent.id}.png`"
-                  <label class="mb-1.5 font-titles hidden" for="search">Search...</label>
+              :alt="group.parent.name"
-                  <input @mousedown.stop class="input-field" type="text" name="search" placeholder="Search" v-model="searchQuery" />
+              @click="openGroup(group)"
-                </div>
+              @load="() => tileProcessor.processTile(group.parent)"
-              </div>
+              :class="{
-            </div>
+                'border-cyan shadow-lg': isActiveTile(group.parent),
-            <div class="flex flex-col h-[calc(100%_-_170px)] p-4 pb-24">
+                'border-transparent hover:border-gray-300': !isActiveTile(group.parent)
-              <div class="mb-4 flex flex-wrap gap-2">
+              }"
-                <button v-for="tag in uniqueTags" :key="tag" @click="toggleTag(tag)" class="btn-cyan" :class="{ 'opacity-50': !selectedTags.includes(tag) }">
+            />
-                  {{ tag }}
+            <span class="text-xs mt-1">{{ getTileCategory(group.parent) }}</span>
-                </button>
+            <span v-if="group.children.length > 0" class="absolute top-0 right-0 bg-cyan text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">
-              </div>
+              {{ group.children.length + 1 }}
-              <div class="h-full flex-grow overflow-y-auto">
+            </span>
-                <div class="grid grid-cols-4 gap-2 justify-items-center">
-                  <div v-for="group in groupedTiles" :key="group.parent.id" class="flex flex-col items-center justify-center relative">
-                    <img
-                      class="max-w-full max-h-full border-2 border-solid rounded cursor-pointer transition-all duration-300"
-                      :src="`${config.server_endpoint}/textures/tiles/${group.parent.id}.png`"
-                      :alt="group.parent.name"
-                      @click="openGroup(group)"
-                      @load="() => tileProcessor.processTile(group.parent)"
-                      :class="{
-                        'border-cyan shadow-lg': isActiveTile(group.parent),
-                        'border-transparent hover:border-gray-300': !isActiveTile(group.parent)
-                      }"
-                    />
-                    <span class="text-xs mt-1">{{ getTileCategory(group.parent) }}</span>
-                    <span v-if="group.children.length > 0" class="absolute top-0 right-0 bg-cyan text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">
-                      {{ group.children.length + 1 }}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
           </div>
-          <div v-else class="h-full overflow-auto">
+        </div>
-            <div class="p-4">
+      </div>
-              <button @click="closeGroup" class="btn-cyan mb-4">Back to All Tiles</button>
+      <div v-else class="h-full overflow-auto">
-              <h4 class="text-lg mb-4">{{ selectedGroup.parent.name }} Group</h4>
+        <div class="p-4">
-              <div class="grid grid-cols-4 gap-2 justify-items-center">
+          <button @click="closeGroup" class="btn-cyan mb-4">Back to All Tiles</button>
-                <div class="flex flex-col items-center justify-center">
+          <h4 class="text-lg mb-4">{{ selectedGroup.parent.name }} Group</h4>
-                  <img
+          <div class="grid grid-cols-4 gap-2 justify-items-center">
-                    class="max-w-full max-h-full border-2 border-solid rounded cursor-pointer transition-all duration-300"
+            <div class="flex flex-col items-center justify-center">
-                    :src="`${config.server_endpoint}/textures/tiles/${selectedGroup.parent.id}.png`"
+              <img
-                    :alt="selectedGroup.parent.name"
+                class="max-w-full max-h-full border-2 border-solid rounded cursor-pointer transition-all duration-300"
-                    @click="selectTile(selectedGroup.parent.id)"
+                :src="`${config.server_endpoint}/textures/tiles/${selectedGroup.parent.id}.png`"
-                    :class="{
+                :alt="selectedGroup.parent.name"
-                      'border-cyan shadow-lg': isActiveTile(selectedGroup.parent),
+                @click="selectTile(selectedGroup.parent.id)"
-                      'border-transparent hover:border-gray-300': !isActiveTile(selectedGroup.parent)
+                :class="{
-                    }"
+                  'border-cyan shadow-lg': isActiveTile(selectedGroup.parent),
-                  />
+                  'border-transparent hover:border-gray-300': !isActiveTile(selectedGroup.parent)
-                  <span class="text-xs mt-1">{{ getTileCategory(selectedGroup.parent) }}</span>
+                }"
-                </div>
+              />
-                <div v-for="childTile in selectedGroup.children" :key="childTile.id" class="flex flex-col items-center justify-center">
+              <span class="text-xs mt-1">{{ getTileCategory(selectedGroup.parent) }}</span>
-                  <img
+            </div>
-                    class="max-w-full max-h-full border-2 border-solid rounded cursor-pointer transition-all duration-300"
+            <div v-for="childTile in selectedGroup.children" :key="childTile.id" class="flex flex-col items-center justify-center">
-                    :src="`${config.server_endpoint}/textures/tiles/${childTile.id}.png`"
+              <img
-                    :alt="childTile.name"
+                class="max-w-full max-h-full border-2 border-solid rounded cursor-pointer transition-all duration-300"
-                    @click="selectTile(childTile.id)"
+                :src="`${config.server_endpoint}/textures/tiles/${childTile.id}.png`"
-                    :class="{
+                :alt="childTile.name"
-                      'border-cyan shadow-lg': isActiveTile(childTile),
+                @click="selectTile(childTile.id)"
-                      'border-transparent hover:border-gray-300': !isActiveTile(childTile)
+                :class="{
-                    }"
+                  'border-cyan shadow-lg': isActiveTile(childTile),
-                  />
+                  'border-transparent hover:border-gray-300': !isActiveTile(childTile)
-                  <span class="text-xs mt-1">{{ getTileCategory(childTile) }}</span>
+                }"
-                </div>
+              />
-              </div>
+              <span class="text-xs mt-1">{{ getTileCategory(childTile) }}</span>
             </div>
           </div>
         </div>
       </div>
     </div>
+    <div class="flex flex-col h-40 gap-2.5 p-3.5 border-t border-0 border-solid border-gray-500">
+      <span>Tags:</span>
+      <div class="flex grow items-center flex-wrap gap-1.5 overflow-auto">
+        <span class="m-auto">No tags selected</span>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -92,7 +87,6 @@ import { useTileProcessingComposable } from '@/composables/useTileProcessingComp
 import { TileStorage } from '@/storage/storages'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
-const isOpen = ref(false)
 const tileStorage = new TileStorage()
 const mapEditor = useMapEditorComposable()
 const tileProcessor = useTileProcessingComposable()
@@ -102,12 +96,6 @@ const tileCategories = ref<Map<string, string>>(new Map())
 const selectedGroup = ref<{ parent: Tile; children: Tile[] } | null>(null)
 const tiles = ref<Tile[]>([])
 
-defineExpose({
-  open: () => (isOpen.value = true),
-  close: () => (isOpen.value = false),
-  toggle: () => (isOpen.value = !isOpen.value)
-})
-
 const uniqueTags = computed(() => {
   const allTags = tiles.value.flatMap((tile) => tile.tags || [])
   return Array.from(new Set(allTags))

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

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex justify-center p-5">
+  <div class="flex justify-between p-5 w-[calc(100%_-_40px)] fixed bottom-0 left-0 z-20" :class="{ 'list-open': listOpen }">
-    <div class="toolbar fixed bottom-0 left-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10 z-20">
+    <div class="toolbar rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10">
       <div ref="toolbar" class="tools flex gap-2.5" v-if="mapEditor.currentMap.value">
         <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan gap-2.5': mapEditor.tool.value === 'move' }" @click="handleClick('move')">
           <img class="invert w-5 h-5" src="/assets/icons/mapEditor/move.svg" alt="Move camera" /> <span class="h-5" :class="{ 'ml-2.5': mapEditor.tool.value !== 'move' }">(M)</span>
@@ -72,49 +72,50 @@
 
         <div class="w-px bg-cyan"></div>
 
-        <label class="my-auto gap-0" for="checkbox">Continuous Drawing</label>
+        <button class="flex justify-center items-center min-w-10 p-0 relative" @click="isMapEditorSettingsModalOpen = !isMapEditorSettingsModalOpen"><img class="invert w-5 h-5" src="/assets/icons/mapEditor/settings.svg" alt="Map settings" /> <span class="h-5 ml-2.5">(S)</span></button>
-        <input type="checkbox" />
-      </div>
-
-      <div class="toolbar fixed bottom-0 right-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10 space-x-2">
-        <button class="btn-cyan px-3.5" @click="() => emit('open-maps')">Load</button>
-        <button class="btn-cyan px-3.5" @click="() => emit('save')" v-if="mapEditor.currentMap.value">Save</button>
-        <button class="btn-cyan px-3.5" @click="() => emit('clear')" v-if="mapEditor.currentMap.value">Clear</button>
-        <button class="btn-cyan px-3.5" @click="() => emit('close-editor')">Exit</button>
       </div>
     </div>
+    <div class="toolbar rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10 space-x-2">
+      <button class="btn-cyan px-3.5" @click="() => emit('open-maps')">Load</button>
+      <button class="btn-cyan px-3.5" @click="() => emit('save')" v-if="mapEditor.currentMap.value">Save</button>
+      <button class="btn-cyan px-3.5" @click="() => emit('clear')" v-if="mapEditor.currentMap.value">Clear</button>
+      <button class="btn-cyan px-3.5" @click="() => emit('close-editor')">Exit</button>
+    </div>
   </div>
+
+  <Modal :isModalOpen="isMapEditorSettingsModalOpen" @modal:close="() => (isMapEditorSettingsModalOpen = false)" :modal-width="300" :modal-height="350" :is-resizable="false" bg-style="none">
+    <template #modalHeader>
+      <h3 class="m-0 font-medium shrink-0 text-white">Map editor settings</h3>
+    </template>
+    <template #modalBody>
+      <div class="m-4 flex items-center space-x-2">
+        <input id="continuous-drawing" @change="handleCheck" v-model="checkboxValue" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" />
+        <label for="continuous-drawing" class="text-sm font-medium text-gray-200 cursor-pointer"> Continuous Drawing </label>
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script setup lang="ts">
+import Modal from '@/components/utilities/Modal.vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { onClickOutside } from '@vueuse/core'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 
 const mapEditor = useMapEditorComposable()
 
-const emit = defineEmits(['save', 'clear', 'open-maps', 'open-settings', 'close-editor', 'open-tile-list', 'open-map-object-list', 'close-lists'])
+const emit = defineEmits(['save', 'clear', 'open-maps', 'open-settings', 'close-editor'])
 
-// track when clicked outside of toolbar items
+// States
 const toolbar = ref(null)
-
+const isMapEditorSettingsModalOpen = ref(false)
-// track select state
+const selectPencilOpen = ref(false)
-let selectPencilOpen = ref(false)
+const selectEraserOpen = ref(false)
-let selectEraserOpen = ref(false)
+const checkboxValue = ref<Boolean>(false)
-
+const listOpen = ref(false)
-let tileListShown = ref(false)
-let mapObjectListShown = ref(false)
-
-defineExpose({ tileListShown, mapObjectListShown })
 
 // drawMode
 function setDrawMode(value: string) {
-  if (mapEditor.tool.value === 'paint' || mapEditor.tool.value === 'pencil' || mapEditor.tool.value === 'eraser') {
-    emit('close-lists')
-    if (value === 'tile') emit('open-tile-list')
-    if (value === 'map_object') emit('open-map-object-list')
-  }
-
   mapEditor.setDrawMode(value)
   selectPencilOpen.value = false
   selectEraserOpen.value = false
@@ -131,17 +132,23 @@ function setEraserMode() {
   selectEraserOpen.value = false
 }
 
+function handleCheck() {
+  mapEditor.setInputMode(checkboxValue.value ? 'hold' : 'tap')
+}
+
 function handleModeClick(mode: string, type: 'pencil' | 'eraser') {
   setDrawMode(mode)
   type === 'pencil' ? setPencilMode() : setEraserMode()
 }
 
 function handleClick(tool: string) {
-  if (tool === 'settings') {
+  if (tool === 'mapEditorSettings') {
-    emit('open-settings')
+    isMapEditorSettingsModalOpen.value = true
-    emit('close-lists')
+    listOpen.value = false
+  } else if (tool === 'settings') {
+    listOpen.value = false
   } else if (tool === 'move') {
-    emit('close-lists')
+    listOpen.value = false
     mapEditor.setTool(tool)
   } else {
     mapEditor.setTool(tool)
@@ -167,12 +174,15 @@ function initKeyShortcuts(event: KeyboardEvent) {
   // prevent if focused on composables
   if (document.activeElement?.tagName === 'INPUT') return
 
+  if (event.ctrlKey) return
+
   const keyActions: { [key: string]: string } = {
     m: 'move',
     p: 'pencil',
     e: 'eraser',
     b: 'paint',
-    z: 'settings'
+    z: 'settings',
+    s: 'mapEditorSettings'
   }
 
   if (keyActions.hasOwnProperty(event.key)) {

src/components/login/LoginForm.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-import { login } from '@/services/authentication'
+import { login } from '@/services/authenticationService'
 import { useGameStore } from '@/stores/gameStore'
 import { useCookies } from '@vueuse/integrations/useCookies'
 import { onMounted, ref } from 'vue'

src/components/login/NewPasswordForm.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import { newPassword } from '@/services/authentication'
+import { newPassword } from '@/services/authenticationService'
 import { useGameStore } from '@/stores/gameStore'
 import { useCookies } from '@vueuse/integrations/useCookies'
 import { onMounted, ref } from 'vue'

src/components/login/RegisterForm.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-import { login, register } from '@/services/authentication'
+import { login, register } from '@/services/authenticationService'
 import { useGameStore } from '@/stores/gameStore'
 import { useCookies } from '@vueuse/integrations/useCookies'
 import { onMounted, ref } from 'vue'

src/components/login/ResetPasswordModal.vue

@@ -30,7 +30,7 @@
 
 <script setup lang="ts">
 import Modal from '@/components/utilities/Modal.vue'
-import { resetPassword } from '@/services/authentication'
+import { resetPassword } from '@/services/authenticationService'
 import { useGameStore } from '@/stores/gameStore'
 import { ref } from 'vue'
 

src/components/screens/Characters.vue

@@ -18,11 +18,11 @@
             <div class="absolute right-[calc(100%_+_16px)] -top-px flex gap-2 flex-col">
               <div v-for="character in characters" :key="character.id" class="character relative rounded default-border w-12 h-12 bg-[url('/assets/ui-texture.png')] after:absolute after:w-full after:h-px after:bg-gray-500" :class="{ active: selectedCharacterId === character.id }">
                 <img src="/assets/placeholders/head.png" class="w-9 h-9 object-contain center-element" alt="Player head" />
-                <input class="h-full w-full absolute m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0" type="radio" name="character" :value="character.id" v-model="selectedCharacterId" />
+                <input class="h-full w-full absolute m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 btn-sound" type="radio" name="character" :value="character.id" v-model="selectedCharacterId" />
               </div>
               <div class="character relative rounded default-border w-12 h-12 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 focus-visible:outline-offset-0" @click="isCreateNewCharacterModalOpen = true">
+                <button class="p-0 h-full w-full flex flex-col justify-between focus-visible:outline-offset-0 btn-sound" @click="isCreateNewCharacterModalOpen = true">
-                  <img class="w-6 h-6 object-contain center-element" draggable="false" src="/assets/icons/plus-icon.svg" />
+                  <img class="w-6 h-6 object-contain center-element btn-sound" draggable="false" src="/assets/icons/plus-icon.svg" />
                 </button>
               </div>
             </div>
@@ -124,10 +124,12 @@
 import config from '@/application/config'
 import { type CharacterHair, type Character as CharacterT, type Map } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
+import { useSoundComposable } from '@/composables/useSoundComposable'
 import { CharacterHairStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
+const { playSound } = useSoundComposable()
 const gameStore = useGameStore()
 const isLoading = ref<boolean>(true)
 const characters = ref<CharacterT[]>([])
@@ -165,11 +167,10 @@ function loginWithCharacter() {
 
 // Create character logics
 function createCharacter() {
-  gameStore.connection?.on('character:create:success', (data: CharacterT) => {
+  gameStore.connection?.emit('character:create', { name: newCharacterName.value }, (success: boolean) => {
-    gameStore.setCharacter(data)
+    if (success) return
     isCreateNewCharacterModalOpen.value = false
   })
-  gameStore.connection?.emit('character:create', { name: newCharacterName.value })
 }
 
 // Watch changes for selected character and update hairs
@@ -179,6 +180,7 @@ watch(selectedCharacterId, (characterId) => {
 })
 
 onMounted(async () => {
+  playSound('/assets/music/intro.mp3')
   const characterHairStorage = new CharacterHairStorage()
   characterHairs.value = await characterHairStorage.getAll()
 })

src/components/screens/Game.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex justify-center items-center h-dvh relative">
     <Game :config="gameConfig" @create="createGame">
-      <Scene name="main" @preload="preloadScene" @create="createScene">
+      <Scene name="main" @preload="preloadScene">
         <Menu />
         <Hud />
         <Hotkeys />
@@ -27,18 +27,23 @@ import Hotkeys from '@/components/game/gui/Hotkeys.vue'
 import Hud from '@/components/game/gui/Hud.vue'
 import Menu from '@/components/game/gui/Menu.vue'
 import Map from '@/components/game/map/Map.vue'
+import { useSoundComposable } from '@/composables/useSoundComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { Game, Scene } from 'phavuer'
-import { onBeforeUnmount } from 'vue'
+import { onMounted } from 'vue'
 
 const gameStore = useGameStore()
+const { playSound, stopSound } = useSoundComposable()
 
 const gameConfig = {
   name: config.name,
   width: window.innerWidth,
   height: window.innerHeight,
   type: Phaser.AUTO, // AUTO, CANVAS, WEBGL, HEADLESS
-  resolution: 5
+  resolution: 5,
+  input: {
+    windowEvents: false
+  }
 }
 
 const createGame = (game: Phaser.Game) => {
@@ -55,6 +60,8 @@ const createGame = (game: Phaser.Game) => {
     })
     gameStore.disconnectSocket()
   }
+
+  playSound('/assets/sounds/connect.wav')
 }
 
 function preloadScene(scene: Phaser.Scene) {
@@ -63,7 +70,7 @@ function preloadScene(scene: Phaser.Scene) {
   scene.load.image('waypoint', '/assets/waypoint.png')
 }
 
-function createScene(scene: Phaser.Scene) {}
+onMounted(() => {
-
+  stopSound('/assets/music/intro.mp3')
-onBeforeUnmount(() => {})
+})
 </script>

src/components/screens/MapEditor.vue

@@ -4,22 +4,11 @@
       <Scene name="main" @preload="preloadScene">
         <div v-if="!isLoaded" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-3xl font-ui">Loading...</div>
         <div v-else>
-          <Map :key="mapEditor.currentMap.value?.id" />
+          <Map v-if="mapEditor.currentMap.value" :key="mapEditor.currentMap.value?.id" />
-          <Toolbar
+          <Toolbar ref="toolbar" @save="save" @clear="clear" @open-maps="mapModal?.open" @open-settings="mapSettingsModal?.open" @close-editor="mapEditor.toggleActive" />
-            ref="toolbar"
-            @save="save"
-            @clear="clear"
-            @open-maps="mapModal?.open"
-            @open-settings="mapSettingsModal?.open"
-            @close-editor="mapEditor.toggleActive"
-            @close-lists="tileList?.close"
-            @closeLists="objectList?.close"
-            @open-tile-list="tileList?.open"
-            @open-map-object-list="objectList?.open"
-          />
           <MapList ref="mapModal" @open-create-map="mapSettingsModal?.open" />
-          <TileList ref="tileList" />
+          <TileList v-if="mapEditor.tool.value === 'pencil' && mapEditor.drawMode.value === 'tile'" />
-          <ObjectList ref="objectList" />
+          <MapObjectList v-if="mapEditor.tool.value === 'pencil' && mapEditor.drawMode.value === 'map_object'" />
           <MapSettings ref="mapSettingsModal" />
           <TeleportModal ref="teleportModal" />
         </div>
@@ -34,28 +23,24 @@ import 'phaser'
 import type { Map as MapT } from '@/application/types'
 import Map from '@/components/gameMaster/mapEditor/Map.vue'
 import MapList from '@/components/gameMaster/mapEditor/partials/MapList.vue'
-import ObjectList from '@/components/gameMaster/mapEditor/partials/MapObjectList.vue'
+import MapObjectList from '@/components/gameMaster/mapEditor/partials/MapObjectList.vue'
 import MapSettings from '@/components/gameMaster/mapEditor/partials/MapSettings.vue'
 import TeleportModal from '@/components/gameMaster/mapEditor/partials/TeleportModal.vue'
 import TileList from '@/components/gameMaster/mapEditor/partials/TileList.vue'
 import Toolbar from '@/components/gameMaster/mapEditor/partials/Toolbar.vue'
-import { loadAllTilesIntoScene } from '@/composables/mapComposable'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
+import { loadAllTileTextures } from '@/services/mapService'
 import { MapStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { Game, Scene } from 'phavuer'
-import { ref, useTemplateRef, watch } from 'vue'
+import { ref, useTemplateRef } from 'vue'
 
 const mapStorage = new MapStorage()
 const mapEditor = useMapEditorComposable()
 const gameStore = useGameStore()
 
-const toolbar = useTemplateRef('toolbar')
 const mapModal = useTemplateRef('mapModal')
-const tileList = useTemplateRef('tileList')
-const objectList = useTemplateRef('objectList')
 const mapSettingsModal = useTemplateRef('mapSettingsModal')
-const teleportModal = useTemplateRef('teleportModal')
 
 const isLoaded = ref(false)
 
@@ -64,7 +49,10 @@ const gameConfig = {
   width: window.innerWidth,
   height: window.innerHeight,
   type: Phaser.AUTO, // AUTO, CANVAS, WEBGL, HEADLESS
-  resolution: 5
+  resolution: 5,
+  input: {
+    windowEvents: false
+  }
 }
 
 const createGame = (game: Phaser.Game) => {
@@ -82,7 +70,7 @@ const preloadScene = async (scene: Phaser.Scene) => {
   scene.load.image('waypoint', '/assets/waypoint.png')
 
   // Get all tiles from IndexedDB and load them into the scene
-  await loadAllTilesIntoScene(scene)
+  await loadAllTileTextures(scene)
 
   // Wait for all assets to be loaded before continuing
   await new Promise<void>((resolve) => {
@@ -104,9 +92,9 @@ function save() {
     height: currentMap.height,
     tiles: currentMap.tiles,
     pvp: currentMap.pvp,
-    mapEffects: currentMap.mapEffects?.map(({ id, effect, strength }) => ({ id, effect, strength })) ?? [],
+    mapEffects: currentMap.mapEffects,
-    mapEventTiles: currentMap.mapEventTiles?.map(({ id, type, positionX, positionY, teleport }) => ({ id, type, positionX, positionY, teleport })) ?? [],
+    mapEventTiles: currentMap.mapEventTiles,
-    placedMapObjects: currentMap.placedMapObjects?.map(({ id, mapObject, depth, isRotated, positionX, positionY }) => ({ id, mapObject, depth, isRotated, positionX, positionY })) ?? []
+    placedMapObjects: currentMap.placedMapObjects.map(({ id, mapObject, isRotated, positionX, positionY }) => ({ id, mapObject, isRotated, positionX, positionY })) ?? []
   }
 
   gameStore.connection?.emit('gm:map:update', data, (response: MapT) => {
@@ -119,5 +107,6 @@ function clear() {
 
   // Clear placed objects, event tiles and tiles
   mapEditor.clearMap()
+  mapEditor.triggerClearTiles()
 }
 </script>

src/components/utilities/Debug.vue

@@ -1,7 +1,15 @@
 <template></template>
 
 <script setup lang="ts">
-import { CharacterHairStorage, CharacterTypeStorage, MapObjectStorage, MapStorage, SpriteStorage, TileStorage } from '@/storage/storages'
+import {
+  CharacterHairStorage,
+  CharacterTypeStorage,
+  MapObjectStorage,
+  MapStorage,
+  SoundStorage,
+  SpriteStorage,
+  TileStorage
+} from '@/storage/storages'
 import { TextureStorage } from '@/storage/textureStorage'
 import { onMounted, onUnmounted } from 'vue'
 
@@ -12,6 +20,7 @@ const spriteStorage = new SpriteStorage()
 const characterTypeStorage = new CharacterTypeStorage()
 const characterHairStorage = new CharacterHairStorage()
 const textureStorage = new TextureStorage()
+const soundStorage = new SoundStorage()
 
 let currentString = ''
 
@@ -32,6 +41,7 @@ async function handleKeyPress(event: KeyboardEvent) {
     await characterTypeStorage.destroy()
     await characterHairStorage.destroy()
     await textureStorage.destroy()
+    await soundStorage.destroy()
     currentString = '' // Reset
   }
 

src/components/utilities/Modal.vue

@@ -14,11 +14,11 @@
           <slot name="modalHeader" />
         </div>
         <div class="flex gap-2.5">
-          <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">
+          <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 btn-sound">
             <img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" :src="isFullScreen ? '/assets/icons/modal/minimize.svg' : '/assets/icons/modal/increase-size-option.svg'" class="w-3.5 h-3.5 invert" draggable="false" />
           </button>
-          <button v-if="closable" @click="closeModal" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
+          <button v-if="closable" @click="closeModal" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out btn-sound">
-            <img alt="close" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" draggable="false" />
+            <img alt="close" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full btn-sound" draggable="false" />
           </button>
         </div>
       </div>
@@ -86,7 +86,11 @@ const emit = defineEmits<{
 defineExpose({
   open: () => (isModalOpenRef.value = true),
   close: () => (isModalOpenRef.value = false),
-  toggle: () => (isModalOpenRef.value = !isModalOpenRef.value)
+  toggle: () => (isModalOpenRef.value = !isModalOpenRef.value),
+  setPosition: (a: number, b: number) => {
+    x.value = a
+    y.value = b
+  }
 })
 
 const isModalOpenRef = ref(props.isModalOpen)

src/composables/controls/useBaseControlsComposable.ts

@@ -1,5 +1,5 @@
 import config from '@/application/config'
-import { getTile, tileToWorldXY } from '@/composables/mapComposable'
+import { getTile, tileToWorldXY } from '@/services/mapService'
 import { useGameStore } from '@/stores/gameStore'
 import { ref, type Ref } from 'vue'
 

src/composables/controls/useGameControlsComposable.ts

@@ -1,4 +1,4 @@
-import { getTile } from '@/composables/mapComposable'
+import { getTile } from '@/services/mapService'
 import { useGameStore } from '@/stores/gameStore'
 import type { Ref } from 'vue'
 import { useBaseControlsComposable } from './useBaseControlsComposable'
@@ -41,7 +41,7 @@ export function useGameControlsComposable(scene: Phaser.Scene, layer: Phaser.Til
 
       // Start movement loop if not already running
       if (!moveInterval) {
-        moveInterval = window.setInterval(moveCharacter, 250) // Adjust timing as needed
+        moveInterval = window.setInterval(moveCharacter, 100) // Adjust timing as needed
         moveCharacter() // Move immediately on first press
       }
     }

src/composables/useCharacterSpriteComposable.ts

@@ -1,12 +1,13 @@
+import config from '@/application/config'
 import { Direction } from '@/application/enums'
 import { type MapCharacter } from '@/application/types'
-import { loadSpriteTextures } from '@/composables/gameComposable'
+import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/services/mapService'
-import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
+import { loadSpriteTextures } from '@/services/textureService'
 import { CharacterTypeStorage } from '@/storage/storages'
 import { refObj } from 'phavuer'
 import { computed, ref } from 'vue'
 
-export function useCharacterSprite(scene: Phaser.Scene, tilemap: Phaser.Tilemaps.Tilemap, mapCharacter: MapCharacter) {
+export function useCharacterSpriteComposable(scene: Phaser.Scene, tilemap: Phaser.Tilemaps.Tilemap, mapCharacter: MapCharacter) {
   const characterContainer = refObj<Phaser.GameObjects.Container>()
   const characterSpriteId = ref('')
   const characterSprite = refObj<Phaser.GameObjects.Sprite>()
@@ -17,10 +18,10 @@ export function useCharacterSprite(scene: Phaser.Scene, tilemap: Phaser.Tilemaps
   const tween = ref<Phaser.Tweens.Tween | null>(null)
 
   const updateIsometricDepth = (positionX: number, positionY: number) => {
-    isometricDepth.value = calculateIsometricDepth(positionX, positionY, 28, 94, true)
+    isometricDepth.value = calculateIsometricDepth(positionX, positionY, 30, 95, true)
   }
 
-  const updatePosition = (positionX: number, positionY: number, direction: Direction) => {
+  const updatePosition = (positionX: number, positionY: number) => {
     const newPositionX = tileToWorldX(tilemap, positionX, positionY)
     const newPositionY = tileToWorldY(tilemap, positionX, positionY)
 
@@ -35,9 +36,10 @@ export function useCharacterSprite(scene: Phaser.Scene, tilemap: Phaser.Tilemaps
       tween.value.stop()
     }
 
-    const distance = Math.sqrt(Math.pow(newPositionX - currentPositionX.value, 2) + Math.pow(newPositionY - currentPositionY.value, 2))
+    const tileDistance = Math.sqrt(Math.pow((newPositionX - currentPositionX.value) / config.tile_size.width, 2) + Math.pow((newPositionY - currentPositionY.value) / config.tile_size.height, 2))
-    const baseSpeed = 150 // pixels per second
+
-    const duration = (distance / baseSpeed) * 1000 // Convert to milliseconds
+    const baseDuration = 300 // milliseconds per tile
+    const duration = Math.min(baseDuration * tileDistance, baseDuration)
 
     tween.value = tilemap.scene.tweens.add({
       targets: characterContainer.value,
@@ -46,22 +48,42 @@ export function useCharacterSprite(scene: Phaser.Scene, tilemap: Phaser.Tilemaps
       duration,
       ease: 'Linear',
       onStart: () => {
-        if (direction === Direction.POSITIVE) {
+        updateIsometricDepth(positionX, positionY)
-          updateIsometricDepth(positionX, positionY)
-        }
       },
       onUpdate: () => {
+        updateIsometricDepth(positionX, positionY)
         currentPositionX.value = characterContainer.value?.x ?? currentPositionX.value
         currentPositionY.value = characterContainer.value?.y ?? currentPositionY.value
       },
       onComplete: () => {
-        if (direction === Direction.NEGATIVE) {
+        updateIsometricDepth(positionX, positionY)
-          updateIsometricDepth(positionX, positionY)
-        }
       }
     })
   }
 
+  const playAnimation = (animation: string, loop = false, ignoreIfPlaying = true) => {
+    if (!characterSprite.value || !characterSpriteId.value) return
+
+    const fullAnimationName = `${characterSpriteId.value}-${animation}_${currentDirection.value}`
+
+    // Remove any existing animation complete listeners
+    characterSprite.value.off(Phaser.Animations.Events.ANIMATION_COMPLETE)
+
+    // Add new listener
+    characterSprite.value.on(Phaser.Animations.Events.ANIMATION_COMPLETE, () => {
+      characterSprite.value!.setFrame(0)
+      characterSprite.value!.setTexture(charTexture.value)
+    })
+
+    characterSprite.value.anims.play(
+      {
+        key: fullAnimationName,
+        repeat: loop ? -1 : 0
+      },
+      ignoreIfPlaying
+    )
+  }
+
   const calcDirection = (oldPositionX: number, oldPositionY: number, newPositionX: number, newPositionY: number): Direction => {
     if (newPositionY < oldPositionY || newPositionX < oldPositionX) return Direction.NEGATIVE
     if (newPositionX > oldPositionX || newPositionY > oldPositionY) return Direction.POSITIVE
@@ -112,7 +134,8 @@ export function useCharacterSprite(scene: Phaser.Scene, tilemap: Phaser.Tilemaps
       characterSprite.value.setFlipX(isFlippedX.value)
     }
 
-    updatePosition(mapCharacter.character.positionX, mapCharacter.character.positionY, mapCharacter.character.rotation)
+    updatePosition(mapCharacter.character.positionX, mapCharacter.character.positionY)
+    updateIsometricDepth(mapCharacter.character.positionX, mapCharacter.character.positionY)
   }
 
   const cleanup = () => {
@@ -128,6 +151,7 @@ export function useCharacterSprite(scene: Phaser.Scene, tilemap: Phaser.Tilemaps
     isometricDepth,
     isFlippedX,
     updatePosition,
+    playAnimation,
     calcDirection,
     updateSprite,
     initializeSprite,

src/composables/useMapEditorComposable.ts

@@ -1,4 +1,4 @@
-import type { Map, MapObject } from '@/application/types'
+import type { Map, MapObject, PlacedMapObject, UUID } from '@/application/types'
 import { ref } from 'vue'
 
 export type TeleportSettings = {
@@ -12,16 +12,25 @@ const currentMap = ref<Map | null>(null)
 const active = ref(false)
 const tool = ref('move')
 const drawMode = ref('tile')
+const inputMode = ref('tap')
 const selectedTile = ref('')
 const selectedMapObject = ref<MapObject | null>(null)
+const movingPlacedObject = ref<PlacedMapObject | null>(null)
+const selectedPlacedObject = ref<PlacedMapObject | null>(null)
 const shouldClearTiles = ref(false)
 const teleportSettings = ref<TeleportSettings>({
-  toMapId: '',
+  toMapId: '1000',
   toPositionX: 0,
   toPositionY: 0,
   toRotation: 0
 })
 
+/**
+ * We can update origin X and Y in src/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue
+ * and this will trigger a refresh for spawned mao objects
+ */
+const refreshMapObject = ref(0)
+
 export function useMapEditorComposable() {
   const loadMap = (map: Map) => {
     currentMap.value = map
@@ -37,7 +46,6 @@ export function useMapEditorComposable() {
     if (!currentMap.value) return
     currentMap.value.placedMapObjects = []
     currentMap.value.mapEventTiles = []
-    currentMap.value.tiles = []
   }
 
   const toggleActive = () => {
@@ -53,12 +61,16 @@ export function useMapEditorComposable() {
     drawMode.value = mode
   }
 
+  const setInputMode = (mode: string) => {
+    inputMode.value = mode
+  }
+
   const setSelectedTile = (tile: string) => {
     selectedTile.value = tile
   }
 
-  const setSelectedMapObject = (object: MapObject) => {
+  const setSelectedMapObject = (mapObject: MapObject) => {
-    selectedMapObject.value = object
+    selectedMapObject.value = mapObject
   }
 
   const setTeleportSettings = (settings: TeleportSettings) => {
@@ -73,12 +85,18 @@ export function useMapEditorComposable() {
     shouldClearTiles.value = false
   }
 
+  function triggerMapObjectRefresh() {
+    refreshMapObject.value++ // Increment to trigger watchers
+  }
+
   const reset = () => {
     tool.value = 'move'
     drawMode.value = 'tile'
+    inputMode.value = 'tap'
     selectedTile.value = ''
     selectedMapObject.value = null
     shouldClearTiles.value = false
+    refreshMapObject.value = 0
   }
 
   return {
@@ -87,10 +105,14 @@ export function useMapEditorComposable() {
     active,
     tool,
     drawMode,
+    inputMode,
     selectedTile,
     selectedMapObject,
+    movingPlacedObject,
+    selectedPlacedObject,
     shouldClearTiles,
     teleportSettings,
+    refreshMapObject,
 
     // Methods
     loadMap,
@@ -99,11 +121,13 @@ export function useMapEditorComposable() {
     toggleActive,
     setTool,
     setDrawMode,
+    setInputMode,
     setSelectedTile,
     setSelectedMapObject,
     setTeleportSettings,
     triggerClearTiles,
     resetClearTilesFlag,
+    triggerMapObjectRefresh,
     reset
   }
 }

src/composables/useSoundComposable.ts

@@ -0,0 +1,164 @@
+import { SoundStorage } from '@/storage/storages'
+
+interface CachedSound {
+  id: string
+  name: string
+  base64: string
+}
+
+// Core storage instances
+const soundStorage = new SoundStorage()
+const activeSounds = new Map<string, HTMLAudioElement[]>()
+const audioCache = new Map<string, HTMLAudioElement>()
+
+export function useSoundComposable() {
+  /**
+   * Converts a sound URL to base64 format
+   */
+  async function soundToBase64(url: string): Promise<string> {
+    try {
+      const response = await fetch(url)
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+
+      const blob = await response.blob()
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        reader.onloadend = () => resolve((reader.result as string).split(',')[1])
+        reader.onerror = reject
+        reader.readAsDataURL(blob)
+      })
+    } catch (error) {
+      console.error('Error converting sound to base64:', error)
+      throw error
+    }
+  }
+
+  /**
+   * Preloads a sound file and caches it for future use
+   */
+  async function preloadSound(soundUrl: string): Promise<HTMLAudioElement> {
+    if (audioCache.has(soundUrl)) {
+      return audioCache.get(soundUrl)!
+    }
+
+    let audio: HTMLAudioElement
+    const cachedSound = await soundStorage.getById(soundUrl)
+
+    if (cachedSound) {
+      audio = new Audio(`data:audio/mpeg;base64,${cachedSound.base64}`)
+    } else {
+      try {
+        const base64 = await soundToBase64(soundUrl)
+        const soundData: CachedSound = {
+          id: soundUrl,
+          name: soundUrl.split('/').pop() || soundUrl,
+          base64
+        }
+        await soundStorage.add(soundData)
+        audio = new Audio(`data:audio/mpeg;base64,${base64}`)
+      } catch (error) {
+        console.error(`Failed to load and cache sound ${soundUrl}:`, error)
+        audio = new Audio(soundUrl)
+      }
+    }
+
+    audio.load()
+    audioCache.set(soundUrl, audio)
+    return audio
+  }
+
+  /**
+   * Plays a sound with optional looping and duplicate prevention
+   */
+  async function playSound(soundUrl: string, loop: boolean = false, ignoreIfPlaying: boolean = false): Promise<void> {
+    try {
+      const playingSounds = activeSounds.get(soundUrl) || []
+
+      if (ignoreIfPlaying && playingSounds.some((audio) => !audio.paused)) {
+        return
+      }
+
+      stopSound(soundUrl)
+
+      const audio = await preloadSound(soundUrl)
+      const playingAudio = audio.cloneNode() as HTMLAudioElement
+      playingAudio.loop = loop
+
+      if (!activeSounds.has(soundUrl)) {
+        activeSounds.set(soundUrl, [])
+      }
+
+      activeSounds.get(soundUrl)!.push(playingAudio)
+
+      // Cleanup when sound ends
+      playingAudio.addEventListener(
+        'ended',
+        () => {
+          const sounds = activeSounds.get(soundUrl)
+          if (!sounds) return
+
+          const index = sounds.indexOf(playingAudio)
+          if (index > -1) {
+            sounds.splice(index, 1)
+          }
+          if (sounds.length === 0) {
+            activeSounds.delete(soundUrl)
+          }
+        },
+        { once: true }
+      )
+
+      await playingAudio.play()
+    } catch (error) {
+      console.error(`Failed to play sound ${soundUrl}:`, error)
+    }
+  }
+
+  /**
+   * Stops all instances of a specific sound
+   */
+  function stopSound(soundUrl: string): void {
+    const sounds = activeSounds.get(soundUrl)
+    if (!sounds) return
+
+    sounds.forEach((audio) => {
+      audio.pause()
+      audio.currentTime = 0
+    })
+    activeSounds.delete(soundUrl)
+  }
+
+  /**
+   * Stops all currently playing sounds
+   */
+  function stopAllSounds(): void {
+    activeSounds.forEach((_, url) => stopSound(url))
+    activeSounds.clear()
+  }
+
+  /**
+   * Clears all cached sounds and stops playback
+   */
+  async function clearSoundCache(): Promise<void> {
+    stopAllSounds()
+    audioCache.clear()
+    await soundStorage.reset()
+  }
+
+  /**
+   * Preloads multiple sounds simultaneously
+   */
+  async function preloadSounds(soundUrls: string[]): Promise<HTMLAudioElement[]> {
+    return Promise.all(soundUrls.map(preloadSound))
+  }
+
+  return {
+    playSound,
+    stopSound,
+    stopAllSounds,
+    clearSoundCache,
+    preloadSounds
+  }
+}

src/composables/useTileProcessingComposable.ts

@@ -4,26 +4,32 @@ import type { TileAnalysisResult, TileWorkerMessage } from '@/types/tileTypes'
 import { ref } from 'vue'
 
 // Constants for image processing
-const DOWNSCALE_WIDTH = 32
+const DOWNSCALE_WIDTH = 16
-const DOWNSCALE_HEIGHT = 16
+const DOWNSCALE_HEIGHT = 8
 const COLOR_SIMILARITY_THRESHOLD = 30
 const EDGE_SIMILARITY_THRESHOLD = 20
-const BATCH_SIZE = 4
+const BATCH_SIZE = 8
 
 export function useTileProcessingComposable() {
   const tileAnalysisCache = ref<Map<string, { color: { r: number; g: number; b: number }; edge: number; namePrefix: string }>>(new Map())
   const processingQueue = ref<Tile[]>([])
   let isProcessing = false
-  const worker = new Worker(new URL('@/workers/tileAnalyzerWorker.ts', import.meta.url), { type: 'module' })
 
-  worker.onmessage = (e: MessageEvent<TileAnalysisResult>) => {
+  const NUM_WORKERS = 4
-    const { tileId, color, edge, namePrefix } = e.data
+  const workers = Array.from({ length: NUM_WORKERS }, () => new Worker(new URL('@/workers/tileAnalyzerWorker.ts', import.meta.url), { type: 'module' }))
-    tileAnalysisCache.value.set(tileId, { color, edge, namePrefix })
+  let currentWorker = 0
-    isProcessing = false
-    processBatch()
-  }
 
-  async function processTileAsync(tile: Tile): Promise<void> {
+  // Modify worker message handling
+  workers.forEach((worker) => {
+    worker.onmessage = (e: MessageEvent<TileAnalysisResult>) => {
+      const { tileId, color, edge, namePrefix } = e.data
+      tileAnalysisCache.value.set(tileId, { color, edge, namePrefix })
+      isProcessing = false
+      processBatch()
+    }
+  })
+
+  async function processTileAsync(tile: Tile, worker: Worker): Promise<void> {
     if (tileAnalysisCache.value.has(tile.id)) return
 
     return new Promise((resolve) => {
@@ -60,7 +66,12 @@ export function useTileProcessingComposable() {
     isProcessing = true
 
     const batch = processingQueue.value.splice(0, BATCH_SIZE)
-    Promise.all(batch.map((tile) => processTileAsync(tile))).then(() => {
+    Promise.all(
+      batch.map((tile) => {
+        currentWorker = (currentWorker + 1) % NUM_WORKERS
+        return processTileAsync(tile, workers[currentWorker])
+      })
+    ).then(() => {
       isProcessing = false
       if (processingQueue.value.length > 0) {
         setTimeout(processBatch, 0)
@@ -87,7 +98,7 @@ export function useTileProcessingComposable() {
   }
 
   function cleanup() {
-    worker.terminate()
+    workers.forEach((worker) => worker.terminate())
   }
 
   return {

src/services/authenticationService.ts

@@ -1,5 +1,4 @@
 import config from '@/application/config'
-import { getDomain } from '@/application/utilities'
 import { useCookies } from '@vueuse/integrations/useCookies'
 import axios from 'axios'
 
@@ -22,7 +21,7 @@ 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.data.token as string, {
-      domain: getDomain()
+      domain: config.domain
     })
     return { success: true, token: response.data.data.token }
   } catch (error: any) {

src/services/mapService.ts

@@ -1,7 +1,7 @@
 import config from '@/application/config'
-import type { HttpResponse, TextureData, Tile as TileT, UUID } from '@/application/types'
+import type { MapObject, Map as MapT, TextureData, Tile as TileT, UUID } from '@/application/types'
 import { unduplicateArray } from '@/application/utilities'
-import { loadTexture } from '@/composables/gameComposable'
+import { loadTexture } from '@/services/textureService'
 import { MapStorage, TileStorage } from '@/storage/storages'
 
 import Tilemap = Phaser.Tilemaps.Tilemap
@@ -39,11 +39,6 @@ export function tileToWorldY(layer: TilemapLayer | Tilemap, positionX: number, p
 
 /**
  * Can also be used to replace tiles
- * @param map
- * @param layer
- * @param positionX
- * @param positionY
- * @param tileName
  */
 export function placeTile(map: Tilemap, layer: TilemapLayer, positionX: number, positionY: number, tileName: string) {
   let tileImg = map.getTileset(tileName) as Tileset
@@ -53,8 +48,8 @@ export function placeTile(map: Tilemap, layer: TilemapLayer, positionX: number,
   layer.putTileAt(tileImg.firstgid, positionX, positionY)
 }
 
-export function setLayerTiles(map: Tilemap, layer: TilemapLayer, tiles: string[][]) {
+export function placeTiles(map: Tilemap, layer: TilemapLayer, tiles: string[][]) {
-  if (!tiles) return
+  if (!map || !layer || !tiles) return
 
   tiles.forEach((row: string[], y: number) => {
     row.forEach((tile: string, x: number) => {
@@ -70,15 +65,16 @@ export function createTileArray(width: number, height: number, tile: string = 'b
 export const calculateIsometricDepth = (positionX: number, positionY: number, width: number = 0, height: number = 0, isCharacter: boolean = false) => {
   const baseDepth = positionX + positionY
   if (isCharacter) {
-    return baseDepth // @TODO: Fix collision, this is a hack
+    return baseDepth
   }
   return baseDepth + (width + height) / (2 * config.tile_size.width)
 }
 
-async function getTiles(tiles: TileT[], scene: Phaser.Scene) {
+async function loadTileTextures(tiles: TileT[], scene: Phaser.Scene) {
   // Load each tile into the scene
-  for (const tile of tiles) {
+  for (let tile of tiles) {
-    if (!tile) continue
+    if (!tile?.id || !tile?.updatedAt) continue
+
     const textureData = {
       key: tile.id,
       data: '/textures/tiles/' + tile.id + '.png',
@@ -89,28 +85,69 @@ async function getTiles(tiles: TileT[], scene: Phaser.Scene) {
   }
 }
 
-export async function loadMapTilesIntoScene(map_id: UUID, scene: Phaser.Scene) {
+export async function loadTileTexturesFromMapTileArray(map_id: string, scene: Phaser.Scene) {
-  const tileStorage = new TileStorage()
   const mapStorage = new MapStorage()
-  const map = await mapStorage.get(map_id)
+  const tileStorage = new TileStorage()
+
+  const map = await mapStorage.getById(map_id)
   if (!map) return
 
   const tileArray = unduplicateArray(map.tiles)
   const tiles = await tileStorage.getByIds(tileArray)
+  if (!tiles) return
 
-  await getTiles(tiles, scene)
+  await loadTileTextures(tiles, scene)
 }
 
-export async function loadTilesIntoScene(tileIds: string[], scene: Phaser.Scene) {
+export async function loadAllTileTextures(scene: Phaser.Scene) {
-  const tileStorage = new TileStorage()
-  const tiles = await tileStorage.getByIds(tileIds)
-
-  await getTiles(tiles, scene)
-}
-
-export async function loadAllTilesIntoScene(scene: Phaser.Scene) {
   const tileStorage = new TileStorage()
   const tiles = await tileStorage.getAll()
+  if (!tiles) return
 
-  await getTiles(tiles, scene)
+  await loadTileTextures(tiles, scene)
+}
+
+export async function loadMapObjectTextures(mapObjects: MapObject[], scene: Phaser.Scene) {
+  for (const mapObject of mapObjects) {
+    const textureData = {
+      key: mapObject.id,
+      data: '/textures/map_objects/' + mapObject.id + '.png',
+      group: 'map_objects',
+      updatedAt: mapObject.updatedAt,
+      frameWidth: mapObject.frameWidth,
+      frameHeight: mapObject.frameHeight
+    } as TextureData
+    await loadTexture(scene, textureData)
+  }
+}
+
+export function createTileMap(scene: Phaser.Scene, map: MapT) {
+  const mapConfig = new Phaser.Tilemaps.MapData({
+    width: map.width,
+    height: map.height,
+    tileWidth: config.tile_size.width,
+    tileHeight: config.tile_size.height,
+    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
+    format: Phaser.Tilemaps.Formats.ARRAY_2D
+  })
+
+  return new Phaser.Tilemaps.Tilemap(scene, mapConfig)
+}
+
+export function createTileLayer(tileMap: Phaser.Tilemaps.Tilemap, tilesArray: string[]) {
+  // Load tiles into tileset
+  const tilesetImages = tilesArray.map((tile: string, index: number) => {
+    return tileMap.addTilesetImage(tile, tile, config.tile_size.width, config.tile_size.height, 1, 2, index + 1, { x: 0, y: -config.tile_size.height })
+  })
+
+  // Add blank tile
+  tilesetImages.push(tileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.width, config.tile_size.height, 1, 2, 0, { x: 0, y: -config.tile_size.height }))
+
+  // Create layer
+  const layer = tileMap.createBlankLayer('tiles', tilesetImages as Tileset[], 0, config.tile_size.height) as Phaser.Tilemaps.TilemapLayer
+
+  layer.setDepth(0)
+  layer.setCullPadding(2, 2)
+
+  return layer
 }

src/services/textureService.ts

@@ -60,7 +60,7 @@ export async function loadSpriteTextures(scene: Phaser.Scene, sprite_id: string)
   if (!sprite_id) return false
 
   const spriteStorage = new SpriteStorage()
-  const sprite = await spriteStorage.get(sprite_id)
+  const sprite = await spriteStorage.getById(sprite_id)
 
   if (!sprite) {
     console.error('Failed to load sprite:', sprite_id)

src/storage/baseStorage.ts

@@ -14,7 +14,7 @@ export class BaseStorage<T extends { id: string }> {
 
   async add(item: T, overwrite = false) {
     try {
-      const existing = await this.get(item.id)
+      const existing = await this.getById(item.id)
       if (existing && !overwrite) return
 
       await this.dexie.table(this.tableName).put({ ...item })
@@ -39,7 +39,7 @@ export class BaseStorage<T extends { id: string }> {
     }
   }
 
-  async get(id: string): Promise<T | null> {
+  async getById(id: string): Promise<T | null> {
     try {
       const item = await this.dexie.table(this.tableName).get(id)
       return item || null

src/storage/storages.ts

@@ -31,7 +31,7 @@ export class CharacterTypeStorage extends BaseStorage<any> {
   }
 
   async getSpriteId(characterTypeId: string) {
-    const characterType = await this.get(characterTypeId)
+    const characterType = await this.getById(characterTypeId)
     return characterType?.sprite
   }
 }
@@ -42,7 +42,13 @@ export class CharacterHairStorage extends BaseStorage<any> {
   }
 
   async getSpriteId(characterTypeId: string) {
-    const characterType = await this.get(characterTypeId)
+    const characterType = await this.getById(characterTypeId)
     return characterType?.sprite
   }
 }
+
+export class SoundStorage extends BaseStorage<{ id: string; name: string; base64: string }> {
+  constructor() {
+    super('sounds', 'id, name, createdAt, updatedAt')
+  }
+}

src/stores/gameStore.ts

@@ -1,6 +1,5 @@
 import config from '@/application/config'
-import type { Character, Notification, TextureData, User, WorldSettings } from '@/application/types'
+import type { Character, Notification, User, WorldSettings } from '@/application/types'
-import { getDomain } from '@/application/utilities'
 import { useCookies } from '@vueuse/integrations/useCookies'
 import { defineStore } from 'pinia'
 import { io, Socket } from 'socket.io-client'
@@ -74,7 +73,7 @@ export const useGameStore = defineStore('game', {
     },
     initConnection() {
       this.connection = io(config.server_endpoint, {
-        secure: !config.development,
+        secure: config.environment === 'production',
         withCredentials: true,
         transports: ['websocket'],
         reconnectionAttempts: 5
@@ -102,7 +101,7 @@ export const useGameStore = defineStore('game', {
       this.connection?.disconnect()
 
       useCookies().remove('token', {
-        domain: getDomain()
+        domain: config.domain
       })
 
       this.connection = null

src/stores/mapStore.ts

@@ -18,7 +18,7 @@ export const useMapStore = defineStore('map', {
     }
   },
   actions: {
-    setMapId(mapId: UUID) {
+    setMapId(mapId: string) {
       this.mapId = mapId
     },
     setCharacters(characters: MapCharacter[]) {
@@ -27,12 +27,7 @@ export const useMapStore = defineStore('map', {
     addCharacter(character: MapCharacter) {
       this.characters.push(character)
     },
-    updateCharacter(updatedCharacter: MapCharacter) {
+    updateCharacterProperty<K extends keyof MapCharacter>(characterId: string, property: K, value: MapCharacter[K]) {
-      const index = this.characters.findIndex((char) => char.character.id === updatedCharacter.character.id)
-      if (index !== -1) this.characters[index] = updatedCharacter
-    },
-    // Property is mapCharacter key
-    updateCharacterProperty<K extends keyof MapCharacter>(characterId: UUID, property: K, value: MapCharacter[K]) {
       const character = this.characters.find((char) => char.character.id === characterId)
       if (character) {
         character[property] = value

src/workers/tileAnalyzerWorker.ts

@@ -12,7 +12,6 @@ function analyzeTile(imageData: ImageData, tileId: string, tileName: string): Ti
   const { r, g, b } = getDominantColorFast(imageData)
   const edge = getEdgeComplexityFast(imageData)
   const namePrefix = tileName.split('_')[0]
-
   return {
     tileId,
     color: { r, g, b },
@@ -53,16 +52,14 @@ function getEdgeComplexityFast(imageData: ImageData) {
   const height = imageData.height
   let edgePixels = 0
 
-  for (let y = 0; y < height; y += PIXEL_SAMPLE_RATE) {
+  // Only check every other row/column
-    for (let x = 0; x < width; x += PIXEL_SAMPLE_RATE) {
+  for (let y = 0; y < height; y += PIXEL_SAMPLE_RATE * 2) {
+    for (let x = 0; x < width; x += PIXEL_SAMPLE_RATE * 2) {
       const i = (y * width + x) * 4
-      if (
+      if (data[i + 3] > 0 && (x === 0 || y === 0 || x >= width - PIXEL_SAMPLE_RATE || y >= height - PIXEL_SAMPLE_RATE || data[i - 4 * PIXEL_SAMPLE_RATE + 3] === 0)) {
-        data[i + 3] > 0 &&
-        (x === 0 || y === 0 || x >= width - PIXEL_SAMPLE_RATE || y >= height - PIXEL_SAMPLE_RATE || data[i - 4 * PIXEL_SAMPLE_RATE + 3] === 0 || data[i + 4 * PIXEL_SAMPLE_RATE + 3] === 0 || data[i - width * 4 * PIXEL_SAMPLE_RATE + 3] === 0 || data[i + width * 4 * PIXEL_SAMPLE_RATE + 3] === 0)
-      ) {
         edgePixels++
       }
     }
   }
-  return edgePixels * PIXEL_SAMPLE_RATE
+  return edgePixels * PIXEL_SAMPLE_RATE * 2
 }