CRUD components for items

src/components/gameMaster/assetManager/AssetManager.vue

@@ -11,8 +11,8 @@
       <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'sprites' }" @click="() => (selectedCategory = 'sprites')">
         <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'sprites' }">Sprites</span>
       </a>
-      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'items' }" @click="() => (selectedCategory = 'items')">
-        <span class="group-hover:text-white">Items</span>
+        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'items' }">Items</span>
       </a>
       <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
         <span class="group-hover:text-white">NPC's</span>
@@ -42,6 +42,7 @@
       <TileList v-if="selectedCategory === 'tiles'" />
       <ObjectList v-if="selectedCategory === 'objects'" />
       <SpriteList v-if="selectedCategory === 'sprites'" />
+      <ItemList v-if="selectedCategory === 'items'" />
       <CharacterTypeList v-if="selectedCategory === 'characterTypes'" />
       <CharacterHairList v-if="selectedCategory === 'characterHair'" />
     </div>
@@ -51,6 +52,7 @@
       <TileDetails v-if="selectedCategory === 'tiles' && assetManagerStore.selectedTile" />
       <ObjectDetails v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" />
       <SpriteDetails v-if="selectedCategory === 'sprites' && assetManagerStore.selectedSprite" />
+      <ItemDetails v-if="selectedCategory === 'items' && assetManagerStore.selectedItem" />
       <CharacterTypeDetails v-if="selectedCategory === 'characterTypes' && assetManagerStore.selectedCharacterType" />
       <CharacterHairDetails v-if="selectedCategory === 'characterHair' && assetManagerStore.selectedCharacterHair" />
     </div>
@@ -70,6 +72,8 @@ import CharacterTypeList from '@/components/gameMaster/assetManager/partials/cha
 import CharacterTypeDetails from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue'
 import CharacterHairList from '@/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue'
 import CharacterHairDetails from '@/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue'
+import ItemList from '@/components/gameMaster/assetManager/partials/item/itemList.vue'
+import ItemDetails from '@/components/gameMaster/assetManager/partials/item/itemDetails.vue'
 
 const assetManagerStore = useAssetManagerStore()
 const selectedCategory = ref('tiles')

src/components/gameMaster/assetManager/partials/item/itemDetails.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="h-full overflow-auto">
+    <div class="p-2.5 block rounded-md border border-solid border-gray-500 bg-gray-700">
+      <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveItem">
+        <div class="form-field-full">
+          <label for="name">Name</label>
+          <input v-model="itemName" class="input-field" type="text" name="name" placeholder="Item Name" />
+        </div>
+        <div class="form-field-full">
+          <label for="description">Description</label>
+          <input v-model="itemDescription" class="input-field" type="text" name="description" placeholder="Item Description" />
+        </div>
+        <div class="form-field-full">
+          <label for="itemType">Type</label>
+          <select v-model="itemType" class="input-field" name="itemType">
+            <option v-for="type in itemTypeOptions" :key="type" :value="type">{{ type }}</option>
+          </select>
+        </div>
+        <div class="form-field-full">
+          <label for="rarity">Rarity</label>
+          <select v-model="itemRarity" class="input-field" name="rarity">
+            <option v-for="rarity in rarityOptions" :key="rarity" :value="rarity">{{ rarity }}</option>
+          </select>
+        </div>
+        <div class="form-field-full">
+          <label for="stackable">Stackable</label>
+          <select v-model="itemStackable" class="input-field" name="stackable">
+            <option :value="false">No</option>
+            <option :value="true">Yes</option>
+          </select>
+        </div>
+        <div class="form-field-full">
+          <label for="spriteId">Sprite</label>
+          <select v-model="itemSpriteId" class="input-field" name="spriteId">
+            <option disabled selected value="">Select sprite</option>
+            <option v-for="sprite in assetManagerStore.spriteList" :key="sprite.id" :value="sprite.id">{{ sprite.name }}</option>
+          </select>
+        </div>
+        <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
+        <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeItem">Remove</button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Item, ItemType, ItemRarity } from '@/types'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useAssetManagerStore } from '@/stores/assetManagerStore'
+import { useGameStore } from '@/stores/gameStore'
+
+const gameStore = useGameStore()
+const assetManagerStore = useAssetManagerStore()
+
+const selectedItem = computed(() => assetManagerStore.selectedItem)
+
+const itemName = ref('')
+const itemDescription = ref('')
+const itemType = ref<ItemType>('WEAPON' as ItemType)
+const itemRarity = ref<ItemRarity>('COMMON' as ItemRarity)
+const itemStackable = ref<boolean>(false)
+const itemSpriteId = ref<string | null | undefined>(null)
+
+const itemTypeOptions: ItemType[] = ['WEAPON', 'HELMET', 'CHEST', 'LEGS', 'BOOTS', 'GLOVES', 'RING', 'NECKLACE']
+const rarityOptions: ItemRarity[] = ['COMMON', 'UNCOMMON', 'RARE', 'EPIC', 'LEGENDARY']
+
+if (!selectedItem.value) {
+  console.error('No item selected')
+}
+
+if (selectedItem.value) {
+  itemName.value = selectedItem.value.name
+  itemDescription.value = selectedItem.value.description || ''
+  itemType.value = selectedItem.value.itemType
+  itemRarity.value = selectedItem.value.rarity
+  itemStackable.value = selectedItem.value.stackable
+  itemSpriteId.value = selectedItem.value.spriteId
+}
+
+function removeItem() {
+  if (!selectedItem.value) return
+
+  gameStore.connection?.emit('gm:item:remove', { id: selectedItem.value.id }, (response: boolean) => {
+    if (!response) {
+      console.error('Failed to remove item')
+      return
+    }
+    refreshItemList()
+  })
+}
+
+function refreshItemList(unsetSelectedItem = true) {
+  gameStore.connection?.emit('gm:item:list', {}, (response: Item[]) => {
+    assetManagerStore.setItemList(response)
+
+    if (unsetSelectedItem) {
+      assetManagerStore.setSelectedItem(null)
+    }
+  })
+}
+
+function saveItem() {
+  const itemData = {
+    id: selectedItem.value!.id,
+    name: itemName.value,
+    description: itemDescription.value,
+    itemType: itemType.value,
+    rarity: itemRarity.value,
+    stackable: itemStackable.value,
+    spriteId: itemSpriteId.value
+  }
+
+  gameStore.connection?.emit('gm:item:update', itemData, (response: boolean) => {
+    if (!response) {
+      console.error('Failed to save item')
+      return
+    }
+    refreshItemList(false)
+  })
+}
+
+watch(selectedItem, (item: Item | null) => {
+  if (!item) return
+  itemName.value = item.name
+  itemDescription.value = item.description || ''
+  itemType.value = item.itemType
+  itemRarity.value = item.rarity
+  itemStackable.value = item.stackable
+  itemSpriteId.value = item.spriteId
+})
+
+onMounted(() => {
+  if (!selectedItem.value) return
+
+  gameStore.connection?.emit('gm:sprite:list', {}, (response: Sprite[]) => {
+    assetManagerStore.setSpriteList(response)
+  })
+})
+
+onBeforeUnmount(() => {
+  assetManagerStore.setSelectedItem(null)
+})
+</script>

src/components/gameMaster/assetManager/partials/item/itemList.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="relative mb-5 flex items-center gap-x-2.5">
+    <input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
+    <label for="create-item" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2.5 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
+      <button class="p-0 h-5" id="create-item" @click="createNewItem">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="white">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+        </svg>
+      </button>
+    </label>
+  </div>
+  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
+    <div v-bind="wrapperProps" ref="elementToScroll">
+      <a v-for="{ data: item } in list" :key="item.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedItem?.id === item.id }" @click="assetManagerStore.setSelectedItem(item as Item)">
+        <div class="flex items-center gap-2.5">
+          <span class="group-hover:text-white" :class="{ 'text-white': assetManagerStore.selectedItem?.id === item.id }">
+            {{ item.name }}
+            <small class="text-gray-400">({{ item.itemType }})</small>
+          </span>
+        </div>
+      </a>
+    </div>
+    <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
+      <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
+        <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useGameStore } from '@/stores/gameStore'
+import { onMounted, ref, computed } from 'vue'
+import { useAssetManagerStore } from '@/stores/assetManagerStore'
+import type { Item } from '@/types'
+import { useVirtualList } from '@vueuse/core'
+
+const gameStore = useGameStore()
+const assetManagerStore = useAssetManagerStore()
+
+const searchQuery = ref('')
+
+const hasScrolled = ref(false)
+const elementToScroll = ref()
+
+const handleSearch = () => {
+  virtualList.value?.scrollTo(0)
+}
+
+const createNewItem = () => {
+  gameStore.connection?.emit('gm:item:create', {}, (response: boolean) => {
+    if (!response) {
+      console.error('Failed to create new item')
+      return
+    }
+
+    gameStore.connection?.emit('gm:item:list', {}, (response: Item[]) => {
+      assetManagerStore.setItemList(response)
+    })
+  })
+}
+
+const filteredItems = computed(() => {
+  if (!searchQuery.value) {
+    return assetManagerStore.itemList
+  }
+  return assetManagerStore.itemList.filter((item) =>
+    item.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+    item.itemType.toLowerCase().includes(searchQuery.value.toLowerCase())
+  )
+})
+
+const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(filteredItems, {
+  itemHeight: 48
+})
+
+const virtualList = ref({ scrollTo })
+
+const onScroll = () => {
+  let scrollTop = elementToScroll.value.style.marginTop.replace('px', '')
+
+  if (scrollTop > 80) {
+    hasScrolled.value = true
+  } else if (scrollTop <= 80) {
+    hasScrolled.value = false
+  }
+}
+
+function toTop() {
+  virtualList.value?.scrollTo(0)
+}
+
+onMounted(() => {
+  gameStore.connection?.emit('gm:item:list', {}, (response: Item[]) => {
+    assetManagerStore.setItemList(response)
+  })
+})
+</script>

src/components/screens/Login.vue

@@ -6,7 +6,7 @@
     <div class="bg-[url('/assets/login/login-bg.png')] w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center"></div>
     <div class="bg-gray-900 z-20 w-full lg:w-1/2 h-[65dvh] lg:h-dvh relative">
       <div class="h-dvh flex items-center lg:justify-center flex-col px-8 max-lg:pt-20">
-        <img src="/assets/login/sq-logo-v1.svg" class="mb-10" alt="Noxious World logo" />
+<!--        <img src="/assets/tlogo.png" class="mb-10 w-52" alt="Noxious World logo" />-->
         <div class="relative">
           <img src="/assets/ui-elements/login-ui-box-outer.svg" class="absolute w-full h-full" alt="UI box outer" />
           <img src="/assets/ui-elements/login-ui-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)] max-lg:hidden" alt="UI box inner" />

src/stores/assetManagerStore.ts

@@ -1,6 +1,6 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
-import type { Tile, Object, Sprite, CharacterType, CharacterHair } from '@/types'
+import type { Tile, Object, Sprite, CharacterType, CharacterHair, Item } from '@/types'
 
 export const useAssetManagerStore = defineStore('assetManager', () => {
   const tileList = ref<Tile[]>([])
@@ -18,6 +18,9 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
   const characterHairList = ref<CharacterHair[]>([])
   const selectedCharacterHair = ref<CharacterHair | null>(null)
 
+  const itemList = ref<Item[]>([])
+  const selectedItem = ref<Item | null>(null)
+
   function setTileList(tiles: Tile[]) {
     tileList.value = tiles
   }
@@ -58,6 +61,14 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
     selectedCharacterHair.value = characterHair
   }
 
+  function setItemList(items: Item[]) {
+    itemList.value = items
+  }
+
+  function setSelectedItem(item: Item | null) {
+    selectedItem.value = item
+  }
+
   return {
     tileList,
     selectedTile,
@@ -69,6 +80,8 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
     selectedCharacterType,
     characterHairList,
     selectedCharacterHair,
+    itemList,
+    selectedItem,
     setTileList,
     setSelectedTile,
     setObjectList,
@@ -78,6 +91,8 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
     setSelectedSprite,
     setSelectedCharacterType,
     setCharacterHairList,
-    setSelectedCharacterHair
+    setSelectedCharacterHair,
+    setItemList,
+    setSelectedItem
   }
 })

src/types.ts

@@ -45,12 +45,18 @@ export type Item = {
   id: string
   name: string
   description: string | null
+  itemType: ItemType
   stackable: boolean
+  rarity: ItemRarity
+  spriteId: string | null
+  sprite?: Sprite
   createdAt: Date
   updatedAt: Date
-  characters: CharacterItem[]
 }
 
+export type ItemType = 'WEAPON' | 'HELMET' | 'CHEST' | 'LEGS' | 'BOOTS' | 'GLOVES' | 'RING' | 'NECKLACE'
+export type ItemRarity = 'COMMON' | 'UNCOMMON' | 'RARE' | 'EPIC' | 'LEGENDARY'
+
 export type Zone = {
   id: number
   name: string
@@ -155,7 +161,6 @@ export type CharacterHair = {
   sprite: Sprite
   gender: CharacterGender
   isSelectable: boolean
-  // @TODO: Do we need addedAt and updatedAt?
 }
 
 export type Character = {