#245 : Added color field to character hair

src/application/types.ts

@@ -151,8 +151,9 @@ export type CharacterType = {
 export type CharacterHair = {
   id: string
   name: string
-  sprite?: Sprite
+  sprite: string | Sprite
   gender: CharacterGender
+  color: string
   isSelectable: boolean
 }
 

src/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue

@@ -25,6 +25,21 @@
             <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 v-if="characterSpriteId" class="mt-4 flex flex-col">
+            <div class="mt-4 p-2.5 block rounded-md default-border bg-gray-800">
+              <h3 class="text-white mb-2">Preview</h3>
+              <div class="flex items-center justify-center p-4 bg-gray-700 rounded">
+                <img :src="config.server_endpoint + '/textures/sprites/' + characterSpriteId + '/front.png'" class="max-w-[200px] max-h-[200px] object-contain" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="form-field-full">
+          <div class="space-x-6 flex items-center">
+            <label for="color">Color</label>
+            <input v-model="characterColor" class="input-field" type="text" name="color" placeholder="Character Hair Color" />
+            <div class="h-[38px] w-[38px] rounded" :style="{ backgroundColor: characterColor }"></div>
+          </div>
         </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="removeCharacterHair">Remove</button>
@@ -34,11 +49,12 @@
 </template>
 
 <script setup lang="ts">
+import config from '@/application/config'
 import { SocketEvent } from '@/application/enums'
 import type { CharacterGender, CharacterHair, Sprite } from '@/application/types'
 import { downloadCache } from '@/application/utilities'
 import { socketManager } from '@/managers/SocketManager'
-import { CharacterHairStorage, TileStorage } from '@/storage/storages'
+import { CharacterHairStorage } from '@/storage/storages'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
@@ -48,18 +64,15 @@ const selectedCharacterHair = computed(() => assetManagerStore.selectedCharacter
 
 const characterName = ref('')
 const characterGender = ref<CharacterGender>('MALE' as CharacterGender.MALE)
+const characterColor = ref<string>('#000000')
 const characterIsSelectable = ref<boolean>(false)
 const characterSpriteId = ref<string | null | undefined>(null)
-
 const genderOptions: CharacterGender[] = ['MALE' as CharacterGender.MALE, 'FEMALE' as CharacterGender.FEMALE]
 
-if (!selectedCharacterHair.value) {
-  console.error('No character hair selected')
-}
-
 if (selectedCharacterHair.value) {
   characterName.value = selectedCharacterHair.value.name
   characterGender.value = selectedCharacterHair.value.gender
+  characterColor.value = selectedCharacterHair.value.color
   characterIsSelectable.value = selectedCharacterHair.value.isSelectable
   characterSpriteId.value = selectedCharacterHair.value.sprite?.id
 }
@@ -93,6 +106,7 @@ async function saveCharacterHair() {
     id: selectedCharacterHair.value!.id,
     name: characterName.value,
     gender: characterGender.value,
+    color: characterColor.value,
     isSelectable: characterIsSelectable.value,
     spriteId: characterSpriteId.value
   }
@@ -112,6 +126,7 @@ watch(selectedCharacterHair, (characterHair: CharacterHair | null) => {
   if (!characterHair) return
   characterName.value = characterHair.name
   characterGender.value = characterHair.gender
+  characterColor.value = characterHair.color
   characterIsSelectable.value = characterHair.isSelectable
   characterSpriteId.value = characterHair.sprite?.id
 })

src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue

@@ -104,7 +104,7 @@ async function deleteSprite() {
       return
     }
 
-    await downloadCache('sprite', new SpriteStorage())
+    await downloadCache('sprites', new SpriteStorage())
     await refreshSpriteList()
   })
 }
@@ -116,7 +116,7 @@ async function copySprite() {
       return
     }
 
-    await downloadCache('sprite', new SpriteStorage())
+    await downloadCache('sprites', new SpriteStorage())
     await refreshSpriteList(false)
   })
 }
@@ -160,7 +160,7 @@ async function saveSprite() {
       return
     }
 
-    await downloadCache('sprite', new SpriteStorage())
+    await downloadCache('sprites', new SpriteStorage())
     await refreshSpriteList(false)
   })
 }