From 301340327ad173b2d33c59d96b7ad51815bec55b Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sat, 23 Nov 2024 15:29:49 +0100
Subject: [PATCH] Added components to manage hair types

---
 .../gameMaster/assetManager/AssetManager.vue  |   4 +
 .../characterHair/CharacterHairDetails.vue    | 124 ++++++++++++++++++
 .../characterHair/CharacterHairList.vue       |  93 +++++++++++++
 src/components/screens/Characters.vue         |  10 +-
 src/stores/assetManagerStore.ts               |  19 ++-
 src/types.ts                                  |   2 +
 6 files changed, 245 insertions(+), 7 deletions(-)
 create mode 100644 src/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue
 create mode 100644 src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue

diff --git a/src/components/gameMaster/assetManager/AssetManager.vue b/src/components/gameMaster/assetManager/AssetManager.vue
index 959d543..ee9a05e 100644
--- a/src/components/gameMaster/assetManager/AssetManager.vue
+++ b/src/components/gameMaster/assetManager/AssetManager.vue
@@ -55,6 +55,7 @@
       <ObjectList v-if="selectedCategory === 'objects'" />
       <SpriteList v-if="selectedCategory === 'sprites'" />
       <CharacterTypeList v-if="selectedCategory === 'characterTypes'" />
+      <CharacterHairList v-if="selectedCategory === 'characterHair'" />
     </div>
 
     <div class="absolute w-px bg-gray-500 h-full top-0 left-1/2"></div>
@@ -65,6 +66,7 @@
       <ObjectDetails v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" />
       <SpriteDetails v-if="selectedCategory === 'sprites' && assetManagerStore.selectedSprite" />
       <CharacterTypeDetails v-if="selectedCategory === 'characterTypes' && assetManagerStore.selectedCharacterType" />
+      <CharacterHairDetails v-if="selectedCategory === 'characterHair' && assetManagerStore.selectedCharacterHair" />
     </div>
   </div>
 </template>
@@ -80,6 +82,8 @@ import SpriteList from '@/components/gameMaster/assetManager/partials/sprite/Spr
 import SpriteDetails from '@/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue'
 import CharacterTypeList from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue'
 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'
 
 const assetManagerStore = useAssetManagerStore()
 const selectedCategory = ref('tiles')
diff --git a/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue b/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue
new file mode 100644
index 0000000..952c9ef
--- /dev/null
+++ b/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="h-full overflow-auto">
+    <div class="m-2.5 p-2.5 block">
+      <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveCharacterHair">
+        <div class="form-field-full">
+          <label for="name">Name</label>
+          <input v-model="characterName" class="input-field" type="text" name="name" placeholder="Character Type Name" />
+        </div>
+        <div class="form-field-full">
+          <label for="gender">Gender</label>
+          <select v-model="characterGender" class="input-field" name="gender">
+            <option v-for="gender in genderOptions" :key="gender" :value="gender">{{ gender }}</option>
+          </select>
+        </div>
+        <div class="form-field-full">
+          <label for="isEnabledForCharCreation">Is enabled for character creation</label>
+          <select v-model="characterIsEnabledForCharCreation" class="input-field" name="isEnabledForCharCreation">
+            <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="characterSpriteId" 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="removeCharacterHair">Remove</button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { CharacterHair, CharacterGender, Sprite } 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 selectedCharacterHair = computed(() => assetManagerStore.selectedCharacterHair)
+
+const characterName = ref('')
+const characterGender = ref<CharacterGender>('MALE' as CharacterGender.MALE)
+const characterIsEnabledForCharCreation = 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
+  characterIsEnabledForCharCreation.value = selectedCharacterHair.value.isEnabledForCharCreation
+  characterSpriteId.value = selectedCharacterHair.value.spriteId
+}
+
+function removeCharacterHair() {
+  if (!selectedCharacterHair.value) return
+
+  gameStore.connection?.emit('gm:characterHair:remove', { id: selectedCharacterHair.value.id }, (response: boolean) => {
+    if (!response) {
+      console.error('Failed to remove character hair')
+      return
+    }
+    refreshCharacterHairList()
+  })
+}
+
+function refreshCharacterHairList(unsetSelectedCharacterHair = true) {
+  gameStore.connection?.emit('gm:characterHair:list', {}, (response: CharacterHair[]) => {
+    assetManagerStore.setCharacterHairList(response)
+
+    if (unsetSelectedCharacterHair) {
+      assetManagerStore.setSelectedCharacterHair(null)
+    }
+  })
+}
+
+function saveCharacterHair() {
+  const characterHairData = {
+    id: selectedCharacterHair.value!.id,
+    name: characterName.value,
+    gender: characterGender.value,
+    isEnabledForCharCreation: characterIsEnabledForCharCreation.value,
+    spriteId: characterSpriteId.value
+  }
+
+  gameStore.connection?.emit('gm:characterHair:update', characterHairData, (response: boolean) => {
+    if (!response) {
+      console.error('Failed to save character type')
+      return
+    }
+    refreshCharacterHairList(false)
+  })
+}
+
+watch(selectedCharacterHair, (characterHair: CharacterHair | null) => {
+  if (!characterHair) return
+  characterName.value = characterHair.name
+  characterGender.value = characterHair.gender
+  characterIsEnabledForCharCreation.value = characterHair.isEnabledForCharCreation
+  characterSpriteId.value = characterHair.spriteId
+})
+
+onMounted(() => {
+  if (!selectedCharacterHair.value) return
+
+  gameStore.connection?.emit('gm:sprite:list', {}, (response: Sprite[]) => {
+    assetManagerStore.setSpriteList(response)
+  })
+})
+
+onBeforeUnmount(() => {
+  assetManagerStore.setSelectedCharacterHair(null)
+})
+</script>
diff --git a/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue b/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue
new file mode 100644
index 0000000..49747c8
--- /dev/null
+++ b/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="relative p-2.5 flex items-center gap-x-2.5">
+    <input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
+    <label for="create-character" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
+      <button class="p-0 h-5" id="create-character" @click="createNewCharacterHair">
+        <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 class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+  </div>
+  <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
+    <div v-bind="wrapperProps" ref="elementToScroll">
+      <a v-for="{ data: characterHair } in list" :key="characterHair.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedCharacterHair?.id === characterHair.id }" @click="assetManagerStore.setSelectedCharacterHair(characterHair as CharacterHair)">
+        <div class="flex items-center gap-2.5">
+          <span :class="{ 'text-white': assetManagerStore.selectedCharacterHair?.id === characterHair.id }">{{ characterHair.name }}</span>
+        </div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      </a>
+    </div>
+    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 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>
+</template>
+
+<script setup lang="ts">
+import { useGameStore } from '@/stores/gameStore'
+import { onMounted, ref, computed } from 'vue'
+import { useAssetManagerStore } from '@/stores/assetManagerStore'
+import type { CharacterHair } 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 = () => {
+  // Trigger a re-render of the virtual list
+  virtualList.value?.scrollTo(0)
+}
+
+const createNewCharacterHair = () => {
+  gameStore.connection?.emit('gm:characterHair:create', {}, (response: boolean) => {
+    if (!response) {
+      console.error('Failed to create new character type')
+      return
+    }
+
+    gameStore.connection?.emit('gm:characterHair:list', {}, (response: CharacterHair[]) => {
+      assetManagerStore.setCharacterHairList(response)
+    })
+  })
+}
+
+const filteredCharacterHairs = computed(() => {
+  if (!searchQuery.value) {
+    return assetManagerStore.characterHairList
+  }
+  return assetManagerStore.characterHairList.filter((character) => character.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
+})
+
+const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(filteredCharacterHairs, {
+  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:characterHair:list', {}, (response: CharacterHair[]) => {
+    assetManagerStore.setCharacterHairList(response)
+  })
+})
+</script>
diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index a2fc9b1..1e925a9 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -39,10 +39,10 @@
                       <img src="/assets/icons/triangle-icon.svg" class="w-3 h-3.5 -scale-x-100" alt="Arrow right" />
                     </button>
                   </div>
-                  <div class="flex justify-between w-[190px]">
-                    <!-- TODO: replace with color swatches -->
-                    <button v-for="n in 9" class="w-4 h-4 rounded-sm bg-white"></button>
-                  </div>
+<!--                  <div class="flex justify-between w-[190px]">-->
+<!--                    &lt;!&ndash; TODO: replace with color swatches &ndash;&gt;-->
+<!--                    <button v-for="n in 9" class="w-4 h-4 rounded-sm bg-white"></button>-->
+<!--                  </div>-->
                 </div>
                 <!-- TODO: update gender on (selected) character -->
                 <div class="flex justify-between w-[190px]">
@@ -64,7 +64,7 @@
                 <span class="text-sm">Hairstyle</span>
                 <div class="flex gap-2 flex-wrap max-h-20 overflow-y-auto scrollbar">
                   <button class="bg-gray border border-solid border-gray-500 min-w-9 max-w-9 min-h-9 max-h-9 p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400">
-                    <img src="/assets/icons/x-button-gray.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
+                    <img src="/assets/icons/x-button-gray.svg" class="w-4 h-4 m-auto" alt="No hair" />
                   </button>
                   <!-- TODO: replace with hairstyles -->
                   <button v-for="n in 30" class="bg-gray border border-solid border-gray-500 min-w-9 max-w-9 min-h-9 max-h-9 p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400"></button>
diff --git a/src/stores/assetManagerStore.ts b/src/stores/assetManagerStore.ts
index 72c9c69..4a5de59 100644
--- a/src/stores/assetManagerStore.ts
+++ b/src/stores/assetManagerStore.ts
@@ -1,6 +1,6 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
-import type { Tile, Object, Sprite, CharacterType } from '@/types'
+import type { Tile, Object, Sprite, CharacterType, CharacterHair } from '@/types'
 
 export const useAssetManagerStore = defineStore('assetManager', () => {
   const tileList = ref<Tile[]>([])
@@ -15,6 +15,9 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
   const characterTypeList = ref<CharacterType[]>([])
   const selectedCharacterType = ref<CharacterType | null>(null)
 
+  const characterHairList = ref<CharacterHair[]>([])
+  const selectedCharacterHair = ref<CharacterHair | null>(null)
+
   function setTileList(tiles: Tile[]) {
     tileList.value = tiles
   }
@@ -47,6 +50,14 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
     selectedCharacterType.value = characterType
   }
 
+  function setCharacterHairList(characterHair: CharacterHair[]) {
+    characterHairList.value = characterHair
+  }
+
+  function setSelectedCharacterHair(characterHair: CharacterHair | null) {
+    selectedCharacterHair.value = characterHair
+  }
+
   return {
     tileList,
     selectedTile,
@@ -56,6 +67,8 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
     selectedSprite,
     characterTypeList,
     selectedCharacterType,
+    characterHairList,
+    selectedCharacterHair,
     setTileList,
     setSelectedTile,
     setObjectList,
@@ -63,6 +76,8 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
     setSelectedObject,
     setSpriteList,
     setSelectedSprite,
-    setSelectedCharacterType
+    setSelectedCharacterType,
+    setCharacterHairList,
+    setSelectedCharacterHair
   }
 })
diff --git a/src/types.ts b/src/types.ts
index af20d10..dce086c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -150,6 +150,8 @@ export type CharacterHair = {
   name: string
   spriteId: string
   sprite: Sprite
+  gender: CharacterGender
+  isEnabledForCharCreation: boolean
   // @TODO: Do we need addedAt and updatedAt?
 }