Compare commits
1 Commits
feature/#3
...
feature/#2
Author | SHA1 | Date | |
---|---|---|---|
175d7c6199 |
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": [
|
"recommendations": [
|
||||||
"Vue.volar",
|
"Vue.volar",
|
||||||
|
"dbaeumer.vscode-eslint",
|
||||||
"esbenp.prettier-vscode"
|
"esbenp.prettier-vscode"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
1936
package-lock.json
generated
1936
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -11,6 +11,7 @@
|
|||||||
"test:unit": "vitest",
|
"test:unit": "vitest",
|
||||||
"build-only": "vite build",
|
"build-only": "vite build",
|
||||||
"type-check": "vue-tsc --build --force",
|
"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/"
|
"format": "prettier --write src/"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
@ -27,13 +28,18 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@ianvs/prettier-plugin-sort-imports": "^4.4.0",
|
"@ianvs/prettier-plugin-sort-imports": "^4.4.0",
|
||||||
|
"@rushstack/eslint-patch": "^1.10.3",
|
||||||
"@tsconfig/node20": "^20.1.4",
|
"@tsconfig/node20": "^20.1.4",
|
||||||
"@types/jsdom": "^21.1.7",
|
"@types/jsdom": "^21.1.7",
|
||||||
"@types/node": "^20.14.11",
|
"@types/node": "^20.14.11",
|
||||||
"@vitejs/plugin-vue": "^5.0.5",
|
"@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/test-utils": "^2.4.6",
|
||||||
"@vue/tsconfig": "^0.5.1",
|
"@vue/tsconfig": "^0.5.1",
|
||||||
"autoprefixer": "^10.4.19",
|
"autoprefixer": "^10.4.19",
|
||||||
|
"eslint": "^8.57.0",
|
||||||
|
"eslint-plugin-vue": "^9.27.0",
|
||||||
"jsdom": "^24.1.1",
|
"jsdom": "^24.1.1",
|
||||||
"npm-run-all2": "^6.2.3",
|
"npm-run-all2": "^6.2.3",
|
||||||
"phaser3-rex-plugins": "^1.80.8",
|
"phaser3-rex-plugins": "^1.80.8",
|
||||||
|
@ -41,7 +41,9 @@ watch(
|
|||||||
)
|
)
|
||||||
|
|
||||||
// #209: Play sound when a button is pressed
|
// #209: Play sound when a button is pressed
|
||||||
// @TODO: Not all button-like elements will actually be a button, so we need to find a better way to do this
|
/**
|
||||||
|
* @TODO: Not all button-like elements will actually be a button, so we need to find a better way to do this
|
||||||
|
*/
|
||||||
addEventListener('click', (event) => {
|
addEventListener('click', (event) => {
|
||||||
if (!(event.target instanceof HTMLButtonElement)) {
|
if (!(event.target instanceof HTMLButtonElement)) {
|
||||||
return
|
return
|
||||||
|
@ -242,11 +242,15 @@ export type Chat = {
|
|||||||
|
|
||||||
export type WorldSettings = {
|
export type WorldSettings = {
|
||||||
date: Date
|
date: Date
|
||||||
weatherState: WeatherState
|
isRainEnabled: boolean
|
||||||
|
isFogEnabled: boolean
|
||||||
|
fogDensity: number
|
||||||
}
|
}
|
||||||
|
|
||||||
export type WeatherState = {
|
export type WeatherState = {
|
||||||
|
isRainEnabled: boolean
|
||||||
rainPercentage: number
|
rainPercentage: number
|
||||||
|
isFogEnabled: boolean
|
||||||
fogDensity: number
|
fogDensity: number
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,7 +1,3 @@
|
|||||||
import config from '@/application/config'
|
|
||||||
import type { HttpResponse } from '@/application/types'
|
|
||||||
import type { BaseStorage } from '@/storage/baseStorage'
|
|
||||||
|
|
||||||
export function uuidv4() {
|
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))
|
return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) => (+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16))
|
||||||
}
|
}
|
||||||
@ -27,26 +23,3 @@ export function getDomain() {
|
|||||||
|
|
||||||
return window.location.hostname.split('.').slice(-2).join('.')
|
return window.location.hostname.split('.').slice(-2).join('.')
|
||||||
}
|
}
|
||||||
|
|
||||||
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
|
|
||||||
}
|
|
||||||
|
|
||||||
const items = response.data ?? []
|
|
||||||
|
|
||||||
for (const item of items) {
|
|
||||||
let overwrite = false
|
|
||||||
const existingItem = await storage.get(item.id)
|
|
||||||
|
|
||||||
if (!existingItem || item.updatedAt > existingItem.updatedAt) {
|
|
||||||
overwrite = true
|
|
||||||
}
|
|
||||||
|
|
||||||
await storage.add(item, overwrite)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
@ -31,6 +31,12 @@ body {
|
|||||||
@apply outline-offset-2;
|
@apply outline-offset-2;
|
||||||
@apply rounded-sm;
|
@apply rounded-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media only screen and (orientation:portrait) and (max-width: 768px) {
|
||||||
|
.portrait-mode-notice {
|
||||||
|
@apply block;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
|
@ -10,174 +10,157 @@ import { useMapStore } from '@/stores/mapStore'
|
|||||||
import { Scene } from 'phavuer'
|
import { Scene } from 'phavuer'
|
||||||
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||||
|
|
||||||
// Types
|
|
||||||
interface LightConfig {
|
|
||||||
SUNRISE_HOUR: number
|
|
||||||
SUNSET_HOUR: number
|
|
||||||
DAY_STRENGTH: number
|
|
||||||
NIGHT_STRENGTH: number
|
|
||||||
TRANSITION_HOURS: number
|
|
||||||
}
|
|
||||||
|
|
||||||
interface EffectObjects {
|
|
||||||
light: Phaser.GameObjects.Graphics | null
|
|
||||||
rain: Phaser.GameObjects.Particles.ParticleEmitter | null
|
|
||||||
fog: Phaser.GameObjects.Sprite | null
|
|
||||||
}
|
|
||||||
|
|
||||||
interface EffectValues {
|
|
||||||
light?: number
|
|
||||||
rain?: number
|
|
||||||
fog?: number
|
|
||||||
[key: string]: number | undefined
|
|
||||||
}
|
|
||||||
|
|
||||||
// Constants
|
// Constants
|
||||||
const LIGHT_CONFIG: LightConfig = {
|
const LIGHT_CONFIG = {
|
||||||
SUNRISE_HOUR: 6,
|
SUNRISE_HOUR: 6,
|
||||||
SUNSET_HOUR: 20,
|
SUNSET_HOUR: 20,
|
||||||
DAY_STRENGTH: 100,
|
DAY_STRENGTH: 100,
|
||||||
NIGHT_STRENGTH: 30,
|
NIGHT_STRENGTH: 30
|
||||||
TRANSITION_HOURS: 3
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Composables
|
// Stores and refs
|
||||||
const useEffects = () => {
|
|
||||||
const effects = ref<EffectObjects>({
|
|
||||||
light: null,
|
|
||||||
rain: null,
|
|
||||||
fog: null
|
|
||||||
})
|
|
||||||
|
|
||||||
const initializeEffects = (scene: Phaser.Scene) => {
|
|
||||||
effects.value.light = scene.add.graphics().setDepth(1000)
|
|
||||||
|
|
||||||
effects.value.rain = 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.value.rain.stop()
|
|
||||||
|
|
||||||
effects.value.fog = scene.add
|
|
||||||
.sprite(window.innerWidth / 2, window.innerHeight / 2, 'fog')
|
|
||||||
.setScale(2)
|
|
||||||
.setAlpha(0)
|
|
||||||
.setDepth(950)
|
|
||||||
}
|
|
||||||
|
|
||||||
const applyEffects = (effectValues: EffectValues) => {
|
|
||||||
if (effects.value.light) {
|
|
||||||
const darkness = 1 - (effectValues.light ?? 0) / 100
|
|
||||||
effects.value.light.clear().fillStyle(0x000000, darkness).fillRect(0, 0, window.innerWidth, window.innerHeight)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (effects.value.rain) {
|
|
||||||
if (effectValues.rain) {
|
|
||||||
effects.value.rain.start().setQuantity(effectValues.rain / 10)
|
|
||||||
} else {
|
|
||||||
effects.value.rain.stop()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (effects.value.fog && effectValues.fog !== undefined) {
|
|
||||||
effects.value.fog.setAlpha(effectValues.fog / 100)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleResize = () => {
|
|
||||||
if (effects.value.rain) {
|
|
||||||
effects.value.rain.updateConfig({ x: { min: 0, max: window.innerWidth } })
|
|
||||||
}
|
|
||||||
if (effects.value.fog) {
|
|
||||||
effects.value.fog.setPosition(window.innerWidth / 2, window.innerHeight / 2)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return { effects, initializeEffects, applyEffects, handleResize }
|
|
||||||
}
|
|
||||||
|
|
||||||
// Store instances
|
|
||||||
const gameStore = useGameStore()
|
const gameStore = useGameStore()
|
||||||
const mapStore = useMapStore()
|
const mapStore = useMapStore()
|
||||||
const mapStorage = new MapStorage()
|
const mapStorage = new MapStorage()
|
||||||
|
|
||||||
// State
|
|
||||||
const sceneRef = ref<Phaser.Scene | null>(null)
|
const sceneRef = ref<Phaser.Scene | null>(null)
|
||||||
|
const mapEffectsReady = ref(false)
|
||||||
const mapObject = ref<Map | null>(null)
|
const mapObject = ref<Map | null>(null)
|
||||||
|
|
||||||
|
// 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>({
|
const weatherState = ref<WeatherState>({
|
||||||
|
isRainEnabled: false,
|
||||||
rainPercentage: 0,
|
rainPercentage: 0,
|
||||||
|
isFogEnabled: false,
|
||||||
fogDensity: 0
|
fogDensity: 0
|
||||||
})
|
})
|
||||||
|
|
||||||
// Effects management
|
// Scene setup
|
||||||
const { effects, initializeEffects, applyEffects, handleResize } = useEffects()
|
const preloadScene = (scene: Phaser.Scene) => {
|
||||||
|
|
||||||
// Utility functions
|
|
||||||
const lerp = (x: number, y: number, a: number): number => x * (1 - a) + y * a
|
|
||||||
|
|
||||||
const calculateLightStrength = (time: Date): number => {
|
|
||||||
const hour = time.getHours()
|
|
||||||
const minute = time.getMinutes()
|
|
||||||
|
|
||||||
if (hour >= LIGHT_CONFIG.SUNSET_HOUR - LIGHT_CONFIG.TRANSITION_HOURS && hour < LIGHT_CONFIG.SUNSET_HOUR) {
|
|
||||||
return lerp(LIGHT_CONFIG.DAY_STRENGTH, LIGHT_CONFIG.NIGHT_STRENGTH, (hour + minute / 60 - (LIGHT_CONFIG.SUNSET_HOUR - LIGHT_CONFIG.TRANSITION_HOURS)) / LIGHT_CONFIG.TRANSITION_HOURS)
|
|
||||||
} else if (hour >= LIGHT_CONFIG.SUNRISE_HOUR && hour < LIGHT_CONFIG.SUNRISE_HOUR + LIGHT_CONFIG.TRANSITION_HOURS) {
|
|
||||||
return lerp(LIGHT_CONFIG.NIGHT_STRENGTH, LIGHT_CONFIG.DAY_STRENGTH, (hour + minute / 60 - LIGHT_CONFIG.SUNRISE_HOUR) / LIGHT_CONFIG.TRANSITION_HOURS)
|
|
||||||
} else if (hour > LIGHT_CONFIG.SUNRISE_HOUR && hour < LIGHT_CONFIG.SUNSET_HOUR) {
|
|
||||||
return LIGHT_CONFIG.DAY_STRENGTH
|
|
||||||
}
|
|
||||||
return LIGHT_CONFIG.NIGHT_STRENGTH
|
|
||||||
}
|
|
||||||
|
|
||||||
// Scene handlers
|
|
||||||
const preloadScene = (scene: Phaser.Scene): void => {
|
|
||||||
scene.load.image('raindrop', 'assets/raindrop.png')
|
scene.load.image('raindrop', 'assets/raindrop.png')
|
||||||
scene.load.image('fog', 'assets/fog.png')
|
scene.load.image('fog', 'assets/fog.png')
|
||||||
}
|
}
|
||||||
|
|
||||||
const createScene = (scene: Phaser.Scene): void => {
|
const createScene = (scene: Phaser.Scene) => {
|
||||||
sceneRef.value = scene
|
sceneRef.value = scene
|
||||||
initializeEffects(scene)
|
initializeEffects(scene)
|
||||||
setupSocketListeners()
|
setupSocketListeners()
|
||||||
}
|
}
|
||||||
|
|
||||||
const updateScene = (): void => {
|
const loadMap = async () => {
|
||||||
const timeBasedLight = calculateLightStrength(gameStore.world.date)
|
|
||||||
const mapEffects =
|
|
||||||
mapObject.value?.mapEffects?.reduce<Record<string, number>>(
|
|
||||||
(acc, curr) => ({
|
|
||||||
...acc,
|
|
||||||
[curr.effect]: curr.strength
|
|
||||||
}),
|
|
||||||
{}
|
|
||||||
) ?? {}
|
|
||||||
|
|
||||||
const finalEffects: EffectValues = {
|
|
||||||
...mapEffects,
|
|
||||||
light: timeBasedLight,
|
|
||||||
rain: weatherState.value.rainPercentage,
|
|
||||||
fog: weatherState.value.fogDensity
|
|
||||||
}
|
|
||||||
|
|
||||||
applyEffects(finalEffects)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Map management
|
|
||||||
const loadMap = async (): Promise<void> => {
|
|
||||||
if (!mapStore.mapId) return
|
if (!mapStore.mapId) return
|
||||||
mapObject.value = await mapStorage.get(mapStore.mapId)
|
mapObject.value = await mapStorage.get(mapStore.mapId)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Socket handlers
|
// Watch for mapId changes and load map when it's available
|
||||||
const setupSocketListeners = (): void => {
|
watch(
|
||||||
|
() => mapStore.mapId,
|
||||||
|
async (newMapId) => {
|
||||||
|
if (newMapId) {
|
||||||
|
mapEffectsReady.value = false
|
||||||
|
await loadMap()
|
||||||
|
updateScene()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
)
|
||||||
|
|
||||||
|
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 mapEffects = mapObject.value?.mapEffects?.reduce(
|
||||||
|
(acc, curr) => ({
|
||||||
|
...acc,
|
||||||
|
[curr.effect]: curr.strength
|
||||||
|
}),
|
||||||
|
{}
|
||||||
|
) as { [key: string]: number }
|
||||||
|
|
||||||
|
// Only update effects once mapEffects are loaded
|
||||||
|
if (!mapEffectsReady.value) {
|
||||||
|
if (mapObject.value) {
|
||||||
|
mapEffectsReady.value = true
|
||||||
|
} else {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const finalEffects =
|
||||||
|
mapEffects && Object.keys(mapEffects).length
|
||||||
|
? mapEffects
|
||||||
|
: {
|
||||||
|
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) => {
|
gameStore.connection?.emit('weather', (response: WeatherState) => {
|
||||||
weatherState.value = response
|
weatherState.value = response
|
||||||
updateScene()
|
updateScene()
|
||||||
@ -191,25 +174,21 @@ const setupSocketListeners = (): void => {
|
|||||||
gameStore.connection?.on('date', updateScene)
|
gameStore.connection?.on('date', updateScene)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Watchers
|
const handleResize = () => {
|
||||||
watch(
|
if (effects.rain.value) effects.rain.value.updateConfig({ x: { min: 0, max: window.innerWidth } })
|
||||||
() => mapStore.mapId,
|
if (effects.fog.value) effects.fog.value.setPosition(window.innerWidth / 2, window.innerHeight / 2)
|
||||||
async (newMapId) => {
|
}
|
||||||
if (newMapId) {
|
|
||||||
await loadMap()
|
|
||||||
updateScene()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
|
// Lifecycle
|
||||||
watch(
|
watch(
|
||||||
() => mapObject.value,
|
() => mapObject.value,
|
||||||
() => {
|
() => {
|
||||||
|
mapEffectsReady.value = false
|
||||||
updateScene()
|
updateScene()
|
||||||
}
|
},
|
||||||
|
{ deep: true }
|
||||||
)
|
)
|
||||||
|
|
||||||
// Lifecycle hooks
|
|
||||||
onMounted(() => window.addEventListener('resize', handleResize))
|
onMounted(() => window.addEventListener('resize', handleResize))
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
|
@ -55,10 +55,12 @@ import type { MapObject } from '@/application/types'
|
|||||||
import ChipsInput from '@/components/forms/ChipsInput.vue'
|
import ChipsInput from '@/components/forms/ChipsInput.vue'
|
||||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||||
import { useGameStore } from '@/stores/gameStore'
|
import { useGameStore } from '@/stores/gameStore'
|
||||||
|
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||||
|
|
||||||
const gameStore = useGameStore()
|
const gameStore = useGameStore()
|
||||||
const assetManagerStore = useAssetManagerStore()
|
const assetManagerStore = useAssetManagerStore()
|
||||||
|
const mapEditorStore = useMapEditorStore()
|
||||||
|
|
||||||
const selectedMapObject = computed(() => assetManagerStore.selectedMapObject)
|
const selectedMapObject = computed(() => assetManagerStore.selectedMapObject)
|
||||||
|
|
||||||
@ -103,6 +105,10 @@ function refreshObjectList(unsetSelectedMapObject = true) {
|
|||||||
if (unsetSelectedMapObject) {
|
if (unsetSelectedMapObject) {
|
||||||
assetManagerStore.setSelectedMapObject(null)
|
assetManagerStore.setSelectedMapObject(null)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (mapEditorStore.active) {
|
||||||
|
mapEditorStore.setMapObjectList(response)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -26,7 +26,6 @@
|
|||||||
import config from '@/application/config'
|
import config from '@/application/config'
|
||||||
import type { Tile } from '@/application/types'
|
import type { Tile } from '@/application/types'
|
||||||
import ChipsInput from '@/components/forms/ChipsInput.vue'
|
import ChipsInput from '@/components/forms/ChipsInput.vue'
|
||||||
import { TileStorage } from '@/storage/storages'
|
|
||||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||||
import { useGameStore } from '@/stores/gameStore'
|
import { useGameStore } from '@/stores/gameStore'
|
||||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||||
@ -34,7 +33,7 @@ import { computed, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
|
|||||||
|
|
||||||
const gameStore = useGameStore()
|
const gameStore = useGameStore()
|
||||||
const assetManagerStore = useAssetManagerStore()
|
const assetManagerStore = useAssetManagerStore()
|
||||||
const tileStorage = new TileStorage()
|
const mapEditorStore = useMapEditorStore()
|
||||||
|
|
||||||
const selectedTile = computed(() => assetManagerStore.selectedTile)
|
const selectedTile = computed(() => assetManagerStore.selectedTile)
|
||||||
|
|
||||||
@ -56,13 +55,12 @@ watch(selectedTile, (tile: Tile | null) => {
|
|||||||
tileTags.value = tile.tags
|
tileTags.value = tile.tags
|
||||||
})
|
})
|
||||||
|
|
||||||
async function deleteTile() {
|
function deleteTile() {
|
||||||
gameStore.connection?.emit('gm:tile:delete', { id: selectedTile.value?.id }, async (response: boolean) => {
|
gameStore.connection?.emit('gm:tile:delete', { id: selectedTile.value?.id }, (response: boolean) => {
|
||||||
if (!response) {
|
if (!response) {
|
||||||
console.error('Failed to delete tile')
|
console.error('Failed to delete tile')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
await tileStorage.delete(selectedTile.value!.id)
|
|
||||||
refreshTileList()
|
refreshTileList()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -74,6 +72,10 @@ function refreshTileList(unsetSelectedTile = true) {
|
|||||||
if (unsetSelectedTile) {
|
if (unsetSelectedTile) {
|
||||||
assetManagerStore.setSelectedTile(null)
|
assetManagerStore.setSelectedTile(null)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (mapEditorStore.active) {
|
||||||
|
mapEditorStore.setTileList(response)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,20 +0,0 @@
|
|||||||
<template>
|
|
||||||
<MapTiles @tileMap:create="tileMap = $event" />
|
|
||||||
<PlacedMapObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
|
|
||||||
<MapEventTiles v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
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 { useMapEditorStore } from '@/stores/mapEditorStore'
|
|
||||||
import { onMounted, onUnmounted, shallowRef } from 'vue'
|
|
||||||
|
|
||||||
const mapEditorStore = useMapEditorStore()
|
|
||||||
const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
mapEditorStore.reset()
|
|
||||||
})
|
|
||||||
</script>
|
|
72
src/components/gameMaster/mapEditor/MapEditor.vue
Normal file
72
src/components/gameMaster/mapEditor/MapEditor.vue
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
<template>
|
||||||
|
<MapTiles @tileMap:create="tileMap = $event" />
|
||||||
|
<PlacedMapObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
|
||||||
|
<MapEventTiles v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
|
||||||
|
|
||||||
|
<Toolbar @save="save" @clear="clear" />
|
||||||
|
|
||||||
|
<MapList />
|
||||||
|
<TileList />
|
||||||
|
<ObjectList />
|
||||||
|
|
||||||
|
<MapSettings />
|
||||||
|
<TeleportModal />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { type Map } 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 MapList from '@/components/gameMaster/mapEditor/partials/MapList.vue'
|
||||||
|
import ObjectList from '@/components/gameMaster/mapEditor/partials/MapObjectList.vue'
|
||||||
|
import MapSettings from '@/components/gameMaster/mapEditor/partials/MapSettings.vue'
|
||||||
|
import TeleportModal from '@/components/gameMaster/mapEditor/partials/TeleportModal.vue'
|
||||||
|
import TileList from '@/components/gameMaster/mapEditor/partials/TileList.vue'
|
||||||
|
import Toolbar from '@/components/gameMaster/mapEditor/partials/Toolbar.vue'
|
||||||
|
import { useGameStore } from '@/stores/gameStore'
|
||||||
|
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||||
|
import { onUnmounted, shallowRef } from 'vue'
|
||||||
|
|
||||||
|
const gameStore = useGameStore()
|
||||||
|
const mapEditorStore = useMapEditorStore()
|
||||||
|
|
||||||
|
const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
|
||||||
|
|
||||||
|
function clear() {
|
||||||
|
if (!mapEditorStore.map) return
|
||||||
|
|
||||||
|
// Clear objects, event tiles and tiles
|
||||||
|
mapEditorStore.map.placedMapObjects = []
|
||||||
|
mapEditorStore.map.mapEventTiles = []
|
||||||
|
mapEditorStore.triggerClearTiles()
|
||||||
|
}
|
||||||
|
|
||||||
|
function save() {
|
||||||
|
if (!mapEditorStore.map) return
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
mapId: mapEditorStore.map.id,
|
||||||
|
name: mapEditorStore.mapSettings.name,
|
||||||
|
width: mapEditorStore.mapSettings.width,
|
||||||
|
height: mapEditorStore.mapSettings.height,
|
||||||
|
tiles: mapEditorStore.map.tiles,
|
||||||
|
pvp: mapEditorStore.map.pvp,
|
||||||
|
mapEffects: mapEditorStore.map.mapEffects?.map(({ id, effect, strength }) => ({ id, effect, strength })) ?? [],
|
||||||
|
mapEventTiles: mapEditorStore.map.mapEventTiles?.map(({ id, type, positionX, positionY, teleport }) => ({ id, type, positionX, positionY, teleport })) ?? [],
|
||||||
|
placedMapObjects: mapEditorStore.map.placedMapObjects?.map(({ id, mapObject, depth, isRotated, positionX, positionY }) => ({ id, mapObject, depth, isRotated, positionX, positionY })) ?? []
|
||||||
|
}
|
||||||
|
|
||||||
|
if (mapEditorStore.isSettingsModalShown) {
|
||||||
|
mapEditorStore.toggleSettingsModal()
|
||||||
|
}
|
||||||
|
|
||||||
|
gameStore.connection?.emit('gm:map:update', data, (response: Map) => {
|
||||||
|
mapEditorStore.setMap(response)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
mapEditorStore.reset()
|
||||||
|
})
|
||||||
|
</script>
|
@ -5,19 +5,17 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import config from '@/application/config'
|
import config from '@/application/config'
|
||||||
import Controls from '@/components/utilities/Controls.vue'
|
import Controls from '@/components/utilities/Controls.vue'
|
||||||
import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/mapComposable'
|
import { createTileArray, getTile, loadAllTilesIntoScene, placeTile, setLayerTiles } from '@/composables/mapComposable'
|
||||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
|
||||||
import { TileStorage } from '@/storage/storages'
|
import { TileStorage } from '@/storage/storages'
|
||||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||||
import { useScene } from 'phavuer'
|
import { useScene } from 'phavuer'
|
||||||
import { onMounted, onUnmounted, shallowRef, watch } from 'vue'
|
import { onBeforeMount, onMounted, onUnmounted, shallowRef, watch } from 'vue'
|
||||||
|
|
||||||
import Tileset = Phaser.Tilemaps.Tileset
|
import Tileset = Phaser.Tilemaps.Tileset
|
||||||
|
|
||||||
const emit = defineEmits(['tileMap:create'])
|
const emit = defineEmits(['tileMap:create'])
|
||||||
|
|
||||||
const scene = useScene()
|
const scene = useScene()
|
||||||
const mapEditor = useMapEditorComposable()
|
|
||||||
const mapEditorStore = useMapEditorStore()
|
const mapEditorStore = useMapEditorStore()
|
||||||
const tileStorage = new TileStorage()
|
const tileStorage = new TileStorage()
|
||||||
|
|
||||||
@ -26,8 +24,8 @@ const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
|
|||||||
|
|
||||||
function createTileMap() {
|
function createTileMap() {
|
||||||
const mapData = new Phaser.Tilemaps.MapData({
|
const mapData = new Phaser.Tilemaps.MapData({
|
||||||
width: mapEditor.currentMap.value?.width,
|
width: mapEditorStore.map?.width,
|
||||||
height: mapEditor.currentMap.value?.height,
|
height: mapEditorStore.map?.height,
|
||||||
tileWidth: config.tile_size.width,
|
tileWidth: config.tile_size.width,
|
||||||
tileHeight: config.tile_size.height,
|
tileHeight: config.tile_size.height,
|
||||||
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
|
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
|
||||||
@ -61,7 +59,7 @@ function pencil(pointer: Phaser.Input.Pointer) {
|
|||||||
if (!tileMap.value || !tileLayer.value) return
|
if (!tileMap.value || !tileLayer.value) return
|
||||||
|
|
||||||
// Check if map is set
|
// Check if map is set
|
||||||
if (!mapEditor.currentMap.value) return
|
if (!mapEditorStore.map) return
|
||||||
|
|
||||||
// Check if tool is pencil
|
// Check if tool is pencil
|
||||||
if (mapEditorStore.tool !== 'pencil') return
|
if (mapEditorStore.tool !== 'pencil') return
|
||||||
@ -86,14 +84,14 @@ function pencil(pointer: Phaser.Input.Pointer) {
|
|||||||
placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, mapEditorStore.selectedTile)
|
placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, mapEditorStore.selectedTile)
|
||||||
|
|
||||||
// Adjust mapEditorStore.map.tiles
|
// Adjust mapEditorStore.map.tiles
|
||||||
mapEditor.currentMap.value.tiles[tile.y][tile.x] = mapEditor.currentMap.value.tiles[tile.y][tile.x]
|
mapEditorStore.map.tiles[tile.y][tile.x] = mapEditorStore.selectedTile
|
||||||
}
|
}
|
||||||
|
|
||||||
function eraser(pointer: Phaser.Input.Pointer) {
|
function eraser(pointer: Phaser.Input.Pointer) {
|
||||||
if (!tileMap.value || !tileLayer.value) return
|
if (!tileMap.value || !tileLayer.value) return
|
||||||
|
|
||||||
// Check if map is set
|
// Check if map is set
|
||||||
if (!mapEditor.currentMap.value) return
|
if (!mapEditorStore.map) return
|
||||||
|
|
||||||
// Check if tool is pencil
|
// Check if tool is pencil
|
||||||
if (mapEditorStore.tool !== 'eraser') return
|
if (mapEditorStore.tool !== 'eraser') return
|
||||||
@ -118,14 +116,14 @@ function eraser(pointer: Phaser.Input.Pointer) {
|
|||||||
placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, 'blank_tile')
|
placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, 'blank_tile')
|
||||||
|
|
||||||
// Adjust mapEditorStore.map.tiles
|
// Adjust mapEditorStore.map.tiles
|
||||||
mapEditor.currentMap.value.tiles[tile.y][tile.x] = 'blank_tile'
|
mapEditorStore.map.tiles[tile.y][tile.x] = 'blank_tile'
|
||||||
}
|
}
|
||||||
|
|
||||||
function paint(pointer: Phaser.Input.Pointer) {
|
function paint(pointer: Phaser.Input.Pointer) {
|
||||||
if (!tileMap.value || !tileLayer.value) return
|
if (!tileMap.value || !tileLayer.value) return
|
||||||
|
|
||||||
// Check if map is set
|
// Check if map is set
|
||||||
if (!mapEditor.currentMap.value) return
|
if (!mapEditorStore.map) return
|
||||||
|
|
||||||
// Check if tool is pencil
|
// Check if tool is pencil
|
||||||
if (mapEditorStore.tool !== 'paint') return
|
if (mapEditorStore.tool !== 'paint') return
|
||||||
@ -146,7 +144,7 @@ function paint(pointer: Phaser.Input.Pointer) {
|
|||||||
setLayerTiles(tileMap.value, tileLayer.value, createTileArray(tileMap.value.width, tileMap.value.height, mapEditorStore.selectedTile))
|
setLayerTiles(tileMap.value, tileLayer.value, createTileArray(tileMap.value.width, tileMap.value.height, mapEditorStore.selectedTile))
|
||||||
|
|
||||||
// Adjust mapEditorStore.map.tiles
|
// Adjust mapEditorStore.map.tiles
|
||||||
mapEditor.currentMap.value.tiles = createTileArray(tileMap.value.width, tileMap.value.height, mapEditor.currentMap.value.tiles)
|
mapEditorStore.map.tiles = createTileArray(tileMap.value.width, tileMap.value.height, mapEditorStore.selectedTile)
|
||||||
}
|
}
|
||||||
|
|
||||||
// When alt is pressed, and the pointer is down, select the tile that the pointer is over
|
// When alt is pressed, and the pointer is down, select the tile that the pointer is over
|
||||||
@ -154,7 +152,7 @@ function tilePicker(pointer: Phaser.Input.Pointer) {
|
|||||||
if (!tileMap.value || !tileLayer.value) return
|
if (!tileMap.value || !tileLayer.value) return
|
||||||
|
|
||||||
// Check if map is set
|
// Check if map is set
|
||||||
if (!mapEditor.currentMap.value) return
|
if (!mapEditorStore.map) return
|
||||||
|
|
||||||
// Check if tool is pencil
|
// Check if tool is pencil
|
||||||
if (mapEditorStore.tool !== 'pencil') return
|
if (mapEditorStore.tool !== 'pencil') return
|
||||||
@ -176,35 +174,34 @@ function tilePicker(pointer: Phaser.Input.Pointer) {
|
|||||||
if (!tile) return
|
if (!tile) return
|
||||||
|
|
||||||
// Select the tile
|
// Select the tile
|
||||||
mapEditorStore.setSelectedMapObject(mapEditor.currentMap.value.tiles[tile.y][tile.x])
|
mapEditorStore.setSelectedTile(mapEditorStore.map.tiles[tile.y][tile.x])
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => mapEditorStore.shouldClearTiles,
|
() => mapEditorStore.shouldClearTiles,
|
||||||
(shouldClear) => {
|
(shouldClear) => {
|
||||||
if (shouldClear && mapEditor.currentMap.value && tileMap.value && tileLayer.value) {
|
if (shouldClear && mapEditorStore.map && tileMap.value && tileLayer.value) {
|
||||||
const blankTiles = createTileArray(tileMap.value.width, tileMap.value.height, 'blank_tile')
|
const blankTiles = createTileArray(tileMap.value.width, tileMap.value.height, 'blank_tile')
|
||||||
setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
|
setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
|
||||||
mapEditor.currentMap.value.tiles = blankTiles
|
mapEditorStore.map.tiles = blankTiles
|
||||||
mapEditorStore.resetClearTilesFlag()
|
mapEditorStore.resetClearTilesFlag()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
if (!mapEditor.currentMap.value?.tiles) return
|
if (!mapEditorStore.map?.tiles) return
|
||||||
console.log(mapEditor.currentMap.value)
|
|
||||||
|
|
||||||
tileMap.value = createTileMap()
|
tileMap.value = createTileMap()
|
||||||
tileLayer.value = await createTileLayer(tileMap.value)
|
tileLayer.value = await createTileLayer(tileMap.value)
|
||||||
|
|
||||||
// First fill the entire map with blank tiles using current map dimensions
|
// First fill the entire map with blank tiles using current map dimensions
|
||||||
const blankTiles = createTileArray(mapEditor.currentMap.value.width, mapEditor.currentMap.value.height, 'blank_tile')
|
const blankTiles = createTileArray(mapEditorStore.map.width, mapEditorStore.map.height, 'blank_tile')
|
||||||
|
|
||||||
// Then overlay the map tiles, but only within the current map dimensions
|
// Then overlay the map tiles, but only within the current map dimensions
|
||||||
const mapTiles = mapEditor.currentMap.value.tiles
|
const mapTiles = mapEditorStore.map.tiles
|
||||||
for (let y = 0; y < mapEditor.currentMap.value.height; y++) {
|
for (let y = 0; y < mapEditorStore.map.height; y++) {
|
||||||
for (let x = 0; x < mapEditor.currentMap.value.width; x++) {
|
for (let x = 0; x < mapEditorStore.map.width; x++) {
|
||||||
if (mapTiles[y] && mapTiles[y][x] !== undefined) {
|
if (mapTiles[y] && mapTiles[y][x] !== undefined) {
|
||||||
blankTiles[y][x] = mapTiles[y][x]
|
blankTiles[y][x] = mapTiles[y][x]
|
||||||
}
|
}
|
||||||
|
@ -56,6 +56,7 @@ function pencil(pointer: Phaser.Input.Pointer) {
|
|||||||
id: uuidv4(),
|
id: uuidv4(),
|
||||||
map: mapEditorStore.map,
|
map: mapEditorStore.map,
|
||||||
mapObject: mapEditorStore.selectedMapObject,
|
mapObject: mapEditorStore.selectedMapObject,
|
||||||
|
depth: 0,
|
||||||
isRotated: false,
|
isRotated: false,
|
||||||
positionX: tile.x,
|
positionX: tile.x,
|
||||||
positionY: tile.y
|
positionY: tile.y
|
||||||
|
@ -1,8 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<Modal :isModalOpen="mapEditorStore.isCreateMapModalShown" @modal:close="() => mapEditorStore.toggleCreateMapModal()" :modal-width="300" :modal-height="420" :is-resizable="false" :bg-style="'none'">
|
<Modal :isModalOpen="true" @modal:close="() => mapEditorStore.toggleCreateMapModal()" :modal-width="300" :modal-height="420" :is-resizable="false" :bg-style="'none'">
|
||||||
<template #modalHeader>
|
<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 map</h3>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #modalBody>
|
<template #modalBody>
|
||||||
<div class="m-4">
|
<div class="m-4">
|
||||||
<form method="post" @submit.prevent="submit" class="inline">
|
<form method="post" @submit.prevent="submit" class="inline">
|
||||||
@ -21,7 +22,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="form-field-full">
|
<div class="form-field-full">
|
||||||
<label for="name">PVP enabled</label>
|
<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="false">No</option>
|
||||||
<option :value="true">Yes</option>
|
<option :value="true">Yes</option>
|
||||||
</select>
|
</select>
|
||||||
@ -37,48 +38,21 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { Map } from '@/application/types'
|
import type { Map } from '@/application/types'
|
||||||
import Modal from '@/components/utilities/Modal.vue'
|
import Modal from '@/components/utilities/Modal.vue'
|
||||||
import { MapStorage } from '@/storage/storages'
|
|
||||||
import { useGameStore } from '@/stores/gameStore'
|
import { useGameStore } from '@/stores/gameStore'
|
||||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
|
|
||||||
const emit = defineEmits(['create'])
|
|
||||||
|
|
||||||
const gameStore = useGameStore()
|
const gameStore = useGameStore()
|
||||||
const mapEditorStore = useMapEditorStore()
|
const mapEditorStore = useMapEditorStore()
|
||||||
const mapStorage = new MapStorage()
|
|
||||||
|
|
||||||
const name = ref('')
|
const name = ref('')
|
||||||
const width = ref(0)
|
const width = ref(0)
|
||||||
const height = ref(0)
|
const height = ref(0)
|
||||||
const pvp = ref(false)
|
|
||||||
|
|
||||||
async function submit() {
|
function submit() {
|
||||||
gameStore.connection?.emit('gm:map:create', { name: name.value, width: width.value, height: height.value }, async (response: Map | false) => {
|
gameStore.connection?.emit('gm:map:create', { name: name.value, width: width.value, height: height.value }, (response: Map[]) => {
|
||||||
if (!response) {
|
mapEditorStore.setMapList(response)
|
||||||
gameStore.addNotification({
|
|
||||||
title: 'Error',
|
|
||||||
message: 'Failed to create map.'
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// Reset form
|
|
||||||
name.value = ''
|
|
||||||
width.value = 0
|
|
||||||
height.value = 0
|
|
||||||
pvp.value = false
|
|
||||||
|
|
||||||
// Add map to storage
|
|
||||||
|
|
||||||
console.log(response)
|
|
||||||
await mapStorage.add(response)
|
|
||||||
|
|
||||||
// Let list know to fetch new maps
|
|
||||||
emit('create')
|
|
||||||
})
|
})
|
||||||
|
|
||||||
// Close modal
|
|
||||||
mapEditorStore.toggleCreateMapModal()
|
mapEditorStore.toggleCreateMapModal()
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -1,77 +1,61 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<CreateMap v-if="mapEditorStore.isCreateMapModalShown" />
|
||||||
<Modal :is-modal-open="mapEditorStore.isMapListModalShown" @modal:close="() => mapEditorStore.toggleMapListModal()" :is-resizable="false" :modal-width="300" :modal-height="360" :bg-style="'none'">
|
<Modal :is-modal-open="mapEditorStore.isMapListModalShown" @modal:close="() => mapEditorStore.toggleMapListModal()" :is-resizable="false" :modal-width="300" :modal-height="360" :bg-style="'none'">
|
||||||
<template #modalHeader>
|
<template #modalHeader>
|
||||||
<h3 class="text-lg text-white">Maps</h3>
|
<h3 class="text-lg text-white">Maps</h3>
|
||||||
</template>
|
</template>
|
||||||
<template #modalBody>
|
<template #modalBody>
|
||||||
<div class="my-4 mx-auto h-full">
|
<div class="my-4 mx-auto">
|
||||||
<div class="text-center mb-4 px-2 flex gap-2.5">
|
<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="fetchMaps">Refresh</button>
|
||||||
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="() => mapEditorStore.toggleCreateMapModal()">New</button>
|
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="() => mapEditorStore.toggleCreateMapModal()">New</button>
|
||||||
</div>
|
</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 mapEditorStore.mapList" :key="map.id">
|
||||||
<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="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)">
|
||||||
<div class="flex gap-3 items-center w-full" @click="() => loadMap(map.id)">
|
<span>{{ map.name }}</span>
|
||||||
<span>{{ map.name }}</span>
|
<span class="ml-auto gap-1 flex">
|
||||||
<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>
|
||||||
<button class="btn-red w-7 h-7 z-50 flex items-center justify-center" @click.stop="() => deleteMap(map.id)">x</button>
|
</span>
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
||||||
<CreateMap @create="fetchMaps" v-if="mapEditorStore.isMapListModalShown" />
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { Map, UUID } from '@/application/types'
|
import type { Map, UUID } from '@/application/types'
|
||||||
import CreateMap from '@/components/gameMaster/mapEditor/partials/CreateMap.vue'
|
import CreateMap from '@/components/gameMaster/mapEditor/partials/CreateMap.vue'
|
||||||
import Modal from '@/components/utilities/Modal.vue'
|
import Modal from '@/components/utilities/Modal.vue'
|
||||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
|
||||||
import { MapStorage } from '@/storage/storages'
|
|
||||||
import { useGameStore } from '@/stores/gameStore'
|
import { useGameStore } from '@/stores/gameStore'
|
||||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||||
import { onMounted, ref } from 'vue'
|
import { onMounted } from 'vue'
|
||||||
|
|
||||||
const gameStore = useGameStore()
|
const gameStore = useGameStore()
|
||||||
const mapEditorStore = useMapEditorStore()
|
const mapEditorStore = useMapEditorStore()
|
||||||
|
|
||||||
const mapEditor = useMapEditorComposable()
|
|
||||||
const mapStorage = new MapStorage()
|
|
||||||
const mapList = ref<Map[]>([])
|
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await fetchMaps()
|
fetchMaps()
|
||||||
})
|
})
|
||||||
|
|
||||||
async function fetchMaps() {
|
function fetchMaps() {
|
||||||
mapList.value = await mapStorage.getAll()
|
gameStore.connection?.emit('gm:map:list', {}, (response: Map[]) => {
|
||||||
|
mapEditorStore.setMapList(response)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadMap(id: UUID) {
|
function loadMap(id: UUID) {
|
||||||
gameStore.connection?.emit('gm:map:request', { mapId: id }, (response: Map) => {
|
gameStore.connection?.emit('gm:map:request', { mapId: id }, (response: Map) => {
|
||||||
mapEditor.loadMap(response)
|
mapEditorStore.setMap(response)
|
||||||
})
|
})
|
||||||
mapEditorStore.toggleMapListModal()
|
mapEditorStore.toggleMapListModal()
|
||||||
}
|
}
|
||||||
|
|
||||||
async function deleteMap(id: UUID) {
|
function deleteMap(id: UUID) {
|
||||||
gameStore.connection?.emit('gm:map:delete', { mapId: id }, async (response: boolean) => {
|
gameStore.connection?.emit('gm:map:delete', { mapId: id }, () => {
|
||||||
if (!response) {
|
fetchMaps()
|
||||||
gameStore.addNotification({
|
|
||||||
title: 'Error',
|
|
||||||
message: 'Failed to delete map.'
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
await mapStorage.delete(id)
|
|
||||||
await fetchMaps()
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -44,26 +44,23 @@
|
|||||||
import config from '@/application/config'
|
import config from '@/application/config'
|
||||||
import type { MapObject } from '@/application/types'
|
import type { MapObject } from '@/application/types'
|
||||||
import Modal from '@/components/utilities/Modal.vue'
|
import Modal from '@/components/utilities/Modal.vue'
|
||||||
import { MapObjectStorage } from '@/storage/storages'
|
|
||||||
import { useGameStore } from '@/stores/gameStore'
|
import { useGameStore } from '@/stores/gameStore'
|
||||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||||
import { liveQuery } from 'dexie'
|
import { computed, onMounted, ref } from 'vue'
|
||||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
|
||||||
|
|
||||||
const mapObjectStorage = new MapObjectStorage()
|
const gameStore = useGameStore()
|
||||||
const isModalOpen = ref(false)
|
const isModalOpen = ref(false)
|
||||||
const mapEditorStore = useMapEditorStore()
|
const mapEditorStore = useMapEditorStore()
|
||||||
const searchQuery = ref('')
|
const searchQuery = ref('')
|
||||||
const selectedTags = ref<string[]>([])
|
const selectedTags = ref<string[]>([])
|
||||||
const mapObjectList = ref<MapObject[]>([])
|
|
||||||
|
|
||||||
const uniqueTags = computed(() => {
|
const uniqueTags = computed(() => {
|
||||||
const allTags = mapObjectList.value.flatMap((obj) => obj.tags || [])
|
const allTags = mapEditorStore.mapObjectList.flatMap((obj) => obj.tags || [])
|
||||||
return Array.from(new Set(allTags))
|
return Array.from(new Set(allTags))
|
||||||
})
|
})
|
||||||
|
|
||||||
const filteredMapObjects = computed(() => {
|
const filteredMapObjects = computed(() => {
|
||||||
return mapObjectList.value.filter((object) => {
|
return mapEditorStore.mapObjectList.filter((object) => {
|
||||||
const matchesSearch = !searchQuery.value || object.name.toLowerCase().includes(searchQuery.value.toLowerCase())
|
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)))
|
const matchesTags = selectedTags.value.length === 0 || (object.tags && selectedTags.value.some((tag) => object.tags.includes(tag)))
|
||||||
return matchesSearch && matchesTags
|
return matchesSearch && matchesTags
|
||||||
@ -78,23 +75,10 @@ const toggleTag = (tag: string) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let subscription: any = null
|
onMounted(async () => {
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
isModalOpen.value = true
|
isModalOpen.value = true
|
||||||
subscription = liveQuery(() => mapObjectStorage.liveQuery()).subscribe({
|
gameStore.connection?.emit('gm:mapObject:list', {}, (response: MapObject[]) => {
|
||||||
next: (result) => {
|
mapEditorStore.setMapObjectList(response)
|
||||||
mapObjectList.value = result
|
|
||||||
},
|
|
||||||
error: (error) => {
|
|
||||||
console.error('Failed to fetch tiles:', error)
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
if (subscription) {
|
|
||||||
subscription.unsubscribe()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
@ -47,53 +47,60 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { UUID } from '@/application/types'
|
|
||||||
import { uuidv4 } from '@/application/utilities'
|
|
||||||
import Modal from '@/components/utilities/Modal.vue'
|
import Modal from '@/components/utilities/Modal.vue'
|
||||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
|
||||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||||
import { ref, watch } from 'vue'
|
import { ref, watch } from 'vue'
|
||||||
|
|
||||||
const mapEditor = useMapEditorComposable()
|
|
||||||
const mapEditorStore = useMapEditorStore()
|
const mapEditorStore = useMapEditorStore()
|
||||||
const screen = ref('settings')
|
const screen = ref('settings')
|
||||||
|
|
||||||
const name = ref(mapEditor.currentMap.value?.name)
|
mapEditorStore.setMapName(mapEditorStore.map?.name)
|
||||||
const width = ref(mapEditor.currentMap.value?.width)
|
mapEditorStore.setMapWidth(mapEditorStore.map?.width)
|
||||||
const height = ref(mapEditor.currentMap.value?.height)
|
mapEditorStore.setMapHeight(mapEditorStore.map?.height)
|
||||||
const pvp = ref(mapEditor.currentMap.value?.pvp)
|
mapEditorStore.setMapPvp(mapEditorStore.map?.pvp)
|
||||||
const mapEffects = ref(mapEditor.currentMap.value?.mapEffects || [])
|
mapEditorStore.setMapEffects(mapEditorStore.map?.mapEffects)
|
||||||
|
|
||||||
|
const name = ref(mapEditorStore.mapSettings?.name)
|
||||||
|
const width = ref(mapEditorStore.mapSettings?.width)
|
||||||
|
const height = ref(mapEditorStore.mapSettings?.height)
|
||||||
|
const pvp = ref(mapEditorStore.mapSettings?.pvp)
|
||||||
|
const mapEffects = ref(mapEditorStore.mapSettings?.mapEffects || [])
|
||||||
|
|
||||||
watch(name, (value) => {
|
watch(name, (value) => {
|
||||||
mapEditor.updateProperty('name', value!)
|
mapEditorStore.setMapName(value)
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(width, (value) => {
|
watch(width, (value) => {
|
||||||
mapEditor.updateProperty('width', value!)
|
mapEditorStore.setMapWidth(value)
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(height, (value) => {
|
watch(height, (value) => {
|
||||||
mapEditor.updateProperty('height', value!)
|
mapEditorStore.setMapHeight(value)
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(pvp, (value) => {
|
watch(pvp, (value) => {
|
||||||
mapEditor.updateProperty('pvp', value!)
|
mapEditorStore.setMapPvp(value)
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(mapEffects, (value) => {
|
watch(
|
||||||
mapEditor.updateProperty('mapEffects', value!)
|
mapEffects,
|
||||||
})
|
(value) => {
|
||||||
|
mapEditorStore.setMapEffects(value)
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
)
|
||||||
|
|
||||||
const addEffect = () => {
|
const addEffect = () => {
|
||||||
mapEffects.value.push({
|
mapEffects.value.push({
|
||||||
id: uuidv4() as UUID, // Simple unique id generation
|
id: Date.now().toString(), // Simple unique id generation
|
||||||
map: mapEditor.currentMap.value!,
|
mapId: mapEditorStore.map?.id,
|
||||||
|
map: mapEditorStore.map,
|
||||||
effect: '',
|
effect: '',
|
||||||
strength: 1
|
strength: 1
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const removeEffect = (index: number) => {
|
const removeEffect = (index) => {
|
||||||
mapEffects.value.splice(index, 1)
|
mapEffects.value.splice(index, 1)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -84,27 +84,26 @@
|
|||||||
import config from '@/application/config'
|
import config from '@/application/config'
|
||||||
import type { Tile } from '@/application/types'
|
import type { Tile } from '@/application/types'
|
||||||
import Modal from '@/components/utilities/Modal.vue'
|
import Modal from '@/components/utilities/Modal.vue'
|
||||||
import { TileStorage } from '@/storage/storages'
|
import { useGameStore } from '@/stores/gameStore'
|
||||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||||
import { liveQuery } from 'dexie'
|
import { computed, onMounted, ref } from 'vue'
|
||||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
|
||||||
|
|
||||||
const tileStorage = new TileStorage()
|
const gameStore = useGameStore()
|
||||||
|
const isModalOpen = ref(false)
|
||||||
const mapEditorStore = useMapEditorStore()
|
const mapEditorStore = useMapEditorStore()
|
||||||
const searchQuery = ref('')
|
const searchQuery = ref('')
|
||||||
const selectedTags = ref<string[]>([])
|
const selectedTags = ref<string[]>([])
|
||||||
const tileCategories = ref<Map<string, string>>(new Map())
|
const tileCategories = ref<Map<string, string>>(new Map())
|
||||||
const selectedGroup = ref<{ parent: Tile; children: Tile[] } | null>(null)
|
const selectedGroup = ref<{ parent: Tile; children: Tile[] } | null>(null)
|
||||||
const tiles = ref<Tile[]>([])
|
|
||||||
|
|
||||||
const uniqueTags = computed(() => {
|
const uniqueTags = computed(() => {
|
||||||
const allTags = tiles.value.flatMap((tile) => tile.tags || [])
|
const allTags = mapEditorStore.tileList.flatMap((tile) => tile.tags || [])
|
||||||
return Array.from(new Set(allTags))
|
return Array.from(new Set(allTags))
|
||||||
})
|
})
|
||||||
|
|
||||||
const groupedTiles = computed(() => {
|
const groupedTiles = computed(() => {
|
||||||
const groups: { parent: Tile; children: Tile[] }[] = []
|
const groups: { parent: Tile; children: Tile[] }[] = []
|
||||||
const filteredTiles = tiles.value.filter((tile) => {
|
const filteredTiles = mapEditorStore.tileList.filter((tile) => {
|
||||||
const matchesSearch = !searchQuery.value || tile.name.toLowerCase().includes(searchQuery.value.toLowerCase())
|
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)))
|
const matchesTags = selectedTags.value.length === 0 || (tile.tags && selectedTags.value.some((tag) => tile.tags.includes(tag)))
|
||||||
return matchesSearch && matchesTags
|
return matchesSearch && matchesTags
|
||||||
@ -178,7 +177,6 @@ function getDominantColor(imageData: ImageData) {
|
|||||||
g = 0,
|
g = 0,
|
||||||
b = 0,
|
b = 0,
|
||||||
total = 0
|
total = 0
|
||||||
|
|
||||||
for (let i = 0; i < imageData.data.length; i += 4) {
|
for (let i = 0; i < imageData.data.length; i += 4) {
|
||||||
if (imageData.data[i + 3] > 0) {
|
if (imageData.data[i + 3] > 0) {
|
||||||
// Only consider non-transparent pixels
|
// Only consider non-transparent pixels
|
||||||
@ -188,7 +186,6 @@ function getDominantColor(imageData: ImageData) {
|
|||||||
total++
|
total++
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
r: Math.round(r / total),
|
r: Math.round(r / total),
|
||||||
g: Math.round(g / total),
|
g: Math.round(g / total),
|
||||||
@ -229,22 +226,11 @@ function isActiveTile(tile: Tile): boolean {
|
|||||||
return mapEditorStore.selectedTile === tile.id
|
return mapEditorStore.selectedTile === tile.id
|
||||||
}
|
}
|
||||||
|
|
||||||
let subscription: any = null
|
onMounted(async () => {
|
||||||
|
isModalOpen.value = true
|
||||||
onMounted(() => {
|
gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => {
|
||||||
subscription = liveQuery(() => tileStorage.liveQuery()).subscribe({
|
mapEditorStore.setTileList(response)
|
||||||
next: (result) => {
|
response.forEach((tile) => processTile(tile))
|
||||||
tiles.value = result
|
|
||||||
},
|
|
||||||
error: (error) => {
|
|
||||||
console.error('Failed to fetch tiles:', error)
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
if (subscription) {
|
|
||||||
subscription.unsubscribe()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex justify-center p-5">
|
<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 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="mapEditor.currentMap.value">
|
<div ref="toolbar" class="tools flex gap-2.5" v-if="mapEditorStore.map">
|
||||||
<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': mapEditorStore.tool === 'move' }" @click="handleClick('move')">
|
<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': mapEditorStore.tool === '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': mapEditorStore.tool !== 'move' }">(M)</span>
|
<img class="invert w-5 h-5" src="/assets/icons/mapEditor/move.svg" alt="Move camera" /> <span class="h-5" :class="{ 'ml-2.5': mapEditorStore.tool !== 'move' }">(M)</span>
|
||||||
</button>
|
</button>
|
||||||
@ -68,13 +68,13 @@
|
|||||||
|
|
||||||
<div class="w-px bg-cyan"></div>
|
<div class="w-px bg-cyan"></div>
|
||||||
|
|
||||||
<button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')"><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>
|
<button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')" v-if="mapEditorStore.map"><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>
|
</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">
|
<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="() => mapEditorStore.toggleMapListModal()">Load</button>
|
<button class="btn-cyan px-3.5" @click="() => mapEditorStore.toggleMapListModal()">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('save')" v-if="mapEditorStore.map">Save</button>
|
||||||
<button class="btn-cyan px-3.5" @click="() => emit('clear')" v-if="mapEditor.currentMap.value">Clear</button>
|
<button class="btn-cyan px-3.5" @click="() => emit('clear')" v-if="mapEditorStore.map">Clear</button>
|
||||||
<button class="btn-cyan px-3.5" @click="() => mapEditorStore.toggleActive()">Exit</button>
|
<button class="btn-cyan px-3.5" @click="() => mapEditorStore.toggleActive()">Exit</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -82,12 +82,10 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
|
||||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||||
import { onClickOutside } from '@vueuse/core'
|
import { onClickOutside } from '@vueuse/core'
|
||||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||||
|
|
||||||
const mapEditor = useMapEditorComposable()
|
|
||||||
const mapEditorStore = useMapEditorStore()
|
const mapEditorStore = useMapEditorStore()
|
||||||
|
|
||||||
const emit = defineEmits(['save', 'clear'])
|
const emit = defineEmits(['save', 'clear'])
|
||||||
|
@ -1,5 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="relative max-lg:h-dvh flex flex-row-reverse">
|
<div class="relative max-lg:h-dvh flex flex-row-reverse">
|
||||||
|
<div class="portrait-mode-notice hidden absolute h-[calc(100%_-_80px)] w-[calc(100%_-_80px)] left-0 top-0 bg-gray z-50 p-10 text-center">
|
||||||
|
<span class="text-lg">Noxious is not compatible with portrait mode on smaller screens. Please switch to landscape mode to play.</span>
|
||||||
|
</div>
|
||||||
<div class="lg:bg-gradient-to-l bg-gradient-to-b from-gray-900 to-transparent w-full lg:w-1/2 h-[65dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 z-10"></div>
|
<div class="lg:bg-gradient-to-l bg-gradient-to-b from-gray-900 to-transparent w-full lg:w-1/2 h-[65dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 z-10"></div>
|
||||||
<div class="bg-[url('/assets/login/login-bg.png')] opacity-20 w-full lg:w-1/2 h-[65dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center grayscale"></div>
|
<div class="bg-[url('/assets/login/login-bg.png')] opacity-20 w-full lg:w-1/2 h-[65dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center grayscale"></div>
|
||||||
<div class="bg-gray-900 z-20 w-full lg:w-1/2 h-[35dvh] lg:h-dvh relative"></div>
|
<div class="bg-gray-900 z-20 w-full lg:w-1/2 h-[35dvh] lg:h-dvh relative"></div>
|
||||||
|
@ -1,5 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex justify-center items-center h-dvh relative">
|
<div class="flex justify-center items-center h-dvh relative">
|
||||||
|
<div class="portrait-mode-notice hidden absolute h-[calc(100%_-_80px)] w-[calc(100%_-_80px)] left-0 top-0 bg-gray z-50 p-10 text-center">
|
||||||
|
<span class="text-lg">Noxious is not compatible with portrait mode on smaller screens. Please switch to landscape mode to play.</span>
|
||||||
|
</div>
|
||||||
<Game :config="gameConfig" @create="createGame">
|
<Game :config="gameConfig" @create="createGame">
|
||||||
<Scene name="main" @preload="preloadScene" @create="createScene">
|
<Scene name="main" @preload="preloadScene" @create="createScene">
|
||||||
<Menu />
|
<Menu />
|
||||||
|
@ -15,8 +15,11 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts" async>
|
<script setup lang="ts" async>
|
||||||
import { downloadCache } from '@/application/utilities'
|
import config from '@/application/config'
|
||||||
|
import type { HttpResponse, MapObject } from '@/application/types'
|
||||||
|
import type { BaseStorage } from '@/storage/baseStorage'
|
||||||
import { CharacterHairStorage, CharacterTypeStorage, MapObjectStorage, MapStorage, SpriteStorage, TileStorage } from '@/storage/storages'
|
import { CharacterHairStorage, CharacterTypeStorage, MapObjectStorage, MapStorage, SpriteStorage, TileStorage } from '@/storage/storages'
|
||||||
|
// import type { Map } from '@/application/types'
|
||||||
import { useGameStore } from '@/stores/gameStore'
|
import { useGameStore } from '@/stores/gameStore'
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
|
|
||||||
@ -25,13 +28,32 @@ const gameStore = useGameStore()
|
|||||||
const totalItems = ref(0)
|
const totalItems = ref(0)
|
||||||
const currentItem = ref(0)
|
const currentItem = ref(0)
|
||||||
|
|
||||||
|
async function downloadAndStore<T extends { id: string }>(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
|
||||||
|
}
|
||||||
|
|
||||||
|
const items = response.data ?? []
|
||||||
|
for (const item of items) {
|
||||||
|
await storage.add(item)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const tileStorage = new TileStorage()
|
||||||
|
const mapStorage = new MapStorage()
|
||||||
|
const mapObjectStorage = new MapObjectStorage()
|
||||||
|
|
||||||
Promise.all([
|
Promise.all([
|
||||||
downloadCache('tiles', new TileStorage()),
|
downloadAndStore('tiles', tileStorage),
|
||||||
downloadCache('maps', new MapStorage()),
|
downloadAndStore('maps', mapStorage),
|
||||||
downloadCache('map_objects', new MapObjectStorage()),
|
downloadAndStore('map_objects', mapObjectStorage),
|
||||||
downloadCache('sprites', new SpriteStorage()),
|
downloadAndStore('sprites', new SpriteStorage()),
|
||||||
downloadCache('character_types', new CharacterTypeStorage()),
|
downloadAndStore('character_types', new CharacterTypeStorage()),
|
||||||
downloadCache('character_hair', new CharacterHairStorage())
|
downloadAndStore('character_hair', new CharacterHairStorage())
|
||||||
]).then(() => {
|
]).then(() => {
|
||||||
gameStore.game.isLoaded = true
|
gameStore.game.isLoaded = true
|
||||||
})
|
})
|
||||||
|
@ -1,17 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex justify-center items-center h-dvh relative">
|
<div class="flex justify-center items-center h-dvh relative">
|
||||||
<Game :config="gameConfig" @create="createGame">
|
<Game :config="gameConfig" @create="createGame">
|
||||||
<Scene name="main" @preload="preloadScene">
|
<Scene name="main" @preload="preloadScene" @create="createScene">
|
||||||
<div v-if="!isLoaded" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-3xl font-ui">Loading...</div>
|
<MapEditor :key="JSON.stringify(`${mapEditorStore.map?.id}_${mapEditorStore.map?.createdAt}_${mapEditorStore.map?.updatedAt}`)" v-if="isLoaded" />
|
||||||
<div v-else>
|
<div v-else class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-3xl font-ui">Loading...</div>
|
||||||
<Map :key="mapEditor.currentMap.value?.id" />
|
|
||||||
<Toolbar @save="save" @clear="clear" />
|
|
||||||
<MapList />
|
|
||||||
<TileList />
|
|
||||||
<ObjectList />
|
|
||||||
<MapSettings />
|
|
||||||
<TeleportModal />
|
|
||||||
</div>
|
|
||||||
</Scene>
|
</Scene>
|
||||||
</Game>
|
</Game>
|
||||||
</div>
|
</div>
|
||||||
@ -20,24 +12,13 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import config from '@/application/config'
|
import config from '@/application/config'
|
||||||
import 'phaser'
|
import 'phaser'
|
||||||
import type { Map as MapT } from '@/application/types'
|
import MapEditor from '@/components/gameMaster/mapEditor/MapEditor.vue'
|
||||||
import Map from '@/components/gameMaster/mapEditor/Map.vue'
|
|
||||||
import MapList from '@/components/gameMaster/mapEditor/partials/MapList.vue'
|
|
||||||
import ObjectList from '@/components/gameMaster/mapEditor/partials/MapObjectList.vue'
|
|
||||||
import MapSettings from '@/components/gameMaster/mapEditor/partials/MapSettings.vue'
|
|
||||||
import TeleportModal from '@/components/gameMaster/mapEditor/partials/TeleportModal.vue'
|
|
||||||
import TileList from '@/components/gameMaster/mapEditor/partials/TileList.vue'
|
|
||||||
import Toolbar from '@/components/gameMaster/mapEditor/partials/Toolbar.vue'
|
|
||||||
import { loadAllTilesIntoScene } from '@/composables/mapComposable'
|
import { loadAllTilesIntoScene } from '@/composables/mapComposable'
|
||||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
|
||||||
import { MapStorage } from '@/storage/storages'
|
|
||||||
import { useGameStore } from '@/stores/gameStore'
|
import { useGameStore } from '@/stores/gameStore'
|
||||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||||
import { Game, Scene } from 'phavuer'
|
import { Game, Scene } from 'phavuer'
|
||||||
import { ref, watch } from 'vue'
|
import { ref } from 'vue'
|
||||||
|
|
||||||
const mapStorage = new MapStorage()
|
|
||||||
const mapEditor = useMapEditorComposable()
|
|
||||||
const gameStore = useGameStore()
|
const gameStore = useGameStore()
|
||||||
const mapEditorStore = useMapEditorStore()
|
const mapEditorStore = useMapEditorStore()
|
||||||
|
|
||||||
@ -56,6 +37,15 @@ const createGame = (game: Phaser.Game) => {
|
|||||||
addEventListener('resize', () => {
|
addEventListener('resize', () => {
|
||||||
game.scale.resize(window.innerWidth, window.innerHeight)
|
game.scale.resize(window.innerWidth, window.innerHeight)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// We don't support canvas mode, only WebGL
|
||||||
|
if (game.renderer.type === Phaser.CANVAS) {
|
||||||
|
gameStore.addNotification({
|
||||||
|
title: 'Warning',
|
||||||
|
message: 'Your browser does not support WebGL. Please use a modern browser like Chrome, Firefox, or Edge.'
|
||||||
|
})
|
||||||
|
gameStore.disconnectSocket()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const preloadScene = async (scene: Phaser.Scene) => {
|
const preloadScene = async (scene: Phaser.Scene) => {
|
||||||
@ -65,10 +55,8 @@ const preloadScene = async (scene: Phaser.Scene) => {
|
|||||||
scene.load.image('blank_tile', '/assets/map/blank_tile.png')
|
scene.load.image('blank_tile', '/assets/map/blank_tile.png')
|
||||||
scene.load.image('waypoint', '/assets/waypoint.png')
|
scene.load.image('waypoint', '/assets/waypoint.png')
|
||||||
|
|
||||||
// Get all tiles from IndexedDB and load them into the scene
|
|
||||||
await loadAllTilesIntoScene(scene)
|
await loadAllTilesIntoScene(scene)
|
||||||
|
|
||||||
// Wait for all assets to be loaded before continuing
|
|
||||||
await new Promise<void>((resolve) => {
|
await new Promise<void>((resolve) => {
|
||||||
scene.load.on(Phaser.Loader.Events.COMPLETE, () => {
|
scene.load.on(Phaser.Loader.Events.COMPLETE, () => {
|
||||||
resolve()
|
resolve()
|
||||||
@ -77,35 +65,5 @@ const preloadScene = async (scene: Phaser.Scene) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function save() {
|
const createScene = async (scene: Phaser.Scene) => {}
|
||||||
if (!mapEditor.currentMap.value) return
|
|
||||||
|
|
||||||
const data = {
|
|
||||||
mapId: mapEditor.currentMap.value.id,
|
|
||||||
name: mapEditor.currentMap.value.name,
|
|
||||||
width: mapEditor.currentMap.value.width,
|
|
||||||
height: mapEditor.currentMap.value.height,
|
|
||||||
tiles: mapEditor.currentMap.value.tiles,
|
|
||||||
pvp: mapEditor.currentMap.value.pvp,
|
|
||||||
mapEffects: mapEditor.currentMap.value.mapEffects?.map(({ id, effect, strength }) => ({ id, effect, strength })) ?? [],
|
|
||||||
mapEventTiles: mapEditor.currentMap.value.mapEventTiles?.map(({ id, type, positionX, positionY, teleport }) => ({ id, type, positionX, positionY, teleport })) ?? [],
|
|
||||||
placedMapObjects: mapEditor.currentMap.value.placedMapObjects?.map(({ id, mapObject, depth, isRotated, positionX, positionY }) => ({ id, mapObject, depth, isRotated, positionX, positionY })) ?? []
|
|
||||||
}
|
|
||||||
|
|
||||||
if (mapEditorStore.isSettingsModalShown) {
|
|
||||||
mapEditorStore.toggleSettingsModal()
|
|
||||||
}
|
|
||||||
|
|
||||||
gameStore.connection?.emit('gm:map:update', data, (response: MapT) => {
|
|
||||||
mapStorage.update(response.id, response)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function clear() {
|
|
||||||
if (!mapEditor.currentMap.value) return
|
|
||||||
|
|
||||||
// Clear placed objects, event tiles and tiles
|
|
||||||
mapEditor.clearMap()
|
|
||||||
mapEditorStore.triggerClearTiles()
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<Modal v-for="notification in gameStore.notifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification!.id as string)">
|
<Modal v-for="notification in gameStore.notifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification.id)">
|
||||||
<template #modalHeader v-if="notification.title">
|
<template #modalHeader v-if="notification.title">
|
||||||
<h3 class="m-0 font-medium shrink-0 text-white">{{ notification.title }}</h3>
|
<h3 class="m-0 font-medium shrink-0 text-white">{{ notification.title }}</h3>
|
||||||
</template>
|
</template>
|
||||||
|
@ -1,31 +0,0 @@
|
|||||||
import type { Map } from '@/application/types'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
const currentMap = ref<Map | null>(null)
|
|
||||||
|
|
||||||
export function useMapEditorComposable() {
|
|
||||||
const loadMap = (map: Map) => {
|
|
||||||
currentMap.value = map
|
|
||||||
}
|
|
||||||
|
|
||||||
const updateProperty = <K extends keyof Map>(property: K, value: Map[K]) => {
|
|
||||||
if (currentMap.value) {
|
|
||||||
currentMap.value[property] = value
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const clearMap = () => {
|
|
||||||
if (!currentMap.value) return
|
|
||||||
|
|
||||||
currentMap.value.placedMapObjects = []
|
|
||||||
currentMap.value.mapEventTiles = []
|
|
||||||
currentMap.value.tiles = []
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
currentMap,
|
|
||||||
loadMap,
|
|
||||||
updateProperty,
|
|
||||||
clearMap
|
|
||||||
}
|
|
||||||
}
|
|
@ -23,22 +23,6 @@ export class BaseStorage<T extends { id: string }> {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async update(id: string, item: Partial<T>) {
|
|
||||||
try {
|
|
||||||
await this.dexie.table(this.tableName).update(id, item)
|
|
||||||
} catch (error) {
|
|
||||||
console.error(`Failed to update ${this.tableName} ${id}:`, error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async delete(id: string) {
|
|
||||||
try {
|
|
||||||
await this.dexie.table(this.tableName).delete(id)
|
|
||||||
} catch (error) {
|
|
||||||
console.error(`Failed to delete ${this.tableName} ${id}:`, error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async get(id: string): Promise<T | null> {
|
async get(id: string): Promise<T | null> {
|
||||||
try {
|
try {
|
||||||
const item = await this.dexie.table(this.tableName).get(id)
|
const item = await this.dexie.table(this.tableName).get(id)
|
||||||
@ -68,10 +52,6 @@ export class BaseStorage<T extends { id: string }> {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
liveQuery() {
|
|
||||||
return this.dexie.table(this.tableName).toArray()
|
|
||||||
}
|
|
||||||
|
|
||||||
async reset() {
|
async reset() {
|
||||||
try {
|
try {
|
||||||
await this.dexie.table(this.tableName).clear()
|
await this.dexie.table(this.tableName).clear()
|
||||||
|
@ -15,10 +15,9 @@ export const useGameStore = defineStore('game', {
|
|||||||
character: null as Character | null,
|
character: null as Character | null,
|
||||||
world: {
|
world: {
|
||||||
date: new Date(),
|
date: new Date(),
|
||||||
weatherState: {
|
isRainEnabled: false,
|
||||||
rainPercentage: 0,
|
isFogEnabled: false,
|
||||||
fogDensity: 0
|
fogDensity: 0
|
||||||
}
|
|
||||||
} as WorldSettings,
|
} as WorldSettings,
|
||||||
game: {
|
game: {
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
@ -120,8 +119,9 @@ export const useGameStore = defineStore('game', {
|
|||||||
this.uiSettings.isGmPanelOpen = false
|
this.uiSettings.isGmPanelOpen = false
|
||||||
|
|
||||||
this.world.date = new Date()
|
this.world.date = new Date()
|
||||||
this.world.weatherState.rainPercentage = 0
|
this.world.isRainEnabled = false
|
||||||
this.world.weatherState.fogDensity = 0
|
this.world.isFogEnabled = false
|
||||||
|
this.world.fogDensity = 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -1,8 +1,9 @@
|
|||||||
import type { MapObject } from '@/application/types'
|
import type { Map, MapEffect, MapObject, PlacedMapObject, Tile } from '@/application/types'
|
||||||
|
import { useGameStore } from '@/stores/gameStore'
|
||||||
import { defineStore } from 'pinia'
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
export type TeleportSettings = {
|
export type TeleportSettings = {
|
||||||
toMapId: string
|
toMap: Map | null
|
||||||
toPositionX: number
|
toPositionX: number
|
||||||
toPositionY: number
|
toPositionY: number
|
||||||
toRotation: number
|
toRotation: number
|
||||||
@ -12,9 +13,13 @@ export const useMapEditorStore = defineStore('mapEditor', {
|
|||||||
state: () => {
|
state: () => {
|
||||||
return {
|
return {
|
||||||
active: false,
|
active: false,
|
||||||
|
map: null as Map | null,
|
||||||
tool: 'move',
|
tool: 'move',
|
||||||
drawMode: 'tile',
|
drawMode: 'tile',
|
||||||
eraserMode: 'tile',
|
eraserMode: 'tile',
|
||||||
|
mapList: [] as Map[],
|
||||||
|
tileList: [] as Tile[],
|
||||||
|
mapObjectList: [] as MapObject[],
|
||||||
selectedTile: '',
|
selectedTile: '',
|
||||||
selectedMapObject: null as MapObject | null,
|
selectedMapObject: null as MapObject | null,
|
||||||
isTileListModalShown: false,
|
isTileListModalShown: false,
|
||||||
@ -23,8 +28,15 @@ export const useMapEditorStore = defineStore('mapEditor', {
|
|||||||
isCreateMapModalShown: false,
|
isCreateMapModalShown: false,
|
||||||
isSettingsModalShown: false,
|
isSettingsModalShown: false,
|
||||||
shouldClearTiles: false,
|
shouldClearTiles: false,
|
||||||
|
mapSettings: {
|
||||||
|
name: '',
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
pvp: false,
|
||||||
|
mapEffects: [] as MapEffect[]
|
||||||
|
},
|
||||||
teleportSettings: {
|
teleportSettings: {
|
||||||
toMapId: '',
|
toMap: null,
|
||||||
toPositionX: 0,
|
toPositionX: 0,
|
||||||
toPositionY: 0,
|
toPositionY: 0,
|
||||||
toRotation: 0
|
toRotation: 0
|
||||||
@ -33,9 +45,31 @@ export const useMapEditorStore = defineStore('mapEditor', {
|
|||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
toggleActive() {
|
toggleActive() {
|
||||||
|
const gameStore = useGameStore()
|
||||||
|
if (!this.active) gameStore.connection?.emit('map:character:leave')
|
||||||
if (this.active) this.reset()
|
if (this.active) this.reset()
|
||||||
this.active = !this.active
|
this.active = !this.active
|
||||||
},
|
},
|
||||||
|
setMap(map: Map | null) {
|
||||||
|
this.map = map
|
||||||
|
},
|
||||||
|
setMapName(name: string) {
|
||||||
|
this.mapSettings.name = name
|
||||||
|
},
|
||||||
|
setMapWidth(width: number) {
|
||||||
|
this.mapSettings.width = width
|
||||||
|
},
|
||||||
|
setMapHeight(height: number) {
|
||||||
|
this.mapSettings.height = height
|
||||||
|
},
|
||||||
|
setMapPvp(pvp: boolean) {
|
||||||
|
if (!this.map) return
|
||||||
|
this.map.pvp = pvp
|
||||||
|
},
|
||||||
|
setMapEffects(mapEffects: MapEffect[]) {
|
||||||
|
if (!this.map) return
|
||||||
|
this.mapSettings.mapEffects = mapEffects
|
||||||
|
},
|
||||||
setTool(tool: string) {
|
setTool(tool: string) {
|
||||||
this.tool = tool
|
this.tool = tool
|
||||||
},
|
},
|
||||||
@ -45,6 +79,15 @@ export const useMapEditorStore = defineStore('mapEditor', {
|
|||||||
setEraserMode(mode: string) {
|
setEraserMode(mode: string) {
|
||||||
this.eraserMode = mode
|
this.eraserMode = mode
|
||||||
},
|
},
|
||||||
|
setMapList(maps: Map[]) {
|
||||||
|
this.mapList = maps
|
||||||
|
},
|
||||||
|
setTileList(tiles: Tile[]) {
|
||||||
|
this.tileList = tiles
|
||||||
|
},
|
||||||
|
setMapObjectList(objects: MapObject[]) {
|
||||||
|
this.mapObjectList = objects
|
||||||
|
},
|
||||||
setSelectedTile(tile: string) {
|
setSelectedTile(tile: string) {
|
||||||
this.selectedTile = tile
|
this.selectedTile = tile
|
||||||
},
|
},
|
||||||
@ -70,7 +113,11 @@ export const useMapEditorStore = defineStore('mapEditor', {
|
|||||||
resetClearTilesFlag() {
|
resetClearTilesFlag() {
|
||||||
this.shouldClearTiles = false
|
this.shouldClearTiles = false
|
||||||
},
|
},
|
||||||
reset() {
|
reset(resetMap = false) {
|
||||||
|
if (resetMap) this.map = null
|
||||||
|
this.mapList = []
|
||||||
|
this.tileList = []
|
||||||
|
this.mapObjectList = []
|
||||||
this.tool = 'move'
|
this.tool = 'move'
|
||||||
this.drawMode = 'tile'
|
this.drawMode = 'tile'
|
||||||
this.selectedTile = ''
|
this.selectedTile = ''
|
||||||
|
Reference in New Issue
Block a user