forked from noxious/client
npm run format, removed container that character was in
This commit is contained in:
@ -20,8 +20,8 @@
|
||||
<script setup lang="ts">
|
||||
import AssetManager from '@/components/gameMaster/assetManager/AssetManager.vue'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineEmits(['open-map-editor'])
|
||||
|
@ -9,8 +9,8 @@ import MapEventTiles from '@/components/gameMaster/mapEditor/mapPartials/MapEven
|
||||
import MapTiles from '@/components/gameMaster/mapEditor/mapPartials/MapTiles.vue'
|
||||
import PlacedMapObjects from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue'
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { onMounted, onUnmounted, shallowRef, useTemplateRef } from 'vue'
|
||||
import { useScene } from 'phavuer'
|
||||
import { onMounted, onUnmounted, shallowRef, useTemplateRef } from 'vue'
|
||||
|
||||
const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
|
||||
const mapEditor = useMapEditorComposable()
|
||||
@ -51,5 +51,4 @@ onUnmounted(() => {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_DOWN, handlePointer)
|
||||
mapEditor.reset()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
@ -1,19 +1,18 @@
|
||||
<template>
|
||||
<Image v-for="tile in mapEditor.currentMap.value?.mapEventTiles" v-bind="getImageProps(tile)" />
|
||||
<Image v-for="tile in mapEditor.currentMap.value?.mapEventTiles" v-bind="getImageProps(tile)" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { MapEventTileType, type MapEventTile } from '@/application/types'
|
||||
import { MapEventTileType, type MapEventTile, type Map as MapT } from '@/application/types'
|
||||
import { uuidv4 } from '@/application/utilities'
|
||||
import { getTile, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
|
||||
import { Image, useScene } from 'phavuer'
|
||||
import { type Map as MapT } from "@/application/types"
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { shallowRef} from 'vue'
|
||||
import { Image, useScene } from 'phavuer'
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
const mapEditor = useMapEditorComposable()
|
||||
|
||||
defineExpose({handlePointer})
|
||||
defineExpose({ handlePointer })
|
||||
|
||||
const props = defineProps<{
|
||||
tileMap: Phaser.Tilemaps.Tilemap
|
||||
@ -90,8 +89,12 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
|
||||
if (pointer.event.shiftKey) return
|
||||
|
||||
switch (mapEditor.tool.value) {
|
||||
case 'pencil': pencil(pointer, map) ; break
|
||||
case 'eraser': erase(pointer, map) ; break
|
||||
case 'pencil':
|
||||
pencil(pointer, map)
|
||||
break
|
||||
case 'eraser':
|
||||
erase(pointer, map)
|
||||
break
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
@ -22,7 +22,7 @@ const tileStorage = new TileStorage()
|
||||
const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
|
||||
const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
|
||||
|
||||
defineExpose({handlePointer})
|
||||
defineExpose({ handlePointer })
|
||||
|
||||
function createTileMap() {
|
||||
const mapData = new Phaser.Tilemaps.MapData({
|
||||
@ -144,7 +144,7 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
|
||||
|
||||
// Check if alt is pressed
|
||||
if (pointer.event.altKey) {
|
||||
tilePicker(pointer);
|
||||
tilePicker(pointer)
|
||||
return
|
||||
}
|
||||
|
||||
|
@ -37,9 +37,9 @@
|
||||
<script setup lang="ts">
|
||||
import type { Map } from '@/application/types'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { MapStorage } from '@/storage/storages'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { ref, useTemplateRef } from 'vue'
|
||||
|
||||
const emit = defineEmits(['create'])
|
||||
@ -53,7 +53,7 @@ const width = ref(0)
|
||||
const height = ref(0)
|
||||
const pvp = ref(false)
|
||||
|
||||
defineExpose({ open: () => modalRef.value?.open()})
|
||||
defineExpose({ open: () => modalRef.value?.open() })
|
||||
|
||||
async function submit() {
|
||||
gameStore.connection?.emit('gm:map:create', { name: name.value, width: width.value, height: height.value }, async (response: Map | false) => {
|
||||
|
@ -44,8 +44,8 @@
|
||||
import config from '@/application/config'
|
||||
import type { MapObject } from '@/application/types'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { MapObjectStorage } from '@/storage/storages'
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { MapObjectStorage } from '@/storage/storages'
|
||||
import { liveQuery } from 'dexie'
|
||||
import { computed, onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
|
||||
|
||||
|
@ -52,13 +52,15 @@ const mapList = ref<Map[]>([])
|
||||
const modalRef = useTemplateRef('modalRef')
|
||||
|
||||
defineExpose({
|
||||
open: () => modalRef.value?.open(),
|
||||
open: () => modalRef.value?.open()
|
||||
})
|
||||
|
||||
onMounted(fetchMaps)
|
||||
|
||||
function fetchMaps() {
|
||||
gameStore.connection?.emit('gm:map:list', {}, (response: Map[]) => { mapList.value = response })
|
||||
gameStore.connection?.emit('gm:map:list', {}, (response: Map[]) => {
|
||||
mapList.value = response
|
||||
})
|
||||
}
|
||||
|
||||
const { toPositionX, toPositionY, toRotation, toMap } = useRefTeleportSettings()
|
||||
|
@ -84,8 +84,8 @@
|
||||
import config from '@/application/config'
|
||||
import type { Tile } from '@/application/types'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { TileStorage } from '@/storage/storages'
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { TileStorage } from '@/storage/storages'
|
||||
import { liveQuery } from 'dexie'
|
||||
import { computed, onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
|
||||
|
||||
|
@ -16,19 +16,44 @@
|
||||
<img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/mapEditor/chevron.svg" alt="" />
|
||||
</div>
|
||||
<div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray rounded min-w-28 border border-gray-500 border-solid text-left" v-show="selectPencilOpen && mapEditor.tool.value === 'pencil'">
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('tile'); setPencilMode">
|
||||
<span
|
||||
class="py-2 px-2.5 relative hover:bg-cyan hover:text-white"
|
||||
@click="
|
||||
setDrawMode('tile')
|
||||
setPencilMode
|
||||
"
|
||||
>
|
||||
Tile
|
||||
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
|
||||
</span>
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('map_object'); setPencilMode">
|
||||
<span
|
||||
class="py-2 px-2.5 relative hover:bg-cyan hover:text-white"
|
||||
@click="
|
||||
setDrawMode('map_object')
|
||||
setPencilMode
|
||||
"
|
||||
>
|
||||
Map object
|
||||
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
|
||||
</span>
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('teleport'); setPencilMode">
|
||||
<span
|
||||
class="py-2 px-2.5 relative hover:bg-cyan hover:text-white"
|
||||
@click="
|
||||
setDrawMode('teleport')
|
||||
setPencilMode
|
||||
"
|
||||
>
|
||||
Teleport
|
||||
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
|
||||
</span>
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('blocking tile'); setPencilMode">Blocking tile</span>
|
||||
<span
|
||||
class="py-2 px-2.5 relative hover:bg-cyan hover:text-white"
|
||||
@click="
|
||||
setDrawMode('blocking tile')
|
||||
setPencilMode
|
||||
"
|
||||
>Blocking tile</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
@ -43,19 +68,44 @@
|
||||
<img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/mapEditor/chevron.svg" />
|
||||
</div>
|
||||
<div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray rounded min-w-28 border border-gray-500 border-solid text-left" v-show="selectEraserOpen">
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('tile'); setEraserMode">
|
||||
<span
|
||||
class="py-2 px-2.5 relative hover:bg-cyan hover:text-white"
|
||||
@click="
|
||||
setDrawMode('tile')
|
||||
setEraserMode
|
||||
"
|
||||
>
|
||||
Tile
|
||||
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
|
||||
</span>
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('map_object'); setEraserMode">
|
||||
<span
|
||||
class="py-2 px-2.5 relative hover:bg-cyan hover:text-white"
|
||||
@click="
|
||||
setDrawMode('map_object')
|
||||
setEraserMode
|
||||
"
|
||||
>
|
||||
Map object
|
||||
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
|
||||
</span>
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('teleport'); setEraserMode">
|
||||
<span
|
||||
class="py-2 px-2.5 relative hover:bg-cyan hover:text-white"
|
||||
@click="
|
||||
setDrawMode('teleport')
|
||||
setEraserMode
|
||||
"
|
||||
>
|
||||
Teleport
|
||||
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
|
||||
</span>
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('blocking tile'); setEraserMode">Blocking tile</span>
|
||||
<span
|
||||
class="py-2 px-2.5 relative hover:bg-cyan hover:text-white"
|
||||
@click="
|
||||
setDrawMode('blocking tile')
|
||||
setEraserMode
|
||||
"
|
||||
>Blocking tile</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
@ -73,7 +123,7 @@
|
||||
<div class="w-px bg-cyan"></div>
|
||||
|
||||
<label class="my-auto gap-0" for="checkbox">Continuous Drawing</label>
|
||||
<input type="checkbox">
|
||||
<input type="checkbox" />
|
||||
</div>
|
||||
|
||||
<div class="toolbar fixed bottom-0 right-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10 space-x-2">
|
||||
@ -89,8 +139,8 @@
|
||||
<script setup lang="ts">
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { onClickOutside } from '@vueuse/core'
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import { useScene } from 'phavuer'
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
|
||||
const mapEditor = useMapEditorComposable()
|
||||
|
||||
@ -106,11 +156,10 @@ let selectEraserOpen = ref(false)
|
||||
let tileListShown = ref(false)
|
||||
let mapObjectListShown = ref(false)
|
||||
|
||||
defineExpose({tileListShown, mapObjectListShown})
|
||||
defineExpose({ tileListShown, mapObjectListShown })
|
||||
|
||||
// drawMode
|
||||
function setDrawMode(value: string) {
|
||||
|
||||
if (mapEditor.tool.value === 'paint' || mapEditor.tool.value === 'pencil') {
|
||||
emit('close-lists')
|
||||
if (value === 'tile') emit('open-tile-list')
|
||||
|
Reference in New Issue
Block a user