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

Updated tiles logics

Browse Source
This commit is contained in:
Dennis Postma
2024-07-11 19:52:33 +02:00
parent 90046613ca
commit e72a3a9f45
9 changed files with 143 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/utilities/zoneEditor/Tiles.vue
View File

@ -2,41 +2,39 @@
<Teleport to="body">
<Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.setTool('move')" :isModalOpen="true" :modal-width="645" :modal-height="260">
<template #modalHeader>
<h3 class="m-0 font-medium shrink-0">Tiles</h3>
<h3 class="text-lg">Tiles</h3>
<div class="flex">
<div class="w-full flex gap-1.5 flex-row">
<div>
<label class="mb-1.5 font-titles hidden" for="search">Search...</label>
<input @mousedown.stop class="input-cyan" type="text" name="search" placeholder="Search" />
<input
@mousedown.stop
class="input-cyan"
type="text"
name="search"
placeholder="Search"
v-model="searchQuery"
/>
</div>
</div>
</div>
</template>
<template #modalBody>
<div class="m-[15px]">
<div class="flex flex-wrap gap-2.5">
<img
class="w-[64px] h-[32px] cursor-pointer border-2 border-solid transition-all ease duration-300"
src="/assets/zone/blank_tile.png"
alt="Blank tile"
@click="zoneEditorStore.setSelectedTile('blank_tile')"
:class="{
'border-cyan shadow-lg scale-105': zoneEditorStore.selectedTile === 'blank_tile',
'border-transparent hover:border-gray-300': zoneEditorStore.selectedTile !== 'blank_tile'
}"
/>
<img
class="w-[64px] h-[32px] cursor-pointer border-2 border-solid transition-all ease duration-300"
v-for="(tile, index) in zoneEditorStore.tileList"
:key="index"
:src="`${config.server_endpoint}/assets/tiles/${tile}.png`"
alt="Tile"
@click="zoneEditorStore.setSelectedTile(tile)"
:class="{
'border-cyan shadow-lg scale-105': zoneEditorStore.selectedTile === tile,
'border-transparent hover:border-gray-300': zoneEditorStore.selectedTile !== tile
}"
/>
<div class="flex justify-between flex-wrap gap-2.5 items-center">
<div v-for="(tile, index) in filteredTiles" :key="index" class="max-w-[25%] inline-block">
<img
class="border-2 border-solid max-w-full"
:src="`${config.server_endpoint}/assets/tiles/${tile.id}.png`"
alt="Tile"
@click="zoneEditorStore.setSelectedTile(tile)"
:class="{
'cursor-pointer transition-all duration-300': true,
'border-cyan shadow-lg scale-105': zoneEditorStore.selectedTile?.id === tile.id,
'border-transparent hover:border-gray-300': zoneEditorStore.selectedTile?.id !== tile.id
}"
/>
</div>
</div>
</div>
</template>
@ -46,19 +44,30 @@
<script setup lang="ts">
import config from '@/config'
import { ref, onMounted } from 'vue'
import { ref, onMounted, computed, watch } from 'vue'
import { useZoneEditorStore } from '@/stores/zoneEditor'
import { useSocketStore } from '@/stores/socket'
import Modal from '@/components/utilities/Modal.vue'
import type { Tile } from '@/types'
const socket = useSocketStore()
const isModalOpen = ref(false)
const zoneEditorStore = useZoneEditorStore()
const searchQuery = ref('')
const filteredTiles = computed(() => {
if (!searchQuery.value) {
return zoneEditorStore.tileList
}
return zoneEditorStore.tileList.filter(tile =>
tile.name.toLowerCase().includes(searchQuery.value.toLowerCase())
)
})
onMounted(async () => {
isModalOpen.value = true
socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
zoneEditorStore.tileList = response
socket.connection.emit('gm:tile:list', {}, (response: Tile[]) => {
zoneEditorStore.setTileList(response)
})
})
</script>
</script>

12
src/components/utilities/zoneEditor/ZoneEditor.vue
View File

@ -119,9 +119,9 @@ function eraser(tile: Phaser.Tilemaps.Tile) {
function pencil(tile: Phaser.Tilemaps.Tile) {
if (zoneEditorStore.drawMode === 'tile') {
if (!zoneEditorStore.selectedTile) return
placeTile(zoneTilemap, tiles, tile.x, tile.y, zoneEditorStore.selectedTile)
zoneTiles[tile.y][tile.x] = zoneEditorStore.selectedTile
if (zoneEditorStore.selectedTile === null) return
placeTile(zoneTilemap, tiles, tile.x, tile.y, zoneEditorStore.selectedTile.id)
zoneTiles[tile.y][tile.x] = zoneEditorStore.selectedTile.id
}
if (zoneEditorStore.drawMode === 'object') {
@ -161,9 +161,9 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
}
function paint(tile: Phaser.Tilemaps.Tile) {
if (!zoneEditorStore.selectedTile) return
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, zoneEditorStore.selectedTile)))
zoneTiles.forEach((row, y) => row.forEach((tile, x) => zoneTiles[y][x] = zoneEditorStore.selectedTile))
if (zoneEditorStore.selectedTile === null) return
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, zoneEditorStore.selectedTile.id)))
zoneTiles.forEach((row, y) => row.forEach((tile, x) => zoneTiles[y][x] = zoneEditorStore.selectedTile.id))
}
function save() {