forked from noxious/client
Compare commits
1 Commits
feature/#3
...
feature/#2
| Author | SHA1 | Date | |
|---|---|---|---|
| c1360899e1 |
@ -1,6 +1,5 @@
|
||||
VITE_NAME=Noxious
|
||||
VITE_DOMAIN=localhost
|
||||
VITE_ENVIRONMENT=development
|
||||
VITE_DEVELOPMENT=true
|
||||
VITE_SERVER_ENDPOINT=http://localhost:4000
|
||||
VITE_TILE_SIZE_WIDTH=64
|
||||
VITE_TILE_SIZE_HEIGHT=32
|
||||
VITE_TILE_SIZE_X=64
|
||||
VITE_TILE_SIZE_Y=32
|
||||
13
.eslintrc.cjs
Normal file
13
.eslintrc.cjs
Normal file
@ -0,0 +1,13 @@
|
||||
/* eslint-env node */
|
||||
require('@rushstack/eslint-patch/modern-module-resolution')
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-typescript', '@vue/eslint-config-prettier/skip-formatting'],
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest'
|
||||
},
|
||||
rules: {
|
||||
'vue/multi-word-component-names': 'off'
|
||||
}
|
||||
}
|
||||
1
.vscode/extensions.json
vendored
1
.vscode/extensions.json
vendored
@ -1,6 +1,7 @@
|
||||
{
|
||||
"recommendations": [
|
||||
"Vue.volar",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"esbenp.prettier-vscode"
|
||||
]
|
||||
}
|
||||
|
||||
70
Caddyfile
70
Caddyfile
@ -1,70 +0,0 @@
|
||||
{
|
||||
# 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
|
||||
}
|
||||
32
Dockerfile
Normal file
32
Dockerfile
Normal file
@ -0,0 +1,32 @@
|
||||
# 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;"]
|
||||
4
captain-definition
Normal file
4
captain-definition
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"schemaVersion": 2,
|
||||
"dockerfilePath" :"./Dockerfile"
|
||||
}
|
||||
16
nginx.conf
Normal file
16
nginx.conf
Normal file
@ -0,0 +1,16 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name localhost;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
# Redirect example
|
||||
location /discord {
|
||||
return 301 https://discord.gg/JTev3nzeDa;
|
||||
}
|
||||
|
||||
# Serve static files
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
}
|
||||
4440
package-lock.json
generated
4440
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
27
package.json
27
package.json
@ -11,35 +11,39 @@
|
||||
"test:unit": "vitest",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --build --force",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
|
||||
"format": "prettier --write src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vueuse/core": "^10.5.0",
|
||||
"@vueuse/integrations": "^10.5.0",
|
||||
"axios": "^1.7.9",
|
||||
"dexie": "^4.0.11",
|
||||
"phaser": "^3.88.2",
|
||||
"phavuer": "^0.16.5",
|
||||
"phaser3-rex-plugins": "^1.80.13",
|
||||
"pinia": "^2.3.1",
|
||||
"sharp": "^0.33.5",
|
||||
"socket.io-client": "^4.8.1",
|
||||
"axios": "^1.7.7",
|
||||
"dexie": "^4.0.8",
|
||||
"phaser": "^3.86.0",
|
||||
"pinia": "^2.1.6",
|
||||
"socket.io-client": "^4.8.0",
|
||||
"universal-cookie": "^6.1.3",
|
||||
"vite-plugin-image-optimizer": "^1.1.8",
|
||||
"vue": "^3.5.13",
|
||||
"zod": "^3.24.2"
|
||||
"vue": "^3.5.12",
|
||||
"zod": "^3.22.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@ianvs/prettier-plugin-sort-imports": "^4.4.0",
|
||||
"@rushstack/eslint-patch": "^1.10.3",
|
||||
"@tsconfig/node20": "^20.1.4",
|
||||
"@types/jsdom": "^21.1.7",
|
||||
"@types/node": "^20.14.11",
|
||||
"@vitejs/plugin-vue": "^5.0.5",
|
||||
"@vue/eslint-config-prettier": "^9.0.0",
|
||||
"@vue/eslint-config-typescript": "^13.0.0",
|
||||
"@vue/test-utils": "^2.4.6",
|
||||
"@vue/tsconfig": "^0.5.1",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-vue": "^9.27.0",
|
||||
"jsdom": "^24.1.1",
|
||||
"npm-run-all2": "^6.2.3",
|
||||
"phaser3-rex-plugins": "^1.80.8",
|
||||
"phavuer": "^0.16.1",
|
||||
"postcss": "^8.4.47",
|
||||
"prettier": "^3.3.3",
|
||||
"sass": "^1.79.4",
|
||||
@ -47,6 +51,7 @@
|
||||
"typescript": "~5.6.2",
|
||||
"vite": "^5.4.9",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vite-plugin-vue-devtools": "^7.5.2",
|
||||
"vitest": "^2.0.3",
|
||||
"vue-tsc": "^1.6.5"
|
||||
}
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
<?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>
|
||||
|
Before Width: | Height: | Size: 325 B |
@ -1,3 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
@ -1,59 +0,0 @@
|
||||
<?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>
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 325 B After Width: | Height: | Size: 325 B |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 847 B After Width: | Height: | Size: 847 B |
|
Before Width: | Height: | Size: 745 B After Width: | Height: | Size: 745 B |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 946 KiB After Width: | Height: | Size: 1.1 MiB |
BIN
public/assets/music/click-btn.mp3
Normal file
BIN
public/assets/music/click-btn.mp3
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 454 KiB After Width: | Height: | Size: 453 KiB |
|
Before Width: | Height: | Size: 109 B After Width: | Height: | Size: 109 B |
|
Before Width: | Height: | Size: 696 B After Width: | Height: | Size: 696 B |
|
Before Width: | Height: | Size: 708 B After Width: | Height: | Size: 708 B |
41
src/App.vue
41
src/App.vue
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<Debug />
|
||||
<Notifications />
|
||||
<BackgroundImageLoader />
|
||||
<GmPanel v-if="gameStore.character?.role === 'gm'" />
|
||||
<component :is="currentScreen" />
|
||||
</template>
|
||||
@ -9,47 +9,40 @@
|
||||
import GmPanel from '@/components/gameMaster/GmPanel.vue'
|
||||
import Characters from '@/components/screens/Characters.vue'
|
||||
import Game from '@/components/screens/Game.vue'
|
||||
import Loading from '@/components/screens/Loading.vue'
|
||||
import Login from '@/components/screens/Login.vue'
|
||||
import MapEditor from '@/components/screens/MapEditor.vue'
|
||||
import Debug from '@/components/utilities/Debug.vue'
|
||||
import ZoneEditor from '@/components/screens/ZoneEditor.vue'
|
||||
import BackgroundImageLoader from '@/components/utilities/BackgroundImageLoader.vue'
|
||||
import Notifications from '@/components/utilities/Notifications.vue'
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { useSoundComposable } from '@/composables/useSoundComposable'
|
||||
import { socketManager } from '@/managers/SocketManager'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { computed, watch } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
|
||||
const mapEditor = useMapEditorComposable()
|
||||
const { playSound } = useSoundComposable()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
const currentScreen = computed(() => {
|
||||
if (!gameStore.game.isLoaded) return Loading
|
||||
if (!socketManager.connection) return Login
|
||||
if (!socketManager.token) return Login
|
||||
if (!gameStore.connection) return Login
|
||||
if (!gameStore.token) return Login
|
||||
if (!gameStore.character) return Characters
|
||||
if (mapEditor.active.value) return MapEditor
|
||||
if (zoneEditorStore.active) return ZoneEditor
|
||||
return Game
|
||||
})
|
||||
|
||||
// Watch mapEditor.active and empty gameStore.game.loadedAssets
|
||||
// Watch zoneEditorStore.active and empty gameStore.game.loadedAssets
|
||||
watch(
|
||||
() => mapEditor.active.value,
|
||||
() => zoneEditorStore.active,
|
||||
() => {
|
||||
gameStore.game.loadedTextures = []
|
||||
gameStore.game.loadedAssets = []
|
||||
}
|
||||
)
|
||||
|
||||
// #209: Play sound when a button is pressed
|
||||
addEventListener('click', (event) => {
|
||||
const classList = ['btn-cyan', 'btn-red', 'btn-indigo', 'btn-empty', 'btn-sound']
|
||||
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')
|
||||
if (!(event.target instanceof HTMLButtonElement)) {
|
||||
return
|
||||
}
|
||||
const audio = new Audio('/assets/music/click-btn.mp3')
|
||||
audio.play()
|
||||
})
|
||||
|
||||
// Watch for "G" key press and toggle the gm panel
|
||||
@ -57,9 +50,7 @@ addEventListener('keydown', (event) => {
|
||||
if (gameStore.character?.role !== 'gm') return // Only allow toggling the gm panel if the character is a gm
|
||||
|
||||
// Check if no input is active or focus is on an input
|
||||
if (event.repeat || event.isComposing || event.defaultPrevented || document.activeElement?.tagName.toUpperCase() === 'INPUT' || document.activeElement?.tagName.toUpperCase() === 'TEXTAREA') {
|
||||
return
|
||||
}
|
||||
if (event.repeat || event.isComposing || event.defaultPrevented || document.activeElement?.tagName.toUpperCase() === 'INPUT' || document.activeElement?.tagName.toUpperCase() === 'TEXTAREA') return
|
||||
|
||||
if (event.key === 'G') {
|
||||
gameStore.toggleGmPanel()
|
||||
|
||||
81
src/application/assets.ts
Normal file
81
src/application/assets.ts
Normal file
@ -0,0 +1,81 @@
|
||||
import config from '@/application/config'
|
||||
import type { AssetDataT } from '@/application/types'
|
||||
import Dexie from 'dexie'
|
||||
|
||||
export class Assets {
|
||||
private db: Dexie
|
||||
|
||||
constructor() {
|
||||
this.db = new Dexie('assets')
|
||||
this.db.version(1).stores({
|
||||
assets: 'key, group'
|
||||
})
|
||||
}
|
||||
|
||||
async download(asset: AssetDataT) {
|
||||
try {
|
||||
// Check if the asset already exists, then check if updatedAt is newer
|
||||
const _asset = await this.db.table('assets').get(asset.key)
|
||||
if (_asset && _asset.updatedAt > asset.updatedAt) {
|
||||
return
|
||||
}
|
||||
|
||||
// Download the asset
|
||||
const response = await fetch(config.server_endpoint + asset.data)
|
||||
const blob = await response.blob()
|
||||
|
||||
// Store the asset in the database
|
||||
await this.db.table('assets').put({
|
||||
key: asset.key,
|
||||
data: blob,
|
||||
group: asset.group,
|
||||
updatedAt: asset.updatedAt,
|
||||
originX: asset.originX,
|
||||
originY: asset.originY,
|
||||
isAnimated: asset.isAnimated,
|
||||
frameRate: asset.frameRate,
|
||||
frameWidth: asset.frameWidth,
|
||||
frameHeight: asset.frameHeight,
|
||||
frameCount: asset.frameCount
|
||||
})
|
||||
} catch (error) {
|
||||
console.error(`Failed to add asset ${asset.key}:`, error)
|
||||
}
|
||||
}
|
||||
|
||||
async get(key: string) {
|
||||
try {
|
||||
const asset = await this.db.table('assets').get(key)
|
||||
if (asset) {
|
||||
return {
|
||||
...asset,
|
||||
data: URL.createObjectURL(asset.data) // Convert blob to data URL
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Failed to retrieve asset ${key}:`, error)
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
async getByGroup(group: string) {
|
||||
try {
|
||||
const assets = await this.db.table('assets').where('group').equals(group).toArray()
|
||||
return assets.map((asset) => ({
|
||||
...asset,
|
||||
data: URL.createObjectURL(asset.data) // Convert blob to data URL
|
||||
}))
|
||||
} catch (error) {
|
||||
console.error(`Failed to retrieve assets for group ${group}:`, error)
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
async delete(key: string) {
|
||||
try {
|
||||
await this.db.table('assets').delete(key)
|
||||
} catch (error) {
|
||||
console.error(`Failed to delete asset ${key}:`, error)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,10 +1,9 @@
|
||||
export default {
|
||||
name: import.meta.env.VITE_NAME,
|
||||
domain: import.meta.env.VITE_DOMAIN,
|
||||
environment: import.meta.env.VITE_ENVIRONMENT,
|
||||
development: import.meta.env.VITE_DEVELOPMENT === 'true',
|
||||
server_endpoint: import.meta.env.VITE_SERVER_ENDPOINT,
|
||||
tile_size: {
|
||||
width: Number(import.meta.env.VITE_TILE_SIZE_WIDTH),
|
||||
height: Number(import.meta.env.VITE_TILE_SIZE_HEIGHT)
|
||||
x: Number(import.meta.env.VITE_TILE_SIZE_X),
|
||||
y: Number(import.meta.env.VITE_TILE_SIZE_Y)
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,63 +0,0 @@
|
||||
export enum Direction {
|
||||
POSITIVE,
|
||||
NEGATIVE,
|
||||
UNCHANGED
|
||||
}
|
||||
|
||||
export enum SocketEvent {
|
||||
CONNECT_ERROR = 'connect_error',
|
||||
RECONNECT_FAILED = 'reconnect_failed',
|
||||
CLOSE = '52',
|
||||
DATA = '51',
|
||||
CHARACTER_CONNECT = '50',
|
||||
CHARACTER_CREATE = '49',
|
||||
CHARACTER_DELETE = '48',
|
||||
CHARACTER_LIST = '47',
|
||||
GM_CHARACTERHAIR_CREATE = '46',
|
||||
GM_CHARACTERHAIR_REMOVE = '45',
|
||||
GM_CHARACTERHAIR_LIST = '44',
|
||||
GM_CHARACTERHAIR_UPDATE = '43',
|
||||
GM_CHARACTERTYPE_CREATE = '42',
|
||||
GM_CHARACTERTYPE_REMOVE = '41',
|
||||
GM_CHARACTERTYPE_LIST = '40',
|
||||
GM_CHARACTERTYPE_UPDATE = '39',
|
||||
GM_ITEM_CREATE = '38',
|
||||
GM_ITEM_REMOVE = '37',
|
||||
GM_ITEM_LIST = '36',
|
||||
GM_ITEM_UPDATE = '35',
|
||||
GM_MAPOBJECT_LIST = '34',
|
||||
GM_MAPOBJECT_REMOVE = '33',
|
||||
GM_MAPOBJECT_UPDATE = '32',
|
||||
GM_MAPOBJECT_UPLOAD = '31',
|
||||
GM_SPRITE_COPY = '30',
|
||||
GM_SPRITE_CREATE = '29',
|
||||
GM_SPRITE_DELETE = '28',
|
||||
GM_SPRITE_LIST = '27',
|
||||
GM_SPRITE_UPDATE = '26',
|
||||
GM_TILE_DELETE = '25',
|
||||
GM_TILE_LIST = '24',
|
||||
GM_TILE_UPDATE = '23',
|
||||
GM_TILE_UPLOAD = '22',
|
||||
GM_MAP_CREATE = '21',
|
||||
GM_MAP_DELETE = '20',
|
||||
GM_MAP_REQUEST = '19',
|
||||
GM_MAP_UPDATE = '18',
|
||||
MAP_CHARACTER_MOVEERROR = '17',
|
||||
DISCONNECT = 'disconnect',
|
||||
USER_DISCONNECT = '15',
|
||||
LOGIN = '14',
|
||||
LOGGED_IN = '13',
|
||||
NOTIFICATION = '12',
|
||||
DATE = '11',
|
||||
FAILED = '10',
|
||||
COMPLETED = '9',
|
||||
CONNECTION = 'connection',
|
||||
WEATHER = '7',
|
||||
CHARACTER_DISCONNECT = '6',
|
||||
MAP_CHARACTER_ATTACK = '5',
|
||||
MAP_CHARACTER_TELEPORT = '4',
|
||||
MAP_CHARACTER_JOIN = '3',
|
||||
MAP_CHARACTER_LEAVE = '2',
|
||||
MAP_CHARACTER_MOVE = '1',
|
||||
CHAT_MESSAGE = '0'
|
||||
}
|
||||
@ -12,13 +12,14 @@ export type HttpResponse<T> = {
|
||||
data?: T
|
||||
}
|
||||
|
||||
export type TextureData = {
|
||||
export type AssetDataT = {
|
||||
key: string
|
||||
data: string // URL or Base64 encoded blob
|
||||
group: 'tiles' | 'map_objects' | 'sprites' | 'sprite_animations' | 'sound' | 'music' | 'ui' | 'font' | 'other'
|
||||
data: string
|
||||
group: 'tiles' | 'objects' | 'sprites' | 'sprite_animations' | 'sound' | 'music' | 'ui' | 'font' | 'other'
|
||||
updatedAt: Date
|
||||
originX?: number
|
||||
originY?: number
|
||||
isAnimated?: boolean
|
||||
frameRate?: number
|
||||
frameWidth?: number
|
||||
frameHeight?: number
|
||||
@ -26,34 +27,36 @@ export type TextureData = {
|
||||
}
|
||||
|
||||
export type Tile = {
|
||||
id: string
|
||||
id: UUID
|
||||
name: string
|
||||
tags: any | null
|
||||
createdAt: Date
|
||||
updatedAt: Date
|
||||
}
|
||||
|
||||
export type MapObject = {
|
||||
id: string
|
||||
export type Object = {
|
||||
id: UUID
|
||||
name: string
|
||||
tags: string[]
|
||||
pivotPoints: { x: number; y: number }[]
|
||||
tags: any | null
|
||||
originX: number
|
||||
originY: number
|
||||
isAnimated: boolean
|
||||
frameRate: number
|
||||
frameWidth: number
|
||||
frameHeight: number
|
||||
createdAt: Date
|
||||
updatedAt: Date
|
||||
ZoneObject: ZoneObject[]
|
||||
}
|
||||
|
||||
export type Item = {
|
||||
id: string
|
||||
id: UUID
|
||||
name: string
|
||||
description: string | null
|
||||
itemType: ItemType
|
||||
stackable: boolean
|
||||
rarity: ItemRarity
|
||||
spriteId: UUID | null
|
||||
sprite?: Sprite
|
||||
createdAt: Date
|
||||
updatedAt: Date
|
||||
@ -62,63 +65,72 @@ export type Item = {
|
||||
export type ItemType = 'WEAPON' | 'HELMET' | 'CHEST' | 'LEGS' | 'BOOTS' | 'GLOVES' | 'RING' | 'NECKLACE'
|
||||
export type ItemRarity = 'COMMON' | 'UNCOMMON' | 'RARE' | 'EPIC' | 'LEGENDARY'
|
||||
|
||||
export type Map = {
|
||||
id: string
|
||||
export type Zone = {
|
||||
id: UUID
|
||||
name: string
|
||||
width: number
|
||||
height: number
|
||||
tiles: string[][]
|
||||
tiles: any | null
|
||||
pvp: boolean
|
||||
mapEffects: MapEffect[]
|
||||
mapEventTiles: MapEventTile[]
|
||||
placedMapObjects: PlacedMapObject[]
|
||||
zoneEffects: ZoneEffect[]
|
||||
zoneEventTiles: ZoneEventTile[]
|
||||
zoneObjects: ZoneObject[]
|
||||
characters: Character[]
|
||||
chats: Chat[]
|
||||
createdAt: Date
|
||||
updatedAt: Date
|
||||
}
|
||||
|
||||
export type MapEffect = {
|
||||
id: string
|
||||
export type ZoneEffect = {
|
||||
id: UUID
|
||||
zoneId: UUID
|
||||
zone: Zone
|
||||
effect: string
|
||||
strength: number
|
||||
}
|
||||
|
||||
export type PlacedMapObject = {
|
||||
id: string
|
||||
mapObject: MapObject | string
|
||||
export type ZoneObject = {
|
||||
id: UUID
|
||||
zoneId: UUID
|
||||
zone: Zone
|
||||
objectId: UUID
|
||||
object: Object
|
||||
depth: number
|
||||
isRotated: boolean
|
||||
positionX: number
|
||||
positionY: number
|
||||
}
|
||||
|
||||
export enum MapEventTileType {
|
||||
export enum ZoneEventTileType {
|
||||
BLOCK = 'BLOCK',
|
||||
TELEPORT = 'TELEPORT',
|
||||
NPC = 'NPC',
|
||||
ITEM = 'ITEM'
|
||||
}
|
||||
|
||||
export type MapEventTile = {
|
||||
id: string
|
||||
map: string
|
||||
type: MapEventTileType
|
||||
export type ZoneEventTile = {
|
||||
id: UUID
|
||||
zoneId: UUID
|
||||
zone: Zone
|
||||
type: ZoneEventTileType
|
||||
positionX: number
|
||||
positionY: number
|
||||
teleport?: MapEventTileTeleport
|
||||
teleport?: ZoneEventTileTeleport
|
||||
}
|
||||
|
||||
export type MapEventTileTeleport = {
|
||||
id: string
|
||||
mapEventTile: MapEventTile
|
||||
toMap: Map
|
||||
export type ZoneEventTileTeleport = {
|
||||
id: UUID
|
||||
zoneEventTileId: UUID
|
||||
zoneEventTile: ZoneEventTile
|
||||
toZoneId: UUID
|
||||
toZone: Zone
|
||||
toPositionX: number
|
||||
toPositionY: number
|
||||
toRotation: number
|
||||
}
|
||||
|
||||
export type User = {
|
||||
id: string
|
||||
id: UUID
|
||||
username: string
|
||||
password: string
|
||||
characters: Character[]
|
||||
@ -138,27 +150,29 @@ export enum CharacterRace {
|
||||
}
|
||||
|
||||
export type CharacterType = {
|
||||
id: string
|
||||
id: UUID
|
||||
name: string
|
||||
gender: CharacterGender
|
||||
race: CharacterRace
|
||||
isSelectable: boolean
|
||||
characters: Character[]
|
||||
spriteId?: string
|
||||
sprite?: Sprite
|
||||
createdAt: Date
|
||||
updatedAt: Date
|
||||
}
|
||||
|
||||
export type CharacterHair = {
|
||||
id: string
|
||||
id: UUID
|
||||
name: string
|
||||
sprite?: Sprite
|
||||
sprite: Sprite
|
||||
gender: CharacterGender
|
||||
isSelectable: boolean
|
||||
}
|
||||
|
||||
export type Character = {
|
||||
id: string
|
||||
userid: string
|
||||
id: UUID
|
||||
userId: UUID
|
||||
user: User
|
||||
name: string
|
||||
hitpoints: number
|
||||
@ -170,30 +184,35 @@ export type Character = {
|
||||
positionX: number
|
||||
positionY: number
|
||||
rotation: number
|
||||
characterType: UUID | null
|
||||
characterHair: UUID | null
|
||||
map: UUID
|
||||
characterTypeId: UUID | null
|
||||
characterType: CharacterType | null | string
|
||||
characterHairId: UUID | null
|
||||
characterHair: CharacterHair | null
|
||||
zoneId: UUID
|
||||
zone: Zone
|
||||
chats: Chat[]
|
||||
items: CharacterItem[]
|
||||
equipment: CharacterEquipment[]
|
||||
}
|
||||
|
||||
export type MapCharacter = {
|
||||
export type ZoneCharacter = {
|
||||
character: Character
|
||||
isMoving: boolean
|
||||
isAttacking?: boolean
|
||||
isMoving?: boolean
|
||||
}
|
||||
|
||||
export type CharacterItem = {
|
||||
id: string
|
||||
id: UUID
|
||||
characterId: UUID
|
||||
character: Character
|
||||
itemId: UUID
|
||||
item: Item
|
||||
quantity: number
|
||||
}
|
||||
|
||||
export type CharacterEquipment = {
|
||||
id: string
|
||||
id: UUID
|
||||
slot: CharacterEquipmentSlotType
|
||||
characterItemId: UUID
|
||||
characterItem: CharacterItem
|
||||
}
|
||||
|
||||
@ -207,7 +226,7 @@ export enum CharacterEquipmentSlotType {
|
||||
}
|
||||
|
||||
export type Sprite = {
|
||||
id: string
|
||||
id: UUID
|
||||
name: string
|
||||
createdAt: Date
|
||||
updatedAt: Date
|
||||
@ -215,45 +234,45 @@ export type Sprite = {
|
||||
characterTypes: CharacterType[]
|
||||
}
|
||||
|
||||
export interface SpriteImage {
|
||||
url: string
|
||||
offset: {
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
}
|
||||
|
||||
export type SpriteAction = {
|
||||
id: string
|
||||
sprite: string
|
||||
id: UUID
|
||||
sprite: Sprite
|
||||
action: string
|
||||
sprites: SpriteImage[]
|
||||
sprites: string[]
|
||||
originX: number
|
||||
originY: number
|
||||
isAnimated: boolean
|
||||
isLooping: boolean
|
||||
frameWidth: number
|
||||
frameHeight: number
|
||||
frameRate: number
|
||||
}
|
||||
|
||||
export type Chat = {
|
||||
id: string
|
||||
id: UUID
|
||||
characterId: UUID
|
||||
character: Character
|
||||
map: Map
|
||||
zoneId: UUID
|
||||
zone: Zone
|
||||
message: string
|
||||
createdAt: Date
|
||||
}
|
||||
|
||||
export type WorldSettings = {
|
||||
date: Date
|
||||
weatherState: WeatherState
|
||||
}
|
||||
|
||||
export type WeatherState = {
|
||||
rainPercentage: number
|
||||
isRainEnabled: boolean
|
||||
isFogEnabled: boolean
|
||||
fogDensity: number
|
||||
}
|
||||
|
||||
export type mapLoadData = {
|
||||
mapId: string
|
||||
characters: MapCharacter[]
|
||||
export type WeatherState = {
|
||||
isRainEnabled: boolean
|
||||
rainPercentage: number
|
||||
isFogEnabled: boolean
|
||||
fogDensity: number
|
||||
}
|
||||
|
||||
export type zoneLoadData = {
|
||||
zone: Zone
|
||||
characters: ZoneCharacter[]
|
||||
}
|
||||
|
||||
@ -1,45 +1,25 @@
|
||||
import config from '@/application/config'
|
||||
import type { HttpResponse } from '@/application/types'
|
||||
import type { BaseStorage } from '@/storage/baseStorage'
|
||||
|
||||
export function uuidv4() {
|
||||
return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) => (+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16))
|
||||
}
|
||||
|
||||
export function unduplicateArray(array: any[]) {
|
||||
const arrayToProcess = typeof array.flat === 'function' ? array.flat() : array
|
||||
return [...new Set(arrayToProcess)]
|
||||
return [...new Set(array.flat())]
|
||||
}
|
||||
|
||||
export async function downloadCache<T extends { id: string; updatedAt: Date }>(endpoint: string, storage: BaseStorage<T>) {
|
||||
const request = await fetch(`${config.server_endpoint}/cache/${endpoint}`)
|
||||
const response = (await request.json()) as HttpResponse<T[]>
|
||||
|
||||
if (!response.success) {
|
||||
console.error(`Failed to download ${endpoint}:`, response.message)
|
||||
return
|
||||
export function getDomain() {
|
||||
// Check if not localhost
|
||||
if (window.location.hostname !== 'localhost') {
|
||||
return window.location.hostname
|
||||
}
|
||||
|
||||
const items = response.data ?? []
|
||||
const serverItemIds = new Set(items.map((item) => item.id))
|
||||
|
||||
// Remove items that don't exist on server
|
||||
const existingItems = await storage.getAll()
|
||||
for (const existingItem of existingItems) {
|
||||
if (!serverItemIds.has(existingItem.id)) {
|
||||
await storage.delete(existingItem.id)
|
||||
}
|
||||
// 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
|
||||
}
|
||||
|
||||
// Update or add new items
|
||||
for (const item of items) {
|
||||
let overwrite = false
|
||||
const existingItem = await storage.getById(item.id)
|
||||
|
||||
if (!existingItem || item.updatedAt > existingItem.updatedAt) {
|
||||
overwrite = true
|
||||
}
|
||||
|
||||
await storage.add(item, overwrite)
|
||||
if (window.location.hostname.split('.').length < 3) {
|
||||
return window.location.hostname
|
||||
}
|
||||
|
||||
return window.location.hostname.split('.').slice(-2).join('.')
|
||||
}
|
||||
|
||||
@ -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 font-default;
|
||||
@apply px-4 py-2.5 text-base leading-5 bg-gray border border-solid border-gray-500 rounded text-gray-300;
|
||||
&:focus-visible {
|
||||
@apply outline-none border-cyan rounded bg-gray-900;
|
||||
}
|
||||
@ -88,12 +88,6 @@ 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 {
|
||||
@ -128,15 +122,6 @@ 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;
|
||||
|
||||
@ -164,10 +149,6 @@ 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;
|
||||
|
||||
179
src/components/Effects.vue
Normal file
179
src/components/Effects.vue
Normal file
@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<Scene name="effects" @preload="preloadScene" @create="createScene" @update="updateScene" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { WeatherState } from '@/application/types'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneStore } from '@/stores/zoneStore'
|
||||
import { Scene } from 'phavuer'
|
||||
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
|
||||
// Constants
|
||||
const LIGHT_CONFIG = {
|
||||
SUNRISE_HOUR: 6,
|
||||
SUNSET_HOUR: 20,
|
||||
DAY_STRENGTH: 100,
|
||||
NIGHT_STRENGTH: 30
|
||||
}
|
||||
|
||||
// Stores and refs
|
||||
const gameStore = useGameStore()
|
||||
const zoneStore = useZoneStore()
|
||||
const sceneRef = ref<Phaser.Scene | null>(null)
|
||||
const zoneEffectsReady = ref(false)
|
||||
|
||||
// Effect objects
|
||||
const effects = {
|
||||
light: ref<Phaser.GameObjects.Graphics | null>(null),
|
||||
rain: ref<Phaser.GameObjects.Particles.ParticleEmitter | null>(null),
|
||||
fog: ref<Phaser.GameObjects.Sprite | null>(null)
|
||||
}
|
||||
|
||||
// Weather state
|
||||
const weatherState = ref<WeatherState>({
|
||||
isRainEnabled: false,
|
||||
rainPercentage: 0,
|
||||
isFogEnabled: false,
|
||||
fogDensity: 0
|
||||
})
|
||||
|
||||
// Scene setup
|
||||
const preloadScene = (scene: Phaser.Scene) => {
|
||||
scene.load.image('raindrop', 'assets/raindrop.png')
|
||||
scene.load.image('fog', 'assets/fog.png')
|
||||
}
|
||||
|
||||
const createScene = (scene: Phaser.Scene) => {
|
||||
sceneRef.value = scene
|
||||
initializeEffects(scene)
|
||||
setupSocketListeners()
|
||||
}
|
||||
|
||||
const initializeEffects = (scene: Phaser.Scene) => {
|
||||
// Light
|
||||
effects.light.value = scene.add.graphics().setDepth(1000)
|
||||
|
||||
// Rain
|
||||
effects.rain.value = scene.add
|
||||
.particles(0, 0, 'raindrop', {
|
||||
x: { min: 0, max: window.innerWidth },
|
||||
y: -50,
|
||||
quantity: 5,
|
||||
lifespan: 2000,
|
||||
speedY: { min: 300, max: 500 },
|
||||
scale: { start: 0.005, end: 0.005 },
|
||||
alpha: { start: 0.5, end: 0 },
|
||||
blendMode: 'ADD'
|
||||
})
|
||||
.setDepth(900)
|
||||
effects.rain.value.stop()
|
||||
|
||||
// Fog
|
||||
effects.fog.value = scene.add
|
||||
.sprite(window.innerWidth / 2, window.innerHeight / 2, 'fog')
|
||||
.setScale(2)
|
||||
.setAlpha(0)
|
||||
.setDepth(950)
|
||||
}
|
||||
|
||||
// Effect updates
|
||||
const updateScene = () => {
|
||||
const timeBasedLight = calculateLightStrength(gameStore.world.date)
|
||||
const zoneEffects = zoneStore.zone?.zoneEffects?.reduce(
|
||||
(acc, curr) => ({
|
||||
...acc,
|
||||
[curr.effect]: curr.strength
|
||||
}),
|
||||
{}
|
||||
) as { [key: string]: number }
|
||||
|
||||
// Only update effects once zoneEffects are loaded
|
||||
if (!zoneEffectsReady.value) {
|
||||
if (zoneEffects && Object.keys(zoneEffects).length) {
|
||||
zoneEffectsReady.value = true
|
||||
} else {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
const finalEffects =
|
||||
zoneEffects && Object.keys(zoneEffects).length
|
||||
? zoneEffects
|
||||
: {
|
||||
light: timeBasedLight,
|
||||
rain: weatherState.value.isRainEnabled ? weatherState.value.rainPercentage : 0,
|
||||
fog: weatherState.value.isFogEnabled ? weatherState.value.fogDensity * 100 : 0
|
||||
}
|
||||
|
||||
applyEffects(finalEffects)
|
||||
}
|
||||
|
||||
const applyEffects = (effectValues: any) => {
|
||||
if (effects.light.value) {
|
||||
const darkness = 1 - (effectValues.light ?? 100) / 100
|
||||
effects.light.value.clear().fillStyle(0x000000, darkness).fillRect(0, 0, window.innerWidth, window.innerHeight)
|
||||
}
|
||||
|
||||
if (effects.rain.value) {
|
||||
const strength = effectValues.rain ?? 0
|
||||
strength > 0 ? effects.rain.value.start().setQuantity(Math.floor((strength / 100) * 10)) : effects.rain.value.stop()
|
||||
}
|
||||
|
||||
if (effects.fog.value) {
|
||||
effects.fog.value.setAlpha((effectValues.fog ?? 0) / 100)
|
||||
}
|
||||
}
|
||||
|
||||
const calculateLightStrength = (time: Date): number => {
|
||||
const hour = time.getHours()
|
||||
const minute = time.getMinutes()
|
||||
|
||||
if (hour >= LIGHT_CONFIG.SUNSET_HOUR || hour < LIGHT_CONFIG.SUNRISE_HOUR) return LIGHT_CONFIG.NIGHT_STRENGTH
|
||||
|
||||
if (hour > LIGHT_CONFIG.SUNRISE_HOUR && hour < LIGHT_CONFIG.SUNSET_HOUR - 2) return LIGHT_CONFIG.DAY_STRENGTH
|
||||
|
||||
if (hour === LIGHT_CONFIG.SUNRISE_HOUR) return LIGHT_CONFIG.NIGHT_STRENGTH + ((LIGHT_CONFIG.DAY_STRENGTH - LIGHT_CONFIG.NIGHT_STRENGTH) * minute) / 60
|
||||
|
||||
const totalMinutes = (hour - (LIGHT_CONFIG.SUNSET_HOUR - 2)) * 60 + minute
|
||||
return LIGHT_CONFIG.DAY_STRENGTH - (LIGHT_CONFIG.DAY_STRENGTH - LIGHT_CONFIG.NIGHT_STRENGTH) * (totalMinutes / 120)
|
||||
}
|
||||
|
||||
// Socket and window handlers
|
||||
const setupSocketListeners = () => {
|
||||
gameStore.connection?.emit('weather', (response: WeatherState) => {
|
||||
weatherState.value = response
|
||||
updateScene()
|
||||
})
|
||||
|
||||
gameStore.connection!.on('weather', (data: WeatherState) => {
|
||||
weatherState.value = data
|
||||
updateScene()
|
||||
})
|
||||
|
||||
gameStore.connection!.on('date', updateScene)
|
||||
}
|
||||
|
||||
const handleResize = () => {
|
||||
if (effects.rain.value) effects.rain.value.updateConfig({ x: { min: 0, max: window.innerWidth } })
|
||||
if (effects.fog.value) effects.fog.value.setPosition(window.innerWidth / 2, window.innerHeight / 2)
|
||||
}
|
||||
|
||||
// Lifecycle
|
||||
watch(
|
||||
() => zoneStore.zone,
|
||||
() => {
|
||||
zoneEffectsReady.value = false
|
||||
updateScene()
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
onMounted(() => window.addEventListener('resize', handleResize))
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
if (sceneRef.value) sceneRef.value.scene.remove('effects')
|
||||
gameStore.connection?.off('weather')
|
||||
})
|
||||
</script>
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="flex flex-wrap items-center input-field gap-1" @click="focusInput">
|
||||
<div v-for="(chip, i) in internalValue" :key="i" class="flex gap-2.5 items-center bg-cyan rounded py-1 px-2" role="listitem">
|
||||
<div class="flex flex-wrap items-center input-field gap-1">
|
||||
<div v-for="(chip, i) in internalValue" :key="i" class="flex gap-2.5 items-center bg-cyan rounded py-1 px-2">
|
||||
<span class="text-xs text-white">{{ chip }}</span>
|
||||
<button type="button" class="text-xs cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click.stop="deleteChip(i)" aria-label="Remove tag">×</button>
|
||||
<button type="button" class="text-xs cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)" aria-label="Remove chip">×</button>
|
||||
</div>
|
||||
<input ref="inputRef" class="outline-none border-none p-1 text-gray-300 min-w-[60px] flex-grow" :placeholder="placeholder" v-model.trim="currentInput" @keydown="handleKeydown" @paste="handlePaste" :maxlength="maxChipLength" aria-label="Add new tag" />
|
||||
<input class="outline-none border-none p-1 text-gray-300" placeholder="Tag name" v-model="currentInput" @keypress.enter.prevent="addChip" @keydown.backspace="handleBackspace" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -14,29 +14,20 @@ import type { Ref } from 'vue'
|
||||
|
||||
interface Props {
|
||||
modelValue?: string[]
|
||||
maxChips?: number
|
||||
maxChipLength?: number
|
||||
placeholder?: string
|
||||
allowDuplicates?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
modelValue: () => [],
|
||||
maxChips: 10,
|
||||
maxChipLength: 20,
|
||||
placeholder: 'Add tag',
|
||||
allowDuplicates: false
|
||||
modelValue: () => []
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string[]): void
|
||||
(e: 'error', message: string): void
|
||||
}>()
|
||||
|
||||
const currentInput: Ref<string> = ref('')
|
||||
const internalValue = ref<string[]>([])
|
||||
const inputRef = ref<HTMLInputElement | null>(null)
|
||||
|
||||
// Initialize internalValue with props.modelValue
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newValue) => {
|
||||
@ -45,27 +36,9 @@ watch(
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
const validateChip = (chip: string): boolean => {
|
||||
if (!chip) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (!props.allowDuplicates && internalValue.value.includes(chip)) {
|
||||
emit('error', 'Duplicate tags are not allowed')
|
||||
return false
|
||||
}
|
||||
|
||||
if (internalValue.value.length >= props.maxChips) {
|
||||
emit('error', `Maximum ${props.maxChips} tags allowed`)
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
const addChip = () => {
|
||||
const trimmedInput = currentInput.value.trim()
|
||||
if (validateChip(trimmedInput)) {
|
||||
if (trimmedInput && !internalValue.value.includes(trimmedInput)) {
|
||||
internalValue.value.push(trimmedInput)
|
||||
emit('update:modelValue', internalValue.value)
|
||||
currentInput.value = ''
|
||||
@ -77,36 +50,10 @@ const deleteChip = (index: number) => {
|
||||
emit('update:modelValue', internalValue.value)
|
||||
}
|
||||
|
||||
const handleKeydown = (event: KeyboardEvent) => {
|
||||
switch (event.key) {
|
||||
case 'Enter':
|
||||
event.preventDefault()
|
||||
addChip()
|
||||
break
|
||||
case 'Backspace':
|
||||
if (currentInput.value === '' && internalValue.value.length > 0) {
|
||||
deleteChip(internalValue.value.length - 1)
|
||||
}
|
||||
break
|
||||
const handleBackspace = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Backspace' && currentInput.value === '' && internalValue.value.length > 0) {
|
||||
internalValue.value.pop()
|
||||
emit('update:modelValue', internalValue.value)
|
||||
}
|
||||
}
|
||||
|
||||
const handlePaste = (event: ClipboardEvent) => {
|
||||
event.preventDefault()
|
||||
const pastedText = event.clipboardData?.getData('text')
|
||||
if (pastedText) {
|
||||
const chips = pastedText
|
||||
.split(/[,\n]/)
|
||||
.map((chip) => chip.trim())
|
||||
.filter(Boolean)
|
||||
chips.forEach((chip) => {
|
||||
currentInput.value = chip
|
||||
addChip()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const focusInput = () => {
|
||||
inputRef.value?.focus()
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,102 +1,192 @@
|
||||
<template>
|
||||
<Container ref="characterContainer" :x="currentPositionX" :y="currentPositionY" :depth="isometricDepth">
|
||||
<ChatBubble :mapCharacter="props.mapCharacter" />
|
||||
<HealthBar :mapCharacter="props.mapCharacter" />
|
||||
<CharacterHair :mapCharacter="props.mapCharacter" />
|
||||
<Sprite ref="characterSprite" :origin-y="1" :flipX="isFlippedX" />
|
||||
<ChatBubble :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
|
||||
<Healthbar :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
|
||||
<Container ref="charContainer" :depth="isometricDepth" :x="currentX" :y="currentY">
|
||||
<CharacterHair :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
|
||||
<!-- <CharacterChest :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />-->
|
||||
<Sprite ref="charSprite" :origin-y="1" :flipX="isFlippedX" />
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { type MapCharacter } from '@/application/types'
|
||||
import config from '@/application/config'
|
||||
import { type Sprite as SpriteT, type ZoneCharacter } 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 { useCharacterSpriteComposable } from '@/composables/useCharacterSpriteComposable'
|
||||
import { useSoundComposable } from '@/composables/useSoundComposable'
|
||||
import Healthbar from '@/components/game/character/partials/Healthbar.vue'
|
||||
import { loadSpriteTextures } from '@/composables/gameComposable'
|
||||
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useMapStore } from '@/stores/mapStore'
|
||||
import { Container, Sprite, useScene } from 'phavuer'
|
||||
import { onMounted, onUnmounted, watch } from 'vue'
|
||||
import { useZoneStore } from '@/stores/zoneStore'
|
||||
import { Container, refObj, Sprite, useScene } from 'phavuer'
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
|
||||
// import CharacterChest from '@/components/game/character/partials/CharacterChest.vue'
|
||||
|
||||
enum Direction {
|
||||
POSITIVE,
|
||||
NEGATIVE,
|
||||
UNCHANGED
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
tileMap: Phaser.Tilemaps.Tilemap
|
||||
mapCharacter: MapCharacter
|
||||
tilemap: Phaser.Tilemaps.Tilemap
|
||||
zoneCharacter: ZoneCharacter
|
||||
}>()
|
||||
|
||||
const charContainer = refObj<Phaser.GameObjects.Container>()
|
||||
const charSprite = refObj<Phaser.GameObjects.Sprite>()
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const mapStore = useMapStore()
|
||||
const zoneStore = useZoneStore()
|
||||
const scene = useScene()
|
||||
|
||||
const { characterContainer, characterSprite, currentPositionX, currentPositionY, isometricDepth, isFlippedX, updatePosition, playAnimation, updateSprite, initializeSprite, cleanup } = useCharacterSpriteComposable(scene, props.tileMap, props.mapCharacter)
|
||||
const { playSound, stopSound } = useSoundComposable()
|
||||
const currentX = ref(0)
|
||||
const currentY = ref(0)
|
||||
const isometricDepth = ref(1)
|
||||
const isInitialPosition = ref(true)
|
||||
const isMoving = ref(false)
|
||||
let animationFrame: number | null = null
|
||||
const moveSpeed = 5.7
|
||||
|
||||
const handlePositionUpdate = (newValues: any, oldValues: any) => {
|
||||
if (!newValues) return
|
||||
const updateIsometricDepth = (x: number, y: number) => {
|
||||
isometricDepth.value = calculateIsometricDepth(x, y, 28, 94, true)
|
||||
}
|
||||
|
||||
if (!oldValues || newValues.positionX !== oldValues.positionX || newValues.positionY !== oldValues.positionY) {
|
||||
updatePosition(newValues.positionX, newValues.positionY)
|
||||
}
|
||||
|
||||
if (newValues.isMoving !== oldValues?.isMoving || newValues.rotation !== oldValues?.rotation) {
|
||||
updateSprite()
|
||||
const stopMovement = () => {
|
||||
isMoving.value = false
|
||||
if (animationFrame) {
|
||||
cancelAnimationFrame(animationFrame)
|
||||
animationFrame = null
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Plays walk sound when character is moving
|
||||
*/
|
||||
watch(
|
||||
() => props.mapCharacter.isMoving,
|
||||
(newValue) => {
|
||||
if (newValue) {
|
||||
playSound('/assets/sounds/walk.wav', false, true)
|
||||
const updatePosition = (x: number, y: number, direction: Direction) => {
|
||||
const targetX = tileToWorldX(props.tilemap, x, y)
|
||||
const targetY = tileToWorldY(props.tilemap, x, y)
|
||||
|
||||
if (isInitialPosition.value) {
|
||||
currentX.value = targetX
|
||||
currentY.value = targetY
|
||||
isInitialPosition.value = false
|
||||
return
|
||||
}
|
||||
|
||||
if (isMoving.value) {
|
||||
stopMovement()
|
||||
}
|
||||
|
||||
const distance = Math.sqrt(Math.pow(targetX - currentX.value, 2) + Math.pow(targetY - currentY.value, 2))
|
||||
|
||||
isMoving.value = true
|
||||
const startTime = performance.now()
|
||||
const startX = currentX.value
|
||||
const startY = currentY.value
|
||||
const duration = distance * moveSpeed
|
||||
|
||||
if (direction === Direction.POSITIVE) {
|
||||
updateIsometricDepth(x, y)
|
||||
}
|
||||
|
||||
const animate = (currentTime: number) => {
|
||||
if (!isMoving.value) return
|
||||
|
||||
const elapsed = currentTime - startTime
|
||||
const progress = Math.min(elapsed / duration, 1)
|
||||
|
||||
currentX.value = startX + (targetX - startX) * progress
|
||||
currentY.value = startY + (targetY - startY) * progress
|
||||
|
||||
if (progress < 1) {
|
||||
animationFrame = requestAnimationFrame(animate)
|
||||
} else {
|
||||
stopSound('/assets/sounds/walk.wav')
|
||||
isMoving.value = false
|
||||
if (direction === Direction.NEGATIVE) {
|
||||
updateIsometricDepth(x, y)
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
/**
|
||||
* 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)
|
||||
animationFrame = requestAnimationFrame(animate)
|
||||
}
|
||||
|
||||
const calcDirection = (oldX: number, oldY: number, newX: number, newY: number): Direction => {
|
||||
if (newY < oldY || newX < oldX) return Direction.NEGATIVE
|
||||
if (newX > oldX || newY > oldY) return Direction.POSITIVE
|
||||
return Direction.UNCHANGED
|
||||
}
|
||||
|
||||
const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
|
||||
|
||||
const charTexture = computed(() => {
|
||||
const { rotation, characterType } = props.zoneCharacter.character
|
||||
const spriteId = characterType?.sprite ?? 'idle_right_down'
|
||||
const action = props.zoneCharacter.isMoving ? 'walk' : 'idle'
|
||||
const direction = [0, 6].includes(rotation) ? 'left_up' : 'right_down'
|
||||
|
||||
return `${spriteId}-${action}_${direction}`
|
||||
})
|
||||
|
||||
const updateSprite = () => {
|
||||
if (props.zoneCharacter.isMoving) {
|
||||
charSprite.value!.anims.play(charTexture.value, true)
|
||||
return
|
||||
}
|
||||
)
|
||||
|
||||
/**
|
||||
* Handles position updates and movement delay
|
||||
*/
|
||||
charSprite.value!.anims.stop()
|
||||
charSprite.value!.setFrame(0)
|
||||
charSprite.value!.setTexture(charTexture.value)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => ({
|
||||
positionX: props.mapCharacter.character.positionX,
|
||||
positionY: props.mapCharacter.character.positionY,
|
||||
isMoving: props.mapCharacter.isMoving,
|
||||
rotation: props.mapCharacter.character.rotation,
|
||||
isAttacking: props.mapCharacter.isAttacking
|
||||
x: props.zoneCharacter.character.positionX,
|
||||
y: props.zoneCharacter.character.positionY,
|
||||
isMoving: props.zoneCharacter.isMoving,
|
||||
rotation: props.zoneCharacter.character.rotation
|
||||
}),
|
||||
(oldValues, newValues) => {
|
||||
handlePositionUpdate(oldValues, newValues)
|
||||
}
|
||||
(newValues, oldValues) => {
|
||||
if (!newValues) return
|
||||
|
||||
if (!oldValues || newValues.x !== oldValues.x || newValues.y !== oldValues.y) {
|
||||
const direction = !oldValues ? Direction.POSITIVE : calcDirection(oldValues.x, oldValues.y, newValues.x, newValues.y)
|
||||
updatePosition(newValues.x, newValues.y, direction)
|
||||
}
|
||||
|
||||
// Handle animation updates
|
||||
if (newValues.isMoving !== oldValues?.isMoving || newValues.rotation !== oldValues?.rotation) {
|
||||
updateSprite()
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
onMounted(async () => {
|
||||
await initializeSprite()
|
||||
if (props.mapCharacter.character.id === gameStore.character!.id) {
|
||||
scene.cameras.main.startFollow(characterContainer.value as Phaser.GameObjects.Container)
|
||||
watch(() => props.zoneCharacter, updateSprite)
|
||||
|
||||
loadSpriteTextures(scene, props.zoneCharacter.character.characterType?.sprite as string)
|
||||
.then(() => {
|
||||
charSprite.value!.setTexture(charTexture.value)
|
||||
charSprite.value!.setFlipX(isFlippedX.value)
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error loading texture:', error)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
charContainer.value!.setName(props.zoneCharacter.character!.name)
|
||||
|
||||
if (props.zoneCharacter.character.id === gameStore.character!.id) {
|
||||
zoneStore.setCharacterLoaded(true)
|
||||
|
||||
// #146 : Set camera position to character, need to be improved still
|
||||
// scene.cameras.main.startFollow(charContainer.value as Phaser.GameObjects.Container)
|
||||
// scene.cameras.main.stopFollow()
|
||||
}
|
||||
|
||||
updatePosition(props.zoneCharacter.character.positionX, props.zoneCharacter.character.positionY, props.zoneCharacter.character.rotation)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
cleanup()
|
||||
stopMovement()
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
51
src/components/game/character/partials/CharacterChest.vue
Normal file
51
src/components/game/character/partials/CharacterChest.vue
Normal file
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<Image v-bind="imageProps" v-if="gameStore.getLoadedAsset(texture)" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { Sprite as SpriteT, ZoneCharacter } from '@/application/types'
|
||||
import { loadSpriteTextures } from '@/composables/gameComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { Image, useScene } from 'phavuer'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
zoneCharacter: ZoneCharacter
|
||||
currentX: number
|
||||
currentY: number
|
||||
}>()
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const scene = useScene()
|
||||
|
||||
const texture = computed(() => {
|
||||
const { rotation, characterHair } = props.zoneCharacter.character
|
||||
const spriteId = characterHair?.sprite?.id
|
||||
const direction = [0, 6].includes(rotation) ? 'back' : 'front'
|
||||
|
||||
return `${spriteId}-${direction}`
|
||||
})
|
||||
|
||||
const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
|
||||
|
||||
const imageProps = computed(() => {
|
||||
// Get the current sprite action based on direction
|
||||
const direction = [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 'back' : 'front'
|
||||
const spriteAction = props.zoneCharacter.character.characterHair?.sprite?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
|
||||
|
||||
return {
|
||||
depth: 1,
|
||||
originX: Number(spriteAction?.originX) ?? 0,
|
||||
originY: Number(spriteAction?.originY) ?? 0,
|
||||
flipX: isFlippedX.value,
|
||||
texture: texture.value
|
||||
// y: props.zoneCharacter.isMoving ? Math.floor(Date.now() / 250) % 2 : 0
|
||||
}
|
||||
})
|
||||
|
||||
loadSpriteTextures(scene, props.zoneCharacter.character.characterHair?.sprite as SpriteT)
|
||||
.then(() => {})
|
||||
.catch((error) => {
|
||||
console.error('Error loading texture:', error)
|
||||
})
|
||||
</script>
|
||||
@ -1,54 +1,51 @@
|
||||
<template>
|
||||
<Image v-bind="imageProps" v-if="gameStore.isTextureLoaded(texture)" />
|
||||
<Image v-bind="imageProps" v-if="gameStore.getLoadedAsset(texture)" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { MapCharacter, Sprite as SpriteT } from '@/application/types'
|
||||
import { loadSpriteTextures } from '@/services/textureService'
|
||||
import { CharacterHairStorage, CharacterTypeStorage, SpriteStorage } from '@/storage/storages'
|
||||
import type { Sprite as SpriteT, ZoneCharacter } from '@/application/types'
|
||||
import { loadSpriteTextures } from '@/composables/gameComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { Image, useScene } from 'phavuer'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
mapCharacter: MapCharacter
|
||||
zoneCharacter: ZoneCharacter
|
||||
currentX: number
|
||||
currentY: number
|
||||
}>()
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const scene = useScene()
|
||||
const hairSpriteId = ref('')
|
||||
const sprite = ref<SpriteT | null>(null)
|
||||
|
||||
const texture = computed(() => {
|
||||
const { rotation } = props.mapCharacter.character
|
||||
const { rotation, characterHair } = props.zoneCharacter.character
|
||||
const spriteId = characterHair?.sprite?.id
|
||||
const direction = [0, 6].includes(rotation) ? 'back' : 'front'
|
||||
|
||||
return `${hairSpriteId.value}-${direction}`
|
||||
return `${spriteId}-${direction}`
|
||||
})
|
||||
|
||||
const isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.character.rotation ?? 0))
|
||||
const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
|
||||
|
||||
const imageProps = computed(() => {
|
||||
const direction = [0, 6].includes(props.mapCharacter.character.rotation ?? 0) ? 'back' : 'front'
|
||||
const spriteAction = sprite.value?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
|
||||
// Get the current sprite action based on direction
|
||||
const direction = [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 'back' : 'front'
|
||||
const spriteAction = props.zoneCharacter.character.characterHair?.sprite?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
|
||||
|
||||
return {
|
||||
depth: 9999,
|
||||
depth: 1,
|
||||
originX: Number(spriteAction?.originX) ?? 0,
|
||||
originY: Number(spriteAction?.originY) ?? 0,
|
||||
flipX: isFlippedX.value,
|
||||
texture: texture.value
|
||||
texture: texture.value,
|
||||
y: props.zoneCharacter.isMoving ? Math.floor(Date.now() / 250) % 2 : 0
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
const characterHairStorage = new CharacterHairStorage()
|
||||
const spriteId = await characterHairStorage.getSpriteId(props.mapCharacter.character.characterHair!)
|
||||
if (!spriteId) return
|
||||
|
||||
hairSpriteId.value = spriteId
|
||||
const spriteStorage = new SpriteStorage()
|
||||
sprite.value = await spriteStorage.getById(spriteId)
|
||||
await loadSpriteTextures(scene, spriteId)
|
||||
})
|
||||
loadSpriteTextures(scene, props.zoneCharacter.character.characterHair?.sprite as SpriteT)
|
||||
.then(() => {})
|
||||
.catch((error) => {
|
||||
console.error('Error loading texture:', error)
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,32 +1,33 @@
|
||||
<template>
|
||||
<Container ref="characterChatContainer">
|
||||
<Container ref="charChatContainer" :depth="999" :x="currentX" :y="currentY">
|
||||
<RoundRectangle @create="createChatBubble" :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="20" />
|
||||
<Text @create="createChatText" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { MapCharacter } from '@/application/types'
|
||||
import type { ZoneCharacter } from '@/application/types'
|
||||
import { Container, refObj, RoundRectangle, Text, useGame } from 'phavuer'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
mapCharacter: MapCharacter
|
||||
zoneCharacter: ZoneCharacter
|
||||
currentX: number
|
||||
currentY: number
|
||||
}>()
|
||||
|
||||
const game = useGame()
|
||||
const characterChatContainer = refObj<Phaser.GameObjects.Container>()
|
||||
const charChatContainer = refObj<Phaser.GameObjects.Container>()
|
||||
|
||||
const createChatBubble = (container: Phaser.GameObjects.Container) => {
|
||||
container.setName(`${props.mapCharacter.character.name}_chatBubble`)
|
||||
container.setName(`${props.zoneCharacter.character.name}_chatBubble`)
|
||||
}
|
||||
|
||||
const createChatText = (text: Phaser.GameObjects.Text) => {
|
||||
text.setName(`${props.mapCharacter.character.name}_chatText`)
|
||||
text.setName(`${props.zoneCharacter.character.name}_chatText`)
|
||||
text.setFontSize(13)
|
||||
text.setFontFamily('Arial')
|
||||
text.setOrigin(0.5, 10.9)
|
||||
text.setResolution(2)
|
||||
|
||||
// Fix text alignment on Windows and Android
|
||||
if (game.device.os.windows || game.device.os.android) {
|
||||
@ -39,7 +40,7 @@ const createChatText = (text: Phaser.GameObjects.Text) => {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
characterChatContainer.value!.setName(`${props.mapCharacter.character!.name}_chatContainer`)
|
||||
characterChatContainer.value!.setVisible(false)
|
||||
charChatContainer.value!.setName(`${props.zoneCharacter.character!.name}_chatContainer`)
|
||||
charChatContainer.value!.setVisible(false)
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,17 +1,19 @@
|
||||
<template>
|
||||
<Container :depth="999">
|
||||
<Text @create="createNicknameText" :text="props.mapCharacter.character.name" />
|
||||
<Container :depth="999" :x="currentX" :y="currentY">
|
||||
<Text @create="createNicknameText" :text="props.zoneCharacter.character.name" />
|
||||
<RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" />
|
||||
<RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { MapCharacter } from '@/application/types'
|
||||
import type { ZoneCharacter } from '@/application/types'
|
||||
import { Container, RoundRectangle, Text, useGame } from 'phavuer'
|
||||
|
||||
const props = defineProps<{
|
||||
mapCharacter: MapCharacter
|
||||
zoneCharacter: ZoneCharacter
|
||||
currentX: number
|
||||
currentY: number
|
||||
}>()
|
||||
|
||||
const game = useGame()
|
||||
@ -20,7 +22,6 @@ const createNicknameText = (text: Phaser.GameObjects.Text) => {
|
||||
text.setFontSize(13)
|
||||
text.setFontFamily('Arial')
|
||||
text.setOrigin(0.5, 9)
|
||||
text.setResolution(2)
|
||||
|
||||
// Fix text alignment on Windows and Android
|
||||
if (game.device.os.windows || game.device.os.android) {
|
||||
@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<div class="absolute top-0 right-4 hidden lg:block" v-if="gameStore.world.date && typeof gameStore.world.date === 'object'">
|
||||
<p class="text-white text-lg">
|
||||
{{ useDateFormat(gameStore.world.date, 'YYYY/MM/DD HH:mm') }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { SocketEvent } from '@/application/enums'
|
||||
import { socketManager } from '@/managers/SocketManager'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useDateFormat } from '@vueuse/core'
|
||||
import { onUnmounted } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
|
||||
onUnmounted(() => {
|
||||
socketManager.off(SocketEvent.DATE)
|
||||
})
|
||||
</script>
|
||||
@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<Character v-for="item in mapStore.characters" :key="item.character.id" :tileMap :mapCharacter="item" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { SocketEvent } from '@/application/enums'
|
||||
import type { MapCharacter, UUID } from '@/application/types'
|
||||
import Character from '@/components/game/character/Character.vue'
|
||||
import { socketManager } from '@/managers/SocketManager'
|
||||
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
|
||||
}>()
|
||||
|
||||
socketManager.on(SocketEvent.MAP_CHARACTER_JOIN, (data: MapCharacter) => {
|
||||
mapStore.addCharacter(data)
|
||||
})
|
||||
|
||||
socketManager.on(SocketEvent.MAP_CHARACTER_LEAVE, (characterId: UUID) => {
|
||||
mapStore.removeCharacter(characterId)
|
||||
})
|
||||
|
||||
socketManager.on(SocketEvent.MAP_CHARACTER_MOVE, ([characterId, posX, posY, rot, isMoving]: [UUID, number, number, number, boolean]) => {
|
||||
mapStore.updateCharacterPosition([characterId, posX, posY, rot, isMoving])
|
||||
|
||||
if (characterId === gameStore.character?.id) {
|
||||
gameStore.character!.positionX = posX
|
||||
gameStore.character!.positionY = posY
|
||||
gameStore.character!.rotation = rot
|
||||
}
|
||||
})
|
||||
|
||||
socketManager.on(SocketEvent.MAP_CHARACTER_ATTACK, (characterId: UUID) => {
|
||||
mapStore.updateCharacterProperty(characterId, 'isAttacking', true)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
socketManager.off(SocketEvent.MAP_CHARACTER_ATTACK)
|
||||
socketManager.off(SocketEvent.MAP_CHARACTER_MOVE)
|
||||
socketManager.off(SocketEvent.MAP_CHARACTER_JOIN)
|
||||
socketManager.off(SocketEvent.MAP_CHARACTER_LEAVE)
|
||||
})
|
||||
</script>
|
||||
@ -1,71 +0,0 @@
|
||||
<template>
|
||||
<MapTiles v-if="tileMap && tileMapLayer" :tileMap :tileMapLayer />
|
||||
<PlacedMapObjects v-if="tileMap && tileMapLayer" :tileMap :tileMapLayer />
|
||||
<Characters v-if="tileMap && mapStore.characters" :tileMap />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { SocketEvent } from '@/application/enums'
|
||||
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 { socketManager } from '@/managers/SocketManager'
|
||||
import { createTileLayer, createTileMap, loadTileTexturesFromMapTileArray } from '@/services/mapService'
|
||||
import { MapStorage } from '@/storage/storages'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useMapStore } from '@/stores/mapStore'
|
||||
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
|
||||
socketManager.on(SocketEvent.MAP_CHARACTER_TELEPORT, (data: mapLoadData) => {
|
||||
mapStore.setMapId(data.mapId)
|
||||
mapStore.setCharacters(data.characters)
|
||||
})
|
||||
|
||||
async function initialize() {
|
||||
if (!mapStore.mapId) return
|
||||
|
||||
const map = await mapStorage.getById(mapStore.mapId)
|
||||
if (!map) return
|
||||
|
||||
await loadTileTexturesFromMapTileArray(mapStore.mapId, scene)
|
||||
|
||||
tileMap.value = createTileMap(scene, map)
|
||||
tileMapLayer.value = createTileLayer(tileMap.value, unduplicateArray(map.tiles))
|
||||
}
|
||||
|
||||
watch(
|
||||
() => mapStore.mapId,
|
||||
async () => {
|
||||
await initialize()
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(async () => {
|
||||
if (!mapStore.mapId) return
|
||||
await initialize()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (tileMap.value) {
|
||||
tileMap.value.destroyLayer('tiles')
|
||||
tileMap.value.removeAllLayers()
|
||||
tileMap.value.destroy()
|
||||
}
|
||||
|
||||
socketManager.off(SocketEvent.MAP_CHARACTER_TELEPORT)
|
||||
})
|
||||
</script>
|
||||
@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<Controls v-if="tileMapLayer" :layer="tileMapLayer" :depth="0" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Controls from '@/components/utilities/Controls.vue'
|
||||
import { loadTileTexturesFromMapTileArray, placeTiles } from '@/services/mapService'
|
||||
import { MapStorage } from '@/storage/storages'
|
||||
import { useMapStore } from '@/stores/mapStore'
|
||||
import { useScene } from 'phavuer'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const scene = useScene()
|
||||
const mapStore = useMapStore()
|
||||
const mapStorage = new MapStorage()
|
||||
|
||||
const props = defineProps<{
|
||||
tileMap: Phaser.Tilemaps.Tilemap
|
||||
tileMapLayer: Phaser.Tilemaps.TilemapLayer
|
||||
}>()
|
||||
|
||||
onMounted(async () => {
|
||||
if (!mapStore.mapId) return
|
||||
|
||||
const map = await mapStorage.getById(mapStore.mapId)
|
||||
if (!map) return
|
||||
|
||||
await loadTileTexturesFromMapTileArray(mapStore.mapId, scene)
|
||||
|
||||
placeTiles(props.tileMap, props.tileMapLayer, map.tiles)
|
||||
})
|
||||
</script>
|
||||
@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<PlacedMapObject v-for="placedMapObject in items" :tileMap :tileMapLayer :placedMapObject />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { PlacedMapObject as PlacedMapObjectT } from '@/application/types'
|
||||
import PlacedMapObject from '@/components/game/map/partials/PlacedMapObject.vue'
|
||||
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
|
||||
tileMapLayer: TilemapLayer
|
||||
}>()
|
||||
|
||||
const mapStore = useMapStore()
|
||||
const mapStorage = new MapStorage()
|
||||
const items = ref<PlacedMapObjectT[]>([])
|
||||
|
||||
onMounted(async () => {
|
||||
if (!mapStore.mapId) return
|
||||
|
||||
const map = await mapStorage.getById(mapStore.mapId)
|
||||
if (!map) return
|
||||
|
||||
items.value = map.placedMapObjects
|
||||
})
|
||||
</script>
|
||||
@ -1,82 +0,0 @@
|
||||
<template>
|
||||
<Image v-if="mapObject && gameStore.isTextureLoaded(props.placedMapObject.mapObject as string)" v-bind="imageProps" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/application/config'
|
||||
import type { MapObject, PlacedMapObject } from '@/application/types'
|
||||
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, ref, watch } from 'vue'
|
||||
|
||||
import Tilemap = Phaser.Tilemaps.Tilemap
|
||||
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
|
||||
|
||||
const props = defineProps<{
|
||||
placedMapObject: PlacedMapObject
|
||||
tileMap: Tilemap
|
||||
tileMapLayer: TilemapLayer
|
||||
}>()
|
||||
|
||||
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(() => ({
|
||||
alpha: mapEditor.movingPlacedObject.value?.id == props.placedMapObject.id || mapEditor.selectedMapObject.value?.id == props.placedMapObject.id ? 0.5 : 1,
|
||||
tint: mapEditor.selectedPlacedObject.value?.id == props.placedMapObject.id ? 0x00ff00 : 0xffffff,
|
||||
depth: calculateIsometricDepth(props.placedMapObject.positionX, props.placedMapObject.positionY),
|
||||
...calculateObjectPlacement(props.placedMapObject),
|
||||
flipX: props.placedMapObject.isRotated,
|
||||
texture: mapObject.value!.id,
|
||||
originX: mapObject.value!.originX,
|
||||
originY: mapObject.value!.originY
|
||||
}))
|
||||
|
||||
watch(
|
||||
() => mapEditor.refreshMapObject.value,
|
||||
async () => {
|
||||
await initialize()
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(async () => {
|
||||
await initialize()
|
||||
})
|
||||
</script>
|
||||
14
src/components/game/zone/Characters.vue
Normal file
14
src/components/game/zone/Characters.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<Character v-for="item in zoneStore.characters" :key="item.character.id" :tilemap="tilemap" :zoneCharacter="item" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Character from '@/components/game/character/Character.vue'
|
||||
import { useZoneStore } from '@/stores/zoneStore'
|
||||
|
||||
const zoneStore = useZoneStore()
|
||||
|
||||
const props = defineProps<{
|
||||
tilemap: Phaser.Tilemaps.Tilemap
|
||||
}>()
|
||||
</script>
|
||||
50
src/components/game/zone/Zone.vue
Normal file
50
src/components/game/zone/Zone.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<ZoneTiles :key="zoneStore.zone?.id ?? 0" @tileMap:create="tileMap = $event" />
|
||||
<ZoneObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
|
||||
<Characters v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ZoneCharacter, zoneLoadData } from '@/application/types'
|
||||
import Characters from '@/components/game/zone/Characters.vue'
|
||||
import ZoneObjects from '@/components/game/zone/ZoneObjects.vue'
|
||||
import ZoneTiles from '@/components/game/zone/ZoneTiles.vue'
|
||||
import { loadZoneTilesIntoScene } from '@/composables/zoneComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneStore } from '@/stores/zoneStore'
|
||||
import { useScene } from 'phavuer'
|
||||
import { onUnmounted, ref } from 'vue'
|
||||
|
||||
const scene = useScene()
|
||||
const gameStore = useGameStore()
|
||||
const zoneStore = useZoneStore()
|
||||
|
||||
const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
|
||||
|
||||
onUnmounted(() => {
|
||||
zoneStore.reset()
|
||||
gameStore.connection!.off('zone:character:teleport')
|
||||
gameStore.connection!.off('zone:character:join')
|
||||
gameStore.connection!.off('zone:character:leave')
|
||||
gameStore.connection!.off('zone:character:move')
|
||||
})
|
||||
|
||||
// Event listeners
|
||||
gameStore.connection!.on('zone:character:teleport', async (data: zoneLoadData) => {
|
||||
await loadZoneTilesIntoScene(data.zone.id, scene)
|
||||
zoneStore.setZone(data.zone)
|
||||
zoneStore.setCharacters(data.characters)
|
||||
})
|
||||
|
||||
gameStore.connection!.on('zone:character:join', async (data: ZoneCharacter) => {
|
||||
zoneStore.addCharacter(data)
|
||||
})
|
||||
|
||||
gameStore.connection!.on('zone:character:leave', (characterId: number) => {
|
||||
zoneStore.removeCharacter(characterId)
|
||||
})
|
||||
|
||||
gameStore.connection!.on('zone:character:move', (data: { characterId: number; positionX: number; positionY: number; rotation: number; isMoving: boolean }) => {
|
||||
zoneStore.updateCharacterPosition(data)
|
||||
})
|
||||
</script>
|
||||
14
src/components/game/zone/ZoneObjects.vue
Normal file
14
src/components/game/zone/ZoneObjects.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<ZoneObject v-for="zoneObject in zoneStore.zone?.zoneObjects" :tilemap="tilemap" :zoneObject />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ZoneObject from '@/components/game/zone/partials/ZoneObject.vue'
|
||||
import { useZoneStore } from '@/stores/zoneStore'
|
||||
|
||||
const zoneStore = useZoneStore()
|
||||
|
||||
defineProps<{
|
||||
tilemap: Phaser.Tilemaps.Tilemap
|
||||
}>()
|
||||
</script>
|
||||
69
src/components/game/zone/ZoneTiles.vue
Normal file
69
src/components/game/zone/ZoneTiles.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<Controls :layer="tileLayer" :depth="0" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/application/config'
|
||||
import { unduplicateArray } from '@/application/utilities'
|
||||
import Controls from '@/components/utilities/Controls.vue'
|
||||
import { FlattenZoneArray, setLayerTiles } from '@/composables/zoneComposable'
|
||||
import { useZoneStore } from '@/stores/zoneStore'
|
||||
import { useScene } from 'phavuer'
|
||||
import { onBeforeUnmount } from 'vue'
|
||||
|
||||
const emit = defineEmits(['tileMap:create'])
|
||||
|
||||
const scene = useScene()
|
||||
const zoneStore = useZoneStore()
|
||||
const tileMap = createTileMap()
|
||||
const tileLayer = createTileLayer()
|
||||
|
||||
/**
|
||||
* A Tilemap is a container for Tilemap data.
|
||||
* This isn't a display object, rather, it holds data about the map and allows you to add tilesets and tilemap layers to it.
|
||||
* A map can have one or more tilemap layers, which are the display objects that actually render the tiles.
|
||||
*/
|
||||
function createTileMap() {
|
||||
const zoneData = new Phaser.Tilemaps.MapData({
|
||||
width: zoneStore.zone?.width,
|
||||
height: zoneStore.zone?.height,
|
||||
tileWidth: config.tile_size.x,
|
||||
tileHeight: config.tile_size.y,
|
||||
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
|
||||
format: Phaser.Tilemaps.Formats.ARRAY_2D
|
||||
})
|
||||
|
||||
const newTileMap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
|
||||
emit('tileMap:create', newTileMap)
|
||||
|
||||
return newTileMap
|
||||
}
|
||||
|
||||
/**
|
||||
* A Tileset is a combination of a single image containing the tiles and a container for data about each tile.
|
||||
*/
|
||||
function createTileLayer() {
|
||||
const tilesArray = unduplicateArray(FlattenZoneArray(zoneStore.zone?.tiles ?? []))
|
||||
|
||||
const tilesetImages = Array.from(tilesArray).map((tile: any, index: number) => {
|
||||
return tileMap.addTilesetImage(tile, tile, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
|
||||
}) as any
|
||||
|
||||
// Add blank tile
|
||||
tilesetImages.push(tileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))
|
||||
const layer = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
|
||||
|
||||
layer.setDepth(0)
|
||||
layer.setCullPadding(2, 2)
|
||||
|
||||
return layer
|
||||
}
|
||||
|
||||
setLayerTiles(tileMap, tileLayer, zoneStore.zone?.tiles)
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
tileMap.destroyLayer('tiles')
|
||||
tileMap.removeAllLayers()
|
||||
tileMap.destroy()
|
||||
})
|
||||
</script>
|
||||
41
src/components/game/zone/partials/ZoneObject.vue
Normal file
41
src/components/game/zone/partials/ZoneObject.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<Image v-if="gameStore.getLoadedAsset(props.zoneObject.object.id)" v-bind="imageProps" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { AssetDataT, ZoneObject } from '@/application/types'
|
||||
import { loadTexture } from '@/composables/gameComposable'
|
||||
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { Image, useScene } from 'phavuer'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
tilemap: Phaser.Tilemaps.Tilemap
|
||||
zoneObject: ZoneObject
|
||||
}>()
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const scene = useScene()
|
||||
|
||||
const imageProps = computed(() => ({
|
||||
depth: calculateIsometricDepth(props.zoneObject.positionX, props.zoneObject.positionY, props.zoneObject.object.frameWidth, props.zoneObject.object.frameHeight),
|
||||
x: tileToWorldX(props.tilemap, props.zoneObject.positionX, props.zoneObject.positionY),
|
||||
y: tileToWorldY(props.tilemap, props.zoneObject.positionX, props.zoneObject.positionY),
|
||||
flipX: props.zoneObject.isRotated,
|
||||
texture: props.zoneObject.object.id,
|
||||
originY: Number(props.zoneObject.object.originX),
|
||||
originX: Number(props.zoneObject.object.originY)
|
||||
}))
|
||||
|
||||
loadTexture(scene, {
|
||||
key: props.zoneObject.object.id,
|
||||
data: '/assets/objects/' + props.zoneObject.object.id + '.png',
|
||||
group: 'objects',
|
||||
updatedAt: props.zoneObject.object.updatedAt,
|
||||
frameWidth: props.zoneObject.object.frameWidth,
|
||||
frameHeight: props.zoneObject.object.frameHeight
|
||||
} as AssetDataT).catch((error) => {
|
||||
console.error('Error loading texture:', error)
|
||||
})
|
||||
</script>
|
||||
@ -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="mapEditor.toggleActive()">Map editor</button>
|
||||
<button class="btn-cyan py-1.5 px-4 min-w-24" type="button" @click="() => zoneEditorStore.toggleActive()">Map editor</button>
|
||||
</div>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
@ -20,12 +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 { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const mapEditor = useMapEditorComposable()
|
||||
const gameStore = useGameStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
let toggle = ref('asset-manager')
|
||||
</script>
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
<a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
|
||||
<span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'tiles' }">Tiles</span>
|
||||
</a>
|
||||
<a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'map_objects' }" @click="() => (selectedCategory = 'map_objects')">
|
||||
<span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'map_objects' }">Map objects</span>
|
||||
<a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
|
||||
<span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'objects' }">Objects</span>
|
||||
</a>
|
||||
<a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'sprites' }" @click="() => (selectedCategory = 'sprites')">
|
||||
<span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'sprites' }">Sprites</span>
|
||||
@ -40,7 +40,7 @@
|
||||
<!-- Assets list -->
|
||||
<div class="overflow-auto h-full w-4/12 flex flex-col relative">
|
||||
<TileList v-if="selectedCategory === 'tiles'" />
|
||||
<MapObjectList v-if="selectedCategory === 'map_objects'" />
|
||||
<ObjectList v-if="selectedCategory === 'objects'" />
|
||||
<SpriteList v-if="selectedCategory === 'sprites'" />
|
||||
<ItemList v-if="selectedCategory === 'items'" />
|
||||
<CharacterTypeList v-if="selectedCategory === 'characterTypes'" />
|
||||
@ -50,7 +50,7 @@
|
||||
<!-- Asset details -->
|
||||
<div class="flex w-7/12 after:hidden flex-col relative overflow-auto">
|
||||
<TileDetails v-if="selectedCategory === 'tiles' && assetManagerStore.selectedTile" />
|
||||
<MapObjectDetails v-if="selectedCategory === 'map_objects' && assetManagerStore.selectedMapObject" />
|
||||
<ObjectDetails v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" />
|
||||
<SpriteDetails v-if="selectedCategory === 'sprites' && assetManagerStore.selectedSprite" />
|
||||
<ItemDetails v-if="selectedCategory === 'items' && assetManagerStore.selectedItem" />
|
||||
<CharacterTypeDetails v-if="selectedCategory === 'characterTypes' && assetManagerStore.selectedCharacterType" />
|
||||
@ -66,8 +66,8 @@ import CharacterTypeDetails from '@/components/gameMaster/assetManager/partials/
|
||||
import CharacterTypeList from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue'
|
||||
import ItemDetails from '@/components/gameMaster/assetManager/partials/item/itemDetails.vue'
|
||||
import ItemList from '@/components/gameMaster/assetManager/partials/item/itemList.vue'
|
||||
import MapObjectDetails from '@/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue'
|
||||
import MapObjectList from '@/components/gameMaster/assetManager/partials/mapObject/MapObjectList.vue'
|
||||
import ObjectDetails from '@/components/gameMaster/assetManager/partials/object/ObjectDetails.vue'
|
||||
import ObjectList from '@/components/gameMaster/assetManager/partials/object/ObjectList.vue'
|
||||
import SpriteDetails from '@/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue'
|
||||
import SpriteList from '@/components/gameMaster/assetManager/partials/sprite/SpriteList.vue'
|
||||
import TileDetails from '@/components/gameMaster/assetManager/partials/tile/TileDetails.vue'
|
||||
|
||||
@ -34,9 +34,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { SocketEvent } from '@/application/enums'
|
||||
import type { CharacterGender, CharacterHair, Sprite } from '@/application/types'
|
||||
import { socketManager } from '@/managers/SocketManager'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
@ -61,13 +59,13 @@ if (selectedCharacterHair.value) {
|
||||
characterName.value = selectedCharacterHair.value.name
|
||||
characterGender.value = selectedCharacterHair.value.gender
|
||||
characterIsSelectable.value = selectedCharacterHair.value.isSelectable
|
||||
characterSpriteId.value = selectedCharacterHair.value.sprite?.id
|
||||
characterSpriteId.value = selectedCharacterHair.value.spriteId
|
||||
}
|
||||
|
||||
function removeCharacterHair() {
|
||||
if (!selectedCharacterHair.value) return
|
||||
|
||||
socketManager.emit(SocketEvent.GM_CHARACTERHAIR_REMOVE, { id: selectedCharacterHair.value.id }, (response: boolean) => {
|
||||
gameStore.connection?.emit('gm:characterHair:remove', { id: selectedCharacterHair.value.id }, (response: boolean) => {
|
||||
if (!response) {
|
||||
console.error('Failed to remove character hair')
|
||||
return
|
||||
@ -77,7 +75,7 @@ function removeCharacterHair() {
|
||||
}
|
||||
|
||||
function refreshCharacterHairList(unsetSelectedCharacterHair = true) {
|
||||
socketManager.emit(SocketEvent.GM_CHARACTERHAIR_LIST, {}, (response: CharacterHair[]) => {
|
||||
gameStore.connection?.emit('gm:characterHair:list', {}, (response: CharacterHair[]) => {
|
||||
assetManagerStore.setCharacterHairList(response)
|
||||
|
||||
if (unsetSelectedCharacterHair) {
|
||||
@ -95,7 +93,7 @@ function saveCharacterHair() {
|
||||
spriteId: characterSpriteId.value
|
||||
}
|
||||
|
||||
socketManager.emit(SocketEvent.GM_CHARACTERHAIR_UPDATE, characterHairData, (response: boolean) => {
|
||||
gameStore.connection?.emit('gm:characterHair:update', characterHairData, (response: boolean) => {
|
||||
if (!response) {
|
||||
console.error('Failed to save character type')
|
||||
return
|
||||
@ -109,13 +107,13 @@ watch(selectedCharacterHair, (characterHair: CharacterHair | null) => {
|
||||
characterName.value = characterHair.name
|
||||
characterGender.value = characterHair.gender
|
||||
characterIsSelectable.value = characterHair.isSelectable
|
||||
characterSpriteId.value = characterHair.sprite?.id
|
||||
characterSpriteId.value = characterHair.spriteId
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (!selectedCharacterHair.value) return
|
||||
|
||||
socketManager.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
|
||||
gameStore.connection?.emit('gm:sprite:list', {}, (response: Sprite[]) => {
|
||||
assetManagerStore.setSpriteList(response)
|
||||
})
|
||||
})
|
||||
|
||||
@ -9,8 +9,8 @@
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
<div v-bind="containerProps" class="flex-1 overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
|
||||
<div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
|
||||
<div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
|
||||
<div v-bind="wrapperProps" ref="elementToScroll">
|
||||
<a
|
||||
v-for="{ data: characterHair } in list"
|
||||
:key="characterHair.id"
|
||||
@ -25,16 +25,14 @@
|
||||
</div>
|
||||
<div class="absolute w-12 h-12 bottom-2.5 right-2.5">
|
||||
<button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { SocketEvent } from '@/application/enums'
|
||||
import type { CharacterHair } from '@/application/types'
|
||||
import { socketManager } from '@/managers/SocketManager'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useVirtualList } from '@vueuse/core'
|
||||
@ -54,13 +52,13 @@ const handleSearch = () => {
|
||||
}
|
||||
|
||||
const createNewCharacterHair = () => {
|
||||
socketManager.emit(SocketEvent.GM_CHARACTERHAIR_CREATE, {}, (response: boolean) => {
|
||||
gameStore.connection?.emit('gm:characterHair:create', {}, (response: boolean) => {
|
||||
if (!response) {
|
||||
console.error('Failed to create new character type')
|
||||
return
|
||||
}
|
||||
|
||||
socketManager.emit(SocketEvent.GM_CHARACTERHAIR_LIST, {}, (response: CharacterHair[]) => {
|
||||
gameStore.connection?.emit('gm:characterHair:list', {}, (response: CharacterHair[]) => {
|
||||
assetManagerStore.setCharacterHairList(response)
|
||||
})
|
||||
})
|
||||
@ -94,7 +92,7 @@ function toTop() {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
socketManager.emit(SocketEvent.GM_CHARACTERHAIR_LIST, {}, (response: CharacterHair[]) => {
|
||||
gameStore.connection?.emit('gm:characterHair:list', {}, (response: CharacterHair[]) => {
|
||||
assetManagerStore.setCharacterHairList(response)
|
||||
})
|
||||
})
|
||||
|
||||
@ -40,9 +40,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { SocketEvent } from '@/application/enums'
|
||||
import type { CharacterGender, CharacterRace, CharacterType, Sprite } from '@/application/types'
|
||||
import { socketManager } from '@/managers/SocketManager'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
@ -70,13 +68,13 @@ if (selectedCharacterType.value) {
|
||||
characterGender.value = selectedCharacterType.value.gender
|
||||
characterRace.value = selectedCharacterType.value.race
|
||||
characterIsSelectable.value = selectedCharacterType.value.isSelectable
|
||||
characterSpriteId.value = selectedCharacterType.value.sprite?.id
|
||||
characterSpriteId.value = selectedCharacterType.value.spriteId
|
||||
}
|
||||
|
||||
function removeCharacterType() {
|
||||
if (!selectedCharacterType.value) return
|
||||
|
||||
socketManager.emit(SocketEvent.GM_CHARACTERTYPE_REMOVE, { id: selectedCharacterType.value.id }, (response: boolean) => {
|
||||
gameStore.connection?.emit('gm:characterType:remove', { id: selectedCharacterType.value.id }, (response: boolean) => {
|
||||
if (!response) {
|
||||
console.error('Failed to remove character type')
|
||||
return
|
||||
@ -86,7 +84,7 @@ function removeCharacterType() {
|
||||
}
|
||||
|
||||
function refreshCharacterTypeList(unsetSelectedCharacterType = true) {
|
||||
socketManager.emit(SocketEvent.GM_CHARACTERTYPE_LIST, {}, (response: CharacterType[]) => {
|
||||
gameStore.connection?.emit('gm:characterType:list', {}, (response: CharacterType[]) => {
|
||||
assetManagerStore.setCharacterTypeList(response)
|
||||
|
||||
if (unsetSelectedCharacterType) {
|
||||
@ -105,7 +103,7 @@ function saveCharacterType() {
|
||||
spriteId: characterSpriteId.value
|
||||
}
|
||||
|
||||
socketManager.emit(SocketEvent.GM_CHARACTERTYPE_UPDATE, characterTypeData, (response: boolean) => {
|
||||
gameStore.connection?.emit('gm:characterType:update', characterTypeData, (response: boolean) => {
|
||||
if (!response) {
|
||||
console.error('Failed to save character type')
|
||||
return
|
||||
@ -120,13 +118,13 @@ watch(selectedCharacterType, (characterType: CharacterType | null) => {
|
||||
characterGender.value = characterType.gender
|
||||
characterRace.value = characterType.race
|
||||
characterIsSelectable.value = characterType.isSelectable
|
||||
characterSpriteId.value = characterType.sprite?.id
|
||||
characterSpriteId.value = characterType.spriteId
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (!selectedCharacterType.value) return
|
||||
|
||||
socketManager.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
|
||||
gameStore.connection?.emit('gm:sprite:list', {}, (response: Sprite[]) => {
|
||||
assetManagerStore.setSpriteList(response)
|
||||
})
|
||||
})
|
||||
|
||||
@ -9,8 +9,8 @@
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
<div v-bind="containerProps" class="flex-1 overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
|
||||
<div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
|
||||
<div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
|
||||
<div v-bind="wrapperProps" ref="elementToScroll">
|
||||
<a
|
||||
v-for="{ data: characterType } in list"
|
||||
:key="characterType.id"
|
||||
@ -25,16 +25,14 @@
|
||||
</div>
|
||||
<div class="absolute w-12 h-12 bottom-2.5 right-2.5">
|
||||
<button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { SocketEvent } from '@/application/enums'
|
||||
import type { CharacterType } from '@/application/types'
|
||||
import { socketManager } from '@/managers/SocketManager'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useVirtualList } from '@vueuse/core'
|
||||
@ -54,13 +52,13 @@ const handleSearch = () => {
|
||||
}
|
||||
|
||||
const createNewCharacterType = () => {
|
||||
socketManager.emit(SocketEvent.GM_CHARACTERTYPE_CREATE, {}, (response: boolean) => {
|
||||
gameStore.connection?.emit('gm:characterType:create', {}, (response: boolean) => {
|
||||
if (!response) {
|
||||
console.error('Failed to create new character type')
|
||||
return
|
||||
}
|
||||
|
||||
socketManager.emit(SocketEvent.GM_CHARACTERTYPE_LIST, {}, (response: CharacterType[]) => {
|
||||
gameStore.connection?.emit('gm:characterType:list', {}, (response: CharacterType[]) => {
|
||||
assetManagerStore.setCharacterTypeList(response)
|
||||
})
|
||||
})
|
||||
@ -94,7 +92,7 @@ function toTop() {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
socketManager.emit(SocketEvent.GM_CHARACTERTYPE_LIST, {}, (response: CharacterType[]) => {
|
||||
gameStore.connection?.emit('gm:characterType:list', {}, (response: CharacterType[]) => {
|
||||
assetManagerStore.setCharacterTypeList(response)
|
||||
})
|
||||
})
|
||||
|
||||
@ -44,9 +44,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { SocketEvent } from '@/application/enums'
|
||||
import type { Item, ItemRarity, ItemType, Sprite } from '@/application/types'
|
||||
import { socketManager } from '@/managers/SocketManager'
|
||||
import type { Item, ItemRarity, ItemType } from '@/application/types'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
@ -82,7 +80,7 @@ if (selectedItem.value) {
|
||||
function removeItem() {
|
||||
if (!selectedItem.value) return
|
||||
|
||||
socketManager.emit(SocketEvent.GM_ITEM_REMOVE, { id: selectedItem.value.id }, (response: boolean) => {
|
||||
gameStore.connection?.emit('gm:item:remove', { id: selectedItem.value.id }, (response: boolean) => {
|
||||
if (!response) {
|
||||
console.error('Failed to remove item')
|
||||
return
|
||||
@ -92,7 +90,7 @@ function removeItem() {
|
||||
}
|
||||
|
||||
function refreshItemList(unsetSelectedItem = true) {
|
||||
socketManager.emit(SocketEvent.GM_ITEM_LIST, {}, (response: Item[]) => {
|
||||
gameStore.connection?.emit('gm:item:list', {}, (response: Item[]) => {
|
||||
assetManagerStore.setItemList(response)
|
||||
|
||||
if (unsetSelectedItem) {
|
||||
@ -112,7 +110,7 @@ function saveItem() {
|
||||
spriteId: itemSpriteId.value
|
||||
}
|
||||
|
||||
socketManager.emit(SocketEvent.GM_ITEM_UPDATE, itemData, (response: boolean) => {
|
||||
gameStore.connection?.emit('gm:item:update', itemData, (response: boolean) => {
|
||||
if (!response) {
|
||||
console.error('Failed to save item')
|
||||
return
|
||||
@ -134,7 +132,7 @@ watch(selectedItem, (item: Item | null) => {
|
||||
onMounted(() => {
|
||||
if (!selectedItem.value) return
|
||||
|
||||
socketManager.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
|
||||
gameStore.connection?.emit('gm:sprite:list', {}, (response: Sprite[]) => {
|
||||
assetManagerStore.setSpriteList(response)
|
||||
})
|
||||
})
|
||||
|
||||
@ -9,8 +9,8 @@
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
<div v-bind="containerProps" class="flex-1 overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
|
||||
<div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
|
||||
<div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
|
||||
<div v-bind="wrapperProps" ref="elementToScroll">
|
||||
<a v-for="{ data: item } in list" :key="item.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedItem?.id === item.id }" @click="assetManagerStore.setSelectedItem(item as Item)">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<span class="group-hover:text-white" :class="{ 'text-white': assetManagerStore.selectedItem?.id === item.id }">
|
||||
@ -22,16 +22,14 @@
|
||||
</div>
|
||||
<div class="absolute w-12 h-12 bottom-2.5 right-2.5">
|
||||
<button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { SocketEvent } from '@/application/enums'
|
||||
import type { Item } from '@/application/types'
|
||||
import { socketManager } from '@/managers/SocketManager'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useVirtualList } from '@vueuse/core'
|
||||
@ -50,13 +48,13 @@ const handleSearch = () => {
|
||||
}
|
||||
|
||||
const createNewItem = () => {
|
||||
socketManager.emit(SocketEvent.GM_ITEM_CREATE, {}, (response: boolean) => {
|
||||
gameStore.connection?.emit('gm:item:create', {}, (response: boolean) => {
|
||||
if (!response) {
|
||||
console.error('Failed to create new item')
|
||||
return
|
||||
}
|
||||
|
||||
socketManager.emit(SocketEvent.GM_ITEM_LIST, {}, (response: Item[]) => {
|
||||
gameStore.connection?.emit('gm:item:list', {}, (response: Item[]) => {
|
||||
assetManagerStore.setItemList(response)
|
||||
})
|
||||
})
|
||||
@ -90,7 +88,7 @@ function toTop() {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
socketManager.emit(SocketEvent.GM_ITEM_LIST, {}, (response: Item[]) => {
|
||||
gameStore.connection?.emit('gm:item:list', {}, (response: Item[]) => {
|
||||
assetManagerStore.setItemList(response)
|
||||
})
|
||||
})
|
||||
|
||||
@ -1,212 +0,0 @@
|
||||
<template>
|
||||
<div class="h-full overflow-auto">
|
||||
<div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md default-border bg-gray">
|
||||
<div class="relative">
|
||||
<img class="max-h-56" :src="`${config.server_endpoint}/textures/map_objects/${selectedMapObject?.id}.png`" :alt="'Object ' + selectedMapObject?.id" @click="addPivotPoint" ref="imageRef" />
|
||||
<svg class="absolute bottom-1 left-0 w-full h-full pointer-events-none">
|
||||
<line v-for="(_, index) in mapObjectPivotPoints.slice(0, -1)" :key="index" :x1="mapObjectPivotPoints[index].x" :y1="mapObjectPivotPoints[index].y" :x2="mapObjectPivotPoints[index + 1].x" :y2="mapObjectPivotPoints[index + 1].y" stroke="white" stroke-width="2" />
|
||||
</svg>
|
||||
<div
|
||||
v-for="(point, index) in mapObjectPivotPoints"
|
||||
:key="index"
|
||||
class="absolute w-2 h-2 bg-white rounded-full cursor-move -translate-x-1.5 -translate-y-1.5 ring-2 ring-black"
|
||||
:style="{ left: point.x + 'px', top: point.y + 'px' }"
|
||||
@mousedown="startDragging(index, $event)"
|
||||
@contextmenu.prevent="removePivotPoint(index)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 block">
|
||||
<form class="flex gap-2.5 flex-wrap" @submit.prevent="saveObject">
|
||||
<div class="form-field-full">
|
||||
<label for="name">Name</label>
|
||||
<input v-model="mapObjectName" class="input-field" type="text" name="name" placeholder="Wall #1" />
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="origin-x">Origin X</label>
|
||||
<input v-model="mapObjectOriginX" class="input-field" type="number" step="any" name="origin-x" placeholder="Origin X" />
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="origin-y">Origin Y</label>
|
||||
<input v-model="mapObjectOriginY" class="input-field" type="number" step="any" name="origin-y" placeholder="Origin Y" />
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<label for="tags">Tags</label>
|
||||
<ChipsInput v-model="mapObjectTags" @update:modelValue="mapObjectTags = $event" />
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<label for="frame-speed">Frame rate</label>
|
||||
<input v-model="mapObjectFrameRate" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame rate" />
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="frame-width">Frame width</label>
|
||||
<input v-model="mapObjectFrameWidth" class="input-field" type="number" step="any" name="frame-width" placeholder="Frame width" />
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="frame-height">Frame height</label>
|
||||
<input v-model="mapObjectFrameHeight" class="input-field" type="number" step="any" name="frame-height" placeholder="Frame height" />
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
|
||||
<button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeObject">Delete</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/application/config'
|
||||
import { SocketEvent } from '@/application/enums'
|
||||
import type { MapObject } from '@/application/types'
|
||||
import ChipsInput from '@/components/forms/ChipsInput.vue'
|
||||
import { socketManager } from '@/managers/SocketManager'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const assetManagerStore = useAssetManagerStore()
|
||||
|
||||
const selectedMapObject = computed(() => assetManagerStore.selectedMapObject)
|
||||
|
||||
const mapObjectName = ref('')
|
||||
const mapObjectTags = ref<string[]>([])
|
||||
const mapObjectPivotPoints = ref<Array<{ x: number; y: number }>>([])
|
||||
const mapObjectOriginX = ref(0)
|
||||
const mapObjectOriginY = ref(0)
|
||||
const mapObjectFrameRate = ref(0)
|
||||
const mapObjectFrameWidth = ref(0)
|
||||
const mapObjectFrameHeight = ref(0)
|
||||
const imageRef = ref<HTMLImageElement | null>(null)
|
||||
const isDragging = ref(false)
|
||||
const draggedPointIndex = ref(-1)
|
||||
|
||||
if (!selectedMapObject.value) {
|
||||
console.error('No map mapObject selected')
|
||||
}
|
||||
|
||||
if (selectedMapObject.value) {
|
||||
mapObjectName.value = selectedMapObject.value.name
|
||||
mapObjectTags.value = selectedMapObject.value.tags
|
||||
mapObjectPivotPoints.value = selectedMapObject.value.pivotPoints
|
||||
mapObjectOriginX.value = selectedMapObject.value.originX
|
||||
mapObjectOriginY.value = selectedMapObject.value.originY
|
||||
mapObjectFrameRate.value = selectedMapObject.value.frameRate
|
||||
mapObjectFrameWidth.value = selectedMapObject.value.frameWidth
|
||||
mapObjectFrameHeight.value = selectedMapObject.value.frameHeight
|
||||
}
|
||||
|
||||
function removeObject() {
|
||||
socketManager.emit(SocketEvent.GM_MAPOBJECT_REMOVE, { mapObject: selectedMapObject.value?.id }, (response: boolean) => {
|
||||
if (!response) {
|
||||
console.error('Failed to remove mapObject')
|
||||
return
|
||||
}
|
||||
refreshObjectList()
|
||||
})
|
||||
}
|
||||
|
||||
function refreshObjectList(unsetSelectedMapObject = true) {
|
||||
socketManager.emit(SocketEvent.GM_MAPOBJECT_LIST, {}, (response: MapObject[]) => {
|
||||
assetManagerStore.setMapObjectList(response)
|
||||
|
||||
if (unsetSelectedMapObject) {
|
||||
assetManagerStore.setSelectedMapObject(null)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function saveObject() {
|
||||
if (!selectedMapObject.value) {
|
||||
console.error('No mapObject selected')
|
||||
return
|
||||
}
|
||||
|
||||
socketManager.emit(
|
||||
SocketEvent.GM_MAPOBJECT_UPDATE,
|
||||
{
|
||||
id: selectedMapObject.value.id,
|
||||
name: mapObjectName.value,
|
||||
tags: mapObjectTags.value,
|
||||
pivotPoints: mapObjectPivotPoints.value,
|
||||
originX: mapObjectOriginX.value,
|
||||
originY: mapObjectOriginY.value,
|
||||
frameRate: mapObjectFrameRate.value,
|
||||
frameWidth: mapObjectFrameWidth.value,
|
||||
frameHeight: mapObjectFrameHeight.value
|
||||
},
|
||||
(response: boolean) => {
|
||||
if (!response) {
|
||||
console.error('Failed to save mapObject')
|
||||
return
|
||||
}
|
||||
refreshObjectList(false)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
watch(selectedMapObject, (mapObject: MapObject | null) => {
|
||||
if (!mapObject) return
|
||||
mapObjectName.value = mapObject.name
|
||||
mapObjectTags.value = mapObject.tags
|
||||
mapObjectPivotPoints.value = mapObject.pivotPoints
|
||||
mapObjectOriginX.value = mapObject.originX
|
||||
mapObjectOriginY.value = mapObject.originY
|
||||
mapObjectFrameRate.value = mapObject.frameRate
|
||||
mapObjectFrameWidth.value = mapObject.frameWidth
|
||||
mapObjectFrameHeight.value = mapObject.frameHeight
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (!selectedMapObject.value) return
|
||||
})
|
||||
|
||||
function addPivotPoint(event: MouseEvent) {
|
||||
if (!imageRef.value) return
|
||||
// Max 2
|
||||
if (mapObjectPivotPoints.value.length >= 2) return
|
||||
const rect = imageRef.value.getBoundingClientRect()
|
||||
const x = event.clientX - rect.left
|
||||
const y = event.clientY - rect.top
|
||||
mapObjectPivotPoints.value.push({ x, y })
|
||||
}
|
||||
|
||||
function startDragging(index: number, event: MouseEvent) {
|
||||
isDragging.value = true
|
||||
draggedPointIndex.value = index
|
||||
|
||||
const moveHandler = (e: MouseEvent) => {
|
||||
if (!isDragging.value || !imageRef.value) return
|
||||
const rect = imageRef.value.getBoundingClientRect()
|
||||
mapObjectPivotPoints.value[draggedPointIndex.value] = {
|
||||
x: e.clientX - rect.left,
|
||||
y: e.clientY - rect.top
|
||||
}
|
||||
}
|
||||
|
||||
const upHandler = () => {
|
||||
isDragging.value = false
|
||||
draggedPointIndex.value = -1
|
||||
window.removeEventListener('mousemove', moveHandler)
|
||||
window.removeEventListener('mouseup', upHandler)
|
||||
}
|
||||
|
||||
window.addEventListener('mousemove', moveHandler)
|
||||
window.addEventListener('mouseup', upHandler)
|
||||
}
|
||||
|
||||
function removePivotPoint(index: number) {
|
||||
mapObjectPivotPoints.value.splice(index, 1)
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
assetManagerStore.setSelectedMapObject(null)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pointer-events-none {
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<div class="h-full overflow-auto">
|
||||
<div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md default-border bg-gray">
|
||||
<img class="max-h-56" :src="`${config.server_endpoint}/assets/objects/${selectedObject?.id}.png`" :alt="'Object ' + selectedObject?.id" />
|
||||
</div>
|
||||
<div class="mt-5 block">
|
||||
<form class="flex gap-2.5 flex-wrap" @submit.prevent="saveObject">
|
||||
<div class="form-field-full">
|
||||
<label for="name">Name</label>
|
||||
<input v-model="objectName" class="input-field" type="text" name="name" placeholder="Wall #1" />
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="origin-x">Origin X</label>
|
||||
<input v-model="objectOriginX" class="input-field" type="number" step="any" name="origin-x" placeholder="Origin X" />
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="origin-y">Origin Y</label>
|
||||
<input v-model="objectOriginY" class="input-field" type="number" step="any" name="origin-y" placeholder="Origin Y" />
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<label for="tags">Tags</label>
|
||||
<ChipsInput v-model="objectTags" @update:modelValue="objectTags = $event" />
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<label for="is-animated">Is animated</label>
|
||||
<select v-model="objectIsAnimated" class="input-field" name="is-animated">
|
||||
<option :value="false">No</option>
|
||||
<option :value="true">Yes</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<label for="frame-speed">Frame rate</label>
|
||||
<input v-model="objectFrameRate" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame rate" />
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="frame-width">Frame width</label>
|
||||
<input v-model="objectFrameWidth" class="input-field" type="number" step="any" name="frame-width" placeholder="Frame width" />
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="frame-height">Frame height</label>
|
||||
<input v-model="objectFrameHeight" class="input-field" type="number" step="any" name="frame-height" placeholder="Frame height" />
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
|
||||
<button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeObject">Delete</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/application/config'
|
||||
import type { Object } from '@/application/types'
|
||||
import ChipsInput from '@/components/forms/ChipsInput.vue'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const assetManagerStore = useAssetManagerStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
const selectedObject = computed(() => assetManagerStore.selectedObject)
|
||||
|
||||
const objectName = ref('')
|
||||
const objectTags = ref<string[]>([])
|
||||
const objectOriginX = ref(0)
|
||||
const objectOriginY = ref(0)
|
||||
const objectIsAnimated = ref(false)
|
||||
const objectFrameRate = ref(0)
|
||||
const objectFrameWidth = ref(0)
|
||||
const objectFrameHeight = ref(0)
|
||||
|
||||
if (!selectedObject.value) {
|
||||
console.error('No object selected')
|
||||
}
|
||||
|
||||
if (selectedObject.value) {
|
||||
objectName.value = selectedObject.value.name
|
||||
objectTags.value = selectedObject.value.tags
|
||||
objectOriginX.value = selectedObject.value.originX
|
||||
objectOriginY.value = selectedObject.value.originY
|
||||
objectIsAnimated.value = selectedObject.value.isAnimated
|
||||
objectFrameRate.value = selectedObject.value.frameRate
|
||||
objectFrameWidth.value = selectedObject.value.frameWidth
|
||||
objectFrameHeight.value = selectedObject.value.frameHeight
|
||||
}
|
||||
|
||||
function removeObject() {
|
||||
gameStore.connection?.emit('gm:object:remove', { object: selectedObject.value?.id }, (response: boolean) => {
|
||||
if (!response) {
|
||||
console.error('Failed to remove object')
|
||||
return
|
||||
}
|
||||
refreshObjectList()
|
||||
})
|
||||
}
|
||||
|
||||
function refreshObjectList(unsetSelectedObject = true) {
|
||||
gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
|
||||
assetManagerStore.setObjectList(response)
|
||||
|
||||
if (unsetSelectedObject) {
|
||||
assetManagerStore.setSelectedObject(null)
|
||||
}
|
||||
|
||||
if (zoneEditorStore.active) {
|
||||
zoneEditorStore.setObjectList(response)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function saveObject() {
|
||||
if (!selectedObject.value) {
|
||||
console.error('No object selected')
|
||||
return
|
||||
}
|
||||
|
||||
gameStore.connection?.emit(
|
||||
'gm:object:update',
|
||||
{
|
||||
id: selectedObject.value.id,
|
||||
name: objectName.value,
|
||||
tags: objectTags.value,
|
||||
originX: objectOriginX.value,
|
||||
originY: objectOriginY.value,
|
||||
isAnimated: objectIsAnimated.value,
|
||||
frameRate: objectFrameRate.value,
|
||||
frameWidth: objectFrameWidth.value,
|
||||
frameHeight: objectFrameHeight.value
|
||||
},
|
||||
(response: boolean) => {
|
||||
if (!response) {
|
||||
console.error('Failed to save object')
|
||||
return
|
||||
}
|
||||
refreshObjectList(false)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
watch(selectedObject, (object: Object | null) => {
|
||||
if (!object) return
|
||||
objectName.value = object.name
|
||||
objectTags.value = object.tags
|
||||
objectOriginX.value = object.originX
|
||||
objectOriginY.value = object.originY
|
||||
objectIsAnimated.value = object.isAnimated
|
||||
objectFrameRate.value = object.frameRate
|
||||
objectFrameWidth.value = object.frameWidth
|
||||
objectFrameHeight.value = object.frameHeight
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (!selectedObject.value) return
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
assetManagerStore.setSelectedObject(null)
|
||||
})
|
||||
</script>
|
||||
@ -8,20 +8,20 @@
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
<div v-bind="containerProps" class="flex-1 overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
|
||||
<div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
|
||||
<a v-for="{ data: mapObject } in list" :key="mapObject.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedMapObject?.id === mapObject.id }" @click="assetManagerStore.setSelectedMapObject(mapObject as MapObject)">
|
||||
<div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
|
||||
<div v-bind="wrapperProps" ref="elementToScroll">
|
||||
<a v-for="{ data: object } in list" :key="object.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedObject?.id === object.id }" @click="assetManagerStore.setSelectedObject(object as Object)">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="h-7 w-16 max-w-16 flex justify-center">
|
||||
<img class="h-7" :src="`${config.server_endpoint}/textures/map_objects/${mapObject.id}.png`" alt="Object" />
|
||||
<img class="h-7" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
|
||||
</div>
|
||||
<span :class="{ 'text-white': assetManagerStore.selectedMapObject?.id === mapObject.id }">{{ mapObject.name }}</span>
|
||||
<span :class="{ 'text-white': assetManagerStore.selectedObject?.id === object.id }">{{ object.name }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="absolute w-12 h-12 bottom-2.5 right-2.5">
|
||||
<button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -29,9 +29,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/application/config'
|
||||
import { SocketEvent } from '@/application/enums'
|
||||
import type { MapObject } from '@/application/types'
|
||||
import { socketManager } from '@/managers/SocketManager'
|
||||
import type { Object } from '@/application/types'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useVirtualList } from '@vueuse/core'
|
||||
@ -49,14 +47,14 @@ const elementToScroll = ref()
|
||||
const handleFileUpload = (e: Event) => {
|
||||
const files = (e.target as HTMLInputElement).files
|
||||
if (!files) return
|
||||
socketManager.emit(SocketEvent.GM_MAPOBJECT_UPLOAD, files, (response: boolean) => {
|
||||
gameStore.connection?.emit('gm:object:upload', files, (response: boolean) => {
|
||||
if (!response) {
|
||||
if (config.environment === 'development') console.error('Failed to upload map object')
|
||||
if (config.development) console.error('Failed to upload object')
|
||||
return
|
||||
}
|
||||
|
||||
socketManager.emit(SocketEvent.GM_MAPOBJECT_LIST, {}, (response: MapObject[]) => {
|
||||
assetManagerStore.setMapObjectList(response)
|
||||
gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
|
||||
assetManagerStore.setObjectList(response)
|
||||
})
|
||||
})
|
||||
}
|
||||
@ -68,9 +66,9 @@ const handleSearch = () => {
|
||||
|
||||
const filteredObjects = computed(() => {
|
||||
if (!searchQuery.value) {
|
||||
return assetManagerStore.mapObjectList
|
||||
return assetManagerStore.objectList
|
||||
}
|
||||
return assetManagerStore.mapObjectList.filter((object) => object.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
|
||||
return assetManagerStore.objectList.filter((object) => object.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
|
||||
})
|
||||
|
||||
const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(filteredObjects, {
|
||||
@ -94,8 +92,8 @@ function toTop() {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
socketManager.emit(SocketEvent.GM_MAPOBJECT_LIST, {}, (response: MapObject[]) => {
|
||||
assetManagerStore.setMapObjectList(response)
|
||||
gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
|
||||
assetManagerStore.setObjectList(response)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@ -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-indigo px-4 py-2 flex-1 sm:flex-none" type="button" @click.prevent="copySprite">
|
||||
<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">
|
||||
<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>
|
||||
@ -21,12 +21,9 @@
|
||||
<button class="btn-cyan py-2 my-4" type="button" @click.prevent="addNewImage">New action</button>
|
||||
<Accordion v-for="action in spriteActions" :key="action.id">
|
||||
<template #header>
|
||||
<div class="flex items-center">
|
||||
<div class="flex justify-between items-center">
|
||||
{{ action.action }}
|
||||
<div class="ml-auto space-x-2">
|
||||
<button class="btn-cyan px-4 py-1.5 min-w-24" type="button" @click.stop.prevent="openPreviewModal(action)">View</button>
|
||||
<button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.stop.prevent="() => spriteActions.splice(spriteActions.indexOf(action), 1)">Delete</button>
|
||||
</div>
|
||||
<button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="() => spriteActions.splice(spriteActions.indexOf(action), 1)">Delete</button>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
@ -43,38 +40,39 @@
|
||||
<label for="origin-y">Origin Y</label>
|
||||
<input v-model.number="action.originY" class="input-field" type="number" step="any" name="origin-y" placeholder="Origin Y" />
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<div class="form-field-half">
|
||||
<label for="is-animated">Is animated</label>
|
||||
<select v-model="action.isAnimated" class="input-field" name="is-animated">
|
||||
<option :value="false">No</option>
|
||||
<option :value="true">Yes</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-field-half" v-if="action.isAnimated">
|
||||
<label for="is-looping">Is looping</label>
|
||||
<select v-model="action.isLooping" class="input-field" name="is-looping">
|
||||
<option :value="false">No</option>
|
||||
<option :value="true">Yes</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-field-full" v-if="action.isAnimated">
|
||||
<label for="frame-speed">Frame rate</label>
|
||||
<input v-model.number="action.frameRate" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame rate" />
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<SpriteActionsInput v-model="action.sprites" @tempOffsetChange="(index, offset) => handleTempOffsetChange(action, index, offset)" />
|
||||
<SpriteActionsInput v-model="action.sprites" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</Accordion>
|
||||
<SpritePreview
|
||||
v-if="selectedAction"
|
||||
:sprites="selectedAction.sprites"
|
||||
:frame-rate="selectedAction.frameRate"
|
||||
:is-modal-open="isModalOpen"
|
||||
:temp-offset-index="tempOffsetData.index"
|
||||
:temp-offset="tempOffsetData.offset"
|
||||
@update:frame-rate="updateFrameRate"
|
||||
@update:is-modal-open="isModalOpen = $event"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { SocketEvent } from '@/application/enums'
|
||||
import type { Sprite, SpriteAction, UUID } from '@/application/types'
|
||||
import type { Sprite, SpriteAction } from '@/application/types'
|
||||
import { uuidv4 } from '@/application/utilities'
|
||||
import SpriteActionsInput from '@/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue'
|
||||
import SpritePreview from '@/components/gameMaster/assetManager/partials/sprite/partials/SpritePreview.vue'
|
||||
import Accordion from '@/components/utilities/Accordion.vue'
|
||||
import { socketManager } from '@/managers/SocketManager'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
@ -86,8 +84,6 @@ const selectedSprite = computed(() => assetManagerStore.selectedSprite)
|
||||
|
||||
const spriteName = ref('')
|
||||
const spriteActions = ref<SpriteAction[]>([])
|
||||
const isModalOpen = ref(false)
|
||||
const selectedAction = ref<SpriteAction | null>(null)
|
||||
|
||||
if (!selectedSprite.value) {
|
||||
console.error('No sprite selected')
|
||||
@ -99,7 +95,7 @@ if (selectedSprite.value) {
|
||||
}
|
||||
|
||||
function deleteSprite() {
|
||||
socketManager.emit(SocketEvent.GM_SPRITE_DELETE, { id: selectedSprite.value?.id }, (response: boolean) => {
|
||||
gameStore.connection?.emit('gm:sprite:delete', { id: selectedSprite.value?.id }, (response: boolean) => {
|
||||
if (!response) {
|
||||
console.error('Failed to delete sprite')
|
||||
return
|
||||
@ -109,7 +105,7 @@ function deleteSprite() {
|
||||
}
|
||||
|
||||
function copySprite() {
|
||||
socketManager.emit(SocketEvent.GM_SPRITE_COPY, { id: selectedSprite.value?.id }, (response: boolean) => {
|
||||
gameStore.connection?.emit('gm:sprite:copy', { id: selectedSprite.value?.id }, (response: boolean) => {
|
||||
if (!response) {
|
||||
console.error('Failed to copy sprite')
|
||||
return
|
||||
@ -119,7 +115,7 @@ function copySprite() {
|
||||
}
|
||||
|
||||
function refreshSpriteList(unsetSelectedSprite = true) {
|
||||
socketManager.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
|
||||
gameStore.connection?.emit('gm:sprite:list', {}, (response: Sprite[]) => {
|
||||
assetManagerStore.setSpriteList(response)
|
||||
|
||||
if (unsetSelectedSprite) {
|
||||
@ -144,6 +140,8 @@ function saveSprite() {
|
||||
sprites: action.sprites,
|
||||
originX: action.originX,
|
||||
originY: action.originY,
|
||||
isAnimated: action.isAnimated,
|
||||
isLooping: action.isLooping,
|
||||
frameRate: action.frameRate,
|
||||
frameWidth: action.frameWidth,
|
||||
frameHeight: action.frameHeight
|
||||
@ -151,7 +149,7 @@ function saveSprite() {
|
||||
}) ?? []
|
||||
}
|
||||
|
||||
socketManager.emit(SocketEvent.GM_SPRITE_UPDATE, updatedSprite, (response: boolean) => {
|
||||
gameStore.connection?.emit('gm:sprite:update', updatedSprite, (response: boolean) => {
|
||||
if (!response) {
|
||||
console.error('Failed to save sprite')
|
||||
return
|
||||
@ -165,11 +163,14 @@ function addNewImage() {
|
||||
|
||||
const newImage: SpriteAction = {
|
||||
id: uuidv4(),
|
||||
sprite: selectedSprite.value.id,
|
||||
spriteId: selectedSprite.value.id,
|
||||
sprite: selectedSprite.value,
|
||||
action: 'new_action',
|
||||
sprites: [],
|
||||
originX: 0,
|
||||
originY: 0,
|
||||
isAnimated: false,
|
||||
isLooping: false,
|
||||
frameRate: 0,
|
||||
frameWidth: 0,
|
||||
frameHeight: 0
|
||||
@ -183,44 +184,15 @@ function addNewImage() {
|
||||
}
|
||||
|
||||
function sortSpriteActions(actions: SpriteAction[]): SpriteAction[] {
|
||||
if (!actions) return []
|
||||
return [...actions].sort((a, b) => a.action.localeCompare(b.action))
|
||||
}
|
||||
|
||||
function openPreviewModal(action: SpriteAction) {
|
||||
selectedAction.value = action
|
||||
isModalOpen.value = true
|
||||
}
|
||||
|
||||
function updateFrameRate(value: number) {
|
||||
if (selectedAction.value) {
|
||||
selectedAction.value.frameRate = value
|
||||
}
|
||||
}
|
||||
|
||||
const tempOffsetData = ref<{ index: number | undefined; offset: { x: number; y: number } | undefined }>({
|
||||
index: undefined,
|
||||
offset: undefined
|
||||
})
|
||||
|
||||
function handleTempOffsetChange(action: SpriteAction, index: number, offset: { x: number; y: number }) {
|
||||
if (selectedAction.value === action) {
|
||||
tempOffsetData.value = { index, offset }
|
||||
}
|
||||
}
|
||||
|
||||
watch(selectedSprite, (sprite: Sprite | null) => {
|
||||
if (!sprite) return
|
||||
spriteName.value = sprite.name
|
||||
spriteActions.value = sortSpriteActions(sprite.spriteActions)
|
||||
})
|
||||
|
||||
watch(isModalOpen, (newValue) => {
|
||||
if (!newValue) {
|
||||
selectedAction.value = null
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (!selectedSprite.value) return
|
||||
})
|
||||
|
||||
@ -7,8 +7,8 @@
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div v-bind="containerProps" class="flex-1 overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
|
||||
<div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
|
||||
<div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
|
||||
<div v-bind="wrapperProps" ref="elementToScroll">
|
||||
<a v-for="{ data: sprite } in list" :key="sprite.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedSprite?.id === sprite.id }" @click="assetManagerStore.setSelectedSprite(sprite as Sprite)">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<span :class="{ 'text-white': assetManagerStore.selectedSprite?.id === sprite.id }">{{ sprite.name }}</span>
|
||||
@ -17,7 +17,7 @@
|
||||
</div>
|
||||
<div class="absolute w-12 h-12 bottom-2.5 right-2.5">
|
||||
<button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -25,9 +25,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/application/config'
|
||||
import { SocketEvent } from '@/application/enums'
|
||||
import type { Sprite } from '@/application/types'
|
||||
import { socketManager } from '@/managers/SocketManager'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useVirtualList } from '@vueuse/core'
|
||||
@ -42,13 +40,13 @@ const hasScrolled = ref(false)
|
||||
const elementToScroll = ref()
|
||||
|
||||
function newButtonClickHandler() {
|
||||
socketManager.emit(SocketEvent.GM_SPRITE_CREATE, {}, (response: boolean) => {
|
||||
gameStore.connection?.emit('gm:sprite:create', {}, (response: boolean) => {
|
||||
if (!response) {
|
||||
if (config.environment === 'development') console.error('Failed to create new sprite')
|
||||
if (config.development) console.error('Failed to create new sprite')
|
||||
return
|
||||
}
|
||||
|
||||
socketManager.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
|
||||
gameStore.connection?.emit('gm:sprite:list', {}, (response: Sprite[]) => {
|
||||
assetManagerStore.setSpriteList(response)
|
||||
})
|
||||
})
|
||||
@ -87,7 +85,7 @@ function toTop() {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
socketManager.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
|
||||
gameStore.connection?.emit('gm:sprite:list', {}, (response: Sprite[]) => {
|
||||
assetManagerStore.setSpriteList(response)
|
||||
})
|
||||
})
|
||||
|
||||
@ -1,44 +1,19 @@
|
||||
<template>
|
||||
<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">{{ imageDimensions[index].width }}x{{ imageDimensions[index].height }}</div>
|
||||
<img :src="image" class="max-w-full max-h-full object-contain pointer-events-none" alt="Uploaded image" />
|
||||
<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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
<button @click.stop="openOffsetModal(index)" class="bg-blue-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="Scope image">
|
||||
<svg width="50px" height="50px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.29289 3.70711L1 11V15H5L12.2929 7.70711L8.29289 3.70711Z" fill="white" />
|
||||
<path d="M9.70711 2.29289L13.7071 6.29289L15.1716 4.82843C15.702 4.29799 16 3.57857 16 2.82843C16 1.26633 14.7337 0 13.1716 0C12.4214 0 11.702 0.297995 11.1716 0.828428L9.70711 2.29289Z" fill="white" />
|
||||
<button class="bg-blue-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="Scope image">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<template #modalBody>
|
||||
<div class="m-4">
|
||||
<form method="post" @submit.prevent="saveOffset(index)" class="inline">
|
||||
<div class="gap-2.5 flex flex-wrap">
|
||||
<div class="form-field-half">
|
||||
<label for="offsetX">Offset X</label>
|
||||
<input class="input-field max-w-64" v-model="tempOffset.x" name="offsetX" id="offsetX" type="number" />
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="offsetY">Offset Y</label>
|
||||
<input class="input-field max-w-64" v-model="tempOffset.y" name="offsetY" id="offsetY" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</div>
|
||||
<div class="h-20 w-20 p-4 bg-gray-200 bg-opacity-50 rounded justify-center items-center flex hover:cursor-pointer" @click="triggerFileInput" @drop.prevent="onDrop" @dragover.prevent>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 invert" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
@ -50,19 +25,10 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
interface SpriteImage {
|
||||
url: string
|
||||
offset: {
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
}
|
||||
import { ref } from 'vue'
|
||||
|
||||
interface Props {
|
||||
modelValue: SpriteImage[]
|
||||
modelValue: string[]
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
@ -70,15 +36,11 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: SpriteImage[]): void
|
||||
(e: 'close'): void
|
||||
(e: 'tempOffsetChange', index: number, offset: { x: number; y: number }): void
|
||||
(e: 'update:modelValue', value: string[]): void
|
||||
}>()
|
||||
|
||||
const fileInput = ref<HTMLInputElement | null>(null)
|
||||
const draggedIndex = ref<number | null>(null)
|
||||
const selectedImageIndex = ref<number | null>(null)
|
||||
const tempOffset = ref({ x: 0, y: 0 })
|
||||
|
||||
const triggerFileInput = () => {
|
||||
fileInput.value?.click()
|
||||
@ -99,25 +61,19 @@ const onDrop = (event: DragEvent) => {
|
||||
|
||||
const handleFiles = (files: FileList) => {
|
||||
Array.from(files).forEach((file) => {
|
||||
if (!file.type.startsWith('image/')) {
|
||||
return
|
||||
}
|
||||
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
if (typeof e.target?.result === 'string') {
|
||||
const newImage: SpriteImage = {
|
||||
url: e.target.result,
|
||||
offset: { x: 0, y: 0 }
|
||||
if (file.type.startsWith('image/')) {
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
if (typeof e.target?.result === 'string') {
|
||||
updateImages([...props.modelValue, e.target.result])
|
||||
}
|
||||
updateImages([...props.modelValue, newImage])
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
})
|
||||
}
|
||||
|
||||
const updateImages = (newImages: SpriteImage[]) => {
|
||||
const updateImages = (newImages: string[]) => {
|
||||
emit('update:modelValue', newImages)
|
||||
}
|
||||
|
||||
@ -145,41 +101,4 @@ const drop = (event: DragEvent, dropIndex: number) => {
|
||||
}
|
||||
draggedIndex.value = null
|
||||
}
|
||||
|
||||
const openOffsetModal = (index: number) => {
|
||||
selectedImageIndex.value = index
|
||||
tempOffset.value = { ...props.modelValue[index].offset }
|
||||
}
|
||||
|
||||
const closeOffsetModal = () => {
|
||||
selectedImageIndex.value = null
|
||||
}
|
||||
|
||||
const saveOffset = (index: number) => {
|
||||
const newImages = [...props.modelValue]
|
||||
newImages[index] = {
|
||||
...newImages[index],
|
||||
offset: { ...tempOffset.value }
|
||||
}
|
||||
updateImages(newImages)
|
||||
closeOffsetModal()
|
||||
}
|
||||
|
||||
const onOffsetChange = () => {
|
||||
if (selectedImageIndex.value !== null) {
|
||||
emit('tempOffsetChange', selectedImageIndex.value, tempOffset.value)
|
||||
}
|
||||
}
|
||||
|
||||
watch(tempOffset, onOffsetChange, { deep: true })
|
||||
|
||||
const imageDimensions = ref<{ [key: number]: { width: number; height: number } }>({})
|
||||
|
||||
const updateImageDimensions = (event: Event, index: number) => {
|
||||
const img = event.target as HTMLImageElement
|
||||
imageDimensions.value[index] = {
|
||||
width: img.naturalWidth,
|
||||
height: img.naturalHeight
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,151 +0,0 @@
|
||||
<template>
|
||||
<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>
|
||||
<template #modalBody>
|
||||
<div class="m-4 flex gap-8">
|
||||
<div class="relative">
|
||||
<div
|
||||
class="sprite-container bg-gray-800"
|
||||
:style="{
|
||||
width: `${maxWidth}px`,
|
||||
height: `${maxHeight}px`,
|
||||
position: 'relative',
|
||||
overflow: 'hidden'
|
||||
}"
|
||||
>
|
||||
<img
|
||||
v-for="(sprite, index) in spritesWithTempOffset"
|
||||
:key="index"
|
||||
:src="sprite.url"
|
||||
alt="Sprite"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
left: `${sprite.offset?.x || 0}px`,
|
||||
bottom: `${sprite.offset?.y || 0}px`,
|
||||
display: currentFrame === index ? 'block' : 'none',
|
||||
transform: `scale(${zoomLevel / 100})`,
|
||||
transformOrigin: 'bottom left'
|
||||
}"
|
||||
@load="updateContainerSize"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center gap-8 flex-1">
|
||||
<div class="flex flex-col">
|
||||
<label class="block mb-2 text-white">Frame Rate: {{ frameRate }} FPS (Duration: {{ totalDuration }}s)</label>
|
||||
<input type="range" v-model.number="localFrameRate" min="0" max="60" step="1" class="w-full accent-cyan-500" @input="updateFrameRate" />
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label class="block mb-2 text-white">Frame: {{ currentFrame + 1 }} of {{ sprites.length }}</label>
|
||||
<input type="range" v-model.number="currentFrame" :min="0" :max="sprites.length - 1" step="1" class="w-full accent-cyan-500" @input="stopAnimation" />
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label class="block mb-2 text-white">Zoom: {{ zoomLevel }}%</label>
|
||||
<input type="range" v-model.number="zoomLevel" min="10" max="200" step="10" class="w-full accent-cyan-500" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { SpriteImage } from '@/application/types'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
sprites: SpriteImage[]
|
||||
frameRate: number
|
||||
isModalOpen?: boolean
|
||||
tempOffsetIndex?: number
|
||||
tempOffset?: { x: number; y: number }
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:frameRate', value: number): void
|
||||
(e: 'update:isModalOpen', value: boolean): void
|
||||
}>()
|
||||
|
||||
const currentFrame = ref(0)
|
||||
const maxWidth = ref(250)
|
||||
const maxHeight = ref(250)
|
||||
const localFrameRate = ref(props.frameRate)
|
||||
const zoomLevel = ref(100)
|
||||
let animationInterval: number | null = null
|
||||
|
||||
const totalDuration = computed(() => {
|
||||
if (props.frameRate <= 0) return 0
|
||||
return (props.sprites.length / props.frameRate).toFixed(2)
|
||||
})
|
||||
|
||||
const spritesWithTempOffset = computed(() => {
|
||||
return props.sprites.map((sprite, index) => {
|
||||
if (index === props.tempOffsetIndex && props.tempOffset) {
|
||||
return { ...sprite, offset: props.tempOffset }
|
||||
}
|
||||
return sprite
|
||||
})
|
||||
})
|
||||
|
||||
function updateContainerSize(event: Event) {
|
||||
const img = event.target as HTMLImageElement
|
||||
maxWidth.value = Math.max(maxWidth.value, img.naturalWidth)
|
||||
maxHeight.value = Math.max(maxHeight.value, img.naturalHeight)
|
||||
}
|
||||
|
||||
function updateAnimation() {
|
||||
stopAnimation()
|
||||
if (props.frameRate <= 0 || props.sprites.length === 0) {
|
||||
currentFrame.value = 0
|
||||
return
|
||||
}
|
||||
|
||||
animationInterval = window.setInterval(() => {
|
||||
currentFrame.value = (currentFrame.value + 1) % props.sprites.length
|
||||
}, 1000 / props.frameRate)
|
||||
}
|
||||
|
||||
function stopAnimation() {
|
||||
if (animationInterval) {
|
||||
clearInterval(animationInterval)
|
||||
animationInterval = null
|
||||
}
|
||||
}
|
||||
|
||||
function updateFrameRate() {
|
||||
emit('update:frameRate', localFrameRate.value)
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
emit('update:isModalOpen', false)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.frameRate,
|
||||
(newValue) => {
|
||||
localFrameRate.value = newValue
|
||||
updateAnimation()
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
watch(() => props.sprites, updateAnimation, { immediate: true })
|
||||
|
||||
onMounted(() => {
|
||||
updateAnimation()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
stopAnimation()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sprite-container {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="h-full overflow-auto">
|
||||
<div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md default-border bg-gray">
|
||||
<img class="max-h-72" :src="`${config.server_endpoint}/textures/tiles/${selectedTile?.id}.png`" :alt="'Tile ' + selectedTile?.id" />
|
||||
<img class="max-h-72" :src="`${config.server_endpoint}/assets/tiles/${selectedTile?.id}.png`" :alt="'Tile ' + selectedTile?.id" />
|
||||
</div>
|
||||
<div class="mt-5 block">
|
||||
<form class="flex gap-2.5 flex-wrap" @submit.prevent="saveTile">
|
||||
@ -24,18 +24,16 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/application/config'
|
||||
import { SocketEvent } from '@/application/enums'
|
||||
import type { Tile } from '@/application/types'
|
||||
import ChipsInput from '@/components/forms/ChipsInput.vue'
|
||||
import { socketManager } from '@/managers/SocketManager'
|
||||
import { TileStorage } from '@/storage/storages'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { computed, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const assetManagerStore = useAssetManagerStore()
|
||||
const tileStorage = new TileStorage()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
const selectedTile = computed(() => assetManagerStore.selectedTile)
|
||||
|
||||
@ -57,24 +55,27 @@ watch(selectedTile, (tile: Tile | null) => {
|
||||
tileTags.value = tile.tags
|
||||
})
|
||||
|
||||
async function deleteTile() {
|
||||
socketManager.emit(SocketEvent.GM_TILE_DELETE, { id: selectedTile.value?.id }, async (response: boolean) => {
|
||||
function deleteTile() {
|
||||
gameStore.connection?.emit('gm:tile:delete', { id: selectedTile.value?.id }, (response: boolean) => {
|
||||
if (!response) {
|
||||
console.error('Failed to delete tile')
|
||||
return
|
||||
}
|
||||
await tileStorage.delete(selectedTile.value!.id)
|
||||
refreshTileList()
|
||||
})
|
||||
}
|
||||
|
||||
function refreshTileList(unsetSelectedTile = true) {
|
||||
socketManager.emit(SocketEvent.GM_TILE_LIST, {}, (response: Tile[]) => {
|
||||
gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => {
|
||||
assetManagerStore.setTileList(response)
|
||||
|
||||
if (unsetSelectedTile) {
|
||||
assetManagerStore.setSelectedTile(null)
|
||||
}
|
||||
|
||||
if (zoneEditorStore.active) {
|
||||
zoneEditorStore.setTileList(response)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -84,7 +85,7 @@ function saveTile() {
|
||||
return
|
||||
}
|
||||
|
||||
socketManager.emit(
|
||||
gameStore.connection?.emit(
|
||||
'gm:tile:update',
|
||||
{
|
||||
id: selectedTile.value.id,
|
||||
|
||||
@ -8,12 +8,12 @@
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
<div v-bind="containerProps" class="flex-1 overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
|
||||
<div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
|
||||
<div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
|
||||
<div v-bind="wrapperProps" ref="elementToScroll">
|
||||
<a v-for="{ data: tile } in list" :key="tile.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedTile?.id === tile.id }" @click="assetManagerStore.setSelectedTile(tile)">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="h-7 w-16 max-w-16 flex justify-center">
|
||||
<img class="h-7" :src="`${config.server_endpoint}/textures/tiles/${tile.id}.png`" alt="Tile" />
|
||||
<img class="h-7" :src="`${config.server_endpoint}/assets/tiles/${tile.id}.png`" alt="Tile" />
|
||||
</div>
|
||||
<span class="group-hover:text-white" :class="{ 'text-white': assetManagerStore.selectedTile?.id === tile.id }">{{ tile.name }}</span>
|
||||
</div>
|
||||
@ -21,7 +21,7 @@
|
||||
</div>
|
||||
<div class="absolute w-12 h-12 bottom-2.5 right-2.5">
|
||||
<button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -29,9 +29,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/application/config'
|
||||
import { SocketEvent } from '@/application/enums'
|
||||
import type { Tile } from '@/application/types'
|
||||
import { socketManager } from '@/managers/SocketManager'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useVirtualList } from '@vueuse/core'
|
||||
@ -49,13 +47,13 @@ const elementToScroll = ref()
|
||||
const handleFileUpload = (e: Event) => {
|
||||
const files = (e.target as HTMLInputElement).files
|
||||
if (!files) return
|
||||
socketManager.emit(SocketEvent.GM_TILE_UPLOAD, files, (response: boolean) => {
|
||||
gameStore.connection?.emit('gm:tile:upload', files, (response: boolean) => {
|
||||
if (!response) {
|
||||
if (config.environment === 'development') console.error('Failed to upload tile')
|
||||
if (config.development) console.error('Failed to upload tile')
|
||||
return
|
||||
}
|
||||
|
||||
socketManager.emit(SocketEvent.GM_TILE_LIST, {}, (response: Tile[]) => {
|
||||
gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => {
|
||||
assetManagerStore.setTileList(response)
|
||||
})
|
||||
})
|
||||
@ -94,7 +92,7 @@ function toTop() {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
socketManager.emit(SocketEvent.GM_TILE_LIST, {}, (response: Tile[]) => {
|
||||
gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => {
|
||||
assetManagerStore.setTileList(response)
|
||||
})
|
||||
})
|
||||
|
||||
@ -1,240 +0,0 @@
|
||||
<template>
|
||||
<MapTiles ref="mapTiles" @createCommand="addCommand" v-if="tileMap && tileMapLayer" :tileMap :tileMapLayer />
|
||||
<PlacedMapObjects ref="mapObjects" @update="updateMapObjects" @updateAndCommit="updateAndCommit" @pauseObjectTracking="pause" @resumeObjectTracking="resume" v-if="tileMap && tileMapLayer" :tileMap :tileMapLayer />
|
||||
<MapEventTiles ref="eventTiles" @createCommand="addCommand" v-if="tileMap" :tileMap />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { MapEventTile, Map as MapT, PlacedMapObject as PlacedMapObjectT } from '@/application/types'
|
||||
import MapEventTiles from '@/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue'
|
||||
import MapTiles from '@/components/gameMaster/mapEditor/mapPartials/MapTiles.vue'
|
||||
import PlacedMapObjects from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue'
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { cloneArray, createTileArray, createTileLayer, createTileMap, placeTiles } from '@/services/mapService'
|
||||
import { TileStorage } from '@/storage/storages'
|
||||
import { useManualRefHistory, useRefHistory } from '@vueuse/core'
|
||||
import { useScene } from 'phavuer'
|
||||
import { onBeforeUnmount, onMounted, onUnmounted, ref, shallowRef, useTemplateRef, watch } from 'vue'
|
||||
|
||||
const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
|
||||
const tileMapLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
|
||||
|
||||
const mapEditor = useMapEditorComposable()
|
||||
const scene = useScene()
|
||||
|
||||
const mapTiles = useTemplateRef('mapTiles')
|
||||
const mapObjects = useTemplateRef('mapObjects')
|
||||
const eventTiles = useTemplateRef('eventTiles')
|
||||
|
||||
//Record of commands
|
||||
let commandStack: (EditorCommand | number)[] = []
|
||||
let commandIndex = ref(0)
|
||||
|
||||
let originTiles: string[][] = []
|
||||
let originEventTiles: MapEventTile[] = []
|
||||
let originObjects = ref<PlacedMapObjectT[]>(mapEditor.currentMap.value?.placedMapObjects ?? [])
|
||||
|
||||
const { undo, redo, commit, pause, resume, canUndo, canRedo } = useRefHistory(originObjects, { deep: true, capacity: 9 })
|
||||
|
||||
//Command Pattern basic interface, extended to store what elements have been changed by each edit
|
||||
export interface EditorCommand {
|
||||
apply: (elements: any[]) => any[]
|
||||
type: 'tile' | 'map_object' | 'event_tile'
|
||||
operation: 'draw' | 'erase' | 'clear'
|
||||
}
|
||||
|
||||
function applyCommands(tiles: any[], ...commands: EditorCommand[]): any[] {
|
||||
let tileVersion = cloneArray(tiles)
|
||||
for (let command of commands) {
|
||||
tileVersion = command.apply(tileVersion)
|
||||
}
|
||||
return tileVersion
|
||||
}
|
||||
|
||||
watch(
|
||||
() => mapEditor.shouldClearTiles.value,
|
||||
(shouldClear) => {
|
||||
if (shouldClear && mapEditor.currentMap.value) {
|
||||
mapTiles.value!.clearTiles()
|
||||
eventTiles.value!.clearTiles()
|
||||
mapEditor.currentMap.value.placedMapObjects = []
|
||||
updateAndCommit(mapEditor.currentMap.value)
|
||||
mapEditor.resetClearTilesFlag()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
function update(commands: (EditorCommand | number)[]) {
|
||||
if (!mapEditor.currentMap.value) return
|
||||
|
||||
if (commandStack.length >= 9) {
|
||||
if (typeof commandStack[0] !== 'number') {
|
||||
const base = commandStack.shift() as EditorCommand
|
||||
if (base.operation !== 'clear') {
|
||||
switch (base.type) {
|
||||
case 'tile':
|
||||
originTiles = base.apply(originTiles) as string[][]
|
||||
break
|
||||
case 'event_tile':
|
||||
originEventTiles = base.apply(originEventTiles) as MapEventTile[]
|
||||
break
|
||||
}
|
||||
} else {
|
||||
commandStack.shift()
|
||||
}
|
||||
} else if (typeof commandStack[0] === 'number') {
|
||||
commandStack.shift()
|
||||
}
|
||||
}
|
||||
|
||||
let tileCommands = commands.filter((item) => typeof item !== 'number' && item.type === 'tile') as EditorCommand[]
|
||||
let eventTileCommands = commands.filter((item) => typeof item !== 'number' && item.type === 'event_tile') as EditorCommand[]
|
||||
|
||||
let modifiedTiles = applyCommands(originTiles, ...tileCommands)
|
||||
placeTiles(tileMap.value!, tileMapLayer.value!, modifiedTiles)
|
||||
|
||||
let eventTiles = applyCommands(originEventTiles, ...eventTileCommands)
|
||||
|
||||
mapEditor.currentMap.value.tiles = modifiedTiles
|
||||
mapEditor.currentMap.value.mapEventTiles = eventTiles
|
||||
mapEditor.currentMap.value.placedMapObjects = originObjects.value
|
||||
}
|
||||
|
||||
function updateMapObjects(map: MapT) {
|
||||
originObjects.value = map.placedMapObjects
|
||||
}
|
||||
|
||||
function updateAndCommit(map?: MapT) {
|
||||
commandStack = commandStack.slice(0, commandIndex.value)
|
||||
if (map) updateMapObjects(map)
|
||||
commit()
|
||||
commandStack.push(0)
|
||||
commandIndex.value = commandStack.length
|
||||
}
|
||||
|
||||
function addCommand(command: EditorCommand) {
|
||||
commandStack = commandStack.slice(0, commandIndex.value)
|
||||
commandStack.push(command)
|
||||
commandIndex.value = commandStack.length
|
||||
}
|
||||
|
||||
function undoEdit() {
|
||||
if (commandIndex.value > 0) {
|
||||
if (typeof commandStack[--commandIndex.value] === 'number' && canUndo) {
|
||||
undo()
|
||||
}
|
||||
update(commandStack.slice(0, commandIndex.value))
|
||||
}
|
||||
}
|
||||
|
||||
function redoEdit() {
|
||||
if (commandIndex.value <= 9 && commandIndex.value < commandStack.length) {
|
||||
if (typeof commandStack[commandIndex.value++] === 'number' && canRedo) {
|
||||
redo()
|
||||
}
|
||||
update(commandStack.slice(0, commandIndex.value))
|
||||
}
|
||||
}
|
||||
|
||||
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 not pressed, this means we are moving the camera
|
||||
if (pointer.event.shiftKey) return
|
||||
|
||||
// Check if draw mode is tile
|
||||
switch (mapEditor.drawMode.value) {
|
||||
case 'tile':
|
||||
mapTiles.value.handlePointer(pointer)
|
||||
break
|
||||
case 'map_object':
|
||||
mapObjects.value.handlePointer(pointer)
|
||||
break
|
||||
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) {
|
||||
redoEdit()
|
||||
}
|
||||
|
||||
//CTRL+Z
|
||||
if (event.key === 'z' && event.ctrlKey) {
|
||||
undoEdit()
|
||||
}
|
||||
}
|
||||
|
||||
function handlePointerMove(pointer: Phaser.Input.Pointer) {
|
||||
if (mapEditor.inputMode.value === 'hold' && pointer.isDown) {
|
||||
handlePointerDown(pointer)
|
||||
}
|
||||
}
|
||||
|
||||
function handlePointerUp(pointer: Phaser.Input.Pointer) {
|
||||
switch (mapEditor.drawMode.value) {
|
||||
case 'tile':
|
||||
mapTiles.value!.finalizeCommand()
|
||||
break
|
||||
case 'map_object':
|
||||
if (mapEditor.tool.value === 'pencil' || mapEditor.tool.value === 'eraser') {
|
||||
resume()
|
||||
updateAndCommit()
|
||||
}
|
||||
break
|
||||
case 'teleport':
|
||||
eventTiles.value!.finalizeCommand()
|
||||
break
|
||||
case 'blocking tile':
|
||||
eventTiles.value!.finalizeCommand()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
let mapValue = mapEditor.currentMap.value
|
||||
if (!mapValue) return
|
||||
|
||||
//Clone
|
||||
originTiles = cloneArray(mapValue.tiles)
|
||||
originEventTiles = cloneArray(mapValue.mapEventTiles)
|
||||
|
||||
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>
|
||||
@ -1,156 +0,0 @@
|
||||
<template>
|
||||
<Image v-for="tile in mapEditor.currentMap.value?.mapEventTiles" v-bind="getImageProps(tile)" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { MapEventTileType, type MapEventTile, type Map as MapT, type UUID } from '@/application/types'
|
||||
import { uuidv4 } from '@/application/utilities'
|
||||
import { type EditorCommand } from '@/components/gameMaster/mapEditor/Map.vue'
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { cloneArray, getTile, tileToWorldX, tileToWorldY } from '@/services/mapService'
|
||||
import { Image } from 'phavuer'
|
||||
|
||||
const mapEditor = useMapEditorComposable()
|
||||
|
||||
defineExpose({ handlePointer, finalizeCommand, clearTiles })
|
||||
|
||||
const emit = defineEmits(['createCommand'])
|
||||
|
||||
const props = defineProps<{
|
||||
tileMap: Phaser.Tilemaps.Tilemap
|
||||
}>()
|
||||
|
||||
// *** COMMAND STATE ***
|
||||
|
||||
let currentCommand: EventTileCommand | null = null
|
||||
|
||||
class EventTileCommand implements EditorCommand {
|
||||
public operation: 'draw' | 'erase' | 'clear' = 'draw'
|
||||
public type: 'event_tile' = 'event_tile'
|
||||
public affectedTiles: MapEventTile[] = []
|
||||
|
||||
apply(elements: MapEventTile[]) {
|
||||
let tileVersion = cloneArray(elements) as MapEventTile[]
|
||||
if (this.operation === 'draw') {
|
||||
tileVersion = tileVersion.concat(this.affectedTiles)
|
||||
} else if (this.operation === 'erase') {
|
||||
tileVersion = tileVersion.filter((v) => !this.affectedTiles.includes(v))
|
||||
} else if (this.operation === 'clear') {
|
||||
tileVersion = []
|
||||
}
|
||||
return tileVersion
|
||||
}
|
||||
|
||||
constructor(operation: 'draw' | 'erase' | 'clear') {
|
||||
this.operation = operation
|
||||
}
|
||||
}
|
||||
|
||||
function createCommandUpdate(tile?: MapEventTile | null, operation: 'draw' | 'erase' | 'clear' = 'draw') {
|
||||
if (!tile) return
|
||||
|
||||
if (!currentCommand) {
|
||||
currentCommand = new EventTileCommand(operation)
|
||||
}
|
||||
|
||||
//If position is already in, do not proceed
|
||||
for (const priorTile of currentCommand.affectedTiles) {
|
||||
if (priorTile.positionX === tile.positionX && priorTile.positionY == tile.positionY) return
|
||||
}
|
||||
|
||||
currentCommand.affectedTiles.push(tile)
|
||||
}
|
||||
|
||||
function finalizeCommand() {
|
||||
if (!currentCommand) return
|
||||
emit('createCommand', currentCommand)
|
||||
currentCommand = null
|
||||
}
|
||||
|
||||
// *** HANDLERS ***
|
||||
|
||||
function getImageProps(tile: MapEventTile) {
|
||||
return {
|
||||
x: tileToWorldX(props.tileMap, tile.positionX, tile.positionY),
|
||||
y: tileToWorldY(props.tileMap, tile.positionX, tile.positionY),
|
||||
texture: tile.type,
|
||||
depth: 999
|
||||
}
|
||||
}
|
||||
|
||||
function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
|
||||
// Check if there is a tile
|
||||
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 teleport, check if there is a selected map
|
||||
if (mapEditor.drawMode.value === 'teleport' && !mapEditor.teleportSettings.value.toMap) return
|
||||
|
||||
const newEventTile = {
|
||||
id: uuidv4() as UUID,
|
||||
type: mapEditor.drawMode.value === 'blocking tile' ? MapEventTileType.BLOCK : MapEventTileType.TELEPORT,
|
||||
positionX: tile.x,
|
||||
positionY: tile.y,
|
||||
teleport:
|
||||
mapEditor.drawMode.value === 'teleport'
|
||||
? {
|
||||
toMap: mapEditor.teleportSettings.value.toMap,
|
||||
toPositionX: mapEditor.teleportSettings.value.toPositionX,
|
||||
toPositionY: mapEditor.teleportSettings.value.toPositionY,
|
||||
toRotation: mapEditor.teleportSettings.value.toRotation
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
|
||||
createCommandUpdate(newEventTile as MapEventTile, 'draw')
|
||||
|
||||
map.mapEventTiles.push(newEventTile as MapEventTile)
|
||||
}
|
||||
|
||||
function erase(pointer: Phaser.Input.Pointer, map: MapT) {
|
||||
// Check if there is a tile
|
||||
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
|
||||
}
|
||||
|
||||
createCommandUpdate(existingEventTile, 'erase')
|
||||
|
||||
// Remove existing event tile
|
||||
map.mapEventTiles = map.mapEventTiles.filter((eventTile) => eventTile.id !== existingEventTile.id)
|
||||
}
|
||||
|
||||
function handlePointer(pointer: Phaser.Input.Pointer) {
|
||||
const map = mapEditor.currentMap.value
|
||||
if (!map) return
|
||||
|
||||
if (pointer.event.altKey) return
|
||||
|
||||
switch (mapEditor.tool.value) {
|
||||
case 'pencil':
|
||||
pencil(pointer, map)
|
||||
break
|
||||
case 'eraser':
|
||||
erase(pointer, map)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
function clearTiles() {
|
||||
if (mapEditor.currentMap.value?.mapEventTiles.length === 0) return
|
||||
createCommandUpdate(null, 'clear')
|
||||
finalizeCommand()
|
||||
}
|
||||
</script>
|
||||
@ -1,157 +0,0 @@
|
||||
<template>
|
||||
<Controls v-if="tileMapLayer" :layer="tileMapLayer" :depth="0" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type EditorCommand } from '@/components/gameMaster/mapEditor/Map.vue'
|
||||
import Controls from '@/components/utilities/Controls.vue'
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { cloneArray, createTileArray, getTile, placeTile, placeTiles } from '@/services/mapService'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
|
||||
const mapEditor = useMapEditorComposable()
|
||||
|
||||
defineExpose({ handlePointer, finalizeCommand, clearTiles })
|
||||
|
||||
const emit = defineEmits(['createCommand'])
|
||||
|
||||
const props = defineProps<{
|
||||
tileMap: Phaser.Tilemaps.Tilemap
|
||||
tileMapLayer: Phaser.Tilemaps.TilemapLayer
|
||||
}>()
|
||||
|
||||
// *** COMMAND STATE ***
|
||||
|
||||
let currentCommand: TileCommand | null = null
|
||||
|
||||
class TileCommand implements EditorCommand {
|
||||
public operation: 'draw' | 'erase' | 'clear' = 'draw'
|
||||
public type: 'tile' = 'tile'
|
||||
public tileName: string = 'blank_tile'
|
||||
public affectedTiles: number[][] = []
|
||||
|
||||
apply(elements: string[][]) {
|
||||
let tileVersion
|
||||
if (this.operation === 'clear') {
|
||||
tileVersion = createTileArray(props.tileMapLayer.width, props.tileMapLayer.height, 'blank_tile')
|
||||
} else {
|
||||
tileVersion = cloneArray(elements) as string[][]
|
||||
for (const position of this.affectedTiles) {
|
||||
tileVersion[position[1]][position[0]] = this.tileName
|
||||
}
|
||||
}
|
||||
return tileVersion
|
||||
}
|
||||
|
||||
constructor(operation: 'draw' | 'erase' | 'clear', tileName: string) {
|
||||
this.operation = operation
|
||||
this.tileName = tileName
|
||||
}
|
||||
}
|
||||
|
||||
function createCommandUpdate(x: number, y: number, tileName: string, operation: 'draw' | 'erase' | 'clear') {
|
||||
if (!currentCommand) {
|
||||
currentCommand = new TileCommand(operation, tileName)
|
||||
}
|
||||
|
||||
//If position is already in, do not proceed
|
||||
for (const vec of currentCommand.affectedTiles) {
|
||||
if (vec[0] === x && vec[1] === y) return
|
||||
}
|
||||
|
||||
currentCommand.affectedTiles.push([x, y])
|
||||
}
|
||||
|
||||
function finalizeCommand() {
|
||||
if (!currentCommand) return
|
||||
emit('createCommand', currentCommand)
|
||||
currentCommand = null
|
||||
}
|
||||
|
||||
// *** HANDLERS ***
|
||||
|
||||
function draw(pointer: Phaser.Input.Pointer, tileName: string) {
|
||||
let map = mapEditor.currentMap.value
|
||||
if (!map) return
|
||||
|
||||
// Check if there is a tile
|
||||
const tile = getTile(props.tileMapLayer, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Place tile
|
||||
placeTile(props.tileMap, props.tileMapLayer, tile.x, tile.y, tileName)
|
||||
|
||||
createCommandUpdate(tile.x, tile.y, tileName, tileName === 'blank_tile' ? 'erase' : 'draw')
|
||||
|
||||
// Adjust mapEditorStore.map.tiles
|
||||
map.tiles[tile.y][tile.x] = tileName
|
||||
}
|
||||
|
||||
function paint(pointer: Phaser.Input.Pointer) {
|
||||
let map = mapEditor.currentMap.value
|
||||
if (!map) return
|
||||
|
||||
// Set new tileArray with selected tile
|
||||
const tileArray = createTileArray(props.tileMap.width, props.tileMap.height, mapEditor.selectedTile.value)
|
||||
placeTiles(props.tileMap, props.tileMapLayer, tileArray)
|
||||
|
||||
// Adjust mapEditorStore.map.tiles
|
||||
map.tiles = tileArray
|
||||
}
|
||||
|
||||
// When alt is pressed, and the pointer is down, select the tile that the pointer is over
|
||||
function tilePicker(pointer: Phaser.Input.Pointer) {
|
||||
let map = mapEditor.currentMap.value
|
||||
if (!map) return
|
||||
|
||||
// Check if there is a tile
|
||||
const tile = getTile(props.tileMapLayer, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Select the tile
|
||||
mapEditor.setSelectedTile(map.tiles[tile.y][tile.x])
|
||||
}
|
||||
|
||||
function handlePointer(pointer: Phaser.Input.Pointer) {
|
||||
// Check if left mouse button is pressed
|
||||
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
|
||||
|
||||
// Check if alt is pressed
|
||||
if (pointer.event.altKey) {
|
||||
tilePicker(pointer)
|
||||
return
|
||||
}
|
||||
|
||||
// Check if draw mode is tile
|
||||
switch (mapEditor.tool.value) {
|
||||
case 'pencil':
|
||||
draw(pointer, mapEditor.selectedTile.value!)
|
||||
break
|
||||
case 'eraser':
|
||||
draw(pointer, 'blank_tile')
|
||||
break
|
||||
case 'paint':
|
||||
paint(pointer)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// *** LIFECYCLE ***
|
||||
|
||||
function clearTiles() {
|
||||
const tileArray = createTileArray(props.tileMap.width, props.tileMap.height, 'blank_tile')
|
||||
placeTiles(props.tileMap, props.tileMapLayer, tileArray)
|
||||
createCommandUpdate(0, 0, 'blank_tile', 'clear')
|
||||
finalizeCommand()
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
if (!mapEditor.currentMap.value) return
|
||||
const mapState = mapEditor.currentMap.value
|
||||
|
||||
placeTiles(props.tileMap, props.tileMapLayer, mapState.tiles)
|
||||
})
|
||||
</script>
|
||||
@ -1,201 +0,0 @@
|
||||
<template>
|
||||
<PlacedMapObject
|
||||
v-if="mapEditor.tool.value === 'pencil' && mapEditor.drawMode.value === 'map_object' && mapEditor.isPlacedMapObjectPreviewEnabled.value && mapEditor.selectedMapObject.value && previewPlacedMapObject"
|
||||
:tileMap
|
||||
:tileMapLayer
|
||||
:key="previewPlacedMapObject?.id"
|
||||
:placedMapObject="previewPlacedMapObject as PlacedMapObjectT"
|
||||
/>
|
||||
<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 :tileMapLayer :placedMapObject @pointerdown="clickPlacedMapObject(placedMapObject)" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { MapObject, Map as MapT, PlacedMapObject as PlacedMapObjectT } from '@/application/types'
|
||||
import { uuidv4 } from '@/application/utilities'
|
||||
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 { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
|
||||
import Tilemap = Phaser.Tilemaps.Tilemap
|
||||
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
|
||||
|
||||
const scene = useScene()
|
||||
const mapEditor = useMapEditorComposable()
|
||||
const map = computed(() => mapEditor.currentMap.value!)
|
||||
|
||||
const emit = defineEmits<{ (e: 'update', map: MapT): void; (e: 'updateAndCommit', map: MapT): void; (e: 'pauseObjectTracking'): void; (e: 'resumeObjectTracking'): void }>()
|
||||
|
||||
defineExpose({ handlePointer })
|
||||
|
||||
const props = defineProps<{
|
||||
tileMap: Tilemap
|
||||
tileMapLayer: TilemapLayer
|
||||
}>()
|
||||
|
||||
const previewPosition = ref({ x: 0, y: 0 })
|
||||
const previewPlacedMapObject = computed(() => ({
|
||||
id: mapEditor.selectedMapObject.value!.id,
|
||||
mapObject: mapEditor.selectedMapObject.value!.id,
|
||||
isRotated: false,
|
||||
positionX: previewPosition.value.x,
|
||||
positionY: previewPosition.value.y
|
||||
}))
|
||||
|
||||
function updatePreviewPosition(pointer: Phaser.Input.Pointer) {
|
||||
const tile = getTile(props.tileMap, pointer.worldX, pointer.worldY)
|
||||
if (!tile || (previewPosition.value.x === tile.x && previewPosition.value.y === tile.y)) return
|
||||
|
||||
previewPosition.value = { x: tile.x, y: tile.y }
|
||||
}
|
||||
|
||||
function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
|
||||
emit('pauseObjectTracking')
|
||||
const tile = getTile(props.tileMap, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Check if object already exists on position
|
||||
const existingPlacedMapObject = findObjectByPointer(pointer, mapEditor.currentMap.value!)
|
||||
if (existingPlacedMapObject) return
|
||||
|
||||
if (!mapEditor.selectedMapObject.value) return
|
||||
|
||||
const newPlacedMapObject: PlacedMapObjectT = {
|
||||
id: uuidv4(),
|
||||
mapObject: mapEditor.selectedMapObject.value.id,
|
||||
isRotated: false,
|
||||
positionX: tile.x,
|
||||
positionY: tile.y
|
||||
}
|
||||
|
||||
// Add new object to mapObjects
|
||||
mapEditor.selectedPlacedObject.value = newPlacedMapObject
|
||||
map.placedMapObjects.push(newPlacedMapObject)
|
||||
|
||||
emit('update', map)
|
||||
}
|
||||
|
||||
function eraser(pointer: Phaser.Input.Pointer, map: MapT) {
|
||||
emit('pauseObjectTracking')
|
||||
|
||||
// Check if object already exists on position
|
||||
const existingPlacedMapObject = findObjectByPointer(pointer, map)
|
||||
if (!existingPlacedMapObject) return
|
||||
|
||||
// Remove existing object
|
||||
map.placedMapObjects = map.placedMapObjects.filter((placedMapObject) => placedMapObject.id !== existingPlacedMapObject.id)
|
||||
|
||||
emit('update', map)
|
||||
}
|
||||
|
||||
function findObjectByPointer(pointer: Phaser.Input.Pointer, map: MapT): PlacedMapObjectT | undefined {
|
||||
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 = findObjectByPointer(pointer, map)
|
||||
if (!existingPlacedMapObject) return
|
||||
|
||||
// Select the object
|
||||
mapEditor.setSelectedMapObject(existingPlacedMapObject.mapObject as MapObject)
|
||||
}
|
||||
|
||||
function moveMapObject(id: string, map: MapT) {
|
||||
mapEditor.movingPlacedObject.value = map.placedMapObjects.find((object) => object.id === id) as PlacedMapObjectT
|
||||
|
||||
emit('pauseObjectTracking')
|
||||
|
||||
function handlePointerMove(pointer: Phaser.Input.Pointer) {
|
||||
if (!mapEditor.movingPlacedObject.value) return
|
||||
const tile = getTile(props.tileMap, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
mapEditor.movingPlacedObject.value.positionX = tile.x
|
||||
mapEditor.movingPlacedObject.value.positionY = tile.y
|
||||
}
|
||||
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
|
||||
|
||||
function handlePointerUp(pointer: Phaser.Input.Pointer) {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
|
||||
|
||||
const tile = getTile(props.tileMap, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
map.placedMapObjects.map((placed) => {
|
||||
if (placed.id === id) {
|
||||
placed.positionX = tile.x
|
||||
placed.positionY = tile.y
|
||||
}
|
||||
})
|
||||
|
||||
mapEditor.movingPlacedObject.value = null
|
||||
|
||||
scene.input.off(Phaser.Input.Events.POINTER_UP, handlePointerUp)
|
||||
emit('resumeObjectTracking')
|
||||
emit('updateAndCommit', map)
|
||||
}
|
||||
}
|
||||
|
||||
function rotatePlacedMapObject(id: string, map: MapT) {
|
||||
map.placedMapObjects.map((placed) => {
|
||||
if (placed.id === id) {
|
||||
placed.isRotated = !placed.isRotated
|
||||
}
|
||||
})
|
||||
|
||||
emit('updateAndCommit', map)
|
||||
}
|
||||
|
||||
function deletePlacedMapObject(id: string, map: MapT) {
|
||||
map.placedMapObjects = map.placedMapObjects.filter((object) => object.id !== id)
|
||||
mapEditor.selectedPlacedObject.value = null
|
||||
emit('updateAndCommit', map)
|
||||
}
|
||||
|
||||
function clickPlacedMapObject(placedMapObject: PlacedMapObjectT) {
|
||||
mapEditor.selectedPlacedObject.value = placedMapObject
|
||||
|
||||
// If alt is pressed, select the object
|
||||
if (scene.input.activePointer.event.altKey) {
|
||||
mapEditor.setSelectedMapObject(placedMapObject.mapObject as MapObject)
|
||||
}
|
||||
}
|
||||
|
||||
function handlePointer(pointer: Phaser.Input.Pointer) {
|
||||
const map = mapEditor.currentMap.value
|
||||
if (!map) 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':
|
||||
pencil(pointer, map)
|
||||
break
|
||||
case 'eraser':
|
||||
eraser(pointer, map)
|
||||
break
|
||||
case 'object picker':
|
||||
objectPicker(pointer, map)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, updatePreviewPosition)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, updatePreviewPosition)
|
||||
})
|
||||
</script>
|
||||
@ -1,85 +0,0 @@
|
||||
<template>
|
||||
<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>
|
||||
<template #modalBody>
|
||||
<div class="my-4 mx-auto h-full">
|
||||
<div class="text-center mb-4 px-2 flex gap-2.5">
|
||||
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="fetchMaps">Refresh</button>
|
||||
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="createMapModal?.open">New</button>
|
||||
</div>
|
||||
<div class="overflow-y-auto h-[calc(100%-20px)]">
|
||||
<div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(map, index) in mapList" :key="map.id">
|
||||
<div class="absolute left-0 top-0 w-full h-px bg-gray-500" v-if="index === 0"></div>
|
||||
<div class="flex gap-3 items-center w-full" @click="() => loadMap(map.id)">
|
||||
<span>{{ map.name }}</span>
|
||||
<span class="ml-auto gap-1 flex">
|
||||
<button class="btn-red w-7 h-7 z-50 flex items-center justify-center" @click.stop="() => deleteMap(map.id)">x</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<CreateMap ref="createMapModal" @create="fetchMaps" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { SocketEvent } from '@/application/enums'
|
||||
import type { Map } from '@/application/types'
|
||||
import CreateMap from '@/components/gameMaster/mapEditor/partials/CreateMap.vue'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { socketManager } from '@/managers/SocketManager'
|
||||
import { MapStorage } from '@/storage/storages'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { onMounted, ref, useTemplateRef } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
|
||||
const mapEditor = useMapEditorComposable()
|
||||
const mapStorage = new MapStorage()
|
||||
const mapList = ref<Map[]>([])
|
||||
const modalRef = useTemplateRef('modalRef')
|
||||
const createMapModal = useTemplateRef('createMapModal')
|
||||
|
||||
defineEmits(['open-create-map'])
|
||||
|
||||
defineExpose({
|
||||
open: () => modalRef.value?.open()
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchMaps()
|
||||
})
|
||||
|
||||
async function fetchMaps() {
|
||||
mapList.value = await mapStorage.getAll()
|
||||
}
|
||||
|
||||
function loadMap(id: string) {
|
||||
socketManager.emit(SocketEvent.GM_MAP_REQUEST, { mapId: id }, (response: Map) => {
|
||||
mapEditor.loadMap(response)
|
||||
})
|
||||
modalRef.value?.close()
|
||||
}
|
||||
|
||||
async function deleteMap(id: string) {
|
||||
socketManager.emit(SocketEvent.GM_MAP_DELETE, { mapId: id }, async (response: boolean) => {
|
||||
if (!response) {
|
||||
gameStore.addNotification({
|
||||
title: 'Error',
|
||||
message: 'Failed to delete map.'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
await mapStorage.delete(id)
|
||||
await fetchMaps()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@ -1,101 +0,0 @@
|
||||
<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" v-if="mapEditor.tool.value === 'pencil' && mapEditor.drawMode.value === 'map_object'">
|
||||
<div class="flex flex-col gap-2.5 p-2.5">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex-grow">
|
||||
<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>
|
||||
<img src="/assets/icons/mapEditor/dropdown-chevron.svg" class="w-12 h-12 ml-2 cursor-pointer hover:opacity-80 -rotate-90" alt="Close" @click="mapEditor.setTool('move')" />
|
||||
</div>
|
||||
<div class="flex">
|
||||
<select class="input-field w-full" name="lists" v-model="mapEditor.drawMode.value" @change="(event: any) => mapEditor.setDrawMode(event.target.value)">
|
||||
<option value="tile">Tiles</option>
|
||||
<option value="map_object">Objects</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-full overflow-auto relative border-0 border-t border-solid border-gray-500 p-2.5">
|
||||
<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 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>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/application/config'
|
||||
import type { MapObject } from '@/application/types'
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { MapObjectStorage } from '@/storage/storages'
|
||||
import { liveQuery } from 'dexie'
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
|
||||
const mapObjectStorage = new MapObjectStorage()
|
||||
const mapEditor = useMapEditorComposable()
|
||||
const searchQuery = ref('')
|
||||
const selectedTags = ref<string[]>([])
|
||||
const mapObjectList = ref<MapObject[]>([])
|
||||
|
||||
const uniqueTags = computed(() => {
|
||||
const allTags = mapObjectList.value.flatMap((obj) => obj.tags || [])
|
||||
return Array.from(new Set(allTags))
|
||||
})
|
||||
|
||||
const toggleTag = (tag: string) => {
|
||||
if (selectedTags.value.includes(tag)) {
|
||||
selectedTags.value = selectedTags.value.filter((t) => t !== tag)
|
||||
} else {
|
||||
selectedTags.value.push(tag)
|
||||
}
|
||||
}
|
||||
|
||||
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(() => {
|
||||
subscription = liveQuery(() => mapObjectStorage.liveQuery()).subscribe({
|
||||
next: (result) => {
|
||||
mapObjectList.value = result
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Failed to fetch tiles:', error)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (!subscription) return
|
||||
subscription.unsubscribe()
|
||||
})
|
||||
</script>
|
||||
@ -1,98 +0,0 @@
|
||||
<template>
|
||||
<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>
|
||||
|
||||
<template #modalBody>
|
||||
<div class="m-4">
|
||||
<div class="space-x-2">
|
||||
<button class="btn-cyan py-1.5 px-4" type="button" @click.prevent="screen = 'settings'">Settings</button>
|
||||
<button class="btn-cyan py-1.5 px-4" type="button" @click.prevent="screen = 'effects'">Effects</button>
|
||||
</div>
|
||||
<form method="post" @submit.prevent="" class="inline" v-if="screen === 'settings'">
|
||||
<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" @input="updateValue" name="name" id="name" />
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="width">Width</label>
|
||||
<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" @input="updateValue" name="height" id="height" type="number" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="mr-4" for="pvp">PVP enabled</label>
|
||||
<input type="checkbox" v-model="pvp" @input="updateValue" class="input-field scale-125" name="pvp" id="pvp" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<form method="post" @submit.prevent="" class="inline" v-if="screen === 'effects'">
|
||||
<div v-for="(effect, index) in mapEffects" :key="effect.id" class="mb-2 flex items-center space-x-2 mt-4">
|
||||
<input class="input-field flex-grow" v-model="effect.effect" placeholder="Effect name" />
|
||||
<input class="input-field w-20" v-model.number="effect.strength" type="number" placeholder="Strength" />
|
||||
<button class="btn-red py-1 px-2" type="button" @click="removeEffect(index)">Delete</button>
|
||||
</div>
|
||||
<button class="btn-green py-1 px-2 mt-2" type="button" @click="addEffect">Add Effect</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { UUID } from '@/application/types'
|
||||
import { uuidv4 } from '@/application/utilities'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { onMounted, ref, useTemplateRef, watch } from 'vue'
|
||||
|
||||
const mapEditor = useMapEditorComposable()
|
||||
const screen = ref('settings')
|
||||
|
||||
const name = ref<string | undefined>('Map')
|
||||
const width = ref<number>(0)
|
||||
const height = ref<number>(0)
|
||||
const pvp = ref<boolean>(false)
|
||||
const mapEffects = ref(mapEditor.currentMap.value?.mapEffects || [])
|
||||
const modalRef = useTemplateRef('modalRef')
|
||||
|
||||
defineExpose({
|
||||
open: () => modalRef.value?.open()
|
||||
})
|
||||
|
||||
function updateValue(event: Event) {
|
||||
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(
|
||||
() => mapEditor.currentMap.value,
|
||||
(map) => {
|
||||
if (!map) return
|
||||
name.value = map.name
|
||||
width.value = map.width
|
||||
height.value = map.height
|
||||
pvp.value = map.pvp
|
||||
mapEffects.value = map.mapEffects
|
||||
}
|
||||
)
|
||||
|
||||
const addEffect = () => {
|
||||
mapEffects.value.push({
|
||||
id: uuidv4(),
|
||||
effect: '',
|
||||
strength: 1
|
||||
})
|
||||
mapEditor.updateProperty('mapEffects', mapEffects.value)
|
||||
}
|
||||
|
||||
const removeEffect = (index: number) => {
|
||||
mapEffects.value.splice(index, 1)
|
||||
mapEditor.updateProperty('mapEffects', mapEffects.value)
|
||||
}
|
||||
</script>
|
||||
@ -1,115 +0,0 @@
|
||||
<template>
|
||||
<div class="flex flex-col items-center px-5 py-1 fixed bottom-20 left-0 z-20">
|
||||
<div class="flex h-10 gap-2">
|
||||
<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 { SocketEvent } from '@/application/enums'
|
||||
import type { MapObject, Map as MapT, PlacedMapObject } from '@/application/types'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { socketManager } from '@/managers/SocketManager'
|
||||
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, props.map)
|
||||
}
|
||||
|
||||
const handleRotate = () => {
|
||||
emit('rotate', props.placedMapObject.id, props.map)
|
||||
}
|
||||
|
||||
const handleDelete = () => {
|
||||
emit('delete', props.placedMapObject.id, props.map)
|
||||
}
|
||||
|
||||
async function handleUpdate() {
|
||||
if (!mapObject.value) return
|
||||
|
||||
socketManager.emit(
|
||||
SocketEvent.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>
|
||||
@ -1,173 +0,0 @@
|
||||
<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" v-if="(mapEditor.tool.value === 'pencil' && mapEditor.drawMode.value === 'tile') || mapEditor.tool.value === 'paint'">
|
||||
<div class="flex flex-col gap-2.5 p-2.5">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex-grow">
|
||||
<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>
|
||||
<img src="/assets/icons/mapEditor/dropdown-chevron.svg" class="w-12 h-12 ml-2 cursor-pointer hover:opacity-80 -rotate-90" alt="Close" @click="mapEditor.setTool('move')" />
|
||||
</div>
|
||||
<div class="flex">
|
||||
<select class="input-field w-full" name="lists" v-model="mapEditor.drawMode.value" @change="(event: any) => mapEditor.setDrawMode(event.target.value)">
|
||||
<option value="tile">Tiles</option>
|
||||
<option value="map_object">Objects</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-full overflow-auto relative border-0 border-t border-solid border-gray-500 p-2.5">
|
||||
<div class="h-full" v-if="!selectedGroup">
|
||||
<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 v-else class="h-full overflow-auto">
|
||||
<div class="p-4">
|
||||
<div class="text-center mb-8">
|
||||
<button @click="closeGroup" class="hover:text-white">Back to all tiles</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-4 gap-2 justify-items-center">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<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/${selectedGroup.parent.id}.png`"
|
||||
:alt="selectedGroup.parent.name"
|
||||
@click="selectTile(selectedGroup.parent.id)"
|
||||
: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">
|
||||
<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/${childTile.id}.png`"
|
||||
:alt="childTile.name"
|
||||
@click="selectTile(childTile.id)"
|
||||
: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>
|
||||
</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>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/application/config'
|
||||
import type { Tile } from '@/application/types'
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { useTileProcessingComposable } from '@/composables/useTileProcessingComposable'
|
||||
import { TileStorage } from '@/storage/storages'
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
|
||||
const tileStorage = new TileStorage()
|
||||
const mapEditor = useMapEditorComposable()
|
||||
const tileProcessor = useTileProcessingComposable()
|
||||
const searchQuery = ref('')
|
||||
const selectedTags = ref<string[]>([])
|
||||
const tileCategories = ref<Map<string, string>>(new Map())
|
||||
const selectedGroup = ref<{ parent: Tile; children: Tile[] } | null>(null)
|
||||
const tiles = ref<Tile[]>([])
|
||||
|
||||
const uniqueTags = computed(() => {
|
||||
const allTags = tiles.value.flatMap((tile) => tile.tags || [])
|
||||
return Array.from(new Set(allTags))
|
||||
})
|
||||
|
||||
const groupedTiles = computed(() => {
|
||||
const groups: { parent: Tile; children: Tile[] }[] = []
|
||||
const filteredTiles = tiles.value.filter((tile) => {
|
||||
const matchesSearch = !searchQuery.value || tile.name.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||
const matchesTags = selectedTags.value.length === 0 || (tile.tags && selectedTags.value.some((tag) => tile.tags.includes(tag)))
|
||||
return matchesSearch && matchesTags
|
||||
})
|
||||
|
||||
filteredTiles.forEach((tile) => {
|
||||
const parentGroup = groups.find((group) => tileProcessor.areTilesRelated(group.parent, tile))
|
||||
if (parentGroup && parentGroup.parent.id !== tile.id) {
|
||||
parentGroup.children.push(tile)
|
||||
} else {
|
||||
groups.push({ parent: tile, children: [] })
|
||||
}
|
||||
})
|
||||
|
||||
return groups
|
||||
})
|
||||
|
||||
const toggleTag = (tag: string) => {
|
||||
if (selectedTags.value.includes(tag)) {
|
||||
selectedTags.value = selectedTags.value.filter((t) => t !== tag)
|
||||
} else {
|
||||
selectedTags.value.push(tag)
|
||||
}
|
||||
}
|
||||
|
||||
function getTileCategory(tile: Tile): string {
|
||||
return tileCategories.value.get(tile.id) || ''
|
||||
}
|
||||
|
||||
function openGroup(group: { parent: Tile; children: Tile[] }) {
|
||||
selectedGroup.value = group
|
||||
}
|
||||
|
||||
function closeGroup() {
|
||||
selectedGroup.value = null
|
||||
}
|
||||
|
||||
function selectTile(tile: string) {
|
||||
mapEditor.setSelectedTile(tile)
|
||||
}
|
||||
|
||||
function isActiveTile(tile: Tile): boolean {
|
||||
return mapEditor.selectedTile.value === tile.id
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
tiles.value = await tileStorage.getAll()
|
||||
const initialBatchSize = 20
|
||||
const initialTiles = tiles.value.slice(0, initialBatchSize)
|
||||
initialTiles.forEach((tile) => tileProcessor.processTile(tile))
|
||||
|
||||
// Process remaining tiles in background
|
||||
setTimeout(() => {
|
||||
tiles.value.slice(initialBatchSize).forEach((tile) => tileProcessor.processTile(tile))
|
||||
}, 1000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
tileProcessor.cleanup()
|
||||
})
|
||||
</script>
|
||||
@ -1,207 +0,0 @@
|
||||
<template>
|
||||
<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 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>
|
||||
</button>
|
||||
|
||||
<div class="w-px bg-cyan"></div>
|
||||
|
||||
<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 === 'pencil' }" @click="handleClick('pencil')">
|
||||
<img class="invert w-5 h-5" src="/assets/icons/mapEditor/pencil.svg" alt="Pencil" /> <span class="h-5" :class="{ 'ml-2.5': mapEditor.tool.value !== 'pencil' }">(P)</span>
|
||||
<div class="select" v-if="mapEditor.tool.value === 'pencil'">
|
||||
<div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectPencilOpen }">
|
||||
{{ mapEditor.drawMode.value.replace('_', ' ') }}
|
||||
<img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/mapEditor/chevron.svg" alt="" />
|
||||
</div>
|
||||
<div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray rounded min-w-28 border border-gray-500 border-solid text-left" v-show="selectPencilOpen && mapEditor.tool.value === 'pencil'">
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="() => handleModeClick('tile', 'pencil')">
|
||||
Tile
|
||||
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
|
||||
</span>
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="() => handleModeClick('map_object', 'pencil')">
|
||||
Map object
|
||||
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
|
||||
</span>
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="() => handleModeClick('teleport', 'pencil')">
|
||||
Teleport
|
||||
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
|
||||
</span>
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="() => handleModeClick('blocking tile', 'pencil')">Blocking tile</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="w-px bg-cyan"></div>
|
||||
|
||||
<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 === 'eraser' }" @click="handleClick('eraser')">
|
||||
<img class="invert w-5 h-5" src="/assets/icons/mapEditor/eraser.svg" alt="Eraser" /> <span class="h-5" :class="{ 'ml-2.5': mapEditor.tool.value !== 'eraser' }">(E)</span>
|
||||
<div class="select" v-if="mapEditor.tool.value === 'eraser'">
|
||||
<div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectEraserOpen }">
|
||||
{{ mapEditor.drawMode.value.replace('_', ' ') }}
|
||||
<img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/mapEditor/chevron.svg" alt="" />
|
||||
</div>
|
||||
<div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray rounded min-w-28 border border-gray-500 border-solid text-left" v-show="selectEraserOpen">
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="() => handleModeClick('tile', 'eraser')">
|
||||
Tile
|
||||
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
|
||||
</span>
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="() => handleModeClick('map_object', 'eraser')">
|
||||
Map object
|
||||
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
|
||||
</span>
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="() => handleModeClick('teleport', 'eraser')">
|
||||
Teleport
|
||||
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
|
||||
</span>
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="() => handleModeClick('blocking tile', 'eraser')">Blocking tile</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="w-px bg-cyan"></div>
|
||||
|
||||
<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 === 'paint' }" @click="handleClick('paint')">
|
||||
<img class="invert w-5 h-5" src="/assets/icons/mapEditor/paint.svg" alt="Paint bucket" /> <span class="h-5" :class="{ 'ml-2.5': mapEditor.tool.value !== 'paint' }">(B)</span>
|
||||
</button>
|
||||
|
||||
<div class="w-px bg-cyan"></div>
|
||||
|
||||
<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/gear.svg" alt="Map settings" /> <span class="h-5 ml-2.5">(Z)</span></button>
|
||||
|
||||
<div class="w-px bg-cyan"></div>
|
||||
|
||||
<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>
|
||||
</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="() => mapEditor.toggleActive()">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="toggleContinuousDrawing" v-model="isContinuousDrawingEnabled" 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>
|
||||
<div class="m-4 flex items-center space-x-2">
|
||||
<input id="show-placed-map-object-preview" @change="mapEditor.togglePlacedMapObjectPreview()" v-model="isShowPlacedMapObjectPreviewEnabled" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" />
|
||||
<label for="show-placed-map-object-preview" class="text-sm font-medium text-gray-200 cursor-pointer"> Show placed map object preview </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 { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
|
||||
const mapEditor = useMapEditorComposable()
|
||||
|
||||
const emit = defineEmits(['save', 'clear', 'open-maps', 'open-settings', 'open-teleport'])
|
||||
|
||||
// States
|
||||
const toolbar = ref(null)
|
||||
const isMapEditorSettingsModalOpen = ref(false)
|
||||
const selectPencilOpen = ref(false)
|
||||
const selectEraserOpen = ref(false)
|
||||
const isContinuousDrawingEnabled = ref<Boolean>(false)
|
||||
const isShowPlacedMapObjectPreviewEnabled = ref<Boolean>(mapEditor.isPlacedMapObjectPreviewEnabled.value)
|
||||
const listOpen = computed(() => (mapEditor.tool.value === 'pencil' && (mapEditor.drawMode.value === 'tile' || mapEditor.drawMode.value === 'map_object')) || mapEditor.tool.value === 'paint')
|
||||
|
||||
// drawMode
|
||||
function setDrawMode(value: string) {
|
||||
mapEditor.setDrawMode(value)
|
||||
selectPencilOpen.value = false
|
||||
selectEraserOpen.value = false
|
||||
}
|
||||
|
||||
function setPencilMode() {
|
||||
mapEditor.setTool('pencil')
|
||||
selectPencilOpen.value = false
|
||||
}
|
||||
|
||||
// drawMode
|
||||
function setEraserMode() {
|
||||
mapEditor.setTool('eraser')
|
||||
selectEraserOpen.value = false
|
||||
}
|
||||
|
||||
function toggleContinuousDrawing() {
|
||||
mapEditor.setInputMode(isContinuousDrawingEnabled.value ? 'hold' : 'tap')
|
||||
}
|
||||
|
||||
function handleModeClick(mode: string, type: 'pencil' | 'eraser') {
|
||||
setDrawMode(mode)
|
||||
type === 'pencil' ? setPencilMode() : setEraserMode()
|
||||
}
|
||||
|
||||
function handleClick(tool: string) {
|
||||
mapEditor.setTool(tool)
|
||||
if (tool === 'paint') mapEditor.setDrawMode('tile')
|
||||
selectPencilOpen.value = tool === 'pencil' ? !selectPencilOpen.value : false
|
||||
selectEraserOpen.value = tool === 'eraser' ? !selectEraserOpen.value : false
|
||||
if (mapEditor.drawMode.value === 'teleport') emit('open-teleport')
|
||||
}
|
||||
|
||||
function cycleToolMode(tool: 'pencil' | 'eraser') {
|
||||
const modes = ['tile', 'map_object', 'teleport', 'blocking tile']
|
||||
const currentIndex = modes.indexOf(mapEditor.drawMode.value)
|
||||
const nextIndex = (currentIndex + 1) % modes.length
|
||||
const nextMode = modes[nextIndex]
|
||||
|
||||
setDrawMode(nextMode)
|
||||
}
|
||||
|
||||
function initKeyShortcuts(event: KeyboardEvent) {
|
||||
// Check if map is set
|
||||
if (!mapEditor.currentMap.value) return
|
||||
|
||||
// prevent if focused on inputs
|
||||
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',
|
||||
s: 'mapEditorSettings'
|
||||
}
|
||||
|
||||
if (keyActions.hasOwnProperty(event.key)) {
|
||||
const tool = keyActions[event.key]
|
||||
if ((tool === 'pencil' || tool === 'eraser') && mapEditor.tool.value === tool) {
|
||||
cycleToolMode(tool)
|
||||
} else {
|
||||
handleClick(tool)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleClickOutside() {
|
||||
selectPencilOpen.value = false
|
||||
selectEraserOpen.value = false
|
||||
}
|
||||
onClickOutside(toolbar, handleClickOutside)
|
||||
|
||||
onMounted(() => {
|
||||
addEventListener('keydown', initKeyShortcuts)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
removeEventListener('keydown', initKeyShortcuts)
|
||||
})
|
||||
</script>
|
||||
73
src/components/gameMaster/zoneEditor/ZoneEditor.vue
Normal file
73
src/components/gameMaster/zoneEditor/ZoneEditor.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<ZoneTiles @tileMap:create="tileMap = $event" />
|
||||
<ZoneObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
|
||||
<ZoneEventTiles v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
|
||||
|
||||
<Toolbar @save="save" @clear="clear" />
|
||||
|
||||
<ZoneList />
|
||||
<TileList />
|
||||
<ObjectList />
|
||||
|
||||
<ZoneSettings />
|
||||
<TeleportModal />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type Zone } from '@/application/types'
|
||||
import ObjectList from '@/components/gameMaster/zoneEditor/partials/ObjectList.vue'
|
||||
import TeleportModal from '@/components/gameMaster/zoneEditor/partials/TeleportModal.vue'
|
||||
import TileList from '@/components/gameMaster/zoneEditor/partials/TileList.vue'
|
||||
// Components
|
||||
import Toolbar from '@/components/gameMaster/zoneEditor/partials/Toolbar.vue'
|
||||
import ZoneList from '@/components/gameMaster/zoneEditor/partials/ZoneList.vue'
|
||||
import ZoneSettings from '@/components/gameMaster/zoneEditor/partials/ZoneSettings.vue'
|
||||
import ZoneEventTiles from '@/components/gameMaster/zoneEditor/zonePartials/ZoneEventTiles.vue'
|
||||
import ZoneObjects from '@/components/gameMaster/zoneEditor/zonePartials/ZoneObjects.vue'
|
||||
import ZoneTiles from '@/components/gameMaster/zoneEditor/zonePartials/ZoneTiles.vue'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { onUnmounted, ref } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
|
||||
|
||||
function clear() {
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
// Clear objects, event tiles and tiles
|
||||
zoneEditorStore.zone.zoneObjects = []
|
||||
zoneEditorStore.zone.zoneEventTiles = []
|
||||
zoneEditorStore.triggerClearTiles()
|
||||
}
|
||||
|
||||
function save() {
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
const data = {
|
||||
zoneId: zoneEditorStore.zone.id,
|
||||
name: zoneEditorStore.zoneSettings.name,
|
||||
width: zoneEditorStore.zoneSettings.width,
|
||||
height: zoneEditorStore.zoneSettings.height,
|
||||
tiles: zoneEditorStore.zone.tiles,
|
||||
pvp: zoneEditorStore.zone.pvp,
|
||||
zoneEffects: zoneEditorStore.zone.zoneEffects.map(({ id, zoneId, effect, strength }) => ({ id, zoneId, effect, strength })),
|
||||
zoneEventTiles: zoneEditorStore.zone.zoneEventTiles.map(({ id, zoneId, type, positionX, positionY, teleport }) => ({ id, zoneId, type, positionX, positionY, teleport })),
|
||||
zoneObjects: zoneEditorStore.zone.zoneObjects.map(({ id, zoneId, objectId, depth, isRotated, positionX, positionY }) => ({ id, zoneId, objectId, depth, isRotated, positionX, positionY }))
|
||||
}
|
||||
|
||||
if (zoneEditorStore.isSettingsModalShown) {
|
||||
zoneEditorStore.toggleSettingsModal()
|
||||
}
|
||||
|
||||
gameStore.connection?.emit('gm:zone_editor:zone:update', data, (response: Zone) => {
|
||||
zoneEditorStore.setZone(response)
|
||||
})
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
zoneEditorStore.reset()
|
||||
})
|
||||
</script>
|
||||
@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<Modal ref="modalRef" :modal-width="300" :modal-height="420" :is-resizable="false" bg-style="none">
|
||||
<Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleCreateZoneModal()" :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>
|
||||
<h3 class="m-0 font-medium shrink-0 text-white">Create new zone</h3>
|
||||
</template>
|
||||
|
||||
<template #modalBody>
|
||||
<div class="m-4">
|
||||
<form method="post" @submit.prevent="submit" class="inline">
|
||||
@ -13,15 +14,15 @@
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="name">Width</label>
|
||||
<input class="input-field max-w-64" v-model="width" name="width" id="width" type="number" />
|
||||
<input class="input-field max-w-64" v-model="width" name="name" id="name" type="number" />
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="name">Height</label>
|
||||
<input class="input-field max-w-64" v-model="height" name="height" id="height" type="number" />
|
||||
<input class="input-field max-w-64" v-model="height" name="name" id="name" type="number" />
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<label for="name">PVP enabled</label>
|
||||
<select class="input-field" v-model="pvp" name="pvp" id="pvp">
|
||||
<select class="input-field" name="pvp" id="pvp">
|
||||
<option :value="false">No</option>
|
||||
<option :value="true">Yes</option>
|
||||
</select>
|
||||
@ -35,48 +36,23 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { SocketEvent } from '@/application/enums'
|
||||
import type { Map } from '@/application/types'
|
||||
import type { Zone } from '@/application/types'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { socketManager } from '@/managers/SocketManager'
|
||||
import { MapStorage } from '@/storage/storages'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { ref, useTemplateRef } from 'vue'
|
||||
|
||||
const emit = defineEmits(['create'])
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const mapStorage = new MapStorage()
|
||||
const modalRef = useTemplateRef('modalRef')
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
const name = ref('')
|
||||
const width = ref(0)
|
||||
const height = ref(0)
|
||||
const pvp = ref(false)
|
||||
|
||||
defineExpose({ open: () => modalRef.value?.open() })
|
||||
|
||||
async function submit() {
|
||||
socketManager.emit(SocketEvent.GM_MAP_CREATE, { name: name.value, width: width.value, height: height.value }, async (response: Map | false) => {
|
||||
if (!response) {
|
||||
return
|
||||
}
|
||||
|
||||
// Reset form
|
||||
name.value = ''
|
||||
width.value = 0
|
||||
height.value = 0
|
||||
pvp.value = false
|
||||
|
||||
// Add map to storage
|
||||
await mapStorage.add(response)
|
||||
|
||||
// Let list know to fetch new maps
|
||||
emit('create')
|
||||
function submit() {
|
||||
gameStore.connection.emit('gm:zone_editor:zone:create', { name: name.value, width: width.value, height: height.value }, (response: Zone[]) => {
|
||||
zoneEditorStore.setZoneList(response)
|
||||
})
|
||||
|
||||
// Close modal
|
||||
modalRef.value?.close()
|
||||
zoneEditorStore.toggleCreateZoneModal()
|
||||
}
|
||||
</script>
|
||||
84
src/components/gameMaster/zoneEditor/partials/ObjectList.vue
Normal file
84
src/components/gameMaster/zoneEditor/partials/ObjectList.vue
Normal file
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<Modal :isModalOpen="zoneEditorStore.isObjectListModalShown" :modal-width="645" :modal-height="260" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)" :bg-style="'none'">
|
||||
<template #modalHeader>
|
||||
<h3 class="text-lg text-white">Objects</h3>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
<div class="flex pt-4 pl-4">
|
||||
<div class="w-full flex gap-1.5 flex-row">
|
||||
<div>
|
||||
<label class="mb-1.5 font-titles hidden" for="search">Search...</label>
|
||||
<input @mousedown.stop class="input-field" type="text" name="search" placeholder="Search" v-model="searchQuery" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col h-full p-4">
|
||||
<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 }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="h-full overflow-auto">
|
||||
<div class="flex justify-between flex-wrap gap-2.5 items-center">
|
||||
<div v-for="(object, index) in filteredObjects" :key="index" class="max-w-1/4 inline-block">
|
||||
<img
|
||||
class="border-2 border-solid max-w-full"
|
||||
:src="`${config.server_endpoint}/assets/objects/${object.id}.png`"
|
||||
alt="Object"
|
||||
@click="zoneEditorStore.setSelectedObject(object)"
|
||||
:class="{
|
||||
'cursor-pointer transition-all duration-300': true,
|
||||
'border-cyan shadow-lg scale-105': zoneEditorStore.selectedObject?.id === object.id,
|
||||
'border-transparent hover:border-gray-300': zoneEditorStore.selectedObject?.id !== object.id
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/application/config'
|
||||
import type { Object, ZoneObject } from '@/application/types'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const isModalOpen = ref(false)
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const searchQuery = ref('')
|
||||
const selectedTags = ref<string[]>([])
|
||||
|
||||
const uniqueTags = computed(() => {
|
||||
const allTags = zoneEditorStore.objectList.flatMap((obj) => obj.tags || [])
|
||||
return Array.from(new Set(allTags))
|
||||
})
|
||||
|
||||
const filteredObjects = computed(() => {
|
||||
return zoneEditorStore.objectList.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)
|
||||
} else {
|
||||
selectedTags.value.push(tag)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
isModalOpen.value = true
|
||||
gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
|
||||
zoneEditorStore.setObjectList(response)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div class="flex flex-col items-center py-5 px-3 fixed bottom-14 right-0">
|
||||
<div class="self-end mt-2 flex gap-2">
|
||||
<button @mousedown.stop @click="handleDelete" class="btn-red py-1.5 px-4">
|
||||
<img src="/assets/icons/trashcan.svg" class="w-4 h-4" 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>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ZoneObject } from '@/application/types'
|
||||
|
||||
const props = defineProps<{
|
||||
zoneObject: ZoneObject
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['move', 'rotate', 'delete'])
|
||||
|
||||
const handleMove = () => {
|
||||
emit('move', props.zoneObject.id)
|
||||
}
|
||||
|
||||
const handleRotate = () => {
|
||||
emit('rotate', props.zoneObject.id)
|
||||
}
|
||||
|
||||
const handleDelete = () => {
|
||||
emit('delete', props.zoneObject.id)
|
||||
}
|
||||
</script>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<Modal v-if="showTeleportModal" ref="modalRef" @modal:close="() => mapEditor.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false" bg-style="none">
|
||||
<Modal :is-modal-open="showTeleportModal" @modal:close="() => zoneEditorStore.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>
|
||||
@ -25,10 +25,10 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<label for="toMap">Map to teleport to</label>
|
||||
<select v-model="toMap" class="input-field" name="toMap" id="toMap">
|
||||
<option :value="null">Select map</option>
|
||||
<option v-for="map in mapList" :key="map.id" :value="map.id">{{ map.name }}</option>
|
||||
<label for="toZoneId">Zone to teleport to</label>
|
||||
<select v-model="toZoneId" class="input-field" name="toZoneId" id="toZoneId">
|
||||
<option :value="0">Select zone</option>
|
||||
<option v-for="zone in zoneEditorStore.zoneList" :key="zone.id" :value="zone.id">{{ zone.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
@ -39,50 +39,44 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Map } from '@/application/types'
|
||||
import type { Zone } from '@/application/types'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { MapStorage } from '@/storage/storages'
|
||||
import { computed, onMounted, ref, useTemplateRef, watch } from 'vue'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
|
||||
const showTeleportModal = computed(() => mapEditor.tool.value === 'pencil' && mapEditor.drawMode.value === 'teleport')
|
||||
const mapStorage = new MapStorage()
|
||||
const mapEditor = useMapEditorComposable()
|
||||
const modalRef = useTemplateRef('modalRef')
|
||||
const mapList = ref<Map[]>([])
|
||||
const showTeleportModal = computed(() => zoneEditorStore.tool === 'pencil' && zoneEditorStore.drawMode === 'teleport')
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const gameStore = useGameStore()
|
||||
|
||||
defineExpose({
|
||||
open: () => modalRef.value?.open()
|
||||
})
|
||||
onMounted(fetchZones)
|
||||
|
||||
const { toPositionX, toPositionY, toRotation, toMap } = useRefTeleportSettings()
|
||||
function fetchZones() {
|
||||
gameStore.connection?.emit('gm:zone_editor:zone:list', {}, (response: Zone[]) => {
|
||||
zoneEditorStore.setZoneList(response)
|
||||
})
|
||||
}
|
||||
|
||||
const { toPositionX, toPositionY, toRotation, toZoneId } = useRefTeleportSettings()
|
||||
|
||||
function useRefTeleportSettings() {
|
||||
const settings = mapEditor.teleportSettings.value
|
||||
const settings = zoneEditorStore.teleportSettings
|
||||
return {
|
||||
toPositionX: ref(settings.toPositionX),
|
||||
toPositionY: ref(settings.toPositionY),
|
||||
toRotation: ref(settings.toRotation),
|
||||
toMap: ref(settings.toMap)
|
||||
toZoneId: ref(settings.toZoneId)
|
||||
}
|
||||
}
|
||||
|
||||
watch([toPositionX, toPositionY, toRotation, toMap], updateTeleportSettings)
|
||||
watch([toPositionX, toPositionY, toRotation, toZoneId], updateTeleportSettings)
|
||||
|
||||
function updateTeleportSettings() {
|
||||
mapEditor.setTeleportSettings({
|
||||
zoneEditorStore.setTeleportSettings({
|
||||
toPositionX: toPositionX.value,
|
||||
toPositionY: toPositionY.value,
|
||||
toRotation: toRotation.value,
|
||||
toMap: toMap.value
|
||||
toZoneId: toZoneId.value
|
||||
})
|
||||
}
|
||||
|
||||
async function fetchMaps() {
|
||||
mapList.value = await mapStorage.getAll()
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchMaps()
|
||||
})
|
||||
</script>
|
||||
236
src/components/gameMaster/zoneEditor/partials/TileList.vue
Normal file
236
src/components/gameMaster/zoneEditor/partials/TileList.vue
Normal file
@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<Modal :isModalOpen="zoneEditorStore.isTileListModalShown" :modal-width="645" :modal-height="600" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)" :bg-style="'none'">
|
||||
<template #modalHeader>
|
||||
<h3 class="text-lg text-white">Tiles</h3>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
<div class="h-full overflow-auto" v-if="!selectedGroup">
|
||||
<div class="flex pt-4 pl-4">
|
||||
<div class="w-full flex gap-1.5 flex-row">
|
||||
<div>
|
||||
<label class="mb-1.5 font-titles hidden" for="search">Search...</label>
|
||||
<input @mousedown.stop class="input-field" type="text" name="search" placeholder="Search" v-model="searchQuery" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col h-full p-4">
|
||||
<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 }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="h-[calc(100%_-_60px)] flex-grow overflow-y-auto">
|
||||
<div class="grid grid-cols-8 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 cursor-pointer transition-all duration-300"
|
||||
:src="`${config.server_endpoint}/assets/tiles/${group.parent.id}.png`"
|
||||
:alt="group.parent.name"
|
||||
@click="openGroup(group)"
|
||||
@load="() => processTile(group.parent)"
|
||||
:class="{
|
||||
'border-cyan shadow-lg scale-105': 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 class="p-4">
|
||||
<button @click="closeGroup" class="btn-cyan mb-4">Back to All Tiles</button>
|
||||
<h4 class="text-lg mb-4">{{ selectedGroup.parent.name }} Group</h4>
|
||||
<div class="grid grid-cols-8 gap-2 justify-items-center">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<img
|
||||
class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
|
||||
:src="`${config.server_endpoint}/assets/tiles/${selectedGroup.parent.id}.png`"
|
||||
:alt="selectedGroup.parent.name"
|
||||
@click="selectTile(selectedGroup.parent.id)"
|
||||
:class="{
|
||||
'border-cyan shadow-lg scale-105': 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">
|
||||
<img
|
||||
class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
|
||||
:src="`${config.server_endpoint}/assets/tiles/${childTile.id}.png`"
|
||||
:alt="childTile.name"
|
||||
@click="selectTile(childTile.id)"
|
||||
:class="{
|
||||
'border-cyan shadow-lg scale-105': isActiveTile(childTile),
|
||||
'border-transparent hover:border-gray-300': !isActiveTile(childTile)
|
||||
}"
|
||||
/>
|
||||
<span class="text-xs mt-1">{{ getTileCategory(childTile) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/application/config'
|
||||
import type { Tile } from '@/application/types'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const isModalOpen = ref(false)
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const searchQuery = ref('')
|
||||
const selectedTags = ref<string[]>([])
|
||||
const tileCategories = ref<Map<string, string>>(new Map())
|
||||
const selectedGroup = ref<{ parent: Tile; children: Tile[] } | null>(null)
|
||||
|
||||
const uniqueTags = computed(() => {
|
||||
const allTags = zoneEditorStore.tileList.flatMap((tile) => tile.tags || [])
|
||||
return Array.from(new Set(allTags))
|
||||
})
|
||||
|
||||
const groupedTiles = computed(() => {
|
||||
const groups: { parent: Tile; children: Tile[] }[] = []
|
||||
const filteredTiles = zoneEditorStore.tileList.filter((tile) => {
|
||||
const matchesSearch = !searchQuery.value || tile.name.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||
const matchesTags = selectedTags.value.length === 0 || (tile.tags && selectedTags.value.some((tag) => tile.tags.includes(tag)))
|
||||
return matchesSearch && matchesTags
|
||||
})
|
||||
|
||||
filteredTiles.forEach((tile) => {
|
||||
const parentGroup = groups.find((group) => areTilesRelated(group.parent, tile))
|
||||
if (parentGroup && parentGroup.parent.id !== tile.id) {
|
||||
parentGroup.children.push(tile)
|
||||
} else {
|
||||
groups.push({ parent: tile, children: [] })
|
||||
}
|
||||
})
|
||||
|
||||
return groups
|
||||
})
|
||||
|
||||
const tileColorData = ref<Map<string, { r: number; g: number; b: number }>>(new Map())
|
||||
const tileEdgeData = ref<Map<string, number>>(new Map())
|
||||
|
||||
function areTilesRelated(tile1: Tile, tile2: Tile): boolean {
|
||||
const colorSimilarityThreshold = 30 // Adjust this value as needed
|
||||
const edgeComplexitySimilarityThreshold = 20 // Adjust this value as needed
|
||||
|
||||
const color1 = tileColorData.value.get(tile1.id)
|
||||
const color2 = tileColorData.value.get(tile2.id)
|
||||
const edge1 = tileEdgeData.value.get(tile1.id)
|
||||
const edge2 = tileEdgeData.value.get(tile2.id)
|
||||
|
||||
if (!color1 || !color2 || edge1 === undefined || edge2 === undefined) {
|
||||
return false
|
||||
}
|
||||
|
||||
const colorDifference = Math.sqrt(Math.pow(color1.r - color2.r, 2) + Math.pow(color1.g - color2.g, 2) + Math.pow(color1.b - color2.b, 2))
|
||||
|
||||
const edgeComplexityDifference = Math.abs(edge1 - edge2)
|
||||
|
||||
const namePrefix1 = tile1.name.split('_')[0]
|
||||
const namePrefix2 = tile2.name.split('_')[0]
|
||||
|
||||
return colorDifference <= colorSimilarityThreshold && edgeComplexityDifference <= edgeComplexitySimilarityThreshold && namePrefix1 === namePrefix2
|
||||
}
|
||||
|
||||
const toggleTag = (tag: string) => {
|
||||
if (selectedTags.value.includes(tag)) {
|
||||
selectedTags.value = selectedTags.value.filter((t) => t !== tag)
|
||||
} else {
|
||||
selectedTags.value.push(tag)
|
||||
}
|
||||
}
|
||||
|
||||
function processTile(tile: Tile) {
|
||||
const img = new Image()
|
||||
img.crossOrigin = 'Anonymous'
|
||||
img.onload = () => {
|
||||
const canvas = document.createElement('canvas')
|
||||
const ctx = canvas.getContext('2d')
|
||||
canvas.width = img.width
|
||||
canvas.height = img.height
|
||||
ctx!.drawImage(img, 0, 0, img.width, img.height)
|
||||
|
||||
const imageData = ctx!.getImageData(0, 0, canvas.width, canvas.height)
|
||||
tileColorData.value.set(tile.id, getDominantColor(imageData))
|
||||
tileEdgeData.value.set(tile.id, getEdgeComplexity(imageData))
|
||||
}
|
||||
img.src = `${config.server_endpoint}/assets/tiles/${tile.id}.png`
|
||||
}
|
||||
|
||||
function getDominantColor(imageData: ImageData) {
|
||||
let r = 0,
|
||||
g = 0,
|
||||
b = 0,
|
||||
total = 0
|
||||
for (let i = 0; i < imageData.data.length; i += 4) {
|
||||
if (imageData.data[i + 3] > 0) {
|
||||
// Only consider non-transparent pixels
|
||||
r += imageData.data[i]
|
||||
g += imageData.data[i + 1]
|
||||
b += imageData.data[i + 2]
|
||||
total++
|
||||
}
|
||||
}
|
||||
return {
|
||||
r: Math.round(r / total),
|
||||
g: Math.round(g / total),
|
||||
b: Math.round(b / total)
|
||||
}
|
||||
}
|
||||
|
||||
function getEdgeComplexity(imageData: ImageData) {
|
||||
let edgePixels = 0
|
||||
for (let y = 0; y < imageData.height; y++) {
|
||||
for (let x = 0; x < imageData.width; x++) {
|
||||
const i = (y * imageData.width + x) * 4
|
||||
if (imageData.data[i + 3] > 0 && (x === 0 || y === 0 || x === imageData.width - 1 || y === imageData.height - 1 || imageData.data[i - 1] === 0 || imageData.data[i + 7] === 0)) {
|
||||
edgePixels++
|
||||
}
|
||||
}
|
||||
}
|
||||
return edgePixels
|
||||
}
|
||||
|
||||
function getTileCategory(tile: Tile): string {
|
||||
return tileCategories.value.get(tile.id) || ''
|
||||
}
|
||||
|
||||
function openGroup(group: { parent: Tile; children: Tile[] }) {
|
||||
selectedGroup.value = group
|
||||
}
|
||||
|
||||
function closeGroup() {
|
||||
selectedGroup.value = null
|
||||
}
|
||||
|
||||
function selectTile(tile: string) {
|
||||
zoneEditorStore.setSelectedTile(tile)
|
||||
}
|
||||
|
||||
function isActiveTile(tile: Tile): boolean {
|
||||
return zoneEditorStore.selectedTile === tile.id
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
isModalOpen.value = true
|
||||
gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => {
|
||||
zoneEditorStore.setTileList(response)
|
||||
response.forEach((tile) => processTile(tile))
|
||||
})
|
||||
})
|
||||
</script>
|
||||
178
src/components/gameMaster/zoneEditor/partials/Toolbar.vue
Normal file
178
src/components/gameMaster/zoneEditor/partials/Toolbar.vue
Normal file
@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div class="flex justify-center p-5">
|
||||
<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">
|
||||
<div ref="toolbar" class="tools flex gap-2.5" v-if="zoneEditorStore.zone">
|
||||
<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': zoneEditorStore.tool === 'move' }" @click="handleClick('move')">
|
||||
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" /> <span class="h-5" :class="{ 'ml-2.5': zoneEditorStore.tool !== 'move' }">(M)</span>
|
||||
</button>
|
||||
|
||||
<div class="w-px bg-cyan"></div>
|
||||
|
||||
<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': zoneEditorStore.tool === 'pencil' }" @click="handleClick('pencil')">
|
||||
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" /> <span class="h-5" :class="{ 'ml-2.5': zoneEditorStore.tool !== 'pencil' }">(P)</span>
|
||||
<div class="select" v-if="zoneEditorStore.tool === 'pencil'">
|
||||
<div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectPencilOpen }">
|
||||
{{ zoneEditorStore.drawMode }}
|
||||
<img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
|
||||
</div>
|
||||
<div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray rounded min-w-28 border border-gray-500 border-solid text-left" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('tile')">
|
||||
Tile
|
||||
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
|
||||
</span>
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('object')">
|
||||
Object
|
||||
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
|
||||
</span>
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('teleport')">
|
||||
Teleport
|
||||
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
|
||||
</span>
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('blocking tile')">Blocking tile</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="w-px bg-cyan"></div>
|
||||
|
||||
<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': zoneEditorStore.tool === 'eraser' }" @click="handleClick('eraser')">
|
||||
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" /> <span class="h-5" :class="{ 'ml-2.5': zoneEditorStore.tool !== 'eraser' }">(E)</span>
|
||||
<div class="select" v-if="zoneEditorStore.tool === 'eraser'">
|
||||
<div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectEraserOpen }">
|
||||
{{ zoneEditorStore.eraserMode }}
|
||||
<img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
|
||||
</div>
|
||||
<div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray rounded min-w-28 border border-gray-500 border-solid text-left" v-show="selectEraserOpen">
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setEraserMode('tile')">
|
||||
Tile
|
||||
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
|
||||
</span>
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setEraserMode('object')">
|
||||
Object
|
||||
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
|
||||
</span>
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setEraserMode('teleport')">
|
||||
Teleport
|
||||
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
|
||||
</span>
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setEraserMode('blocking tile')">Blocking tile</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="w-px bg-cyan"></div>
|
||||
|
||||
<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': zoneEditorStore.tool === 'paint' }" @click="handleClick('paint')">
|
||||
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/paint.svg" alt="Paint bucket" /> <span class="h-5" :class="{ 'ml-2.5': zoneEditorStore.tool !== 'paint' }">(B)</span>
|
||||
</button>
|
||||
|
||||
<div class="w-px bg-cyan"></div>
|
||||
|
||||
<button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')" v-if="zoneEditorStore.zone"><img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" /> <span class="h-5 ml-2.5">(Z)</span></button>
|
||||
</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="() => zoneEditorStore.toggleZoneListModal()">Load</button>
|
||||
<button class="btn-cyan px-3.5" @click="() => emit('save')" v-if="zoneEditorStore.zone">Save</button>
|
||||
<button class="btn-cyan px-3.5" @click="() => emit('clear')" v-if="zoneEditorStore.zone">Clear</button>
|
||||
<button class="btn-cyan px-3.5" @click="() => zoneEditorStore.toggleActive()">Exit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { onClickOutside } from '@vueuse/core'
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
const emit = defineEmits(['save', 'clear'])
|
||||
|
||||
// track when clicked outside of toolbar items
|
||||
const toolbar = ref(null)
|
||||
|
||||
// track select state
|
||||
let selectPencilOpen = ref(false)
|
||||
let selectEraserOpen = ref(false)
|
||||
|
||||
// drawMode
|
||||
function setDrawMode(value: string) {
|
||||
zoneEditorStore.isTileListModalShown = value === 'tile'
|
||||
zoneEditorStore.isObjectListModalShown = value === 'object'
|
||||
|
||||
zoneEditorStore.setDrawMode(value)
|
||||
selectPencilOpen.value = false
|
||||
}
|
||||
|
||||
// drawMode
|
||||
function setEraserMode(value: string) {
|
||||
zoneEditorStore.setEraserMode(value)
|
||||
selectEraserOpen.value = false
|
||||
}
|
||||
|
||||
function handleClick(tool: string) {
|
||||
if (tool === 'settings') {
|
||||
zoneEditorStore.toggleSettingsModal()
|
||||
} else {
|
||||
zoneEditorStore.setTool(tool)
|
||||
}
|
||||
|
||||
selectPencilOpen.value = tool === 'pencil' ? !selectPencilOpen.value : false
|
||||
selectEraserOpen.value = tool === 'eraser' ? !selectEraserOpen.value : false
|
||||
}
|
||||
|
||||
function cycleToolMode(tool: 'pencil' | 'eraser') {
|
||||
const modes = ['tile', 'object', 'teleport', 'blocking tile']
|
||||
const currentMode = tool === 'pencil' ? zoneEditorStore.drawMode : zoneEditorStore.eraserMode
|
||||
const currentIndex = modes.indexOf(currentMode)
|
||||
const nextIndex = (currentIndex + 1) % modes.length
|
||||
const nextMode = modes[nextIndex]
|
||||
|
||||
if (tool === 'pencil') {
|
||||
setDrawMode(nextMode)
|
||||
} else {
|
||||
setEraserMode(nextMode)
|
||||
}
|
||||
}
|
||||
|
||||
function initKeyShortcuts(event: KeyboardEvent) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
// prevent if focused on composables
|
||||
if (document.activeElement?.tagName === 'INPUT') return
|
||||
|
||||
const keyActions: { [key: string]: string } = {
|
||||
m: 'move',
|
||||
p: 'pencil',
|
||||
e: 'eraser',
|
||||
b: 'paint',
|
||||
z: 'settings'
|
||||
}
|
||||
|
||||
if (keyActions.hasOwnProperty(event.key)) {
|
||||
const tool = keyActions[event.key]
|
||||
if ((tool === 'pencil' || tool === 'eraser') && zoneEditorStore.tool === tool) {
|
||||
cycleToolMode(tool)
|
||||
} else {
|
||||
handleClick(tool)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleClickOutside() {
|
||||
selectPencilOpen.value = false
|
||||
selectEraserOpen.value = false
|
||||
}
|
||||
onClickOutside(toolbar, handleClickOutside)
|
||||
|
||||
onMounted(() => {
|
||||
addEventListener('keydown', initKeyShortcuts)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
removeEventListener('keydown', initKeyShortcuts)
|
||||
})
|
||||
</script>
|
||||
61
src/components/gameMaster/zoneEditor/partials/ZoneList.vue
Normal file
61
src/components/gameMaster/zoneEditor/partials/ZoneList.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<CreateZone v-if="zoneEditorStore.isCreateZoneModalShown" />
|
||||
<Modal :is-modal-open="zoneEditorStore.isZoneListModalShown" @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :modal-width="300" :modal-height="360" :bg-style="'none'">
|
||||
<template #modalHeader>
|
||||
<h3 class="text-lg text-white">Zones</h3>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
<div class="my-4 mx-auto">
|
||||
<div class="text-center mb-4 px-2 flex gap-2.5">
|
||||
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="fetchZones">Refresh</button>
|
||||
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="() => zoneEditorStore.toggleCreateZoneModal()">New</button>
|
||||
</div>
|
||||
<div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(zone, index) in zoneEditorStore.zoneList" :key="zone.id">
|
||||
<div class="absolute left-0 top-0 w-full h-px bg-gray-500" v-if="index === 0"></div>
|
||||
<div class="flex gap-3 items-center w-full" @click="() => loadZone(zone.id)">
|
||||
<span>{{ zone.name }}</span>
|
||||
<span class="ml-auto gap-1 flex">
|
||||
<button class="btn-red w-7 h-7 z-50 flex items-center justify-center" @click.stop="() => deleteZone(zone.id)">x</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Zone } from '@/application/types'
|
||||
import CreateZone from '@/components/gameMaster/zoneEditor/partials/CreateZone.vue'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
onMounted(async () => {
|
||||
fetchZones()
|
||||
})
|
||||
|
||||
function fetchZones() {
|
||||
gameStore.connection?.emit('gm:zone_editor:zone:list', {}, (response: Zone[]) => {
|
||||
zoneEditorStore.setZoneList(response)
|
||||
})
|
||||
}
|
||||
|
||||
function loadZone(id: number) {
|
||||
gameStore.connection?.emit('gm:zone_editor:zone:request', { zoneId: id }, (response: Zone) => {
|
||||
zoneEditorStore.setZone(response)
|
||||
})
|
||||
zoneEditorStore.toggleZoneListModal()
|
||||
}
|
||||
|
||||
function deleteZone(id: number) {
|
||||
gameStore.connection?.emit('gm:zone_editor:zone:delete', { zoneId: id }, () => {
|
||||
fetchZones()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
106
src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue
Normal file
106
src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue
Normal file
@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<Modal :is-modal-open="zoneEditorStore.isSettingsModalShown" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="600" :modal-height="430" :bg-style="'none'">
|
||||
<template #modalHeader>
|
||||
<h3 class="m-0 font-medium shrink-0 text-white">Zone settings</h3>
|
||||
</template>
|
||||
|
||||
<template #modalBody>
|
||||
<div class="m-4">
|
||||
<div class="space-x-2">
|
||||
<button class="btn-cyan py-1.5 px-4" type="button" @click.prevent="screen = 'settings'">Settings</button>
|
||||
<button class="btn-cyan py-1.5 px-4" type="button" @click.prevent="screen = 'effects'">Effects</button>
|
||||
</div>
|
||||
<form method="post" @submit.prevent="" class="inline" v-if="screen === 'settings'">
|
||||
<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" />
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="width">Width</label>
|
||||
<input class="input-field" v-model="width" 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" />
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<label for="pvp">PVP enabled</label>
|
||||
<select v-model="pvp" class="input-field" name="pvp" id="pvp">
|
||||
<option :value="false">No</option>
|
||||
<option :value="true">Yes</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<form method="post" @submit.prevent="" class="inline" v-if="screen === 'effects'">
|
||||
<div v-for="(effect, index) in zoneEffects" :key="effect.id" class="mb-2 flex items-center space-x-2 mt-4">
|
||||
<input class="input-field flex-grow" v-model="effect.effect" placeholder="Effect name" />
|
||||
<input class="input-field w-20" v-model.number="effect.strength" type="number" placeholder="Strength" />
|
||||
<button class="btn-red py-1 px-2" type="button" @click="removeEffect(index)">Delete</button>
|
||||
</div>
|
||||
<button class="btn-green py-1 px-2 mt-2" type="button" @click="addEffect">Add Effect</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const screen = ref('settings')
|
||||
|
||||
zoneEditorStore.setZoneName(zoneEditorStore.zone?.name)
|
||||
zoneEditorStore.setZoneWidth(zoneEditorStore.zone?.width)
|
||||
zoneEditorStore.setZoneHeight(zoneEditorStore.zone?.height)
|
||||
zoneEditorStore.setZonePvp(zoneEditorStore.zone?.pvp)
|
||||
zoneEditorStore.setZoneEffects(zoneEditorStore.zone?.zoneEffects)
|
||||
|
||||
const name = ref(zoneEditorStore.zoneSettings?.name)
|
||||
const width = ref(zoneEditorStore.zoneSettings?.width)
|
||||
const height = ref(zoneEditorStore.zoneSettings?.height)
|
||||
const pvp = ref(zoneEditorStore.zoneSettings?.pvp)
|
||||
const zoneEffects = ref(zoneEditorStore.zoneSettings?.zoneEffects || [])
|
||||
|
||||
watch(name, (value) => {
|
||||
zoneEditorStore.setZoneName(value)
|
||||
})
|
||||
|
||||
watch(width, (value) => {
|
||||
zoneEditorStore.setZoneWidth(value)
|
||||
})
|
||||
|
||||
watch(height, (value) => {
|
||||
zoneEditorStore.setZoneHeight(value)
|
||||
})
|
||||
|
||||
watch(pvp, (value) => {
|
||||
zoneEditorStore.setZonePvp(value)
|
||||
})
|
||||
|
||||
watch(
|
||||
zoneEffects,
|
||||
(value) => {
|
||||
zoneEditorStore.setZoneEffects(value)
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
const addEffect = () => {
|
||||
zoneEffects.value.push({
|
||||
id: Date.now().toString(), // Simple unique id generation
|
||||
zoneId: zoneEditorStore.zone?.id,
|
||||
zone: zoneEditorStore.zone,
|
||||
effect: '',
|
||||
strength: 1
|
||||
})
|
||||
}
|
||||
|
||||
const removeEffect = (index) => {
|
||||
zoneEffects.value.splice(index, 1)
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<Image v-for="tile in zoneEditorStore.zone?.zoneEventTiles" v-bind="getImageProps(tile)" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ZoneEventTileType, type ZoneEventTile } from '@/application/types'
|
||||
import { uuidv4 } from '@/application/utilities'
|
||||
import { getTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { Image, useScene } from 'phavuer'
|
||||
import { onMounted, onUnmounted } from 'vue'
|
||||
|
||||
const scene = useScene()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
const props = defineProps<{
|
||||
tilemap: Phaser.Tilemaps.Tilemap
|
||||
}>()
|
||||
|
||||
function getImageProps(tile: ZoneEventTile) {
|
||||
return {
|
||||
x: tileToWorldX(props.tilemap, tile.positionX, tile.positionY),
|
||||
y: tileToWorldY(props.tilemap, tile.positionX, tile.positionY),
|
||||
texture: tile.type,
|
||||
depth: 999
|
||||
}
|
||||
}
|
||||
|
||||
function pencil(pointer: Phaser.Input.Pointer) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (zoneEditorStore.tool !== 'pencil') return
|
||||
|
||||
// Check if draw mode is blocking tile or teleport
|
||||
if (zoneEditorStore.drawMode !== 'blocking tile' && zoneEditorStore.drawMode !== 'teleport') return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
|
||||
// Check if shift is not pressed, this means we are moving the camera
|
||||
if (pointer.event.shiftKey) return
|
||||
|
||||
// Check if there is a tile
|
||||
const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Check if event tile already exists on position
|
||||
const existingEventTile = zoneEditorStore.zone.zoneEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
|
||||
if (existingEventTile) return
|
||||
|
||||
// If teleport, check if there is a selected zone
|
||||
if (zoneEditorStore.drawMode === 'teleport' && !zoneEditorStore.teleportSettings.toZoneId) return
|
||||
|
||||
const newEventTile = {
|
||||
id: uuidv4(),
|
||||
zoneId: zoneEditorStore.zone.id,
|
||||
zone: zoneEditorStore.zone,
|
||||
type: zoneEditorStore.drawMode === 'blocking tile' ? ZoneEventTileType.BLOCK : ZoneEventTileType.TELEPORT,
|
||||
positionX: tile.x,
|
||||
positionY: tile.y,
|
||||
teleport:
|
||||
zoneEditorStore.drawMode === 'teleport'
|
||||
? {
|
||||
toZoneId: zoneEditorStore.teleportSettings.toZoneId,
|
||||
toPositionX: zoneEditorStore.teleportSettings.toPositionX,
|
||||
toPositionY: zoneEditorStore.teleportSettings.toPositionY,
|
||||
toRotation: zoneEditorStore.teleportSettings.toRotation
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
|
||||
zoneEditorStore.zone.zoneEventTiles = zoneEditorStore.zone.zoneEventTiles.concat(newEventTile as ZoneEventTile)
|
||||
}
|
||||
|
||||
function eraser(pointer: Phaser.Input.Pointer) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (zoneEditorStore.tool !== 'eraser') return
|
||||
|
||||
// Check if draw mode is blocking tile or teleport
|
||||
if (zoneEditorStore.eraserMode !== 'blocking tile' && zoneEditorStore.eraserMode !== 'teleport') return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
|
||||
// Check if shift is not pressed, this means we are moving the camera
|
||||
if (pointer.event.shiftKey) return
|
||||
|
||||
// Check if there is a tile
|
||||
const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Check if event tile already exists on position
|
||||
const existingEventTile = zoneEditorStore.zone.zoneEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
|
||||
if (!existingEventTile) return
|
||||
|
||||
// Remove existing event tile
|
||||
zoneEditorStore.zone.zoneEventTiles = zoneEditorStore.zone.zoneEventTiles.filter((eventTile) => eventTile.id !== existingEventTile.id)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
scene.input.on(Phaser.Input.Events.POINTER_DOWN, pencil)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_DOWN, eraser)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_DOWN, pencil)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_DOWN, eraser)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<Image v-if="gameStore.getLoadedAsset(props.zoneObject.object.id)" v-bind="imageProps" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { AssetDataT, ZoneObject } from '@/application/types'
|
||||
import { loadTexture } from '@/composables/gameComposable'
|
||||
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { Image, useScene } from 'phavuer'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
tilemap: Phaser.Tilemaps.Tilemap
|
||||
zoneObject: ZoneObject
|
||||
selectedZoneObject: ZoneObject | null
|
||||
movingZoneObject: ZoneObject | null
|
||||
}>()
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const scene = useScene()
|
||||
|
||||
const imageProps = computed(() => ({
|
||||
alpha: props.movingZoneObject?.id === props.zoneObject.id ? 0.5 : 1,
|
||||
tint: props.selectedZoneObject?.id === props.zoneObject.id ? 0x00ff00 : 0xffffff,
|
||||
depth: calculateIsometricDepth(props.zoneObject.positionX, props.zoneObject.positionY, props.zoneObject.object.frameWidth, props.zoneObject.object.frameHeight),
|
||||
x: tileToWorldX(props.tilemap, props.zoneObject.positionX, props.zoneObject.positionY),
|
||||
y: tileToWorldY(props.tilemap, props.zoneObject.positionX, props.zoneObject.positionY),
|
||||
flipX: props.zoneObject.isRotated,
|
||||
texture: props.zoneObject.object.id,
|
||||
originY: Number(props.zoneObject.object.originX),
|
||||
originX: Number(props.zoneObject.object.originY)
|
||||
}))
|
||||
|
||||
loadTexture(scene, {
|
||||
key: props.zoneObject.object.id,
|
||||
data: '/assets/objects/' + props.zoneObject.object.id + '.png',
|
||||
group: 'objects',
|
||||
updatedAt: props.zoneObject.object.updatedAt,
|
||||
frameWidth: props.zoneObject.object.frameWidth,
|
||||
frameHeight: props.zoneObject.object.frameHeight
|
||||
} as AssetDataT).catch((error) => {
|
||||
console.error('Error loading texture:', error)
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<SelectedZoneObject v-if="selectedZoneObject" :zoneObject="selectedZoneObject" :movingZoneObject="movingZoneObject" @move="moveZoneObject" @rotate="rotateZoneObject" @delete="deleteZoneObject" />
|
||||
<ZoneObject v-for="zoneObject in zoneEditorStore.zone?.zoneObjects" :tilemap="tilemap" :zoneObject :selectedZoneObject :movingZoneObject @pointerup="clickZoneObject(zoneObject)" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ZoneObject as ZoneObjectT } from '@/application/types'
|
||||
import { uuidv4 } from '@/application/utilities'
|
||||
import SelectedZoneObject from '@/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue'
|
||||
import ZoneObject from '@/components/gameMaster/zoneEditor/zonePartials/ZoneObject.vue'
|
||||
import { getTile } from '@/composables/zoneComposable'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { useScene } from 'phavuer'
|
||||
import { onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
|
||||
const scene = useScene()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const selectedZoneObject = ref<ZoneObjectT | null>(null)
|
||||
const movingZoneObject = ref<ZoneObjectT | null>(null)
|
||||
|
||||
const props = defineProps<{
|
||||
tilemap: Phaser.Tilemaps.Tilemap
|
||||
}>()
|
||||
|
||||
function pencil(pointer: Phaser.Input.Pointer) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (zoneEditorStore.tool !== 'pencil') return
|
||||
|
||||
// Check if draw mode is object
|
||||
if (zoneEditorStore.drawMode !== 'object') return
|
||||
|
||||
// Check if there is a selected object
|
||||
if (!zoneEditorStore.selectedObject) 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 there is a tile
|
||||
const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Check if object already exists on position
|
||||
const existingObject = zoneEditorStore.zone?.zoneObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
|
||||
if (existingObject) return
|
||||
|
||||
const newObject = {
|
||||
id: uuidv4(),
|
||||
zoneId: zoneEditorStore.zone.id,
|
||||
zone: zoneEditorStore.zone,
|
||||
objectId: zoneEditorStore.selectedObject.id,
|
||||
object: zoneEditorStore.selectedObject,
|
||||
depth: 0,
|
||||
isRotated: false,
|
||||
positionX: tile.x,
|
||||
positionY: tile.y
|
||||
}
|
||||
|
||||
// Add new object to zoneObjects
|
||||
zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.concat(newObject as ZoneObjectT)
|
||||
}
|
||||
|
||||
function eraser(pointer: Phaser.Input.Pointer) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
// Check if tool is eraser
|
||||
if (zoneEditorStore.tool !== 'eraser') return
|
||||
|
||||
// Check if draw mode is object
|
||||
if (zoneEditorStore.eraserMode !== '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 there is a tile
|
||||
const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Check if object already exists on position
|
||||
const existingObject = zoneEditorStore.zone.zoneObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
|
||||
if (!existingObject) return
|
||||
|
||||
// Remove existing object
|
||||
zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.filter((object) => object.id !== existingObject.id)
|
||||
}
|
||||
|
||||
function objectPicker(pointer: Phaser.Input.Pointer) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (zoneEditorStore.tool !== 'pencil') return
|
||||
|
||||
// Check if draw mode is object
|
||||
if (zoneEditorStore.drawMode !== 'object') return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
|
||||
// Check if shift is not pressed, this means we are moving the camera
|
||||
if (pointer.event.shiftKey) return
|
||||
|
||||
// If alt is not pressed, return
|
||||
if (!pointer.event.altKey) return
|
||||
|
||||
// Check if there is a tile
|
||||
const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Check if object already exists on position
|
||||
const existingObject = zoneEditorStore.zone.zoneObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
|
||||
if (!existingObject) return
|
||||
|
||||
// Select the object
|
||||
zoneEditorStore.setSelectedObject(existingObject)
|
||||
}
|
||||
|
||||
function moveZoneObject(id: string) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
movingZoneObject.value = zoneEditorStore.zone.zoneObjects.find((object) => object.id === id) as ZoneObjectT
|
||||
|
||||
function handlePointerMove(pointer: Phaser.Input.Pointer) {
|
||||
if (!movingZoneObject.value) return
|
||||
|
||||
const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
movingZoneObject.value.positionX = tile.x
|
||||
movingZoneObject.value.positionY = tile.y
|
||||
}
|
||||
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
|
||||
|
||||
function handlePointerUp() {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
|
||||
movingZoneObject.value = null
|
||||
}
|
||||
|
||||
scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
|
||||
}
|
||||
|
||||
function rotateZoneObject(id: string) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.map((object) => {
|
||||
if (object.id === id) {
|
||||
return {
|
||||
...object,
|
||||
isRotated: !object.isRotated
|
||||
}
|
||||
}
|
||||
return object
|
||||
})
|
||||
}
|
||||
|
||||
function deleteZoneObject(id: string) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.filter((object) => object.id !== id)
|
||||
selectedZoneObject.value = null
|
||||
}
|
||||
|
||||
function clickZoneObject(zoneObject: ZoneObjectT) {
|
||||
selectedZoneObject.value = zoneObject
|
||||
|
||||
// If alt is pressed, select the object
|
||||
if (scene.input.activePointer.event.altKey) {
|
||||
zoneEditorStore.setSelectedObject(zoneObject.object)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
scene.input.on(Phaser.Input.Events.POINTER_DOWN, pencil)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_DOWN, eraser)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_DOWN, objectPicker)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_DOWN, pencil)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_DOWN, eraser)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_DOWN, objectPicker)
|
||||
})
|
||||
|
||||
// watch zoneEditorStore.objectList and update originX and originY of objects in zoneObjects
|
||||
watch(
|
||||
() => zoneEditorStore.objectList,
|
||||
(newObjects) => {
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
const updatedZoneObjects = zoneEditorStore.zone.zoneObjects.map((zoneObject) => {
|
||||
const updatedObject = newObjects.find((obj) => obj.id === zoneObject.object.id)
|
||||
if (updatedObject) {
|
||||
return {
|
||||
...zoneObject,
|
||||
object: {
|
||||
...zoneObject.object,
|
||||
originX: updatedObject.originX,
|
||||
originY: updatedObject.originY
|
||||
}
|
||||
}
|
||||
}
|
||||
return zoneObject
|
||||
})
|
||||
|
||||
// Update the zone with the new zoneObjects
|
||||
zoneEditorStore.setZone({
|
||||
...zoneEditorStore.zone,
|
||||
zoneObjects: updatedZoneObjects
|
||||
})
|
||||
|
||||
// Update selectedObject if it's set
|
||||
if (zoneEditorStore.selectedObject) {
|
||||
const updatedObject = newObjects.find((obj) => obj.id === zoneEditorStore.selectedObject?.id)
|
||||
if (updatedObject) {
|
||||
zoneEditorStore.setSelectedObject({
|
||||
...zoneEditorStore.selectedObject,
|
||||
originX: updatedObject.originX,
|
||||
originY: updatedObject.originY
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
</script>
|
||||
227
src/components/gameMaster/zoneEditor/zonePartials/ZoneTiles.vue
Normal file
227
src/components/gameMaster/zoneEditor/zonePartials/ZoneTiles.vue
Normal file
@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<Controls :layer="tileLayer" :depth="0" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/application/config'
|
||||
import type { AssetDataT } from '@/application/types'
|
||||
import Controls from '@/components/utilities/Controls.vue'
|
||||
import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/zoneComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { useScene } from 'phavuer'
|
||||
import { onMounted, onUnmounted, watch } from 'vue'
|
||||
|
||||
const emit = defineEmits(['tileMap:create'])
|
||||
|
||||
const scene = useScene()
|
||||
const gameStore = useGameStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const tileMap = createTileMap()
|
||||
const tileLayer = createTileLayer()
|
||||
|
||||
/**
|
||||
* A Tilemap is a container for Tilemap data.
|
||||
* This isn't a display object, rather, it holds data about the map and allows you to add tilesets and tilemap layers to it.
|
||||
* A map can have one or more tilemap layers, which are the display objects that actually render the tiles.
|
||||
*/
|
||||
function createTileMap() {
|
||||
const zoneData = new Phaser.Tilemaps.MapData({
|
||||
width: zoneEditorStore.zone?.width,
|
||||
height: zoneEditorStore.zone?.height,
|
||||
tileWidth: config.tile_size.x,
|
||||
tileHeight: config.tile_size.y,
|
||||
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
|
||||
format: Phaser.Tilemaps.Formats.ARRAY_2D
|
||||
})
|
||||
|
||||
const newTileMap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
|
||||
emit('tileMap:create', newTileMap)
|
||||
|
||||
return newTileMap
|
||||
}
|
||||
|
||||
/**
|
||||
* A Tileset is a combination of a single image containing the tiles and a container for data about each tile.
|
||||
*/
|
||||
function createTileLayer() {
|
||||
const tilesArray = gameStore.getLoadedAssetsByGroup('tiles')
|
||||
|
||||
const tilesetImages = Array.from(tilesArray).map((tile: AssetDataT, index: number) => {
|
||||
return tileMap.addTilesetImage(tile.key, tile.key, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
|
||||
}) as any
|
||||
|
||||
// Add blank tile
|
||||
tilesetImages.push(tileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))
|
||||
const layer = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
|
||||
|
||||
layer.setDepth(0)
|
||||
layer.setCullPadding(2, 2)
|
||||
|
||||
return layer
|
||||
}
|
||||
|
||||
function pencil(pointer: Phaser.Input.Pointer) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (zoneEditorStore.tool !== 'pencil') return
|
||||
|
||||
// Check if draw mode is tile
|
||||
if (zoneEditorStore.drawMode !== 'tile') return
|
||||
|
||||
// Check if there is a selected tile
|
||||
if (!zoneEditorStore.selectedTile) return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
|
||||
// Check if shift is not pressed, this means we are moving the camera
|
||||
if (pointer.event.shiftKey) return
|
||||
|
||||
// Check if there is a tile
|
||||
const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Place tile
|
||||
placeTile(tileMap, tileLayer, tile.x, tile.y, zoneEditorStore.selectedTile)
|
||||
|
||||
// Adjust zoneEditorStore.zone.tiles
|
||||
zoneEditorStore.zone.tiles[tile.y][tile.x] = zoneEditorStore.selectedTile
|
||||
}
|
||||
|
||||
function eraser(pointer: Phaser.Input.Pointer) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (zoneEditorStore.tool !== 'eraser') return
|
||||
|
||||
// Check if draw mode is tile
|
||||
if (zoneEditorStore.eraserMode !== 'tile') return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
|
||||
// Check if shift is not pressed, this means we are moving the camera
|
||||
if (pointer.event.shiftKey) return
|
||||
|
||||
// Check if alt is pressed
|
||||
if (pointer.event.altKey) return
|
||||
|
||||
// Check if there is a tile
|
||||
const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Place tile
|
||||
placeTile(tileMap, tileLayer, tile.x, tile.y, 'blank_tile')
|
||||
|
||||
// Adjust zoneEditorStore.zone.tiles
|
||||
zoneEditorStore.zone.tiles[tile.y][tile.x] = 'blank_tile'
|
||||
}
|
||||
|
||||
function paint(pointer: Phaser.Input.Pointer) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (zoneEditorStore.tool !== 'paint') return
|
||||
|
||||
// Check if there is a selected tile
|
||||
if (!zoneEditorStore.selectedTile) return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
|
||||
// Check if shift is not pressed, this means we are moving the camera
|
||||
if (pointer.event.shiftKey) return
|
||||
|
||||
// Check if alt is pressed
|
||||
if (pointer.event.altKey) return
|
||||
|
||||
// Set new tileArray with selected tile
|
||||
setLayerTiles(tileMap, tileLayer, createTileArray(tileMap.width, tileMap.height, zoneEditorStore.selectedTile))
|
||||
|
||||
// Adjust zoneEditorStore.zone.tiles
|
||||
zoneEditorStore.zone.tiles = createTileArray(tileMap.width, tileMap.height, zoneEditorStore.selectedTile)
|
||||
}
|
||||
|
||||
// When alt is pressed, and the pointer is down, select the tile that the pointer is over
|
||||
function tilePicker(pointer: Phaser.Input.Pointer) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (zoneEditorStore.tool !== 'pencil') return
|
||||
|
||||
// Check if draw mode is tile
|
||||
if (zoneEditorStore.drawMode !== 'tile') return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
|
||||
// Check if shift is not pressed, this means we are moving the camera
|
||||
if (pointer.event.shiftKey) return
|
||||
|
||||
// Check if alt is pressed
|
||||
if (!pointer.event.altKey) return
|
||||
|
||||
// Check if there is a tile
|
||||
const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Select the tile
|
||||
zoneEditorStore.setSelectedTile(zoneEditorStore.zone.tiles[tile.y][tile.x])
|
||||
}
|
||||
|
||||
watch(
|
||||
() => zoneEditorStore.shouldClearTiles,
|
||||
(shouldClear) => {
|
||||
if (shouldClear && zoneEditorStore.zone) {
|
||||
const blankTiles = createTileArray(tileMap.width, tileMap.height, 'blank_tile')
|
||||
setLayerTiles(tileMap, tileLayer, blankTiles)
|
||||
zoneEditorStore.zone.tiles = blankTiles
|
||||
zoneEditorStore.resetClearTilesFlag()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
if (!zoneEditorStore.zone?.tiles) {
|
||||
return
|
||||
}
|
||||
|
||||
// First fill the entire map with blank tiles using current zone dimensions
|
||||
const blankTiles = createTileArray(zoneEditorStore.zone.width, zoneEditorStore.zone.height, 'blank_tile')
|
||||
|
||||
// Then overlay the zone tiles, but only within the current zone dimensions
|
||||
const zoneTiles = zoneEditorStore.zone.tiles
|
||||
for (let y = 0; y < zoneEditorStore.zone.height; y++) {
|
||||
for (let x = 0; x < zoneEditorStore.zone.width; x++) {
|
||||
// Only copy if the source tiles array has this position
|
||||
if (zoneTiles[y] && zoneTiles[y][x] !== undefined) {
|
||||
blankTiles[y][x] = zoneTiles[y][x]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setLayerTiles(tileMap, tileLayer, blankTiles)
|
||||
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_DOWN, paint)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_DOWN, tilePicker)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_DOWN, paint)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_DOWN, tilePicker)
|
||||
|
||||
tileMap.destroyLayer('tiles')
|
||||
tileMap.removeAllLayers()
|
||||
tileMap.destroy()
|
||||
})
|
||||
</script>
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="absolute" v-if="gameStore.uiSettings.isCharacterProfileOpen" :style="modalStyle">
|
||||
<div class="relative">
|
||||
<img src="/assets/ui-elements/profile-ui-box-outer.svg" class="absolute w-full h-full" alt="" />
|
||||
<img src="/assets/ui-elements/profile-ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)]" alt="" />
|
||||
<img src="/assets/ui-elements/profile-ui-box-outer.svg" class="absolute w-full h-full" />
|
||||
<img src="/assets/ui-elements/profile-ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)]" />
|
||||
<div @mousedown="startDrag" class="cursor-move px-5 py-2.5 flex justify-between items-center relative">
|
||||
<span class="text-xs text-white font-thin">Character Profile [Alt+C]</span>
|
||||
<button @click="gameStore.uiSettings.isCharacterProfileOpen = false" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
|
||||
<img draggable="false" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" alt="Close button icon" />
|
||||
<img alt="close" draggable="false" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="py-4 px-6 flex flex-col gap-7 relative z-10">
|
||||
@ -17,7 +17,7 @@
|
||||
<span class="text-xs">{{ gameStore.character?.experience }} / 18.600XP</span>
|
||||
</div>
|
||||
<a class="hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-box-textured-small.svg')] bg-no-repeat block w-8 h-8 relative mx-[3px]">
|
||||
<img class="hover:drop-shadow-default w-3.5 h-3.5 m-[9px] object-contain" draggable="false" src="/assets/icons/plus-green-icon.svg" alt="Plus button icon" />
|
||||
<img class="hover:drop-shadow-default w-3.5 h-3.5 m-[9px] object-contain" draggable="false" src="/assets/icons/plus-green-icon.svg" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
@ -37,20 +37,20 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/placeholders/inventory_player.png" class="w-8 h-auto" alt="Player character sprite" />
|
||||
<img src="/assets/placeholders/inventory_player.png" class="w-8 h-auto" />
|
||||
<div class="flex flex-col items-end gap-0.5">
|
||||
<div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
|
||||
<img class="w-6 h-6 center-element" src="/assets/icons/profile/helmet.svg" alt="Helmet icon" />
|
||||
<img class="w-6 h-6 center-element" src="/assets/icons/profile/helmet.svg" />
|
||||
</div>
|
||||
<div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
|
||||
<img class="w-6 h-6 center-element" src="/assets/icons/profile/chestplate.svg" alt="Chestplate icon" />
|
||||
<img class="w-6 h-6 center-element" src="/assets/icons/profile/chestplate.svg" />
|
||||
</div>
|
||||
<div class="flex gap-0.5 items-end">
|
||||
<div class="w-6 h-6 default-border rounded-sm bg-gray relative hover:bg-gray-600">
|
||||
<img class="w-4 h-4 center-element" src="/assets/icons/profile/boots.svg" alt="Boots icon" />
|
||||
<img class="w-4 h-4 center-element" src="/assets/icons/profile/boots.svg" />
|
||||
</div>
|
||||
<div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
|
||||
<img class="w-6 h-6 center-element" src="/assets/icons/profile/legs.svg" alt="Legs icon" />
|
||||
<img class="w-6 h-6 center-element" src="/assets/icons/profile/legs.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -119,44 +119,111 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
|
||||
const width = ref(286)
|
||||
const height = ref(483)
|
||||
const x = ref(window.innerWidth / 2 - 143)
|
||||
const y = ref(window.innerHeight / 2 - 241)
|
||||
let startX = 0
|
||||
let startY = 0
|
||||
let initialX = 0
|
||||
let initialY = 0
|
||||
let modalPositionX = 0
|
||||
let modalPositionY = 0
|
||||
let modalWidth = 286
|
||||
let modalHeight = 483
|
||||
|
||||
const width = ref(modalWidth)
|
||||
const height = ref(modalHeight)
|
||||
const x = ref(0)
|
||||
const y = ref(0)
|
||||
const isDragging = ref(false)
|
||||
|
||||
const modalStyle = computed(() => ({
|
||||
top: `${y.value}px`,
|
||||
left: `${x.value}px`,
|
||||
width: `${width.value}px`,
|
||||
height: `${height.value}px`
|
||||
height: `${height.value}px`,
|
||||
maxWidth: '100vw',
|
||||
maxHeight: '100vh'
|
||||
}))
|
||||
|
||||
function startDrag(event: MouseEvent) {
|
||||
isDragging.value = true
|
||||
const startX = event.clientX - x.value
|
||||
const startY = event.clientY - y.value
|
||||
|
||||
function drag(event: MouseEvent) {
|
||||
if (!isDragging.value) return
|
||||
x.value = event.clientX - startX
|
||||
y.value = event.clientY - startY
|
||||
}
|
||||
|
||||
function stopDrag() {
|
||||
isDragging.value = false
|
||||
removeEventListener('mousemove', drag)
|
||||
removeEventListener('mouseup', stopDrag)
|
||||
}
|
||||
|
||||
addEventListener('mousemove', drag)
|
||||
addEventListener('mouseup', stopDrag)
|
||||
startX = event.clientX
|
||||
startY = event.clientY
|
||||
initialX = x.value
|
||||
initialY = y.value
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
function drag(event: MouseEvent) {
|
||||
if (!isDragging.value) return
|
||||
const dx = event.clientX - startX
|
||||
const dy = event.clientY - startY
|
||||
x.value = initialX + dx
|
||||
y.value = initialY + dy
|
||||
adjustPosition()
|
||||
}
|
||||
|
||||
function stopDrag() {
|
||||
isDragging.value = false
|
||||
}
|
||||
|
||||
function adjustPosition() {
|
||||
x.value = Math.min(x.value, window.innerWidth - width.value)
|
||||
y.value = Math.min(y.value, window.innerHeight - height.value)
|
||||
}
|
||||
|
||||
function initializePosition() {
|
||||
width.value = Math.min(modalWidth, window.innerWidth)
|
||||
height.value = Math.min(modalHeight, window.innerHeight)
|
||||
if (modalPositionX !== 0 && modalPositionY !== 0) {
|
||||
x.value = modalPositionX
|
||||
y.value = modalPositionY
|
||||
} else {
|
||||
x.value = (window.innerWidth - width.value) / 2
|
||||
y.value = (window.innerHeight - height.value) / 2
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => gameStore.uiSettings.isCharacterProfileOpen,
|
||||
(value) => {
|
||||
gameStore.uiSettings.isCharacterProfileOpen = value
|
||||
if (value) {
|
||||
initializePosition()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => modalWidth,
|
||||
(value) => {
|
||||
width.value = Math.min(value, window.innerWidth)
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => modalHeight,
|
||||
(value) => {
|
||||
height.value = Math.min(value, window.innerHeight)
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => modalPositionX,
|
||||
(value) => {
|
||||
x.value = value
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => modalPositionY,
|
||||
(value) => {
|
||||
y.value = value
|
||||
}
|
||||
)
|
||||
|
||||
function keyPress(event: KeyboardEvent) {
|
||||
if (event.altKey && event.key === 'c') {
|
||||
gameStore.toggleCharacterProfile()
|
||||
@ -165,9 +232,14 @@ function keyPress(event: KeyboardEvent) {
|
||||
|
||||
onMounted(() => {
|
||||
addEventListener('keydown', keyPress)
|
||||
addEventListener('mousemove', drag)
|
||||
addEventListener('mouseup', stopDrag)
|
||||
initializePosition()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
removeEventListener('keydown', keyPress)
|
||||
removeEventListener('mousemove', drag)
|
||||
removeEventListener('mouseup', stopDrag)
|
||||
})
|
||||
</script>
|
||||
@ -2,12 +2,12 @@
|
||||
<div class="w-full md:min-w-[350px] max-w-[750px] flex flex-col absolute left-1/2 -translate-x-1/2 bottom-5">
|
||||
<div ref="chatWindow" class="w-full overflow-auto h-32 mb-5 bg-gray rounded-md border-2 border-solid border-gray-500 text-gray-300" v-show="gameStore.uiSettings.isChatOpen">
|
||||
<div v-for="message in chats" class="flex-col py-2 items-center p-3">
|
||||
<span class="text-ellipsis overflow-hidden whitespace-nowrap text-sm" :class="{ 'text-cyan-300': gameStore.character?.role == 'gm' }">{{ message.character }}</span>
|
||||
<span class="text-ellipsis overflow-hidden whitespace-nowrap text-sm" :class="{ 'text-cyan-300': gameStore.character?.role == 'gm' }">{{ message.character.name }}</span>
|
||||
<p class="text-gray-50 m-0">{{ message.message }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-96 mx-auto relative">
|
||||
<img src="/assets/icons/ingameUI/chat-icon.svg" class="absolute top-1/2 -translate-y-1/2 left-2.5 h-4 w-4 opacity-50" alt="" />
|
||||
<img src="/assets/icons/ingameUI/chat-icon.svg" class="absolute top-1/2 -translate-y-1/2 left-2.5 h-4 w-4 opacity-50" />
|
||||
<input
|
||||
class="w-[332px] h-8 rounded-sm text-xs font-default pl-8 pr-4 py-0 bg-gray-600 border-2 border-solid border-gray-500 text-gray-300 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover focus:outline-none focus:ring-0 focus:border-cyan-800"
|
||||
placeholder="Type something..."
|
||||
@ -21,19 +21,19 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { SocketEvent } from '@/application/enums'
|
||||
import { socketManager } from '@/managers/SocketManager'
|
||||
import type { Chat } from '@/application/types'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useMapStore } from '@/stores/mapStore'
|
||||
import { useZoneStore } from '@/stores/zoneStore'
|
||||
import { onClickOutside, useFocus } from '@vueuse/core'
|
||||
import { useScene } from 'phavuer'
|
||||
import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
|
||||
const scene = useScene()
|
||||
const gameStore = useGameStore()
|
||||
const zoneStore = useZoneStore()
|
||||
|
||||
const message = ref('')
|
||||
const chats = ref<{ character: string; message: string }[]>([])
|
||||
const chats = ref([] as Chat[])
|
||||
const chatWindow = ref<HTMLElement | null>(null)
|
||||
const chatInput = ref<HTMLElement | null>(null)
|
||||
|
||||
@ -55,7 +55,7 @@ function unfocusChat(event: Event, targetElement: HTMLElement) {
|
||||
|
||||
const sendMessage = () => {
|
||||
if (!message.value.trim()) return
|
||||
socketManager.emit(SocketEvent.CHAT_MESSAGE, { message: message.value }, (response: boolean) => {})
|
||||
gameStore.connection?.emit('chat:message', { message: message.value }, (response: boolean) => {})
|
||||
message.value = ''
|
||||
}
|
||||
|
||||
@ -79,30 +79,18 @@ const scrollToBottom = () => {
|
||||
})
|
||||
}
|
||||
|
||||
socketManager.on(SocketEvent.CHAT_MESSAGE, (data: { character: string; message: string }) => {
|
||||
if (!data.character || !data.message) return
|
||||
|
||||
chats.value.push({ character: data.character, message: data.message })
|
||||
gameStore.connection!.on('chat:message', (data: Chat) => {
|
||||
chats.value.push(data)
|
||||
scrollToBottom()
|
||||
|
||||
const characterContainer = scene.children.getByName(data.character) as Phaser.GameObjects.Container
|
||||
if (!characterContainer) {
|
||||
console.log('No character container found')
|
||||
return
|
||||
}
|
||||
if (!zoneStore.characterLoaded) return
|
||||
|
||||
const characterChatContainer = characterContainer.getByName(data.character + '_chatContainer') as Phaser.GameObjects.Container
|
||||
if (!characterChatContainer) {
|
||||
console.log('No character chat container found')
|
||||
return
|
||||
}
|
||||
const charChatContainer = scene.children.getByName(data.character.name + '_chatContainer') as Phaser.GameObjects.Container
|
||||
if (!charChatContainer) return
|
||||
|
||||
const chatBubble = characterChatContainer.getByName(data.character + '_chatBubble') as Phaser.GameObjects.Container
|
||||
const chatText = characterChatContainer.getByName(data.character + '_chatText') as Phaser.GameObjects.Text
|
||||
if (!chatText || !chatBubble) {
|
||||
console.log('No chat text or bubble found')
|
||||
return
|
||||
}
|
||||
const chatBubble = charChatContainer.getByName(data.character.name + '_chatBubble') as Phaser.GameObjects.Container
|
||||
const chatText = charChatContainer.getByName(data.character.name + '_chatText') as Phaser.GameObjects.Text
|
||||
if (!chatText || !chatBubble) return
|
||||
|
||||
function calculateTextWidth(text: string, font: string, fontSize: number): number {
|
||||
// Create a canvas element
|
||||
@ -127,24 +115,24 @@ socketManager.on(SocketEvent.CHAT_MESSAGE, (data: { character: string; message:
|
||||
// setText but with max. char limit of 90
|
||||
chatText.setText(data.message.substring(0, 90))
|
||||
|
||||
characterChatContainer.setVisible(true)
|
||||
charChatContainer.setVisible(true)
|
||||
|
||||
/**
|
||||
* Hide chat bubble after a few seconds
|
||||
*/
|
||||
|
||||
// Clear any existing hide timer
|
||||
if (characterChatContainer.getData('hideTimer')) {
|
||||
clearTimeout(characterChatContainer.getData('hideTimer'))
|
||||
if (charChatContainer.getData('hideTimer')) {
|
||||
clearTimeout(charChatContainer.getData('hideTimer'))
|
||||
}
|
||||
|
||||
// Set a new hide timer
|
||||
const hideTimer = setTimeout(() => {
|
||||
characterChatContainer.setVisible(false)
|
||||
charChatContainer.setVisible(false)
|
||||
}, 3000)
|
||||
|
||||
// Store the timer on the container itself
|
||||
characterChatContainer.setData('hideTimer', hideTimer)
|
||||
charChatContainer.setData('hideTimer', hideTimer)
|
||||
})
|
||||
scrollToBottom()
|
||||
|
||||
@ -153,7 +141,7 @@ onMounted(() => {
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
socketManager.off(SocketEvent.CHAT_MESSAGE)
|
||||
gameStore.connection?.off('chat:message')
|
||||
removeEventListener('keydown', focusChat)
|
||||
})
|
||||
</script>
|
||||
21
src/components/gui/Clock.vue
Normal file
21
src/components/gui/Clock.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div class="absolute top-0 right-4 hidden lg:block">
|
||||
<p class="text-white text-lg">{{ gameStore.world.date.toLocaleString() }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { onUnmounted } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
|
||||
// Listen for new date from socket
|
||||
gameStore.connection!.on('date', (data: Date) => {
|
||||
gameStore.world.date = new Date(data)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
gameStore.connection?.off('date')
|
||||
})
|
||||
</script>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user