noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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
} }