noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prepping to work on Placed map objects

Browse Source
This commit is contained in:
Andrei 2025-01-27 00:18:46 -06:00
parent 35f0dcca64
commit 9e652868ca
7 changed files with 37 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/gameMaster/mapEditor/Map.vue
View File

@ -5,8 +5,6 @@
</template>
<script setup lang="ts">
import config from '@/application/config'
import type { Map as MapT } 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'

2
src/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue
View File

@ -89,8 +89,6 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
// Check if shift is not pressed, this means we are moving the camera
if (pointer.event.shiftKey) return
if (mapEditor.drawMode.value !== 'blocking tile' && mapEditor.drawMode.value !== 'teleport') return
switch (mapEditor.tool.value) {
case 'pencil': pencil(pointer, map) ; break
case 'eraser': erase(pointer, map) ; break

40
src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue
View File

@ -8,31 +8,24 @@ import type { Map as MapT, PlacedMapObject as PlacedMapObjectT } from '@/applica
import { uuidv4 } from '@/application/utilities'
import PlacedMapObject from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObject.vue'
import SelectedPlacedMapObjectComponent from '@/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue'
import { getTile } from '@/composables/mapComposable'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { useScene } from 'phavuer'
import { ref, watch } from 'vue'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
const scene = useScene()
const mapEditor = useMapEditorComposable()
const selectedPlacedMapObject = ref<PlacedMapObjectT | null>(null)
const movingPlacedMapObject = ref<PlacedMapObjectT | null>(null)
const tileLayer = ref<Phaser.Tilemaps.TilemapLayer>()
const props = defineProps<{
tileMap: Phaser.Tilemaps.Tilemap
}>()
defineExpose({handlePointer})
defineExpose({ handlePointer })
function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
// Check if there is a tile
const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
if (!tile) return
// Check if object already exists on position
const existingPlacedMapObject = map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
const existingPlacedMapObject = findInMap(pointer, map)
if (existingPlacedMapObject) return
const newPlacedMapObject: PlacedMapObjectT = {
@ -41,8 +34,8 @@ function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
map: map,
mapObject: mapEditor.selectedMapObject.value!,
isRotated: false,
positionX: tile.x,
positionY: tile.y
positionX: pointer.x,
positionY: pointer.y
}
// Add new object to mapObjects
@ -50,25 +43,21 @@ function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
}
function eraser(pointer: Phaser.Input.Pointer, map: MapT) {
// Check if there is a tile
const tile = getTile(tileMapLayer, pointer.worldX, pointer.worldY)
if (!tile) return
// Check if object already exists on position
const existingPlacedMapObject = map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
const existingPlacedMapObject = findInMap(pointer, map)
if (!existingPlacedMapObject) return
// Remove existing object
map.placedMapObjects = map.placedMapObjects.filter((placedMapObject) => placedMapObject.id !== existingPlacedMapObject.id)
}
function objectPicker(pointer: Phaser.Input.Pointer, map: MapT) {
// Check if there is a tile
const tile = getTile(tileMapLayer, pointer.worldX, pointer.worldY)
if (!tile) return
function findInMap(pointer: Phaser.Input.Pointer, map: MapT) {
return map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === pointer.worldX && placedMapObject.positionY === pointer.worldY)
}
function objectPicker(pointer: Phaser.Input.Pointer, map: MapT) {
// Check if object already exists on position
const existingPlacedMapObject = map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
const existingPlacedMapObject = findInMap(pointer, map)
if (!existingPlacedMapObject) return
// Select the object
@ -81,11 +70,8 @@ function moveMapObject(id: string, map: MapT) {
function handlePointerMove(pointer: Phaser.Input.Pointer) {
if (!movingPlacedMapObject.value) return
const tile = getTile(tileMapLayer, pointer.worldX, pointer.worldY)
if (!tile) return
movingPlacedMapObject.value.positionX = tile.x
movingPlacedMapObject.value.positionY = tile.y
movingPlacedMapObject.value.positionX = pointer.worldX
movingPlacedMapObject.value.positionY = pointer.worldY
}
scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)

2
src/components/gameMaster/mapEditor/partials/CreateMap.vue
View File

@ -53,6 +53,8 @@ const width = ref(0)
const height = ref(0)
const pvp = ref(false)
defineExpose({ open: () => modalRef.value?.open()})
async function submit() {
gameStore.connection?.emit('gm:map:create', { name: name.value, width: width.value, height: height.value }, async (response: Map | false) => {
if (!response) {

5
src/components/gameMaster/mapEditor/partials/MapList.vue
View File

@ -7,7 +7,7 @@
<div class="my-4 mx-auto h-full">
<div class="text-center mb-4 px-2 flex gap-2.5">
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="fetchMaps">Refresh</button>
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="() => $emit('open-create-map')">New</button>
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="createMapModal?.open">New</button>
</div>
<div class="overflow-y-auto h-[calc(100%-20px)]">
<div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(map, index) in mapList" :key="map.id">
@ -25,7 +25,7 @@
</template>
</Modal>
<CreateMap @create="fetchMaps" v-if="modalRef?.isModalOpen" />
<CreateMap ref="createMapModal" @create="fetchMaps" />
</template>
<script setup lang="ts">
@ -44,6 +44,7 @@ const mapEditor = useMapEditorComposable()
const mapStorage = new MapStorage()
const mapList = ref<Map[]>([])
const modalRef = useTemplateRef('modalRef')
const createMapModal = useTemplateRef('createMapModal')
defineEmits(['open-create-map'])

29
src/components/gameMaster/mapEditor/partials/Toolbar.vue
View File

@ -16,19 +16,19 @@
<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')">
<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')">
<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')">
<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')">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 +43,19 @@
<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="setEraserMode('tile')">
<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="setEraserMode('map_object')">
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('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="setEraserMode('teleport')">
<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="setEraserMode('blocking tile')">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>
@ -85,6 +85,7 @@
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { onClickOutside } from '@vueuse/core'
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import { useScene } from 'phavuer'
const mapEditor = useMapEditorComposable()
@ -109,10 +110,16 @@ function setDrawMode(value: string) {
mapEditor.setDrawMode(value)
selectPencilOpen.value = false
selectEraserOpen.value = false
}
function setPencilMode() {
mapEditor.setTool('pencil')
selectPencilOpen.value = false
}
// drawMode
function setEraserMode(value: string) {
function setEraserMode() {
mapEditor.setTool('eraser')
selectEraserOpen.value = false
}
@ -134,11 +141,7 @@ function cycleToolMode(tool: 'pencil' | 'eraser') {
const nextIndex = (currentIndex + 1) % modes.length
const nextMode = modes[nextIndex]
if (tool === 'pencil') {
setDrawMode(nextMode)
} else {
setEraserMode(nextMode)
}
}
function initKeyShortcuts(event: KeyboardEvent) {

2
src/composables/mapComposable.ts
View File

@ -114,5 +114,5 @@ export async function loadAllTilesIntoScene(scene: Phaser.Scene) {
const tileStorage = new TileStorage()
const tiles = await tileStorage.getAll()
getTiles(tiles, scene)
await getTiles(tiles, scene)
}