imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

npm update, removed spacing around zone editor toolbar for better UX, added search logic in objects list

Browse Source
This commit is contained in:
Dennis Postma 2024-07-09 23:43:53 +02:00
parent f1a3d6b6e5
commit abe58961ba
5 changed files with 48 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
package-lock.json generated
View File

@ -1392,9 +1392,9 @@
}
},
"node_modules/@jridgewell/sourcemap-codec": {
"version": "1.4.15",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
"license": "MIT"
},
"node_modules/@jridgewell/trace-mapping": {
@ -2945,9 +2945,9 @@
}
},
"node_modules/browserslist": {
"version": "4.23.1",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.1.tgz",
"integrity": "sha512-TUfofFo/KsK/bWZ9TWQ5O26tsWW4Uhmt8IYklbnUa70udB6P2wA7w7o4PY4muaEPBQaAX+CEnmmIA41NVHtPVw==",
"version": "4.23.2",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.2.tgz",
"integrity": "sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==",
"dev": true,
"funding": [
{
@ -2965,10 +2965,10 @@
],
"license": "MIT",
"dependencies": {
"caniuse-lite": "^1.0.30001629",
"electron-to-chromium": "^1.4.796",
"caniuse-lite": "^1.0.30001640",
"electron-to-chromium": "^1.4.820",
"node-releases": "^2.0.14",
"update-browserslist-db": "^1.0.16"
"update-browserslist-db": "^1.1.0"
},
"bin": {
"browserslist": "cli.js"
@ -3540,9 +3540,9 @@
}
},
"node_modules/electron-to-chromium": {
"version": "1.4.818",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.818.tgz",
"integrity": "sha512-eGvIk2V0dGImV9gWLq8fDfTTsCAeMDwZqEPMr+jMInxZdnp9Us8UpovYpRCf9NQ7VOFgrN2doNSgvISbsbNpxA==",
"version": "1.4.820",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.820.tgz",
"integrity": "sha512-kK/4O/YunacfboFEk/BDf7VO1HoPmDudLTJAU9NmXIOSjsV7qVIX3OrI4REZo0VmdqhcpUcncQc6N8Q3aEXlHg==",
"dev": true,
"license": "ISC"
},
@ -4246,9 +4246,9 @@
}
},
"node_modules/glob": {
"version": "10.4.3",
"resolved": "https://registry.npmjs.org/glob/-/glob-10.4.3.tgz",
"integrity": "sha512-Q38SGlYRpVtDBPSWEylRyctn7uDeTp4NQERTLiCT1FqA9JXPYWqAVmQU6qh4r/zMM5ehxTcbaO8EjhWnvEhmyg==",
"version": "10.4.5",
"resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
"integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
"dev": true,
"license": "ISC",
"dependencies": {
@ -4262,9 +4262,6 @@
"bin": {
"glob": "dist/esm/bin.mjs"
},
"engines": {
"node": ">=18"
},
"funding": {
"url": "https://github.com/sponsors/isaacs"
}
@ -4761,16 +4758,16 @@
"license": "ISC"
},
"node_modules/jackspeak": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.1.tgz",
"integrity": "sha512-U23pQPDnmYybVkYjObcuYMk43VRlMLLqLI+RdZy8s8WV8WsxO9SnqSroKaluuvcNOdCAlauKszDwd+umbot5Mg==",
"version": "3.4.2",
"resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.2.tgz",
"integrity": "sha512-qH3nOSj8q/8+Eg8LUPOq3C+6HWkpUioIjDsq1+D4zY91oZvpPttw8GwtF1nReRYKXl+1AORyFqtm2f5Q1SB6/Q==",
"dev": true,
"license": "BlueOak-1.0.0",
"dependencies": {
"@isaacs/cliui": "^8.0.2"
},
"engines": {
"node": ">=18"
"node": "14 >=14.21 || 16 >=16.20 || >=18"
},
"funding": {
"url": "https://github.com/sponsors/isaacs"
@ -5099,14 +5096,11 @@
}
},
"node_modules/lru-cache": {
"version": "10.4.0",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.0.tgz",
"integrity": "sha512-bfJaPTuEiTYBu+ulDaeQ0F+uLmlfFkMgXj4cbwfuMSjgObGMzb55FMMbDvbRU0fAHZ4sLGkz2mKwcMg8Dvm8Ww==",
"version": "10.4.3",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
"integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
"dev": true,
"license": "ISC",
"engines": {
"node": ">=18"
}
"license": "ISC"
},
"node_modules/magic-string": {
"version": "0.30.10",

25
src/components/utilities/zoneEditor/Objects.vue
View File

@ -7,7 +7,14 @@
<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>
<label class="mb-1.5 font-titles hidden" for="z-index">Z-index</label>
@ -19,7 +26,7 @@
<template #modalBody>
<div class="m-[15px]">
<div class="flex justify-between flex-wrap gap-2.5 items-center">
<div v-for="(object, index) in zoneEditorStore.objectList" :key="index" class="max-w-[25%] inline-block">
<div v-for="(object, index) in filteredObjects" :key="index" class="max-w-[25%] inline-block">
<img
class="border-2 border-solid max-w-full"
:src="`${config.server_endpoint}/assets/objects/${object.id}.png`"
@ -41,7 +48,7 @@
<script setup lang="ts">
import config from '@/config'
import { ref, onMounted } from 'vue'
import { ref, onMounted, computed } from 'vue'
import { useZoneEditorStore } from '@/stores/zoneEditor'
import { useSocketStore } from '@/stores/socket'
import Modal from '@/components/utilities/Modal.vue'
@ -50,6 +57,16 @@ import type { Object } from '@/types'
const socket = useSocketStore()
const isModalOpen = ref(false)
const zoneEditorStore = useZoneEditorStore()
const searchQuery = ref('')
const filteredObjects = computed(() => {
if (!searchQuery.value) {
return zoneEditorStore.objectList
}
return zoneEditorStore.objectList.filter(object =>
object.name.toLowerCase().includes(searchQuery.value.toLowerCase())
)
})
onMounted(async () => {
isModalOpen.value = true
@ -57,4 +74,4 @@ onMounted(async () => {
zoneEditorStore.setObjectList(response)
})
})
</script>
</script>

4
src/components/utilities/zoneEditor/Toolbar.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="flex justify-center m-2.5">
<div class="toolbar fixed top-5 rounded flex bg-gray-300 bg-opacity-80 border-2 border-solid border-cyan text-gray-50 p-1.5 pl-2.5 min-w-[90%] h-10">
<div class="flex justify-center">
<div class="toolbar fixed top-0 left-0 right-0 flex bg-gray-300 bg-opacity-80 solid border-solid border-b-2 border-b-cyan border-t-0 border-r-0 border-l-0 text-gray-50 p-1.5 px-3 p min-w-[90%] h-10">
<div class="tools flex gap-2.5" v-if="zoneEditorStore.zone">
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" />

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

@ -139,6 +139,7 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
id: Math.random(),
zoneId: zoneEditorStore.zone.id,
zone: zoneEditorStore.zone,
type: 'BLOCK',
position_x: tile.x,
position_y: tile.y
})

2
src/types.ts
View File

@ -98,7 +98,7 @@ export type ZoneEventTile = {
id: number
zoneId: number
zone: Zone
type: "WARP" | "NPC" | "ITEM"
type: "BLOCK" | "WARP" | "NPC" | "ITEM"
position_x: number
position_y: number
}