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

Improved object selection

Browse Source
This commit is contained in:
Dennis Postma 2024-07-06 19:37:14 +02:00
parent f40297485f
commit c0ccb30019
5 changed files with 68 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
package-lock.json generated
View File

@ -1791,9 +1791,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "20.14.9", "version": "20.14.10",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.9.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.10.tgz",
"integrity": "sha512-06OCtnTXtWOZBJlRApleWndH4JsRVs1pDCc8dLSQp+7PpUpX3ePdHyeNSFTeSe7FtKyQkrlPvHwJOW3SLd8Oyg==", "integrity": "sha512-MdiXf+nDuMvY0gJKxyfZ7/6UFsETO7mGKF54MVD/ekJS6HdFtpZFBgrh6Pseu64XTb2MLyFPlbW6hj8HYRQNOQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
@ -2153,30 +2153,30 @@
} }
}, },
"node_modules/@volar/language-core": { "node_modules/@volar/language-core": {
"version": "2.4.0-alpha.14", "version": "2.4.0-alpha.15",
"resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.0-alpha.14.tgz", "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.0-alpha.15.tgz",
"integrity": "sha512-R6eJcUKo/KftaWHwJrWjBgj/+vW9g4xTByVQEK3IHTciMKmomoSbxaNqolu1/sJKbH9Tdg0EAqTFqIzKU9iQHw==", "integrity": "sha512-mt8z4Fm2WxfQYoQHPcKVjLQV6PgPqyKLbkCVY2cr5RSaamqCHjhKEpsFX66aL4D/7oYguuaUw9Bx03Vt0TpIIA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@volar/source-map": "2.4.0-alpha.14" "@volar/source-map": "2.4.0-alpha.15"
} }
}, },
"node_modules/@volar/source-map": { "node_modules/@volar/source-map": {
"version": "2.4.0-alpha.14", "version": "2.4.0-alpha.15",
"resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0-alpha.14.tgz", "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0-alpha.15.tgz",
"integrity": "sha512-ACOsoDKvW29BIfdfnvQkm8S1m/RLARuHL9x7qS/9c6liMl1K0Y3RqXuC42HhWrWBm4hk0UyRKgdnv2R0teXPvg==", "integrity": "sha512-8Htngw5TmBY4L3ClDqBGyfLhsB8EmoEXUH1xydyEtEoK0O6NX5ur4Jw8jgvscTlwzizyl/wsN1vn0cQXVbbXYg==",
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/@volar/typescript": { "node_modules/@volar/typescript": {
"version": "2.4.0-alpha.14", "version": "2.4.0-alpha.15",
"resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.0-alpha.14.tgz", "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.0-alpha.15.tgz",
"integrity": "sha512-FQtQruOc7qQwcq5Q666pxF6ekRqZG5ILL3sS40Oac1V69QdAZ7q+IOQ2+z6SHJDENY49ygBv0hN9HrxRLtk15Q==", "integrity": "sha512-U3StRBbDuxV6Woa4hvGS4kz3XcOzrWUKgFdEFN+ba1x3eaYg7+ytau8ul05xgA+UNGLXXsKur7fTUhDFyISk0w==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@volar/language-core": "2.4.0-alpha.14", "@volar/language-core": "2.4.0-alpha.15",
"path-browserify": "^1.0.1", "path-browserify": "^1.0.1",
"vscode-uri": "^3.0.8" "vscode-uri": "^3.0.8"
} }
@ -2400,13 +2400,13 @@
} }
}, },
"node_modules/@vue/language-core": { "node_modules/@vue/language-core": {
"version": "2.0.24", "version": "2.0.26",
"resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.24.tgz", "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.26.tgz",
"integrity": "sha512-997YD6Lq/66LXr3ZOLNxDCmyn13z9NP8LU1UZn9hGCDWhzlbXAIP0hOgL3w3x4RKEaWTaaRtsHP9DzHvmduruQ==", "integrity": "sha512-/lt6SfQ3O1yDAhPsnLv9iSUgXd1dMHqUm/t3RctfqjuwQf1LnftZ414X3UBn6aXT4MiwXWtbNJ4Z0NZWwDWgJQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@volar/language-core": "~2.4.0-alpha.2", "@volar/language-core": "~2.4.0-alpha.15",
"@vue/compiler-dom": "^3.4.0", "@vue/compiler-dom": "^3.4.0",
"@vue/shared": "^3.4.0", "@vue/shared": "^3.4.0",
"computeds": "^0.0.1", "computeds": "^0.0.1",
@ -3540,9 +3540,9 @@
} }
}, },
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.4.816", "version": "1.4.818",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.816.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.818.tgz",
"integrity": "sha512-EKH5X5oqC6hLmiS7/vYtZHZFTNdhsYG5NVPRN6Yn0kQHNBlT59+xSM8HBy66P5fxWpKgZbPqb+diC64ng295Jw==", "integrity": "sha512-eGvIk2V0dGImV9gWLq8fDfTTsCAeMDwZqEPMr+jMInxZdnp9Us8UpovYpRCf9NQ7VOFgrN2doNSgvISbsbNpxA==",
"dev": true, "dev": true,
"license": "ISC" "license": "ISC"
}, },
@ -4246,9 +4246,9 @@
} }
}, },
"node_modules/glob": { "node_modules/glob": {
"version": "10.4.2", "version": "10.4.3",
"resolved": "https://registry.npmjs.org/glob/-/glob-10.4.2.tgz", "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.3.tgz",
"integrity": "sha512-GwMlUF6PkPo3Gk21UxkCohOv0PLcIXVtKyLlpEI28R/cO/4eNOdmLk3CMW1wROV/WR/EsZOWAfBbBOqYvs88/w==", "integrity": "sha512-Q38SGlYRpVtDBPSWEylRyctn7uDeTp4NQERTLiCT1FqA9JXPYWqAVmQU6qh4r/zMM5ehxTcbaO8EjhWnvEhmyg==",
"dev": true, "dev": true,
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
@ -4263,7 +4263,7 @@
"glob": "dist/esm/bin.mjs" "glob": "dist/esm/bin.mjs"
}, },
"engines": { "engines": {
"node": ">=16 || 14 >=14.18" "node": ">=18"
}, },
"funding": { "funding": {
"url": "https://github.com/sponsors/isaacs" "url": "https://github.com/sponsors/isaacs"
@ -4761,16 +4761,16 @@
"license": "ISC" "license": "ISC"
}, },
"node_modules/jackspeak": { "node_modules/jackspeak": {
"version": "3.4.0", "version": "3.4.1",
"resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.0.tgz", "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.1.tgz",
"integrity": "sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==", "integrity": "sha512-U23pQPDnmYybVkYjObcuYMk43VRlMLLqLI+RdZy8s8WV8WsxO9SnqSroKaluuvcNOdCAlauKszDwd+umbot5Mg==",
"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": ">=14" "node": ">=18"
}, },
"funding": { "funding": {
"url": "https://github.com/sponsors/isaacs" "url": "https://github.com/sponsors/isaacs"
@ -5099,13 +5099,13 @@
} }
}, },
"node_modules/lru-cache": { "node_modules/lru-cache": {
"version": "10.3.0", "version": "10.3.1",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.3.0.tgz", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.3.1.tgz",
"integrity": "sha512-CQl19J/g+Hbjbv4Y3mFNNXFEL/5t/KCg8POCuUqd4rMKjGG+j1ybER83hxV58zL+dFI1PTkt3GNFSHRt+d8qEQ==", "integrity": "sha512-9/8QXrtbGeMB6LxwQd4x1tIMnsmUxMvIH/qWGsccz6bt9Uln3S+sgAaqfQNhbGA8ufzs2fHuP/yqapGgP9Hh2g==",
"dev": true, "dev": true,
"license": "ISC", "license": "ISC",
"engines": { "engines": {
"node": "14 || >=16.14" "node": ">=18"
} }
}, },
"node_modules/magic-string": { "node_modules/magic-string": {
@ -7502,9 +7502,9 @@
} }
}, },
"node_modules/vue-component-type-helpers": { "node_modules/vue-component-type-helpers": {
"version": "2.0.24", "version": "2.0.26",
"resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.24.tgz", "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.26.tgz",
"integrity": "sha512-Jr5N8QVYEcbQuMN1LRgvg61758G8HTnzUlQsAFOxx6Y6X8kmhJ7C+jOvWsQruYxi3uHhhS6BghyRlyiwO99DBg==", "integrity": "sha512-sO9qQ8oC520SW6kqlls0iqDak53gsTVSrYylajgjmkt1c0vcgjsGSy1KzlDrbEx8pm02IEYhlUkU5hCYf8rwtg==",
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
@ -7545,14 +7545,14 @@
} }
}, },
"node_modules/vue-tsc": { "node_modules/vue-tsc": {
"version": "2.0.24", "version": "2.0.26",
"resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.24.tgz", "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.26.tgz",
"integrity": "sha512-1qi4P8L7yS78A7OJ7CDDxUIZPD6nVxoQEgX3DkRZNi1HI1qOfzOJwQlNpmwkogSVD6S/XcanbW9sktzpSxz6rA==", "integrity": "sha512-tOhuwy2bIXbMhz82ef37qeiaQHMXKQkD6mOF6CCPl3/uYtST3l6fdNyfMxipudrQTxTfXVPlgJdMENBFfC1CfQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@volar/typescript": "~2.4.0-alpha.2", "@volar/typescript": "~2.4.0-alpha.15",
"@vue/language-core": "2.0.24", "@vue/language-core": "2.0.26",
"semver": "^7.5.4" "semver": "^7.5.4"
}, },
"bin": { "bin": {

3
src/components/utilities/assetManager/AssetManager.vue
View File

@ -52,7 +52,10 @@ import { useAssetManagerStore } from '@/stores/assetManager'
const socket = useSocketStore() const socket = useSocketStore()
const assetManagerStore = useAssetManagerStore() const assetManagerStore = useAssetManagerStore()
const selectedCategory = ref('tiles') const selectedCategory = ref('tiles')
const selectedTile = ref('') const selectedTile = ref('')
const selectedObject = ref('')
const hasScrolled = ref(false) const hasScrolled = ref(false)
const elementToScroll = ref() const elementToScroll = ref()

26
src/components/utilities/assetManager/partials/ObjectDetails.vue
View File

@ -1,22 +1,22 @@
<template> <template>
<div class="object-manager h-full overflow-auto"> <div class="object-manager h-full overflow-auto">
<div class="image-container relative p-2.5 flex items-center justify-center h-[300px]"> <div class="image-container relative p-2.5 flex items-center justify-center h-[300px]">
<img class="max-h-[280px]" :src="objectImageUrl" :alt="'Object ' + selectedObject" /> <img class="max-h-[280px]" :src="`${config.server_endpoint}/assets/objects/${selectedObject?.id}.png`" :alt="'Object ' + selectedObject?.id" />
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</div> </div>
<div class="modal-form asset-manager m-2.5 p-2.5 block"> <div class="modal-form asset-manager m-2.5 p-2.5 block">
<form class="flex gap-2.5 flex-wrap" @submit.prevent> <form class="flex gap-2.5 flex-wrap" @submit.prevent>
<div class="w-full flex flex-col mb-5"> <div class="w-full flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="name">Name</label> <label class="mb-1.5 font-titles" for="name">Name</label>
<input class="input-cyan" type="text" name="name" placeholder="Wall #1" /> <input v-model="objectName" class="input-cyan" type="text" name="name" placeholder="Wall #1" />
</div> </div>
<div class="w-[48%] flex flex-col mb-5"> <!-- @TODO: find Tailwind alternative to use 50% and accomodate gap --> <div class="w-[48%] flex flex-col mb-5"> <!-- @TODO: find Tailwind alternative to use 50% and accomodate gap -->
<label class="mb-1.5 font-titles" for="origin-x">Origin X</label> <label class="mb-1.5 font-titles" for="origin-x">Origin X</label>
<input class="input-cyan" type="number" name="origin-x" placeholder="Origin X" /> <input v-model="objectOriginX" class="input-cyan" type="number" name="origin-x" placeholder="Origin X" />
</div> </div>
<div class="w-[48%] flex flex-col mb-5"> <!-- @TODO: find Tailwind alternative to use 50% and accomodate gap --> <div class="w-[48%] flex flex-col mb-5"> <!-- @TODO: find Tailwind alternative to use 50% and accomodate gap -->
<label class="mb-1.5 font-titles" for="origin-y">Origin Y</label> <label class="mb-1.5 font-titles" for="origin-y">Origin Y</label>
<input class="input-cyan" type="number" name="origin-y" placeholder="Origin Y" /> <input v-model="objectOriginY" class="input-cyan" type="number" name="origin-y" placeholder="Origin Y" />
</div> </div>
<button class="btn-cyan px-[15px] py-1.5 min-w-[100px]" type="button" @click="removeObject">Save</button> <button class="btn-cyan px-[15px] py-1.5 min-w-[100px]" type="button" @click="removeObject">Save</button>
<button class="btn-bordeaux px-[15px] py-1.5 min-w-[100px]" type="button" @click="removeObject">Remove</button> <button class="btn-bordeaux px-[15px] py-1.5 min-w-[100px]" type="button" @click="removeObject">Remove</button>
@ -26,7 +26,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, onBeforeUnmount, onMounted } from 'vue' import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import { useAssetManagerStore } from '@/stores/assetManager' import { useAssetManagerStore } from '@/stores/assetManager'
import { useSocketStore } from '@/stores/socket' import { useSocketStore } from '@/stores/socket'
import config from '@/config' import config from '@/config'
@ -34,8 +34,20 @@ import config from '@/config'
const socket = useSocketStore() const socket = useSocketStore()
const assetManagerStore = useAssetManagerStore() const assetManagerStore = useAssetManagerStore()
const selectedObject = computed(() => assetManagerStore.selectedObject) const selectedObject = computed(() => assetManagerStore.selectedObject)
const objectImageUrl = computed(() => `${config.server_endpoint}/assets/objects/${selectedObject.value}.png`)
const objectDetails = computed(() => assetManagerStore.objectDetails) const objectName = ref('')
const objectOriginX = ref(0)
const objectOriginY = ref(0)
if (!selectedObject.value) {
console.error('No object selected')
}
if (selectedObject.value) {
objectName.value = selectedObject.value.name
objectOriginX.value = selectedObject.value.origin_x
objectOriginY.value = selectedObject.value.origin_y
}
function removeObject() { function removeObject() {
socket.connection.emit('gm:object:remove', { object: selectedObject.value }, (response: boolean) => { socket.connection.emit('gm:object:remove', { object: selectedObject.value }, (response: boolean) => {

2
src/components/utilities/assetManager/partials/ObjectList.vue
View File

@ -7,7 +7,7 @@
<input class="input-cyan search-field w-full" placeholder="Search..." /> <input class="input-cyan search-field w-full" placeholder="Search..." />
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div> <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</div> </div>
<a class="asset relative p-2.5 cursor-pointer" :class="{ active: assetManagerStore.selectedObject === object.id }" v-for="(object, index) in assetManagerStore.objectList" :key="index" @click="assetManagerStore.setSelectedObject(object.id)"> <a class="asset relative p-2.5 cursor-pointer" :class="{ active: assetManagerStore.selectedObject?.id === object.id }" v-for="(object, index) in assetManagerStore.objectList" :key="index" @click="assetManagerStore.setSelectedObject(object as Object)">
<div class="asset-details flex items-center gap-2.5"> <div class="asset-details flex items-center gap-2.5">
<div class="h-[28px] w-[75px] max-w-[75px] flex justify-center"> <div class="h-[28px] w-[75px] max-w-[75px] flex justify-center">
<img class="h-[28px]" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" /> <img class="h-[28px]" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />

21
src/stores/assetManager.ts
View File

@ -4,10 +4,10 @@ import type { Object } from '@/types'
export const useAssetManagerStore = defineStore('assetManager', () => { export const useAssetManagerStore = defineStore('assetManager', () => {
const tileList = ref<string[]>([]) const tileList = ref<string[]>([])
const objectList = ref<Object[]>([])
const selectedTile = ref<string | null>(null) const selectedTile = ref<string | null>(null)
const selectedObject = ref<string | null>(null)
const objectDetails = ref<Record<string, any>>({}) const objectList = ref<Object[]>([])
const selectedObject = ref<Object | null>(null)
function setTileList(tiles: string[]) { function setTileList(tiles: string[]) {
tileList.value = tiles tileList.value = tiles
@ -21,21 +21,10 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
selectedTile.value = tile selectedTile.value = tile
} }
function setSelectedObject(object: string) { function setSelectedObject(object: Object | null) {
selectedObject.value = object selectedObject.value = object
} }
function setObjectDetails(object: Record<string, any>) {
objectDetails.value = object
}
function reset() {
tileList.value = []
selectedTile.value = null
selectedObject.value = null
objectDetails.value = {}
}
return { return {
tileList, tileList,
objectList, objectList,
@ -45,7 +34,5 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
selectedObject, selectedObject,
setSelectedTile, setSelectedTile,
setSelectedObject, setSelectedObject,
objectDetails,
setObjectDetails
} }
}) })