From ab97e27f2729d28be4c8518043e03b391777c9ef Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sat, 23 Nov 2024 16:47:41 +0100
Subject: [PATCH] Moved game components into a new folder, working proof of
 concept hair customisation

---
 src/assets/scss/main.scss                     |  2 +-
 .../{sprites => game/character}/Character.vue | 13 +++-
 .../game/character/partials/ChatBubble.vue    |  0
 src/components/{ => game}/zone/Characters.vue |  2 +-
 src/components/{ => game}/zone/Zone.vue       |  6 +-
 .../{ => game}/zone/ZoneObjects.vue           |  2 +-
 src/components/{ => game}/zone/ZoneTiles.vue  |  0
 .../{ => game}/zone/partials/ZoneObject.vue   |  0
 src/components/gui/Chat.vue                   |  4 +-
 src/components/screens/Characters.vue         | 66 ++++++++++++++-----
 src/components/screens/Game.vue               |  2 +-
 11 files changed, 68 insertions(+), 29 deletions(-)
 rename src/components/{sprites => game/character}/Character.vue (94%)
 create mode 100644 src/components/game/character/partials/ChatBubble.vue
 rename src/components/{ => game}/zone/Characters.vue (83%)
 rename src/components/{ => game}/zone/Zone.vue (92%)
 rename src/components/{ => game}/zone/ZoneObjects.vue (80%)
 rename src/components/{ => game}/zone/ZoneTiles.vue (100%)
 rename src/components/{ => game}/zone/partials/ZoneObject.vue (100%)

diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 2203ec7..728a60b 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -67,7 +67,7 @@ input {
   }
   &[type='number']::-webkit-inner-spin-button,
   &[type='number']::-webkit-outer-spin-button,
-  &[type='radio']{
+  &[type='radio'] {
     -webkit-appearance: none;
   }
 }
diff --git a/src/components/sprites/Character.vue b/src/components/game/character/Character.vue
similarity index 94%
rename from src/components/sprites/Character.vue
rename to src/components/game/character/Character.vue
index 17df8c4..1b5bf1a 100644
--- a/src/components/sprites/Character.vue
+++ b/src/components/game/character/Character.vue
@@ -12,6 +12,8 @@
   </Container>
   <!--  Character sprite -->
   <Container ref="charContainer" :depth="isometricDepth" :x="currentX" :y="currentY">
+    <!--    HAIR-->
+    <Image :origin-y="4.2" :depth="1" :texture="props.zoneCharacter.character.hair?.spriteId + '-front'" />
     <Sprite ref="charSprite" :origin-y="1" :flipX="isFlippedX" :flipY="false" />
   </Container>
 </template>
@@ -22,7 +24,7 @@ import { type Sprite as SpriteT, type ZoneCharacter } from '@/types'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneStore } from '@/stores/zoneStore'
 import { watch, computed, ref, onMounted, onUnmounted } from 'vue'
-import { Container, refObj, RoundRectangle, Sprite, Text, useGame, useScene } from 'phavuer'
+import { Container, Image, refObj, RoundRectangle, Sprite, Text, useGame, useScene } from 'phavuer'
 import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { loadSpriteTextures } from '@/composables/gameComposable'
 
@@ -31,7 +33,6 @@ enum Direction {
   NEGATIVE,
   UNCHANGED
 }
-
 const props = defineProps<{
   layer: Phaser.Tilemaps.TilemapLayer
   zoneCharacter: ZoneCharacter
@@ -181,6 +182,14 @@ watch(
 
 watch(() => props.zoneCharacter, updateSprite)
 
+
+// Hair demo
+loadSpriteTextures(scene, props.zoneCharacter.character.hair?.sprite as SpriteT)
+  .then(() => {})
+  .catch((error) => {
+    console.error('Error loading texture:', error)
+  })
+
 loadSpriteTextures(scene, props.zoneCharacter.character.characterType?.sprite as SpriteT)
   .then(() => {
     charSprite.value!.setTexture(charTexture.value)
diff --git a/src/components/game/character/partials/ChatBubble.vue b/src/components/game/character/partials/ChatBubble.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/zone/Characters.vue b/src/components/game/zone/Characters.vue
similarity index 83%
rename from src/components/zone/Characters.vue
rename to src/components/game/zone/Characters.vue
index 7b6ecb2..c144d09 100644
--- a/src/components/zone/Characters.vue
+++ b/src/components/game/zone/Characters.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import Character from '@/components/sprites/Character.vue'
+import Character from '@/components/game/character/Character.vue'
 import { useZoneStore } from '@/stores/zoneStore'
 
 const zoneStore = useZoneStore()
diff --git a/src/components/zone/Zone.vue b/src/components/game/zone/Zone.vue
similarity index 92%
rename from src/components/zone/Zone.vue
rename to src/components/game/zone/Zone.vue
index d6c6234..7675ecb 100644
--- a/src/components/zone/Zone.vue
+++ b/src/components/game/zone/Zone.vue
@@ -11,9 +11,9 @@ import { useGameStore } from '@/stores/gameStore'
 import { useZoneStore } from '@/stores/zoneStore'
 import { loadZoneTilesIntoScene } from '@/composables/zoneComposable'
 import type { Zone as ZoneT, ZoneCharacter } from '@/types'
-import ZoneTiles from '@/components/zone/ZoneTiles.vue'
-import ZoneObjects from '@/components/zone/ZoneObjects.vue'
-import Characters from '@/components/zone/Characters.vue'
+import ZoneTiles from '@/components/game/zone/ZoneTiles.vue'
+import ZoneObjects from '@/components/game/zone/ZoneObjects.vue'
+import Characters from '@/components/game/zone/Characters.vue'
 
 const scene = useScene()
 const gameStore = useGameStore()
diff --git a/src/components/zone/ZoneObjects.vue b/src/components/game/zone/ZoneObjects.vue
similarity index 80%
rename from src/components/zone/ZoneObjects.vue
rename to src/components/game/zone/ZoneObjects.vue
index 0e8edbc..319c66e 100644
--- a/src/components/zone/ZoneObjects.vue
+++ b/src/components/game/zone/ZoneObjects.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import { useZoneStore } from '@/stores/zoneStore'
-import ZoneObject from '@/components/zone/partials/ZoneObject.vue'
+import ZoneObject from '@/components/game/zone/partials/ZoneObject.vue'
 
 const zoneStore = useZoneStore()
 
diff --git a/src/components/zone/ZoneTiles.vue b/src/components/game/zone/ZoneTiles.vue
similarity index 100%
rename from src/components/zone/ZoneTiles.vue
rename to src/components/game/zone/ZoneTiles.vue
diff --git a/src/components/zone/partials/ZoneObject.vue b/src/components/game/zone/partials/ZoneObject.vue
similarity index 100%
rename from src/components/zone/partials/ZoneObject.vue
rename to src/components/game/zone/partials/ZoneObject.vue
diff --git a/src/components/gui/Chat.vue b/src/components/gui/Chat.vue
index 81363cf..6d9cf09 100644
--- a/src/components/gui/Chat.vue
+++ b/src/components/gui/Chat.vue
@@ -37,11 +37,11 @@ const chats = ref([] as Chat[])
 const chatWindow = ref<HTMLElement | null>(null)
 const chatInput = ref<HTMLElement | null>(null)
 
-onClickOutside(chatInput, event => unfocusChat(event, chatInput.value as HTMLElement))
+onClickOutside(chatInput, (event) => unfocusChat(event, chatInput.value as HTMLElement))
 
 function unfocusChat(event: Event, targetElement: HTMLElement) {
   if (!(event.target instanceof Node) || !targetElement.contains(event.target)) {
-    targetElement.blur();
+    targetElement.blur()
   }
 }
 
diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index 1136828..4f95445 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -16,7 +16,12 @@
         <div class="flex w-full h-[400px] border border-solid border-gray-500 rounded-md rounded-tl-none bg-gray">
           <div class="w-1/3 h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center border-0 border-r border-solid border-gray-500 rounded-bl-md relative">
             <div class="absolute right-full -top-px flex gap-1 flex-col">
-              <div v-for="character in characters" :key="character.id" class="character relative rounded-l border border-solid border-gray-500 w-9 h-[50px] bg-[url('/assets/ui-texture.png')] after:absolute after:w-full after:h-px after:bg-gray-500" :class="{ active: selected_character == character.id }">
+              <div
+                v-for="character in characters"
+                :key="character.id"
+                class="character relative rounded-l border border-solid border-gray-500 w-9 h-[50px] bg-[url('/assets/ui-texture.png')] after:absolute after:w-full after:h-px after:bg-gray-500"
+                :class="{ active: selected_character == character.id }"
+              >
                 <img src="/assets/avatar/default/head.png" class="w-9 h-9 object-contain absolute top-1/2 -translate-y-1/2" alt="Player head" />
                 <input class="h-full w-full absolute m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0" type="radio" name="character" :value="character.id" v-model="selected_character" />
               </div>
@@ -39,10 +44,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]">-->
-<!--                    &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 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]">
@@ -66,8 +71,18 @@
                   <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 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500">
                     <img src="/assets/icons/x-button-gray.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
                   </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 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500"></button>
+                  <!-- TODO #255: make radio button so we can set a value, do the same with swatches -->
+                  <button
+                    v-for="hair in hairs"
+                    class="border border-solid border-gray-500 min-w-9 max-w-9 min-h-9 max-h-9 p-2 rounded-sm hover:border-gray-400 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500"
+                    @click="selectedHair = hair"
+                    :class="{
+                      'bg-cyan': hair.id === selectedHair?.id,
+                      'bg-gray-500 hover:bg-gray-500': hair.id !== selectedHair?.id
+                    }"
+                  >
+                    <img class="w-4 h-4 m-auto" :src="config.server_endpoint + '/assets/sprites/' + hair.spriteId + '/front.png'" alt="Male symbol" />
+                  </button>
                 </div>
               </div>
               <div class="flex flex-col gap-3 w-full">
@@ -103,7 +118,7 @@
         <form method="post" @submit.prevent="create" class="h-full flex flex-col justify-between">
           <div class="form-field-full">
             <label for="name" class="text-white">Nickname</label>
-            <input class="input-field" v-model="name" name="name" id="name" placeholder="Enter a nickname.." />
+            <input class="input-field" v-model="name" name="name" id="name" placeholder="Enter a nickname..." />
           </div>
           <div class="grid grid-flow-col justify-stretch gap-4">
             <button type="button" class="btn-empty py-1.5 px-4 inline-block" @click.prevent="isModalOpen = false">Cancel</button>
@@ -129,10 +144,11 @@
 </template>
 
 <script setup lang="ts">
+import config from '@/config'
 import { useGameStore } from '@/stores/gameStore'
-import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { onBeforeUnmount, ref, watch } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
-import { type Character as CharacterT } from '@/types'
+import { type Character as CharacterT, type CharacterHair } from '@/types'
 import ConfirmationModal from '@/components/utilities/ConfirmationModal.vue'
 
 const gameStore = useGameStore()
@@ -140,25 +156,39 @@ const isLoading = ref(true)
 const characters = ref([] as CharacterT[])
 const deletingCharacter = ref(null as CharacterT | null)
 
+const hairs = ref([] as CharacterHair[])
+const selectedHair = ref(null as CharacterHair | null)
+
+watch(selectedHair, (hair: CharacterHair | null) => {
+  console.log(hair)
+})
+
 // Fetch characters
 gameStore.connection?.on('character:list', (data: any) => {
   characters.value = data
+  isLoading.value = false
+
+  // Fetch hairs
+  // @TODO: This is hacky, we should have a better way to do this
+  gameStore.connection?.emit('character:hair:list', {}, (data: CharacterHair[]) => {
+    console.log(data)
+    hairs.value = data
+  })
 })
 
-onMounted(async () => {
-  // wait 0.75 sec
-  setTimeout(() => {
-    gameStore.connection?.emit('character:list')
-    isLoading.value = false
-  }, 750)
-})
+setTimeout(() => {
+  gameStore.connection?.emit('character:list')
+}, 750)
 
 // Select character logics
 const selected_character = ref(null)
 function select_character() {
   if (!selected_character.value) return
   deletingCharacter.value = null
-  gameStore.connection?.emit('character:connect', { characterId: selected_character.value })
+  gameStore.connection?.emit('character:connect', {
+    characterId: selected_character.value,
+    hairId: selectedHair.value?.id
+  })
   gameStore.connection?.on('character:connect', (data: CharacterT) => gameStore.setCharacter(data))
 }
 
diff --git a/src/components/screens/Game.vue b/src/components/screens/Game.vue
index 9dfa6ff..844a938 100644
--- a/src/components/screens/Game.vue
+++ b/src/components/screens/Game.vue
@@ -25,7 +25,7 @@ import { useGameStore } from '@/stores/gameStore'
 import Menu from '@/components/gui/Menu.vue'
 import ExpBar from '@/components/gui/ExpBar.vue'
 import Hud from '@/components/gui/Hud.vue'
-import Zone from '@/components/zone/Zone.vue'
+import Zone from '@/components/game/zone/Zone.vue'
 import Hotkeys from '@/components/gui/Hotkeys.vue'
 import Chat from '@/components/gui/Chat.vue'
 import CharacterProfile from '@/components/gui/CharacterProfile.vue'