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

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

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

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

@ -1,22 +1,22 @@
<template>
<div class="object-manager h-full overflow-auto">
<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>
<div class="modal-form asset-manager m-2.5 p-2.5 block">
<form class="flex gap-2.5 flex-wrap" @submit.prevent>
<div class="w-full flex flex-col mb-5">
<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 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>
<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 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>
<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>
<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>
@ -26,7 +26,7 @@
</template>
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted } from 'vue'
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import { useAssetManagerStore } from '@/stores/assetManager'
import { useSocketStore } from '@/stores/socket'
import config from '@/config'
@ -34,8 +34,20 @@ import config from '@/config'
const socket = useSocketStore()
const assetManagerStore = useAssetManagerStore()
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() {
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..." />
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></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="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" />

21
src/stores/assetManager.ts
View File

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