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

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

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

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

@ -1,6 +1,6 @@
<template> <template>
<div class="flex justify-center m-2.5"> <div class="flex justify-center">
<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="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"> <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')"> <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" /> <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(), id: Math.random(),
zoneId: zoneEditorStore.zone.id, zoneId: zoneEditorStore.zone.id,
zone: zoneEditorStore.zone, zone: zoneEditorStore.zone,
type: 'BLOCK',
position_x: tile.x, position_x: tile.x,
position_y: tile.y position_y: tile.y
}) })

2
src/types.ts
View File

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